Merge pull request #1907 from To1ne/toon-responsive-graphs

small-and-fast: make bar-graph table responsive
git · Oct 18, 2024 · 50f92d2 · 50f92d2
2 parents b1efd15 + 77d0c63
commit 50f92d2
Show file tree

Hide file tree

Showing 4 changed files with 246 additions and 229 deletions.
diff --git a/assets/sass/about.scss b/assets/sass/about.scss
@@ -0,0 +1,71 @@
+.bar-chart-grid {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+}
+
+@media (max-width: 760px) {
+  .bar-chart-grid {
+    grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
+  }
+}
+
+.bar-chart {
+  display: inline-grid;
+
+  /* Got the idea of using <dl>, <dt>, and <dd> from:
+   * https://css-tricks.com/making-charts-with-css/ */
+  dt {
+    grid-column: 1 / 4;
+    text-align: center;
+  }
+
+  dd {
+    padding: 5px;
+    margin: 0;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+  }
+
+  dd + dd {
+    border-left: 1px solid #ccc;
+  }
+
+  progress {
+  /* Reset the default appearance */
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+
+    writing-mode: vertical-lr;
+
+    width: 2em;
+    height: 5em;
+    background: none;
+    border: none;
+    position: relative;
+  }
+
+  progress::-webkit-progress-bar {
+    background: none;
+  }
+
+  progress::-webkit-progress-value {
+    /* Chrome (and derivatives) are stubborn to attach the bar to the top */
+    bottom: 0;
+    position: absolute;
+  }
+
+  progress.git::-moz-progress-bar {
+    background-color: #E09FA0;
+  }
+  progress.git::-webkit-progress-value {
+    background-color: #E09FA0;
+  }
+  progress.svn::-moz-progress-bar {
+    background-color: #E05F49;
+  }
+  progress.svn::-webkit-progress-value {
+    background-color: #E05F49;
+  }
+}
diff --git a/assets/sass/application.scss b/assets/sass/application.scss
@@ -26,6 +26,7 @@ $baseurl: "{{ .Site.BaseURL }}{{ if (and (ne .Site.BaseURL "/") (ne .Site.BaseUR
 @import 'book';
 @import 'book2';
 @import 'lists';
+@import 'about';
 
 code {
   display: inline;
@@ -49,64 +50,3 @@ pre {
 .d-flex{
   display: flex;
 }
-
-.bar-chart {
-  display: inline-grid;
-
-  /* Got the idea of using <dl>, <dt>, and <dd> from:
-   * https://css-tricks.com/making-charts-with-css/ */
-  dt {
-    grid-column: 1 / 4;
-    text-align: center;
-  }
-
-  dd {
-    padding: 5px;
-    margin: 0;
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-  }
-
-  dd + dd {
-    border-left: 1px solid #ccc;
-  }
-
-  progress {
-  /* Reset the default appearance */
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-
-    writing-mode: vertical-lr;
-
-    width: 2em;
-    height: 5em;
-    background: none;
-    border: none;
-    position: relative;
-  }
-
-  progress::-webkit-progress-bar {
-    background: none;
-  }
-
-  progress::-webkit-progress-value {
-    /* Chrome (and derivatives) are stubborn to attach the bar to the top */
-    bottom: 0;
-    position: absolute;
-  }
-
-  progress.git::-moz-progress-bar {
-    background-color: #E09FA0;
-  }
-  progress.git::-webkit-progress-value {
-    background-color: #E09FA0;
-  }
-  progress.svn::-moz-progress-bar {
-    background-color: #E05F49;
-  }
-  progress.svn::-webkit-progress-value {
-    background-color: #E05F49;
-  }
-}