scss: Put global elements in _global.scss

This commit is contained in:
Kazhnuz 2018-10-24 10:37:48 +02:00
parent 8ad2027aae
commit 77207e8efa
5 changed files with 192 additions and 181 deletions

View File

@ -256,20 +256,6 @@ mark {
width: 100%;
display: block; }
/* ------------------ CUSTOM STYLE ------------------- */
body {
background: #666 url("../img/background.png");
padding: 30px;
background-attachment: fixed; }
@media (max-width: 767.98px) {
body {
background: none;
padding: 0; } }
#wrapper {
background-color: #FFF; }
/* ------------------ GLOBAL STYLE ------------------- */
.no-pills {
list-style: none; }
@ -287,58 +273,6 @@ h1, h2, h3, h4, h5, h6, h7, h8, h9, h10 {
color: white;
text-shadow: 0px 2px 8px rgba(0, 0, 0, 0.4); }
/* ------------------ HEADERS ------------------- */
header h1 {
border-style: none !important;
color: #FFF;
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;
text-align: center;
line-height: 1.5em; }
.navbar {
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0);
border: 1px solid rgba(0, 0, 0, 0.3);
border-left: 0;
border-right: 0; }
.navbar ul {
padding-bottom: 0; }
.navbar li {
margin: 0; }
.dropdown-menu {
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0.2); }
/* ------------------ FOOTER ------------------- */
footer {
margin-top: 40px; }
/* social media */
ul.social {
font-size: 1.5em;
padding-bottom: 1em;
margin: auto;
text-align: center; }
ul.social li {
margin: 0;
list-style: none;
display: inline; }
ul.social li a {
color: #FFFFFF;
background-color: #000000;
padding: 0.3em;
padding-left: 0.36em;
padding-right: 0.36em;
vertical-align: middle;
border-radius: 100%; }
ul.social li a:hover {
color: #000;
background-color: #FFF; }
/* ------------------ CARDS ------------------- */
.card {
border-radius: 0px 0px 0px 0px;
@ -598,6 +532,92 @@ a.list-group-item:hover {
margin-bottom: 0.4em;
display: block; }
/*
* 1 - Global elements ( _global.scss )
*
* This part of the (s)css handle the style of "global" elements
* like the wrapper, the navbars, the header.
*
*/
body {
background: #666 url("../img/background.png");
padding: 30px;
background-attachment: fixed; }
@media (max-width: 767.98px) {
body {
background: none;
padding: 0; } }
#wrapper {
background-color: #FFF; }
/* 1.1 - Header */
header {
background: #EEE url("../img/background.png");
margin-bottom: 30px; }
header h1 {
border-style: none !important;
color: #FFF;
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;
text-align: center;
line-height: 1.5em; }
header h1 {
padding: 2.33333em;
line-height: 1em;
font-size: 1em;
margin: auto;
text-align: center; }
header h1 img {
max-width: 100%;
height: auto; }
.navbar {
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0);
border: 1px solid rgba(0, 0, 0, 0.3);
border-left: 0;
border-right: 0; }
.navbar ul {
padding-bottom: 0; }
.navbar li {
margin: 0; }
.dropdown-menu {
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0.2); }
/* 1.2 - Footer */
footer {
margin-top: 40px; }
/* 1.2.1 - Social Network Buttons */
ul.social {
font-size: 1.5em;
padding-bottom: 1em;
margin: auto;
text-align: center; }
ul.social li {
margin: 0;
list-style: none;
display: inline; }
ul.social li a {
color: #FFFFFF;
background-color: #000000;
padding: 0.3em;
padding-left: 0.36em;
padding-right: 0.36em;
vertical-align: middle;
border-radius: 100%; }
ul.social li a:hover {
color: #000;
background-color: #FFF; }
/* ------------------ COULEURS ------------------- */
a, a:hover, a:active {
color: #4e63c9; }
@ -1210,20 +1230,6 @@ mark {
blockquote, pre {
border-color: #e33d22; }
header h1 {
padding: 2.33333em;
line-height: 1em;
font-size: 1em;
margin: auto;
text-align: center; }
header h1 img {
max-width: 100%;
height: auto; }
header {
background: #EEE url("../img/background.png");
margin-bottom: 30px; }
.card-meta {
border-radius: 0px 0px 0px 0px;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0.2);

View File

@ -21,71 +21,6 @@ h1, h2, h3, h4, h5, h6, h7, h8, h9, h10 {
text-shadow: 0px 2px 8px rgba(0, 0, 0, 0.4);
}
/* ------------------ HEADERS ------------------- */
header h1 {
border-style:none !important;
color:#FFF;
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;
text-align:center;
line-height: 1.5em;
}
.navbar {
box-shadow: $large-shadow;
@include borders();
border-left: 0;
border-right: 0;
ul {
padding-bottom:0;
}
@include li-no-margin();
}
.dropdown-menu {
box-shadow: $narrow-shadow, $inset-shadow;
}
/* ------------------ FOOTER ------------------- */
footer {
margin-top:40px;
}
/* social media */
ul.social {
font-size:1.5em;
padding-bottom:1em;
margin:auto;
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
}
}
}
}
/* ------------------ CARDS ------------------- */

104
scss/_global.scss Normal file
View File

@ -0,0 +1,104 @@
/*
* 1 - Global elements ( _global.scss )
*
* This part of the (s)css handle the style of "global" elements
* like the wrapper, the navbars, the header.
*
*/
body {
background: #666 url('../img/background.png');
padding: 30px;
background-attachment: fixed;
}
@media (max-width: 767.98px) {
body {
background: none;
padding: 0;
}
}
#wrapper {
background-color: #FFF
}
/* 1.1 - Header */
header {
background: #EEE url('../img/background.png');
margin-bottom:30px;
}
header h1 {
border-style:none !important;
color:#FFF;
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;
text-align:center;
line-height: 1.5em;
}
header h1 {
padding:2.33333em;
line-height:1em;
font-size:1em;
margin:auto;
text-align:center;
img {
max-width: 100%;
height: auto;
}
}
.navbar {
box-shadow: $large-shadow;
@include borders();
border-left: 0;
border-right: 0;
ul {
padding-bottom:0;
}
@include li-no-margin();
}
.dropdown-menu {
box-shadow: $narrow-shadow, $inset-shadow;
}
/* 1.2 - Footer */
footer {
margin-top:40px;
}
/* 1.2.1 - Social Network Buttons */
ul.social {
font-size:1.5em;
padding-bottom:1em;
margin:auto;
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
}
}
}
}

View File

@ -1,20 +1,3 @@
header h1 {
padding:2.33333em;
line-height:1em;
font-size:1em;
margin:auto;
text-align:center;
img {
max-width: 100%;
height: auto;
}
}
header {
background: #EEE url('../img/background.png');
margin-bottom:30px;
}
.card-meta {
@include border-radius();
box-shadow: $large-shadow, $inset-shadow;

View File

@ -11,27 +11,10 @@
@import 'typography';
/* ------------------ CUSTOM STYLE ------------------- */
body {
background: #666 url('../img/background.png');
padding: 30px;
background-attachment: fixed;
}
@media (max-width: 767.98px) {
body {
background: none;
padding: 0;
}
}
#wrapper {
background-color: #FFF
}
@import 'commons';
@import 'global';
@import 'colorize';
@import 'overrides';