From ca39729292ff799860182a71227ea2012a69e7f3 Mon Sep 17 00:00:00 2001
From: Eric Arellano <14852634+Eric-Arellano@users.noreply.github.com>
Date: Sat, 12 Aug 2023 12:55:47 -0700
Subject: [PATCH] Split up CSS into Sass modules (#119)

None of the code was changed. It's only rearranged now into dedicated
files.

Sass and Parcel combine all these files into one single minimized
output. So this has zero negative impact on users.
---
 src/css/_about.scss       |  36 ++++
 src/css/_controls.scss    |  28 ++++
 src/css/_copied-link.scss |  20 +++
 src/css/_donate.scss      |  25 +++
 src/css/_header.scss      |  93 +++++++++++
 src/css/_scorecard.scss   | 118 +++++++++++++
 src/css/style.scss        | 337 +-------------------------------------
 7 files changed, 328 insertions(+), 329 deletions(-)
 create mode 100644 src/css/_about.scss
 create mode 100644 src/css/_controls.scss
 create mode 100644 src/css/_copied-link.scss
 create mode 100644 src/css/_donate.scss
 create mode 100644 src/css/_header.scss
 create mode 100644 src/css/_scorecard.scss

diff --git a/src/css/_about.scss b/src/css/_about.scss
new file mode 100644
index 0000000..7b771ae
--- /dev/null
+++ b/src/css/_about.scss
@@ -0,0 +1,36 @@
+dd {
+  margin-bottom: 10px;
+}
+
+div.about-text-popup {
+  position: absolute;
+  z-index: 2001;
+  background-color: white;
+  font-size: 18px;
+  border: 1px solid rgba(186, 186, 186, 0.7);
+  display: none;
+  left: 10%;
+  height: 60%;
+  width: 80%;
+  top: 120px;
+  overflow: auto;
+}
+
+div.about-text-popup svg.fa-circle-xmark {
+  color: #4d4d4d;
+}
+
+div.about-text-container {
+  padding: 20px;
+}
+
+.about-close {
+  float: right;
+  cursor: pointer;
+}
+
+@media only screen and (max-width: 830px) {
+  div.about-text-popup {
+    top: 190px;
+  }
+}
diff --git a/src/css/_controls.scss b/src/css/_controls.scss
new file mode 100644
index 0000000..deef580
--- /dev/null
+++ b/src/css/_controls.scss
@@ -0,0 +1,28 @@
+.leaflet-top.leaflet-left {
+  top: 52px;
+}
+
+.leaflet-touch .leaflet-control-layers-toggle {
+  width: 33px;
+  height: 33px;
+}
+
+#map > div.leaflet-control-container > div.leaflet-top.leaflet-right {
+  top: 130px;
+  margin-left: 9px;
+  right: auto;
+}
+
+.leaflet-control-layers {
+  font-size: 12px;
+}
+
+@media only screen and (max-width: 625px) {
+  .leaflet-top.leaflet-left {
+    top: 62px;
+  }
+
+  #map > div.leaflet-control-container > div.leaflet-top.leaflet-right {
+    top: 140px;
+  }
+}
diff --git a/src/css/_copied-link.scss b/src/css/_copied-link.scss
new file mode 100644
index 0000000..cd3a582
--- /dev/null
+++ b/src/css/_copied-link.scss
@@ -0,0 +1,20 @@
+div.copied-link-message {
+  position: absolute;
+  z-index: 2001;
+  border-radius: 5px;
+  top: 200px;
+  width: 500px;
+  text-align: center;
+  background-color: white;
+  left: 100px;
+  font-size: 24px;
+  border: 1px solid black;
+  display: none;
+}
+
+@media only screen and (max-width: 830px) {
+  div.copied-link-message {
+    width: 350px;
+    left: 40px;
+  }
+}
diff --git a/src/css/_donate.scss b/src/css/_donate.scss
new file mode 100644
index 0000000..f311159
--- /dev/null
+++ b/src/css/_donate.scss
@@ -0,0 +1,25 @@
+div.donate-button {
+  position: absolute;
+  border-radius: 5px;
+  left: 9px;
+  bottom: 19px;
+  z-index: 2001;
+  width: 100px;
+}
+
+div.donate-button a img {
+  width: 100%;
+  border-radius: 4px;
+}
+
+@media only screen and (max-width: 830px) {
+  div.donate-button {
+    bottom: 43px;
+  }
+}
+
+@media only screen and (max-width: 480px) {
+  div.donate-button a img {
+    width: 70%;
+  }
+}
diff --git a/src/css/_header.scss b/src/css/_header.scss
new file mode 100644
index 0000000..38389c3
--- /dev/null
+++ b/src/css/_header.scss
@@ -0,0 +1,93 @@
+fieldset#tier-dropdown {
+  position: absolute;
+  right: 90px;
+  top: 5px;
+  z-index: 2005;
+}
+
+#city-choice {
+  font-size: 20px;
+  padding: 3px 5px;
+  border: 2px solid rgba(0, 0, 0, 0.2);
+  border-radius: 10px;
+}
+
+div.banners {
+  background-color: #4d4d4d;
+  position: absolute;
+  top: 0;
+  z-index: 2001;
+  text-align: center;
+  width: 100%;
+  left: 0;
+  padding: 10px 15px;
+}
+
+div.banner-title,
+div.banner-icons {
+  font-weight: bold;
+  border: none;
+  font-size: 20px;
+  background-color: #4d4d4d;
+  color: white;
+  float: right;
+  right: 2px;
+}
+
+.banner-about-icon {
+  display: inline;
+}
+
+div.banner-icons {
+  cursor: pointer;
+}
+
+div.banner-icons svg {
+  color: white;
+}
+
+div.banner-icons svg.fa-circle-info {
+  margin-right: 10px;
+}
+
+#tier-dropdown label {
+  font-weight: bold;
+  border: none;
+  font-size: 20px;
+  background-color: #4d4d4d;
+  color: white;
+}
+
+div.banner-title {
+  left: 4px;
+  text-align: left;
+  float: left;
+}
+
+@media only screen and (max-width: 625px) {
+  div.banners {
+    height: 65px;
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+
+  div.banner-title {
+    font-size: 16px;
+  }
+
+  fieldset#tier-dropdown {
+    position: absolute;
+    left: 10px;
+    top: 35px;
+    z-index: 2005;
+  }
+
+  fieldset#tier-dropdown label {
+    font-size: 14px;
+  }
+
+  #city-choice {
+    font-size: 14px;
+    padding: 0;
+  }
+}
diff --git a/src/css/_scorecard.scss b/src/css/_scorecard.scss
new file mode 100644
index 0000000..add558f
--- /dev/null
+++ b/src/css/_scorecard.scss
@@ -0,0 +1,118 @@
+$teal: #21ccb9;
+
+.popup-fixed {
+  position: fixed;
+  transform: none !important;
+  margin: 0;
+}
+
+.leaflet-popup-tip-container {
+  display: none;
+}
+
+.leaflet-popup-content-wrapper {
+  width: 365px;
+  border-radius: 10px;
+  float: right;
+  position: fixed;
+  right: 11px;
+  top: 62px;
+}
+
+.leaflet-popup-content {
+  width: 330px;
+}
+
+div.leaflet-popup-content-wrapper div div {
+  width: 342px;
+}
+
+div.leaflet-popup-content-wrapper > div > div.title {
+  color: $teal;
+  font-weight: bold;
+  font-size: 16px;
+}
+
+div.leaflet-popup-content-wrapper div span.details-title,
+div.leaflet-popup-content-wrapper div span.details-value {
+  font-size: 14px;
+  color: black;
+}
+
+div.leaflet-popup-content-wrapper span.details-value {
+  color: $teal;
+}
+
+div.leaflet-popup-content-wrapper > div > div.title {
+  color: $teal;
+  font-weight: bold;
+  font-size: 18px;
+  display: inline-block;
+  width: 50%;
+}
+
+div.leaflet-popup-content-wrapper > div > div.url-copy-button {
+  float: right;
+  width: 0%;
+  display: inline-block;
+}
+
+div.leaflet-popup-content-wrapper > div > div.url-copy-button:hover {
+  cursor: pointer;
+}
+
+div.leaflet-popup-content-wrapper > div > div.url-copy-button svg.fa-link {
+  color: $teal;
+}
+
+div.popup-button a {
+  background-color: $teal;
+  padding: 10px;
+  font-size: 16px;
+  color: white;
+  border-radius: 8px;
+  font-weight: bold;
+  text-decoration: none;
+  border: 1px solid $teal;
+  display: inline-block;
+}
+
+div.popup-button a:hover {
+  background-color: white;
+  color: $teal;
+  border: 1px solid $teal;
+}
+
+@media only screen and (max-width: 830px) {
+  .leaflet-popup-content-wrapper {
+    overflow-y: scroll;
+    overflow-x: hidden;
+    height: 119px;
+    width: 350px;
+    border-radius: 10px;
+    float: left;
+    position: fixed;
+    bottom: 32px;
+    top: auto;
+    right: 10px;
+  }
+
+  div.leaflet-popup-content-wrapper div div {
+    width: 310px;
+  }
+
+  div.leaflet-popup-content {
+    width: auto;
+  }
+}
+
+@media only screen and (max-width: 480px) {
+  .leaflet-popup-content-wrapper {
+    width: 280px;
+    bottom: 40px;
+  }
+
+  div.leaflet-popup-content-wrapper div div {
+    width: 240px;
+  }
+}
diff --git a/src/css/style.scss b/src/css/style.scss
index dd4ecfb..8afa646 100644
--- a/src/css/style.scss
+++ b/src/css/style.scss
@@ -1,11 +1,17 @@
-@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
+@use "about";
+@use "controls";
+@use "copied-link";
+@use "donate";
+@use "header";
+@use "scorecard";
 
-$teal: #21ccb9;
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
 
 body {
   padding: 0;
   margin: 0;
 }
+
 html,
 body,
 #map {
@@ -18,244 +24,6 @@ body,
   font-family: Poppins, Helvetica, Arial, sans-serif;
 }
 
-dd {
-  margin-bottom: 10px;
-}
-
-fieldset#tier-dropdown {
-  position: absolute;
-  right: 90px;
-  top: 5px;
-  z-index: 2005;
-}
-#city-choice {
-  font-size: 20px;
-  padding: 3px 5px;
-  border: 2px solid rgba(0, 0, 0, 0.2);
-  border-radius: 10px;
-}
-
-.leaflet-touch .leaflet-control-layers-toggle {
-  width: 33px;
-  height: 33px;
-}
-
-/* popup styling */
-
-.popup-fixed {
-  position: fixed;
-  transform: none !important;
-  margin: 0;
-}
-
-.leaflet-popup-tip-container {
-  display: none;
-}
-
-.leaflet-popup-content-wrapper {
-  width: 365px;
-  border-radius: 10px;
-  float: right;
-  position: fixed;
-  right: 11px;
-  top: 62px;
-}
-.leaflet-popup-content {
-  width: 330px;
-}
-div.leaflet-popup-content-wrapper div div {
-  width: 342px;
-}
-
-div.leaflet-popup-content-wrapper > div > div.title {
-  color: $teal;
-  font-weight: bold;
-  font-size: 16px;
-}
-
-div.leaflet-popup-content-wrapper div span.details-title,
-div.leaflet-popup-content-wrapper div span.details-value {
-  font-size: 14px;
-  color: black;
-}
-
-div.leaflet-popup-content-wrapper span.details-value {
-  color: $teal;
-}
-
-div.leaflet-popup-content-wrapper > div > div.title {
-  color: $teal;
-  font-weight: bold;
-  font-size: 18px;
-  display: inline-block;
-  width: 50%;
-}
-
-div.leaflet-popup-content-wrapper > div > div.url-copy-button {
-  float: right;
-  width: 0%;
-  display: inline-block;
-}
-div.leaflet-popup-content-wrapper > div > div.url-copy-button:hover {
-  cursor: pointer;
-}
-
-div.leaflet-popup-content-wrapper > div > div.url-copy-button svg.fa-link {
-  color: $teal;
-}
-
-div.popup-button a {
-  background-color: $teal;
-  padding: 10px;
-  font-size: 16px;
-  color: white;
-  border-radius: 8px;
-  font-weight: bold;
-  text-decoration: none;
-  border: 1px solid $teal;
-  display: inline-block;
-}
-div.popup-button a:hover {
-  background-color: white;
-  color: $teal;
-  border: 1px solid $teal;
-}
-
-/* end popup styling */
-
-/*styling the two banners */
-
-div.banners {
-  background-color: #4d4d4d;
-  position: absolute;
-  top: 0;
-  z-index: 2001;
-  text-align: center;
-  width: 100%;
-  left: 0;
-  padding: 10px 15px;
-}
-div.banner-title,
-div.banner-icons {
-  font-weight: bold;
-  border: none;
-  font-size: 20px;
-  background-color: #4d4d4d;
-  color: white;
-  float: right;
-  right: 2px;
-}
-
-.banner-about-icon {
-  display: inline;
-}
-
-div.banner-icons {
-  cursor: pointer;
-}
-
-div.banner-icons svg {
-  color: white;
-}
-
-div.banner-icons svg.fa-circle-info {
-  margin-right: 10px;
-}
-
-#tier-dropdown label {
-  font-weight: bold;
-  border: none;
-  font-size: 20px;
-  background-color: #4d4d4d;
-  color: white;
-}
-
-div.banner-title {
-  left: 4px;
-  text-align: left;
-  float: left;
-}
-
-div.about-text-popup {
-  position: absolute;
-  z-index: 2001;
-  background-color: white;
-  font-size: 18px;
-  border: 1px solid rgba(186, 186, 186, 0.7);
-  display: none;
-  left: 10%;
-  height: 60%;
-  width: 80%;
-  top: 120px;
-  overflow: auto;
-}
-
-div.about-text-popup svg.fa-circle-xmark {
-  color: #4d4d4d;
-}
-
-div.about-text-container {
-  padding: 20px;
-}
-
-.about-close {
-  float: right;
-  cursor: pointer;
-}
-
-/*end styling the two banners*/
-
-/*styling the copied link message */
-div.copied-link-message {
-  position: absolute;
-  z-index: 2001;
-  border-radius: 5px;
-  top: 200px;
-  width: 500px;
-  text-align: center;
-  background-color: white;
-  left: 100px;
-  font-size: 24px;
-  border: 1px solid black;
-  display: none;
-}
-/*end styling the copied link message */
-
-/*styling layers button */
-#map > div.leaflet-control-container > div.leaflet-top.leaflet-right {
-  top: 130px;
-  margin-left: 9px;
-  right: auto;
-}
-
-.leaflet-control-layers {
-  font-size: 12px;
-}
-
-/* end styling layers button*/
-
-/*styling the donate button */
-div.donate-button {
-  /* background-color: white; */
-  position: absolute;
-  border-radius: 5px;
-  left: 9px;
-  bottom: 19px;
-  z-index: 2001;
-  width: 100px;
-  /* margin: 10px 0 0 12px; */
-}
-div.donate-button a img {
-  width: 100%;
-  border-radius: 4px;
-}
-
-/*end styling the donate button */
-
-.leaflet-top.leaflet-left {
-  top: 52px;
-}
-
 .leaflet-grab {
   cursor: unset;
 }
@@ -263,92 +31,3 @@ div.donate-button a img {
 hr {
   margin: 10px 0;
 }
-
-/* responsiveness of the popup */
-@media only screen and (max-width: 830px) {
-  .leaflet-popup-content-wrapper {
-    overflow-y: scroll;
-    overflow-x: hidden;
-    height: 119px;
-    width: 350px;
-    border-radius: 10px;
-    float: left;
-    position: fixed;
-    bottom: 32px;
-    top: auto;
-    right: 10px;
-  }
-
-  div.leaflet-popup-content-wrapper div div {
-    width: 310px;
-  }
-
-  div.leaflet-popup-content {
-    width: auto;
-  }
-
-  div.copied-link-message {
-    width: 350px;
-    left: 40px;
-  }
-
-  div.donate-button {
-    bottom: 43px;
-  }
-
-  div.about-text-popup {
-    top: 190px;
-  }
-
-  /* end of responsiveness of the popup */
-}
-
-@media only screen and (max-width: 625px) {
-  div.banners {
-    height: 65px;
-    padding-left: 10px;
-    padding-right: 10px;
-  }
-  div.banner-title {
-    font-size: 16px;
-  }
-
-  fieldset#tier-dropdown {
-    position: absolute;
-    left: 10px;
-    top: 35px;
-    z-index: 2005;
-  }
-
-  fieldset#tier-dropdown label {
-    font-size: 14px;
-  }
-
-  #city-choice {
-    font-size: 14px;
-    padding: 0;
-  }
-
-  .leaflet-top.leaflet-left {
-    top: 62px;
-  }
-
-  #map > div.leaflet-control-container > div.leaflet-top.leaflet-right {
-    top: 140px;
-  }
-}
-
-@media only screen and (max-width: 480px) {
-  div.donate-button a img {
-    width: 70%;
-  }
-
-  .leaflet-popup-content-wrapper {
-    width: 280px;
-    bottom: 40px;
-  }
-
-  div.leaflet-popup-content-wrapper div div {
-    width: 240px;
-  }
-}