style.css: reorganize stylesheet
This commit is contained in:
parent
f919b37072
commit
02546118c2
2 changed files with 88 additions and 86 deletions
2
NEWS
2
NEWS
|
@ -10,6 +10,8 @@
|
||||||
|
|
||||||
- Some style fixes
|
- Some style fixes
|
||||||
|
|
||||||
|
- Reorganized stylesheet
|
||||||
|
|
||||||
### BlueSky 2.0
|
### BlueSky 2.0
|
||||||
|
|
||||||
- Remade the style entirely
|
- Remade the style entirely
|
||||||
|
|
156
css/style.css
156
css/style.css
|
@ -1,3 +1,5 @@
|
||||||
|
/* ------------------ GLOBAL STYLE ------------------- */
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Comic Neue Angular';
|
font-family: 'Comic Neue Angular';
|
||||||
src: url('../fonts/ComicNeue-Angular-Bold.eot');
|
src: url('../fonts/ComicNeue-Angular-Bold.eot');
|
||||||
|
@ -27,6 +29,25 @@ font-size:14px;
|
||||||
background: #64b5f6 url('../img/background.png') center bottom repeat-x;
|
background: #64b5f6 url('../img/background.png') center bottom repeat-x;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.no-pills {
|
||||||
|
list-style:none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.align-center {
|
||||||
|
text-align:center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.align-left {
|
||||||
|
text-align:left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.align-right {
|
||||||
|
text-align:right;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ------------------ HEADERS ------------------- */
|
||||||
|
|
||||||
|
|
||||||
header h1 {
|
header h1 {
|
||||||
border-style:none !important;
|
border-style:none !important;
|
||||||
color:#FFF;
|
color:#FFF;
|
||||||
|
@ -38,8 +59,9 @@ header h1 {
|
||||||
padding-bottom:0px;
|
padding-bottom:0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
.navbar {
|
||||||
margin-top:40px;
|
border-radius:0px;
|
||||||
|
box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar .container .navbar-brand {
|
.navbar .container .navbar-brand {
|
||||||
|
@ -50,30 +72,51 @@ margin-left: 0px;
|
||||||
display:inline;
|
display:inline;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width:1199px) {
|
|
||||||
.reseaux-sociaux {
|
/* ------------------ FOOTER ------------------- */
|
||||||
margin-top:44px
|
|
||||||
|
footer {
|
||||||
|
margin-top:40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#logo {
|
.copyright {
|
||||||
max-width:100%;
|
text-align:center;
|
||||||
height:auto;
|
padding-bottom:10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width:991px) {
|
/* ------------------ PANELS ------------------- */
|
||||||
.reseaux-sociaux {
|
|
||||||
margin-top:20px;
|
.panel {
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
|
background-color: #FFF;
|
||||||
|
border-radius: 3px;
|
||||||
|
border-top-left-radius: 5px;
|
||||||
|
border-top-right-radius: 5px;
|
||||||
|
box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.3);
|
||||||
|
border-color: rgba(0,0,0,0.15);
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#logo {
|
.panel-heading {
|
||||||
max-width:548px;
|
border-top-left-radius:3px;
|
||||||
height:auto;
|
border-top-right-radius:3px;
|
||||||
}
|
border-width:0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.panel-noheader {
|
||||||
|
border-top-left-radius: 3px;
|
||||||
|
border-top-right-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-title {
|
||||||
|
color:#FFF;
|
||||||
|
text-align:center;
|
||||||
|
text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* meta */
|
||||||
|
|
||||||
.article-meta .media-left .media-object {
|
.article-meta .media-left .media-object {
|
||||||
height: 64px;
|
height: 64px;
|
||||||
|
@ -100,42 +143,7 @@ display:inline;
|
||||||
font-style:italic;
|
font-style:italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
.partager {
|
/* comments */
|
||||||
margin:15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
background-color: #FFF;
|
|
||||||
border-radius: 3px;
|
|
||||||
border-top-left-radius: 5px;
|
|
||||||
border-top-right-radius: 5px;
|
|
||||||
box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.3);
|
|
||||||
border-color: rgba(0,0,0,0.15);
|
|
||||||
border-style: solid;
|
|
||||||
border-width: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel-noheader {
|
|
||||||
border-top-left-radius: 3px;
|
|
||||||
border-top-right-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
border-style:none;
|
|
||||||
border-width:0px;
|
|
||||||
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2);
|
|
||||||
text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.reagir {
|
|
||||||
text-align:right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.copyright {
|
|
||||||
text-align:center;
|
|
||||||
padding-bottom:10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.titre-commentaires {
|
.titre-commentaires {
|
||||||
color:white;
|
color:white;
|
||||||
|
@ -143,12 +151,9 @@ text-align:right;
|
||||||
font-size:2.2em;
|
font-size:2.2em;
|
||||||
text-shadow: 0px 2px 8px rgba(0, 0, 0, 0.4);
|
text-shadow: 0px 2px 8px rgba(0, 0, 0, 0.4);
|
||||||
padding-bottom:15px;
|
padding-bottom:15px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.no-pills {
|
/* lists */
|
||||||
list-style:none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-group-item {
|
.list-group-item {
|
||||||
border-style:none;
|
border-style:none;
|
||||||
|
@ -164,16 +169,22 @@ a.list-group-item:hover {
|
||||||
background-color:rgba(0,0,0,0.1);
|
background-color:rgba(0,0,0,0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-heading {
|
|
||||||
border-top-left-radius:3px;
|
|
||||||
border-top-right-radius:3px;
|
|
||||||
border-width:0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
/* ------------------ BUTTONS ------------------- */
|
||||||
|
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
border-style:none;
|
||||||
|
border-width:0px;
|
||||||
|
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2);
|
||||||
|
text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
|
||||||
|
}
|
||||||
.btn:active {
|
.btn:active {
|
||||||
box-shadow: inset 0px 2px 0px rgba(0, 0, 0, 0.2);
|
box-shadow: inset 0px 2px 0px rgba(0, 0, 0, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ------------------ COULEURS ------------------- */
|
||||||
|
|
||||||
.panel-primary > .panel-heading, .btn-primary {
|
.panel-primary > .panel-heading, .btn-primary {
|
||||||
background-color:#3f51b5;
|
background-color:#3f51b5;
|
||||||
}
|
}
|
||||||
|
@ -244,29 +255,18 @@ a.list-group-item:hover {
|
||||||
color:#FFF;
|
color:#FFF;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar {
|
/* ------------------ BREADCRUMB ------------------- */
|
||||||
border-radius:0px;
|
|
||||||
box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.breadcrumb {
|
.breadcrumb {
|
||||||
box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.3);
|
box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-title {
|
/* ------------------ PARTAGE RESEAUX SOCIAUX ------------------- */
|
||||||
color:#FFF;
|
|
||||||
text-align:center;
|
.partager {
|
||||||
text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
|
margin:15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.align-center {
|
.reagir {
|
||||||
text-align:center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.align-left {
|
|
||||||
text-align:left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.align-right {
|
|
||||||
text-align:right;
|
text-align:right;
|
||||||
}
|
}
|
||||||
|
|
Reference in a new issue