Reorganise CSS

.stylelintrc.json

@@ -8,6 +8,7 @@
       {
         "ignoreAtRules": ["tailwind"]
       }
-    ]
+    ],
+    "scss/load-partial-extension": "always"
   }
 }

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;
-}

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;
+}