nathan
/
aSkelly
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Simplify vars, new mixins, and addition stylings

Browse Source 
Including test styling, etc. too
feature/WIP
Nathan Steel 8 months ago
parent b0b4dda4a1
commit 000761cbc4
27 changed files with 809 additions and 450 deletions
Show Stats Download Patch File Download Diff File

18
scss/base/_base.scss
Unescape Escape View File

@ -10,8 +10,14 @@ html,body{height: 100%}
body{display: flex;flex-direction: column;} body{display: flex;flex-direction: column;}
main, .main{ flex: 1 0 auto } main, .main{ flex: 1 0 auto }
html{
font-size: $font-size; /* rem based on this (root element), em is based on the parent element of wherever the change is */
// @include media($media-xl){ font-size: 1vw; } /* (Potential) for better responsive scaling on larger monitors. Trying out */
}
body { body {
background: $color-bg; background: $color-background;
color: $color-text; color: $color-text;
font-family: $font-family; font-family: $font-family;
line-height: $line-height; line-height: $line-height;
@ -19,7 +25,15 @@ body {
@include reset; /* Margin 0, padding 0. Testing new @use/@forward as globals aren't allowed... */ @include reset; /* Margin 0, padding 0. Testing new @use/@forward as globals aren't allowed... */
@include color-scheme(dark) { @include color-scheme(dark) {
background: $color-bg--dark; background: $color-background--dark;
color: $color-text--dark; color: $color-text--dark;
} }
} }
// On very small screens allow the text to completetly distort itself to fit on the page
*{
overflow-wrap: anywhere;
@include media($media-xs){
overflow-wrap: normal;
}
}

159
scss/base/_grid.scss
Unescape Escape View File

@ -1,4 +1,5 @@
@use '../utilities/main_utilities' as *; @use '../utilities/main_utilities' as *;
@use "sass:math";
/* https://css-tricks.com/css-grid-in-ie-debunking-common-ie-grid-misconceptions/ */ /* https://css-tricks.com/css-grid-in-ie-debunking-common-ie-grid-misconceptions/ */
/* https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */ /* https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */
@ -8,14 +9,34 @@
/* grid-template-columns: 1fr repeat(3, 20px 1fr); */ /* grid-template-columns: 1fr repeat(3, 20px 1fr); */
/* Would prefer to use grid, but there's less support for earlier browsers, so using flex (for now) */ /* Would prefer to use grid, but there's less support for earlier browsers, so using flex (for now) */
html{
font-size: 18px; /* rem based on this (root element), em is based on the parent element of wherever the change is */ // Add the content to whichever col-xx-xx
@mixin col-width($width: 100%) {
flex: 0 0 $width* 1%; // *1% just to make it a % value, #{$width}% wasn't working
max-width: $width * 1%;
}
// Add all the cols 1..12 of -xs -md -xl, etc. to stylesheet/media without needing to copy/paste or mass modify
// Just convienient
@mixin add-cols($modifier: ''){ // $modifier: '-md', etc.
$max-cols: 12;
$col-width: math.div(100,$max-cols); // 100/12 = 8.33% Then multiply this by the current col count 1..12
@for $i from 1 through 12 {
$width: $col-width * $i;
.col#{$modifier}-#{$i} {
@include col-width($width);
}
}
} }
.container{ .container{
margin: 0 auto; margin: 0 auto;
width: 100%;
max-width: $width-content; max-width: $width-content;
padding: 1.4rem 1rem; padding: rems(22px) rems(16px);
position: relative; // Default static doesn't like inverse margins atop other block elements
/* overflow: auto; */ /* overflow: auto; */
} }
.container--no-topgap{ .container--no-topgap{
@ -30,20 +51,26 @@ html{
padding-top: 0; padding-top: 0;
} }
.row { .row {
position: relative; position: relative;
width: 100%;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: flex-start; align-items: flex-start;
flex-direction: row; flex-direction: row;
row-gap: 1.25rem; /* In-case of flex-wrap content, space it out. Padding left+right */ row-gap: rems(19px); /* In-case of flex-wrap content, space it out. Padding left+right */
// margin-right: -#{$grid-gap}; // Negative margin equal to the padding on cols, to allow elements not in col to be used 1:1 in rows
// margin-left: -#{$grid-gap}; // Negative margin equal to the padding on cols, to allow elements not in col to be used 1:1 in rows
margin-right: #{$grid-gap--numeric * -.5}rem;
margin-left: #{$grid-gap--numeric * -.5}rem;
} }
.row+.row{ .row+.row{
margin-top: 1.4rem; margin-top: rems(22px);
} }
/* To make (first level) elements fit within the flex container (h1s, paras, etc. don't use all space by default) */ /* To make (first level) elements fit within the flex container (h1s, paras, etc. don't use all space by default) */
@ -55,7 +82,7 @@ html{
width: 100%; width: 100%;
} }
/* inline elements */ /* inline elements */
.col img{ .col img, .col iframe{
max-width: 100%; max-width: 100%;
height: auto; height: auto;
margin-right: auto; margin-right: auto;
@ -66,12 +93,14 @@ html{
/* Col elements with row should be flex elements to allow flex (eg. section, etc are block by default) */ /* Col elements with row should be flex elements to allow flex (eg. section, etc are block by default) */
/* MAYBE REMOVE THIS, IF YOU WANT ROW FUNCTIONALITY IN A ROW, ADD ANOTHER ROW!!! */ /* MAYBE REMOVE THIS, IF YOU WANT ROW FUNCTIONALITY IN A ROW, ADD ANOTHER ROW!!! */
.row [class^="col"]{ .row [class^="col"]{
padding-right: 0.625rem; /* ~20px gap = 20/16(html size) / 2(as 2 elems next to each other should equat the gap = 0.62625 */ // padding-right: $grid-gap; /* ~20px gap = 20/16(OLD html size) / 2(as 2 elems next to each other should equat the gap = 0.62625 */
padding-left: 0.625rem; /* In place of gap, so it can be full width rows */ // padding-left: $grid-gap; /* In place of gap, so it can be full width rows */
padding-right: #{$grid-gap--numeric * .5}rem;
padding-left: #{$grid-gap--numeric * .5}rem;
/* display: flex; */ /* display: flex; */
/* flex-wrap: wrap; */ /* flex-wrap: wrap; */
min-height: 0.125rem; min-height: 2px;
} }
@ -80,21 +109,17 @@ html{
overflow-x: scroll; /* Used instead of auto, as auto changed the height of elements if a tabgroup toggled */ overflow-x: scroll; /* Used instead of auto, as auto changed the height of elements if a tabgroup toggled */
justify-content: left; justify-content: left;
/* Scrollbar stuff */ /* Scrollbar stuff */
scrollbar-color: $color-scrollbar transparent; scrollbar-color: $color-text transparent;
scrollbar-width: thin; scrollbar-width: thin;
padding-bottom: .5rem; padding-bottom: rems(8px);
@include color-scheme(dark) { @include color-scheme(dark) {
scrollbar-color: $color-scrollbar--dark transparent; scrollbar-color: $color-text--dark transparent;
} }
} }
.row--scroll [class^="col"]{ .row--scroll [class^="col"]{}
} .col{ flex: 0 1 auto; } // Just allow shrink, no grow
.col{
flex: 0 0 auto;
}
// Default cols to 100% width when below $media-xs (base 360px) // Default cols to 100% width when below $media-xs (base 360px)
.col-1,.col-2,.col-3,.col-4,.col-5,.col-6, .col-1,.col-2,.col-3,.col-4,.col-5,.col-6,
@ -108,33 +133,10 @@ html{
// but will be overwritten/cascaded by their xs,md,lg, etc. counterparts // but will be overwritten/cascaded by their xs,md,lg, etc. counterparts
// This is duplicated at md, as the 'default' col will be medium, needed here in-case people just // This is duplicated at md, as the 'default' col will be medium, needed here in-case people just
// use .col-4, etc. as an end-all be-all // use .col-4, etc. as an end-all be-all
.col-1 { flex: 0 0 8.33%; } @include add-cols('');
.col-2 { flex: 0 0 16.66%; }
.col-3 { flex: 0 0 25%; }
.col-3p5 { flex: 0 0 29.166%; } /* 3 point 5, example for scroll-off page, example. Should be set independantly */ .col-3p5 { flex: 0 0 29.166%; } /* 3 point 5, example for scroll-off page, example. Should be set independantly */
.col-4 { flex: 0 0 33.33%; }
.col-5 { flex: 0 0 41.66%; }
.col-6 { flex: 0 0 50%; }
.col-7 { flex: 0 0 58.33%; }
.col-8 { flex: 0 0 66.66%; }
.col-9 { flex: 0 0 75%; }
.col-10 { flex: 0 0 83.33%; }
.col-11 { flex: 0 0 91.66%; }
.col-12 { flex: 0 0 100%; }
// Now the actual xs styling // Now the actual xs styling
.col-xs-1 { flex: 0 0 8.33% } @include add-cols('-xs');
.col-xs-2 { flex: 0 0 16.66% }
.col-xs-3 { flex: 0 0 25% }
.col-xs-4 { flex: 0 0 33.33% }
.col-xs-5 { flex: 0 0 41.66% }
.col-xs-6 { flex: 0 0 50% }
.col-xs-7 { flex: 0 0 58.33% }
.col-xs-8 { flex: 0 0 66.66% }
.col-xs-9 { flex: 0 0 75% }
.col-xs-10 { flex: 0 0 83.33% }
.col-xs-11 { flex: 0 0 91.66% }
.col-xs-12 { flex: 0 0 100% }
.hidden-xs { display: none } .hidden-xs { display: none }
@ -144,33 +146,10 @@ html{
// THINK .col-3 will need to be re-cascaded each time, otherwise the sm/md will overwrite for ever // THINK .col-3 will need to be re-cascaded each time, otherwise the sm/md will overwrite for ever
// if it's recascaded here for instance, any .col-xs that have .col- will be replaced by the (default) col size // if it's recascaded here for instance, any .col-xs that have .col- will be replaced by the (default) col size
.col-1 { flex: 0 0 8.33%; } @include add-cols('');
.col-2 { flex: 0 0 16.66%; }
.col-3 { flex: 0 0 25%; }
.col-3p5 { flex: 0 0 29.166%; } /* 3 point 5, example for scroll-off page, example. Should be set independantly */
.col-4 { flex: 0 0 33.33%; }
.col-5 { flex: 0 0 41.66%; }
.col-6 { flex: 0 0 50%; }
.col-7 { flex: 0 0 58.33%; }
.col-8 { flex: 0 0 66.66%; }
.col-9 { flex: 0 0 75%; }
.col-10 { flex: 0 0 83.33%; }
.col-11 { flex: 0 0 91.66%; }
.col-12 { flex: 0 0 100%; }
/* (100/12) * x = the flex % */ /* (100/12) * x = the flex % */
.col-sm-1 { flex: 0 0 8.33% } @include add-cols('-sm');
.col-sm-2 { flex: 0 0 16.66% }
.col-sm-3 { flex: 0 0 25% }
.col-sm-4 { flex: 0 0 33.33% }
.col-sm-5 { flex: 0 0 41.66% }
.col-sm-6 { flex: 0 0 50% }
.col-sm-7 { flex: 0 0 58.33% }
.col-sm-8 { flex: 0 0 66.66% }
.col-sm-9 { flex: 0 0 75% }
.col-sm-10 { flex: 0 0 83.33% }
.col-sm-11 { flex: 0 0 91.66% }
.col-sm-12 { flex: 0 0 100% }
.hidden-sm { display: none } .hidden-sm { display: none }
@ -186,18 +165,8 @@ html{
/* (100/12) * x = the flex % */ /* (100/12) * x = the flex % */
// Medium AND .col-4 over-ridden for the 2nd time, as medium is to be the default 'col' size // Medium AND .col-4 over-ridden for the 2nd time, as medium is to be the default 'col' size
.col-md-1, .col-1 { flex: 0 0 8.33% } @include add-cols('');
.col-md-2, .col-2 { flex: 0 0 16.66% } @include add-cols('-md');
.col-md-3, .col-3 { flex: 0 0 25% }
.col-md-4, .col-4 { flex: 0 0 33.33% }
.col-md-5, .col-5 { flex: 0 0 41.66% }
.col-md-6, .col-6 { flex: 0 0 50% }
.col-md-7, .col-7 { flex: 0 0 58.33% }
.col-md-8, .col-8 { flex: 0 0 66.66% }
.col-md-9, .col-9 { flex: 0 0 75% }
.col-md-10, .col-10 { flex: 0 0 83.33% }
.col-md-11, .col-11 { flex: 0 0 91.66% }
.col-md-12, .col-12 { flex: 0 0 100% }
.hidden-md { display: none } .hidden-md { display: none }
@ -213,18 +182,7 @@ html{
// each time. So should be good. Reckon I need mixins/functions to replicate this grid though, as it's a // each time. So should be good. Reckon I need mixins/functions to replicate this grid though, as it's a
// little uhhhh, jank and repetative atm // little uhhhh, jank and repetative atm
/* (100/12) * x = the flex % */ /* (100/12) * x = the flex % */
.col-lg-1 { flex: 0 0 8.33% } @include add-cols('-lg');
.col-lg-2 { flex: 0 0 16.66% }
.col-lg-3 { flex: 0 0 25% }
.col-lg-4 { flex: 0 0 33.33% }
.col-lg-5 { flex: 0 0 41.66% }
.col-lg-6 { flex: 0 0 50% }
.col-lg-7 { flex: 0 0 58.33% }
.col-lg-8 { flex: 0 0 66.66% }
.col-lg-9 { flex: 0 0 75% }
.col-lg-10 { flex: 0 0 83.33% }
.col-lg-11 { flex: 0 0 91.66% }
.col-lg-12 { flex: 0 0 100% }
.hidden-lg { display: none } .hidden-lg { display: none }
@ -237,18 +195,7 @@ html{
@include media($media-xl) { @include media($media-xl) {
/* (100/12) * x = the flex % */ /* (100/12) * x = the flex % */
.col-xl-1 { flex: 0 0 8.33% } @include add-cols('-xl');
.col-xl-2 { flex: 0 0 16.66% }
.col-xl-3 { flex: 0 0 25% }
.col-xl-4 { flex: 0 0 33.33% }
.col-xl-5 { flex: 0 0 41.66% }
.col-xl-6 { flex: 0 0 50% }
.col-xl-7 { flex: 0 0 58.33% }
.col-xl-8 { flex: 0 0 66.66% }
.col-xl-9 { flex: 0 0 75% }
.col-xl-10 { flex: 0 0 83.33% }
.col-xl-11 { flex: 0 0 91.66% }
.col-xl-12 { flex: 0 0 100% }
.hidden-xl { display: none } .hidden-xl { display: none }

8
scss/base/_image.scss
Unescape Escape View File

@ -11,10 +11,10 @@ figure img {
} }
figure figcaption { figure figcaption {
color: $color-text-secondary; color: $color-text;
@include color-scheme(dark) { @include color-scheme(dark) {
color: $color-text-secondary--dark; color: $color-text--dark;
} }
} }
@ -22,3 +22,7 @@ section img,
article img { article img {
max-width: 100%; max-width: 100%;
} }
.image--center{
margin: 0 auto;
}

11
scss/base/_reset.scss
Unescape Escape View File

@ -32,17 +32,6 @@ body{
line-height: 1.5; line-height: 1.5;
} }
/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4, h5, h6,
button, input, label{
line-height: 1.35;
}
/* Balance text wrapping on headings */
h1, h2, h3, h4, h5, h6{
text-wrap: balance;
}
/* A elements that don't have a class get default styles */ /* A elements that don't have a class get default styles */
a:not([class]){ a:not([class]){
text-decoration-skip-ink: auto; text-decoration-skip-ink: auto;

32
scss/base/_typography.scss
Unescape Escape View File

@ -5,11 +5,27 @@ p {
width: 100%; width: 100%;
} }
p+p, h1+p{ /* Para after para should space out */ p+p, h1+p{ /* Para after para should space out */
margin-top: .75rem; margin-top: rems(10px);
}
/* Set shorter line heights on headings and interactive elements */
h1,.h1, h2,.h2, h3,.h3, h4,.h4, h5,.h5 h6,.h6,
button, input, label{
line-height: 1.35;
}
/* Balance text wrapping on headings */
h1, h2, h3, h4, h5, h6{
text-wrap: balance;
}
h1, .h1{
font-size: rems(30px);
margin-bottom: rems(18px);
} }
mark, .highlight{ /* Useful for search result highlighting, and general hightlights that aren't strong */ mark, .highlight{ /* Useful for search result highlighting, and general hightlights that aren't strong */
padding: 0.1rem; padding: rems(2px);
background: $color-highlight; background: $color-highlight;
@include color-scheme(dark) { @include color-scheme(dark) {
@ -18,20 +34,20 @@ mark, .highlight{ /* Useful for search result highlighting, and general hightlig
} }
small { small {
color: $color-text-secondary; color: $color-text;
@include color-scheme(dark) { @include color-scheme(dark) {
color: $color-text-secondary--dark; color: $color-text--dark;
} }
} }
hr{ hr{
background-color: $color-bg-secondary; background-color: $color-background--dark; // Dark by default so it is shown
border: none; border: none;
height: 1px; height: 1px; // Doesn't need to be rem's y'kno
width: 100%; width: 100%;
max-width: $width-content; max-width: $width-content;
margin: .5rem auto; margin: rems(24px) auto;
@include color-scheme(dark) { @include color-scheme(dark) {
color: $color-bg-secondary--dark; color: $color-background;
} }
} }

27
scss/component/_alert.scss
Unescape Escape View File

@ -3,38 +3,39 @@
// Alerts // Alerts
.alert{ .alert{
background: $color-secondary-accent; background: color.adjust($color-tertiary, $saturation: -25%);
border-left: 4px solid $color-secondary; border-left: 4px solid $color-tertiary;
border-right: 4px solid $color-secondary; border-right: 4px solid $color-tertiary;
padding: .1rem .8rem; padding: .1rem .8rem;
margin-bottom:.5rem; margin-bottom:.5rem;
color: $color-background;
@include color-scheme(dark) { @include color-scheme(dark) {
color: $color-secondary-accent--dark; color: $color-tertiary--dark;
border-color: $color-secondary--dark; border-color: $color-secondary--dark;
} }
} }
.alert--error{ .alert--error{
background: desaturate($alert-color--error, 40); background: color.adjust($color-fail, $saturation: -25%);
border-color: $alert-color--error; border-color: $color-fail;
@include color-scheme(dark) { @include color-scheme(dark) {
color: $color-secondary-accent; color: $color-tertiary;
} }
} }
.alert--warning{ .alert--warning{
background: desaturate($alert-color--warning, 40); background: color.adjust($color-warning, $saturation: -25%);
border-color: $alert-color--warning; border-color: $color-warning;
@include color-scheme(dark) { @include color-scheme(dark) {
color: $color-secondary-accent; color: $color-tertiary;
} }
} }
.alert--success{ .alert--success{
background: desaturate($alert-color--success, 40); background: color.adjust($color-success, $saturation: -25%);
border-color: $alert-color--success; border-color: $color-success;
@include color-scheme(dark) { @include color-scheme(dark) {
color: $color-secondary-accent; color: $color-tertiary;
} }
} }

4
scss/component/_banner.scss
Unescape Escape View File

@ -2,9 +2,9 @@
.banner{ .banner{
width: 100%; width: 100%;
background: $color-banner; background: $color-primary;
@include color-scheme(dark) { @include color-scheme(dark) {
background: $color-banner--dark; background: $color-primary--dark;
} }
} }

16
scss/component/_button.scss
Unescape Escape View File

@ -5,7 +5,7 @@
button, button,
input[type="submit"] input[type="submit"]
{ {
color: $color-bg; color: $color-background;
background: $color-link; background: $color-link;
border: 2px solid $color-accent; border: 2px solid $color-accent;
border-radius: $border-radius; border-radius: $border-radius;
@ -61,7 +61,7 @@ button.button--blue,
input[type="submit"].button--blue input[type="submit"].button--blue
{ {
background-color: $color-link; background-color: $color-link;
color: $color-bg; color: $color-background;
@include color-scheme(dark) { @include color-scheme(dark) {
border-color: $color-link--dark; border-color: $color-link--dark;
@ -71,15 +71,15 @@ input[type="submit"].button--blue
.button--disabled, .button--disabled,
button:disabled, button:disabled,
input:disabled { input:disabled {
background: $color-bg-secondary; background: $color-text-secondary;
border-color: $color-bg-secondary; border-color: $color-text-secondary;
color: $color-text-secondary; color: $color-tertiary;
cursor: not-allowed; cursor: not-allowed;
@include color-scheme(dark) { @include color-scheme(dark) {
background-color: $color-bg-secondary--dark; background-color: $color-text-secondary--dark;
border-color: $color-bg-secondary--dark; border-color: $color-text-secondary--dark;
color: $color-text-secondary--dark; color: $color-tertiary--dark;
} }
} }
.button--disabled:hover, .button--disabled:hover,

48
scss/component/_card.scss
Unescape Escape View File

@ -4,26 +4,29 @@
/* Best to do this with grid, but there's less browser support... */ /* Best to do this with grid, but there's less browser support... */
.card{ .card{
/* As not using grid atm, no solution to keep cards the same size when flex-wrapped */ /* As not using grid atm, no solution to keep cards the same size when flex-wrapped */
border: 1px solid $color-bg-secondary; border: rems(1px) solid $color-tertiary;
border-radius: $border-radius; border-radius: $border-radius;
box-shadow: $box-shadow $color-shadow; // box-shadow: $box-shadow $color-tertiary;
padding: 1.25rem; // padding: rems(24px);
/* flex: 0 0 $width-card; */ background: $color-background;
background: $color-card;
display: block !important; /* Unset row/col default */ // display: block !important; /* Unset row/col default */
display: flex !important;
flex-direction: column;
@include color-scheme(dark) { @include color-scheme(dark) {
border-color: $color-bg-secondary--dark; border-color: $color-tertiary--dark;
box-shadow: $box-shadow $color-shadow--dark; // box-shadow: $box-shadow $color-tertiary--dark;
background: $color-card--dark; background: $color-background--dark;
} }
} }
.card:hover { .card:hover {
box-shadow: $box-shadow $color-bg-secondary; box-shadow: $box-shadow $color-primary;
border-color: $color-primary;
@include color-scheme(dark) { @include color-scheme(dark) {
box-shadow: $box-shadow $color-bg-secondary--dark; border-color: $color-primary--dark;
box-shadow: $box-shadow $color-primary--dark;
} }
} }
@ -33,3 +36,26 @@
.row--cards .card{ .row--cards .card{
height: 100%; /* To make multiple cards next to each other 'same' height */ height: 100%; /* To make multiple cards next to each other 'same' height */
} }
.card__header, .card__body, .card__footer{
padding: rems(24px);
}
.card__header{
background-color: $color-secondary;
}
.card__image{}
.card__image--top{}
.card__title{
font-size: rems(26px);
}
.card__body{
height: 100%; // Fill up the space of a card that's stretched
}
.card__text{}
* + .card__text{
margin-top: rems(10px);
}
.card__footer{
margin-top: auto; // Be at bottom of flexed card
background-color: $color-primary;
}

149
scss/component/_form.scss
Unescape Escape View File

@ -1,19 +1,12 @@
@use '../utilities/main_utilities' as *; @use '../utilities/main_utilities' as *;
form { form {
border: 1px solid $color-bg-secondary;
border-radius: $border-radius;
box-shadow: $box-shadow $color-shadow;
display: block; display: block;
max-width: $width-card-wide;
min-width: $width-card;
padding: 1.5rem;
text-align: $justify-normal; text-align: $justify-normal;
margin: 0 auto; margin: 0 auto;
@include color-scheme(dark) { @include color-scheme(dark) {
border-color: $color-bg-secondary--dark; border-color: $color-text-secondary--dark;
box-shadow: $color-shadow--dark;
} }
} }
@ -28,11 +21,10 @@ select,
textarea { textarea {
display: block; display: block;
font-size: inherit; font-size: inherit;
max-width: $width-card-wide;
} }
label { label {
font-weight: bold; color: $color-text-secondary;
margin-bottom: 0.2rem; margin-bottom: rems(10px);
} }
input[type="checkbox"], input[type="checkbox"],
@ -55,27 +47,146 @@ input[type="range"] {
input, input,
select, select,
textarea { textarea {
border: 1px solid $color-bg-secondary; border: 1px solid $color-text-secondary;
border-radius: $border-radius; border-radius: $border-radius;
margin-bottom: 1rem; padding: rems(6px) rems(13px); //0.4rem 0.8rem;
padding: 0.4rem 0.8rem; width: 100%;
@include color-scheme(dark) { @include color-scheme(dark) {
border-color: $color-bg-secondary--dark; border-color: $color-text-secondary--dark;
} }
} }
input[type="text"], input[type="text"],
input[type="password"] input[type="password"],
textarea { textarea {
width: calc(100% - 1.6rem); width: 100%;
background-color: $color-background;
} }
input[readonly], input[readonly],
textarea[readonly] { textarea[readonly] {
background-color: $color-bg-secondary; background-color: $color-text-secondary;
@include color-scheme(dark) { @include color-scheme(dark) {
background-color: $color-bg-secondary--dark; background-color: $color-text-secondary--dark;
}
}
// This is weird, needs work
input[type="color"]{
padding: rems(4.5px) rems(13px);
box-sizing: content-box;
}
select{
-webkit-appearance: menulist-button;
color: black;
}
input::placeholder
, select option[value=""], select:invalid
,textarea::placeholder
{
color: $color-text-secondary;
}
// Fancy inputs
.input-group{
@include flex();
width: 100%;
position: relative;
align-items: stretch;
}
// They're the same atm, but use prepend for start, and append for end as I may change them to be different
.input-group__prepend, .input-group__append{
@include flex();
flex: 1 0 auto; // To make the full content be shown
// To allow for dropdowns, etc. as pre/append content
.input-group__content{
border: none;
border-radius: 0;
}
}
.input-group__content{
@include flex();
align-items: center;
padding: rems(8px);
text-align: center;
background: $color-primary;
color: $color-background;
}
.input-group__prepend .input-group__content{
border-top-left-radius: $border-radius;
border-bottom-left-radius: $border-radius;
}
.input-group__append .input-group__content{
border-top-right-radius: $border-radius;
border-bottom-right-radius: $border-radius;
}
// Remove the border left/right on inputs related to ap/prepends
.input-group__prepend + .input-group__input{
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
// input directly before a pre/append
.input-group__input:has(+.input-group__append){
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
// WIP
// Checkbox/Radio
// custom-radio, custom-checkbox
$inputSize: remsNumeric(18);
$checkboxIcon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E");
.custom-checkbox:hover{
cursor: pointer;
}
.custom-checkbox label{
padding-left: $inputSize*1.5rem;
}
.custom-checkbox input{
// display: none;
}
.custom-checkbox label::after{
content: "";
position: absolute;
top: .25rem;
left: 0;
display: block;
width: #{$inputSize}rem;
height: #{$inputSize}rem;
background-repeat: no-repeat;
background-position: center center;
background-size: 50% 50%;
}
.custom-checkbox input:checked~label::after{
background-image: $checkboxIcon;
background-color: blue;
} }
.custom-checkbox label::before{
content: "";
position: absolute;
top: .25rem;
left: 0;
display: block;
width: #{$inputSize}rem;
height: #{$inputSize}rem;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: #dee2e6;
} }
// Then kinda same for custom-radio
// input:checked~label::before{
// background-color: green;
// }

5
scss/component/_hero.scss
Unescape Escape View File

@ -0,0 +1,5 @@
@use '../utilities/main_utilities' as *;
.hero{
padding: rems(48px) 0;
}

52
scss/component/_list.scss
Unescape Escape View File

@ -10,7 +10,6 @@ ul li {
list-style: none; list-style: none;
} }
/* Inline lists */ /* Inline lists */
.inline-list{ .inline-list{
list-style: none; list-style: none;
@ -27,54 +26,3 @@ ul li {
.inline-list>li{ /* Only affects first level li */ .inline-list>li{ /* Only affects first level li */
padding: 0; /* So that dropdowns, and nav areas aren't messed up by 'random' padding that on standard list items */ padding: 0; /* So that dropdowns, and nav areas aren't messed up by 'random' padding that on standard list items */
} }
/* DROPDOWN(S), CHANGE CLASS to dropdown, ALSO ADD MEGAMENU STYLING */
/* Nav/inline-list Dropdown */
.inline-list li:hover ul {
display: block;
}
/* ?? maybe change */
.inline-list li ul {
background: $color-bg;
border: 1px solid $color-bg-secondary;
border-top: 10px solid transparent;
border-radius: $border-radius;
display: none;
height: auto;
padding: .5rem 1rem;
position: absolute;
top: 2rem; /* THIS IS UNIQUE FOR EACH USE-CASE, WILL NEED ALTERING PER */
white-space: nowrap;
width: auto;
z-index: 1;
/* Centre */
/* left: 50%;
transform: translate(-50%, 0); */
/* Left */
left: 0;
/* Right */
/* transform: translate(-50%, 0); */
@include color-scheme(dark) {
background-color: $color-bg--dark;
border-color: $color-bg-secondary--dark;
}
}
.inline-list li ul::before {
/* fill gap above to make mousing over them easier */
/* background-color: green; */
content: "";
position: absolute;
left: 0;
right: 0;
top: -0.5rem;
height: 0.5rem;
}
.inline-list li ul li,
.inline-list li ul li a {
display: block;
}

8
scss/component/_modal.scss
Unescape Escape View File

@ -2,9 +2,9 @@
/* Popups */ /* Popups */
.modal{ .modal{
border: 1px solid $color-bg-secondary; border: 1px solid $color-text-secondary;
border-radius: $border-radius; border-radius: $border-radius;
box-shadow: $box-shadow $color-shadow; box-shadow: $box-shadow $color-text;
position: fixed; position: fixed;
top: 50%; top: 50%;
left: 50%; left: 50%;
@ -13,7 +13,7 @@
z-index: 999; z-index: 999;
@include color-scheme(dark) { @include color-scheme(dark) {
border-color: $color-bg-secondary--dark; border-color: $color-text-secondary--dark;
box-shadow: $color-shadow--dark; box-shadow: $color-text--dark;
} }
} }

6
scss/component/_quote.scss
Unescape Escape View File

@ -6,19 +6,19 @@ blockquote {
font-size: x-large; font-size: x-large;
line-height: $line-height; line-height: $line-height;
margin: 1rem auto; margin: 1rem auto;
max-width: $width-card-medium; width: 100%;
padding: 1.5rem 1rem; padding: 1.5rem 1rem;
text-align: $justify-important; text-align: $justify-important;
} }
blockquote footer{ blockquote footer{
color: $color-text-secondary; color: $color-tertiary;
display: block; display: block;
font-size: small; font-size: small;
line-height: $line-height; line-height: $line-height;
padding: 1.5rem 0; padding: 1.5rem 0;
@include color-scheme(dark) { @include color-scheme(dark) {
color: $color-text-secondary--dark; color: $color-tertiary--dark;
} }
} }

18
scss/component/_table.scss
Unescape Escape View File

@ -5,7 +5,7 @@
overflow-x: auto; overflow-x: auto;
} }
table { table {
border: 1px solid $color-bg-secondary; border: 1px solid $color-text-secondary;
border-radius: $border-radius; border-radius: $border-radius;
border-spacing: 0; border-spacing: 0;
max-width: 100%; max-width: 100%;
@ -16,7 +16,7 @@ table {
overflow-wrap: normal; overflow-wrap: normal;
@include color-scheme(dark) { @include color-scheme(dark) {
border-color: $color-bg-secondary--dark; border-color: $color-text-secondary--dark;
} }
} }
@ -28,15 +28,15 @@ table tr {
} }
table thead tr { table thead tr {
background-color: $color-table; background-color: $color-secondary;
/* border-radius: $border-radius; */ /* border-radius: $border-radius; */
color: $color-bg; color: $color-background;
margin: 0; margin: 0;
padding: 0; padding: 0;
@include color-scheme(dark) { @include color-scheme(dark) {
background-color: $color-table--dark; background-color: $color-secondary--dark;
color: $color-bg--dark; color: $color-background--dark;
} }
} }
@ -48,13 +48,13 @@ tbody tr:nth-child(even) {
background-color: $color-accent; background-color: $color-accent;
@include color-scheme(dark) { @include color-scheme(dark) {
background-color: $color-bg-secondary--dark; background-color: $color-text-secondary--dark;
} }
} }
tbody tr:nth-child(odd) { tbody tr:nth-child(odd) {
background-color: $color-bg; background-color: $color-background;
@include color-scheme(dark) { @include color-scheme(dark) {
background-color: $color-bg--dark; background-color: $color-background--dark;
} }
} }

16
scss/component/_tag.scss
Unescape Escape View File

@ -4,7 +4,7 @@
.tag{ .tag{
background-color: $color-secondary; background-color: $color-secondary;
border-radius: $border-radius; border-radius: $border-radius;
color: $color-bg; color: $color-background;
font-size: xx-small; font-size: xx-small;
font-weight: bold; font-weight: bold;
padding: 0.2rem 1rem; padding: 0.2rem 1rem;
@ -15,6 +15,18 @@
@include color-scheme(dark) { @include color-scheme(dark) {
background-color: $color-secondary--dark; background-color: $color-secondary--dark;
color: $color-bg--dark; color: $color-background--dark;
}
}
.tag--border{
color: $color-text;
background-color: $color-background;
border: rems(1px) solid $color-secondary--dark;
@include color-scheme(dark) {
color: $color-text--dark;
background-color: $color-background--dark;
border-color: $color-secondary--dark;
} }
} }

12
scss/helpers/_main_helpers.scss
Unescape Escape View File

@ -8,3 +8,15 @@
.no-padd{ padding: 0; } .no-padd{ padding: 0; }
.hide{ display: none; } .hide{ display: none; }
.mobile{ display: block; }
.desktop{ display: none; }
@include media($media-md){
.mobile{ display: none; }
.desktop{ display: block; }
}
.nowrap{
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}

39
scss/layout/_footer.scss
Unescape Escape View File

@ -1,2 +1,41 @@
@use '../utilities/main_utilities' as *; @use '../utilities/main_utilities' as *;
.footer{
background-color: $color-primary;
color: $color-text;
border-top: 1px solid $color-text;
@include color-scheme(dark) {
background-color: $color-primary--dark;
color: $color-text--dark;
border-color: $color-text--dark
}
a{
color: $color-background;
@include color-scheme(dark) {
color: $color-background--dark;
}
}
}
.sub-footer{
background-color: $color-tertiary;
@include color-scheme(dark) {
background-color: $color-tertiary--dark;
}
}
.sub-footer .container{
padding-top: rems(3px);
padding-bottom: rems(3px);
}
.website-by{
font-size: rems(12px);
font-family: monospace;
border-radius: var(--border-radius);
display: inline-block;
margin: 0 rems(2px);
padding: 0 rems(9px);
}

22
scss/layout/_header.scss
Unescape Escape View File

@ -1,2 +1,24 @@
@use '../utilities/main_utilities' as *; @use '../utilities/main_utilities' as *;
.site-title{
color: $color-secondary;
background: -webkit-linear-gradient(45deg, $color-primary, $color-text);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
@include color-scheme(dark) {
background: -webkit-linear-gradient(45deg, $color-primary--dark, $color-text--dark);
}
}
.site-title--header{
// height: 80px; /* To fake what it would look like with an image */
font-size: rems(30px);
line-height: 1;
}
.header{
background-color: $color-primary;
padding: rems(10px) 0;
@include color-scheme(dark) { color: $color-primary--dark; }
}

78
scss/layout/_nav.scss
Unescape Escape View File

@ -1,13 +1,87 @@
@use '../utilities/main_utilities' as *; @use '../utilities/main_utilities' as *;
$nav-spacer: rems(20px);
/* Nav */ /* Nav */
.nav{
// background-color: $color-background;
// @include color-scheme(dark) { color: $color-background--dark; }
}
.nav a{ .nav a{
text-decoration: none; text-decoration: none;
} }
.nav a{ .nav a{
color: $color-nav; color: $color-background;
@include color-scheme(dark) { @include color-scheme(dark) {
color: $color-nav--dark; color: $color-background--dark;
}
} }
.nav-list{
list-style: none;
padding: 0;
margin-left: -#{rems(10px)}; /* To offset the start of li margin. Little jank */
}
// .nav-list li,
.nav-list__item{
display: inline-block;
margin-left: rems(10px);
position: relative;
text-align: left;
}
// .nav-list>li,
.nav-list>.nav-list__item{ /* Only affects first level li */
padding: 0; /* So that dropdowns, and nav areas aren't messed up by 'random' padding that on standard list items */
}
.nav-list>.nav-list__item>a{ /* Only affects first level li */
padding: rems(10px) 0;
}
/* DROPDOWN(S), CHANGE CLASS to dropdown, ALSO ADD MEGAMENU STYLING */
// .nav-list li:hover ul,
.nav-list__item:hover .nav-list__item__dropdown{
display: block;
}
.nav-list__item__dropdown{
display: none;
position: absolute;
border-top: rems(10px) solid transparent; // To have it padded further down (if wanted)
z-index: $z-above;
/* Centre */
// left: 50%;
// transform: translate(-50%, 0);
/* Left */
left: 0;
/* Right */
// transform: translate(-50%, 0);
}
// .nav-list li ul,
.nav-list__item__dropdown__content{
background: $color-background;
border-top: 2px solid $color-primary;
// border-radius: $border-radius;
// display: none;
height: auto;
padding: .5rem 1rem;
// position: absolute;
white-space: nowrap;
width: auto;
z-index: 1;
@include color-scheme(dark) {
background-color: $color-background--dark;
border-color: $color-secondary--dark;
}
}
// .nav-list li ul li, .nav-list li ul li a,
.nav-list__item__dropdown__item, .nav-list__item__dropdown__item a{
display: block;
color: $color-text;
} }

1
scss/page/_main_page.scss
Unescape Escape View File

@ -2,3 +2,4 @@
// Page specific stuff // Page specific stuff
@use 'error/error'; @use 'error/error';
@use 'testing';

115
scss/page/_testing.scss
Unescape Escape View File

@ -0,0 +1,115 @@
@use '../utilities/main_utilities' as *;
// CSS Styling for test page, before standardising and making mixins/modules/components for the bits
.image-over-block{}
.image-over-block__block{
// remsFromPercent as design uses 1300px container, I'm using 1080 atm
padding: #{remsFromPercent(8.4)}rem #{remsFromPercent(10.7)}rem !important; // .important to prio over row [class^=col] for now
background-color: lightblue;
}
.image-over-block__image{
position: absolute;
bottom:50%;
transform: translate(0, 50%);
right:0;
@include media($media-lg){
bottom:-20%;
transform: translate(0, -20%);
}
}
.tag--social{
border-radius: 999px; padding: 3px 6px; font-size: 16px; height: 24px; width: 24px;
top: 0; overflow: hidden; text-decoration: none;
}
.sf-header{
border-bottom: 1px solid green; padding-top: 18px;padding-bottom: 18px;
}
.slide__dots{
margin-top: 20px;
}
.slide-dot, .swiper-pagination-bullet{
display: inline-block; width: 16px; height: 16px;
border:1px solid transparent; border-radius: 999px; position: relative;
}
.slide-dot__inner, .swiper-pagination-bullet{
width: 8px; height: 8px; background-color: grey; border-radius: 999px;
position: absolute;top: 50%;left: 50%; transform: translate(-50%, -50%);
}
.slide-dot--active, .swiper-pagination-bullet-active{
border-color: black;
}
.slide-dot--active .slide-dot__inner, .swiper-pagination-bullet-active .slide-dot__inner{
background-color: black;
}
// Gallery
.gallery-fancy{
height: 300px;
overflow: hidden;
}
.gallery-fancy--show{
height: auto;
overflow: unset;
}
.gallery-fancy:before{
content:"";
position: absolute;
width: 100%;
height: 10%;
background: linear-gradient(360deg, #f8f9fa, transparent);
bottom: 0;
}
.gallery-fancy--show:before{
display: none;
}
.gallery-fancy .col img{
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
// Team
.team-block{
margin-bottom: 60px;
}
.team-block__image{
margin-bottom: 20px; border-radius: 15px; width: 100%;
}
.team-block__name{
margin-bottom: 8px; font-size: 26px; line-height: 28px; color: #242322;
font-weight: bold;
}
.team-block__role{
font-size: 18px; font-weight: bold; line-height: 20px;
}
@media(min-width: 768px){
.team-block{
margin-bottom: 60px;
}
.team-block__image{
margin-bottom: 24px; border-radius: 15px;
}
.team-block__name{
margin-bottom: 10px; font-size: 30px; line-height: 32px;
font-weight: bold;
}
}
// Use above another container where elements are supposed to be off the page on higher screen width
.container-overflow{
max-width: 100%;
overflow: hidden;
}
.container-overflow .container{
padding: 0;
}

4
scss/page/error/_error.scss
Unescape Escape View File

@ -6,11 +6,11 @@
justify-content: center !important; justify-content: center !important;
flex-direction: column !important; flex-direction: column !important;
height: 100% !important; height: 100% !important;
background: $color-bg; background: $color-background;
color: $color-text; color: $color-text;
@include color-scheme(dark) { @include color-scheme(dark) {
background: $color-bg--dark; background: $color-background--dark;
color: $color-text--dark; color: $color-text--dark;
} }
} }

1
scss/utilities/_functions.scss
Unescape Escape View File

@ -0,0 +1 @@
@use 'variables' as *;

1
scss/utilities/_main_utilities.scss
Unescape Escape View File

@ -1,2 +1,3 @@
@forward 'variables'; @forward 'variables';
@forward 'mixins'; @forward 'mixins';
@forward 'functions';

9
scss/utilities/_mixins.scss
Unescape Escape View File

@ -20,3 +20,12 @@
@content; @content;
} }
} }
// Add mixins for flex, etc. Anything that needs -webkit-, etc...
@mixin flex(){
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}

108
scss/utilities/_variables.scss
Unescape Escape View File

@ -1,63 +1,75 @@
@use "sass:math";
// Variables // Variables
$color-schemes: false; // true/false, to enable/disable light/dark colour themes. All default styling is for 'light' $color-schemes: false; // true/false, to enable/disable light/dark colour themes. All default styling is for 'light'
// Basis of sizes
$font-size--numeric: 18;
$font-size: 18px; //#{$font-size--numeric}px;
$container: 1080;
// Try to use rems for everything, including %s (besides for cols, and widths within rows)
// Rems function, circular @uses errors, so here for time being unless I make an intermediary file
@function rems($targetSize){
$remSize: math.div($targetSize,$font-size);
@return #{$remSize}rem; // e.g. 16/20px = 0.8rems
}
// Additional calc in numerics as SASS maths is jank with px,rems, etc...
@function remsNumeric($targetSize){
$remSize: math.div($targetSize, $font-size--numeric);
@return $remSize;
}
@function remsFromPercent($targetPercentage){
$pixels: math.div($targetPercentage, 100)*$container;
@return remsNumeric($pixels); // Then rem the pixel %
}
@function vws($targetSize){ // Maybe use, leaving for now
// 100vw = 100% size of view. Calculations BASED on 1920
$single: 1920/100; // 1vw = 19.2(px), use the largest of rems/vws
// 8/18 = 0.44. May not be needed, could just max(0.44rem, 0.44vw) and that may work?
}
// Specific sizes for media query, prolly not going to use rems here
$media-xs: 360px; $media-xs: 360px;
$media-sm: 540px; $media-sm: 540px;
$media-md: 768px; $media-md: 768px;
$media-lg: 900px; $media-lg: 1000px;
$media-xl: 1200px; $media-xl: 1200px;
// Other variables, any sizes should be rems (use rems function, basic targetSize/fontSize)
$font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
$active-brightness: .85; $active-brightness: .85;
$hover-brightness: 1.2; $hover-brightness: 1.2;
$border-radius: 8px; $border-radius: rems(8px);
$box-shadow: 0 2px 8px; $box-shadow: 0 rems(1px) rems(6px);
$color-accent: #dae9f6;
$color-accent--dark: #0097fc;
$color-bg: #fff;
$color-bg--dark: #333;
$color-bg-secondary: #e9e9e9;
$color-bg-secondary--dark: #555;
$color-link: #118bee;
$color-link--dark: #0097fc;
$color-secondary: #508ce2;
$color-secondary--dark: #2c68bd;
$color-secondary-accent: #dee9fa;
$color-secondary-accent--dark: #496282;
$color-shadow: #f4f4f4;
$color-shadow--dark: #bbbbbb20;
$color-table: #118bee;
$color-table--dark: #0097fc;
$color-text: #000;
$color-text--dark: #f7f7f7;
$color-text-secondary: #999;
$color-text-secondary--dark: #aaa;
$color-scrollbar: #cacae8;
$color-scrollbar--dark: #EEE;
$color-card: #FFF;
$color-card--dark: #232323;
$color-banner: #EEE;
$color-banner--dark: #444;
$color-highlight: #ff8c00;
$color-highlight--dark: #a3600d;
$color-nav: #CCC;
$color-nav--dark: #CCC;
// $alert-color:
$alert-color--error: #e90d30;
$alert-color--warning: #ddde11;
$alert-color--success: #18ab34;
$font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
$justify-important: center; $justify-important: center;
$justify-normal: left; $justify-normal: left;
$line-height: 1.5; $line-height: 1.5;
$width-card: 285px; $width-content: #{remsNumeric($container)}rem;
$width-card-medium: 460px; $grid-gap--numeric: remsNumeric(15); // The gap between grid columns (15px = 7.5px either side)
$width-card-wide: 800px;
$width-content: 1080px;
// Colours
$color-primary: #118bee; $color-primary-dark: #0c5fa2;
$color-secondary: #a7e09a; $color-secondary--dark: #429b32;
$color-tertiary: #294fb7; $color-tertiary--dark: #114a70;
$color-background: #f8f9fa; $color-background--dark: #333;
$color-text: #1e1e1e; $color-text--dark: #f7f7f7;
$color-text-secondary: #868686; $color-text-secondary--dark: #555;
$color-link: #118bee; $color-link--dark: #007acb;
$color-success: #18ab34;
$color-fail: #e90d30;
$color-warning: #ddde11;
$color-highlight: #ff8c00; $color-highlight--dark: #a3600d;
$color-accent: $color-text--dark; $color-accent--dark: $color-text;
// Z-indexes
$z-behind: 0;
$z-normal: 1;
$z-above: 10;
$z-top: 100;

Write Preview
Loading…
Cancel
Save