137 lines
2.2 KiB
SCSS
137 lines
2.2 KiB
SCSS
/* --- 02. GLOBAL ELEMENTS --- */
|
|
|
|
/*
|
|
* Le style des "grandes parties".
|
|
* Cela permet de définir les différents éléments qui composeront la page totale
|
|
*
|
|
*/
|
|
|
|
// A modifier pour customiser le style facilement :
|
|
|
|
$background-color: get-color("skyblue");
|
|
$sidebar-size:300px;
|
|
$max-size: 1600px;
|
|
$wrapper-padding: $baselinerem * 3;
|
|
|
|
// Mixins
|
|
|
|
@mixin container {
|
|
max-width: $max-size;
|
|
margin: auto;
|
|
|
|
|
|
padding-left:$wrapper-padding/2;
|
|
padding-right:$wrapper-padding/2;
|
|
|
|
@include rwd(1300px) {
|
|
padding-left:$wrapper-padding;
|
|
padding-right:$wrapper-padding;
|
|
}
|
|
}
|
|
|
|
@mixin row() {
|
|
margin: auto;
|
|
}
|
|
|
|
@mixin row-grid() {
|
|
@include row();
|
|
|
|
@include xl {
|
|
display: grid;
|
|
grid-template-rows: auto;
|
|
row-gap: $baselinerem;
|
|
column-gap: $baselinerem * 2;
|
|
}
|
|
|
|
}
|
|
|
|
/* 02.0 - Global page layout */
|
|
|
|
body {
|
|
display: flex;
|
|
min-height: 100vh;
|
|
flex-direction: column;
|
|
}
|
|
|
|
// the type of container we use for our theme system
|
|
.container-semifluid {
|
|
@include container();
|
|
}
|
|
|
|
|
|
/* 02.1 - Wrapper et page totale */
|
|
|
|
#wrapper {
|
|
flex: 1 0 auto;
|
|
background: $background-color url('img/background.png') center bottom repeat-x;
|
|
}
|
|
|
|
#global-area {
|
|
@include row-grid();
|
|
&.index-layout {
|
|
grid-template-columns: auto $sidebar-size;
|
|
grid-template-areas: "main sidebar";
|
|
}
|
|
}
|
|
|
|
/* 02.1 - Header */
|
|
|
|
#page-header {
|
|
@include row();
|
|
}
|
|
|
|
header h1 {
|
|
border-style:none !important;
|
|
color:#FFF;
|
|
font-weight:700;
|
|
font-size:5.4rem;
|
|
font-style:oblique;
|
|
padding-bottom:0px;
|
|
margin:auto;
|
|
text-align:center;
|
|
line-height: 7.5rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
/* 02.2 - Main Area */
|
|
|
|
#page-main {
|
|
max-width:100%;
|
|
}
|
|
|
|
/* 02.3 - Footer */
|
|
|
|
#page-footer {
|
|
margin-top: $baselinerem;
|
|
padding-bottom: $baselinerem;
|
|
@include row();
|
|
}
|
|
|
|
/* social media */
|
|
|
|
ul.social {
|
|
font-size:1.5em;
|
|
padding:0;
|
|
margin:auto;
|
|
margin-bottom: $baselinerem;
|
|
text-align:center;
|
|
li {
|
|
margin:0;
|
|
list-style: none;
|
|
display: inline;
|
|
a {
|
|
color:#FFFFFF;
|
|
background-color:#000000;
|
|
padding:0.3em;
|
|
padding-left:0.36em;
|
|
padding-right:0.36em;
|
|
vertical-align:middle;
|
|
border-radius:100%;
|
|
&:hover {
|
|
color:#000;
|
|
background-color:#FFF
|
|
}
|
|
}
|
|
}
|
|
}
|