feat: use kazhnuz.css
This commit is contained in:
Kazhnuz
parent
b62f928b2b
commit
c6d8aa0b7a
16 changed files with 3675 additions and 2168 deletions
1
generate.sh
Executable file
1
generate.sh
Executable file
|
|
@ -0,0 +1 @@
|
|||
sassc scss/style.scss > style.css
|
||||
143
scss/_angled-edges.scss
Normal file
143
scss/_angled-edges.scss
Normal file
|
|
@ -0,0 +1,143 @@
|
|||
//-------------------------------------------------------------------------------------
|
||||
// Angled Edges v2.0.0 (https://github.com/josephfusco/angled-edges)
|
||||
// Copyright 2017 Joseph Fusco
|
||||
// Licensed under MIT (https://github.com/josephfusco/angled-edges/blob/master/LICENSE)
|
||||
//-------------------------------------------------------------------------------------
|
||||
|
||||
/// Replace `$search` with `$replace` in `$string`.
|
||||
///
|
||||
/// @author Hugo Giraudel
|
||||
/// @link http://www.sassmeister.com/gist/1b4f2da5527830088e4d
|
||||
///
|
||||
/// @param {String} $string - Initial string
|
||||
/// @param {String} $search - Substring to replace
|
||||
/// @param {String} $replace ('') - New value
|
||||
/// @return {String} Updated string
|
||||
///
|
||||
@function ae-str-replace($string, $search, $replace: '') {
|
||||
$index: str-index($string, $search);
|
||||
|
||||
@if $index {
|
||||
@return str-slice($string, 1, $index - 1) + $replace + ae-str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
|
||||
}
|
||||
|
||||
@return $string;
|
||||
}
|
||||
|
||||
/// Encode SVG to use as background.
|
||||
///
|
||||
/// @param {String} $string
|
||||
/// @return {String} Encoded svg data
|
||||
///
|
||||
@function ae-svg-encode($string){
|
||||
$result: ae-str-replace($string, '<svg', '<svg xmlns="http://www.w3.org/2000/svg"');
|
||||
$result: ae-str-replace($result, '%', '%25');
|
||||
$result: ae-str-replace($result, '"', '\'');
|
||||
$result: ae-str-replace($result, '<', '%3C');
|
||||
$result: ae-str-replace($result, '>', '%3E');
|
||||
|
||||
@return 'data:image/svg+xml,' + $result;
|
||||
}
|
||||
|
||||
/// Outputs pseudo content for main mixin.
|
||||
///
|
||||
/// @author Joseph Fusco
|
||||
///
|
||||
/// @param {String} $location
|
||||
/// @param {Number} $height
|
||||
/// @output psuedo content
|
||||
///
|
||||
@mixin ae-pseudo($wedge, $height, $width) {
|
||||
background-image: url($wedge);
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
// full width wedge - needed as Firefox ignores preserveAspectRatio="none" in this case
|
||||
@if ($width == null) {
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
content: '';
|
||||
height: $height * 1px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/// Attatches an svg wedge shape to an element.
|
||||
///
|
||||
/// @author Joseph Fusco
|
||||
///
|
||||
/// @param {String} $location - 'inside top', 'outside top', 'inside bottom', 'outside bottom'
|
||||
/// @param {String} $hypotenuse - 'upper left', 'upper right', 'lower left', 'lower right'
|
||||
/// @param {Color} $fill
|
||||
/// @param {Number} $height
|
||||
/// @param {Number} $width
|
||||
/// @output '::before' and/or '::after' with svg background image
|
||||
///
|
||||
@mixin angled-edge($location, $hypotenuse, $fill, $height: 100, $width: null) {
|
||||
|
||||
position: relative;
|
||||
|
||||
$points: (
|
||||
'upper left': '0,#{$height} #{$width},#{$height} #{$width},0',
|
||||
'upper right': '0,#{$height} #{$width},#{$height} 0,0',
|
||||
'lower left': '0,0 #{$width},#{$height} #{$width},0',
|
||||
'lower right': '0,0 #{$width},0 0,#{$height}'
|
||||
);
|
||||
|
||||
// full width wedge
|
||||
@if ($width == null) {
|
||||
$points: (
|
||||
'upper left': '0,#{$height} 100,#{$height} 100,0',
|
||||
'upper right': '0,#{$height} 100,#{$height} 0,0',
|
||||
'lower left': '0,0 100,#{$height} 100,0',
|
||||
'lower right': '0,0 100,0 0,#{$height}'
|
||||
);
|
||||
}
|
||||
|
||||
// ensure $fill color is using rgb()
|
||||
$fill-rgb: 'rgb(' + round(red($fill)) + ',' + round(green($fill)) + ',' + round(blue($fill)) + ')';
|
||||
|
||||
// capture alpha component of $fill to use with fill-opacity
|
||||
$fill-alpha: alpha($fill);
|
||||
|
||||
$wedge: '<svg width="#{$width}" height="#{$height}" fill="#{$fill-rgb}" fill-opacity="#{$fill-alpha}"><polygon points="#{map-get($points, $hypotenuse)}"></polygon></svg>';
|
||||
|
||||
// full width wedge
|
||||
@if ($width == null) {
|
||||
$wedge: '<svg preserveAspectRatio="none" viewBox="0 0 100 #{$height}" fill="#{$fill-rgb}" fill-opacity="#{$fill-alpha}"><polygon points="#{map-get($points, $hypotenuse)}"></polygon></svg>';
|
||||
}
|
||||
|
||||
$encoded-wedge: ae-svg-encode($wedge);
|
||||
|
||||
@if ($location == 'inside top') {
|
||||
&::before {
|
||||
@include ae-pseudo($encoded-wedge, $height, $width);
|
||||
top: 0;
|
||||
}
|
||||
} @else if ($location == 'outside top') {
|
||||
&::before {
|
||||
@include ae-pseudo($encoded-wedge, $height, $width);
|
||||
top: -$height * 1px;
|
||||
}
|
||||
} @else if ($location == 'inside bottom') {
|
||||
&::after {
|
||||
@include ae-pseudo($encoded-wedge, $height, $width);
|
||||
bottom: 0;
|
||||
}
|
||||
} @else if ($location == 'outside bottom') {
|
||||
&::after {
|
||||
@include ae-pseudo($encoded-wedge, $height, $width);
|
||||
bottom: -$height * 1px;
|
||||
}
|
||||
} @else {
|
||||
@error 'Invalid argument for $location - must use: `inside top`, `outside top`, `inside bottom`, `outside bottom`';
|
||||
}
|
||||
|
||||
@if (map-has-key($points, $hypotenuse) == false) {
|
||||
@error 'Invalid argument for $hypotenuse - must use: `upper left`, `upper right`, `lower left`, `lower right`';
|
||||
}
|
||||
}
|
||||
199
scss/_blog.scss
199
scss/_blog.scss
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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: $large-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: $narrow-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 {
|
||||
box-shadow: $large-shadow;
|
||||
}
|
||||
|
||||
.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); }
|
||||
|
||||
}
|
||||
|
||||
235
scss/_cards.scss
235
scss/_cards.scss
|
|
@ -1,235 +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; }
|
||||
}
|
||||
|
||||
.card {
|
||||
@include border-radius();
|
||||
box-shadow: $large-shadow;
|
||||
border: none;
|
||||
margin-bottom:1.2em;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/* 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();
|
||||
}
|
||||
|
|
@ -1,31 +1,101 @@
|
|||
/*
|
||||
* 1 - Definitions
|
||||
*
|
||||
* This part of the (s)css contain every definitions, mixins,
|
||||
* and differents unilities that can be used everywhere in the code.
|
||||
*
|
||||
*/
|
||||
/* --- 01. DEFINITIONS --- */
|
||||
|
||||
/*
|
||||
* 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 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.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);
|
||||
$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);
|
||||
|
||||
$baseline: 1.5;
|
||||
$fontsize: 4.75mm;
|
||||
|
||||
$lineheight: $baseline * 1rem;
|
||||
$lineheight_half: $lineheight/2;
|
||||
$lineheight_quarter: $lineheight/4;
|
||||
|
||||
$border-radius: 0px;
|
||||
$border-size: 1px;
|
||||
$border-size: 0px;
|
||||
|
||||
$color-primary: $color-red;
|
||||
$color-secondary: $color-dark;
|
||||
$color-link: $color-blue;
|
||||
$color-selection: $color-blue;
|
||||
$color-mark: $color-yellow;
|
||||
$fontweight_big: 300;
|
||||
$fontweight_base: 400;
|
||||
$fontweight_bold: 600;
|
||||
$fontweight_hyper: 800;
|
||||
|
||||
$color-category: $color-blue;
|
||||
$color-tag: $color-grey;
|
||||
$basefont: Open Sans, sans-serif;
|
||||
$titlefont: Amatic SC, sans-serif;
|
||||
|
||||
$color-font: #444;
|
||||
|
||||
// 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;
|
||||
|
||||
// Large tablets and desktops
|
||||
$screen-xl-min: 1200px;
|
||||
|
||||
// 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)
|
||||
|
|
@ -35,103 +105,20 @@ $color-font: #444;
|
|||
border-radius: $border-radius $border-radius $border-radius $border-radius;
|
||||
}
|
||||
|
||||
@mixin li-no-margin() {
|
||||
li {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@mixin biseau($size) {
|
||||
position: relative;
|
||||
z-index:1;
|
||||
overflow: visible;
|
||||
|
||||
/* 1.1 - Utils */
|
||||
|
||||
.no-pills {
|
||||
list-style:none;
|
||||
}
|
||||
|
||||
.align {
|
||||
&-center, ¢er {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;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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%) ;
|
||||
&:before {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
top:0;
|
||||
left:-$size/2;
|
||||
right:-$size/2;
|
||||
bottom:0;
|
||||
z-index:-1;
|
||||
transform: skewX(-15deg);
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
97
scss/_drawing.scss
Normal file
97
scss/_drawing.scss
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
/* --- 04. COMPOSANTS --- */
|
||||
|
||||
/*
|
||||
* Les différents composants réutilisables de la page.
|
||||
*
|
||||
*/
|
||||
|
||||
@import 'components/cards';
|
||||
|
||||
@import 'components/buttons';
|
||||
|
||||
@import 'components/previews';
|
||||
|
||||
.article-meta, .article-nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.article-category-link {
|
||||
@include button($button_small);
|
||||
padding-left: $button_small;
|
||||
padding-right: $button_small;
|
||||
@include button-color($color-info, $color-button-light);
|
||||
&:hover, &:active {
|
||||
@include borders();
|
||||
}
|
||||
|
||||
p &:last-child {
|
||||
margin-bottom:0;
|
||||
}
|
||||
}
|
||||
|
||||
strong.btn-fake {
|
||||
@include button($button_large);
|
||||
@include button-fullcontrol(transparent, transparent, rgba(0,0,0,1));
|
||||
}
|
||||
|
||||
a.article-nav-link-wrap {
|
||||
@include button($button_large);
|
||||
padding-left: $button_large;
|
||||
padding-right: $button_large;
|
||||
&:hover, &:active {
|
||||
@include borders();
|
||||
}
|
||||
|
||||
p &:last-child {
|
||||
margin-bottom:0;
|
||||
}
|
||||
@include button-color($color-info, $color-button-light);
|
||||
}
|
||||
|
||||
.article-more-link {
|
||||
text-align: center;
|
||||
a {
|
||||
@include button($button_large);
|
||||
padding-left: $button_large;
|
||||
padding-right: $button_large;
|
||||
&:hover, &:active {
|
||||
@include borders();
|
||||
}
|
||||
|
||||
p &:last-child {
|
||||
margin-bottom:0;
|
||||
}
|
||||
@include button-fullcontrol(transparent, rgba(0,0,0,0.05), $color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-navbar {
|
||||
@include button($button_large);
|
||||
padding-left: $button_small;
|
||||
padding-right: $button_small;
|
||||
@include button-fullcontrol(transparent, rgba(0,0,0,0.1), $color-light);
|
||||
}
|
||||
|
||||
.pigimg, .mb {
|
||||
padding-bottom:1.5rem;
|
||||
}
|
||||
|
||||
#page-nav {
|
||||
padding-bottom:1.5rem;
|
||||
.page-number, .next, .prev {
|
||||
@include button($button_small);
|
||||
padding-left: $button_small;
|
||||
padding-right: $button_small;
|
||||
@include button-color($color-light2, $color-button-dark);
|
||||
|
||||
&.current {
|
||||
@include button-color($color-info, $color-button-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-select {
|
||||
width:100%;
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
/* 2.1 - Font Face */
|
||||
|
||||
/* 2.1.1 - OpenSans */
|
||||
/* 2.1.1 - OpenSans
|
||||
|
||||
@font-face {
|
||||
font-family: 'OpenSans';
|
||||
|
|
@ -120,36 +120,4 @@
|
|||
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;
|
||||
}
|
||||
}*/
|
||||
|
|
@ -1,123 +1,261 @@
|
|||
/* --- 03. GLOBAL STYLING --- */
|
||||
|
||||
/*
|
||||
* 3 - Global elements ( _global.scss )
|
||||
*
|
||||
* This part of the (s)css handle the style of "global" elements
|
||||
* like the wrapper, the navbars, the header.
|
||||
* Les styles "globaux" touchant toute la page.
|
||||
*
|
||||
*/
|
||||
*/
|
||||
|
||||
body {
|
||||
background: #666 url('img/background.png');
|
||||
padding: 30px;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
body {
|
||||
background: none;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
background-color: #FFF
|
||||
}
|
||||
|
||||
/* 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 li-no-margin() {
|
||||
li {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin container-big() {
|
||||
padding-left: $lineheight;
|
||||
padding-right: $lineheight;
|
||||
max-width: 1600px;
|
||||
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;
|
||||
border-top: 6px solid $color-dark2;
|
||||
padding-bottom:3rem;
|
||||
|
||||
.header-collumns {
|
||||
@include container-big();
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-areas:
|
||||
"nav"
|
||||
"logo";
|
||||
grid-template-rows: auto;
|
||||
grid-gap: $lineheight;
|
||||
padding-bottom: $lineheight;
|
||||
|
||||
.navbar-area {
|
||||
grid-area: nav;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo-area {
|
||||
grid-area: logo;
|
||||
}
|
||||
|
||||
@include lg() {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-areas: "logo nav";
|
||||
height:11*$lineheight;
|
||||
padding-bottom:0;
|
||||
.navbar-area {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
@include xxl() {
|
||||
height:13*$lineheight;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
header h1 {
|
||||
border-style:none !important;
|
||||
color: $color-light;
|
||||
font-weight: $fontweight_hyper;
|
||||
font-size:5.4em;
|
||||
font-style:oblique;
|
||||
padding-bottom:0px;
|
||||
line-height: 1.5em;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-top:0.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar {
|
||||
box-shadow: $large-shadow;
|
||||
@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;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
padding: 0.75rem;
|
||||
color: $color-light;
|
||||
a {
|
||||
color: $color-light;
|
||||
}
|
||||
&: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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include li-no-margin();
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
box-shadow: $narrow-shadow, $inset-shadow;
|
||||
box-shadow: $narrow-shadow, $inset-shadow;
|
||||
}
|
||||
/* ------------------ CONTAINERS ------------------- */
|
||||
|
||||
.container-big {
|
||||
@include container-big();
|
||||
}
|
||||
|
||||
/* 3.2 - Footer */
|
||||
.container-blog {
|
||||
@include container-big();
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto;
|
||||
row-gap: $lineheight;
|
||||
column-gap: 3rem;
|
||||
grid-template-areas:
|
||||
"main"
|
||||
"side";
|
||||
|
||||
@include lg() {
|
||||
grid-template-columns: auto 360px;
|
||||
grid-template-areas: "main side";
|
||||
}
|
||||
}
|
||||
|
||||
.mainpane {
|
||||
grid-area: main;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
grid-area: side;
|
||||
}
|
||||
|
||||
.container-preview {
|
||||
@include container-big();
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto;
|
||||
row-gap: $lineheight;
|
||||
column-gap: 3rem;
|
||||
grid-template-areas:
|
||||
"main"
|
||||
"side";
|
||||
|
||||
@include lg() {
|
||||
grid-template-columns: 360px auto;
|
||||
grid-template-areas: "side main";
|
||||
}
|
||||
}
|
||||
|
||||
.container-onecolumn {
|
||||
max-width:1280px;
|
||||
margin: auto;
|
||||
padding-bottom: $lineheight;
|
||||
}
|
||||
|
||||
.container-personnage {
|
||||
@include container-big();
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
grid-template-rows: auto;
|
||||
row-gap: 3rem;
|
||||
column-gap: 3rem;
|
||||
|
||||
grid-template-areas:
|
||||
"nomp nomp nomp nomp nomp nomp"
|
||||
"info info info info meta meta"
|
||||
"goss goss look look look look"
|
||||
"aime aime aime dete dete dete"
|
||||
"hist hist hist hist hist hist";
|
||||
|
||||
.card {
|
||||
margin:0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
padding:0;
|
||||
}
|
||||
}
|
||||
|
||||
.personnage {
|
||||
&-nomp {grid-area: nomp;}
|
||||
&-info {grid-area: info;}
|
||||
&-meta {grid-area: meta;}
|
||||
&-goss {grid-area: goss;}
|
||||
&-look {grid-area: look;}
|
||||
&-aime {grid-area: aime;}
|
||||
&-dete {grid-area: dete;}
|
||||
&-hist {grid-area: hist;}
|
||||
}
|
||||
|
||||
/* ------------------ PAGE ------------------- */
|
||||
|
||||
#wrapper {
|
||||
background-color: $color-light;
|
||||
}
|
||||
|
||||
/* ------------------ 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 {
|
||||
margin-top:40px;
|
||||
@include angled-edge('outside top', 'upper left', $color-footer-back, 32);
|
||||
color: $color-footer-text;
|
||||
padding-top:1.5rem;
|
||||
font-size: 0.8rem!important;
|
||||
padding-bottom:1.5rem;
|
||||
|
||||
.footer-collumns {
|
||||
@include container-big();
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto;
|
||||
grid-gap: $lineheight;
|
||||
padding-bottom: $lineheight;
|
||||
|
||||
@include lg() {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
/* 3.2.1 - Social Network Buttons */
|
||||
/* social media */
|
||||
|
||||
ul.social {
|
||||
font-size:1.5em;
|
||||
padding-bottom:1em;
|
||||
margin:auto;
|
||||
text-align:center;
|
||||
li {
|
||||
margin:0;
|
||||
list-style: none;
|
||||
display: inline;
|
||||
a {
|
||||
color:#FFFFFF;
|
||||
background-color:#000000;
|
||||
padding:0.3em;
|
||||
padding-left:0.36em;
|
||||
padding-right:0.36em;
|
||||
vertical-align:middle;
|
||||
border-radius:100%;
|
||||
&:hover {
|
||||
color:#000;
|
||||
background-color:#FFF
|
||||
}
|
||||
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,18 +1,128 @@
|
|||
$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;
|
||||
/* --- 00. PALETTE --- */
|
||||
|
||||
/*
|
||||
* Les définitions globales des couleurs du theme.
|
||||
*
|
||||
* Elle permettent de définir rapidement à la fois les couleurs
|
||||
* de base qui seront utilisée pour tout le theme, mais
|
||||
* également celles spécifiques pour certains sujets (liens, texte)
|
||||
*
|
||||
*/
|
||||
|
||||
// Couleurs de base du theme :
|
||||
|
||||
$color-blue: #268bd2;
|
||||
$color-violet: #d33682;
|
||||
$color-purple: #6c71c4;
|
||||
$color-red: #dc322f;
|
||||
$color-orange: #cb4b16;
|
||||
$color-green: #859900;
|
||||
$color-skyblue: #2aa198;
|
||||
$color-dark: #002b36;
|
||||
$color-light: #fdf6e3;
|
||||
$color-turquoise: #2aa198;
|
||||
$color-yellow: #b58900;
|
||||
$color-brown: #b58900;
|
||||
$color-grey: #586e75;
|
||||
|
||||
$color-dark2: #073642;
|
||||
$color-light2: #eee8d5;
|
||||
|
||||
$color-gray2: #657b83;
|
||||
$color-gray3: #839496;
|
||||
$color-gray4: #93a1a1;
|
||||
|
||||
$color-primary: $color-violet;
|
||||
$color-secondary: $color-skyblue;
|
||||
|
||||
$color-link: $color-skyblue;
|
||||
$color-selection: $color-skyblue;
|
||||
$color-mark: $color-yellow;
|
||||
|
||||
$color-font: $color-dark2;
|
||||
$color-warning: $color-orange;
|
||||
$color-danger: $color-red;
|
||||
$color-info: $color-skyblue;
|
||||
$color-success: $color-green;
|
||||
|
||||
@mixin background-color($background-color, $text-color) {
|
||||
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-light);
|
||||
}
|
||||
::-moz-selection {
|
||||
@include background-color($color-selection, $color-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-light); }
|
||||
&-violet { @include background-color($color-violet, $color-light); }
|
||||
&-purple { @include background-color($color-purple, $color-light); }
|
||||
&-red { @include background-color($color-red, $color-light); }
|
||||
&-orange { @include background-color($color-orange, $color-light); }
|
||||
&-green { @include background-color($color-green, $color-light); }
|
||||
&-skyblue { @include background-color($color-skyblue, $color-light); }
|
||||
&-dark { @include background-color($color-dark, $color-light); }
|
||||
&-light { @include background-color($color-light, $color-dark); }
|
||||
&-turquoise { @include background-color($color-turquoise, $color-light); }
|
||||
&-yellow { @include background-color($color-yellow, $color-light); }
|
||||
&-brown { @include background-color($color-brown, $color-light); }
|
||||
&-grey { @include background-color($color-grey, $color-light); }
|
||||
|
||||
&-primary { @include background-color($color-primary, $color-light); }
|
||||
&-secondary { @include background-color($color-secondary, $color-light); }
|
||||
&-warning { @include background-color($color-warning, $color-light); }
|
||||
&-danger { @include background-color($color-danger, $color-light); }
|
||||
&-info { @include background-color($color-info, $color-light); }
|
||||
&-success { @include background-color($color-success, $color-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,6 +1,6 @@
|
|||
/*
|
||||
* 2 - Typography ( _typography.scss )
|
||||
*
|
||||
*
|
||||
* This part of the (s)css handle everything related to the typography
|
||||
* like paragraphs, blockquote, etc.
|
||||
*
|
||||
|
|
@ -12,29 +12,30 @@
|
|||
|
||||
@mixin paragraph() {
|
||||
padding:0;
|
||||
padding-bottom:1.5em;
|
||||
padding-bottom: $lineheight;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: OpenSans, sans-serif;
|
||||
font-family: $basefont;
|
||||
text-align: left;
|
||||
font-size: 4mm;
|
||||
line-height: 1.5em;
|
||||
font-size: $fontsize;
|
||||
line-height: $lineheight;
|
||||
color: $color-font;
|
||||
font-weight: 400;
|
||||
font-weight: $fontweight_base;
|
||||
}
|
||||
|
||||
.night-mode {
|
||||
color:#BBB;
|
||||
color: $color-light2;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 600;
|
||||
font-weight: $fontweight_bold;
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: italic;
|
||||
font-style: italic;
|
||||
font-weight: $fontweight_base;
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
@ -52,59 +53,53 @@ p {
|
|||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
ul, ol {
|
||||
@include paragraph();
|
||||
ul {
|
||||
list-style: disc;
|
||||
ul, ol {
|
||||
padding-bottom:0;
|
||||
margin:0;
|
||||
}
|
||||
li {
|
||||
margin-left:1.5em;
|
||||
margin:0;
|
||||
margin-left: $lineheight;
|
||||
line-height: $lineheight;
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
@include paragraph();
|
||||
ol {
|
||||
padding-bottom:0;
|
||||
}
|
||||
li {
|
||||
margin-left:1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
::selection { background: $color-selection; color: #fff; }
|
||||
::-moz-selection { background: $color-selection; color: #fff; }
|
||||
::selection { background: $color-selection; color: $color-light; }
|
||||
::-moz-selection { background: $color-selection; color: $color-light; }
|
||||
|
||||
/* 2.2 - Text Wrapper */
|
||||
|
||||
.article-content {
|
||||
font-size: calc(4mm + 0.4vw);
|
||||
line-height: 1.5em;
|
||||
padding: 1em;
|
||||
font-weight:300;
|
||||
p, em, p em {
|
||||
font-weight:300;
|
||||
.container-typographic {
|
||||
p {
|
||||
padding:0;
|
||||
margin:0;
|
||||
text-indent: 3rem;
|
||||
}
|
||||
|
||||
|
||||
p, em, p em {
|
||||
font-weight:$fontweight_base;
|
||||
}
|
||||
|
||||
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;
|
||||
|
|
@ -113,46 +108,45 @@ ol {
|
|||
margin:0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.bypass-flex-fontsize {
|
||||
font-size: 4mm;
|
||||
line-height: 1.5em;
|
||||
line-height: $lineheight;
|
||||
}
|
||||
}
|
||||
|
||||
article.maintext {
|
||||
padding-bottom: $lineheight;
|
||||
}
|
||||
|
||||
/* 2.3 - Titles */
|
||||
|
||||
@mixin title($size, $height, $top, $bottom, $weight) {
|
||||
font-size: $size;
|
||||
line-height: $height;
|
||||
padding: $top 0 $bottom 0;
|
||||
font-weight: $weight;
|
||||
@mixin newTitle($font, $size, $weight) {
|
||||
$lineNumber: ceil($size / 1.5);
|
||||
font-family: $font;
|
||||
font-size: $size * 1rem;
|
||||
line-height: $lineNumber * $lineheight;
|
||||
padding: 0;
|
||||
padding-bottom: $lineheight;
|
||||
font-weight: $weight;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6, h7 {
|
||||
font-family: 'Teko';
|
||||
font-family: $basefont;
|
||||
text-align: left;
|
||||
font-size: 1em;
|
||||
line-height: 1.5em;
|
||||
font-size: 1em;
|
||||
padding:0;
|
||||
margin:0;
|
||||
font-weight:400;
|
||||
|
||||
font-weight: $fontweight_base;
|
||||
|
||||
&.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;
|
||||
|
|
@ -160,7 +154,7 @@ h1, h2, h3, h4, h5, h6, h7 {
|
|||
& > span, & > i, & > a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
& > a {
|
||||
color: $color-primary;
|
||||
&:hover, &:focus, &:active {
|
||||
|
|
@ -172,27 +166,30 @@ h1, h2, h3, h4, h5, h6, h7 {
|
|||
}
|
||||
|
||||
h1 {
|
||||
@include title(2.3333333em, 1em, 0.333333em, 0.6em, 700);
|
||||
//@include title(3.33em, 1.2em, 0.0em, 0.2em, 200);
|
||||
@include newTitle($titlefont, 3.815, $fontweight_big);
|
||||
color: $color-primary;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@include title(2em, 1.5em, 0.333333em, 0.4em, 700);
|
||||
//@include title(2.725em, 1.125em, 0em, 0.5625em, 200);
|
||||
@include newTitle($basefont, 2.441, $fontweight_big);
|
||||
}
|
||||
|
||||
h3 {
|
||||
@include title(1.5em, 1em, 0em, 1em, 700);
|
||||
@include newTitle($basefont, 1.953, $fontweight_bold);
|
||||
}
|
||||
|
||||
h4 {
|
||||
@include title(1.5em, 1em, 0em, 1em, 600);
|
||||
@include newTitle($basefont, 1.563, $fontweight_hyper);
|
||||
}
|
||||
|
||||
h5 {
|
||||
@include title(1.333333em, 1em, 0.1em, 1.133333em, 600);
|
||||
@include newTitle($basefont, 1.25, $fontweight_bold);
|
||||
}
|
||||
|
||||
h6 {
|
||||
@include title(1.1em, 1.4em, 0.1em, 1.2em, 600);
|
||||
@include newTitle($basefont, 1, $fontweight_hyper);
|
||||
}
|
||||
|
||||
/* 2.4 - hr */
|
||||
|
|
@ -210,32 +207,43 @@ hr {
|
|||
/* 2.5 - Wells and quotes */
|
||||
|
||||
@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;
|
||||
|
||||
max-width: 100%;
|
||||
border-color: $color-primary;
|
||||
border-width: 0 0 0 0em;
|
||||
border-style: none;
|
||||
border-radius: 0px;
|
||||
|
||||
margin: 0 0 $lineheight 0;
|
||||
padding: $lineheight 1rem $lineheight 1rem;
|
||||
|
||||
max-width: 100%;
|
||||
background-color: $color-light2;
|
||||
font-style: italic;
|
||||
color: $color-dark2;
|
||||
}
|
||||
|
||||
blockquote, .quote, .well {
|
||||
blockquote, .quote {
|
||||
@include well();
|
||||
}
|
||||
|
||||
pre, .pre, .well-pre {
|
||||
@include well();
|
||||
background-color:#EEE;
|
||||
overflow-x: scroll;
|
||||
|
||||
.night-mode & {
|
||||
background-color:#222;
|
||||
border-color:rgba(255,255,255,0.20);
|
||||
&:before {
|
||||
content:"";
|
||||
}
|
||||
}
|
||||
|
||||
.well, pre, .pre, .well-pre {
|
||||
@include well();
|
||||
}
|
||||
|
||||
|
||||
|
||||
code {
|
||||
background:transparent;
|
||||
color: $color-red;
|
||||
}
|
||||
|
||||
.container-typographic {
|
||||
max-width: 800px;
|
||||
margin:auto;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 2.6 - Special styling */
|
||||
|
|
@ -243,7 +251,7 @@ pre, .pre, .well-pre {
|
|||
mark {
|
||||
border-radius: 0.2em;
|
||||
padding:0 0.2em 0 0.2em;
|
||||
|
||||
|
||||
background-color: lighten($color-mark, 30%);
|
||||
color: inherit;
|
||||
}
|
||||
|
|
@ -278,8 +286,8 @@ mark {
|
|||
&-turquoise { @include text-color($color-turquoise); }
|
||||
&-yellow { @include text-color($color-yellow); }
|
||||
&-brown { @include text-color($color-brown); }
|
||||
&-grey { @include text-color($color-grey); }
|
||||
|
||||
&-grey { @include text-color($color-grey); }
|
||||
|
||||
&-primary { @include text-color($color-primary); }
|
||||
&-secondary { @include text-color($color-secondary); }
|
||||
&-warning { @include text-color($color-warning); }
|
||||
|
|
@ -287,3 +295,54 @@ mark {
|
|||
&-info { @include text-color($color-info); }
|
||||
&-success { @include text-color($color-success); }
|
||||
}
|
||||
|
||||
/* Table elements */
|
||||
|
||||
@mixin table-color($text-color) {
|
||||
th {
|
||||
color: $text-color;
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table, th, td {
|
||||
border: 0;
|
||||
padding:0px;
|
||||
margin:0px;
|
||||
}
|
||||
|
||||
th, td {
|
||||
vertical-align:center;
|
||||
padding-top: 0.325em;
|
||||
padding-bottom: 0.325em;
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: $fontweight_hyper;
|
||||
}
|
||||
|
||||
.table {
|
||||
&-blue { @include table-color($color-blue); }
|
||||
&-violet { @include table-color($color-violet); }
|
||||
&-purple { @include table-color($color-purple); }
|
||||
&-red { @include table-color($color-red); }
|
||||
&-orange { @include table-color($color-orange); }
|
||||
&-green { @include table-color($color-green); }
|
||||
&-skyblue { @include table-color($color-skyblue); }
|
||||
&-dark { @include table-color($color-dark); }
|
||||
&-light { @include table-color($color-light); }
|
||||
&-turquoise { @include table-color($color-turquoise); }
|
||||
&-yellow { @include table-color($color-yellow); }
|
||||
&-brown { @include table-color($color-brown); }
|
||||
&-grey { @include table-color($color-grey); }
|
||||
|
||||
&-primary { @include table-color($color-primary); }
|
||||
&-secondary { @include table-color($color-secondary); }
|
||||
&-warning { @include table-color($color-warning); }
|
||||
&-danger { @include table-color($color-danger); }
|
||||
&-info { @include table-color($color-info); }
|
||||
&-success { @include table-color($color-success); }
|
||||
}
|
||||
|
|
|
|||
200
scss/components/_buttons.scss
Normal file
200
scss/components/_buttons.scss
Normal file
|
|
@ -0,0 +1,200 @@
|
|||
/*
|
||||
* 3. Buttons and labels
|
||||
* All clickable elements
|
||||
*
|
||||
*/
|
||||
|
||||
$color-button-light: $color-light;
|
||||
$color-button-dark: $color-dark;
|
||||
|
||||
$button_large: $lineheight;
|
||||
$button_small: $lineheight_quarter;
|
||||
|
||||
@mixin button($size) {
|
||||
@include button-nobiseau($size);
|
||||
@include biseau($size);
|
||||
}
|
||||
|
||||
@mixin button-nobiseau($size) {
|
||||
padding: $size;
|
||||
padding-top: $size/3;
|
||||
padding-bottom: $size/3;
|
||||
margin:$size/2;
|
||||
margin-top: $size/3;
|
||||
margin-bottom: $lineheight;
|
||||
//font-size: 4.75mm;
|
||||
line-height:$lineheight;
|
||||
height:auto;
|
||||
@include borders();
|
||||
@include border-radius();
|
||||
font-weight: $fontweight_base;
|
||||
|
||||
background-color:transparent;
|
||||
|
||||
&:hover, &:active, &:focus, a:hover > &, a:active > &, a:focus > & {
|
||||
text-decoration:none;
|
||||
background-color:transparent;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
box-shadow: $narrow-shadow, $inset-shadow, 0px 0px 0px 2px rgba(0, 0, 0, 0);
|
||||
&:before {
|
||||
box-shadow: $narrow-shadow, $inset-shadow, 0px 0px 0px 2px rgba(0, 0, 0, 0.3);
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin colorize-button($background-color, $text-color) {
|
||||
//@include background-color($background-color, $text-color);
|
||||
color: $text-color;
|
||||
&:before {
|
||||
background-color: $background-color;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin button-fullcontrol($background-color, $hover-color, $text-color) {
|
||||
@include colorize-button($background-color, $text-color);
|
||||
&:visited {
|
||||
@include colorize-button($background-color, $text-color);
|
||||
}
|
||||
&, &:visited, &:not(.disabled):not(:disabled) {
|
||||
&:hover, &:active, &:focus, a:hover > &, a:active > &, a:focus > & {
|
||||
@include colorize-button($hover-color, lighten($text-color, 5%));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin button-color($background-color, $text-color) {
|
||||
@include button-fullcontrol($background-color, darken($background-color, 7.5%), $text-color)
|
||||
}
|
||||
|
||||
.btn {
|
||||
@include button($button_large);
|
||||
&:hover, &:active {
|
||||
@include borders();
|
||||
}
|
||||
|
||||
p &:last-child {
|
||||
margin-bottom:0;
|
||||
}
|
||||
}
|
||||
|
||||
.label, label.label, a.label, .chip, a.chip {
|
||||
@include biseau($button_small);
|
||||
padding-left: $button_small;
|
||||
padding-right: $button_small;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
.menu-label {
|
||||
@include biseau($button_small);
|
||||
padding-left: $button_small;
|
||||
padding-right: $button_small;
|
||||
}
|
||||
|
||||
// NAVBAR SPECIAL BUTTONS
|
||||
|
||||
.navbar .btn-link {
|
||||
@include button-fullcontrol(transparent, rgba(0,0,0,0.2), $color-light);
|
||||
}
|
||||
|
||||
.btn-readmore {
|
||||
@include button-fullcontrol(transparent, rgba(0,0,0,0.2), $color-primary);
|
||||
}
|
||||
|
||||
// BUTTONS GROUPS
|
||||
|
||||
$grouped-test: $button-large/1.5 - 0.05rem ;
|
||||
|
||||
.btn-toolbar {
|
||||
padding: 0 $button-large;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
padding: 0px;
|
||||
background-color:transparent;
|
||||
margin-bottom: 1.33em;
|
||||
}
|
||||
|
||||
.btn-group .btn {
|
||||
margin:0 $grouped-test 0 $grouped-test!important;
|
||||
}
|
||||
|
||||
/* ------------------ BREADCRUMB ------------------- */
|
||||
|
||||
ul.breadcrumb, ol.breadcrumb, .breadcrumb {
|
||||
padding-top: 0em;
|
||||
background-color:transparent;
|
||||
margin: 0;
|
||||
padding-bottom:2rem;
|
||||
}
|
||||
|
||||
.breadcrumb li.breadcrumb-item {
|
||||
padding:0;
|
||||
&:before {
|
||||
display:none;
|
||||
}
|
||||
|
||||
a, span {
|
||||
display:inline-block;
|
||||
@include button($button-large);
|
||||
@include button-fullcontrol($color-light2, darken($color-light2, 5%), $color-dark2);
|
||||
margin:0 $button-large/2.5 0 $button-large/2.5;
|
||||
|
||||
&:before {
|
||||
content: " "!important;
|
||||
border-right:1px solid rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
&.active {
|
||||
@include button-fullcontrol($color-primary, $color-primary, $color-light);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
// COLORIZE BUTTONS
|
||||
|
||||
.btn, a.btn, .badge, .chip, a.chip, a.badge, .label, a.label, label.label {
|
||||
&-blue { @include button-color($color-blue, $color-button-light); }
|
||||
&-violet { @include button-color($color-violet, $color-button-light); }
|
||||
&-purple { @include button-color($color-purple, $color-button-light); }
|
||||
&-red { @include button-color($color-red, $color-button-light); }
|
||||
&-orange { @include button-color($color-orange, $color-button-light); }
|
||||
&-green { @include button-color($color-green, $color-button-light); }
|
||||
&-skyblue { @include button-color($color-skyblue, $color-button-light); }
|
||||
&-dark { @include button-color($color-dark, $color-button-light); }
|
||||
&-light { @include button-color($color-light2, $color-button-dark); }
|
||||
&-turquoise { @include button-color($color-turquoise, $color-button-light); }
|
||||
&-yellow { @include button-color($color-yellow, $color-button-light); }
|
||||
&-brown { @include button-color($color-brown, $color-button-light); }
|
||||
&-grey { @include button-color($color-grey, $color-button-light); }
|
||||
|
||||
&-primary { @include button-color($color-primary, $color-button-light); }
|
||||
&-secondary { @include button-color($color-secondary, $color-button-light); }
|
||||
&-warning { @include button-color($color-warning, $color-button-light); }
|
||||
&-danger { @include button-color($color-danger, $color-button-light); }
|
||||
&-info { @include button-color($color-info, $color-button-light); }
|
||||
&-success { @include button-color($color-success, $color-button-light);}
|
||||
&-link {@include button-color(transparent, $color-dark);}
|
||||
}
|
||||
|
||||
/* ------------------ PARTAGE RESEAUX SOCIAUX ------------------- */
|
||||
|
||||
.share-buttons {
|
||||
margin-top: $lineheight;
|
||||
}
|
||||
|
||||
.reagir {
|
||||
text-align:right;
|
||||
}
|
||||
.btn, a.btn {
|
||||
&-facebook {@include button-color(#3B5998, $color-button-light);}
|
||||
&-twitter {@include button-color(#55ACEE, $color-button-light);}
|
||||
&-googleplus {@include button-color(#d34836, $color-button-light);}
|
||||
&-diaspora {@include button-color(#313739, $color-button-light);}
|
||||
&-mastodon {@include button-color(#282c37, $color-button-light);}
|
||||
}
|
||||
246
scss/components/_cards.scss
Normal file
246
scss/components/_cards.scss
Normal file
|
|
@ -0,0 +1,246 @@
|
|||
/*
|
||||
* 2. Cards and containers
|
||||
* All elements that are supposed to contain other stuff
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
$card-bigpad: $lineheight;
|
||||
$card-smallpad: $lineheight_half;
|
||||
|
||||
@mixin card($size) {
|
||||
@include border-radius();
|
||||
background-color: $color-light2;
|
||||
box-shadow: $large-shadow;
|
||||
border: none;
|
||||
margin:0;
|
||||
margin-bottom:$lineheight;
|
||||
padding: $size;
|
||||
}
|
||||
|
||||
@mixin card-header($size) {
|
||||
font-size:1.1em;
|
||||
font-weight: $fontweight_big;
|
||||
border-radius: 0;
|
||||
padding: $size/2;
|
||||
padding-left:0;
|
||||
padding-right:0;
|
||||
padding-bottom: $size/2!important;
|
||||
margin-bottom:$lineheight_half;
|
||||
line-height:$lineheight;
|
||||
|
||||
position:relative;
|
||||
left: -$size*1.25;
|
||||
|
||||
width:95%;
|
||||
|
||||
@include biseau($size);
|
||||
|
||||
h1, h2, h3, h4, h5, h6, h7, h8, h9, h10 {
|
||||
font-family:$basefont;
|
||||
font-size:1rem;
|
||||
padding:0px;
|
||||
margin:0px;
|
||||
color:$color-light;
|
||||
font-weight: $fontweight_big;
|
||||
line-height:$lineheight;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin card-color($background-color, $text-color) {
|
||||
& .card-header, & .menu-header {
|
||||
@include background-color($background-color, $text-color);
|
||||
&:before {
|
||||
@include background-color($background-color, $text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card, .menu {
|
||||
@include card($card-bigpad);
|
||||
|
||||
&-body {
|
||||
padding:0!important;
|
||||
margin:0!important;
|
||||
}
|
||||
|
||||
&-header {
|
||||
@include card-header($card-bigpad);
|
||||
.fa {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
/* Menu handling */
|
||||
|
||||
&-menu {
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
|
||||
ul {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
padding:0;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
.menu-element, .menu-element-link, li a {
|
||||
display:flex;
|
||||
line-height:$lineheight;
|
||||
padding-right:$lineheight_half;
|
||||
padding-left:$lineheight_quarter;
|
||||
padding-top:$lineheight_quarter;
|
||||
padding-bottom:$lineheight_quarter;
|
||||
margin:0;
|
||||
justify-content: space-between;
|
||||
|
||||
word-wrap:none;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow:hidden;
|
||||
|
||||
@include biseau($lineheight_half);
|
||||
|
||||
strong {
|
||||
font-weight: 900;
|
||||
color:$color-dark!important;
|
||||
}
|
||||
|
||||
&.noflex {
|
||||
& :first-child {
|
||||
min-width:2rem;
|
||||
}
|
||||
justify-content: flex-start;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration:none;
|
||||
color: $color-violet;
|
||||
background-color:transparent;
|
||||
&:hover {
|
||||
text-decoration:none;
|
||||
color: $color-violet;
|
||||
|
||||
@include biseau($lineheight_half);
|
||||
|
||||
&:before {
|
||||
background-color: darken($color-light2, 7.5%)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.menu-divider {
|
||||
position: relative;
|
||||
left: -$lineheight_quarter;
|
||||
font-weight: $fontweight_hyper;
|
||||
padding-top:$lineheight_quarter;
|
||||
padding-bottom:$lineheight_quarter;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* CARD LIST - Make a list part of a card */
|
||||
|
||||
|
||||
@mixin list-symbol($symbol) {
|
||||
li.list-element {
|
||||
list-style: none;
|
||||
&::before {
|
||||
font-family: "ForkAwesome";
|
||||
content:$symbol;
|
||||
padding-right:$lineheight_half;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin list-color($color) {
|
||||
li.list-element {
|
||||
&::before {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul.card-list {
|
||||
padding:0;
|
||||
margin:0;
|
||||
li.list-element {
|
||||
line-height:$lineheight;
|
||||
padding-right:$lineheight_half;
|
||||
padding-left:$lineheight_quarter;
|
||||
padding-top:$lineheight_quarter;
|
||||
padding-bottom:$lineheight_quarter;
|
||||
margin:0;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
&-check {@include list-symbol("\f00c");}
|
||||
&-cross {@include list-symbol("\f00d");}
|
||||
|
||||
&-danger{@include list-color($color-danger);}
|
||||
&-success{@include list-color($color-success);}
|
||||
}
|
||||
|
||||
.smallcard, .toast {
|
||||
@include card($card-smallpad);
|
||||
&-header {
|
||||
@include card-header($card-bigpad);
|
||||
}
|
||||
}
|
||||
|
||||
/* COLORIZE CARDS and TOASTS */
|
||||
|
||||
.card, .smallcard, .menu {
|
||||
&-blue { @include card-color($color-blue, $color-light); }
|
||||
&-violet { @include card-color($color-violet, $color-light); }
|
||||
&-purple { @include card-color($color-purple, $color-light); }
|
||||
&-red { @include card-color($color-red, $color-light); }
|
||||
&-orange { @include card-color($color-orange, $color-light); }
|
||||
&-green { @include card-color($color-green, $color-light); }
|
||||
&-skyblue { @include card-color($color-skyblue, $color-light); }
|
||||
&-dark { @include card-color($color-dark, $color-light); }
|
||||
&-light { @include card-color($color-light2, $color-dark); }
|
||||
&-turquoise { @include card-color($color-turquoise, $color-light); }
|
||||
&-yellow { @include card-color($color-yellow, $color-light); }
|
||||
&-brown { @include card-color($color-brown, $color-light); }
|
||||
&-grey { @include card-color($color-grey, $color-light); }
|
||||
|
||||
&-primary { @include card-color($color-primary, $color-light); }
|
||||
&-secondary { @include card-color($color-secondary, $color-light); }
|
||||
&-warning { @include card-color($color-warning, $color-light); }
|
||||
&-danger { @include card-color($color-danger, $color-light); }
|
||||
&-info { @include card-color($color-info, $color-light); }
|
||||
&-success { @include card-color($color-success, $color-light); }
|
||||
}
|
||||
|
||||
.toast {
|
||||
&-blue { @include background-color($color-blue, $color-light); }
|
||||
&-violet { @include background-color($color-violet, $color-light); }
|
||||
&-purple { @include background-color($color-purple, $color-light); }
|
||||
&-red { @include background-color($color-red, $color-light); }
|
||||
&-orange { @include background-color($color-orange, $color-light); }
|
||||
&-green { @include background-color($color-green, $color-light); }
|
||||
&-skyblue { @include background-color($color-skyblue, $color-light); }
|
||||
&-dark { @include background-color($color-dark, $color-light); }
|
||||
&-light { @include background-color($color-light2, $color-dark); }
|
||||
&-turquoise { @include background-color($color-turquoise, $color-light); }
|
||||
&-yellow { @include background-color($color-yellow, $color-light); }
|
||||
&-brown { @include background-color($color-brown, $color-light); }
|
||||
&-grey { @include background-color($color-grey, $color-light); }
|
||||
|
||||
&-primary { @include background-color($color-primary, $color-light); }
|
||||
&-secondary { @include background-color($color-secondary, $color-light); }
|
||||
&-warning { @include background-color($color-warning, $color-light); }
|
||||
&-danger { @include background-color($color-danger, $color-light); }
|
||||
&-info { @include background-color($color-info, $color-light); }
|
||||
&-success { @include background-color($color-success, $color-light); }
|
||||
}
|
||||
250
scss/components/_previews.scss
Normal file
250
scss/components/_previews.scss
Normal file
|
|
@ -0,0 +1,250 @@
|
|||
/*
|
||||
* 4. Previews
|
||||
* Special style for previews cards
|
||||
*
|
||||
*/
|
||||
$preview-height: 8*$lineheight;
|
||||
|
||||
.previews-section {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto;
|
||||
grid-gap: $lineheight;
|
||||
padding-bottom: $lineheight;
|
||||
|
||||
@include xl() {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
@include xxl() {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-container {
|
||||
width:100%;
|
||||
}
|
||||
|
||||
@media(max-width:767px){}
|
||||
@media(min-width:768px){}
|
||||
@media(min-width:992px){
|
||||
|
||||
.prev-col-2 .preview-container {
|
||||
width:50%;
|
||||
}
|
||||
|
||||
.prev-col-3 .preview-container {
|
||||
width:33%;
|
||||
}
|
||||
|
||||
.prev-col-4 .preview-container {
|
||||
width:25%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.card-preview {
|
||||
padding:0;
|
||||
width:100%;
|
||||
margin:auto;
|
||||
box-shadow: $large-shadow, $inset-shadow;
|
||||
}
|
||||
|
||||
.preview-link:hover {
|
||||
text-decoration:none!important;
|
||||
}
|
||||
|
||||
.preview-item {
|
||||
height: $preview-height;
|
||||
font-size:0.9rem;
|
||||
line-height: $lineheight !important;
|
||||
text-align:justify;
|
||||
background-color:rgba(0,0,0,0.00);
|
||||
color:rgba(0,0,0,0.4);
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
-ms-flex-align: center !important;
|
||||
align-items: center !important;
|
||||
justify-content: center;
|
||||
|
||||
.preview-overlay {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
padding-top: $lineheight_half;
|
||||
backdrop-filter: none;
|
||||
transition: background-color 0.3s;
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: $color-light;
|
||||
font-size: 1rem;
|
||||
line-height: $lineheight;
|
||||
font-weight:$fontweight_big;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
font-family: $basefont;
|
||||
font-size: 1rem;
|
||||
background-color: $color-primary;
|
||||
@include card-header($lineheight_half);
|
||||
font-weight: $fontweight_big;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.preview-overlay {
|
||||
backdrop-filter: blur(2px);
|
||||
background-color:rgba(0,0,0,0.4);
|
||||
|
||||
.metadata-pills {
|
||||
opacity: .9;
|
||||
transition: opacity .5s, height .5s;
|
||||
height:135px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.preview-content {
|
||||
max-height: $preview-height;
|
||||
overflow:hidden;
|
||||
background-size: cover;
|
||||
min-height:100%;
|
||||
min-width:100%;
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-bottom:0px;
|
||||
max-width:100%;
|
||||
display:none;
|
||||
}
|
||||
|
||||
& > p {
|
||||
width:100%;
|
||||
margin:auto;
|
||||
|
||||
& > img {
|
||||
max-width:100%;
|
||||
height:auto;
|
||||
vertical-align:middle;
|
||||
margin:auto;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
&.p-img {
|
||||
text-align:center;
|
||||
margin:auto;
|
||||
padding:auto;
|
||||
display: block;
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.preview-metadata {
|
||||
color: $color-light;
|
||||
height:165px;
|
||||
overflow: hidden;
|
||||
|
||||
.metadata-pills {
|
||||
height:165px;
|
||||
opacity: 0;
|
||||
transition: opacity .3s, height .3s;
|
||||
display:flex;
|
||||
justify-content:space-between;
|
||||
padding-left: $lineheight/2;
|
||||
padding-right: $lineheight/2;
|
||||
}
|
||||
}
|
||||
|
||||
.card-preview.card-info {
|
||||
.comment-text {
|
||||
@include angled-edge('outside top', 'upper left', $color-skyblue, 16);
|
||||
background-color:$color-skyblue;
|
||||
}
|
||||
}
|
||||
|
||||
.card-preview.card-grey {
|
||||
.comment-text {
|
||||
@include angled-edge('outside top', 'upper left', $color-grey, 16);
|
||||
background-color:$color-grey;
|
||||
}
|
||||
}
|
||||
|
||||
.comment-text {
|
||||
@include angled-edge('outside top', 'upper left', $color-violet, 16);
|
||||
color: $color-light;
|
||||
background-color:$color-violet;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card-preview time {
|
||||
margin-bottom:0.4em;
|
||||
display:block;
|
||||
}
|
||||
|
||||
// Author area
|
||||
|
||||
.author-area {
|
||||
display:flex;
|
||||
|
||||
img.author-avatar {
|
||||
display:block;
|
||||
height: 4.5rem;
|
||||
width:auto;
|
||||
border-radius:100%;
|
||||
padding:0;
|
||||
margin:0;
|
||||
margin-right:$lineheight;
|
||||
}
|
||||
|
||||
.author-metadata {
|
||||
align-items:center;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.author-date {
|
||||
font-style:italic;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom:$lineheight;
|
||||
}
|
||||
}
|
||||
|
||||
.pigimg {
|
||||
display:block;
|
||||
max-width: 100%;
|
||||
height:auto;
|
||||
margin:auto;
|
||||
}
|
||||
|
||||
.mwarea {
|
||||
padding-bottom: $lineheight;
|
||||
}
|
||||
|
||||
.mwaimg {
|
||||
width:100%;
|
||||
height:auto;
|
||||
display:block;
|
||||
margin:auto;
|
||||
}
|
||||
|
||||
.cover {
|
||||
width:100%;
|
||||
height:auto;
|
||||
}
|
||||
|
||||
.roman {
|
||||
@include md() {
|
||||
width:80%;
|
||||
position:relative;
|
||||
top:-240px;
|
||||
margin:auto;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,18 +1,21 @@
|
|||
/*
|
||||
Theme Name: Dimension Quarante-Douze
|
||||
Theme URI: https://github.com/Quarante-Douze/qdouze-wordpress-theme
|
||||
Theme Name: Kazhnuz Space
|
||||
Theme URI: https://git.kobold.cafe/kazhnuz/kspace-wordpress-theme
|
||||
Author: Kazhnuz
|
||||
Author URI: https://kazhnuz.space
|
||||
Description: The default theme for Quarante-Douze, my tech blog. Made using bootstrap
|
||||
Description: The default theme for Kazhnuz.space, my personnal blog. Made using spectre.css
|
||||
Version: 0.1
|
||||
License: GNU General Public License v2 or later
|
||||
License: GNU General Public License v3 or later
|
||||
License URI: http://www.gnu.org/licenses/gpl-2.0.html
|
||||
Tags: blog, two-columns, right-sidebar, magazine
|
||||
Text Domain: qdouze-wordpress-theme
|
||||
Tags: blog, two-columns, right-sidebar, artist, solarized
|
||||
Text Domain: kspace-wordpress-theme
|
||||
|
||||
This theme is licensed under the GPLv3.
|
||||
*/
|
||||
|
||||
|
||||
@import 'angled-edges';
|
||||
|
||||
@import 'palette';
|
||||
|
||||
@import 'definitions';
|
||||
|
|
@ -21,8 +24,4 @@
|
|||
|
||||
@import 'global';
|
||||
|
||||
@import 'cards';
|
||||
|
||||
@import 'buttons';
|
||||
|
||||
@import 'blog';
|
||||
@import 'drawing';
|
||||
|
|
|
|||
3297
style.css
3297
style.css
File diff suppressed because one or more lines are too long
Reference in a new issue