add base styles and scripts
This commit is contained in:
18
web/app/themes/badegg/resources/styles/global/_fonts.scss
Normal file
18
web/app/themes/badegg/resources/styles/global/_fonts.scss
Normal file
@@ -0,0 +1,18 @@
|
||||
$hfont: Times, 'Times New Roman', serif;
|
||||
$font: Helvetica, Arial, sans-serif;
|
||||
|
||||
/*
|
||||
* Roots Fonts Setup
|
||||
* https://roots.io/sage/docs/fonts-setup/
|
||||
*
|
||||
* Self-Hosted Google Fonts (Ubuntu Demo)
|
||||
* https://gwfh.mranftl.com/fonts/ubuntu?subsets=latin
|
||||
*
|
||||
* Add the font to your Tailwind config
|
||||
* tailwind.config.cjs
|
||||
*
|
||||
* Configure theme.json to use the font with Bud
|
||||
*/
|
||||
|
||||
/* stylelint-disable */
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
@import "framework/breakpoints";
|
||||
@import "framework/normalise";
|
||||
@import "framework/colours";
|
||||
@import "framework/spacing";
|
||||
|
||||
.socials {
|
||||
font-size: 1.5em;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 0.125em;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
@import "mixins/linear-gradient";
|
||||
@import "mixins/text-contrast";
|
||||
@import "mixins/generate-colour-classes";
|
||||
@import "mixins/generate-button-classes";
|
||||
211
web/app/themes/badegg/resources/styles/global/_typography.scss
Normal file
211
web/app/themes/badegg/resources/styles/global/_typography.scss
Normal file
@@ -0,0 +1,211 @@
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: $primary;
|
||||
font-weight: 700;
|
||||
font-family: $hfont;
|
||||
line-height: 1.1em;
|
||||
margin: 1.5em 0 0.5em;
|
||||
padding: 0;
|
||||
|
||||
&.section-title {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&.has-flourish {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
content: '';
|
||||
display: block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
mask-image: url("~/images/flourish-flipped.svg");
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
background: $secondary;
|
||||
transform: translate(-55%, -40%) rotate(270deg);
|
||||
pointer-events: none;
|
||||
font-size: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen {
|
||||
.knockout & {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.75em;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h2 { font-size: 1.5em; }
|
||||
h3 { font-size: 1.25em; }
|
||||
|
||||
h4,
|
||||
h5 { font-size: 1.15em; }
|
||||
|
||||
@container (min-width: #{$screen-sm}) {
|
||||
h1 { font-size: 2.5em; }
|
||||
h2 { font-size: 2em; }
|
||||
h3 { font-size: 1.5em; }
|
||||
|
||||
h4,
|
||||
h5 {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
}
|
||||
|
||||
p,
|
||||
li,
|
||||
td,
|
||||
label {
|
||||
color: $grey-darker;
|
||||
font-family: $font;
|
||||
font-weight: 400;
|
||||
line-height: 1.5em;
|
||||
margin: 0 0 0.8em;
|
||||
padding: 0;
|
||||
|
||||
@media screen {
|
||||
.knockout & {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.overline {
|
||||
margin: 0 0 0.125em;
|
||||
|
||||
@container (min-width: #{$screen-md}) {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: $primary;
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
transition: all 300ms ease;
|
||||
font-weight: bold;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $primary-dark;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media screen {
|
||||
.knockout & {
|
||||
color: $white;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $tertiary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
strong { font-weight: 700; }
|
||||
small { font-size: 0.8em; }
|
||||
|
||||
li {
|
||||
margin: 0.125em 0;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
margin: 0 0 0.7em;
|
||||
padding: 0 0 0 1.2em;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.nolist {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: inherit;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 1.5em auto 2em;
|
||||
height: 0;
|
||||
border: 0 solid $grey-light;
|
||||
border-width: $borderThin 0 0;
|
||||
|
||||
@media screen {
|
||||
.knockout & {
|
||||
border-color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.align {
|
||||
&-centre {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&-right {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.wysiwyg {
|
||||
>*:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
>*:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
a:not(.btn) {
|
||||
text-decoration: underline;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
p {
|
||||
font-family: $hfont;
|
||||
font-weight: bold;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
>*:first-child::before,
|
||||
>*:last-child::after {
|
||||
color: $secondary;
|
||||
line-height: 1;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
|
||||
>*:first-child::before {
|
||||
content: '\201C';
|
||||
margin-right: 0.125em;
|
||||
transform-origin: top right;
|
||||
}
|
||||
|
||||
>*:last-child::after {
|
||||
content: '\201D';
|
||||
margin-left: 0.125em;
|
||||
transform-origin: top left;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
@import "variables/colours";
|
||||
@import "variables/breakpoints";
|
||||
@import "variables/spacing";
|
||||
@@ -0,0 +1,13 @@
|
||||
@each $label, $value in $breakpoints {
|
||||
.min-#{$label} {
|
||||
@media (min-width: $value) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.max-#{$label} {
|
||||
@media (max-width: ($value - 0.0625)) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
@use 'sass:color';
|
||||
|
||||
::selection {
|
||||
color: $white;
|
||||
background: $primary;
|
||||
}
|
||||
|
||||
@each $color, $hex in $colors {
|
||||
@include generate_colour_classes($color, $hex);
|
||||
@include generate_button_colors($color, $hex);
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
backface-visibility: hidden; // removes jagged edges on rotated elements
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 16px;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body,
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: $white;
|
||||
}
|
||||
|
||||
.visually-hidden {
|
||||
clip: rect(0, 0, 0, 0);
|
||||
clip-path: inset(50%);
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
transition: all 300ms ease;
|
||||
|
||||
&.lazy {
|
||||
filter: blur(0.25em);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: currentColor;
|
||||
}
|
||||
@@ -0,0 +1,152 @@
|
||||
#app {
|
||||
container-type: inline-size;
|
||||
}
|
||||
|
||||
.wrapper,
|
||||
.wrapper.section-has-angle {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.badegg-blocks {
|
||||
.badegg-block {
|
||||
&:last-of-type {
|
||||
@extend .section-has-angle;
|
||||
@extend .section-has-angle-bottom;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: block;
|
||||
width: $brandWidth;
|
||||
// height: $brandHeight;
|
||||
|
||||
svg,
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
// height: $brandHeight;
|
||||
}
|
||||
|
||||
.knockout & {
|
||||
@media screen {
|
||||
.fill-primary {
|
||||
fill: $white;
|
||||
}
|
||||
|
||||
.fill-grey {
|
||||
fill: rgba($white, 0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 90%;
|
||||
margin: auto;
|
||||
|
||||
&-large { max-width: $containerLarge; }
|
||||
&-medium { max-width: $containerMedium; }
|
||||
&-small { max-width: $containerSmall; }
|
||||
&-narrow { max-width: $containerNarrow; }
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: $sectionMedium 0;
|
||||
|
||||
&-small { padding: $sectionSmall 0; }
|
||||
&-medium { padding: $sectionMedium 0; }
|
||||
&-large { padding: $sectionLarge 0; }
|
||||
|
||||
&-zero-top { padding-top: 0; }
|
||||
&-zero-bottom { padding-bottom: 0; }
|
||||
|
||||
@container (min-width: #{$screen-lg}) {
|
||||
padding: $sectionLarge 0;
|
||||
}
|
||||
|
||||
&-intro {
|
||||
&-inner {
|
||||
max-width: $containerSmall;
|
||||
}
|
||||
|
||||
&.align-right {
|
||||
justify-content: flex-end;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&.align-centre {
|
||||
max-width: $containerNarrow;
|
||||
|
||||
.section-intro-inner {
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.inner {
|
||||
padding: $innerMedium;
|
||||
|
||||
&-small { padding: $innerSmall; }
|
||||
&-large { padding: $innerLarge; }
|
||||
|
||||
&-zero-x {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
&-zero-y {
|
||||
padding-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.rounded {
|
||||
border-radius: $borderRadius;
|
||||
|
||||
&-top {
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
&-bottom {
|
||||
border-top-right-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.border {
|
||||
border-style: solid;
|
||||
border-width: $borderWidth;
|
||||
|
||||
&-thin { border-width: 0.0625em; }
|
||||
&-regular { border-width: $borderWidth; }
|
||||
&-thick { border-width: $borderThick; }
|
||||
&-thicker { border-width: $borderThicker; }
|
||||
|
||||
&-top {
|
||||
border-right-width: 0;
|
||||
border-bottom-width: 0;
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
&-right {
|
||||
border-top-width: 0;
|
||||
border-bottom-width: 0;
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
&-bottom {
|
||||
border-top-width: 0;
|
||||
border-right-width: 0;
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
&-left {
|
||||
border-top-width: 0;
|
||||
border-right-width: 0;
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
@use "sass:color";
|
||||
|
||||
@mixin generate_button_colors($name, $hex) {
|
||||
|
||||
$buttons: (
|
||||
".btn",
|
||||
"button",
|
||||
"input[type=submit]",
|
||||
);
|
||||
|
||||
@each $button in $buttons {
|
||||
#{$button}.#{$name} {
|
||||
@include text-contrast($hex);
|
||||
background: $hex;
|
||||
border-color: $hex;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
@include text-contrast($hex);
|
||||
background: color.adjust($hex, $lightness: 10%);
|
||||
border-color: color.adjust($hex, $lightness: 10%);
|
||||
}
|
||||
}
|
||||
|
||||
#{$button}.#{$name}.inverted {
|
||||
@include text-contrast($hex);
|
||||
background: transparent;
|
||||
border-color: $hex;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
@include text-contrast($hex);
|
||||
background: #{$hex};
|
||||
border-color: #{$hex};
|
||||
}
|
||||
}
|
||||
|
||||
@media screen {
|
||||
*:not(.bg-#{$name}) #{$button}.#{$name} {
|
||||
@include text-contrast($hex);
|
||||
background-color: $hex;
|
||||
border-color: $hex;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
@include text-contrast($hex);
|
||||
background-color: color.adjust($hex, $lightness: 10%);
|
||||
border-color: color.adjust($hex, $lightness: 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.bg-#{$name} #{$button}.#{$name} {
|
||||
@include text-contrast($hex);
|
||||
background: white;
|
||||
border-color: white;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
@include text-contrast($hex);
|
||||
background: transparent;
|
||||
border-color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
@use "sass:color";
|
||||
|
||||
@mixin generate_colour_classes($name, $hex) {
|
||||
|
||||
.knockout .#{$name},
|
||||
.#{$name} {
|
||||
color: $hex;
|
||||
}
|
||||
|
||||
.fill-#{$name} {
|
||||
fill: $hex;
|
||||
}
|
||||
|
||||
.border-#{$name} {
|
||||
border-color: $hex;
|
||||
}
|
||||
|
||||
@media screen {
|
||||
.bg-#{$name} {
|
||||
background-color: $hex;
|
||||
|
||||
::selection {
|
||||
@include text_contrast(color.invert($hex));
|
||||
background: color.invert($hex);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
@use "sass:list";
|
||||
|
||||
// define as many $color-stops as needed
|
||||
@mixin linear-gradient($direction, $color-stops...) {
|
||||
background: list.nth(list.nth($color-stops, 1), 1);
|
||||
background: linear-gradient($direction, $color-stops);
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
@use "sass:color";
|
||||
@use "sass:math";
|
||||
|
||||
@mixin text-contrast($n, $dark: $black, $light: $white, $cutoff: 1.8) {
|
||||
$brightness: math.round((color.red($n) * 299) + (color.green($n) * 587) + math.div((color.blue($n) * 114), 1000));
|
||||
$light-color: math.round((color.red($white) * 299) + (color.green($white) * 587) + math.div((color.blue($white) * 114), 1000));
|
||||
|
||||
@if abs($brightness) < (math.div($light-color, $cutoff)) {
|
||||
color: $light;
|
||||
}
|
||||
|
||||
@else {
|
||||
color: $dark;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
@use "sass:math";
|
||||
|
||||
$px: math.div(1, 16);
|
||||
|
||||
$screen-xxs: 22.5em !default;
|
||||
$screen-xs: 30.0em !default;
|
||||
$screen-sm: 48.0em !default;
|
||||
$screen-md: 62.0em !default;
|
||||
$screen-lg: 75.0em !default;
|
||||
$screen-xl: 87.5em !default;
|
||||
$screen-xxl: 100.0em !default;
|
||||
$screen-xxxl: 120.0em !default;
|
||||
|
||||
// So media queries don"t overlap when required
|
||||
$screen-xxs-max: ($screen-xs - $px) !default;
|
||||
$screen-xs-max: ($screen-sm - $px) !default;
|
||||
$screen-sm-max: ($screen-md - $px) !default;
|
||||
$screen-md-max: ($screen-lg - $px) !default;
|
||||
$screen-lg-max: ($screen-xl - $px) !default;
|
||||
$screen-xl-max: ($screen-xxl - $px) !default;
|
||||
$screen-xxl-max: ($screen-xxxl - $px) !default;
|
||||
|
||||
// Breakpoints
|
||||
$breakpoints: (
|
||||
"screen-xxs": $screen-xxs,
|
||||
"screen-xs": $screen-xs,
|
||||
"screen-sm": $screen-sm,
|
||||
"screen-md": $screen-md,
|
||||
"screen-lg": $screen-lg,
|
||||
"screen-xl": $screen-xl,
|
||||
"screen-xxl": $screen-xxl,
|
||||
"screen-xxxl": $screen-xxxl,
|
||||
);
|
||||
@@ -0,0 +1,122 @@
|
||||
@use "sass:color";
|
||||
|
||||
//== Status
|
||||
$success: #39b54a;
|
||||
$error: #be1e2d;
|
||||
$alert: #eed202;
|
||||
|
||||
//== Brand Colours
|
||||
$primary: #2f4976;
|
||||
$secondary: #a094b1;
|
||||
$tertiary: #f58762;
|
||||
$quaternary: invert($primary);
|
||||
$quinary: invert($secondary);
|
||||
|
||||
//== Primary Tints
|
||||
$primary-darkest: #001427;
|
||||
$primary-darker: #001930;
|
||||
$primary-dark: #001E3B;
|
||||
$primary-light: #324F6C;
|
||||
$primary-lighter: #5A7289;
|
||||
$primary-lightest: #7A8EA0;
|
||||
|
||||
//== Secondary Tints
|
||||
$secondary-darkest: #8B2E22;
|
||||
$secondary-darker: #A9382A;
|
||||
$secondary-dark: #CE4433;
|
||||
$secondary-light: #FC7564;
|
||||
$secondary-lighter: #FD9082;
|
||||
$secondary-lightest: #FEA69B;
|
||||
|
||||
//== Tertiary Tints
|
||||
$tertiary-darkest: #8B7401;
|
||||
$tertiary-darker: #AA8E01;
|
||||
$tertiary-dark: #CFAD01;
|
||||
$tertiary-light: #FEDC33;
|
||||
$tertiary-lighter: #FEE35B;
|
||||
$tertiary-lightest: #FEED95;
|
||||
|
||||
//== quaternary Tints
|
||||
$quaternary-darkest: #454B73;
|
||||
$quaternary-darker: #545C8C;
|
||||
$quaternary-dark: #6670AB;
|
||||
$quaternary-light: #99A7FF;
|
||||
$quaternary-lighter: #C2CEFF;
|
||||
$quaternary-lightest: #E0E6FF;
|
||||
|
||||
//== quaternary Tints
|
||||
$quinary-darkest: #FF702A;
|
||||
$quinary-darker: #FFA968;
|
||||
$quinary-dark: #FFC693;
|
||||
$quinary-light: #FFE8CF;
|
||||
$quinary-lighter: #FFF7EE; // empathetic white
|
||||
$quinary-lightest: #FFFBF6;
|
||||
|
||||
//== Shades
|
||||
$white: white;
|
||||
$grey-lightest: #EBEBE4;
|
||||
$grey-lighter: #D3D3CC;
|
||||
$grey-light: #B1B1A7;
|
||||
$grey: #919087;
|
||||
$grey-dark: #69665B;
|
||||
$grey-darker: #414039;
|
||||
$grey-darkest: #212019;
|
||||
$black: black;
|
||||
|
||||
//## Colour Array (used in generating colour classes).
|
||||
$colors: (
|
||||
// shades
|
||||
"black": $black,
|
||||
"grey-darkest": $grey-darkest,
|
||||
"grey-darker": $grey-darker,
|
||||
"grey-dark": $grey-dark,
|
||||
"grey-light": $grey-light,
|
||||
"grey-lighter": $grey-lighter,
|
||||
"grey-lightest": $grey-lightest,
|
||||
"white": $white,
|
||||
// status
|
||||
"error": $error,
|
||||
"success": $success,
|
||||
"alert": $alert,
|
||||
// brand
|
||||
"primary": $primary,
|
||||
"secondary": $secondary,
|
||||
"tertiary": $tertiary,
|
||||
"quaternary": $quaternary,
|
||||
"quinary": $quinary,
|
||||
// primary tints
|
||||
"primary-darkest": $primary-darkest,
|
||||
"primary-darker": $primary-darker,
|
||||
"primary-dark": $primary-dark,
|
||||
"primary-light": $primary-light,
|
||||
"primary-lighter": $primary-lighter,
|
||||
"primary-lightest": $primary-lightest,
|
||||
// secondary tints
|
||||
"secondary-darkest": $secondary-darkest,
|
||||
"secondary-darker": $secondary-darker,
|
||||
"secondary-dark": $secondary-dark,
|
||||
"secondary-light": $secondary-light,
|
||||
"secondary-lighter": $secondary-lighter,
|
||||
"secondary-lightest": $secondary-lightest,
|
||||
// tertiary tints
|
||||
"tertiary-darkest": $tertiary-darkest,
|
||||
"tertiary-darker": $tertiary-darker,
|
||||
"tertiary-dark": $tertiary-dark,
|
||||
"tertiary-light": $tertiary-light,
|
||||
"tertiary-lighter": $tertiary-lighter,
|
||||
"tertiary-lightest": $tertiary-lightest,
|
||||
// tertiary tints
|
||||
"quaternary-darkest": $quaternary-darkest,
|
||||
"quaternary-darker": $quaternary-darker,
|
||||
"quaternary-dark": $quaternary-dark,
|
||||
"quaternary-light": $quaternary-light,
|
||||
"quaternary-lighter": $quaternary-lighter,
|
||||
"quaternary-lightest": $quaternary-lightest,
|
||||
// quinary tints
|
||||
"quinary-darkest": $quinary-darkest,
|
||||
"quinary-darker": $quinary-darker,
|
||||
"quinary-dark": $quinary-dark,
|
||||
"quinary-light": $quinary-light,
|
||||
"quinary-lighter": $quinary-lighter,
|
||||
"quinary-lightest": $quinary-lightest,
|
||||
);
|
||||
@@ -0,0 +1,46 @@
|
||||
@use "sass:math";
|
||||
|
||||
$offCanvasWidth: 17.5em;
|
||||
|
||||
$brandWidth: 7.46875em !default;
|
||||
// $brandHeight: 1.835em !default;
|
||||
|
||||
$tileAspectRatio: math.div(400, 640) * 100%;
|
||||
$heroAspectRatio: math.div(593, 1920) * 100vw;
|
||||
$slideAspectRatio: math.div(733, 1920) * 100vw;
|
||||
|
||||
$sectionSmallest: 0.500em;
|
||||
$sectionSmaller: 1.000em;
|
||||
$sectionSmall: 1.500em;
|
||||
$sectionMedium: 3.000em;
|
||||
$sectionLarge: 5.000em;
|
||||
$sectionLarger: 7.500em;
|
||||
$sectionLargest: 10.000em;
|
||||
|
||||
$containerLarge: 73.125em;
|
||||
$containerMedium: 60.000em;
|
||||
$containerSmall: 50.000em;
|
||||
$containerNarrow: 34.000em;
|
||||
|
||||
$innerLarger: 5.000em;
|
||||
$innerLarger: 3.000em;
|
||||
$innerLarge: 2.000em;
|
||||
$innerMedium: 1.500em;
|
||||
$innerSmall: 1.000em;
|
||||
$innerSmaller: 0.750em;
|
||||
$innerSmallest: 0.500em;
|
||||
|
||||
$borderRadiusLargeer: 1.500em;
|
||||
$borderRadiusLarge: 1.000em;
|
||||
$borderRadius: 1.000em;
|
||||
$borderRadiusSmall: 0.500em;
|
||||
$borderRadiusSmaller: 0.250em;
|
||||
|
||||
$borderThin: 0.0625em;
|
||||
$borderWidth: 0.1250em;
|
||||
$borderThick: 0.2500em;
|
||||
$borderThicker: 0.5000em;
|
||||
$borderThickest: 1.0000em;
|
||||
|
||||
$angleHeight: 6.667cqw;
|
||||
$angleHeightSmall: 3.472cqw;
|
||||
Reference in New Issue
Block a user