front: fix top bar

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 {