155 lines
3.0 KiB
SCSS
155 lines
3.0 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 row() {
|
|
max-width: $max-size;
|
|
margin: auto;
|
|
}
|
|
|
|
@mixin row-grid() {
|
|
@include row();
|
|
|
|
@include xl {
|
|
display: grid;
|
|
grid-template-rows: auto;
|
|
row-gap: $baselinerem;
|
|
column-gap: $baselinerem * 2;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
/* 02.1 - Wrapper et page totale */
|
|
|
|
#wrapper {
|
|
background-image: url("img/header.png"), url("img/back2.png"), url("img/back.png"); /* Une petite image de fond pour éviter d'avoir un vieux fond blanc :p */
|
|
background-attachment: scroll, scroll, scroll;
|
|
background-position: top center, top center, top center;
|
|
background-repeat: no-repeat, repeat-y , repeat ;
|
|
|
|
|
|
padding-left:$wrapper-padding/2;
|
|
padding-right:$wrapper-padding/2;
|
|
|
|
@include rwd(1300px) {
|
|
padding-left:$wrapper-padding;
|
|
padding-right:$wrapper-padding;
|
|
}
|
|
}
|
|
/* Alt background for smaller screen */
|
|
|
|
@media screen and (max-width: 1199px) {
|
|
#wrapper {
|
|
background-image: url("img/header_small.png"), url("img/back2_small.png"), url("img/back_alt.png"); /* Une petite image de fond pour éviter d'avoir un vieux fond blanc :p */
|
|
background-attachment: scroll, scroll, scroll;
|
|
background-position: top center, top center, top center;
|
|
background-repeat: no-repeat, repeat-y , repeat ;
|
|
}
|
|
}
|
|
|
|
|
|
#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;
|
|
}
|
|
|
|
.navbar {
|
|
box-shadow: $large-shadow;
|
|
@include borders();
|
|
border-left: 0;
|
|
border-right: 0;
|
|
ul {
|
|
padding-bottom:0;
|
|
}
|
|
@include li-no-margin();
|
|
|
|
&.navbar-transparent {
|
|
border: none;
|
|
box-shadow: none;
|
|
background-color:transparent;
|
|
}
|
|
}
|
|
|
|
.dropdown-menu {
|
|
box-shadow: $narrow-shadow, $inset-shadow;
|
|
}
|
|
|
|
/* 02.2 - Main Area */
|
|
|
|
#page-main {
|
|
max-width:100%;
|
|
}
|
|
|
|
/* 02.3 - Footer */
|
|
|
|
#page-footer {
|
|
margin-top: $baselinerem;
|
|
@include row();
|
|
padding-left:$wrapper-padding;
|
|
padding-right:$wrapper-padding;
|
|
}
|
|
|
|
/* 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
|
|
}
|
|
}
|
|
}
|
|
}
|