From 604115a99c0aa985c1bc26ba95ea07437db4b4ec Mon Sep 17 00:00:00 2001 From: Kazhnuz Date: Wed, 9 Oct 2019 12:21:50 +0200 Subject: [PATCH] chore: refactor and improve global styling --- css/style.css | 145 ++++++++++++++++++++--------------------- css/style.css.map | 2 +- index.html | 4 +- scss/_colorize.scss | 75 --------------------- scss/_commons.scss | 84 +----------------------- scss/_definitions.scss | 16 +++++ scss/_global.scss | 121 ++++++++++++++++++++++++++++++++++ scss/_palette.scss | 84 +++++++++++++++++++++++- scss/style.scss | 35 +--------- 9 files changed, 295 insertions(+), 271 deletions(-) create mode 100644 scss/_definitions.scss create mode 100644 scss/_global.scss diff --git a/css/style.css b/css/style.css index 619e04d..786c34b 100644 --- a/css/style.css +++ b/css/style.css @@ -1,18 +1,10 @@ /* ------------------ CUSTOM STYLE ------------------- */ -body { - background-color: #002b36; -} - -#wrapper { - background-color: #fdf6e3; -} - -#page-header { - background: #2aa198 url("../img/background.png") center bottom repeat-x; - height: 350px; -} - -/* ------------------ GLOBAL STYLE ------------------- */ +/* + * 1. Cards and containers + * All elements that are supposed to contain other stuff + * + * +*/ .no-pills { list-style: none; } @@ -28,6 +20,16 @@ body { } /* ------------------ HEADERS ------------------- */ +#page-header { + background: #2aa198 url("../img/background.png") center bottom repeat-x; + height: 350px; + border-top: 6px solid #073642; +} +#page-header .columns { + max-width: 1024px; + margin: auto; +} + header h1 { border-style: none !important; color: #fdf6e3; @@ -37,18 +39,17 @@ header h1 { text-shadow: 0px 2px 12px rgba(0, 0, 0, 0); padding-bottom: 0px; margin: auto; - text-align: center; line-height: 1.5em; } .navbar { - box-shadow: 0px 2px 10px rgba(0, 0, 0, 0); - border: 0px solid rgba(0, 0, 0, 0.3); border-left: 0; border-right: 0; + padding: 1em; + color: #fdf6e3; } -.navbar ul { - padding-bottom: 0; +.navbar a { + color: #fdf6e3; } .navbar li { margin: 0; @@ -58,6 +59,56 @@ header h1 { box-shadow: 0px 2px 6px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0); } +/* ------------------ PAGE ------------------- */ +#wrapper { + background-color: #fdf6e3; +} + +#page-content { + padding-left: 30px; + padding-right: 30px; +} + +/* ------------------ FOOTER ------------------- */ +body { + background-color: #073642; +} + +footer { + color: #fdf6e3; + margin-top: 1.5em; +} +footer .columns { + max-width: 1024px; + margin: auto; +} + +/* social media */ +ul.social { + font-size: 1.5em; + padding-bottom: 1.5em; + margin: auto; + text-align: center; +} +ul.social li { + margin: 0; + list-style: none; + display: inline; +} +ul.social li a { + color: #073642; + background-color: #fdf6e3; + padding: 0.3em; + padding-left: 0.36em; + padding-right: 0.36em; + vertical-align: middle; + border-radius: 100%; +} +ul.social li a:hover { + color: #fdf6e3; + background-color: #073642; +} + /* * 2. Cards and containers * All elements that are supposed to contain other stuff @@ -139,30 +190,6 @@ header h1 { padding: 0 0.4em 0; } -/* meta */ -.card-meta { - padding: 1em; - border-bottom: 0px solid rgba(0, 0, 0, 0.2); -} -.card-meta.media { - -ms-flex-align: center !important; - align-items: center !important; -} -.card-meta .media-left .media-object { - height: 64px; - width: 64px; - border-radius: 10px; - margin-right: 1em; -} -.card-meta author { - display: block; - font-weight: 600; -} -.card-meta time { - display: block; - font-style: italic; -} - /* COLORIZE CARDS and TOASTS */ .card-blue > .card-header, .card-blue > .menu-header, .smallcard-blue > .card-header, .smallcard-blue > .menu-header, .menu-blue > .card-header, .menu-blue > .menu-header { background-color: #268bd2 !important; @@ -318,38 +345,6 @@ header h1 { color: #fdf6e3; } -/* ------------------ FOOTER ------------------- */ -footer { - color: #fdf6e3; - margin-top: 40px; -} - -/* social media */ -ul.social { - font-size: 1.5em; - padding-bottom: 1em; - margin: auto; - text-align: center; -} -ul.social li { - margin: 0; - list-style: none; - display: inline; -} -ul.social li a { - color: #002b36; - background-color: #fdf6e3; - padding: 0.3em; - padding-left: 0.36em; - padding-right: 0.36em; - vertical-align: middle; - border-radius: 100%; -} -ul.social li a:hover { - color: #fdf6e3; - background-color: #002b36; -} - /* ------------------ BUTTONS ------------------- */ .btn { border: 0px solid rgba(0, 0, 0, 0.3); diff --git a/css/style.css.map b/css/style.css.map index 21a390b..ada6a6b 100644 --- a/css/style.css.map +++ b/css/style.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/style.scss","../scss/_palette.scss","../scss/_commons.scss","../scss/_cards.scss","../scss/_colorize.scss"],"names":[],"mappings":"AAEA;AAsBA;EACE,kBClBW;;;ADqBb;EACE,kBCrBY;;;ADwBd;EACE;EACA;;;AElCF;AAQA;EACC;;;AAIC;EAAU;;AACV;EAAQ;;AACR;EAAS;;;AAGX;AAGA;EACC;EACA,ODfa;ECgBb;EACA;EACA;EACA;EACA;EACC;EACA;EACA;;;AAGF;EACE,YF/Ba;EAab;EEoBA;EACA;;AACA;EACE;;AArCF;EACE;;;AAyCJ;EACE;;;AC9CF;AAAA;AAAA;AAAA;AAAA;AAAA;AA4CA;EHvBE;EGTE,kBFGW;EEFd,YHTc;EGUX;EACA;EACA,SATU;;AAwCV;EACI;;AACA;EACI;;AAIR;EAlCA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA,OFxBM;EEyBN;EACA;;;AAyBR;EHtCE;EGTE,kBFGW;EEFd,YHTc;EGUX;EACA;EACA,SARY;;AAqDZ;EAzCA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA,OFxBM;EEyBN;EACA;;;AAgCR;AAGI;EHhDF;EGkDM;EACA;;AAGI;EACI;EACA,OFtEH;;AE0EG;EACI;;AAKZ;EACI;;;AAKV;AAEA;EACI;EACF;;AAEA;EACE;EACA;;AAGF;EACI;EACA;EACA;EACF;;AAIF;EACI;EACA;;AAGJ;EACI;EACA;;;AAIR;AApFI;EFLA;EACA,OA3BU;;AE+BV;EFLA;EACA,OA3BU;;AE+BV;EFLA;EACA,OA3BU;;AE+BV;EFLA;EACA,OA3BU;;AE+BV;EFLA;EACA,OA3BU;;AE+BV;EFLA;EACA,OA3BU;;AE+BV;EFLA;EACA,OA3BU;;AE+BV;EFLA;EACA,OA3BU;;AE+BV;EFLA;EACA,OA5BS;;AEgCT;EFLA;EACA,OA3BU;;AE+BV;EFLA;EACA,OA3BU;;AE+BV;EFLA;EACA,OA3BU;;AE+BV;EFLA;EACA,OA3BU;;AE+BV;EFLA;EACA,OA3BU;;AE+BV;EFLA;EACA,OA3BU;;AE+BV;EFLA;EACA,OA3BU;;AE+BV;EFLA;EACA,OA3BU;;AE+BV;EFLA;EACA,OA3BU;;AE+BV;EFLA;EACA,OA3BU;;;AE6IV;EFnHA;EACA,OA3BU;;AE8IV;EFpHA;EACA,OA3BU;;AE+IV;EFrHA;EACA,OA3BU;;AEgJV;EFtHA;EACA,OA3BU;;AEiJV;EFvHA;EACA,OA3BU;;AEkJV;EFxHA;EACA,OA3BU;;AEmJV;EFzHA;EACA,OA3BU;;AEoJV;EF1HA;EACA,OA3BU;;AEqJV;EF3HA;EACA,OA5BS;;AEuJT;EF5HA;EACA,OA3BU;;AEuJV;EF7HA;EACA,OA3BU;;AEwJV;EF9HA;EACA,OA3BU;;AEyJV;EF/HA;EACA,OA3BU;;AE2JV;EFjIA;EACA,OA3BU;;AE4JV;EFlIA;EACA,OA3BU;;AE6JV;EFnIA;EACA,OA3BU;;AE8JV;EFpIA;EACA,OA3BU;;AE+JV;EFrIA;EACA,OA3BU;;AEgKV;EFtIA;EACA,OA3BU;;;AC2Cd;AAEA;EACE,OD9CY;EC+CZ;;;AAGF;AAEA;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;;AACA;EACE,OD/DO;ECgEP,kBD/DQ;ECgER;EACA;EACA;EACA;EACA;;AACA;EACE,ODtEM;ECuEN,kBDxEK;;;AC+Eb;AAEA;EFvEE;EAIA;EEsED;EACA;;;AAGD;EACE;EACD;EFhFC;;;AEoFF;EACE;EACD,YFhGuB;EAUtB;;;AE0FF;EACC,YFxGc;;;AE2Gf;EACC,YF1Gc;EAeb;;AE6FD;EACE;EACA;;AAEF;EACE;EACA;;;AAIH;EACE;EACD,YFxHc;;;AE2Hf;AAAA;EAEE;EACD;EFnHC;;;AEuHF;EACE;EACD;EACC;;;AAGF;AAEA;EF3HE;EE6HD;EACC;EACA,kBDrIa;ECsIb;;AAlJA;EACE;;;AAqJJ;AAEA;EACE;;;AAGF;EACE;;;AAGF;AAEA;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAOF;EAEE;IACE;;;EAGF;IACE;;;EAGF;IACE;;;AAKJ;EFhLE;EEkLA;EACA;EACA;;;AAGF;EACE;;;AAGF;EAEE;EACA;EACA;EACD;EACC;EACA;EACA;EACA;EACD;EAGA;EACC;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,ODvQa;ECwQb;EACA;EACC;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,ODrRY;;;ACwRd;EACC,ODzRa;EC0RZ;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AEjTF;AAkCA;EACE,OHnCW;;;AGsCb;EHJI;EACA,OA3BU;;;AGiCd;EHPI;EACA,OA3BU;;;AGqCd;AAGE;EArCA,kBHXW;EGYX,OHJY;;AGMV;EARF;EACA,OHCY;;AGyCZ;EAtCA,kBHVa;EGWb,OHJY;;AGMV;EARF;EACA,OHCY;;AG0CZ;EAvCA,kBHTa;EGUb,OHJY;;AGMV;EARF;EACA,OHCY;;AG2CZ;EAxCA,kBHRU;EGSV,OHJY;;AGMV;EARF;EACA,OHCY;;AG4CZ;EAzCA,kBHPa;EGQb,OHJY;;AGMV;EARF;EACA,OHCY;;AG6CZ;EA1CA,kBHNY;EGOZ,OHJY;;AGMV;EARF;EACA,OHCY;;AG8CZ;EA3CA,kBHLc;EGMd,OHJY;;AGMV;EARF;EACA,OHCY;;AG+CZ;EA5CA,kBHJW;EGKX,OHJY;;AGMV;EARF;EACA,OHCY;;AGgDZ;EA7CA,kBHIa;EGHb,OHLW;;AGOT;EARF;EACA;;AAkDA;EA9CA,kBHFgB;EGGhB,OHJY;;AGMV;EARF;EACA,OHCY;;AGkDZ;EA/CA,kBHDa;EGEb,OHJY;;AGMV;EARF;EACA,OHCY;;AGmDZ;EAhDA;EACA,OHJY;;AGMV;EARF;EACA,OHCY;;AGoDZ;EAjDA,kBHCW;EGAX,OHJY;;AGMV;EARF;EACA,OHCY;;AGsDZ;EAnDA,kBHTa;EGUb,OHJY;;AGMV;EARF;EACA,OHCY;;AGuDZ;EApDA,kBHXW;EGYX,OHJY;;AGMV;EARF;EACA,OHCY;;AGwDZ;EArDA,kBHPa;EGQb,OHJY;;AGMV;EARF;EACA,OHCY;;AGyDZ;EAtDA,kBHRU;EGSV,OHJY;;AGMV;EARF;EACA,OHCY;;AG0DZ;EAvDA,kBHLc;EGMd,OHJY;;AGMV;EARF;EACA,OHCY;;AG2DZ;EAxDA,kBHNY;EGOZ,OHJY;;AGMV;EARF;EACA,OHCY;;;AG8Dd;AAGE;EA9DA,kBA8DkC;EA7DlC,OHJY;;AGMV;EARF;EACA,OHCY;;AGkEZ;EA/DA,kBA+DiC;EA9DjC,OHJY;;AGMV;EARF;EACA,OHCY;;AGmEZ;EAhEA,kBAgEoC;EA/DpC,OHJY;;AGMV;EARF;EACA,OHCY;;AGoEZ;EAjEA,kBAiEkC;EAhElC,OHJY;;AGMV;EARF;EACA,OHCY;;AGqEZ;EAlEA,kBAkEkC;EAjElC,OHJY;;AGMV;EARF;EACA,OHCY;;;AGwEd;AAGE;EHjDE;EACA,OA3BU;;AG4EZ;EHlDE;EACA,OA3BU;;AG6EZ;EHnDE;EACA,OA3BU;;AG8EZ;EHpDE;EACA,OA3BU;;AG+EZ;EHrDE;EACA,OA3BU;;AGgFZ;EHtDE;EACA,OA3BU;;AGiFZ;EHvDE;EACA,OA3BU;;AGkFZ;EHxDE;EACA,OA3BU;;AGmFZ;EHzDE;EACA,OA5BS;;AGqFX;EH1DE;EACA,OA3BU;;AGqFZ;EH3DE;EACA,OA3BU;;AGsFZ;EH5DE;EACA,OA3BU;;AGuFZ;EH7DE;EACA,OA3BU;;AGyFZ;EH/DE;EACA,OA3BU;;AG0FZ;EHhEE;EACA,OA3BU;;AG2FZ;EHjEE;EACA,OA3BU;;AG4FZ;EHlEE;EACA,OA3BU;;AG6FZ;EHnEE;EACA,OA3BU;;AG8FZ;EHpEE;EACA,OA3BU;;;AGiGd;AAGE;EA7EA,OH/BW;;AG6GX;EA9EA,OH9Ba;;AG6Gb;EA/EA,OH7Ba;;AG6Gb;EAhFA,OH5BU;;AG6GV;EAjFA,OH3Ba;;AG6Gb;EAlFA,OH1BY;;AG6GZ;EAnFA,OHzBc;;AG6Gd;EApFA,OHxBW;;AG6GX;EArFA,OHvBY;;AG6GZ;EAtFA,OHtBgB;;AG6GhB;EAvFA,OHrBa;;AG6Gb;EAxFA,OHpBY;;AG6GZ;EAzFA,OHnBW;;AG8GX;EA3FA,OH7Ba;;AGyHb;EA5FA,OH/BW;;AG4HX;EA7FA,OH3Ba;;AGyHb;EA9FA,OH5BU;;AG2HV;EA/FA,OHzBc;;AGyHd;EAhGA,OH1BY;;;AG6Hd;AAEA;EACE;;;AAGF;EACE,cHvIa","file":"style.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/style.scss","../scss/_global.scss","../scss/_palette.scss","../scss/_cards.scss","../scss/_commons.scss","../scss/_colorize.scss"],"names":[],"mappings":"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;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OFrLa;EEsLb;EACA;EACC;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OFnMY;;;AEsMd;EACC,OFvMa;EEwMZ;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AC/NF;AAkCA;EACE,OHnCW;;;AGsCb;EHJI;EACA,OA3BU;;;AGiCd;EHPI;EACA,OA3BU;;;AGqCd;AAGE;EArCA,kBHXW;EGYX,OHJY;;AGMV;EARF;EACA,OHCY;;AGyCZ;EAtCA,kBHVa;EGWb,OHJY;;AGMV;EARF;EACA,OHCY;;AG0CZ;EAvCA,kBHTa;EGUb,OHJY;;AGMV;EARF;EACA,OHCY;;AG2CZ;EAxCA,kBHRU;EGSV,OHJY;;AGMV;EARF;EACA,OHCY;;AG4CZ;EAzCA,kBHPa;EGQb,OHJY;;AGMV;EARF;EACA,OHCY;;AG6CZ;EA1CA,kBHNY;EGOZ,OHJY;;AGMV;EARF;EACA,OHCY;;AG8CZ;EA3CA,kBHLc;EGMd,OHJY;;AGMV;EARF;EACA,OHCY;;AG+CZ;EA5CA,kBHJW;EGKX,OHJY;;AGMV;EARF;EACA,OHCY;;AGgDZ;EA7CA,kBHIa;EGHb,OHLW;;AGOT;EARF;EACA;;AAkDA;EA9CA,kBHFgB;EGGhB,OHJY;;AGMV;EARF;EACA,OHCY;;AGkDZ;EA/CA,kBHDa;EGEb,OHJY;;AGMV;EARF;EACA,OHCY;;AGmDZ;EAhDA;EACA,OHJY;;AGMV;EARF;EACA,OHCY;;AGoDZ;EAjDA,kBHCW;EGAX,OHJY;;AGMV;EARF;EACA,OHCY;;AGsDZ;EAnDA,kBHTa;EGUb,OHJY;;AGMV;EARF;EACA,OHCY;;AGuDZ;EApDA,kBHXW;EGYX,OHJY;;AGMV;EARF;EACA,OHCY;;AGwDZ;EArDA,kBHPa;EGQb,OHJY;;AGMV;EARF;EACA,OHCY;;AGyDZ;EAtDA,kBHRU;EGSV,OHJY;;AGMV;EARF;EACA,OHCY;;AG0DZ;EAvDA,kBHLc;EGMd,OHJY;;AGMV;EARF;EACA,OHCY;;AG2DZ;EAxDA,kBHNY;EGOZ,OHJY;;AGMV;EARF;EACA,OHCY;;;AG8Dd;AAGE;EA9DA,kBA8DkC;EA7DlC,OHJY;;AGMV;EARF;EACA,OHCY;;AGkEZ;EA/DA,kBA+DiC;EA9DjC,OHJY;;AGMV;EARF;EACA,OHCY;;AGmEZ;EAhEA,kBAgEoC;EA/DpC,OHJY;;AGMV;EARF;EACA,OHCY;;AGoEZ;EAjEA,kBAiEkC;EAhElC,OHJY;;AGMV;EARF;EACA,OHCY;;AGqEZ;EAlEA,kBAkEkC;EAjElC,OHJY;;AGMV;EARF;EACA,OHCY;;;AGwEd;AAGE;EHjDE;EACA,OA3BU;;AG4EZ;EHlDE;EACA,OA3BU;;AG6EZ;EHnDE;EACA,OA3BU;;AG8EZ;EHpDE;EACA,OA3BU;;AG+EZ;EHrDE;EACA,OA3BU;;AGgFZ;EHtDE;EACA,OA3BU;;AGiFZ;EHvDE;EACA,OA3BU;;AGkFZ;EHxDE;EACA,OA3BU;;AGmFZ;EHzDE;EACA,OA5BS;;AGqFX;EH1DE;EACA,OA3BU;;AGqFZ;EH3DE;EACA,OA3BU;;AGsFZ;EH5DE;EACA,OA3BU;;AGuFZ;EH7DE;EACA,OA3BU;;AGyFZ;EH/DE;EACA,OA3BU;;AG0FZ;EHhEE;EACA,OA3BU;;AG2FZ;EHjEE;EACA,OA3BU;;AG4FZ;EHlEE;EACA,OA3BU;;AG6FZ;EHnEE;EACA,OA3BU;;AG8FZ;EHpEE;EACA,OA3BU;;;AGiGd;AAGE;EA7EA,OH/BW;;AG6GX;EA9EA,OH9Ba;;AG6Gb;EA/EA,OH7Ba;;AG6Gb;EAhFA,OH5BU;;AG6GV;EAjFA,OH3Ba;;AG6Gb;EAlFA,OH1BY;;AG6GZ;EAnFA,OHzBc;;AG6Gd;EApFA,OHxBW;;AG6GX;EArFA,OHvBY;;AG6GZ;EAtFA,OHtBgB;;AG6GhB;EAvFA,OHrBa;;AG6Gb;EAxFA,OHpBY;;AG6GZ;EAzFA,OHnBW;;AG8GX;EA3FA,OH7Ba;;AGyHb;EA5FA,OH/BW;;AG4HX;EA7FA,OH3Ba;;AGyHb;EA9FA,OH5BU;;AG2HV;EA/FA,OHzBc;;AGyHd;EAhGA,OH1BY;;;AG6Hd;AAEA;EACE;;;AAGF;EACE,cHvIa","file":"style.css"} \ No newline at end of file diff --git a/index.html b/index.html index 113b570..0a66b7e 100644 --- a/index.html +++ b/index.html @@ -23,7 +23,7 @@
-
+

Blue Sky

@@ -44,7 +44,7 @@
-
+
diff --git a/scss/_colorize.scss b/scss/_colorize.scss index 4ccf68f..02b0d6d 100644 --- a/scss/_colorize.scss +++ b/scss/_colorize.scss @@ -28,21 +28,6 @@ $color-button-dark: $color-dark; } } -@mixin text-color($text-color) { - color: $text-color; -} - -a, a:hover, a:active { - color: $color-link; -} - -::selection { - @include background-color($color-selection, $color-button-light); -} -::-moz-selection { - @include background-color($color-selection, $color-button-light); -} - /* BUTTONS & BADGES */ .btn, a.btn, .badge, .chip, a.chip, a.badge, .label, a.label { @@ -77,63 +62,3 @@ a, a:hover, a:active { &-diaspora {@include button-color(#313739, $color-button-light);} &-mastodon {@include button-color(#282c37, $color-button-light);} } - -/* BACKGROUNDS */ - -.bg { - &-blue { @include background-color($color-blue, $color-button-light); } - &-violet { @include background-color($color-violet, $color-button-light); } - &-purple { @include background-color($color-purple, $color-button-light); } - &-red { @include background-color($color-red, $color-button-light); } - &-orange { @include background-color($color-orange, $color-button-light); } - &-green { @include background-color($color-green, $color-button-light); } - &-skyblue { @include background-color($color-skyblue, $color-button-light); } - &-dark { @include background-color($color-dark, $color-button-light); } - &-light { @include background-color($color-light, $color-button-dark); } - &-turquoise { @include background-color($color-turquoise, $color-button-light); } - &-yellow { @include background-color($color-yellow, $color-button-light); } - &-brown { @include background-color($color-brown, $color-button-light); } - &-grey { @include background-color($color-grey, $color-button-light); } - - &-primary { @include background-color($color-primary, $color-button-light); } - &-secondary { @include background-color($color-secondary, $color-button-light); } - &-warning { @include background-color($color-warning, $color-button-light); } - &-danger { @include background-color($color-danger, $color-button-light); } - &-info { @include background-color($color-info, $color-button-light); } - &-success { @include background-color($color-success, $color-button-light); } -} - -/* TEXT */ - -.text { - &-blue { @include text-color($color-blue); } - &-violet { @include text-color($color-violet); } - &-purple { @include text-color($color-purple); } - &-red { @include text-color($color-red); } - &-orange { @include text-color($color-orange); } - &-green { @include text-color($color-green); } - &-skyblue { @include text-color($color-skyblue); } - &-dark { @include text-color($color-dark); } - &-light { @include text-color($color-light); } - &-turquoise { @include text-color($color-turquoise); } - &-yellow { @include text-color($color-yellow); } - &-brown { @include text-color($color-brown); } - &-grey { @include text-color($color-grey); } - - &-primary { @include text-color($color-primary); } - &-secondary { @include text-color($color-secondary); } - &-warning { @include text-color($color-warning); } - &-danger { @include text-color($color-danger); } - &-info { @include text-color($color-info); } - &-success { @include text-color($color-success); } -} - -/* Clear-Typography overrides */ - -mark { - background-color: lighten($color-mark, 30%) -} - -blockquote, pre { - border-color: $color-primary; -} diff --git a/scss/_commons.scss b/scss/_commons.scss index fd059ad..3c156f7 100644 --- a/scss/_commons.scss +++ b/scss/_commons.scss @@ -1,89 +1,7 @@ -/* ------------------ GLOBAL STYLE ------------------- */ - -@mixin li-no-margin() { - li { - margin: 0; - } -} - -.no-pills { - list-style:none; -} - -.align { - &-center {text-align: center;} - &-left {text-align: left;} - &-right {text-align: right;} -} - -/* ------------------ HEADERS ------------------- */ - - -header h1 { - border-style:none !important; - color: $color-light; - font-weight:700; - font-size:5.4em; - font-style:oblique; - text-shadow: 0px 2px 12px rgba(0, 0, 0, 0); - padding-bottom:0px; - margin:auto; - text-align:center; - line-height: 1.5em; -} - -.navbar { - box-shadow: $large-shadow; - @include borders(); - border-left: 0; - border-right: 0; - ul { - padding-bottom:0; - } - @include li-no-margin(); -} - -.dropdown-menu { - box-shadow: $narrow-shadow, $inset-shadow; -} +@import 'global'; @import 'cards'; -/* ------------------ FOOTER ------------------- */ - -footer { - color: $color-footer-text; - margin-top:40px; -} - -/* social media */ - -ul.social { - font-size:1.5em; - padding-bottom:1em; - margin:auto; - text-align:center; - li { - margin:0; - list-style: none; - display: inline; - a { - color: $color-footer-back; - background-color: $color-footer-text; - padding:0.3em; - padding-left:0.36em; - padding-right:0.36em; - vertical-align:middle; - border-radius:100%; - &:hover { - color:$color-footer-text; - background-color: $color-footer-back; - } - } - } -} - - /* ------------------ BUTTONS ------------------- */ .btn { diff --git a/scss/_definitions.scss b/scss/_definitions.scss new file mode 100644 index 0000000..9a71103 --- /dev/null +++ b/scss/_definitions.scss @@ -0,0 +1,16 @@ +$large-shadow: 0px 2px 10px rgba(0, 0, 0, 0); +$narrow-shadow: 0px 2px 6px rgba(0, 0, 0, 0); +$inset-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0); +$inset-shadow-inverted: inset 0px 2px 0px rgba(0, 0, 0, 0); +$inset-relief: inset 0px 2px 0px rgba(255, 255, 255, 0); + +$border-radius: 0px; +$border-size: 0px; + +@mixin borders() { + border: $border-size solid rgba(0, 0, 0, 0.3) +} + +@mixin border-radius() { + border-radius: $border-radius $border-radius $border-radius $border-radius; +} \ No newline at end of file diff --git a/scss/_global.scss b/scss/_global.scss new file mode 100644 index 0000000..a0e3f72 --- /dev/null +++ b/scss/_global.scss @@ -0,0 +1,121 @@ +/* + * 1. Cards and containers + * All elements that are supposed to contain other stuff + * + * +*/ + +@mixin li-no-margin() { + li { + margin: 0; + } +} + +@mixin limitedSize() { + .columns { + max-width: 1024px; + margin:auto; + } +} + +.no-pills { + list-style:none; +} + +.align { + &-center {text-align: center;} + &-left {text-align: left;} + &-right {text-align: right;} +} + + /* ------------------ HEADERS ------------------- */ + +#page-header { + background: $color-turquoise url('../img/background.png') center bottom repeat-x; + height:350px; + border-top: 6px solid $color-dark2; + @include limitedSize(); + +} + +header h1 { + border-style:none !important; + color: $color-light; + font-weight:700; + font-size:5.4em; + font-style:oblique; + text-shadow: 0px 2px 12px rgba(0, 0, 0, 0); + padding-bottom:0px; + margin:auto; + line-height: 1.5em; +} + +.navbar { + border-left: 0; + border-right: 0; + padding: 1em; + color: $color-light; + a { + color: $color-light; + } + @include li-no-margin(); +} + +.dropdown-menu { + box-shadow: $narrow-shadow, $inset-shadow; +} + +/* ------------------ PAGE ------------------- */ + +#wrapper { + background-color: $color-light; +} + +#page-content { + padding-left:30px; + padding-right:30px; +} + + /* ------------------ FOOTER ------------------- */ + +$color-footer-back: $color-dark2; +$color-footer-text: $color-light; + +body { + // On colorise le background de la page complete de la même + // couleur que le fond du footer. + background-color: $color-footer-back; +} + +footer { + color: $color-footer-text; + margin-top:1.5em; + @include limitedSize(); +} + +/* social media */ + +ul.social { + font-size:1.5em; + padding-bottom:1.5em; + margin:auto; + text-align:center; + li { + margin:0; + list-style: none; + display: inline; + a { + color: $color-footer-back; + background-color: $color-footer-text; + padding:0.3em; + padding-left:0.36em; + padding-right:0.36em; + vertical-align:middle; + border-radius:100%; + &:hover { + color:$color-footer-text; + background-color: $color-footer-back; + } + } + } +} \ No newline at end of file diff --git a/scss/_palette.scss b/scss/_palette.scss index 9b5106b..a648a00 100644 --- a/scss/_palette.scss +++ b/scss/_palette.scss @@ -1,3 +1,8 @@ +/* + * 0. Palette and global colorization + * +*/ + $color-blue: #268bd2; $color-violet: #d33682; $color-purple: #6c71c4; @@ -34,4 +39,81 @@ $color-success: $color-green; @mixin background-color($background-color, $text-color) { background-color: $background-color!important; color: $text-color; - } \ No newline at end of file +} + +@mixin text-color($text-color) { + color: $text-color; +} + +// Colorize important elements + +a, a:hover, a:active { + color: $color-link; +} + +::selection { + @include background-color($color-selection, $color-button-light); +} +::-moz-selection { + @include background-color($color-selection, $color-button-light); +} + +mark { + background-color: lighten($color-mark, 30%) +} + +blockquote, pre { + border-color: $color-primary; +} + +// Add generic colorizations classes + +/* BACKGROUNDS */ + +.bg { + &-blue { @include background-color($color-blue, $color-button-light); } + &-violet { @include background-color($color-violet, $color-button-light); } + &-purple { @include background-color($color-purple, $color-button-light); } + &-red { @include background-color($color-red, $color-button-light); } + &-orange { @include background-color($color-orange, $color-button-light); } + &-green { @include background-color($color-green, $color-button-light); } + &-skyblue { @include background-color($color-skyblue, $color-button-light); } + &-dark { @include background-color($color-dark, $color-button-light); } + &-light { @include background-color($color-light, $color-button-dark); } + &-turquoise { @include background-color($color-turquoise, $color-button-light); } + &-yellow { @include background-color($color-yellow, $color-button-light); } + &-brown { @include background-color($color-brown, $color-button-light); } + &-grey { @include background-color($color-grey, $color-button-light); } + + &-primary { @include background-color($color-primary, $color-button-light); } + &-secondary { @include background-color($color-secondary, $color-button-light); } + &-warning { @include background-color($color-warning, $color-button-light); } + &-danger { @include background-color($color-danger, $color-button-light); } + &-info { @include background-color($color-info, $color-button-light); } + &-success { @include background-color($color-success, $color-button-light); } +} + + /* TEXT */ + +.text { + &-blue { @include text-color($color-blue); } + &-violet { @include text-color($color-violet); } + &-purple { @include text-color($color-purple); } + &-red { @include text-color($color-red); } + &-orange { @include text-color($color-orange); } + &-green { @include text-color($color-green); } + &-skyblue { @include text-color($color-skyblue); } + &-dark { @include text-color($color-dark); } + &-light { @include text-color($color-light); } + &-turquoise { @include text-color($color-turquoise); } + &-yellow { @include text-color($color-yellow); } + &-brown { @include text-color($color-brown); } + &-grey { @include text-color($color-grey); } + + &-primary { @include text-color($color-primary); } + &-secondary { @include text-color($color-secondary); } + &-warning { @include text-color($color-warning); } + &-danger { @include text-color($color-danger); } + &-info { @include text-color($color-info); } + &-success { @include text-color($color-success); } +} \ No newline at end of file diff --git a/scss/style.scss b/scss/style.scss index 518ccb1..40aa2a8 100644 --- a/scss/style.scss +++ b/scss/style.scss @@ -1,39 +1,6 @@ @import 'palette'; -/* ------------------ CUSTOM STYLE ------------------- */ - -$large-shadow: 0px 2px 10px rgba(0, 0, 0, 0); -$narrow-shadow: 0px 2px 6px rgba(0, 0, 0, 0); -$inset-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0); -$inset-shadow-inverted: inset 0px 2px 0px rgba(0, 0, 0, 0); -$inset-relief: inset 0px 2px 0px rgba(255, 255, 255, 0); - -$border-radius: 0px; -$border-size: 0px; - -$color-footer-back: $color-dark; -$color-footer-text: $color-light; - -@mixin borders() { - border: $border-size solid rgba(0, 0, 0, 0.3) -} - -@mixin border-radius() { - border-radius: $border-radius $border-radius $border-radius $border-radius; -} - -body { - background-color: $color-footer-back; -} - -#wrapper { - background-color: $color-light; -} - -#page-header { - background: $color-turquoise url('../img/background.png') center bottom repeat-x; - height:350px; -} +@import 'definitions'; @import 'commons';