docs(theming): back with flexbox-based layout

ThainBBdL · Mar 3, 2022 · bfb284f · bfb284f
1 parent 078b0c4
commit bfb284f
Show file tree

Hide file tree

Showing 5 changed files with 169 additions and 118 deletions.
diff --git a/src/_includes/layouts/base.njk b/src/_includes/layouts/base.njk
@@ -16,30 +16,32 @@
     <a href="#content" class="skip">Skip to content</a>
     {% include "partials/header.njk" %}
 
-    <aside role="complementary">
-      {% block sidebar %}{% endblock %}
+    <div class="main">
+      <aside>
+        {% block sidebar %}{% endblock %}
 
-      <div class="box">
-        <p class="h2-like">Web extensions</p>
-        <ul>
-          <li>
-            <a href="https://addons.mozilla.org/en-GB/firefox/addon/a11ycss/" title="a11y.css Firefox add-on">
-              <img src="/static/firefox.svg" width="150" height="55" alt="a11y.css Firefox add-on"/>
-            </a>
-          </li>
-          <li>
-            <a href="https://chrome.google.com/webstore/detail/a11ycss/iolfinldndiiobhednboghogkiopppid?hl=fr" title="a11y.css Chrome extension">
-              <img src="/static/chrome.svg" width="150" height="57" alt="a11y.css Chrome extension"/>
-            </a>
-          </li>
-        </ul>
-      </div>
-    </aside>
+        <div class="box">
+          <p class="h2-like">Web extensions</p>
+          <ul>
+            <li>
+              <a href="https://addons.mozilla.org/en-GB/firefox/addon/a11ycss/" title="a11y.css Firefox add-on">
+                <img src="/static/firefox.svg" width="150" height="55" alt="a11y.css Firefox add-on"/>
+              </a>
+            </li>
+            <li>
+              <a href="https://chrome.google.com/webstore/detail/a11ycss/iolfinldndiiobhednboghogkiopppid?hl=fr" title="a11y.css Chrome extension">
+                <img src="/static/chrome.svg" width="150" height="57" alt="a11y.css Chrome extension"/>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </aside>
 
-    <main role="main">
-      {% block content %}{% endblock %}
-      {{ content | safe }}
-    </main>
+      <main>
+        {% block content %}{% endblock %}
+        {{ content | safe }}
+      </main>
+    </div>
     {% include "partials/footer.njk" %}
     <script src="/static/docs.js"></script>
   </body>

diff --git a/src/_includes/partials/footer.njk b/src/_includes/partials/footer.njk
@@ -1,18 +1,20 @@
-<footer role="contentinfo">
-  <p class="builtWith box">
-    Built with
-    <a href="https://www.11ty.dev/">
-      Eleventy
-      <span class="sr-only">&nbsp;(external link)</span>
-      {% include "icons/external-link.svg" %}<!--
-    --></a>
-    and supported by
-    <a href="https://www.jetbrains.com/?from=a11y.css">
-      JetBrains
-      <span class="sr-only">&nbsp;(external link)</span>
-      {% include "icons/external-link.svg" %}
-    </a>
-  </p>
-  <p>® 2014 —&nbsp;2020 <strong>Gaël Poupard</strong></p>
-<p>This project is distributed under license <a href="https://opensource.org/licenses/MIT" title="The MIT licence">MIT</a> and <a href="https://creativecommons.org/licenses/by/3.0/fr/" hreflang="fr" title="Explications de la licence">CC BY 3.0 FR</a>. <a class="end" href="#top">Back to top</a></p>
+<footer class="main">
+  <div>
+    <p class="builtWith box">
+      Built with
+      <a href="https://www.11ty.dev/">
+        Eleventy
+        <span class="sr-only">&nbsp;(external link)</span>
+        {% include "icons/external-link.svg" %}<!--
+      --></a>
+      and supported by
+      <a href="https://www.jetbrains.com/?from=a11y.css">
+        JetBrains
+        <span class="sr-only">&nbsp;(external link)</span>
+        {% include "icons/external-link.svg" %}
+      </a>
+    </p>
+    <p>® 2014 —&nbsp;2020 <strong>Gaël Poupard</strong></p>
+    <p>This project is distributed under license <a href="https://opensource.org/licenses/MIT" title="The MIT licence">MIT</a> and <a href="https://creativecommons.org/licenses/by/3.0/fr/" hreflang="fr" title="Explications de la licence">CC BY 3.0 FR</a>. <a class="end" href="#top">Back to top</a></p>
+  </div>
 </footer>
diff --git a/src/_includes/partials/header.njk b/src/_includes/partials/header.njk
@@ -1,4 +1,4 @@
-<header role="banner" id="top">
+<header class="main" id="top">
   <a href="/">
     <svg xmlns="https://www.w3.org/2000/svg" width="90" height="89.905" viewBox="0 0 180 179.81" role="img" aria-labelledby="titre">
       <title id="titre">a11y.css</title>

diff --git a/src/assets/css/docs.css b/src/assets/css/docs.css
@@ -1,47 +1,7 @@
 @charset "UTF-8";
 
 @import "normalize.css";
-
-@font-face {
-  font-family: "Fira Sans";
-  src:
-    local("Fira Sans Regular"),
-    local("FiraSans-Regular"),
-    local("Fira Sans Book"),
-    local("FiraSans-Book"),
-    url("fonts/firasans-book.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-stretch: normal;
-  font-weight: 400;
-}
-
-@font-face {
-  font-family: "Fira Sans";
-  src:
-    local("Fira Sans Bold"),
-    local("FiraSans-Bold"),
-    url("fonts/firasans-bold.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-stretch: normal;
-  font-weight: 700;
-}
-
-@font-face {
-  font-family: "Fira Sans";
-  src:
-    local("Fira Sans Regular Italic"),
-    local("FiraSans-RegularItalic"),
-    local("Fira Sans Book Italic"),
-    local("FiraSans-BookItalic"),
-    url("fonts/firasans-bookitalic.woff2") format("woff2");
-  font-display: swap;
-  font-style: italic;
-  font-stretch: normal;
-  font-weight: 400;
-}
-
+@import "fira-sans.css";
 
 /* =======================
  * = a11y.css' docs styles
@@ -59,7 +19,6 @@ html {
     sans-serif,
     Segoe UI Emoji,
     Segoe UI Symbol;
-  min-height: 100vh;
 }
 
 *,
@@ -69,41 +28,57 @@ html {
 }
 
 /**
- * . SVG en base64
+ * @note Mise en page fluide avec flexbox
+ * @author Raphaël Goetter
+ * @see http://jackintheflexbox.tumblr.com/post/105291132189/un-gabarit-simple-fluide-et-responsive-avec-un
+ * 1. crée un contexte flex pour ses enfants
+ * 2. affichage vertical
+ * 3. toute la hauteur du viewport (compatible IE9+)
+ * 4. SVG en base64
  ** @see http://www.heropatterns.com/
  */
 body {
   background-color: #f7f7f7;
   background-image: url("data:image/svg+xml,%3Csvg width='56' height='28' viewBox='0 0 56 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M56 26c-2.813 0-5.456.726-7.752 2H56v-2zm-26 2h4.087C38.707 20.783 46.795 16 56 16v-2c-.672 0-1.339.024-1.999.07L54 14a2 2 0 0 1 2-2v-2a4 4 0 0 0-3.98 3.602 28.087 28.087 0 0 0-2.793-3.862A7.994 7.994 0 0 1 56 6V4a9.988 9.988 0 0 0-8.17 4.232 28.156 28.156 0 0 0-3.03-2.634A13.979 13.979 0 0 1 56 0h-7.752a16.078 16.078 0 0 0-5.09 4.454 27.941 27.941 0 0 0-3.536-1.936c.63-.896 1.33-1.738 2.095-2.518H39.03c-.46.557-.893 1.137-1.297 1.737A27.787 27.787 0 0 0 33.723.585c.12-.196.24-.392.364-.585H30l-.001.07A28.406 28.406 0 0 0 26 .07L26 0h-4.087c.124.193.245.389.364.585a27.787 27.787 0 0 0-4.009 1.152c-.404-.6-.837-1.18-1.297-1.737h-2.688c.764.78 1.466 1.622 2.095 2.518-1.23.562-2.41 1.21-3.536 1.936A16.078 16.078 0 0 0 7.752 0H0c4.58 0 8.645 2.199 11.2 5.598a28.156 28.156 0 0 0-3.03 2.634A9.988 9.988 0 0 0 0 4v2a7.994 7.994 0 0 1 6.773 3.74 28.087 28.087 0 0 0-2.793 3.862A4 4 0 0 0 0 10v2a2 2 0 0 1 1.999 2.07C1.339 14.024.672 14 0 14v2c9.205 0 17.292 4.783 21.913 12H26a2 2 0 1 1 4 0zM7.752 28C5.456 26.726 2.812 26 0 26v2h7.752zM56 20c-6.832 0-12.936 3.114-16.971 8h2.688A19.94 19.94 0 0 1 56 22v-2zm-39.029 8C12.936 23.114 6.831 20 0 20v2a19.94 19.94 0 0 1 14.283 6h2.688zm15.01-.398a28.087 28.087 0 0 1 2.792-3.862A7.994 7.994 0 0 0 28 20a7.994 7.994 0 0 0-6.773 3.74 28.087 28.087 0 0 1 2.793 3.862 4 4 0 0 1 7.96 0zm14.287-11.865C42.318 9.864 35.61 6 28 6c-7.61 0-14.318 3.864-18.268 9.737a27.787 27.787 0 0 0-4.009-1.152C10.275 7.043 18.548 2 28 2c9.452 0 17.725 5.043 22.277 12.585a27.787 27.787 0 0 0-4.009 1.152zm-5.426 2.717a27.941 27.941 0 0 1 3.536-1.936C40.76 11.367 34.773 8 28 8s-12.76 3.367-16.378 8.518c1.23.562 2.41 1.21 3.536 1.936C18.075 14.537 22.741 12 28 12s9.925 2.537 12.842 6.454zm-4.672 3.778a28.156 28.156 0 0 1 3.03-2.634A13.979 13.979 0 0 0 28 14c-4.58 0-8.645 2.199-11.2 5.598a28.156 28.156 0 0 1 3.03 2.634A9.988 9.988 0 0 1 28 18a9.988 9.988 0 0 1 8.17 4.232z' fill='%23f3f3f3' fill-opacity='1' fill-rule='evenodd'/%3E%3C/svg%3E");
   background-size: 6rem 3rem;
   counter-reset: titles;
-  display: grid;
-  grid-template-areas:
-    "logo nav"
-    "toc main"
-    "toc footer";
-  grid-template-columns: 1fr 2fr;
-  grid-template-rows: 1fr auto 1fr;
+  display: flex;          /* 1 */
+  flex-direction: column; /* 2 */
+  margin: 0;
+  min-height: 100vh;      /* 3 */
   -webkit-font-smoothing: subpixel-antialiased;
   text-rendering: optimizeSpeed;
 }
 
-header {
-  display: contents;
+/**
+ * 1. IE fix
+ * 2. crée un contexte flex pour ses enfants
+ * 3. occupe la hauteur restante
+ * 4. affichage horizontal
+ */
+
+.main {
+  display: block;      /* 1 */
+  display: flex;       /* 2 */
+  flex: 1 1 auto;      /* 3 */
+  flex-direction: row; /* 4 */
+  justify-content: center;
 }
 
-aside,
-header > a {
+.main > * {
+  min-width: 15rem;
+  width: 33vw;
   padding: 2rem;
 }
 
-footer {
-  display: grid;
-  grid-template-areas:
-    "credits credits"
-    "copyright licence";
-  grid-area: footer;
-  padding: 0 2rem 2rem;
+.main > * + * {
+  display: block;
+  flex: 1 0 auto;
+}
+
+.main > * + * {
+  min-width: 40rem;
+  width: 67vw;
 }
 
 main {
@@ -112,6 +87,7 @@ main {
   border-radius: .25rem 0 0 .25rem;
   border-right: 0;
   overflow-x: hidden;
+  padding-left: 2rem;
 }
 
 main > * + * {
@@ -140,6 +116,7 @@ header nav ul {
 }
 
 header nav a {
+  display: inline-block;
   padding: .75em 1em;
   position: relative;
   text-decoration: none;
@@ -265,7 +242,9 @@ header nav a[aria-current="page"]::before,
 }
 
 aside {
-  justify-self: end;
+  align-items: flex-end;
+  display: flex;
+  flex-direction: column;
 }
 
 aside > * {
@@ -301,29 +280,25 @@ strong, b, legend,
 h1 {
   font-size: 3em;
   line-height: 1;
-  margin: 1em 2rem .5em;
+  margin: 1em 0 .5em;
 }
 
-h2 {
+h2[id] {
   background-color: #fcf9e9;
-  color: inherit;
   counter-increment: titles;
   display: inline-block;
+  max-width: 60rem;
   font-size: 3em;
   line-height: 1;
   margin: 1em 0 .5em;
   padding: 0 0 0 1.25ch;
   position: relative;
+  width: auto;
   z-index: 1;
 }
 
-/* @todo: WTF? */
-/*h1[id]:nth-of-type(10) ~ h1[id] {
-  padding: 0 0 0 2ch;
-}*/
-
-h2::after,
-h2::before {
+h2[id]::after,
+h2[id]::before {
   background: #f3f0e0;
   bottom: 0;
   content: "";
@@ -333,17 +308,18 @@ h2::before {
   z-index: -2;
 }
 
-h2::before {
+h2[id]::before {
   background-color: #ece7d4;
   background-image:
     radial-gradient( rgba( 0, 0, 0, .05 ) 15%, transparent 16%),
     radial-gradient( rgba( 0, 0, 0, .05 ) 15%, transparent 16%);
   background-position: 0 0, .25rem .25rem;
   background-size: .5rem .5rem;
-  min-width: 67vw;
+  min-width: 15rem;
+  width: 67vw;
 }
 
-h2::after {
+h2[id]::after {
   background-color: inherit;
   color: #e5dec8;
   content: counter(titles) ".";
@@ -490,6 +466,23 @@ a[href="#top"]::after {
   text-decoration: none;
 }
 
+footer[class] {
+  justify-content: flex-end;
+  position: relative;
+}
+
+footer[class] > div {
+  display: flex;
+  flex-flow: row wrap;
+  margin: 1.5em 0;
+  justify-content: space-between;
+  width: 67vw;
+}
+
+footer p + p {
+  text-align: right;
+}
+
 .box {
   background: white;
   border: 1px solid lightGray;
@@ -513,6 +506,10 @@ aside ul {
   padding: 0;
 }
 
+aside li + li {
+  margin-left: 2rem;
+}
+
 aside img {
   max-width: 100%;
 }
@@ -609,11 +606,23 @@ form label {
 }
 
 .builtWith {
+  background: white;
+  border: 1px solid lightGray;
   border-radius: 0 0 .25rem .25rem;
   border-top: 0;
-  grid-area: credits;
-  justify-self: end;
+  box-shadow: inset 0 0 0 .25rem rgba( 0, 0, 0, .05 );
   margin: 0;
+  padding: 1rem;
+  position: absolute;
+  right: 2rem;
+  top: 0;
+}
+
+.builtWith a,
+.builtWith a * {
+  text-align: right;
+  display: inline-block;
+  vertical-align: middle;
 }
 
 footer p:last-child {
@@ -710,7 +719,6 @@ footer p:last-child {
     text-align: center;
   }
 
-  main > *,
   .main > * {
     padding: 1rem;
   }