qdouze2-wordpress-theme/scss/custom/_global.scss

219 lines
3.7 KiB
SCSS

/* --- 03. GLOBAL STYLING --- */
/*
* Les styles "globaux" touchant toute la page.
*
*/
@mixin li-no-margin() {
li {
margin: 0;
}
}
@mixin container-big() {
padding-left: $lineheight;
padding-right: $lineheight;
max-width: $container-size;
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-primary url('img/background.png');
margin-bottom:1.5rem;
}
header h1 {
border-style:none !important;
font-weight: $fontweight_hyper;
font-size:5.4em;
font-style:oblique;
padding:1.5rem;
line-height: 1rem;
max-width: $container-size;
margin: auto;
text-align:center;
img {
width: 800px;
height: auto;
margin-top:0rem;
}
a, a:visited, a:hover {
background-color:transparent;
}
}
.osd {
background-color:rgba(0,0,0,0.3);
}
.navbar {
border-left: 0;
border-right: 0;
padding: 0.75rem;
color: $color-font-light;
a {
color: $color-font-light;
}
@include li-no-margin();
}
.categories {
font-weight:800;
font-size:0.8rem;
}
.dropdown-menu {
box-shadow: $narrow-shadow, $inset-shadow;
}
/* ------------------ CONTAINERS ------------------- */
.container-big {
@include container-big();
}
.container-blog {
@include container-big();
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
row-gap: $lineheight;
column-gap: 3rem;
grid-template-areas:
"main"
"side";
@include xl() {
grid-template-columns: auto 360px;
grid-template-areas: "main side";
}
}
.fullwidth {
grid-column: span 2;
}
.sidebar {
grid-area: side;
}
ul.tag-list {
display:flex;
padding-bottom:0;
overflow: hidden;
height:auto;
flex-wrap: wrap;
li {
list-style: none;
margin:3px;
}
}
.container-preview {
@include container-big();
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
row-gap: $lineheight;
column-gap: 3rem;
grid-template-areas:
"main"
"side";
@include lg() {
grid-template-columns: 360px auto;
grid-template-areas: "side main";
}
}
.container-onecolumn {
max-width:1280px;
margin: auto;
padding-bottom: $lineheight;
}
.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-background;
}
/* ------------------ FOOTER ------------------- */
$color-footer-back: get-color("dark");
$color-footer-text: get-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;
padding-bottom:1.5rem;
.columns {
font-size:0.8rem;
a,
a:visited {
&:hover,
&:active,
&:visited {
color: $color-footer-text;
}
}
}
}