scss: Put global elements in _global.scss
This commit is contained in:
Kazhnuz
parent
8ad2027aae
commit
77207e8efa
5 changed files with 192 additions and 181 deletions
166
css/style.css
166
css/style.css
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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
104
scss/_global.scss
Normal 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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
Reference in a new issue