77 lines
2.4 KiB
SCSS
77 lines
2.4 KiB
SCSS
///////////////////
|
|
// //
|
|
// WIDTH //
|
|
// //
|
|
///////////////////
|
|
|
|
$content-max-width: 46rem; // 920 px
|
|
$content-left-margin: 3vw;
|
|
|
|
///////////////////
|
|
// //
|
|
// FONT //
|
|
// //
|
|
///////////////////
|
|
|
|
$font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
|
$font-size-base: 1.25rem !default; // 25 px
|
|
$font-size-small: .9rem; // 18 px
|
|
$line-height-base: 1.4;
|
|
$line-height-verse: 1.3;
|
|
$verse-p-bottom-space: 2rem;
|
|
$verse-p-bottom-space-larger: 3rem;
|
|
|
|
|
|
/////////////////////
|
|
// //
|
|
// COLORS //
|
|
// //
|
|
// Based on Nord //
|
|
// color scheme //
|
|
// //
|
|
/////////////////////
|
|
|
|
$nord0: #2e3440; // Polar night, darkest grey
|
|
$nord1: #3b4252; // Polar night, darker grey
|
|
$nord2: #434c5e; // Polar night, dark grey
|
|
$nord3: #4c566a; // Polar night, lighter grey
|
|
$nord4: #d8dee9; // Snow storm, origin, light grey
|
|
$nord5: #e5e9f0; // Snow storm, brighter light grey
|
|
$nord6: #eceff4; // Snow storm, the brightest one
|
|
$nord7: #8fbcbb; // Frost, frozen polar water
|
|
$nord8: #88c0d0; // Frost, brighter, pure and clear ice
|
|
$nord9: #81a1c1; // Frost, darker, arctic waters
|
|
$nord10: #5e81ac; // Frost, darkest, deep arctic ocean
|
|
$nord11: #bf616a; // Aurora, red
|
|
$nord12: #d08770; // Aurora, orange
|
|
$nord13: #ebcb8b; // Aurora, yellow
|
|
$nord14: #a3be8c; // Aurora, green
|
|
$nord15: #b48ead; // Aurora, purple
|
|
|
|
|
|
// Polar, translated into something easy to remember, hopefully
|
|
$darkest-polar: $nord0;
|
|
$darker-polar: $nord1;
|
|
$dark-polar: $nord2;
|
|
$lighter-polar: $nord3;
|
|
$the-darkiest-polar: darken($darkest-polar, 4%);
|
|
|
|
// Snow storm, translated into something easy to remember, hopefully
|
|
$snow-storm-light-grey: $nord4;
|
|
$snow-storm-lighter-grey: $nord5;
|
|
$snow-storm-lightest-grey: $nord6;
|
|
|
|
//Frost, translated into something easy to remember, hopefully
|
|
$frost-green: $nord7;
|
|
$frost-lighter-green: $nord8;
|
|
$frost-grey-blue: $nord9;
|
|
$frost-deep-blue: $nord10;
|
|
|
|
//Aurora, translated into something easy to remember, hopefully
|
|
$aurora-red: $nord11;
|
|
$aurora-orange: $nord12;
|
|
$aurora-yellow: $nord13;
|
|
$aurora-green: $nord14;
|
|
$aurora-purple: $nord15;
|
|
|