From 6fdd833d4db2591258693afcaf864103509cee00 Mon Sep 17 00:00:00 2001
From: "joseph@dxw.com" <joseph@dxw.com>
Date: Fri, 29 Nov 2024 22:03:30 +0000
Subject: [PATCH] Reorganise CSS

---
 .stylelintrc.json                             |   3 +-
 .../stylesheets/application.tailwind.css.scss | 208 +-----------------
 app/assets/stylesheets/forecast-page.scss     | 106 +++++++++
 .../stylesheets/{leaflet.scss => map.scss}    |   0
 app/assets/stylesheets/text-block.scss        | 139 ++++++++++++
 5 files changed, 254 insertions(+), 202 deletions(-)
 create mode 100644 app/assets/stylesheets/forecast-page.scss
 rename app/assets/stylesheets/{leaflet.scss => map.scss} (100%)
 create mode 100644 app/assets/stylesheets/text-block.scss

diff --git a/.stylelintrc.json b/.stylelintrc.json
index 848d9f26..068a5973 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -8,6 +8,7 @@
       {
         "ignoreAtRules": ["tailwind"]
       }
-    ]
+    ],
+    "scss/load-partial-extension": "always"
   }
 }
diff --git a/app/assets/stylesheets/application.tailwind.css.scss b/app/assets/stylesheets/application.tailwind.css.scss
index d17de55f..2b155f3e 100644
--- a/app/assets/stylesheets/application.tailwind.css.scss
+++ b/app/assets/stylesheets/application.tailwind.css.scss
@@ -2,11 +2,13 @@
 @import "@maptiler/geocoding-control/style.css"; /* Geocoding (search) control */
 @import "leaflet.locatecontrol/dist/L.Control.Locate.min.css"; /* Geolocation button */
 @import "leaflet.fullscreen/Control.FullScreen.css"; /* Fullscreen button */
-@import "leaflet.scss"; /* stylelint-disable-line scss/load-partial-extension */
-@import "daqi-levels.scss"; /* stylelint-disable-line scss/load-partial-extension */
-@import "share.scss"; /* stylelint-disable-line scss/load-partial-extension */
-@import "header.scss"; /* stylelint-disable-line scss/load-partial-extension */
-@import "footer.scss"; /* stylelint-disable-line scss/load-partial-extension */
+@import "header.scss";
+@import "forecast-page.scss";
+@import "map.scss";
+@import "daqi-levels.scss";
+@import "share.scss";
+@import "text-block.scss";
+@import "footer.scss";
 
 @tailwind base;
 @tailwind components;
@@ -16,199 +18,3 @@
   --main-colour: #3880d1;
   --main-colour-light: #dae7f7;
 }
-
-.tabs {
-  @apply flex flex-row items-stretch border-b-[1px] border-zinc-500 mx-4;
-
-  border-radius: 10px 10px 0 0;
-  gap: 0.5rem;
-}
-
-.tab {
-  @apply flex-1 px-1 py-4 text-xs text-center font-bold border-[1px] cursor-pointer;
-
-  border-radius: 10px 10px 0 0;
-
-  &.active {
-    @apply border-zinc-500 border-solid border-b-0 -mb-[1px];
-  }
-
-  &.inactive {
-    @apply border-gray-400 border-dashed border-b-0 text-gray-400 bg-white;
-  }
-
-  .daqi-indicator {
-    @apply size-7 rounded-full mx-auto my-1 flex justify-center items-center p-[3px];
-  }
-
-  .daqi-label {
-    @apply text-base;
-  }
-
-  .daqi-value {
-    @apply font-normal;
-  }
-}
-
-.tab-contents {
-  @apply p-4 mx-4 border-[1px] border-t-0 border-zinc-500;
-
-  border-radius: 0 0 10px 10px;
-}
-
-#map-wrapper {
-  @apply flex mt-2;
-
-  .map {
-    @apply w-full h-80;
-  }
-
-  .daqi-scale {
-    @apply flex flex-col-reverse;
-
-    div {
-      @apply flex py-1 justify-center items-center;
-
-      width: 2rem;
-      height: 10%;
-    }
-  }
-}
-
-.predictions {
-  > * {
-    @apply py-2 border-b border-gray-300;
-  }
-
-  dd {
-    @apply text-right;
-  }
-
-  .guidance {
-    @apply text-sm mt-2 p-4;
-  }
-}
-
-.forecast-timestamp {
-  @apply text-xs text-gray-500 text-center mt-2 block italic;
-}
-
-.sharing {
-  button {
-    @apply flex mx-auto mt-2 px-8 py-2 rounded-md text-white justify-center;
-
-    background-color: var(--main-colour);
-  }
-}
-
-.learning,
-.subscribe {
-  background-color: var(--main-colour-light);
-
-  @apply p-8 mt-4 text-center;
-
-  header {
-    @apply font-bold;
-  }
-
-  a {
-    @apply inline-block py-2 px-8 rounded-md text-white mt-4;
-
-    background-color: var(--main-colour);
-  }
-}
-
-.text-block {
-  h1 {
-    @apply text-2xl font-bold mt-5 mb-3;
-  }
-
-  h2 {
-    @apply text-xl font-bold mt-5 mb-3;
-  }
-
-  h3 {
-    @apply text-lg font-bold mt-5 mb-3;
-  }
-
-  h4 {
-    @apply text-base font-bold mt-3 mb-1;
-  }
-
-  ul {
-    @apply list-disc list-inside;
-
-    li {
-      @apply ml-2;
-    }
-  }
-
-  p {
-    @apply mb-2;
-
-    a {
-      @apply text-blue-500 underline;
-    }
-  }
-
-  table {
-    @apply max-w-sm border-collapse;
-
-    th {
-      @apply px-2 py-1 border border-gray-400;
-    }
-
-    td {
-      @apply px-2 py-1 border border-gray-400;
-    }
-  }
-
-  details {
-    summary {
-      cursor: pointer;
-
-      &::marker {
-        content: none; /* Hide the default marker */
-      }
-
-      h3 {
-        margin: 0;
-
-        &::after {
-          content: "\002B"; /* Unicode character for plus sign */
-          display: flex;
-          width: 1.5rem;
-          aspect-ratio: 1;
-          float: right;
-          align-items: center;
-          justify-content: center;
-          padding-bottom: 3px;
-          font-size: 1.3rem;
-          line-height: 0;
-          font-weight: normal;
-          color: black;
-          border: 1px solid black;
-          border-radius: 100%;
-        }
-      }
-    }
-
-    &[open] summary h3 {
-      margin-bottom: 1rem;
-
-      &::after {
-        content: "\2212"; /* Unicode character for minus sign */
-      }
-    }
-  }
-}
-
-.how-forecasts-are-made {
-  @apply py-8 px-4;
-
-  background-color: #eee;
-}
-
-select {
-  @apply inline-flex flex-row w-full gap-x-1.5 rounded-md bg-white px-3 py-2 text-base font-semibold text-gray-500 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50;
-}
diff --git a/app/assets/stylesheets/forecast-page.scss b/app/assets/stylesheets/forecast-page.scss
new file mode 100644
index 00000000..186dfb9d
--- /dev/null
+++ b/app/assets/stylesheets/forecast-page.scss
@@ -0,0 +1,106 @@
+.tabs {
+  @apply flex flex-row items-stretch border-b-[1px] border-zinc-500 mx-4;
+
+  border-radius: 10px 10px 0 0;
+  gap: 0.5rem;
+
+  .tab {
+    @apply flex-1 px-1 py-4 text-xs text-center font-bold border-[1px] cursor-pointer;
+
+    border-radius: 10px 10px 0 0;
+
+    &.active {
+      @apply border-zinc-500 border-solid border-b-0 -mb-[1px];
+    }
+
+    &.inactive {
+      @apply border-gray-400 border-dashed border-b-0 text-gray-400 bg-white;
+    }
+
+    .daqi-indicator {
+      @apply size-7 rounded-full mx-auto my-1 flex justify-center items-center p-[3px];
+    }
+
+    .daqi-label {
+      @apply text-base;
+    }
+
+    .daqi-value {
+      @apply font-normal;
+    }
+  }
+}
+
+.tab-contents {
+  @apply p-4 mx-4 border-[1px] border-t-0 border-zinc-500;
+
+  border-radius: 0 0 10px 10px;
+}
+
+#map-wrapper {
+  @apply flex mt-2;
+
+  .map {
+    @apply w-full h-80;
+  }
+
+  .daqi-scale {
+    @apply flex flex-col-reverse;
+
+    div {
+      @apply flex py-1 justify-center items-center;
+
+      width: 2rem;
+      height: 10%;
+    }
+  }
+}
+
+.predictions {
+  > * {
+    @apply py-2 border-b border-gray-300;
+  }
+
+  dd {
+    @apply text-right;
+  }
+
+  .guidance {
+    @apply text-sm mt-2 p-4;
+  }
+}
+
+.forecast-timestamp {
+  @apply text-xs text-gray-500 text-center mt-2 block italic;
+}
+
+.sharing {
+  button {
+    @apply flex mx-auto mt-2 px-8 py-2 rounded-md text-white justify-center;
+
+    background-color: var(--main-colour);
+  }
+}
+
+.learning,
+.subscribe {
+  background-color: var(--main-colour-light);
+
+  @apply p-8 mt-4 text-center;
+
+  header {
+    @apply font-bold;
+  }
+
+  a {
+    @apply inline-block py-2 px-8 rounded-md text-white mt-4;
+
+    background-color: var(--main-colour);
+  }
+}
+
+.how-forecasts-are-made {
+  @apply py-8 px-4;
+
+  background-color: #eee;
+}
diff --git a/app/assets/stylesheets/leaflet.scss b/app/assets/stylesheets/map.scss
similarity index 100%
rename from app/assets/stylesheets/leaflet.scss
rename to app/assets/stylesheets/map.scss
diff --git a/app/assets/stylesheets/text-block.scss b/app/assets/stylesheets/text-block.scss
new file mode 100644
index 00000000..5bf2f42b
--- /dev/null
+++ b/app/assets/stylesheets/text-block.scss
@@ -0,0 +1,139 @@
+.h1 {
+  @apply text-2xl font-bold mt-5 mb-3;
+}
+
+.h2 {
+  @apply text-xl font-bold mt-5 mb-3;
+}
+
+.h3 {
+  @apply text-lg font-bold mt-5 mb-3;
+}
+
+.h4 {
+  @apply text-base font-bold mt-3 mb-1;
+}
+
+.a {
+  @apply text-blue-500 underline;
+}
+
+.text-block {
+  h1 {
+    @apply h1;
+  }
+
+  h2 {
+    @apply h2;
+  }
+
+  h3 {
+    @apply h3;
+  }
+
+  h4 {
+    @apply h4;
+  }
+
+  ul.bullets {
+    @apply list-disc list-inside;
+
+    li {
+      @apply ml-2;
+    }
+  }
+
+  p {
+    @apply mb-2;
+
+    a {
+      @apply a;
+    }
+  }
+
+  table {
+    @apply max-w-sm border-collapse;
+
+    th {
+      @apply px-2 py-1 border border-gray-400;
+    }
+
+    td {
+      @apply px-2 py-1 border border-gray-400;
+    }
+  }
+
+  dl {
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+    border-top: 1px solid #ccc;
+
+    dt,
+    dd {
+      @apply p-2;
+
+      border-bottom: 1px solid #ccc;
+    }
+
+    dt {
+      @apply font-bold bg-gray-200;
+    }
+  }
+
+  ul {
+    border-top: 1px solid #ccc;
+
+    li {
+      @apply py-2;
+
+      border-bottom: 1px solid #ccc;
+    }
+  }
+}
+
+details {
+  summary {
+    cursor: pointer;
+
+    &::marker {
+      content: none; /* Hide the default marker */
+    }
+
+    h4 {
+      margin: 0 !important;
+
+      &::after {
+        content: "\002B"; /* Unicode character for plus sign */
+        display: flex;
+        width: 1.5rem;
+        aspect-ratio: 1;
+        float: right;
+        align-items: center;
+        justify-content: center;
+        padding-bottom: 3px;
+        font-size: 1.3rem;
+        line-height: 0;
+        font-weight: normal;
+        color: black;
+        border: 1px solid black;
+        border-radius: 100%;
+      }
+    }
+
+    p {
+      margin: 0 !important;
+    }
+  }
+
+  &[open] summary h4 {
+    margin-bottom: 1rem;
+
+    &::after {
+      content: "\2212"; /* Unicode character for minus sign */
+    }
+  }
+}
+
+select {
+  @apply inline-flex flex-row w-full gap-x-1.5 rounded-md bg-white px-3 py-2 text-base font-semibold text-gray-500 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50;
+}