Move all side buttons to a single sidebar

4 files changed, 59 insertions, 48 deletions

diff --git a/build.sh b/build.sh
index 617645c..ee479de 100755
--- a/build.sh
+++ b/build.sh
@@ -18,14 +18,14 @@ cp template.html ${output}
 transform-li-current-a ()
 {
     local old="<li><a href=\"$1.html\">"
-    local new="<li class=\"current\"><a href=\"$1.html\">"
+    local new="<li><a class=\"current\" href=\"$1.html\">"
     echo "s/${old}/${new}/"
 }
 
 transform-li-dropdown-current-a ()
 {
     local old="<li class=\"dropdown\"><a href=\"$1.html\">"
-    local new="<li class=\"dropdown current\"><a href=\"$1.html\">"
+    local new="<li class=\"dropdown\"><a class=\"current\" href=\"$1.html\">"
     echo "s/${old}/${new}/"
 }
 
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;
diff --git a/template.html b/template.html
index 9219b8e..d6e0406 100644
--- a/template.html
+++ b/template.html
@@ -42,7 +42,6 @@
             <li><a href="gallerie.html">gallerie</a></li>
           </ol>
         </nav>
-          <a class="lang" href="">EN</a>
       </div>
     </header>
 
@@ -54,6 +53,9 @@
       <img class="button close" src="images/close.svg">
       <label for="social">Nous contacter</label>
       <div class="content">
+        <a class="lang" href="">
+          EN
+        </a>
         <a href="https://www.facebook.com/quatuorbellefeuille/"
            target="_blank" rel="noreferrer noopener">
           <img src="images/facebook-logo.svg">
@@ -66,9 +68,9 @@
            target="_blank" rel="noreferrer noopener">
           <img src="images/youtube-logo.svg">
         </a>
-        <p class="contact">
-          <a href="contact.html">contact</a>
-        </p>
+        <a class="contact" href="contact.html">
+          contact
+        </a>
       </div>
     </footer>