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%;
|
width: 100%;
|
||||||
display: block; }
|
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 ------------------- */
|
/* ------------------ GLOBAL STYLE ------------------- */
|
||||||
.no-pills {
|
.no-pills {
|
||||||
list-style: none; }
|
list-style: none; }
|
||||||
|
|
@ -287,58 +273,6 @@ h1, h2, h3, h4, h5, h6, h7, h8, h9, h10 {
|
||||||
color: white;
|
color: white;
|
||||||
text-shadow: 0px 2px 8px rgba(0, 0, 0, 0.4); }
|
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 ------------------- */
|
/* ------------------ CARDS ------------------- */
|
||||||
.card {
|
.card {
|
||||||
border-radius: 0px 0px 0px 0px;
|
border-radius: 0px 0px 0px 0px;
|
||||||
|
|
@ -598,6 +532,92 @@ a.list-group-item:hover {
|
||||||
margin-bottom: 0.4em;
|
margin-bottom: 0.4em;
|
||||||
display: block; }
|
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 ------------------- */
|
/* ------------------ COULEURS ------------------- */
|
||||||
a, a:hover, a:active {
|
a, a:hover, a:active {
|
||||||
color: #4e63c9; }
|
color: #4e63c9; }
|
||||||
|
|
@ -1210,20 +1230,6 @@ mark {
|
||||||
blockquote, pre {
|
blockquote, pre {
|
||||||
border-color: #e33d22; }
|
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 {
|
.card-meta {
|
||||||
border-radius: 0px 0px 0px 0px;
|
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);
|
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);
|
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 ------------------- */
|
/* ------------------ 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 {
|
.card-meta {
|
||||||
@include border-radius();
|
@include border-radius();
|
||||||
box-shadow: $large-shadow, $inset-shadow;
|
box-shadow: $large-shadow, $inset-shadow;
|
||||||
|
|
|
||||||
|
|
@ -11,27 +11,10 @@
|
||||||
|
|
||||||
@import 'typography';
|
@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 'commons';
|
||||||
|
|
||||||
|
@import 'global';
|
||||||
|
|
||||||
@import 'colorize';
|
@import 'colorize';
|
||||||
|
|
||||||
@import 'overrides';
|
@import 'overrides';
|
||||||
|
|
|
||||||
Reference in a new issue