mirror of
https://github.com/fooflington/selfdefined.git
synced 2025-06-09 04:25:12 +00:00
🌈 Organise colors with vars only
This commit is contained in:
parent
b78dd4a334
commit
228a119b30
11
assets/css/_sass/_colours.scss
Normal file
11
assets/css/_sass/_colours.scss
Normal file
@ -0,0 +1,11 @@
|
||||
$primary-color: hsl(0, 100%, 50%);
|
||||
$secondary-color: hsl(120, 100%, 25%);
|
||||
|
||||
$dark-red: hsl(0, 100%, 32.2%);
|
||||
$pink: hsl(349.5, 100%, 87.6%);
|
||||
$black: hsl(0, 0%, 13%);
|
||||
$white: hsl(0, 0%, 100%);
|
||||
|
||||
$dark-grey: hsl(0, 0%, 31%);
|
||||
$mid-grey: hsl(0, 0%, 46.3%); // the lightest shade of grey you can get away with, #a11y
|
||||
$light-grey: hsl(0, 0%, 93.3%); // for backgrounds only
|
@ -3,6 +3,7 @@
|
||||
|
||||
@import '~prism-themes/themes/prism-a11y-dark';
|
||||
@import '_sass/functions';
|
||||
@import '_sass/colours'
|
||||
|
||||
$browser-context: 16;
|
||||
|
||||
@ -11,9 +12,9 @@ pre[class*='language-'] {
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: #333333;
|
||||
border: pxToRem(1) solid black;
|
||||
color: white;
|
||||
background-color: $dark-grey;
|
||||
border: 1px solid $black;
|
||||
color: $white;
|
||||
padding: 0.15em;
|
||||
border-radius: 0.25em;
|
||||
font-size: 95%;
|
||||
@ -34,18 +35,6 @@ code {
|
||||
--l-gap: 1rem;
|
||||
}
|
||||
|
||||
$primary-color: #0e4bff; //cobalt blue is so pretty//
|
||||
$secondary-color: #f3f315; //
|
||||
|
||||
$black: #222222;
|
||||
$white: #ffffff;
|
||||
$pistachio: #e5ffe5;
|
||||
$yellow: #ffff00;
|
||||
|
||||
$dark-grey: #4f4f4f;
|
||||
$mid-grey: #767676; // the lightest shade of grey you can get away with, #a11y
|
||||
$light-grey: #eeeeee; // for backgrounds only
|
||||
|
||||
// TYPOGRAPHY //
|
||||
$sans-serif: monotype-grotesque, 'Lucida Sans', sans-serif;
|
||||
$serif: orpheuspro, Palatino, Times, serif;
|
||||
|
Loading…
x
Reference in New Issue
Block a user