style: Implements nord color scheme

* Lists available colors in the _variables.scss file.
* Adds a _colors.scss file to set the colors.
* Sets the colors.
* Sets the width of container larger, removes header and footer borders,
  to improve display when using different colors.
* Fixes #7.

Co-Authored-by: Igor Milhit <igor@milhit.ch>
pull/32/head
iGor milhit 2020-05-30 06:44:50 +02:00
parent ab91d9b590
commit e541ece884
Signed by: igor
GPG Key ID: 692D97C3D0228A99
7 changed files with 103 additions and 8 deletions

View File

@ -0,0 +1,42 @@
/******************
* SETTING COLORS *
******************/
html,
body,
.main-header > .container,
.main-footer > .container {
background-color: $the-darkiest-polar;
}
.container {
background-color: $darkest-polar;
color: $snow-storm-lightest-grey;
}
a,
a:hover,
a:active {
color: $frost-green;
}
a:visited {
color: $frost-grey-blue;
}
.main-header,
.main-header a,
.main-footer,
.main-footer a {
color: $snow-storm-lighter-grey;
}
code,
pre {
background-color: $darker-polar;
}
figure {
background-color: $darkest-polar;
box-shadow: 0px 2px 10px 5px $the-darkiest-polar;
}

View File

@ -9,8 +9,6 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
border-top: solid .1em #e1e1e1;
padding-top: 1em;
margin-bottom: 1em; margin-bottom: 1em;
} }
li { li {

View File

@ -8,9 +8,6 @@
section { section {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
// align-items: center;
border-bottom: solid .1em #e1e1e1;
padding-bottom: 1em;
} }
header { header {
flex-grow: 1; flex-grow: 1;

View File

@ -5,8 +5,11 @@
*/ */
.container { .container {
max-width: 35rem; /* 960px */ width: 95%;
max-width: 46rem; // 920px
margin: 0 auto; margin: 0 auto;
padding: .5rem;
border-radius: .5rem;
} }
body { body {

View File

@ -15,7 +15,6 @@
} }
figure { figure {
background-color: lightgrey;
padding: .4rem; padding: .4rem;
border-radius: 5px; border-radius: 5px;
margin-right: .4rem; margin-right: .4rem;

View File

@ -1,2 +1,58 @@
/******************
* FONT *
******************/
$font-size-base: 1.25rem; $font-size-base: 1.25rem;
$font-size-small: 1rem; $font-size-small: 1rem;
/******************
* 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;

View File

@ -5,6 +5,7 @@
*/ */
@import '_variables.scss'; @import '_variables.scss';
@import '_colors.scss';
@import '_fonts.scss'; @import '_fonts.scss';
@import '_footer.scss'; @import '_footer.scss';
@import '_header.scss'; @import '_header.scss';
@ -21,7 +22,6 @@
*/ */
code, pre { code, pre {
background-color: lightgrey;
border-radius: 5px; border-radius: 5px;
padding: .2rem; padding: .2rem;
} }