feat: responsive layout

juananpe · Apr 6, 2024 · bf4f097 · bf4f097
1 parent e97a66f
commit bf4f097
Show file tree

Hide file tree

Showing 4 changed files with 156 additions and 34 deletions.
diff --git a/docs/finale/index.html b/docs/finale/index.html
@@ -81,6 +81,52 @@ <h1>Conclusion</h1>
 </tbody>
 </table>
 <p class="table-caption">Table&nbsp;2.1: table caption</p>
+</div>
+
+<div class="row">
+  <div class="col-4">
+    <h2>Width 3</h2>
+    <p>
+      Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro.
+      De carne lumbering animata corpora quaeritis.
+      Summus brains sit, morbo vel maleficia?
+      De apocalypsi gorger omero undead survivor dictum mauris.
+      Hi mindless mortuis soulless creaturas,
+      imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium.
+      Qui animated corpse, cricket bat max brucks terribilem incessu zomby.
+      The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus.
+      Zonbi tattered for solum oculi eorum defunctis go lum cerebro.
+      Nescio brains an Undead zombies.
+      Sicut malus putrid voodoo horror.
+    </p>
+  </div>
+  <div class="col-6">
+    <h2>Width 6</h2>
+    <p>
+      Cum horribilem walking dead resurgere de crazed sepulcris creaturis,
+      zombie sicut de grave feeding iride et serpens.
+      Pestilentia, shaun ofthe dead scythe animated corpses ipsa screams.
+      Pestilentia est plague haec decaying ambulabat mortuos.
+      Sicut zeder apathetic malus voodoo.
+      Aenean a dolor plan et terror soulless vulnerum contagium accedunt, mortui iam vivam unlife.
+      Qui tardius moveri, brid eof reanimator sed in magna copia sint terribiles undeath legionis.
+      Alii missing oculis aliorum sicut serpere crabs nostram.
+      Putridi braindead odores kill and infect, aere implent left four dead.
+    </p>
+  </div>
+  <div class="col-2">
+    <h2>Width 2</h2>
+    <p>
+      Lucio fulci tremor est dark vivos magna.
+      Expansis creepy arm yof darkness ulnis witchcraft missing carnem armis caeruleum in locis.
+      Romero morbo Congress amarus in auras.
+      Nihil horum sagittis tincidunt, zombie slack-jawed gelida survival portenta.
+      The unleashed virus est, et iam zombie mortui ambulabunt super terram.
+      Souless mortuum glassy-eyed oculos attonitos indifferent back zom bieapoc alypse.
+      An hoc dead snow braaaiiiins sociopathic incipere Clairvius Narcisse, an ante?
+      Is bello mundi z?
+    </p>
+  </div>
 </div>
     </main>
     <footer>

diff --git a/docs/mccole.css b/docs/mccole.css
@@ -47,27 +47,37 @@
     --splash-width: 80%;
 }
 
-/* Flex grid */
-.row {
-    display: flex;
-    flex-flow: row wrap;
-    width: 100%
+/* Small screen: display rows with one column. */
+@media screen {
+  .row {
+      width: 100%
+  }
+}
+
+/* Wide screen: display rows as rows. */
+@media screen and (min-width: 60rem) {
+  .row {
+      display: flex;
+      flex-flow: row wrap;
+  }
 }
+
+/* Flex grid */
 .row > * {
   flex: 1; /* allow children to grow when space available */
 }
-.col-1 { flex-basis: 8.33%; }
-.col-2 { flex-basis: 16.66%; }
-.col-3 { flex-basis: 25%; }
-.col-4 { flex-basis: 33.33%; }
-.col-5 { flex-basis: 41.66%; }
-.col-6 { flex-basis: 50%; }
-.col-7 { flex-basis: 58.33%; }
-.col-8 { flex-basis: 66.66%; }
-.col-9 { flex-basis: 75%; }
-.col-10 { flex-basis: 83.33%; }
-.col-11 { flex-basis: 91.66%; }
-.col-12 { flex-basis: 100%; }
+.col-1 { flex-basis: calc(100% * 1/12); }
+.col-2 { flex-basis: calc(100% * 2/12); }
+.col-3 { flex-basis: calc(100% * 3/12); }
+.col-4 { flex-basis: calc(100% * 4/12); }
+.col-5 { flex-basis: calc(100% * 5/12); }
+.col-6 { flex-basis: calc(100% * 6/12); }
+.col-7 { flex-basis: calc(100% * 7/12); }
+.col-8 { flex-basis: calc(100% * 8/12); }
+.col-9 { flex-basis: calc(100% * 9/12); }
+.col-10 { flex-basis: calc(100% * 10/12); }
+.col-11 { flex-basis: calc(100% * 11/12); }
+.col-12 { flex-basis: calc(100% * 12/12); }
 
 /* Generic positioning */
 .left {
@@ -187,6 +197,11 @@ img.splash {
     width: var(--splash-width);
 }
 
+/* Make navigation controls larger */
+nav {
+    font-size: var(--size-subtitle);
+}
+
 /* Appendix list */
 ol.toc-appendices {
     list-style-type: upper-latin;

diff --git a/lib/mccole/resources/mccole.css b/lib/mccole/resources/mccole.css
@@ -47,27 +47,37 @@
     --splash-width: 80%;
 }
 
-/* Flex grid */
-.row {
-    display: flex;
-    flex-flow: row wrap;
-    width: 100%
+/* Small screen: display rows with one column. */
+@media screen {
+  .row {
+      width: 100%
+  }
+}
+
+/* Wide screen: display rows as rows. */
+@media screen and (min-width: 60rem) {
+  .row {
+      display: flex;
+      flex-flow: row wrap;
+  }
 }
+
+/* Flex grid */
 .row > * {
   flex: 1; /* allow children to grow when space available */
 }
-.col-1 { flex-basis: 8.33%; }
-.col-2 { flex-basis: 16.66%; }
-.col-3 { flex-basis: 25%; }
-.col-4 { flex-basis: 33.33%; }
-.col-5 { flex-basis: 41.66%; }
-.col-6 { flex-basis: 50%; }
-.col-7 { flex-basis: 58.33%; }
-.col-8 { flex-basis: 66.66%; }
-.col-9 { flex-basis: 75%; }
-.col-10 { flex-basis: 83.33%; }
-.col-11 { flex-basis: 91.66%; }
-.col-12 { flex-basis: 100%; }
+.col-1 { flex-basis: calc(100% * 1/12); }
+.col-2 { flex-basis: calc(100% * 2/12); }
+.col-3 { flex-basis: calc(100% * 3/12); }
+.col-4 { flex-basis: calc(100% * 4/12); }
+.col-5 { flex-basis: calc(100% * 5/12); }
+.col-6 { flex-basis: calc(100% * 6/12); }
+.col-7 { flex-basis: calc(100% * 7/12); }
+.col-8 { flex-basis: calc(100% * 8/12); }
+.col-9 { flex-basis: calc(100% * 9/12); }
+.col-10 { flex-basis: calc(100% * 10/12); }
+.col-11 { flex-basis: calc(100% * 11/12); }
+.col-12 { flex-basis: calc(100% * 12/12); }
 
 /* Generic positioning */
 .left {
@@ -187,6 +197,11 @@ img.splash {
     width: var(--splash-width);
 }
 
+/* Make navigation controls larger */
+nav {
+    font-size: var(--size-subtitle);
+}
+
 /* Appendix list */
 ol.toc-appendices {
     list-style-type: upper-latin;

diff --git a/src/finale/index.md b/src/finale/index.md
@@ -14,3 +14,49 @@ syllabus:
 -   Index entry [%i index_key_1 "first index reference" %]
 
 [% table slug="finale_table" tbl="example.tbl" caption="table caption" %]
+
+<div class="row">
+  <div class="col-4">
+    <h2>Width 3</h2>
+    <p>
+      Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro.
+      De carne lumbering animata corpora quaeritis.
+      Summus brains sit, morbo vel maleficia?
+      De apocalypsi gorger omero undead survivor dictum mauris.
+      Hi mindless mortuis soulless creaturas,
+      imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium.
+      Qui animated corpse, cricket bat max brucks terribilem incessu zomby.
+      The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus.
+      Zonbi tattered for solum oculi eorum defunctis go lum cerebro.
+      Nescio brains an Undead zombies.
+      Sicut malus putrid voodoo horror.
+    </p>
+  </div>
+  <div class="col-6">
+    <h2>Width 6</h2>
+    <p>
+      Cum horribilem walking dead resurgere de crazed sepulcris creaturis,
+      zombie sicut de grave feeding iride et serpens.
+      Pestilentia, shaun ofthe dead scythe animated corpses ipsa screams.
+      Pestilentia est plague haec decaying ambulabat mortuos.
+      Sicut zeder apathetic malus voodoo.
+      Aenean a dolor plan et terror soulless vulnerum contagium accedunt, mortui iam vivam unlife.
+      Qui tardius moveri, brid eof reanimator sed in magna copia sint terribiles undeath legionis.
+      Alii missing oculis aliorum sicut serpere crabs nostram.
+      Putridi braindead odores kill and infect, aere implent left four dead.
+    </p>
+  </div>
+  <div class="col-2">
+    <h2>Width 2</h2>
+    <p>
+      Lucio fulci tremor est dark vivos magna.
+      Expansis creepy arm yof darkness ulnis witchcraft missing carnem armis caeruleum in locis.
+      Romero morbo Congress amarus in auras.
+      Nihil horum sagittis tincidunt, zombie slack-jawed gelida survival portenta.
+      The unleashed virus est, et iam zombie mortui ambulabunt super terram.
+      Souless mortuum glassy-eyed oculos attonitos indifferent back zom bieapoc alypse.
+      An hoc dead snow braaaiiiins sociopathic incipere Clairvius Narcisse, an ante?
+      Is bello mundi z?
+    </p>
+  </div>
+</div>