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 ------------------- */
|
/* ------------------ CUSTOM STYLE ------------------- */
|
||||||
body {
|
/*
|
||||||
background-color: #002b36;
|
* 1. Cards and containers
|
||||||
}
|
* All elements that are supposed to contain other stuff
|
||||||
|
*
|
||||||
#wrapper {
|
*
|
||||||
background-color: #fdf6e3;
|
*/
|
||||||
}
|
|
||||||
|
|
||||||
#page-header {
|
|
||||||
background: #2aa198 url("../img/background.png") center bottom repeat-x;
|
|
||||||
height: 350px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ------------------ GLOBAL STYLE ------------------- */
|
|
||||||
.no-pills {
|
.no-pills {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
|
|
@ -28,6 +20,16 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ------------------ HEADERS ------------------- */
|
/* ------------------ 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 {
|
header h1 {
|
||||||
border-style: none !important;
|
border-style: none !important;
|
||||||
color: #fdf6e3;
|
color: #fdf6e3;
|
||||||
|
|
@ -37,18 +39,17 @@ header h1 {
|
||||||
text-shadow: 0px 2px 12px rgba(0, 0, 0, 0);
|
text-shadow: 0px 2px 12px rgba(0, 0, 0, 0);
|
||||||
padding-bottom: 0px;
|
padding-bottom: 0px;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
text-align: center;
|
|
||||||
line-height: 1.5em;
|
line-height: 1.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar {
|
.navbar {
|
||||||
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0);
|
|
||||||
border: 0px solid rgba(0, 0, 0, 0.3);
|
|
||||||
border-left: 0;
|
border-left: 0;
|
||||||
border-right: 0;
|
border-right: 0;
|
||||||
|
padding: 1em;
|
||||||
|
color: #fdf6e3;
|
||||||
}
|
}
|
||||||
.navbar ul {
|
.navbar a {
|
||||||
padding-bottom: 0;
|
color: #fdf6e3;
|
||||||
}
|
}
|
||||||
.navbar li {
|
.navbar li {
|
||||||
margin: 0;
|
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);
|
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
|
* 2. Cards and containers
|
||||||
* All elements that are supposed to contain other stuff
|
* All elements that are supposed to contain other stuff
|
||||||
|
|
@ -139,30 +190,6 @@ header h1 {
|
||||||
padding: 0 0.4em 0;
|
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 */
|
/* 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 {
|
.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;
|
background-color: #268bd2 !important;
|
||||||
|
|
@ -318,38 +345,6 @@ header h1 {
|
||||||
color: #fdf6e3;
|
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 ------------------- */
|
/* ------------------ BUTTONS ------------------- */
|
||||||
.btn {
|
.btn {
|
||||||
border: 0px solid rgba(0, 0, 0, 0.3);
|
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>
|
<body>
|
||||||
<div id="wrapper">
|
<div id="wrapper">
|
||||||
|
|
||||||
<header class="container-fluid" id="page-header">
|
<header id="page-header">
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column col-6">
|
<div class="column col-6">
|
||||||
<h1>Blue Sky</h1>
|
<h1>Blue Sky</h1>
|
||||||
|
|
@ -44,7 +44,7 @@
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<section class="container">
|
<section class="container" id="page-content">
|
||||||
<div class="columns">
|
<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 */
|
/* BUTTONS & BADGES */
|
||||||
|
|
||||||
.btn, a.btn, .badge, .chip, a.chip, a.badge, .label, a.label {
|
.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);}
|
&-diaspora {@include button-color(#313739, $color-button-light);}
|
||||||
&-mastodon {@include button-color(#282c37, $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 ------------------- */
|
@import 'global';
|
||||||
|
|
||||||
@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 'cards';
|
@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 ------------------- */
|
/* ------------------ BUTTONS ------------------- */
|
||||||
|
|
||||||
.btn {
|
.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-blue: #268bd2;
|
||||||
$color-violet: #d33682;
|
$color-violet: #d33682;
|
||||||
$color-purple: #6c71c4;
|
$color-purple: #6c71c4;
|
||||||
|
|
@ -35,3 +40,80 @@ $color-success: $color-green;
|
||||||
background-color: $background-color!important;
|
background-color: $background-color!important;
|
||||||
color: $text-color;
|
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';
|
@import 'palette';
|
||||||
|
|
||||||
/* ------------------ CUSTOM STYLE ------------------- */
|
@import 'definitions';
|
||||||
|
|
||||||
$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 'commons';
|
@import 'commons';
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue