From abd9e189b472d90cc592d50555ca107e83bba3a2 Mon Sep 17 00:00:00 2001
From: Kévin Le Gouguec <kevin.legouguec@gmail.com>
Date: Wed, 18 Nov 2020 19:10:49 +0100
Subject: Simplify div hierarchy; use grid display

---
 artistes.css  |  11 ------
 artistes.html | 122 +++++++++++++++++++++++++++++-----------------------------
 commun.css    |  34 +++++++++++-----
 3 files changed, 84 insertions(+), 83 deletions(-)

diff --git a/artistes.css b/artistes.css
index 3040559..4ebe8c4 100644
--- a/artistes.css
+++ b/artistes.css
@@ -1,14 +1,3 @@
-main {
-    display: flex;
-    background: #f00;
-}
-
-.main-social {
-    overflow: auto;
-    flex-grow: 1;
-    background: #f44;
-}
-
 main div {
     padding: 2%;
 }
diff --git a/artistes.html b/artistes.html
index b7ecaed..09da336 100644
--- a/artistes.html
+++ b/artistes.html
@@ -21,73 +21,71 @@
     </nav>
   </header>
 
-  <div class="main-social">
-    <header class="social">
-      <img src="https://upload.wikimedia.org/wikipedia/en/9/9f/Twitter_bird_logo_2012.svg">
-      <img src="https://upload.wikimedia.org/wikipedia/commons/c/c2/F_icon.svg">
-      <p class="contact">
-        Contact
-      </p>
-    </header>
+  <main>
+    <div id="photos">
+      <img src="https://v3.goldensun-world.com/img/artwork/vlad_b.jpg">
+      <img src="https://v3.goldensun-world.com/img/artwork/garet_b.jpg">
+      <img src="https://v3.goldensun-world.com/img/artwork/ivan_b.jpg">
+      <img src="https://v3.goldensun-world.com/img/artwork/sofia_b.jpg">
+    </div>
 
-    <main>
-      <div id="photos">
-        <img src="https://v3.goldensun-world.com/img/artwork/vlad_b.jpg">
-        <img src="https://v3.goldensun-world.com/img/artwork/garet_b.jpg">
-        <img src="https://v3.goldensun-world.com/img/artwork/ivan_b.jpg">
-        <img src="https://v3.goldensun-world.com/img/artwork/sofia_b.jpg">
-      </div>
+    <div id="bio">
+      <h1>Un premier titre</h1>
+      <p>
+        Senectus et netus et malesuada fames ac turpis. Ut sem nulla
+        pharetra diam sit amet nisl suscipit adipiscing. Et netus et
+        malesuada fames ac. Turpis massa sed elementum tempus egestas
+        sed sed. Et netus et malesuada fames ac. Enim sit amet venenatis
+        urna cursus. Fermentum et sollicitudin ac orci
+        phasellus. Sollicitudin nibh sit amet commodo nulla facilisi
+        nullam vehicula. Pellentesque adipiscing commodo elit at
+        imperdiet. Eget nunc scelerisque viverra mauris in. Eu sem
+        integer vitae justo eget magna fermentum iaculis. Feugiat nisl
+        pretium fusce id velit. Facilisis gravida neque convallis a cras
+        semper. Scelerisque eu ultrices vitae auctor eu augue ut
+        lectus. Aliquam purus sit amet luctus venenatis.
+      </p>
+      <p>
+        Felis imperdiet proin fermentum leo vel orci porta. Imperdiet
+        massa tincidunt nunc pulvinar. Porta lorem mollis aliquam ut
+        porttitor leo. Morbi tincidunt augue interdum velit euismod in
+        pellentesque massa. In ornare quam viverra orci sagittis
+        eu. Elementum integer enim neque volutpat ac. Adipiscing
+        bibendum est ultricies integer quis. Quisque non tellus orci ac
+        auctor augue. Dictum fusce ut placerat orci nulla pellentesque
+        dignissim enim. Vitae congue eu consequat ac felis donec et
+        odio. Aliquam malesuada bibendum arcu vitae elementum curabitur
+        vitae nunc sed.
+      </p>
 
-      <div id="bio">
-        <h1>Un premier titre</h1>
-        <p>
-          Senectus et netus et malesuada fames ac turpis. Ut sem nulla
-          pharetra diam sit amet nisl suscipit adipiscing. Et netus et
-          malesuada fames ac. Turpis massa sed elementum tempus egestas
-          sed sed. Et netus et malesuada fames ac. Enim sit amet venenatis
-          urna cursus. Fermentum et sollicitudin ac orci
-          phasellus. Sollicitudin nibh sit amet commodo nulla facilisi
-          nullam vehicula. Pellentesque adipiscing commodo elit at
-          imperdiet. Eget nunc scelerisque viverra mauris in. Eu sem
-          integer vitae justo eget magna fermentum iaculis. Feugiat nisl
-          pretium fusce id velit. Facilisis gravida neque convallis a cras
-          semper. Scelerisque eu ultrices vitae auctor eu augue ut
-          lectus. Aliquam purus sit amet luctus venenatis.
-        </p>
-        <p>
-          Felis imperdiet proin fermentum leo vel orci porta. Imperdiet
-          massa tincidunt nunc pulvinar. Porta lorem mollis aliquam ut
-          porttitor leo. Morbi tincidunt augue interdum velit euismod in
-          pellentesque massa. In ornare quam viverra orci sagittis
-          eu. Elementum integer enim neque volutpat ac. Adipiscing
-          bibendum est ultricies integer quis. Quisque non tellus orci ac
-          auctor augue. Dictum fusce ut placerat orci nulla pellentesque
-          dignissim enim. Vitae congue eu consequat ac felis donec et
-          odio. Aliquam malesuada bibendum arcu vitae elementum curabitur
-          vitae nunc sed.
-        </p>
+      <h1>Un second titre</h1>
+      <p>
+        Vitae congue eu consequat ac. Nullam ac tortor vitae
+        purus. Laoreet id donec ultrices tincidunt arcu non sodales
+        neque sodales. Ut faucibus pulvinar elementum integer enim neque
+        volutpat ac tincidunt. Proin sed libero enim sed faucibus turpis
+        in eu. Facilisis magna etiam tempor orci eu lobortis
+        elementum. Lobortis elementum nibh tellus molestie nunc. Vitae
+        tortor condimentum lacinia quis vel eros donec. Ut etiam sit
+        amet nisl purus in mollis nunc sed. Leo in vitae turpis
+        massa. Nam at lectus urna duis convallis convallis tellus id
+        interdum. Morbi non arcu risus quis varius quam. Ac turpis
+        egestas maecenas pharetra convallis posuere morbi leo. Magna
+        etiam tempor orci eu.
+      </p>
+    </div>
 
-        <h1>Un second titre</h1>
-        <p>
-          Vitae congue eu consequat ac. Nullam ac tortor vitae
-          purus. Laoreet id donec ultrices tincidunt arcu non sodales
-          neque sodales. Ut faucibus pulvinar elementum integer enim neque
-          volutpat ac tincidunt. Proin sed libero enim sed faucibus turpis
-          in eu. Facilisis magna etiam tempor orci eu lobortis
-          elementum. Lobortis elementum nibh tellus molestie nunc. Vitae
-          tortor condimentum lacinia quis vel eros donec. Ut etiam sit
-          amet nisl purus in mollis nunc sed. Leo in vitae turpis
-          massa. Nam at lectus urna duis convallis convallis tellus id
-          interdum. Morbi non arcu risus quis varius quam. Ac turpis
-          egestas maecenas pharetra convallis posuere morbi leo. Magna
-          etiam tempor orci eu.
-        </p>  
-      </div>
+  </main>
 
-    </main>
+  <footer class="social">
+    <img src="https://upload.wikimedia.org/wikipedia/en/9/9f/Twitter_bird_logo_2012.svg">
+    <img src="https://upload.wikimedia.org/wikipedia/commons/c/c2/F_icon.svg">
+    <p class="contact">
+      Contact
+    </p>
+  </footer>
 
-  </div>
-  <footer>
+  <footer class="legal">
     <p>Mentions légales - Plan du site</p>
   </footer>
 </body>
diff --git a/commun.css b/commun.css
index a272264..7248bfc 100644
--- a/commun.css
+++ b/commun.css
@@ -1,4 +1,13 @@
+body {
+    height: 100vh;
+    display: grid;
+    grid-template-columns: 9fr 1fr;
+    grid-template-rows: auto 1fr auto;
+    margin: 0;
+}
+
 header.banner {
+    grid-column: 1 / -1;
     display: flex;
     align-items: center;
 }
@@ -47,8 +56,18 @@ nav ol li {
     flex: 1;
 }
 
-header.social {
-    float: right;
+main {
+    grid-row: 2;
+    grid-column: 1;
+    display: flex;
+    overflow: auto;
+    background: #f00;
+}
+
+footer.social {
+    grid-row: 2;
+    grid-column: 2;
+
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -68,18 +87,13 @@ header.social {
     /* but of course We Can't Have Nice Things. */
     writing-mode: vertical-rl;
     transform: rotate(180deg);
+
     margin: 0;
     margin-inline-start: 0.5em;
 }
 
 
-body {
-    height: 100vh;
-    display: flex;
-    flex-direction: column;
-    margin: 0;
-}
-
-footer {
+footer.legal {
+    grid-column: 1 / -1;
     margin: auto;
 }
-- 
cgit v1.2.3