parent
16af9f9645
commit
d4c3a6f5be
@ -1,16 +1,18 @@ |
||||
<div class="card card-primary"> |
||||
<div class="card head-primary"> |
||||
<div class="card-header"><i class="fa fa-folder" aria-hidden="true"></i> Catรฉgories</div> |
||||
<ul class="card-menu"> |
||||
<?php |
||||
$categories = get_categories( array( |
||||
'orderby' => 'name', |
||||
'order' => 'ASC' |
||||
) ); |
||||
<div class="menu fg-dark"> |
||||
<ul> |
||||
<?php |
||||
$categories = get_categories( array( |
||||
'orderby' => 'name', |
||||
'order' => 'ASC' |
||||
) ); |
||||
|
||||
foreach( $categories as $category ) { |
||||
if ($category->slug != "blog" && $category->slug != "chapters") { |
||||
echo '<li><a class="menu-element" href="' . get_category_link($category->term_id) . '">' . $category->name . '<span class="menu-label label-secondary">'. $category->count . '</span></a></li>'; |
||||
} |
||||
}?> |
||||
</ul> |
||||
foreach( $categories as $category ) { |
||||
if ($category->slug != "blog" && $category->slug != "chapters") { |
||||
echo '<li><a class="menu-element" href="' . get_category_link($category->term_id) . '">' . $category->name . '<span class="badge bg-secondary m0">'. $category->count . '</span></a></li>'; |
||||
} |
||||
}?> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
|
||||
@ -1,143 +0,0 @@ |
||||
//------------------------------------------------------------------------------------- |
||||
// 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,0 +1,9 @@ |
||||
/* 0. CORE |
||||
** All the basic functions from the stylesheet |
||||
*/ |
||||
|
||||
@import 'core/normalize'; |
||||
@import 'core/box-sizing'; |
||||
@import 'core/typography'; |
||||
@import 'core/containers'; |
||||
@import 'core/columns'; |
||||
@ -1,124 +1,12 @@ |
||||
/* --- 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); |
||||
$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: 0px; |
||||
|
||||
$fontweight_big: 300; |
||||
$fontweight_base: 400; |
||||
$fontweight_bold: 600; |
||||
$fontweight_hyper: 800; |
||||
|
||||
$basefont: Open Sans, sans-serif; |
||||
$titlefont: Amatic SC, sans-serif; |
||||
|
||||
|
||||
// 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) |
||||
} |
||||
|
||||
@mixin border-radius() { |
||||
border-radius: $border-radius $border-radius $border-radius $border-radius; |
||||
} |
||||
|
||||
@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; |
||||
} |
||||
} |
||||
// DEFINITIONS |
||||
|
||||
// Global definitions and variables of the stylesheet |
||||
// With them, you can customize easily how the style look |
||||
// Look at each component inside the definitions subfolder to customize the |
||||
// styles |
||||
|
||||
@import 'definitions/palette'; |
||||
@import 'definitions/shadows'; |
||||
@import 'definitions/fonts'; |
||||
@import 'definitions/borders'; |
||||
@import 'definitions/sizing'; |
||||
|
||||
@ -0,0 +1,2 @@ |
||||
// DEPENDECIES |
||||
// Other style used as dependencies |
||||
@ -1,123 +0,0 @@ |
||||
/* 2.1 - Font Face */ |
||||
|
||||
/* 2.1.1 - OpenSans |
||||
|
||||
@font-face { |
||||
font-family: 'OpenSans'; |
||||
src: url('fonts/OpenSans-Light-webfont.eot'); |
||||
src: url('fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'), |
||||
url('fonts/OpenSans-Light-webfont.woff2') format('woff2'), |
||||
url('fonts/OpenSans-Light-webfont.woff') format('woff'), |
||||
url('fonts/OpenSans-Light-webfont.ttf') format('truetype'), |
||||
url('fonts/OpenSans-Light-webfont.svg#open_sansbold') format('svg'); |
||||
font-weight: 300; |
||||
font-style: normal; |
||||
} |
||||
|
||||
@font-face { |
||||
font-family: 'OpenSans'; |
||||
src: url('fonts/OpenSans-LightItalic-webfont.eot'); |
||||
src: url('fonts/OpenSans-LightItalic-webfont.eot?#iefix') format('embedded-opentype'), |
||||
url('fonts/OpenSans-LightItalic-webfont.woff2') format('woff2'), |
||||
url('fonts/OpenSans-LightItalic-webfont.woff') format('woff'), |
||||
url('fonts/OpenSans-LightItalic-webfont.ttf') format('truetype'), |
||||
url('fonts/OpenSans-LightItalic-webfont.svg#open_sansbold') format('svg'); |
||||
font-weight: 300; |
||||
font-style: italic; |
||||
} |
||||
|
||||
@font-face { |
||||
font-family: 'OpenSans'; |
||||
src: url('fonts/OpenSans-Regular-webfont.eot'); |
||||
src: url('fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'), |
||||
url('fonts/OpenSans-Regular-webfont.woff2') format('woff2'), |
||||
url('fonts/OpenSans-Regular-webfont.woff') format('woff'), |
||||
url('fonts/OpenSans-Regular-webfont.ttf') format('truetype'), |
||||
url('fonts/OpenSans-Regular-webfont.svg#open_sansbold') format('svg'); |
||||
font-weight: 400; |
||||
font-style: normal; |
||||
} |
||||
|
||||
@font-face { |
||||
font-family: 'OpenSans'; |
||||
src: url('fonts/OpenSans-Italic-webfont.eot'); |
||||
src: url('fonts/OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'), |
||||
url('fonts/OpenSans-Italic-webfont.woff2') format('woff2'), |
||||
url('fonts/OpenSans-Italic-webfont.woff') format('woff'), |
||||
url('fonts/OpenSans-Italic-webfont.ttf') format('truetype'), |
||||
url('fonts/OpenSans-Italic-webfont.svg#open_sansbold') format('svg'); |
||||
font-weight: 400; |
||||
font-style: italic; |
||||
} |
||||
|
||||
@font-face { |
||||
font-family: 'OpenSans'; |
||||
src: url('fonts/OpenSans-Semibold-webfont.eot'); |
||||
src: url('fonts/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'), |
||||
url('fonts/OpenSans-Semibold-webfont.woff2') format('woff2'), |
||||
url('fonts/OpenSans-Semibold-webfont.woff') format('woff'), |
||||
url('fonts/OpenSans-Semibold-webfont.ttf') format('truetype'), |
||||
url('fonts/OpenSans-Semibold-webfont.svg#open_sansbold') format('svg'); |
||||
font-weight: 600; |
||||
font-style: normal; |
||||
} |
||||
|
||||
@font-face { |
||||
font-family: 'OpenSans'; |
||||
src: url('fonts/OpenSans-SemiboldItalic-webfont.eot'); |
||||
src: url('fonts/OpenSans-SemiboldItalic-webfont.eot?#iefix') format('embedded-opentype'), |
||||
url('fonts/OpenSans-SemiboldItalic-webfont.woff2') format('woff2'), |
||||
url('fonts/OpenSans-SemiboldItalic-webfont.woff') format('woff'), |
||||
url('fonts/OpenSans-SemiboldItalic-webfont.ttf') format('truetype'), |
||||
url('fonts/OpenSans-SemiboldItalic-webfont.svg#open_sansbold') format('svg'); |
||||
font-weight: 600; |
||||
font-style: italic; |
||||
} |
||||
|
||||
@font-face { |
||||
font-family: 'OpenSans'; |
||||
src: url('fonts/OpenSans-Bold-webfont.eot'); |
||||
src: url('fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), |
||||
url('fonts/OpenSans-Bold-webfont.woff2') format('woff2'), |
||||
url('fonts/OpenSans-Bold-webfont.woff') format('woff'), |
||||
url('fonts/OpenSans-Bold-webfont.ttf') format('truetype'), |
||||
url('fonts/OpenSans-Bold-webfont.svg#open_sansbold') format('svg'); |
||||
font-weight: 700; |
||||
font-style: normal; |
||||
} |
||||
|
||||
@font-face { |
||||
font-family: 'OpenSans'; |
||||
src: url('fonts/OpenSans-BoldItalic-webfont.eot'); |
||||
src: url('fonts/OpenSans-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'), |
||||
url('fonts/OpenSans-BoldItalic-webfont.woff2') format('woff2'), |
||||
url('fonts/OpenSans-BoldItalic-webfont.woff') format('woff'), |
||||
url('fonts/OpenSans-BoldItalic-webfont.ttf') format('truetype'), |
||||
url('fonts/OpenSans-BoldItalic-webfont.svg#open_sansbold') format('svg'); |
||||
font-weight: 700; |
||||
font-style: italic; |
||||
} |
||||
|
||||
@font-face { |
||||
font-family: 'OpenSans'; |
||||
src: url('fonts/OpenSans-ExtraBold-webfont.eot'); |
||||
src: url('fonts/OpenSans-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'), |
||||
url('fonts/OpenSans-ExtraBold-webfont.woff2') format('woff2'), |
||||
url('fonts/OpenSans-ExtraBold-webfont.woff') format('woff'), |
||||
url('fonts/OpenSans-ExtraBold-webfont.ttf') format('truetype'), |
||||
url('fonts/OpenSans-ExtraBold-webfont.svg#open_sansbold') format('svg'); |
||||
font-weight: 800; |
||||
font-style: normal; |
||||
} |
||||
|
||||
@font-face { |
||||
font-family: 'OpenSans'; |
||||
src: url('fonts/OpenSans-ExtraBoldItalic-webfont.eot'); |
||||
src: url('fonts/OpenSans-ExtraBoldItalic-webfont.eot?#iefix') format('embedded-opentype'), |
||||
url('fonts/OpenSans-ExtraBoldItalic-webfont.woff2') format('woff2'), |
||||
url('fonts/OpenSans-ExtraBoldItalic-webfont.woff') format('woff'), |
||||
url('fonts/OpenSans-ExtraBoldItalic-webfont.ttf') format('truetype'), |
||||
url('fonts/OpenSans-ExtraBoldItalic-webfont.svg#open_sansbold') format('svg'); |
||||
font-weight: 800; |
||||
font-style: italic; |
||||
}*/ |
||||
@ -1,295 +1,5 @@ |
||||
/* --- 03. GLOBAL STYLING --- */ |
||||
/* 4 - Custom styling |
||||
* Styles that are custom to this particular theme |
||||
**/ |
||||
|
||||
/* |
||||
* Les styles "globaux" touchant toute la page. |
||||
* |
||||
*/ |
||||
|
||||
@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-skyblue url('img/background.png') center bottom repeat-x; |
||||
border-top: 6px solid $color-dark2; |
||||
padding-top: .75rem; |
||||
padding-bottom:1.5rem; |
||||
} |
||||
|
||||
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; |
||||
max-width: 1600px; |
||||
margin: auto; |
||||
|
||||
img { |
||||
width: 600px; |
||||
height: auto; |
||||
margin-top:0rem; |
||||
} |
||||
|
||||
a, a:visited, a:hover { |
||||
background-color:transparent; |
||||
} |
||||
} |
||||
|
||||
.toolbar { |
||||
display:flex; |
||||
justify-content: space-between; |
||||
margin:auto; |
||||
padding:0; |
||||
max-width: 1600px; |
||||
z-index:2; |
||||
|
||||
ul { |
||||
display:flex; |
||||
margin: 0; |
||||
padding: 0; |
||||
li { |
||||
list-style: none; |
||||
margin:0; |
||||
position:relative; |
||||
z-index: 2; |
||||
ul { |
||||
display:none; |
||||
position:absolute; |
||||
left:-0.75rem; |
||||
background-color:$color-light2; |
||||
padding: 1.5rem; |
||||
padding-top: 0.5rem; |
||||
padding-bottom: 0.5rem; |
||||
box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3); |
||||
z-index: 2; |
||||
} |
||||
|
||||
&:hover { |
||||
ul { |
||||
display:flex; |
||||
flex-direction:column; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.btn-navbar { |
||||
margin:0rem; |
||||
margin-left:0.75rem; |
||||
margin-right: 0.75rem; |
||||
} |
||||
} |
||||
|
||||
.navbar { |
||||
border-left: 0; |
||||
border-right: 0; |
||||
padding: 0.75rem; |
||||
color: $color-light; |
||||
a { |
||||
color: $color-light; |
||||
} |
||||
@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"; |
||||
} |
||||
} |
||||
|
||||
.mainpane { |
||||
grid-area: main; |
||||
} |
||||
|
||||
.sidebar { |
||||
grid-area: side; |
||||
} |
||||
|
||||
ul.tag-list { |
||||
display:flex; |
||||
padding-bottom:0; |
||||
overflow: hidden; |
||||
height:auto; |
||||
flex-wrap: wrap; |
||||
|
||||
li { |
||||
list-style: none; |
||||
margin:3px; |
||||
} |
||||
} |
||||
|
||||
.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 { |
||||
@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; |
||||
} |
||||
|
||||
a, a:visited { |
||||
&:hover, &:active, &:visited { |
||||
color: $color-light; |
||||
} |
||||
} |
||||
|
||||
} |
||||
} |
||||
|
||||
/* social media */ |
||||
|
||||
ul.social { |
||||
font-size:1.5em; |
||||
padding-bottom:1.5em; |
||||
margin:auto; |
||||
text-align:center; |
||||
li { |
||||
margin:0; |
||||
list-style: none; |
||||
display: inline; |
||||
a, a:visited { |
||||
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; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@import 'custom/global'; |
||||
@ -0,0 +1,10 @@ |
||||
// MIXINS |
||||
// Include every mixins files |
||||
|
||||
@import 'mixins/colors'; |
||||
@import 'mixins/responsive'; |
||||
@import 'mixins/borders'; |
||||
@import 'mixins/shape'; |
||||
@import 'mixins/btns'; |
||||
@import 'mixins/panels'; |
||||
@import 'mixins/li'; |
||||
@ -1,115 +0,0 @@ |
||||
/* --- 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-red: #dc322f; |
||||
$color-orange: #cb4b16; |
||||
$color-green: #859900; |
||||
$color-skyblue: #2aa198; |
||||
$color-dark: #002b36; |
||||
$color-light: #fdf6e3; |
||||
$color-yellow: #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 |
||||
|
||||
::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); } |
||||
&-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); } |
||||
&-yellow { @include background-color($color-yellow, $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); } |
||||
&-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); } |
||||
&-yellow { @include text-color($color-yellow); } |
||||
&-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); } |
||||