diff --git a/assets/scss/_colors.scss b/assets/scss/_colors.scss new file mode 100644 index 0000000..3875b13 --- /dev/null +++ b/assets/scss/_colors.scss @@ -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; +} diff --git a/assets/scss/_footer.scss b/assets/scss/_footer.scss index 08e6228..40be7c5 100644 --- a/assets/scss/_footer.scss +++ b/assets/scss/_footer.scss @@ -9,8 +9,6 @@ display: flex; align-items: center; justify-content: flex-end; - border-top: solid .1em #e1e1e1; - padding-top: 1em; margin-bottom: 1em; } li { diff --git a/assets/scss/_header.scss b/assets/scss/_header.scss index 0a3dfe5..ca2d5dd 100644 --- a/assets/scss/_header.scss +++ b/assets/scss/_header.scss @@ -8,9 +8,6 @@ section { display: flex; flex-direction: column; - // align-items: center; - border-bottom: solid .1em #e1e1e1; - padding-bottom: 1em; } header { flex-grow: 1; diff --git a/assets/scss/_layout.scss b/assets/scss/_layout.scss index 0ae63f6..b097b6f 100644 --- a/assets/scss/_layout.scss +++ b/assets/scss/_layout.scss @@ -5,8 +5,11 @@ */ .container { - max-width: 35rem; /* 960px */ + width: 95%; + max-width: 46rem; // 920px margin: 0 auto; + padding: .5rem; + border-radius: .5rem; } body { diff --git a/assets/scss/_medias.scss b/assets/scss/_medias.scss index c6383b8..cde4be0 100644 --- a/assets/scss/_medias.scss +++ b/assets/scss/_medias.scss @@ -15,7 +15,6 @@ } figure { - background-color: lightgrey; padding: .4rem; border-radius: 5px; margin-right: .4rem; diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss index 987419a..40626ce 100644 --- a/assets/scss/_variables.scss +++ b/assets/scss/_variables.scss @@ -1,2 +1,58 @@ +/****************** + * FONT * + ******************/ + $font-size-base: 1.25rem; $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; + diff --git a/assets/scss/main.scss b/assets/scss/main.scss index b144ea2..fa3cdc9 100644 --- a/assets/scss/main.scss +++ b/assets/scss/main.scss @@ -5,6 +5,7 @@ */ @import '_variables.scss'; +@import '_colors.scss'; @import '_fonts.scss'; @import '_footer.scss'; @import '_header.scss'; @@ -21,7 +22,6 @@ */ code, pre { - background-color: lightgrey; border-radius: 5px; padding: .2rem; }