kazhnuz/kazhnuz.css
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

feat: make more customizable the header and footer color

Browse source
This commit is contained in:
Kazhnuz 2021-07-29 11:07:59 +02:00
parent e006221a75
commit 569332ce6e
1 changed files with 9 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/scss/_global.scss
View file

@ -1,5 +1,8 @@
/* --- 03. GLOBAL STYLING --- */ /* --- 03. GLOBAL STYLING --- */
$color-footer-back: get-color("dark2");
$color-header-back: get-color("skyblue");
/* /*
* Les styles "globaux" touchant toute la page. * Les styles "globaux" touchant toute la page.
* *
@ -31,8 +34,8 @@
/* ------------------ HEADERS ------------------- */ /* ------------------ HEADERS ------------------- */
#page-header { #page-header {
background: get-color("skyblue") url('img/background.png') center bottom repeat-x; background: $color-header-back url('img/background.png') center bottom repeat-x;
border-top: 6px solid get-color("dark2"); border-top: 6px solid $color-footer-back;
padding-bottom:3rem; padding-bottom:3rem;
.header-collumns { .header-collumns {
@ -202,9 +205,6 @@ header h1 {
/* ------------------ FOOTER ------------------- */ /* ------------------ FOOTER ------------------- */
$color-footer-back: get-color("dark2");
$color-footer-text: $color-font-light;
body { body {
// On colorise le background de la page complete de la même // On colorise le background de la page complete de la même
// couleur que le fond du footer. // couleur que le fond du footer.
@ -213,7 +213,7 @@ body {
footer { footer {
@include angled-edge('outside top', 'upper left', $color-footer-back, 32); @include angled-edge('outside top', 'upper left', $color-footer-back, 32);
color: $color-footer-text; color: getTextColorFromBackground($color-footer-back);
padding-top:1.5rem; padding-top:1.5rem;
font-size: 0.8rem!important; font-size: 0.8rem!important;
padding-bottom:1.5rem; padding-bottom:1.5rem;
@ -232,7 +232,7 @@ footer {
a, a:visited { a, a:visited {
&:hover, &:active, &:visited { &:hover, &:active, &:visited {
color: $color-font-light; color: getTextColorFromBackground($color-footer-back);
} }
} }
@ -252,14 +252,14 @@ ul.social {
display: inline; display: inline;
a, a:visited { a, a:visited {
color: $color-footer-back; color: $color-footer-back;
background-color: $color-footer-text; background-color: getTextColorFromBackground($color-footer-back);
padding:0.3em; padding:0.3em;
padding-left:0.36em; padding-left:0.36em;
padding-right:0.36em; padding-right:0.36em;
vertical-align:middle; vertical-align:middle;
border-radius:100%; border-radius:100%;
&:hover { &:hover {
color:$color-footer-text; color:getTextColorFromBackground($color-footer-back);
background-color: $color-footer-back; background-color: $color-footer-back;
} }
} }