-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #56 from Gum-Joe/MS1.5-CSS-Refactor-To-SCSS
Refactor CSS to SCSS and fix some issues. Please now use the SCSS instead of the CSS - changes to the CSS will not be reflected in the site.
- Loading branch information
Showing
25 changed files
with
2,270 additions
and
289 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| /** Animations we use. Each has a mixin */ | ||
|
|
||
| @keyframes slide-in-top { | ||
| from { | ||
| transform: translateY(-10vh); | ||
| opacity: 0; | ||
| } | ||
|
|
||
| to { | ||
| transform: translateY(0); | ||
| opacity: 1; | ||
| } | ||
| } | ||
|
|
||
| // @param animation-delay: wait this many miliseconds before starting the animation | ||
| @mixin slide-in-top($animation-length: 300ms, $animation-delay: 100ms) { | ||
| animation: slide-in-top $animation-length both; | ||
| animation-delay: $animation-delay; | ||
| } | ||
|
|
||
| @keyframes slide-in-bottom { | ||
| from { | ||
| transform: translateY(10vh) scale(0.9375); | ||
| opacity: 0; | ||
| } | ||
|
|
||
| to { | ||
| transform: translateY(0) scale(1); | ||
| opacity: 1; | ||
| } | ||
| } | ||
|
|
||
| // @param animation-delay: wait this many miliseconds before starting the animation | ||
| @mixin slide-in-bottom($animation-length: 300ms, $animation-delay: 100ms) { | ||
| animation: slide-in-bottom $animation-length both; | ||
| animation-delay: $animation-delay; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| /** | ||
| * This file defines the breakpoints which are used to modiy CSS at different screen sizes (widths) | ||
| * for responsive design purposes | ||
| */ | ||
| // From https://medium.com/codeartisan/breakpoints-and-media-queries-in-scss-46e8f551e2f2 | ||
|
|
||
| /// /** | ||
| /// * BREAKPOINTS: (each level defines the number UNDER which styles should occur | ||
| /// * - Desktop: >1700px | ||
| /// * - Laptop: <= 1700px (laptops tend to have narrower screens, which can squish things) | ||
| /// * - Tablet: <= 1050px | ||
| /// * - Phablet: 700px | ||
| /// * - Mobile: 500px (to account for narrower phones) | ||
| /// */ | ||
| $desktop: 1700px; | ||
| $laptop: 1700px; | ||
| $tablet: 1050px; /* NOTE: If 1050px is changes, make sure to change it in TSX! (const SHOW_MOBILE_AT_WIDTH in MailingListBanner.tsx */ | ||
| $phablet: 700px; | ||
| $mobile: 500px; | ||
|
|
||
| /// Mixin for desktop only styles | ||
| @mixin desktop { | ||
| @media screen and (min-width: #{$desktop}) { | ||
| @content; | ||
| } | ||
| } | ||
|
|
||
| /// Mixin for laptop and below only styles | ||
| @mixin laptop { | ||
| @media screen and (max-width: #{$laptop}) { | ||
| @content; | ||
| } | ||
| } | ||
|
|
||
| /// Mixin for tablet and below only styles | ||
| @mixin tablet { | ||
| @media screen and (max-width: #{$tablet}) { | ||
| @content; | ||
| } | ||
| } | ||
|
|
||
| /// Mixin for phablet and below only styles | ||
| @mixin phablet { | ||
| @media screen and (max-width: #{$phablet}) { | ||
| @content; | ||
| } | ||
| } | ||
|
|
||
| /// Mixin for mobile and below only styles | ||
| @mixin mobile { | ||
| @media screen and (max-width: #{$mobile}) { | ||
| @content; | ||
| } | ||
| } | ||
|
|
||
| /// Mixin to have styles between two breakpoints. Provides it one of the breakpoint vars above. | ||
| /// @param {String} $minimum - Minimum screen size to activate at | ||
| /// @param {String} $maximum - Maximum screen size to activate at | ||
| @mixin between($minimum, $maximum) { | ||
| @media screen and (min-width: #{$minimum}) and (max-width: #{$maximum}) { | ||
| @content; | ||
| } | ||
| } | ||
|
|
||
| /// Mixin for arbitary breakpoints | ||
| /// @param {String} $type "min" or "max" (min-width or max-width) | ||
| @mixin breakpoint-at($min-max-width: string, $breakpoint-type: "min" or "max") { | ||
| @if $breakpoint-type != "min" and $breakpoint-type != "max" { | ||
| @error "Invalid type provided!"; | ||
| } | ||
| @if $breakpoint-type == "min" { | ||
| @media screen and (min-width: #{$min-max-width}) { | ||
| @content; | ||
| } | ||
| } | ||
| @if $breakpoint-type == "max" { | ||
| @media screen and (max-width: #{$min-max-width}) { | ||
| @content; | ||
| } | ||
| } | ||
| } | ||
|
|
||
|
|
||
|
|
||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| // Useful mixins | ||
|
|
||
| // No top or bottom margin on a component | ||
| @mixin no-margin-top-bottom { | ||
| margin-top: 0; | ||
| margin-bottom: 0; | ||
| } | ||
|
|
||
|
|
||
| // Fully centred flex | ||
| @mixin flex-fully-centred { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| /** | ||
| * Contains site-wide variable | ||
| */ | ||
|
|
||
|
|
||
| // Many of these were originally CSS vars, so have left these as is | ||
| :root { | ||
| background: black; | ||
| color: white; | ||
|
|
||
| --site-primary: #F10DA2; | ||
| --site-secondary: #FE5000; | ||
| --background-default: #000000; | ||
|
|
||
| // Text | ||
| --icon-fill: white; | ||
| --text-default: #fff; | ||
| --link-active: rgba(255, 255, 255, 0.6); | ||
|
|
||
| // We use this colours for a variety of purposes, namely the alert banners | ||
| --midland-red: #DC143C; | ||
| --south-eastern-yellow: #FECB09; | ||
| --great-western-green: #013602; | ||
| /* Slighty darkened, original was #00A550 */ | ||
| --great-northern-green: rgb(0, 156, 76); | ||
| --north-western-blue: #080028; | ||
| --french-blue-brighter: #2B69D4; | ||
| --alt-blue: #0284db; | ||
| --an-orange: #F4511E; | ||
|
|
||
| --link-blue: #00B0FF; // Or at least, is used in jumbotron! | ||
|
|
||
| // Margin and spacing vars | ||
| --horizontal-indent: 10vw; | ||
| } | ||
|
|
||
| // For autocomplete - ALWASY REFER TO ABOVE! | ||
| $text-default: var(--text-default); | ||
| $site-primary: var(--site-primary); | ||
| $background-default: var(--background-default); |
Oops, something went wrong.