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

feat: make more customizable the header and footer color

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