Tweak cheatsheet CSS (#1658)

- Reduces use of “magic numbers” by using calc() - Reduces number of selector blocks, avoiding repetition - Removes units from 0 values
elixir-lang · Feb 1, 2023 · 5331a4b · 5331a4b
1 parent 2d14453
commit 5331a4b
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 39 deletions.
diff --git a/assets/css/content/cheatsheet.css b/assets/css/content/cheatsheet.css
@@ -215,16 +215,18 @@
     width: 100%;
   }
 
+  .page-cheatmd section:is(.col-2, .col-2-left, .col-3) {
+    column-gap: 40px;
+  }
+
   .page-cheatmd section.col-2 {
     column-count: 2;
-    column-gap: 40px;
     height: auto;
   }
 
   .page-cheatmd section.col-2-left {
     display: grid;
-    grid-template-columns: 33% 63.2%;
-    column-gap: 40px;
+    grid-template-columns: calc(100% / 3) auto;
   }
 
   .page-cheatmd section.col-2-left > h2 {
@@ -233,7 +235,6 @@
 
   .page-cheatmd section.col-3 {
     column-count: 3;
-    column-gap: 40px;
     height: auto;
   }
 
@@ -243,7 +244,7 @@
   }
 
   .page-cheatmd section.list-4 > ul > li {
-    flex: 0 0 25%;
+    flex: 0 0 calc(100% / 4);
   }
 
   .page-cheatmd section.list-6 > ul {
@@ -252,15 +253,14 @@
   }
 
   .page-cheatmd section.list-6 > ul > li {
-    flex: 0 0 16.6667%;
+    flex: 0 0 calc(100% / 6);
   }
 
   /* Media query */
 
   @media (max-width: 1400px) {
     .page-cheatmd section.col-3 {
       column-count: 2;
-      column-gap: 40px;
     }
 
     .page-cheatmd section.col-2-left {
@@ -270,33 +270,24 @@
   }
 
   @media (max-width: 1200px) {
-    .page-cheatmd section.col-3,
-    .page-cheatmd section.col-2 {
+    .page-cheatmd section:is(.col-2, .col-3) {
       column-count: 1;
     }
 
     .page-cheatmd section.list-6 > ul > li {
-      flex: 0 0 25%;
+      flex: 0 0 calc(100% / 4);
     }
   }
 
   @media (max-width: 1000px) {
-    .page-cheatmd section.list-4 > ul > li {
-      flex: 0 0 33%;
-    }
-
-    .page-cheatmd section.list-6 > ul > li {
-      flex: 0 0 33%;
+    .page-cheatmd section:is(.list-4, .list-6) > ul > li {
+      flex: 0 0 calc(100% / 3);
     }
   }
 
   @media (max-width: 600px) {
-    .page-cheatmd section.list-4 > ul > li {
-      flex: 0 0 50%;
-    }
-
-    .page-cheatmd section.list-6 > ul > li {
-      flex: 0 0 50%;
+    .page-cheatmd section:is(.list-4, .list-6) > ul > li {
+      flex: 0 0 calc(100% / 2);
     }
 
     .page-cheatmd section.width-50 {

diff --git a/assets/css/print-cheatsheet.css b/assets/css/print-cheatsheet.css
@@ -7,16 +7,18 @@
     font-size: .85em;
   }
 
+  .page-cheatmd section:is(.col-2, .col-2-left) {
+    column-gap: 20px;
+  }
+
   .page-cheatmd section.col-2 {
     column-count: 2;
-    column-gap: 20px;
     height: auto;
   }
 
   .page-cheatmd section.col-2-left {
     display: grid;
-    grid-template-columns: 33% 63.2%;
-    column-gap: 20px;
+    grid-template-columns: calc(100% / 3) auto;
   }
 
   .page-cheatmd section.col-2-left > h2 {
@@ -31,19 +33,14 @@
   }
 
   .page-cheatmd section.list-4 > ul > li {
-    flex: 0 0 25%;
+    flex: 0 0 calc(100% / 4);
   }
 
   .page-cheatmd section.list-6 > ul > li {
-    flex: 0 0 16.6667%;
+    flex: 0 0 calc(100% / 6);
   }
 
-  .page-cheatmd section.list-4 > ul {
-    display: flex;
-    flex-wrap: wrap;
-  }
-
-  .page-cheatmd section.list-6 > ul {
+  .page-cheatmd section:is(.list-4, .list-6) > ul {
     display: flex;
     flex-wrap: wrap;
   }
@@ -61,7 +58,7 @@
   /* h1 */
 
   .page-cheatmd h1 {
-    margin-top: 0em;
+    margin-top: 0;
     margin-bottom: .5em;
   }
 
@@ -131,15 +128,15 @@
     padding: .5em;
     border: solid;
     border-color: var(--gray300);
-    border-width: 1px 1px 0px 1px;
+    border-width: 1px 1px 0 1px;
   }
 
   .page-cheatmd .content-inner section p + p {
-    border-width: 0px 1px 0px 1px;
+    border-width: 0 1px 0 1px;
   }
 
   .page-cheatmd .content-inner section p:last-of-type {
-    border-width: 0px 1px 1px 1px;
+    border-width: 0 1px 1px 1px;
   }
 
   .page-cheatmd .content-inner section p:only-of-type {
@@ -169,7 +166,7 @@
   }
 
   .page-cheatmd .content-inner tbody tr {
-    border-width: 0px 1px 1px 1px;
+    border-width: 0 1px 1px 1px;
     border-style: solid;
     border-color: var(--gray200);
   }
@@ -189,7 +186,7 @@
   /* Code Blocks */
 
   .page-cheatmd pre {
-    margin: -1px 0px -1px 0px;
+    margin: -1px 0 -1px 0;
   }
 
   /* Lists */