Update SASS styles and moved files

osu-wams · Nov 14, 2023 · c53ea89 · c53ea89
1 parent 42739b5
commit c53ea89
Show file tree

Hide file tree

Showing 10 changed files with 135 additions and 203 deletions.
diff --git a/dist/style.css b/dist/style.css
diff --git a/dist/style.css.map b/dist/style.css.map
diff --git a/sass/base/_typography.scss b/sass/base/_typography.scss
@@ -1,106 +1,2 @@
-$stratum: "Stratum2Web",sans-serif;
-$open-sans: "Open Sans",sans-serif;
-
-@mixin heading {
- font-family: $stratum;
- font-weight: 700;
- line-height: 1.1;
-}
-
-@mixin heading-large {
- @include heading;
- font-size: 2.5rem;
- @include breakpoint($mobile) {
- font-size: 3.5rem;
- }
- @include breakpoint($tablet) {
- font-size: 4.5rem;
- }
-}
-
-@mixin heading-medium {
- @include heading;
- font-size: 2rem;
- @include breakpoint($mobile) {
- font-size: 3rem;
- }
- @include breakpoint($tablet) {
- font-size: 4rem;
- }
-}
-
-@mixin heading-small {
- @include heading;
- font-size: 2rem;
- @include breakpoint($mobile) {
- font-size: 2.5rem;
- }
- @include breakpoint($tablet) {
- font-size: 3.5rem;
- }
-}
-
-@mixin heading-tiny {
- @include heading;
- font-size: 1.25rem;
- font-weight: 400;
- @include breakpoint($tablet) {
- font-size: 1.75rem;
- }
-}
-
-@mixin call-out-large {
- font-family: $stratum;
- font-size: 2rem;
- font-weight: 300;
- line-height: 1;
- @include breakpoint($mobile) {
- font-size: 3.5rem;
- }
- @include breakpoint($tablet) {
- font-size: 4.25rem;
- }
- @include breakpoint(1200px) {
- font-size: 5rem;
- }
-}
-
-@mixin body-large {
- font-family: $open-sans;
- font-size: 1rem;
- line-height: 1.5;
- @include breakpoint($tablet) {
- font-size: 1.25rem;
- }
-}
-
-@mixin cta {
- font-family: $stratum;
- background-image: url('../images/arrow-right-red.svg');
- background-position: right center;
- background-repeat: no-repeat;
- text-decoration: none;
- &:hover {
- text-decoration: underline;
- text-decoration-color: $color-red;
- }
-}
-
-@mixin cta-small {
- @include cta;
- font-size: 1rem;
- text-transform: uppercase;
- font-weight: 500;
- @include breakpoint($tablet) {
- font-size: 1.25rem;
- }
-}
-
-@mixin cta-large {
- @include cta;
- font-size: 1.25rem;
- line-height: 1.1;
- @include breakpoint($tablet) {
- font-size: 1.75rem;
- }
-}
+@import '../../node_modules/breakpoint-sass/stylesheets/breakpoint';
+@import "../abstracts/variables";
diff --git a/sass/components/_block-call-out-grid.scss b/sass/components/_block-call-out-grid.scss
@@ -1,5 +1,8 @@
+@import "../../node_modules/breakpoint-sass/stylesheets/breakpoint";
+@import "../abstracts/variables";
+@import "../abstracts/mixins";
+
 .block--type-call-out-grid {
- @include theme-overrides;
 
  .block__content {
  height: 165vw;
@@ -19,31 +22,34 @@
  flex-direction: row;
  }
  }
+
  .call-out-grid-title-wrapper {
- padding: 60px 30px;
  background-color: $color-black-transparent;
+ padding: 60px 30px;
  @include breakpoint($mobile-medium-large) {
- display: flex;
- height: 450px;
- padding: 0px 30px;
  align-items: center;
+ display: flex;
  flex: 1;
+ height: 450px;
+ padding: 0 30px;
  }
  @include breakpoint($tablet) {
  height: 600px;
  }
  }
+
  .call-out-grid-wrapper {
  flex: 2;
  }
 
  .field--name-field-call-out-grid-background {
  position: relative;
+
  img {
- position: absolute;
  height: 165vw;
- width: 100%;
  object-fit: cover;
+ position: absolute;
+ width: 100%;
  z-index: -1;
  @include breakpoint($mobile-medium) {
  height: 80vw;
@@ -74,31 +80,33 @@
  }
 
  > .field__item {
- display: flex;
- width: 50%;
  align-items: center;
+ display: flex;
  justify-content: center;
+ width: 50%;
 
  @include breakpoint($mobile-medium) {
  width: calc(100% / 3);
  }
 
  &:nth-child(1) {
- margin-right: 50%;
  background-color: $color-blue-medium;
+ margin-right: 50%;
  @include breakpoint($mobile-medium) {
  margin-right: 0px;
  }
  }
+
  &:nth-child(2) {
- margin-left: 50%;
  background-color: $color-blue-dark;
+ margin-left: 50%;
  @include breakpoint($mobile-medium) {
  margin-left: 0px;
  }
  }
+
  &:nth-child(3) {
- background-color: $color-red;
+ background-color: $color-osu-orange;
  }
  }
  }
@@ -115,4 +123,4 @@
  .field--name-field-call-out-grid-context {
  @include body-large;
  }
-}
+}
diff --git a/sass/components/_block-content-with-image.scss b/sass/components/_block-content-with-image.scss
@@ -1,5 +1,7 @@
+@import "../abstracts/variables";
+@import "../abstracts/mixins";
+
 .block--type-content-with-image {
- @include theme-overrides;
 
  .field--name-field-content-with-image-title {
  @include heading-small;
@@ -16,7 +18,7 @@
  a {
  @include cta-small;
  padding-right: 27px;
- color: $color-red;
+ color: $color-osu-orange;
  background-size: 17px;
  }
  }
@@ -73,7 +75,7 @@
  }
  }
  .field--name-field-content-with-image-title {
- color: $color-red;
+ color: $color-osu-orange;
  }
  }
 
@@ -110,7 +112,7 @@
  &.block--view-mode-image-bottom {
  .block__content {
  flex-wrap: wrap;
- gap: 0px;
+ gap: 0;
  @include breakpoint($mobile-medium) {
  gap: 30px;
  }
@@ -129,14 +131,14 @@
  .field--name-field-content-with-image-cta {
  margin-bottom: 30px;
  @include breakpoint($mobile-medium) {
- margin-bottom: 0px;
+ margin-bottom: 0;
  }
  }
 
  .field--name-field-content-with-image-image {
  margin-left: 20px;
  &:before {
- background-color: $color-orange;
+ background-color: $color-gold;
  left: -20px;
  }
  }
@@ -170,4 +172,4 @@
  margin-bottom: 40px;
  }
  }
-}
+}
diff --git a/sass/components/_block-cta-list.scss b/sass/components/_block-cta-list.scss
@@ -1,20 +1,23 @@
+@import "../abstracts/variables";
+@import "../abstracts/mixins";
+
 .block--type-cta-list-with-image {
- @include theme-overrides;
 
  .block__content {
  display: flex;
  flex-direction: column;
  padding-top: 60px;
  @include breakpoint($mobile-medium) {
  flex-direction: row;
- padding-top: 120px;
- padding-bottom: 120px;
  gap: 30px;
+ padding-bottom: 120px;
+ padding-top: 120px;
  }
  @include breakpoint($mobile-large) {
  gap: 100px;
  }
  }
+
  .cta-list-left-column,
  .cta-list-right-column {
  @include breakpoint($mobile-medium) {
@@ -24,47 +27,51 @@
  width: calc(50% - 50px);
  }
  }
+
  .cta-list-left-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 60px;
  @include breakpoint($mobile-medium) {
- padding-bottom: 0px;
+ padding-bottom: 0;
  }
  }
 
  .field--name-field-cta-list-title {
  @include heading-small;
- width: 100%;
- padding-right: 30px;
- padding-left: 30px;
+ color: $color-osu-orange;
  margin-left: auto;
- color: $color-red;
+ padding-left: 30px;
+ padding-right: 30px;
+ width: 100%;
  @include breakpoint($mobile-medium) {
  max-width: 530px;
- padding-right: 0px;
+ padding-right: 0;
  }
  }
+
  .field--name-field-cta-list-link {
- width: 100%;
- padding-right: 30px;
- padding-left: 30px;
  margin-left: auto;
+ padding-left: 30px;
+ padding-right: 30px;
+ width: 100%;
+
  a {
  @include cta-large;
+ border-bottom: 1px solid $color-paddletail-black;
  display: block;
- padding-top: 30px;
  padding-bottom: 30px;
- border-bottom: 1px solid $color-tan;
+ padding-top: 30px;
  }
 
  @include breakpoint($mobile-medium) {
  max-width: 530px;
- padding-right: 0px;
+ padding-right: 0;
  }
  }
+
  .field--name-field-cta-list-image img {
  width: 100%;
  }
-}
+}