You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
76 lines
2.6 KiB
SCSS
76 lines
2.6 KiB
SCSS
@use "sass:math";
|
|
|
|
// Variables
|
|
$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-sm: 540px;
|
|
$media-md: 768px;
|
|
$media-lg: 1000px;
|
|
$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;
|
|
$hover-brightness: 1.2;
|
|
|
|
$border-radius: rems(8px);
|
|
$box-shadow: 0 rems(1px) rems(6px);
|
|
|
|
$justify-important: center;
|
|
$justify-normal: left;
|
|
$line-height: 1.5;
|
|
$width-content: #{remsNumeric($container)}rem;
|
|
$grid-gap--numeric: remsNumeric(15); // The gap between grid columns (15px = 7.5px either side)
|
|
|
|
|
|
// 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;
|