feat: responsive navbar and page-content

stepanzh · Feb 15, 2024 · 0cb3bfd · 0cb3bfd
1 parent 27f2fc0
commit 0cb3bfd
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 20 deletions.
diff --git a/static/css/base.css b/static/css/base.css
@@ -129,10 +129,24 @@ a { color: var(--ui-accent-color); }
 
 .surface.full-width { width: 100%; }
 
+.page-top-content {
+  max-width: 960px;
+  margin: 0 auto;
+}
+
 .page-content {
-  margin: 12px;
+  max-width: 960px;
+  margin: 12px auto;
 }
 
+/* Switch to a minimum margin when screen is small. */
+@media only screen and (max-width: 960px){
+  .page-content { margin: 12px; }
+}
+
+.content-block > :first-child { margin-top: 0; }
+.content-block > :last-child { margin-bottom: 0; }
+
 .header {
   display: flex;
   flex-direction: row;

diff --git a/static/css/promo.css b/static/css/promo.css
@@ -1,8 +1,3 @@
-.page {
-  max-width: 600px;
-  margin: 0 auto;
-}
-
 .page-content {
   display: flex;
   flex-direction: column;

diff --git a/templates/base.html b/templates/base.html
@@ -73,20 +73,22 @@
   <div class='page'>
     {% block page_top %}
     <div class='page-top surface top-tight full-width'>
-      <header class='header'>
-        <a class='home-button' href='index.html'>
-          <span class='proportio-logo'>
-            <img class='logo-img' src='icon.svg' alt='логотип пропорцио'>
-            <span class='logo-text'>Пропорцио</span>
-          </span>
-        </a>
-      </header>
-      <nav class='nav'>
-        <a class='nav-item' href='index.html'>Приложение</a>
-        <a class='nav-item' href='promo.html'>Подарки</a>
-        <a class='nav-item' href='examples.html'>Рецепты</a>
-        <a class='nav-item' href='{{ links.payment }}' target='_blank'>Задонатить</a>
-      </nav>
+      <div class='page-top-content'>
+        <header class='header'>
+          <a class='home-button' href='index.html'>
+            <span class='proportio-logo'>
+              <img class='logo-img' src='icon.svg' alt='логотип пропорцио'>
+              <span class='logo-text'>Пропорцио</span>
+            </span>
+          </a>
+        </header>
+        <nav class='nav'>
+          <a class='nav-item' href='index.html'>Приложение</a>
+          <a class='nav-item' href='promo.html'>Подарки</a>
+          <a class='nav-item' href='examples.html'>Рецепты</a>
+          <a class='nav-item' href='{{ links.payment }}' target='_blank'>Задонатить</a>
+        </nav>
+      </div>
     </div>
     {% endblock %}