kazhnuz.css/scss/_global.scss

195 lines
3.7 KiB
SCSS
Raw Normal View History

/*
* 1. Cards and containers
* All elements that are supposed to contain other stuff
*
*
*/
@mixin li-no-margin() {
li {
margin: 0;
}
}
@mixin container-big() {
padding-left: 3*1.5rem;
padding-right: 3*1.5rem;
}
.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;
2019-10-17 15:52:38 +02:00
height:10*1.5rem;
border-top: 6px solid $color-dark2;
@include container-big();
}
header h1 {
border-style:none !important;
color: $color-light;
font-weight: $fontweight_hyper;
font-size:5.4em;
font-style:oblique;
padding-bottom:0px;
line-height: 1.5em;
img {
width: 100%;
height: auto;
margin-top:0.75rem;
}
}
.navbar {
border-left: 0;
border-right: 0;
2019-10-17 14:04:20 +02:00
padding: 0.75rem;
color: $color-light;
a {
color: $color-light;
}
@include li-no-margin();
}
.dropdown-menu {
box-shadow: $narrow-shadow, $inset-shadow;
}
2019-10-17 14:04:20 +02:00
/* ------------------ CONTAINERS ------------------- */
.container-big {
2019-10-18 13:41:02 +02:00
@include container-big();
}
.container-blog {
@include container-big();
display: grid;
grid-template-columns: auto 360px;
grid-template-rows: auto;
row-gap: 1.5rem;
column-gap: 3rem;
grid-template-areas: "main sidebar";
}
main.mainpane {
grid-area: main;
}
section.sidebar {
grid-area: sidebar;
}
.container-preview {
@include container-big();
display: grid;
grid-template-columns: 360px auto;
grid-template-rows: auto;
row-gap: 1.5rem;
column-gap: 3rem;
grid-template-areas: "sidebar main";
}
.container-onecolumn {
max-width:1280px;
margin: auto;
padding-bottom: 1.5rem;
2019-10-17 14:04:20 +02:00
}
.container-personnage {
@include container-big();
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: auto;
row-gap: 3rem;
column-gap: 3rem;
grid-template-areas:
"nomp nomp nomp nomp nomp nomp"
"info info info info meta meta"
"goss goss look look look look"
"aime aime aime dete dete dete"
"hist hist hist hist hist hist";
.card {
margin:0;
}
h1 {
padding:0;
}
}
.personnage {
&-nomp {grid-area: nomp;}
&-info {grid-area: info;}
&-meta {grid-area: meta;}
&-goss {grid-area: goss;}
&-look {grid-area: look;}
&-aime {grid-area: aime;}
&-dete {grid-area: dete;}
&-hist {grid-area: hist;}
}
/* ------------------ PAGE ------------------- */
#wrapper {
background-color: $color-light;
}
/* ------------------ 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 container-big();
font-size: 0.8rem!important;
}
/* 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;
}
}
}
}