quatuorbellefeuille.com

commit 33c4c87eedd08e136f427273bffea13ddf3d8613
parent f2559fee5f7caeaa773fdd8708f11e2441976039
Author: Kévin Le Gouguec <kevin.legouguec@gmail.com>
Date:   Sun,  7 Mar 2021 00:07:26 +0100

Add more contrast to navigation elements on index page

Diffstat:
M
stylesheets/commun.css
 | 
9
+++++----
M
stylesheets/index.css
 | 
8
++++++++

2 files changed, 13 insertions(+), 4 deletions(-)
diff --git a/stylesheets/commun.css b/stylesheets/commun.css
@@ -117,7 +117,7 @@ footer.legal {
 
         min-height: 100vh;
         display: grid;
-        grid-template-columns: 2fr 1fr 4fr 1fr auto;
+        grid-template-columns: 2fr 1fr 5fr 1fr auto;
         grid-template-rows: auto 1fr auto;
     }
 
@@ -130,7 +130,7 @@ footer.legal {
     }
 
     header.menu {
-        grid-column: 3 / -2;
+        grid-column: 3;
         display: grid;
         grid-template-columns: 3fr 1fr;
     }
@@ -163,7 +163,7 @@ footer.legal {
 
     @media (min-width: 80em) {
         nav > ol {
-            grid-template-columns: repeat(auto-fill, minmax(8em, 1fr));
+            grid-template-columns: repeat(4, minmax(8em, 1fr));
         }
     }
 
@@ -214,7 +214,7 @@ footer.legal {
     footer.social {
         grid-row: 1 / -2;
         grid-column: 5;
-        padding: var(--menu-top-margin) 1em 0;
+        margin: var(--menu-top-margin) 1em 0;
     }
 
     footer.social a {
@@ -234,6 +234,7 @@ footer.legal {
         transform: rotate(180deg);
         padding: 1rem 0.5rem;
         margin: 0;              /* Compensate padding. */
+        margin-bottom: 0.5em;
     }
 }
 
diff --git a/stylesheets/index.css b/stylesheets/index.css
@@ -70,3 +70,11 @@ a#next-concert:hover {
         top: 10%;
      }
 }
+
+@media (min-width: 40em) {
+    header.menu > nav,
+    footer.social {
+        background: #0004;
+        margin-bottom: auto;
+    }
+}