Browse Source

improvement: use bluesky theme

master
Kazhnuz 3 months ago
parent
commit
7a7fa77405
20 changed files with 976 additions and 1155 deletions
  1. BIN
      assets/img/avatar.png
  2. BIN
      assets/img/background.png
  3. BIN
      assets/img/default-preview.png
  4. BIN
      assets/img/logo.png
  5. BIN
      assets/img/wmap.png
  6. +0
    -199
      scss/_blog.scss
  7. +0
    -188
      scss/_buttons.scss
  8. +0
    -272
      scss/_cards.scss
  9. +110
    -102
      scss/_definitions.scss
  10. +15
    -0
      scss/_drawing.scss
  11. +61
    -95
      scss/_font-face.scss
  12. +96
    -76
      scss/_global.scss
  13. +95
    -18
      scss/_palette.scss
  14. +58
    -168
      scss/_typography.scss
  15. +102
    -0
      scss/components/_buttons.scss
  16. +186
    -0
      scss/components/_cards.scss
  17. +79
    -0
      scss/components/_navbar.scss
  18. +135
    -0
      scss/components/_previews.scss
  19. +14
    -19
      scss/style.scss
  20. +25
    -18
      static/example.html

BIN
assets/img/avatar.png View File

Before After
Width: 132  |  Height: 132  |  Size: 1.2KB

BIN
assets/img/background.png View File

Before After
Width: 1068  |  Height: 672  |  Size: 15KB Width: 800  |  Height: 400  |  Size: 4.5KB

BIN
assets/img/default-preview.png View File

Before After
Width: 1365  |  Height: 768  |  Size: 22KB

BIN
assets/img/logo.png View File

Before After
Width: 908  |  Height: 169  |  Size: 99KB

BIN
assets/img/wmap.png View File

Before After
Width: 480  |  Height: 272  |  Size: 27KB

+ 0
- 199
scss/_blog.scss View File

@@ -1,199 +0,0 @@
/*
* 6 - Blog Elements ( _blog.scss )
*
* All elements that are used for a blog (article previews, etc).
* "Commons" elements will be in other parts
*/

/* 1.1 - Comment area */

.comment {
margin-bottom: 1.333em;
}

/* 2.1 - Previews */

.preview-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-content: flex-start;
margin-bottom:1em;
padding: 0;
width:100%;
.preview {
width: 48%;
height:220px;
}
}

.preview {
margin:auto;
margin-bottom: 1em;
&-link {
display:block;
width:100%;
height:100%;
padding:0;
margin:0;
text-decoration:none!important;
&:hover .preview-item {
background-size: 133% auto;
background-position: center center;
}
}
&-item {
height: 100%;
width: 100%;
background-size: 100% auto;
background-position: center center;
transition: background-size .5s;
}
}

.preview-overlay {
height: 100%;
width: 100%;
opacity: 1;
padding: 0;
transition: background .5s;
color: #FFF;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
color: white!important;
background: linear-gradient(to top, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0) 60%);
&:hover {
opacity: 1;
h1, h2 {
opacity: 1;
color: #FFF;
}
.badge {
background-color: lighten($color-category, 15%);
}
}
.badge {
background-color: $color-category;
}
h1, h2 {
max-width:100%;
margin:auto;
margin-bottom:0px;
text-align:left;
display:block;
font-size:2em;
transition: opacity .5s;
text-shadow: 1px 1px 0px rgba(0,0,0,1);
opacity: 0.6;
padding: 0.25em;
color: #FFF;
}
}

.preview-item {
.preview-content {
height: 100%;
width: 100%;
background-size: 100% auto;
background-position: center center;
transition: background-size .5s;
}
&:hover .preview-content {
background-size: 133% auto;
background-position: center center;
}
}

.preview-categories {
padding: 0.5em;
.badge {
font-size: 1em;
text-shadow: none;
}
}

/* 2.1.1 - Article list */

.list-article {
display: flex;
flex-direction: row;
&-thumbnail {
display: block;
padding-top: 1.5em;
max-width: 200px;
img {
max-width: 100%;
height: auto;
}
}
&-main {
width: 100%;
padding-left:1em;
}
&-title {
font-family: Teko;
font-weight: 600;
margin-bottom: 0em;
a {
color: #444;
}
}
&-metadata {
display:flex;
justify-content: space-between;
}
&-content {
font-style: italic;
}
}

.navigation {
.pagination {
padding-top: 2em;
display:flex;
flex-direction: row;
justify-content: flex-end;
}
}

/* 3. Article mixts */

.article-taxonomies {
display:flex;
flex-direction: row;
justify-content: space-between;
.badge:not(:last-child) {
margin-right:0.5em;
}
}

.wp-caption {
img {
max-width: 100%;
height: auto;
}
&-text {
font-size: 0.9em;
font-style: italic;
}
&.aligncenter {
margin: auto;
}
}

+ 0
- 188
scss/_buttons.scss View File

@@ -1,188 +0,0 @@
/*
* 5 - Buttons ( _buttons.scss )
*
* This part of the (s)css handle the style of buttons-like and badges.
*
*/

@mixin button-lighten($background-color, $text-color) {
background-color: lighten($background-color, 15%);
color:$text-color;
}

@mixin button-color($background-color, $text-color) {
background-color: $background-color;
color: $text-color;
&, &:not(.disabled):not(:disabled) {
&:hover, &:active, &:focus {
@include button-lighten($background-color, $text-color);
}
}
}

.btn {
@include borders();
@include border-radius();
box-shadow: $inset-shadow;
text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
@include button-color($color-light, #111);
font-weight: 600;
&:hover {
box-shadow: $inset-shadow;
@include borders();
text-decoration: none;
}
&:active {
box-shadow: $inset-shadow-inverted;
@include borders();
text-decoration: none;
}
}

.btn {
&-blue { @include button-color($color-blue, #FFF); }
&-violet { @include button-color($color-violet, #FFF); }
&-purple { @include button-color($color-purple, #FFF); }
&-red { @include button-color($color-red, #FFF); }
&-orange { @include button-color($color-orange, #FFF); }
&-green { @include button-color($color-green, #FFF); }
&-skyblue { @include button-color($color-skyblue, #FFF); }
&-dark { @include button-color($color-dark, #FFF); }
&-light { @include button-color($color-light, #111); }
&-turquoise { @include button-color($color-turquoise, #FFF); }
&-yellow { @include button-color($color-yellow, #FFF); }
&-brown { @include button-color($color-brown, #FFF); }
&-grey { @include button-color($color-grey, #FFF); }
&-primary { @include button-color($color-primary, #FFF); }
&-secondary { @include button-color($color-secondary, #FFF); }
&-warning { @include button-color($color-warning, #FFF); }
&-danger { @include button-color($color-danger, #FFF); }
&-info { @include button-color($color-info, #FFF); }
&-success { @include button-color($color-success, #FFF); }
}

.btn-group {
}

.btn-group .btn {
box-shadow: $inset-shadow;
@include border-radius();
&:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
&:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}

.btn-group .btn:hover {
box-shadow: $inset-shadow;
}

.btn-group .btn:active, .btn:not(:disabled):not(.disabled):active, .btn:not(:disabled):not(.disabled).active,
.show > .btn.dropdown-toggle {
box-shadow: $inset-shadow-inverted!important;
@include borders();
}

.btn:focus, .btn-primary:focus, .btn-secondary:focus, .btn-danger:focus, .btn-warning:focus, .btn-success:focus, .btn-info:focus, .btn-dark:focus, .btn-light:focus {
box-shadow: $narrow-shadow, $inset-shadow, 0px 0px 0px 2px rgba(0, 0, 0, 0.3);
outline: none;
}

.page-numbers {
@extend .btn;
@extend .btn-grey;
padding: 0.5em 1em 0.5em 1em;
margin-top: 0.1em;
color: #FFF;
&.dots {
border: none;
background-color: transparent!important;
box-shadow: none;
color: #444;
text-shadow: none;
}
}

/* 5.1 - Réseaux sociaux */

.share-buttons {
margin:15px;
}

.reagir {
text-align:right;
.btn {
margin-right:0.5em;
}
}

.btn {
&-facebook {@include button-color(#3B5998, #FFF);}
&-twitter {@include button-color(#55ACEE, #FFF);}
&-googleplus {@include button-color(#d34836, #FFF);}
&-diaspora {@include button-color(#313739, #FFF);}
&-mastodon {@include button-color(#282c37, #FFF);}
&-whatsapp {@include button-color(#43d854, #FFF);}
&-linkedin {@include button-color(#0074A1, #FFF);}
&-buffer {@include button-color(#444, #FFF);}
&-pinterest {@include button-color(#bd081c, #FFF);}
}

/* 5.2 - Badges */

@mixin badge-color($background-color, $text-color) {
background-color: $background-color;
color: $text-color;
&, &:not(.disabled):not(:disabled) {
&:hover, &:active, &:focus, a:hover > &, a:active > &, a:focus > & {
@include button-lighten($background-color, $text-color);
}
}
}

.badge {
@include borders();
@include border-radius();
text-decoration: none!important;
&-pill {
border-radius: 10rem;
}
}

.badge {
&-blue { @include badge-color($color-blue, #FFF); }
&-violet { @include badge-color($color-violet, #FFF); }
&-purple { @include badge-color($color-purple, #FFF); }
&-red { @include badge-color($color-red, #FFF); }
&-orange { @include badge-color($color-orange, #FFF); }
&-green { @include badge-color($color-green, #FFF); }
&-skyblue { @include badge-color($color-skyblue, #FFF); }
&-dark { @include badge-color($color-dark, #FFF); }
&-light { @include badge-color($color-light, #111); }
&-turquoise { @include badge-color($color-turquoise, #FFF); }
&-yellow { @include badge-color($color-yellow, #FFF); }
&-brown { @include badge-color($color-brown, #FFF); }
&-grey { @include badge-color($color-grey, #FFF); }
&-primary { @include badge-color($color-primary, #FFF); }
&-secondary { @include badge-color($color-secondary, #FFF); }
&-warning { @include badge-color($color-warning, #FFF); }
&-danger { @include badge-color($color-danger, #FFF); }
&-info { @include badge-color($color-info, #FFF); }
&-success { @include badge-color($color-success, #FFF); }
&-category { @include badge-color($color-category, #FFF); }
&-tag { @include badge-color($color-tag, #FFF); }
}


+ 0
- 272
scss/_cards.scss View File

@@ -1,272 +0,0 @@
/*
* 4 - Cards( _cards.scss )
*
* This part of the (s)css handle the style of cards-like elements,
* elements that are supposed to handle contents inside a box.
*
* Elements like alerts, breadcrumb… are considered as "card-like".
*
*/

@mixin card-color($background-color, $text-color) {
& > .card-header { background-color: $background-color; color:$text-color; }
border-color: $background-color;
}

.card {
@include border-radius();
box-shadow: $large-shadow;
border-style: solid;
border-width: 0px;
border-left-width: 3px;
margin-bottom:1.2em;
border-color: $color-primary;
background-color: rgba(0,0,0,0.05);
}

.card {
&-blue { @include card-color($color-blue, #FFF); }
&-violet { @include card-color($color-violet, #FFF); }
&-purple { @include card-color($color-purple, #FFF); }
&-red { @include card-color($color-red, #FFF); }
&-orange { @include card-color($color-orange, #FFF); }
&-green { @include card-color($color-green, #FFF); }
&-skyblue { @include card-color($color-skyblue, #FFF); }
&-dark { @include card-color($color-dark, #FFF); }
&-light { @include card-color($color-light, #111); }
&-turquoise { @include card-color($color-turquoise, #FFF); }
&-yellow { @include card-color($color-yellow, #FFF); }
&-brown { @include card-color($color-brown, #FFF); }
&-grey { @include card-color($color-grey, #FFF); }
&-primary { @include card-color($color-primary, #FFF); }
&-secondary { @include card-color($color-secondary, #FFF); }
&-warning { @include card-color($color-warning, #FFF); }
&-danger { @include card-color($color-danger, #FFF); }
&-info { @include card-color($color-info, #FFF); }
&-success { @include card-color($color-success, #FFF); }
}

.card-shadow {
box-shadow: $large-shadow, $inset-shadow;
}

.card-text {
height: 130px;
overflow: hidden;
}

.card-title {
font-size:1.1em;
color: white;
border-color: darken($color-primary, 33%);
text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
font-weight:600;
background-color:$color-primary;
h1, h2, h3, h4, h5, h6, h7, h8, h9, h10 {
font-size:1em;
text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
padding:0px;
margin:0.3em;
color:#FFF;
font-weight:600;
line-height:1.5em;
i {
font-size:0.9em;
margin-right:0.66em;
margin-left:0.33em;
}
}
}



/* 4.1 - Header and titles */

.card-header {
@include borders();
font-size:1.1em;
box-shadow: $inset-relief;
text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
font-weight:600;
border-radius: 0;
&:first-child {
@include border-radius();
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
&:last-child {
@include border-radius();
border-top-left-radius: 0;
border-top-right-radius: 0;
}
h1, h2, h3, h4, h5, h6, h7, h8, h9, h10 {
font-family: 'OpenSans';
font-size:1em;
text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
padding:0px;
margin:0px;
color:#FFF;
font-weight:600;
line-height:1.5em;
}
}

/* 4.2 - Cards meta */

.card-meta {
@include border-radius();
padding:1em;
box-shadow: $large-shadow, $inset-shadow;
border: 0;
background-color:#eeeeec;
margin-bottom:1.2em;
@include li-no-margin();
&.media {
-ms-flex-align: center !important;
align-items: center !important;
}
.media-left .media-object {
height: 64px;
width: 64px;
border-radius: 100%;
margin-right:1em;
}
img.avatar {
border-radius: 100%;
margin-right:1em;
}
author {
display:block;
font-weight:600;
}

time {
display:block;
font-style:italic;
}
@include li-no-margin();
}

/* 4.3 - Cards list-groups */

section.widget {
ul {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
padding-left: 0;
margin-bottom: 0;
li {
list-style: none;
padding: 0;
margin: 0;
&.recentcomments {
position: relative;
display: block;
padding: .75rem 1.25rem;
margin-bottom: -1px;
background-color: #fff;
border: 0px solid rgba(0,0,0,.125);
list-style: none;
}
a {
position: relative;
display: block;
padding: .75rem 1.25rem;
margin-bottom: -1px;
background-color: #fff;
border: 0px solid rgba(0,0,0,.125);
list-style: none;
&:hover {
background-color: #eee;
text-decoration: none;
}
}
}
}
}

.list-group-item {
border: none;
background-color:transparent;
}

a.list-group-item:hover {
border-style:none;
border-width:0px;
border-radius:0px;
background-color:rgba(0,0,0,0.1);
}

/* 4.4 - Cards list-groups */

@mixin alert-color($background-color) {
background-color: lighten($background-color, 35%);
color: darken($background-color, 80%);
}

.alert {
@include borders();
@include border-radius();
color:rgba(0, 0, 0, 0.7);
box-shadow: $large-shadow;
&-flex {
display: flex;
flex-direction: row;
justify-content: space-between;
& > p {
padding-bottom: 0;
}
}
}

.alert {
&-blue { @include alert-color($color-blue); }
&-violet { @include alert-color($color-violet); }
&-purple { @include alert-color($color-purple); }
&-red { @include alert-color($color-red); }
&-orange { @include alert-color($color-orange); }
&-green { @include alert-color($color-green); }
&-skyblue { @include alert-color($color-skyblue); }
&-dark { @include alert-color($color-dark); }
&-light { @include alert-color($color-light); }
&-turquoise { @include alert-color($color-turquoise); }
&-yellow { @include alert-color($color-yellow); }
&-brown { @include alert-color($color-brown); }
&-grey { @include alert-color($color-grey); }
&-primary { @include alert-color($color-primary); }
&-secondary { @include alert-color($color-secondary); }
&-warning { @include alert-color($color-warning); }
&-danger { @include alert-color($color-danger); }
&-info { @include alert-color($color-info); }
&-success { @include alert-color($color-success); }
}

.alert a, .alert-link {
color:rgba(0, 0, 0, 0.7);
font-weight:bold;
}

/* 4.5 - Breadcrumbs */

.breadcrumb {
@include border-radius();
box-shadow: $large-shadow, $inset-shadow;
border: 0;
background-color:#eeeeec;
margin-bottom:1.2em;
@include li-no-margin();
}

+ 110
- 102
scss/_definitions.scss View File

@@ -1,14 +1,17 @@
/* --- 01. DEFINITIONS --- */

/*
* 1 - Definitions
*
* This part of the (s)css contain every definitions, mixins,
* and differents unilities that can be used everywhere in the code.
* Les définitions globales de la stylesheet.
* Elle permette de rapidement modifier le style globale de la fiche en modifiant les éléments centraux
* D'autres définitions importantes sont visibles dans les autres parties de la fiche.
*
*/
* Pour customiser les couleurs, voyez _palette.scss
*/

// A modifier pour customiser le style facilement :

$large-shadow: 0px 3px 5px 2px rgba(0, 0, 0, 0.1);
$narrow-shadow: 0px 2px 6px rgba(0, 0, 0, 0);
$large-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
$narrow-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
$inset-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.2);
$inset-shadow-inverted: inset 0px 2px 0px rgba(0, 0, 0, 0.2);
$inset-relief: inset 0px 2px 0px rgba(255, 255, 255, 0.1);
@@ -16,122 +19,127 @@ $inset-relief: inset 0px 2px 0px rgba(255, 255, 255, 0.1);
$border-radius: 3px;
$border-size: 1px;

$color-primary: $color-skyblue;
$color-secondary: $color-dark;
$color-link: $color-blue;
$color-selection: $color-blue;
$color-mark: $color-yellow;
$baseline: 1.5;
$baselinerem: $baseline * 1rem;
$baseheight: 18px;

// MIXINS RESPONSIVES

// Small tablets and large smartphones (landscape view)
$screen-sm-min: 576px;

// Small tablets (portrait view)
$screen-md-min: 768px;

// Tablets and small desktops
$screen-lg-min: 992px;

$color-category: $color-blue;
$color-tag: $color-grey;
// Large tablets and desktops
$screen-xl-min: 1200px;

$color-font: #444;
// Very large desktops
$screen-xxl-min: 1600px;


// Small devices
@mixin sm {
@media (min-width: #{$screen-sm-min}) {
@content;
}
}

// Medium devices
@mixin md {
@media (min-width: #{$screen-md-min}) {
@content;
}
}

// Large devices
@mixin lg {
@media (min-width: #{$screen-lg-min}) {
@content;
}
}

// Extra large devices
@mixin xl {
@media (min-width: #{$screen-xl-min}) {
@content;
}
}

// Extra large desktops
@mixin xxl {
@media (min-width: #{$screen-xxl-min}) {
@content;
}
}

// Custom devices
@mixin rwd($screen) {
@media (min-width: $screen+'px' ) {
@content;
}
}

// MIXINS AUTRES

@mixin borders() {
border: $border-size solid rgba(0, 0, 0, 0.3)
border: $border-size solid rgba(0, 0, 0, 0.3);
}

@mixin border-radius() {
border-radius: $border-radius $border-radius $border-radius $border-radius;
}

@mixin border-radius-top($value) {
border-top-left-radius: $value;
border-top-right-radius: $value;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}

@mixin border-radius-bottom($value) {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: $value;
border-bottom-right-radius: $value;
}

@mixin border-radius-left($value) {
border-top-left-radius: $value;
border-top-right-radius: 0;
border-bottom-left-radius: $value;
border-bottom-right-radius: 0;
}

@mixin border-radius-right($value) {
border-top-left-radius: 0;
border-top-right-radius: $value;
border-bottom-left-radius: 0;
border-bottom-right-radius: $value;
}

/* 01.1 - Commons elements */

@mixin li-no-margin() {
li {
margin: 0;
}
}

/* 1.1 - Utils */

.no-pills {
list-style:none;
}

.align {
&-center, &center {text-align: center;}
&-left, &left {text-align: left;}
&-right, &right {text-align: right;}
}

/* 1.2 - Background colors */

@mixin background-color($background-color, $text-color) {
background-color: $background-color!important;
color: $text-color;
}

.bg {
&-blue { @include background-color($color-blue, #FFF); }
&-violet { @include background-color($color-violet, #FFF); }
&-purple { @include background-color($color-purple, #FFF); }
&-red { @include background-color($color-red, #FFF); }
&-orange { @include background-color($color-orange, #FFF); }
&-green { @include background-color($color-green, #FFF); }
&-skyblue { @include background-color($color-skyblue, #FFF); }
&-dark { @include background-color($color-dark, #FFF); }
&-light { @include background-color($color-light, #111); }
&-turquoise { @include background-color($color-turquoise, #FFF); }
&-yellow { @include background-color($color-yellow, #FFF); }
&-brown { @include background-color($color-brown, #FFF); }
&-grey { @include background-color($color-grey, #FFF); }
&-primary { @include background-color($color-primary, #FFF); }
&-secondary { @include background-color($color-secondary, #FFF); }
&-warning { @include background-color($color-warning, #FFF); }
&-danger { @include background-color($color-danger, #FFF); }
&-info { @include background-color($color-info, #FFF); }
&-success { @include background-color($color-success, #FFF); }
}

/* 1.3 - Screen Reader */

@media screen {
.screen-reader-text {
display: none;
}
&-center {text-align: center;}
&-left {text-align: left;}
&-right {text-align: right;}
}

/* 2. Forms elements */

select {
@include borders();
@include border-radius();
display: block;
width: 100%;
height: calc(2.25rem + 2px);
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5em;
color: $color-font;
background-color: #fff;
background-clip: padding-box;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
margin-top: 0.75rem;
}

.input-group {
border-color: $color-dark;
&-prepend {
background-color: $color-grey;
@include borders();
@include border-radius();
}
&-text {
background-color: transparent;
color: #FFF;
border: none;
text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
}
.form-control {
@include borders();
@include border-radius();
box-shadow: inset 0px 2px 0px rgba(0, 0, 0, 0.1);
&:focus {
box-shadow: inset 0px 2px 0px rgba(0, 0, 0, 0.1), inset 0px 0px 0px 2px lighten($color-primary, 20%) ;
}
}
h1, h2, h3, h4, h5, h6, h7, h8, h9, h10 {
color:white;
text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
}

+ 15
- 0
scss/_drawing.scss View File

@@ -0,0 +1,15 @@
/* --- 1x. DESSINS DES COMPOSANTS --- */

/*
* La liste des différents réutilisable de la fiche.
* Ne suit qu'une liste d'élément à réutiliser, ce fichier ne doit être modifié
* que par l'ajout d'un nouveau fichier dans components/
*/

@import 'components/cards';

@import 'components/buttons';

@import 'components/previews';

@import 'components/navbar';

+ 61
- 95
scss/_font-face.scss View File

@@ -1,155 +1,121 @@
/* 2.1 - Font Face */

/* 2.1.1 - OpenSans */
/* ------------------ FONT LOADING ------------------- */

@font-face {
font-family: 'OpenSans';
src: url('fonts/OpenSans-Light-webfont.eot');
src: url('fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/OpenSans-Light-webfont.woff2') format('woff2'),
url('fonts/OpenSans-Light-webfont.woff') format('woff'),
url('fonts/OpenSans-Light-webfont.ttf') format('truetype'),
url('fonts/OpenSans-Light-webfont.svg#open_sansbold') format('svg');
src: url('../fonts/OpenSans-Light-webfont.eot');
src: url('../fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/OpenSans-Light-webfont.woff2') format('woff2'),
url('../fonts/OpenSans-Light-webfont.woff') format('woff'),
url('../fonts/OpenSans-Light-webfont.ttf') format('truetype'),
url('../fonts/OpenSans-Light-webfont.svg#open_sansbold') format('svg');
font-weight: 300;
font-style: normal;
}

@font-face {
font-family: 'OpenSans';
src: url('fonts/OpenSans-LightItalic-webfont.eot');
src: url('fonts/OpenSans-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/OpenSans-LightItalic-webfont.woff2') format('woff2'),
url('fonts/OpenSans-LightItalic-webfont.woff') format('woff'),
url('fonts/OpenSans-LightItalic-webfont.ttf') format('truetype'),
url('fonts/OpenSans-LightItalic-webfont.svg#open_sansbold') format('svg');
src: url('../fonts/OpenSans-LightItalic-webfont.eot');
src: url('../fonts/OpenSans-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/OpenSans-LightItalic-webfont.woff2') format('woff2'),
url('../fonts/OpenSans-LightItalic-webfont.woff') format('woff'),
url('../fonts/OpenSans-LightItalic-webfont.ttf') format('truetype'),
url('../fonts/OpenSans-LightItalic-webfont.svg#open_sansbold') format('svg');
font-weight: 300;
font-style: italic;
}

@font-face {
font-family: 'OpenSans';
src: url('fonts/OpenSans-Regular-webfont.eot');
src: url('fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/OpenSans-Regular-webfont.woff2') format('woff2'),
url('fonts/OpenSans-Regular-webfont.woff') format('woff'),
url('fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
url('fonts/OpenSans-Regular-webfont.svg#open_sansbold') format('svg');
src: url('../fonts/OpenSans-Regular-webfont.eot');
src: url('../fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/OpenSans-Regular-webfont.woff2') format('woff2'),
url('../fonts/OpenSans-Regular-webfont.woff') format('woff'),
url('../fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
url('../fonts/OpenSans-Regular-webfont.svg#open_sansbold') format('svg');
font-weight: 400;
font-style: normal;
}

@font-face {
font-family: 'OpenSans';
src: url('fonts/OpenSans-Italic-webfont.eot');
src: url('fonts/OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/OpenSans-Italic-webfont.woff2') format('woff2'),
url('fonts/OpenSans-Italic-webfont.woff') format('woff'),
url('fonts/OpenSans-Italic-webfont.ttf') format('truetype'),
url('fonts/OpenSans-Italic-webfont.svg#open_sansbold') format('svg');
src: url('../fonts/OpenSans-Italic-webfont.eot');
src: url('../fonts/OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/OpenSans-Italic-webfont.woff2') format('woff2'),
url('../fonts/OpenSans-Italic-webfont.woff') format('woff'),
url('../fonts/OpenSans-Italic-webfont.ttf') format('truetype'),
url('../fonts/OpenSans-Italic-webfont.svg#open_sansbold') format('svg');
font-weight: 400;
font-style: italic;
}

@font-face {
font-family: 'OpenSans';
src: url('fonts/OpenSans-Semibold-webfont.eot');
src: url('fonts/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/OpenSans-Semibold-webfont.woff2') format('woff2'),
url('fonts/OpenSans-Semibold-webfont.woff') format('woff'),
url('fonts/OpenSans-Semibold-webfont.ttf') format('truetype'),
url('fonts/OpenSans-Semibold-webfont.svg#open_sansbold') format('svg');
src: url('../fonts/OpenSans-Semibold-webfont.eot');
src: url('../fonts/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/OpenSans-Semibold-webfont.woff2') format('woff2'),
url('../fonts/OpenSans-Semibold-webfont.woff') format('woff'),
url('../fonts/OpenSans-Semibold-webfont.ttf') format('truetype'),
url('../fonts/OpenSans-Semibold-webfont.svg#open_sansbold') format('svg');
font-weight: 600;
font-style: normal;
}

@font-face {
font-family: 'OpenSans';
src: url('fonts/OpenSans-SemiboldItalic-webfont.eot');
src: url('fonts/OpenSans-SemiboldItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/OpenSans-SemiboldItalic-webfont.woff2') format('woff2'),
url('fonts/OpenSans-SemiboldItalic-webfont.woff') format('woff'),
url('fonts/OpenSans-SemiboldItalic-webfont.ttf') format('truetype'),
url('fonts/OpenSans-SemiboldItalic-webfont.svg#open_sansbold') format('svg');
src: url('../fonts/OpenSans-SemiboldItalic-webfont.eot');
src: url('../fonts/OpenSans-SemiboldItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/OpenSans-SemiboldItalic-webfont.woff2') format('woff2'),
url('../fonts/OpenSans-SemiboldItalic-webfont.woff') format('woff'),
url('../fonts/OpenSans-SemiboldItalic-webfont.ttf') format('truetype'),
url('../fonts/OpenSans-SemiboldItalic-webfont.svg#open_sansbold') format('svg');
font-weight: 600;
font-style: italic;
}

@font-face {
font-family: 'OpenSans';
src: url('fonts/OpenSans-Bold-webfont.eot');
src: url('fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/OpenSans-Bold-webfont.woff2') format('woff2'),
url('fonts/OpenSans-Bold-webfont.woff') format('woff'),
url('fonts/OpenSans-Bold-webfont.ttf') format('truetype'),
url('fonts/OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
src: url('../fonts/OpenSans-Bold-webfont.eot');
src: url('../fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/OpenSans-Bold-webfont.woff2') format('woff2'),
url('../fonts/OpenSans-Bold-webfont.woff') format('woff'),
url('../fonts/OpenSans-Bold-webfont.ttf') format('truetype'),
url('../fonts/OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
font-weight: 700;
font-style: normal;
}

@font-face {
font-family: 'OpenSans';
src: url('fonts/OpenSans-BoldItalic-webfont.eot');
src: url('fonts/OpenSans-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/OpenSans-BoldItalic-webfont.woff2') format('woff2'),
url('fonts/OpenSans-BoldItalic-webfont.woff') format('woff'),
url('fonts/OpenSans-BoldItalic-webfont.ttf') format('truetype'),
url('fonts/OpenSans-BoldItalic-webfont.svg#open_sansbold') format('svg');
src: url('../fonts/OpenSans-BoldItalic-webfont.eot');
src: url('../fonts/OpenSans-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/OpenSans-BoldItalic-webfont.woff2') format('woff2'),
url('../fonts/OpenSans-BoldItalic-webfont.woff') format('woff'),
url('../fonts/OpenSans-BoldItalic-webfont.ttf') format('truetype'),
url('../fonts/OpenSans-BoldItalic-webfont.svg#open_sansbold') format('svg');
font-weight: 700;
font-style: italic;
}

@font-face {
font-family: 'OpenSans';
src: url('fonts/OpenSans-ExtraBold-webfont.eot');
src: url('fonts/OpenSans-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/OpenSans-ExtraBold-webfont.woff2') format('woff2'),
url('fonts/OpenSans-ExtraBold-webfont.woff') format('woff'),
url('fonts/OpenSans-ExtraBold-webfont.ttf') format('truetype'),
url('fonts/OpenSans-ExtraBold-webfont.svg#open_sansbold') format('svg');
src: url('../fonts/OpenSans-ExtraBold-webfont.eot');
src: url('../fonts/OpenSans-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/OpenSans-ExtraBold-webfont.woff2') format('woff2'),
url('../fonts/OpenSans-ExtraBold-webfont.woff') format('woff'),
url('../fonts/OpenSans-ExtraBold-webfont.ttf') format('truetype'),
url('../fonts/OpenSans-ExtraBold-webfont.svg#open_sansbold') format('svg');
font-weight: 800;
font-style: normal;
}

@font-face {
font-family: 'OpenSans';
src: url('fonts/OpenSans-ExtraBoldItalic-webfont.eot');
src: url('fonts/OpenSans-ExtraBoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/OpenSans-ExtraBoldItalic-webfont.woff2') format('woff2'),
url('fonts/OpenSans-ExtraBoldItalic-webfont.woff') format('woff'),
url('fonts/OpenSans-ExtraBoldItalic-webfont.ttf') format('truetype'),
url('fonts/OpenSans-ExtraBoldItalic-webfont.svg#open_sansbold') format('svg');
src: url('../fonts/OpenSans-ExtraBoldItalic-webfont.eot');
src: url('../fonts/OpenSans-ExtraBoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/OpenSans-ExtraBoldItalic-webfont.woff2') format('woff2'),
url('../fonts/OpenSans-ExtraBoldItalic-webfont.woff') format('woff'),
url('../fonts/OpenSans-ExtraBoldItalic-webfont.ttf') format('truetype'),
url('../fonts/OpenSans-ExtraBoldItalic-webfont.svg#open_sansbold') format('svg');
font-weight: 800;
font-style: italic;
}

/* 2.1.2 - Teko */

@font-face {
font-family: 'Teko';
src: url('fonts/teko-light-webfont.woff');
font-weight: 300;
}

@font-face {
font-family: 'Teko';
src: url('fonts/teko-regular-webfont.woff');
font-weight: 400;
}

@font-face {
font-family: 'Teko';
src: url('fonts/teko-medium-webfont.woff');
font-weight: 500;
}

@font-face {
font-family: 'Teko';
src: url('fonts/teko-semibold-webfont.woff');
font-weight: 600;
}

@font-face {
font-family: 'Teko';
src: url('fonts/teko-bold-webfont.woff');
font-weight: 700;
}

+ 96
- 76
scss/_global.scss View File

@@ -1,100 +1,120 @@
/* --- 02. GLOBAL ELEMENTS --- */

/*
* 3 - Global elements ( _global.scss )
*
* This part of the (s)css handle the style of "global" elements
* like the wrapper, the navbars, the header.
* Le style des "grandes parties".
* Cela permet de définir les différents éléments qui composeront la page totale
*
*/
*/

// A modifier pour customiser le style facilement :

$background-color: get-color("skyblue");
$sidebar-size:300px;
$max-size: 1600px;
$wrapper-padding: $baselinerem * 3;

// Mixins

@media (max-width: 767.98px) {
body {
background: none;
padding: 0;
@mixin container {
max-width: $max-size;
margin: auto;


padding-left:$wrapper-padding/2;
padding-right:$wrapper-padding/2;

@include rwd(1300px) {
padding-left:$wrapper-padding;
padding-right:$wrapper-padding;
}
}

#wrapper {
background-color: #FFF
@mixin row() {
margin: auto;
}

/* 3.1 - Header */

header {
background: #EEE url('img/background.png');
margin-bottom:30px;
h1 {
border-style:none !important;
font-weight:700;
font-size:1em;
line-height:1em;
padding-bottom:0px;
padding:2.33333em;
margin:auto;
text-align:center;
img {
max-width: 100%;
height: auto;
}
@mixin row-grid() {
@include row();

@include xl {
display: grid;
grid-template-rows: auto;
row-gap: $baselinerem;
column-gap: $baselinerem * 2;
}

}

.navbar {
@include borders();
border-left: 0;
border-right: 0;
ul {
padding-bottom:0;
}
@include li-no-margin();

.form-control {
opacity: 0.3;
background-color: rgba(0, 0, 0, 0.3);
color: white;
border: none;
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, background-color, opacity .15s ease-in-out, background-color .15s ease-in-out, color .15s ease-in-out;
@include border-radius();
&::placeholder {
color: #FFF;
transition: color .15s ease-in-out;
}
&:hover {
opacity: 0.7;
background-color: #FFF;
color: #444;
&::placeholder {
color: #444;
}
}
&:focus, &:hover:focus {
opacity: 1;
background-color: #FFF;
color: #444;
box-shadow: $inset-shadow-inverted;
&::placeholder {
color: #444;
}
}
/* 02.0 - Global page layout */

body {
display: flex;
min-height: 100vh;
flex-direction: column;
}

// the type of container we use for our theme system
.container-semifluid {
@include container();
}


/* 02.1 - Wrapper et page totale */

#wrapper {
flex: 1 0 auto;
background: $background-color url('img/background.png') center bottom repeat-x;
}

#global-area {
@include row-grid();
&.index-layout {
grid-template-columns: auto $sidebar-size;
grid-template-areas: "main sidebar";
}
}

.dropdown-menu {
box-shadow: $narrow-shadow, $inset-shadow;
/* 02.1 - Header */

#page-header {
@include row();
}

header h1 {
border-style:none !important;
color:#FFF;
font-weight:700;
font-size:5.4rem;
font-style:oblique;
padding-bottom:0px;
margin:auto;
text-align:center;
line-height: 7.5rem;
margin-bottom: 1.5rem;
}

/* 3.2 - Footer */
/* 02.2 - Main Area */

footer {
margin-top:40px;
#page-main {
max-width:100%;
}

/* 3.2.1 - Social Network Buttons */
/* 02.3 - Footer */

#page-footer {
margin-top: $baselinerem;
padding-bottom: $baselinerem;
@include row();
}

/* social media */

ul.social {
font-size:1.5em;
padding-bottom:1em;
margin:auto;
text-align:center;
font-size:1.5em;
padding:0;
margin:auto;
margin-bottom: $baselinerem;
text-align:center;
li {
margin:0;
list-style: none;


+ 95
- 18
scss/_palette.scss View File

@@ -1,18 +1,95 @@
$color-blue: #4e63c9;
$color-violet: #ce4dcd;
$color-purple: #7951c0;
$color-red: #e33d22;
$color-orange: #eb790a;
$color-green: #75b82d;
$color-skyblue: #42a0f3;
$color-dark: #2D2D2D;
$color-light: #eeeeec;
$color-turquoise: #46bd9e;
$color-yellow: #f6d32d;
$color-brown: #986a44;
$color-grey: #77767b;

$color-warning: $color-orange;
$color-danger: $color-red;
$color-info: $color-skyblue;
$color-success: $color-green;
@use "sass:map";

// BASE PALETTE

$palette: ("blue":#4e63c9, "violet":#ce4dcd, "purple":#7951c0, "red":#e33d22, "orange":#eb790a, "green":#75b82d, "skyblue":#42a0f3, "dark": #2D2D2D, "light":#eeeeec, "turquoise": #46bd9e, "yellow": #f6d32d, "brown":#986a44, "grey":#77767b);

$semantics: ("primary":"purple", "secondary":"blue", "warning":"orange", "danger":"red", "info":"skyblue", "success":"green");

$whiteness_value: 0.8;

// FUNCTIONS TO GET MORE EASILY COLORS

@function get-color($name) {
@if map-has-key($semantics, $name) {
@return map-get($palette, map-get($semantics, $name));
} @else {
@return map-get($palette, $name);
}
}

@function list-colors() {
$newmap: map-merge($palette, $semantics);
@return $newmap;
}

@function luminance($color) {
$c_red: red($color);
$c_grn: green($color);
$c_blu: blue($color);

$luminance: $c_red*0.299 + $c_grn*0.587 + $c_blu*0.114;

@return $luminance
}

@function getTextColorFromBackground($background-color, $light-color, $dark-color) {
@if (luminance($background-color ) < 255 * $whiteness_value) {
@return $light-color;
} @else {
@return $dark-color;
}
}

$color-primary: get-color("primary");
$color-secondary: get-color("secondary");
$color-warning: get-color("warning");
$color-danger: get-color("danger");
$color-info: get-color("info");
$color-success: get-color("success");

$color-link: get-color("blue");
$color-selection: get-color("blue");
$color-mark: get-color("yellow");

@mixin text-color($text-color) {
color: $text-color;
}

@mixin background-color($background-color, $light-color, $dark-color) {
background-color: $background-color!important;
color: getTextColorFromBackground($background-color, $light-color, $dark-color);
}

.text {
@each $name, $color in list-colors() {
&-#{$name} { @include text-color(get-color($name)); }
}
}

.bg {
@each $name, $color in list-colors() {
&-#{$name} { @include background-color(get-color($name), #FFF, #000); }
}
}

// Direct uses of colors

a, a:hover, a:active {
color: $color-link;
}

::selection {
@include background-color($color-selection, #FFF, #000);
}
::-moz-selection {
@include background-color($color-selection, #FFF, #000);
}

mark {
background-color: lighten($color-mark, 30%)
}

blockquote, pre {
border-color: $color-primary;
}

+ 58
- 168
scss/_typography.scss View File

@@ -1,27 +1,22 @@
/*
* 2 - Typography ( _typography.scss )
*
* This part of the (s)css handle everything related to the typography
* like paragraphs, blockquote, etc.
*
*/

@import 'font-face';

/* 2.2 - Global Typography */
/* ------------------ GLOBAL STYLE ------------------- */

@mixin paragraph() {
padding:0;
padding-bottom:1.5em;
margin: 0;
margin:0;
margin-bottom: $baseline * 1rem;
}

body {
html {
font-family: OpenSans, sans-serif;
text-align: left;
font-size: 4mm;
line-height: 1.5em;
color: $color-font;
font-size: $baseheight;
}

body {
line-height: $baseline * 1rem;
color: #444;
font-weight: 400;
}

@@ -38,164 +33,92 @@ em {
}

a {
color: $color-link;
color:#2484c1;
text-decoration:none;
&:hover, &:active {
color: $color-link;
}
}

p {
@include paragraph();
&:last-child {
padding-bottom:0;
margin-bottom:0;
}
}

ul {
@include paragraph();
ul {
padding-bottom:0;
margin-bottom:0;
}
li {
margin-left:1.5em;
margin-left: $baseline * 1rem;
}
}

ol {
@include paragraph();
ol {
padding-bottom:0;
margin-bottom:0;
}
li {
margin-left:1.5em;
margin-left: $baseline * 1rem;
}
}


::selection { background: $color-selection; color: #fff; }
::-moz-selection { background: $color-selection; color: #fff; }
::selection { background: #2484c1; color: #fff; }
::-moz-selection { background: #2484c1; color: #fff; }

/* 2.2 - Text Wrapper */
/* ------------------ WRAPPERS ------------------- */

.article-content {
font-size: calc(4mm + 0.4vw);
line-height: 1.5em;
padding: 1em;
font-weight:300;
p, em, p em {
font-weight:300;
}
img {
max-width: 100%;
height: auto;
}
.article-thumbnail {
padding-bottom: 1em;
text-align: center;
img {
max-width: 100%;
height: auto;
}
}
.article-excerpt {
padding: 0.5em 0.5em 0.5em 0.5em;
font-style: italic;
font-size: calc(3.5mm + 0.4vw);
}
.article-author {
margin:0;
padding:0;
.card-meta {
margin:0;
}
}
.bypass-flex-fontsize {
font-size: 4mm;
line-height: 1.5em;
}
.text-wrapper {
width:$baseheight*40;
margin: auto;
}

/* 2.3 - Titles */
/* ------------------ TITLES ------------------- */

@mixin title($size, $height, $top, $bottom, $weight) {
font-size: $size;
line-height: $height;
padding: $top 0 $bottom 0;
@mixin title($size, $weight) {
$height: ceil($size / $baseline) * $baseline;
font-size: $size * 1rem;
line-height: $height * 1rem;
margin-bottom: $baseline * 1rem;
font-weight: $weight;
}

h1, h2, h3, h4, h5, h6, h7 {
font-family: 'Teko';
text-align: left;
font-size: 1em;
line-height: 1.5em;
font-size: 1em;
line-height: 1.5em;
padding:0;
margin:0;
font-weight:400;
&.page-title {
font-family: Teko;
color: $color-primary;
border-bottom: 3px solid $color-primary;
font-weight: 600;
text-shadow: 2px 2px 0px rgba(0,0,0,.2);
box-shadow: 0px 2px 0px rgba(0,0,0,.2);
margin-bottom: 0.5em;
padding: 0;
i {
font-size: 0.55em;
position: relative;
top: -0.175em;
}
&-flex {
display: flex;
flex-direction: row;
justify-content: space-between;
& > span, & > i, & > a {
display: block;
}
& > a {
color: $color-primary;
&:hover, &:focus, &:active {
color: darken($color-primary, 10%);
}
}
}
}
}

h1 {
@include title(2.3333333em, 1em, 0.333333em, 0.6em, 700);
@include title(2.3333333, 700);
}

h2 {
@include title(2em, 1.5em, 0.333333em, 0.4em, 700);
@include title(2, 700);
}

h3 {
@include title(1.5em, 1em, 0em, 1em, 700);
@include title(1.5, 700);
}

h4 {
@include title(1.5em, 1em, 0em, 1em, 600);
@include title(1.5, 600);
}

h5 {
@include title(1.333333em, 1em, 0.1em, 1.133333em, 600);
@include title(1.333333, 600);
}

h6 {
@include title(1.1em, 1.4em, 0.1em, 1.2em, 600);
@include title(1.1, 600);
}

/* 2.4 - hr */
/* ------------------ HR ------------------- */

hr {
border-top: 0px;
@@ -204,32 +127,36 @@ hr {
border-bottom: 1px;
border-color: rgba(1,1,1,0.15);
border-style: solid;
margin: 1.5em;
margin-bottom: $baseline * 1rem;
}

/* 2.5 - Wells and quotes */
/* ------------------ QUOTE ------------------- */

@mixin well() {
border-width: 0 0 0 0.2em;
border-style: solid;
border-radius: 3px;
margin: -0.75em -0.2em 0.75em -0.2em;
padding: 0.75em 1em 0.75em 1em;
margin:0;
margin-bottom: $baseline * 1rem;
padding: $baseline/2 * 1rem;
max-width: 100%;
border-color: $color-primary;
}

blockquote, .quote, .well {
blockquote {
@include well();
border-color: rgba(1, 1, 1, 0.15);

.night-mode & {
border-color: rgba(255, 255, 255, 0.15)
}
}

pre, .pre, .well-pre {
pre {
@include well();
border-color: rgba(1,1,1,0.20);
background-color:#EEE;
overflow-x: scroll;

.night-mode & {
background-color:#222;
border-color:rgba(255,255,255,0.20);
@@ -238,62 +165,25 @@ pre, .pre, .well-pre {



/* 2.6 - Special styling */
/* ------------------ SPECIAL STYLING ------------------- */

mark {
border-radius: 0.2em;
padding:0 0.2em 0 0.2em;
background-color: lighten($color-mark, 30%);
background-color:rgba(255,255,0,0.33);
color: inherit;
}

.night-mode mark {
background-color: $color-primary;
background-color:rgba(128,128,0,0.66);
}

/* ------------------ SPECIAL STYLING ------------------- */

.time {
font-style: italic;
text-align: right;
width: 100%;
display: block;
}

.powered-text {
text-align: center;
font-weight: 300;
font-size: 85%;
opacity: 80%;
color: $color-grey;
margin-top:0.66em;
font-style:italic;
}

/* 2.6.1 - Colored texts */

@mixin text-color($text-color) {
color: $text-color;
}

.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); }
}

+ 102
- 0
scss/components/_buttons.scss View File

@@ -0,0 +1,102 @@

// Mixins, variables and colorizations


@mixin button() {
@include borders();
@include border-radius();
text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
}

// Colorization functions

@mixin colorize-button() {
@each $name, $color in list-colors() {
&-#{$name} { @include button-color(get-color($name), #FFF, #000); }
}
}

@mixin button-color($background-color, $light-color, $dark-color) {
@include background-color($background-color, $light-color, $dark-color);
&, &:not(.disabled):not(:disabled) {
&:hover, &:active, &:focus, a:hover > &, a:active > &, a:focus > & {
@include button-hover($background-color, $light-color, $dark-color);
}
}
}

@mixin button-hover($background-color, $light-color, $dark-color) {
@include background-color(lighten($background-color, 10%), $light-color, $dark-color);
}

// 11.1 - Buttons

.btn {
@include button();
box-shadow: $inset-shadow, $narrow-shadow;

&:hover {
box-shadow: $inset-shadow, $narrow-shadow;
@include button();
}

&:focus {
box-shadow: $inset-shadow, $narrow-shadow, 0px 0px 0px 2px rgba(0, 0, 0, 0.3)!important;
outline: none;
}

&:active {
box-shadow: $inset-shadow-inverted, $narrow-shadow;
@include button();

&:focus {
box-shadow: $inset-shadow-inverted, $narrow-shadow, 0px 0px 0px 2px rgba(0, 0, 0, 0.3)!important;
outline: none;
}
}

@include colorize-button();
}

.btn-group {
box-shadow: none;
}

.btn-group .btn {
@include border-radius();
&:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
&:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}

/* 11.2 - Badges */

.badge {
font-weight:400;

@include colorize-button();
}

/* 11.3 - Réseaux sociaux */

.share-buttons {
margin-top: $baselinerem;
margin-bottom: $baselinerem;
}

.reagir {
text-align:right;
}

.btn {
&-facebook {@include button-color(#3B5998, #FFF, #000);}
&-twitter {@include button-color(#55ACEE, #FFF, #000);}
&-googleplus {@include button-color(#d34836, #FFF, #000);}
&-diaspora {@include button-color(#313739, #FFF, #000);}
&-mastodon {@include button-color(#282c37, #FFF, #000);}
}

+ 186
- 0
scss/components/_cards.scss View File

@@ -0,0 +1,186 @@
// Mixin and colors

$card-color-default: white;

@mixin card-self-contained() {
@include card-container();
background-color:$card-color-default;
}

@mixin card-container() {
@include border-radius();
box-shadow: $large-shadow;
border: none;
margin-bottom: $baselinerem;
background-color:transparent;
}

@mixin card-element() {
border:0;
border-radius:0;
background-color:$card-color-default;

&:first-child {
@include border-radius-top($border-radius);
}

&:last-child {
@include border-radius-bottom($border-radius);
}

&:only-child {
@include border-radius();
}
}

@mixin card-relief {
.card-body:last-child {
box-shadow: $large-shadow, $inset-shadow;
}

box-shadow: $large-shadow, $inset-shadow;
}

// CARD COLORIZATION

@mixin colorize-card() {
@each $name, $color in list-colors() {
&-#{$name} { @include card-color(get-color($name), #FFF, #000); }
}
}

@mixin card-color($background-color, $light-color, $dark-color) {
& > .card-header, & > .card-footer { @include background-color($background-color, $light-color, $dark-color); }
&.card-colored > .card-body { @include background-color($background-color, $light-color, $dark-color); }
}

// ALERT COLORIZATION

@mixin colorize-alert() {
@each $name, $color in list-colors() {
&-#{$name} { @include alert-color(get-color($name)); }
}
}

@mixin alert-color($background-color) {
background-color: lighten($background-color, 35%);
@if (luminance($background-color) > 128 * 0.8) {
color: darken($background-color, 70%);
a, .alert-link {
color:darken($background-color, 70%);
font-weight:bold;
}
} @else {
color: lighten($background-color, 80%);
a, .alert-link {
color:lighten($background-color, 85%);
font-weight:bold;
}
}

}

/* 10.1 - Cards */

.card {
@include card-container();

h1, h2, h3, h4, h5, h6, h7, h8, h9, h10 {
color:#333;
text-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
}

@include colorize-card();
}

.card-body {
@include card-element();
}

/* 10.1.1 - Headers */

.card-header, .card-footer {
@include card-element();
@include borders();
font-size:1.1em;
box-shadow: $inset-relief;
text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
font-weight:600;
border-radius: 0;

h1, h2, h3, h4, h5, h6, h7, h8, h9, h10 {
font-size:1em;
text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
padding:0px;
margin:0px;
color:#FFF;
font-weight:600;
line-height:1.5em;
}
}

/* 10.1.2 - Meta */

.card-meta {
padding:1em;
@include card-element();
border-bottom: $border-size solid rgba(0,0,0,0.2);

&.media {
-ms-flex-align: center !important;
align-items: center !important;
}

.media-left .media-object {
height: 64px;
width: 64px;
border-radius: 10px;
margin-right: $baselinerem;
}


author {
display:block;
font-weight:600;
}

time {
display:block;
font-style:italic;
}
}

/* 10.1.3 - Lists */

.list-group {
@include card-element();
}

.list-group-item {
border: none;
background-color:transparent;
}

a.list-group-item:hover {
border-style:none;
border-width:0px;
border-radius:0px;
background-color:rgba(0,0,0,0.1);
}

/* 10.2 - Breadcrumb */

.breadcrumb {
@include card-relief();
@include li-no-margin();
background-color:#eeeeec;
}

/* 10.3 - Alerts */

.alert {
@include card-self-contained();
color:rgba(0, 0, 0, 0.7);

@include colorize-alert();
}

+ 79
- 0
scss/components/_navbar.scss View File

@@ -0,0 +1,79 @@
// Mixin and colors

@mixin navheader() {
box-shadow: $large-shadow;
@include borders();
border-left: 0;
border-right: 0;
}

@mixin colorize-navbar() {