Move all side buttons to a single sidebar

2 files changed, 51 insertions, 42 deletions

diff --git a/stylesheets/commun.css b/stylesheets/commun.css
index 1f600c5..524b3a8 100644
--- a/stylesheets/commun.css
+++ b/stylesheets/commun.css
@@ -1,25 +1,28 @@
 body {
     --gold: #E4B63A;
+    --banner-logo-height: 11rem;
+    --banner-name-height: 2.4rem;
+    --menu-top-margin: calc((var(--banner-logo-height)
+                             - 2 * var(--banner-name-height))
+                            / 2);
 
     margin: 0;
     background-color: white;
     font-family: 'Open Sans', sans-serif;
 }
 
-.current > a {
+a {
+    color: inherit;
+}
+a.current {
     color: var(--gold);
 }
 
-header a, .contact a {
+header a {
     text-decoration: none;
-    font-size: 1.2rem;
     font-weight: bold;
 }
-
-header a, footer a {
-    color: inherit;
-}
-nav a:hover, .contact a:hover {
+nav a:hover {
     color: var(--gold);
     background: white;
 }
@@ -29,7 +32,7 @@ header.banner a {
     align-items: center;
 }
 header.banner img {
-    margin: 0.5em;
+    margin: 0.6rem;
 }
 header.banner h1 {
     margin: 0;
@@ -46,6 +49,10 @@ header.banner:hover {
     color: var(--gold);
 }
 
+nav a {
+    font-size: 1.2rem;
+}
+
 nav > ol, nav li.dropdown > ul {
     list-style-type: none;
     padding-left: 0;
@@ -55,18 +62,28 @@ nav > ol > li > a {
     padding: 0.5em 0.1em;
 }
 
-a.lang {
+footer.social a {
+    text-decoration: none;
+    font-size: 1.2rem;
+    font-weight: bold;
+}
+footer.social a.contact:hover {
+    color: var(--gold);
+    background: white;
+}
+
+footer.social a.lang {
     display: block;
-    padding: 0.5em;
+    padding: 0.5rem;
     border-radius: 50%;
     font-size: 1rem;
 
-    border: 0.15em solid black;
+    border: 0.15rem solid black;
 }
-a.lang:hover {
+footer.social a.lang:hover {
     color: white;
     background: var(--gold);
-    border: 0.15em solid var(--gold);
+    border: 0.15rem solid var(--gold);
 }
 
 footer.social > .content {
@@ -101,28 +118,25 @@ footer.legal {
         grid-column: 1;
     }
     header.banner img {
-        height: 11rem;
+        height: var(--banner-logo-height);
     }
     header.banner h1 {
-        font-size: 2.4rem;
+        font-size: var(--banner-name-height);
         font-weight: normal;
         max-width: 6em;         /* Force linebreak. */
     }
 
     header.menu {
-        grid-column: 3 / -1;
+        grid-column: 3 / -2;
     }
     header.menu > .content {
         display: grid;
-        grid-template-columns: 3fr 1fr 1fr;
+        grid-template-columns: 3fr 1fr;
     }
 
     header.menu nav {
         grid-column: 1;
-        margin-top: 2rem;
-    }
-    header.menu .lang {
-        grid-column: 3;
+        margin-top: var(--menu-top-margin);
     }
 
     nav > ol {
@@ -131,6 +145,7 @@ footer.legal {
         align-content: stretch;
         flex-wrap: wrap;
         text-align: center;
+        margin: 0;
     }
 
     nav > ol > li {
@@ -169,12 +184,6 @@ footer.legal {
         display: block;       /* Make link span whole containing block. */
     }
 
-    .lang {
-        grid-column: 5;
-        margin: auto;
-        margin-top: 3rem;
-    }
-
     main {
         grid-row: 2;
         grid-column: 1 / -2;
@@ -182,28 +191,28 @@ footer.legal {
     }
 
     footer.social {
-        grid-row: 2;
+        grid-row: 1 / -2;
         grid-column: 5;
-        position: sticky;
-        top: 0;
+        margin-top: var(--menu-top-margin);
     }
 
-    .social img {
-        width: 2em;
-        padding: 0.5em;
+    .social a {
+        display: block;
+        margin: 1rem;
     }
 
-    .contact {
+    .social a > img {
+        width: 2.2rem;
+    }
+
+    a.contact {
         /* Ideally should be just: */
         /* writing-mode: sideways-lr; */
         /* but of course We Can't Have Nice Things. */
         writing-mode: vertical-rl;
         transform: rotate(180deg);
-
-        margin: 0;
-    }
-    .contact a {
-        padding: 1em 0.5em;
+        padding: 1rem 0.5rem;
+        margin: 0;              /* Compensate padding. */
     }
 }
 
diff --git a/stylesheets/dark.css b/stylesheets/dark.css
index 8f24915..297b27a 100644
--- a/stylesheets/dark.css
+++ b/stylesheets/dark.css
@@ -3,10 +3,10 @@ body {
     color: white;
 }
 
-a.lang {
+footer.social a.lang {
     border-color: white;
 }
-a.lang:hover {
+footer.social a.lang:hover {
     color: var(--gold);
     background: white;
     border-color: white;