kazhnuz.css/scss/_global.scss

126 lines
2.4 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 limitedSize() {
.columns {
max-width: 1024px;
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-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 limitedSize();
}
header h1 {
border-style:none !important;
color: $color-light;
font-weight:700;
font-size:5.4em;
font-style:oblique;
text-shadow: 0px 2px 12px rgba(0, 0, 0, 0);
padding-bottom:0px;
margin:auto;
line-height: 1.5em;
}
.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 {
padding-left:64px;
padding-right:64px;
}
/* ------------------ PAGE ------------------- */
#wrapper {
background-color: $color-light;
}
#page-content {
padding-left:30px;
padding-right:30px;
}
/* ------------------ 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 limitedSize();
}
/* 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;
}
}
}
}