chore: refactor and improve global styling
This commit is contained in:
Kazhnuz
parent
dd2c07fb69
commit
604115a99c
9 changed files with 295 additions and 271 deletions
145
css/style.css
145
css/style.css
|
|
@ -1,18 +1,10 @@
|
|||
/* ------------------ CUSTOM STYLE ------------------- */
|
||||
body {
|
||||
background-color: #002b36;
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
background-color: #fdf6e3;
|
||||
}
|
||||
|
||||
#page-header {
|
||||
background: #2aa198 url("../img/background.png") center bottom repeat-x;
|
||||
height: 350px;
|
||||
}
|
||||
|
||||
/* ------------------ GLOBAL STYLE ------------------- */
|
||||
/*
|
||||
* 1. Cards and containers
|
||||
* All elements that are supposed to contain other stuff
|
||||
*
|
||||
*
|
||||
*/
|
||||
.no-pills {
|
||||
list-style: none;
|
||||
}
|
||||
|
|
@ -28,6 +20,16 @@ body {
|
|||
}
|
||||
|
||||
/* ------------------ HEADERS ------------------- */
|
||||
#page-header {
|
||||
background: #2aa198 url("../img/background.png") center bottom repeat-x;
|
||||
height: 350px;
|
||||
border-top: 6px solid #073642;
|
||||
}
|
||||
#page-header .columns {
|
||||
max-width: 1024px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
border-style: none !important;
|
||||
color: #fdf6e3;
|
||||
|
|
@ -37,18 +39,17 @@ header h1 {
|
|||
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: 0px solid rgba(0, 0, 0, 0.3);
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
padding: 1em;
|
||||
color: #fdf6e3;
|
||||
}
|
||||
.navbar ul {
|
||||
padding-bottom: 0;
|
||||
.navbar a {
|
||||
color: #fdf6e3;
|
||||
}
|
||||
.navbar li {
|
||||
margin: 0;
|
||||
|
|
@ -58,6 +59,56 @@ header h1 {
|
|||
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
/* ------------------ PAGE ------------------- */
|
||||
#wrapper {
|
||||
background-color: #fdf6e3;
|
||||
}
|
||||
|
||||
#page-content {
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
/* ------------------ FOOTER ------------------- */
|
||||
body {
|
||||
background-color: #073642;
|
||||
}
|
||||
|
||||
footer {
|
||||
color: #fdf6e3;
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
footer .columns {
|
||||
max-width: 1024px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
/* social media */
|
||||
ul.social {
|
||||
font-size: 1.5em;
|
||||
padding-bottom: 1.5em;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
}
|
||||
ul.social li {
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
display: inline;
|
||||
}
|
||||
ul.social li a {
|
||||
color: #073642;
|
||||
background-color: #fdf6e3;
|
||||
padding: 0.3em;
|
||||
padding-left: 0.36em;
|
||||
padding-right: 0.36em;
|
||||
vertical-align: middle;
|
||||
border-radius: 100%;
|
||||
}
|
||||
ul.social li a:hover {
|
||||
color: #fdf6e3;
|
||||
background-color: #073642;
|
||||
}
|
||||
|
||||
/*
|
||||
* 2. Cards and containers
|
||||
* All elements that are supposed to contain other stuff
|
||||
|
|
@ -139,30 +190,6 @@ header h1 {
|
|||
padding: 0 0.4em 0;
|
||||
}
|
||||
|
||||
/* meta */
|
||||
.card-meta {
|
||||
padding: 1em;
|
||||
border-bottom: 0px solid rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.card-meta.media {
|
||||
-ms-flex-align: center !important;
|
||||
align-items: center !important;
|
||||
}
|
||||
.card-meta .media-left .media-object {
|
||||
height: 64px;
|
||||
width: 64px;
|
||||
border-radius: 10px;
|
||||
margin-right: 1em;
|
||||
}
|
||||
.card-meta author {
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
}
|
||||
.card-meta time {
|
||||
display: block;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* COLORIZE CARDS and TOASTS */
|
||||
.card-blue > .card-header, .card-blue > .menu-header, .smallcard-blue > .card-header, .smallcard-blue > .menu-header, .menu-blue > .card-header, .menu-blue > .menu-header {
|
||||
background-color: #268bd2 !important;
|
||||
|
|
@ -318,38 +345,6 @@ header h1 {
|
|||
color: #fdf6e3;
|
||||
}
|
||||
|
||||
/* ------------------ FOOTER ------------------- */
|
||||
footer {
|
||||
color: #fdf6e3;
|
||||
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: #002b36;
|
||||
background-color: #fdf6e3;
|
||||
padding: 0.3em;
|
||||
padding-left: 0.36em;
|
||||
padding-right: 0.36em;
|
||||
vertical-align: middle;
|
||||
border-radius: 100%;
|
||||
}
|
||||
ul.social li a:hover {
|
||||
color: #fdf6e3;
|
||||
background-color: #002b36;
|
||||
}
|
||||
|
||||
/* ------------------ BUTTONS ------------------- */
|
||||
.btn {
|
||||
border: 0px solid rgba(0, 0, 0, 0.3);
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -23,7 +23,7 @@
|
|||
<body>
|
||||
<div id="wrapper">
|
||||
|
||||
<header class="container-fluid" id="page-header">
|
||||
<header id="page-header">
|
||||
<div class="columns">
|
||||
<div class="column col-6">
|
||||
<h1>Blue Sky</h1>
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
</div>
|
||||
</header>
|
||||
|
||||
<section class="container">
|
||||
<section class="container" id="page-content">
|
||||
<div class="columns">
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -28,21 +28,6 @@ $color-button-dark: $color-dark;
|
|||
}
|
||||
}
|
||||
|
||||
@mixin text-color($text-color) {
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
a, a:hover, a:active {
|
||||
color: $color-link;
|
||||
}
|
||||
|
||||
::selection {
|
||||
@include background-color($color-selection, $color-button-light);
|
||||
}
|
||||
::-moz-selection {
|
||||
@include background-color($color-selection, $color-button-light);
|
||||
}
|
||||
|
||||
/* BUTTONS & BADGES */
|
||||
|
||||
.btn, a.btn, .badge, .chip, a.chip, a.badge, .label, a.label {
|
||||
|
|
@ -77,63 +62,3 @@ a, a:hover, a:active {
|
|||
&-diaspora {@include button-color(#313739, $color-button-light);}
|
||||
&-mastodon {@include button-color(#282c37, $color-button-light);}
|
||||
}
|
||||
|
||||
/* BACKGROUNDS */
|
||||
|
||||
.bg {
|
||||
&-blue { @include background-color($color-blue, $color-button-light); }
|
||||
&-violet { @include background-color($color-violet, $color-button-light); }
|
||||
&-purple { @include background-color($color-purple, $color-button-light); }
|
||||
&-red { @include background-color($color-red, $color-button-light); }
|
||||
&-orange { @include background-color($color-orange, $color-button-light); }
|
||||
&-green { @include background-color($color-green, $color-button-light); }
|
||||
&-skyblue { @include background-color($color-skyblue, $color-button-light); }
|
||||
&-dark { @include background-color($color-dark, $color-button-light); }
|
||||
&-light { @include background-color($color-light, $color-button-dark); }
|
||||
&-turquoise { @include background-color($color-turquoise, $color-button-light); }
|
||||
&-yellow { @include background-color($color-yellow, $color-button-light); }
|
||||
&-brown { @include background-color($color-brown, $color-button-light); }
|
||||
&-grey { @include background-color($color-grey, $color-button-light); }
|
||||
|
||||
&-primary { @include background-color($color-primary, $color-button-light); }
|
||||
&-secondary { @include background-color($color-secondary, $color-button-light); }
|
||||
&-warning { @include background-color($color-warning, $color-button-light); }
|
||||
&-danger { @include background-color($color-danger, $color-button-light); }
|
||||
&-info { @include background-color($color-info, $color-button-light); }
|
||||
&-success { @include background-color($color-success, $color-button-light); }
|
||||
}
|
||||
|
||||
/* TEXT */
|
||||
|
||||
.text {
|
||||
&-blue { @include text-color($color-blue); }
|
||||
&-violet { @include text-color($color-violet); }
|
||||
&-purple { @include text-color($color-purple); }
|
||||
&-red { @include text-color($color-red); }
|
||||
&-orange { @include text-color($color-orange); }
|
||||
&-green { @include text-color($color-green); }
|
||||
&-skyblue { @include text-color($color-skyblue); }
|
||||
&-dark { @include text-color($color-dark); }
|
||||
&-light { @include text-color($color-light); }
|
||||
&-turquoise { @include text-color($color-turquoise); }
|
||||
&-yellow { @include text-color($color-yellow); }
|
||||
&-brown { @include text-color($color-brown); }
|
||||
&-grey { @include text-color($color-grey); }
|
||||
|
||||
&-primary { @include text-color($color-primary); }
|
||||
&-secondary { @include text-color($color-secondary); }
|
||||
&-warning { @include text-color($color-warning); }
|
||||
&-danger { @include text-color($color-danger); }
|
||||
&-info { @include text-color($color-info); }
|
||||
&-success { @include text-color($color-success); }
|
||||
}
|
||||
|
||||
/* Clear-Typography overrides */
|
||||
|
||||
mark {
|
||||
background-color: lighten($color-mark, 30%)
|
||||
}
|
||||
|
||||
blockquote, pre {
|
||||
border-color: $color-primary;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,89 +1,7 @@
|
|||
/* ------------------ GLOBAL STYLE ------------------- */
|
||||
|
||||
@mixin li-no-margin() {
|
||||
li {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.no-pills {
|
||||
list-style:none;
|
||||
}
|
||||
|
||||
.align {
|
||||
&-center {text-align: center;}
|
||||
&-left {text-align: left;}
|
||||
&-right {text-align: right;}
|
||||
}
|
||||
|
||||
/* ------------------ HEADERS ------------------- */
|
||||
|
||||
|
||||
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;
|
||||
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;
|
||||
}
|
||||
@import 'global';
|
||||
|
||||
@import 'cards';
|
||||
|
||||
/* ------------------ FOOTER ------------------- */
|
||||
|
||||
footer {
|
||||
color: $color-footer-text;
|
||||
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: $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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* ------------------ BUTTONS ------------------- */
|
||||
|
||||
.btn {
|
||||
|
|
|
|||
16
scss/_definitions.scss
Normal file
16
scss/_definitions.scss
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
$large-shadow: 0px 2px 10px rgba(0, 0, 0, 0);
|
||||
$narrow-shadow: 0px 2px 6px rgba(0, 0, 0, 0);
|
||||
$inset-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0);
|
||||
$inset-shadow-inverted: inset 0px 2px 0px rgba(0, 0, 0, 0);
|
||||
$inset-relief: inset 0px 2px 0px rgba(255, 255, 255, 0);
|
||||
|
||||
$border-radius: 0px;
|
||||
$border-size: 0px;
|
||||
|
||||
@mixin borders() {
|
||||
border: $border-size solid rgba(0, 0, 0, 0.3)
|
||||
}
|
||||
|
||||
@mixin border-radius() {
|
||||
border-radius: $border-radius $border-radius $border-radius $border-radius;
|
||||
}
|
||||
121
scss/_global.scss
Normal file
121
scss/_global.scss
Normal file
|
|
@ -0,0 +1,121 @@
|
|||
/*
|
||||
* 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;
|
||||
height:350px;
|
||||
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;
|
||||
padding: 1em;
|
||||
color: $color-light;
|
||||
a {
|
||||
color: $color-light;
|
||||
}
|
||||
@include li-no-margin();
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
box-shadow: $narrow-shadow, $inset-shadow;
|
||||
}
|
||||
|
||||
/* ------------------ 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,8 @@
|
|||
/*
|
||||
* 0. Palette and global colorization
|
||||
*
|
||||
*/
|
||||
|
||||
$color-blue: #268bd2;
|
||||
$color-violet: #d33682;
|
||||
$color-purple: #6c71c4;
|
||||
|
|
@ -35,3 +40,80 @@ $color-success: $color-green;
|
|||
background-color: $background-color!important;
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
@mixin text-color($text-color) {
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
// Colorize important elements
|
||||
|
||||
a, a:hover, a:active {
|
||||
color: $color-link;
|
||||
}
|
||||
|
||||
::selection {
|
||||
@include background-color($color-selection, $color-button-light);
|
||||
}
|
||||
::-moz-selection {
|
||||
@include background-color($color-selection, $color-button-light);
|
||||
}
|
||||
|
||||
mark {
|
||||
background-color: lighten($color-mark, 30%)
|
||||
}
|
||||
|
||||
blockquote, pre {
|
||||
border-color: $color-primary;
|
||||
}
|
||||
|
||||
// Add generic colorizations classes
|
||||
|
||||
/* BACKGROUNDS */
|
||||
|
||||
.bg {
|
||||
&-blue { @include background-color($color-blue, $color-button-light); }
|
||||
&-violet { @include background-color($color-violet, $color-button-light); }
|
||||
&-purple { @include background-color($color-purple, $color-button-light); }
|
||||
&-red { @include background-color($color-red, $color-button-light); }
|
||||
&-orange { @include background-color($color-orange, $color-button-light); }
|
||||
&-green { @include background-color($color-green, $color-button-light); }
|
||||
&-skyblue { @include background-color($color-skyblue, $color-button-light); }
|
||||
&-dark { @include background-color($color-dark, $color-button-light); }
|
||||
&-light { @include background-color($color-light, $color-button-dark); }
|
||||
&-turquoise { @include background-color($color-turquoise, $color-button-light); }
|
||||
&-yellow { @include background-color($color-yellow, $color-button-light); }
|
||||
&-brown { @include background-color($color-brown, $color-button-light); }
|
||||
&-grey { @include background-color($color-grey, $color-button-light); }
|
||||
|
||||
&-primary { @include background-color($color-primary, $color-button-light); }
|
||||
&-secondary { @include background-color($color-secondary, $color-button-light); }
|
||||
&-warning { @include background-color($color-warning, $color-button-light); }
|
||||
&-danger { @include background-color($color-danger, $color-button-light); }
|
||||
&-info { @include background-color($color-info, $color-button-light); }
|
||||
&-success { @include background-color($color-success, $color-button-light); }
|
||||
}
|
||||
|
||||
/* TEXT */
|
||||
|
||||
.text {
|
||||
&-blue { @include text-color($color-blue); }
|
||||
&-violet { @include text-color($color-violet); }
|
||||
&-purple { @include text-color($color-purple); }
|
||||
&-red { @include text-color($color-red); }
|
||||
&-orange { @include text-color($color-orange); }
|
||||
&-green { @include text-color($color-green); }
|
||||
&-skyblue { @include text-color($color-skyblue); }
|
||||
&-dark { @include text-color($color-dark); }
|
||||
&-light { @include text-color($color-light); }
|
||||
&-turquoise { @include text-color($color-turquoise); }
|
||||
&-yellow { @include text-color($color-yellow); }
|
||||
&-brown { @include text-color($color-brown); }
|
||||
&-grey { @include text-color($color-grey); }
|
||||
|
||||
&-primary { @include text-color($color-primary); }
|
||||
&-secondary { @include text-color($color-secondary); }
|
||||
&-warning { @include text-color($color-warning); }
|
||||
&-danger { @include text-color($color-danger); }
|
||||
&-info { @include text-color($color-info); }
|
||||
&-success { @include text-color($color-success); }
|
||||
}
|
||||
|
|
@ -1,39 +1,6 @@
|
|||
@import 'palette';
|
||||
|
||||
/* ------------------ CUSTOM STYLE ------------------- */
|
||||
|
||||
$large-shadow: 0px 2px 10px rgba(0, 0, 0, 0);
|
||||
$narrow-shadow: 0px 2px 6px rgba(0, 0, 0, 0);
|
||||
$inset-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0);
|
||||
$inset-shadow-inverted: inset 0px 2px 0px rgba(0, 0, 0, 0);
|
||||
$inset-relief: inset 0px 2px 0px rgba(255, 255, 255, 0);
|
||||
|
||||
$border-radius: 0px;
|
||||
$border-size: 0px;
|
||||
|
||||
$color-footer-back: $color-dark;
|
||||
$color-footer-text: $color-light;
|
||||
|
||||
@mixin borders() {
|
||||
border: $border-size solid rgba(0, 0, 0, 0.3)
|
||||
}
|
||||
|
||||
@mixin border-radius() {
|
||||
border-radius: $border-radius $border-radius $border-radius $border-radius;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: $color-footer-back;
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
background-color: $color-light;
|
||||
}
|
||||
|
||||
#page-header {
|
||||
background: $color-turquoise url('../img/background.png') center bottom repeat-x;
|
||||
height:350px;
|
||||
}
|
||||
@import 'definitions';
|
||||
|
||||
@import 'commons';
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue