Browse Source

feat: use kazhnuz.css

main
Kazhnuz Klappsthul 5 months ago
parent
commit
c6d8aa0b7a
16 changed files with 3659 additions and 2152 deletions
  1. +1
    -0
      generate.sh
  2. +143
    -0
      scss/_angled-edges.scss
  3. +0
    -199
      scss/_blog.scss
  4. +0
    -188
      scss/_buttons.scss
  5. +0
    -235
      scss/_cards.scss
  6. +92
    -105
      scss/_definitions.scss
  7. +97
    -0
      scss/_drawing.scss
  8. +2
    -34
      scss/_font-face.scss
  9. +230
    -92
      scss/_global.scss
  10. +123
    -13
      scss/_palette.scss
  11. +143
    -84
      scss/_typography.scss
  12. +200
    -0
      scss/components/_buttons.scss
  13. +246
    -0
      scss/components/_cards.scss
  14. +250
    -0
      scss/components/_previews.scss
  15. +10
    -11
      scss/style.scss
  16. +2122
    -1191
      style.css

+ 1
- 0
generate.sh View File

@ -0,0 +1 @@
sassc scss/style.scss > style.css

+ 143
- 0
scss/_angled-edges.scss View 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`';
}
}

+ 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: $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); }
}

+ 0
- 235
scss/_cards.scss View File

@ -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();
}

+ 92
- 105
scss/_definitions.scss View File

@ -1,137 +1,124 @@
/* --- 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 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;
@mixin borders() {
border: $border-size solid rgba(0, 0, 0, 0.3)
}
// MIXINS RESPONSIVES
@mixin border-radius() {
border-radius: $border-radius $border-radius $border-radius $border-radius;
}
// Small tablets and large smartphones (landscape view)
$screen-sm-min: 576px;
@mixin li-no-margin() {
li {
margin: 0;
}
}
// Small tablets (portrait view)
$screen-md-min: 768px;
/* 1.1 - Utils */
// Tablets and small desktops
$screen-lg-min: 992px;
.no-pills {
list-style:none;
// 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;
}
}
.align {
&-center, &center {text-align: center;}
&-left, &left {text-align: left;}
&-right, &right {text-align: right;}
// Large devices
@mixin lg {
@media (min-width: #{$screen-lg-min}) {
@content;
}
}
/* 1.2 - Background colors */
// Extra large devices
@mixin xl {
@media (min-width: #{$screen-xl-min}) {
@content;
}
}
@mixin background-color($background-color, $text-color) {
background-color: $background-color!important;
color: $text-color;
// Extra large desktops
@mixin xxl {
@media (min-width: #{$screen-xxl-min}) {
@content;
}
}
.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); }
// Custom devices
@mixin rwd($screen) {
@media (min-width: $screen+'px' ) {
@content;
}
}
/* 1.3 - Screen Reader */
// MIXINS AUTRES
@media screen {
.screen-reader-text {
display: none;
}
@mixin borders() {
border: $border-size solid rgba(0, 0, 0, 0.3)
}
/* 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;
@mixin border-radius() {
border-radius: $border-radius $border-radius $border-radius $border-radius;
}
.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%) ;
@mixin biseau($size) {
position: relative;
z-index:1;
overflow: visible;
&: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
- 0
scss/_drawing.scss View 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%;
}

+ 2
- 34
scss/_font-face.scss View File

@ -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;
}
}*/

+ 230
- 92
scss/_global.scss View File

@ -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;
@mixin li-no-margin() {
li {
margin: 0;
}
}
@media (max-width: 767.98px) {
body {
background: none;
padding: 0;
}
@mixin container-big() {
padding-left: $lineheight;
padding-right: $lineheight;
max-width: 1600px;
margin:auto;
}
#wrapper {
background-color: #FFF
.no-pills {
list-style:none;
}
/* 3.1 - Header */
.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;
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%;
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;
}
@include li-no-margin();
}
.dropdown-menu {
box-shadow: $narrow-shadow, $inset-shadow;
}
/* ------------------ CONTAINERS ------------------- */
.container-big {
@include container-big();
}
.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";
}
&:focus, &:hover:focus {
opacity: 1;
background-color: #FFF;
color: #444;
box-shadow: $inset-shadow-inverted;
&::placeholder {
color: #444;
}
}
.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";
}
}
}
.dropdown-menu {
box-shadow: $narrow-shadow, $inset-shadow;
.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;
}
/* 3.2 - Footer */
/* ------------------ 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;
}
}
}
}
}

+ 123
- 13
scss/_palette.scss View File

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

+ 143
- 84
scss/_typography.scss View File

@ -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.