[Refactor] Stylesheet Restructure and Optimization

src/_assets/scss/_tdevs_custom.scss

@@ -1,3 +1,6 @@
+@use "variables";
+@use "utilities";
+
 .td-alert-banner {
   display: block;
   background-color: rgb(238, 92, 83);
@@ -82,12 +85,12 @@
     &__gold,
     &__plat {
       .sponsor-item {
-        @include bpMaxXSmall() {
+        @include utilities.bpMaxXSmall() {
           width: 100%;
           margin-right: 0;
         }
         width: calc(50% - 2px);
-        @include bpMinXSmall() {
+        @include utilities.bpMinXSmall() {
           padding: 30px;
           &:nth-child(odd) {
             margin-right: 4px;
@@ -97,13 +100,13 @@
     }
     &__silver {
       .sponsor-item {
-        @include bpMaxXSmall() {
+        @include utilities.bpMaxXSmall() {
           &:nth-child(odd) {
             margin-right: 4px;
           }
         }
         width: calc(50% - 2px);
-        @include bpMinXSmall() {
+        @include utilities.bpMinXSmall() {
           padding: 15px;
           margin-right: 4px;
           width: calc(33.33% - 2.66px);
@@ -136,13 +139,13 @@
   .sponsor-button {
     width: 100%;
     margin-right: 0;
-    @include bpMinXSmall() {
+    @include utilities.bpMinXSmall() {
       width: calc(50% - 16px);
       &:nth-child(odd) {
         margin-right: 32px;
       }
     }
-    // @include bpMinXSmall() {
+    // @include utilities.bpMinXSmall() {
     //   padding: 15px;
     //   margin-right: 4px;
     //   width: calc(33.33% - 2.66px);

src/_assets/scss/_temp-style-relocation.scss

@@ -0,0 +1,201 @@
+@use "variables";
+@use "utilities";
+
+
+
+
+.container {
+  margin: 0 auto;
+  max-width: 1020px;
+  width: 100%;
+  padding: 0 1.5rem;
+  overflow-x: hidden;
+}
+
+.td-describer p {
+  line-height: 1.5em;
+}
+
+.td-describer p:first-child {
+  color: variables.$colorOrange;
+  font-size: 2rem;
+  line-height: 2.725rem;
+}
+
+.td-events {
+  display: block;
+  margin-top: 50px;
+}
+
+.td-events section date {
+  display: block;
+}
+
+.td-events h2 {
+  color: variables.$colorGreen;
+  font-size: 1.5em;
+  letter-spacing: 1px;
+  margin: 0 0 20px;
+  text-transform: uppercase;
+}
+
+.td-events h3 {
+  font-size: 1.17em;
+  margin: 0 0 0;
+}
+
+.td-events-list {
+  list-style-type: none;
+  padding: 0;
+}
+
+.td-events-list li {
+  margin: 20px 0;
+  border-bottom: 1px solid #79d2c8;
+}
+
+.td-events-list li:first-child {
+  margin-top: 0;
+}
+
+.td-events-list li:last-child {
+  margin-bottom: 0;
+  border-bottom: none;
+}
+
+.td-events__link {
+  display: inline-block;
+  margin-bottom: 20px;
+}
+
+.td-events__future {
+  background-color: variables.$colorGreen;
+  border-radius: 8px;
+  color: white;
+  padding: 20px;
+  margin-bottom: 50px;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+
+  h2,
+  p,
+  a {
+    color: white;
+  }
+}
+
+.td-events__future__btn {
+  background: variables.$colorOrange;
+  color: white;
+  padding: 10px;
+  border: 0;
+  border-radius: 5px;
+  margin: 5px 0 20px;
+  display: inline-block;
+  text-transform: uppercase;
+}
+
+.td-event__city {
+  text-transform: uppercase;
+  font-size: 0.825em;
+  margin: 0;
+  padding: 0;
+}
+
+.td-event__city:after {
+  content: ":";
+}
+
+
+
+
+.td-event-archive__list {
+  list-style: none;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-gap: 2em;
+}
+
+.td-event-archive__list__item {
+  border: 1px solid variables.$colorOrange;
+  padding: 1em;
+}
+
+.td-event-archive__name {
+  font-weight: bold;
+  font-size: 20px;
+  margin-bottom: 10px;
+}
+
+.td-event-archive__detail {
+  margin-top: 5px;
+}
+
+.filter-red {
+  filter: invert(59%) sepia(43%) saturate(6782%) hue-rotate(331deg) brightness(106%) contrast(86%);
+}
+
+.next-event__widget {
+  &:where(iframe){
+    height: 500px;
+    width: 100%;
+    overflow-x: hidden;
+    @include utilities.bpMinSmall {
+      height: 210px;
+    }
+  }
+}
+
+@media (min-width: 800px) {
+  .td-header {
+    padding-bottom: 66.66666vh;
+    text-align: center;
+  }
+
+  .td-header h1 {
+    font-size: 4em;
+  }
+
+  .td-header .td-header__logo {
+    width: 50%;
+    max-width: 220px;
+  }
+
+  .td-events {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-column-gap: 20px;
+  }
+
+  .td-events__future {
+    margin-bottom: 0;
+  }
+
+
+
+
+}
+
+
+
+.divider {
+  border-bottom: 2px solid variables.$colorOrange;
+  border-top: 0;
+}
+
+.divider--green {
+  border-color: variables.$colorGreen;
+}
+
+.social-icons {
+  display: none;
+  @media (min-width: 675px) {
+    display: block;
+    a {
+      margin: 0 0 0 20px;
+    }
+  }
+}

src/_assets/scss/_text.scss

@@ -1,19 +1,22 @@
+@use "variables";
+@use "utilities";
+
 .heading {
   text-transform: uppercase;
   font-size: 34px;
   color: white;
   letter-spacing: 2px;
 
   &--green {
-    color: $colorGreen;
+    color: variables.$colorGreen;
   }
 
   &--blue {
-    color: $colorBlue;
+    color: variables.$colorBlue;
   }
 
   &--orange {
-    color: $colorOrange;
+    color: variables.$colorOrange;
   }
 
   &--centered {
@@ -34,7 +37,7 @@
       max-height: 600px;
       // width: 100%;
 
-      @include bpMinLarge() {
+      @include utilities.bpMinLarge() {
         max-width: 110%;
         width: 110%;
         margin-left: -5%;
@@ -61,11 +64,11 @@
 
   p,
   li {
-    color: $colorBlue;
+    color: variables.$colorBlue;
   }
 
   a {
-    color: $colorOrange;
+    color: variables.$colorOrange;
     overflow-wrap: break-word;
   }
 
@@ -81,16 +84,16 @@
   }
 
   blockquote {
-    border-left: 4px solid $colorBlue;
+    border-left: 4px solid variables.$colorBlue;
     padding-left: 20px;
     margin-left: 1px;
   }
 
   &__author {
     margin: 2em auto;
     padding: 2em 0;
-    border-top: 2px solid $colorOrange;
-    border-bottom: 2px solid $colorOrange;
+    border-top: 2px solid variables.$colorOrange;
+    border-bottom: 2px solid variables.$colorOrange;
     max-width: 720px;
     text-align: center;
 

src/_assets/scss/_vendor.scss

@@ -0,0 +1 @@
+@import url("https://fonts.googleapis.com/css?family=Montserrat:300,500,700,900");

src/_assets/scss/animations/index.scss

@@ -0,0 +1 @@
+@forward "marquee";

src/_assets/scss/global/_base.scss

@@ -0,0 +1,53 @@
+@use "../variables";
+* {
+  box-sizing: border-box;
+  &:before,
+  &:after {
+    box-sizing: inherit;
+  }
+}
+html {
+  font-size: 100%;
+}
+
+
+body {
+  color: variables.$colorBlue;
+  font-family: "Montserrat", Helvetica, Arial, Lucida, sans-serif;
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+}
+h1, h2 {
+  color: variables.$colorOrange;
+}
+a {
+  color: variables.$colorGreen;
+  text-decoration: none;
+  border-bottom: 1px solid variables.$colorOrange;
+  transition: border 0.5s;
+}
+
+p {
+  font-size: 1.1rem; // was 1 rem, may change back later
+  line-height: 1.725rem;
+}
+li {
+  font-size: 1.1rem;
+}
+
+textarea,
+select,
+input,
+button {
+  // outline: none;
+  font-family: "Montserrat", Helvetica, Arial, Lucida, sans-serif;
+}
+
+a:hover {
+  border-bottom-color: variables.$colorGreen;
+}
+
+a:focus {
+  // outline: none;
+}

src/_assets/scss/global/global.scss

@@ -1,4 +1,6 @@
 // Global Stylesheets for HTML elements
+@use "base";
+
 ul, ol {
     line-height: 1.5;
 }