From b661407d801c8ccaa7773ae30f0fc26a1d70ffff Mon Sep 17 00:00:00 2001 From: Stanisław Zagórowski Date: Wed, 30 Aug 2023 17:45:03 +0200 Subject: front: fix top bar --- src/app.css | 10 ++++++++-- src/components/navbar.css | 9 ++++++++- 2 files changed, 16 insertions(+), 3 deletions(-) diff --git a/src/app.css b/src/app.css index 4cd5008..b4086a2 100644 --- a/src/app.css +++ b/src/app.css @@ -8,8 +8,9 @@ #app { margin: 0 auto; - display: flex; text-align: center; + align-content: center; + justify-content: center; } .logo { @@ -24,10 +25,15 @@ } .main-info { - margin-top: 80px; text-align: center; } +@media (min-width: 1150px) { + .main-info { + margin-top: 72px; + } +} + .main-info-image { width: 128px; height: 128px; diff --git a/src/components/navbar.css b/src/components/navbar.css index 18390bb..466fdd6 100644 --- a/src/components/navbar.css +++ b/src/components/navbar.css @@ -1,3 +1,4 @@ +/* on big screens, navbar is fixed to the top of the screen */ .navbar-container { position: fixed; background-color: var(--color-bg); @@ -5,7 +6,13 @@ width: 100%; z-index: 9999; margin: auto; - width: 100%; +} + +/* on smaller ones, make it behave as a normal element laid out at the top of the page */ +@media (max-width: 1150px) { + .navbar-container { + position: static; + } } .navbar { -- cgit v1.3.1