init: portage initial sous mouette

This commit is contained in:
Kazhnuz Klappsthul 2022-12-17 22:34:02 +01:00
parent 16af9f9645
commit d4c3a6f5be
72 changed files with 4588 additions and 3494 deletions

View File

@ -1,6 +1,6 @@
<?php get_header(); ?> <?php get_header(); ?>
<main> <main>
<div class="card card-danger"> <div class="card head-danger">
<div class="card-header"><i class="fa fa-folder-exclamation-mark" aria-hidden="true"></i> 404 Not Found</div> <div class="card-header"><i class="fa fa-folder-exclamation-mark" aria-hidden="true"></i> 404 Not Found</div>
<div class="card-body"> <div class="card-body">
<p>La page que vous cherchez n'a pas été trouvée</p> <p>La page que vous cherchez n'a pas été trouvée</p>

View File

@ -9,7 +9,7 @@
<!-- Sidebar custom pour contenir la description --> <!-- Sidebar custom pour contenir la description -->
<aside class="sidebar"> <aside class="sidebar">
<div class="card card-info"> <div class="card head-info">
<div class="card-header"><i class="fa fa-folder-open"></i> <?php echo single_cat_title(); ?></div> <div class="card-header"><i class="fa fa-folder-open"></i> <?php echo single_cat_title(); ?></div>
<div class="card-body"> <div class="card-body">
<?php the_archive_description() ?> <?php the_archive_description() ?>

View File

@ -9,7 +9,7 @@
<!-- Sidebar custom pour contenir la description --> <!-- Sidebar custom pour contenir la description -->
<aside class="sidebar"> <aside class="sidebar">
<div class="card card-info"> <div class="card head-info">
<div class="card-header"><i class="fa fa-folder-open" aria-hidden="true"></i> <?php echo single_cat_title(); ?></div> <div class="card-header"><i class="fa fa-folder-open" aria-hidden="true"></i> <?php echo single_cat_title(); ?></div>
<div class="card-body"> <div class="card-body">
<?php the_archive_description() ?> <?php the_archive_description() ?>

View File

@ -57,7 +57,7 @@ $oddcomment = 'alt';
<?php endif; ?> <?php endif; ?>
<?php if ('open' == $post->comment_status) : ?> <?php if ('open' == $post->comment_status) : ?>
<div class="card card-primary"> <div class="card head-primary">
<h2 id="respond" class="card-header">Laissez un commentaire</h2> <h2 id="respond" class="card-header">Laissez un commentaire</h2>
<!-- Cas du besoin de s'enregistrer --> <!-- Cas du besoin de s'enregistrer -->

View File

@ -17,7 +17,7 @@
if ( have_posts() ) while ( have_posts() ) : the_post(); ?> if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
<div class="card card-primary" id="post-<?php the_ID(); ?>"> <div class="card head-primary" id="post-<?php the_ID(); ?>">
<div class="card-header"><h1><?php the_title(); ?></h1></div> <div class="card-header"><h1><?php the_title(); ?></h1></div>
<div class="flex-that mb"> <div class="flex-that mb">
<div class="article-category"> <div class="article-category">

View File

@ -1,4 +1,4 @@
<footer> <footer class="bg-dark">
<ul class="social"> <ul class="social">
<?php <?php
$listmenu = get_nav_menu_locations(); $listmenu = get_nav_menu_locations();
@ -17,18 +17,18 @@
</li> </li>
</ul> </ul>
<div class="footer-collumns"> <div class="container columns">
<div> <div class="col-md-4">
<p>Les contenus sont diffusé sous licence Creative Common Attribution - Partage à l'Identique 4.0 - hors mention contraire.</p> <p>Les contenus sont diffusé sous licence Creative Common Attribution - Partage à l'Identique 4.0 - hors mention contraire.</p>
<p>Ces licences vous autorise à partager et copier mes travaux, tant que vous me citiez en source, et que vous autorisez la même chose pour les travaux qui en seraient dérivés. N'hésitez pas à partager ! <i class="text-red fa fa-heart" aria-hidden="true"></i></p> <p>Ces licences vous autorise à partager et copier mes travaux, tant que vous me citiez en source, et que vous autorisez la même chose pour les travaux qui en seraient dérivés. N'hésitez pas à partager ! <i class="text-red fa fa-heart" aria-hidden="true"></i></p>
</div> </div>
<div> <div class="col-md-4">
<p>Ce site est propulsé par <a href="https://wordpress.org">Wordpress</a></p> <p>Ce site est propulsé par <a href="https://wordpress.org">Wordpress</a></p>
<p>Le <a href="https://git.kobold.cafe/kazhnuz.space/kspace-wordpress-theme">theme wordpress</a> de ce site est disponible sous licence CC BY-SA et GPL v3. Il utilise <a href="https://picturepan2.github.io/spectre/">Spectre</a> et <a href="https://forkawesome.github.io/Fork-Awesome/">Fork-Awesome</a>.</p> <p>Le <a href="https://git.kobold.cafe/kazhnuz.space/kspace-wordpress-theme">theme wordpress</a> de ce site est disponible sous licence CC BY-SA et GPL v3. Il utilise <a href="https://picturepan2.github.io/spectre/">Spectre</a> et <a href="https://forkawesome.github.io/Fork-Awesome/">Fork-Awesome</a>.</p>
</div> </div>
<div> <div class="col-md-4">
<p>Kazhnuz Space et les différents sites/services qui le composent sont fourni "tel-quel", sans garantie. Cependant, toute critique, remarque, etc. est la bienvenue. Pour cela, vous pouvez me contacter à kazhnuz [at] kobold [point] cafe ou sur les réseaux sociaux visible plus haut</p> <p>Kazhnuz Space et les différents sites/services qui le composent sont fourni "tel-quel", sans garantie. Cependant, toute critique, remarque, etc. est la bienvenue. Pour cela, vous pouvez me contacter à kazhnuz [at] kobold [point] cafe ou sur les réseaux sociaux visible plus haut</p>
</div> </div>
</div> </div>

View File

@ -1,4 +1,4 @@
<nav class="toolbar flex-that"> <nav class="menu toolbar fg-light">
<ul> <ul>
<li> <li>
<a href="<?php echo site_url(); ?>" class="btn btn-navbar"> <a href="<?php echo site_url(); ?>" class="btn btn-navbar">
@ -32,7 +32,7 @@
?> ?>
</ul> </ul>
<ul> <ul class="f-end">
<?php <?php
$listmenu = get_nav_menu_locations(); $listmenu = get_nav_menu_locations();
$menu = wp_get_nav_menu_items($listmenu['top-navbar-2']); $menu = wp_get_nav_menu_items($listmenu['top-navbar-2']);

View File

@ -1,5 +1,5 @@
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?> <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<div class="card card-primary" id="post-<?php the_ID(); ?>"> <div class="card head-primary" id="post-<?php the_ID(); ?>">
<div class="card-header"><h1><?php the_title(); ?></h1></div> <div class="card-header"><h1><?php the_title(); ?></h1></div>
<div class="flex-that mb"> <div class="flex-that mb">
<div class="article-category"> <div class="article-category">

View File

@ -1,7 +1,7 @@
<?php if(have_posts()) : ?> <?php if(have_posts()) : ?>
<div class="previews-section"> <div class="previews-section">
<?php while(have_posts()) : the_post(); ?> <?php while(have_posts()) : the_post(); ?>
<article class="card card-preview card-primary"> <article class="card card-preview head-primary">
<a href="<?php the_permalink(); ?>" class="preview-link"> <a href="<?php the_permalink(); ?>" class="preview-link">
<div class="preview-item"> <div class="preview-item">
<div class="preview-content" aria-hidden="true"><?php the_excerpt(); ?></div> <div class="preview-content" aria-hidden="true"><?php the_excerpt(); ?></div>

View File

@ -1,4 +1,4 @@
<div class="card card-primary"> <div class="card head-primary">
<div class="card-header"><i class="fa fa-folder" aria-hidden="true"></i> Archives</div> <div class="card-header"><i class="fa fa-folder" aria-hidden="true"></i> Archives</div>
<div class="card-body"> <div class="card-body">
<ul class="tag-list"> <ul class="tag-list">

View File

@ -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> <div class="card-header"><i class="fa fa-folder" aria-hidden="true"></i> Catégories</div>
<ul class="card-menu"> <div class="menu fg-dark">
<?php <ul>
$categories = get_categories( array( <?php
'orderby' => 'name', $categories = get_categories( array(
'order' => 'ASC' 'orderby' => 'name',
) ); 'order' => 'ASC'
) );
foreach( $categories as $category ) { foreach( $categories as $category ) {
if ($category->slug != "blog" && $category->slug != "chapters") { 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>'; 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> </ul>
</div>
</div> </div>

View File

@ -1,6 +1,7 @@
<div class="card card-primary"> <div class="card head-primary">
<div class="card-header"><i class="fa fa-rss" aria-hidden="true"></i> Publications</div> <div class="card-header"><i class="fa fa-rss" aria-hidden="true"></i> Publications</div>
<ul class="card-menu trim-that"> <div class="menu fg-dark">
<ul>
<?php <?php
wp_get_archives( array( wp_get_archives( array(
'type' => 'postbypost', 'type' => 'postbypost',
@ -9,5 +10,6 @@
'limit' => 6 'limit' => 6
) ); ) );
?> ?>
</ul> </ul>
</div>
</div> </div>

View File

@ -3,7 +3,7 @@ $listmenu = get_nav_menu_locations();
$menu = wp_get_nav_menu_items($listmenu['link-menu']); $menu = wp_get_nav_menu_items($listmenu['link-menu']);
if ($menu != null) { if ($menu != null) {
?> ?>
<div class="card card-primary"> <div class="card head-primary">
<div class="card-header"><i class="fa fa-link" aria-hidden="true"></i> Liens</div> <div class="card-header"><i class="fa fa-link" aria-hidden="true"></i> Liens</div>
<ul class="card-menu"> <ul class="card-menu">
<?php <?php

View File

@ -9,7 +9,7 @@ $tags = get_tags($args);
?> ?>
<div class="card card-primary"> <div class="card head-primary">
<div class="card-header"><i class="fa fa-tags" aria-hidden="true"></i> Tags</div> <div class="card-header"><i class="fa fa-tags" aria-hidden="true"></i> Tags</div>
<div class="card-body"> <div class="card-body">
<ul class="tag-list"> <ul class="tag-list">

View File

@ -260,7 +260,7 @@ In id suscipit elit.</code></pre>
</div> </div>
<aside class="sidebar col-md-3"> <aside class="sidebar col-md-3">
<section class="card card-primary"> <section class="card head-primary">
<div class="card-header"> <div class="card-header">
<h3 class="card-title">Catégories</h3> <h3 class="card-title">Catégories</h3>
</div> </div>
@ -276,7 +276,7 @@ In id suscipit elit.</code></pre>
</div> </div>
</section> </section>
<section class="card card-primary"> <section class="card head-primary">
<div class="card-header"> <div class="card-header">
<h3 class="card-title"> Archive</h3> <h3 class="card-title"> Archive</h3>
</div> </div>
@ -292,7 +292,7 @@ In id suscipit elit.</code></pre>
</div> </div>
</section> </section>
<section class="card card-primary"> <section class="card head-primary">
<div class="card-header"> <div class="card-header">
<h3 class="card-title">Navigation</h3> <h3 class="card-title">Navigation</h3>
</div> </div>

View File

@ -19,7 +19,6 @@
<link href="https://fonts.googleapis.com/css?family=Amatic+SC&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Amatic+SC&display=swap" rel="stylesheet">
<!-- framework utilisés --> <!-- framework utilisés -->
<link href="<?php echo get_template_directory_uri() . "/dep/spectre/css/spectre.min.css"; ?>" rel="stylesheet"/>
<link href="<?php echo get_template_directory_uri() . "/dep/fork-awesome/css/fork-awesome.min.css"; ?>" rel="stylesheet"/> <link href="<?php echo get_template_directory_uri() . "/dep/fork-awesome/css/fork-awesome.min.css"; ?>" rel="stylesheet"/>
<!-- CSS --> <!-- CSS -->

View File

@ -260,7 +260,7 @@ In id suscipit elit.</code></pre>
</div> </div>
<aside class="sidebar col-md-3"> <aside class="sidebar col-md-3">
<section class="card card-primary"> <section class="card head-primary">
<div class="card-header"> <div class="card-header">
<h3 class="card-title">Catégories</h3> <h3 class="card-title">Catégories</h3>
</div> </div>
@ -276,7 +276,7 @@ In id suscipit elit.</code></pre>
</div> </div>
</section> </section>
<section class="card card-primary"> <section class="card head-primary">
<div class="card-header"> <div class="card-header">
<h3 class="card-title"> Archive</h3> <h3 class="card-title"> Archive</h3>
</div> </div>
@ -292,7 +292,7 @@ In id suscipit elit.</code></pre>
</div> </div>
</section> </section>
<section class="card card-primary"> <section class="card head-primary">
<div class="card-header"> <div class="card-header">
<h3 class="card-title">Navigation</h3> <h3 class="card-title">Navigation</h3>
</div> </div>

View File

@ -15,7 +15,7 @@
<?php endif; ?> <?php endif; ?>
</main> </main>
<aside class="sidebar"> <aside class="sidebar">
<div class="card card-info"> <div class="card head-info">
<?php $desc = explode(";", get_the_author_meta( 'infodata' )) ?> <?php $desc = explode(";", get_the_author_meta( 'infodata' )) ?>
<div class="card-header"><i class="fa fa-info" aria-hidden="true"></i> <?php <div class="card-header"><i class="fa fa-info" aria-hidden="true"></i> <?php
if (!empty($desc[1])) { if (!empty($desc[1])) {

View File

@ -11,7 +11,7 @@
</div> </div>
</article> </article>
<div class="card card-primary"> <div class="card head-primary">
<h2 class="card-header">Liste de mes réseaux sociaux</h2> <h2 class="card-header">Liste de mes réseaux sociaux</h2>
<table> <table>
<thead> <thead>

View File

@ -11,7 +11,7 @@
<?php if ( ! empty( $terms ) && is_array( $terms ) ) : ?> <?php if ( ! empty( $terms ) && is_array( $terms ) ) : ?>
<?php foreach ( $terms as $term ) : ?> <?php foreach ( $terms as $term ) : ?>
<article class="card card-preview card-primary"> <article class="card card-preview head-primary">
<a href="<?php echo esc_url( get_term_link( $term ) ) ?>" class="preview-link"> <a href="<?php echo esc_url( get_term_link( $term ) ) ?>" class="preview-link">
<div class="preview-item"> <div class="preview-item">
<?php <?php
@ -40,7 +40,7 @@
<aside class="sidebar"> <aside class="sidebar">
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?> <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<div class="card card-info"> <div class="card head-info">
<div class="card-header"><i class="fa fa-folder-open" aria-hidden="true"></i> <?php the_title(); ?></div> <div class="card-header"><i class="fa fa-folder-open" aria-hidden="true"></i> <?php the_title(); ?></div>
<div class="card-body"> <div class="card-body">
<?php the_content(); ?> <?php the_content(); ?>

View File

@ -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`';
}
}

9
scss/_core.scss Normal file
View File

@ -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';

View File

@ -1,124 +1,12 @@
/* --- 01. DEFINITIONS --- */ // DEFINITIONS
/* // Global definitions and variables of the stylesheet
* Les définitions globales de la stylesheet. // With them, you can customize easily how the style look
* Elle permette de rapidement modifier le style globale de la fiche en modifiant les éléments centraux // Look at each component inside the definitions subfolder to customize the
* D'autres définitions importantes sont visibles dans les autres parties de la fiche. // styles
*
* Pour customiser les couleurs, voyez _palette.scss
*/
// A modifier pour customiser le style facilement : @import 'definitions/palette';
@import 'definitions/shadows';
$large-shadow: 0px 2px 10px rgba(0, 0, 0, 0); @import 'definitions/fonts';
$narrow-shadow: 0px 2px 6px rgba(0, 0, 0, 0); @import 'definitions/borders';
$inset-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0); @import 'definitions/sizing';
$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;
}
}

2
scss/_dep.scss Normal file
View File

@ -0,0 +1,2 @@
// DEPENDECIES
// Other style used as dependencies

View File

@ -5,75 +5,13 @@
* *
*/ */
@import 'components/cards';
@import 'components/buttons'; @import 'components/buttons';
@import 'components/btn-groups';
@import 'components/breadcrumb';
@import 'components/pagination';
@import 'components/cards';
@import 'components/menus';
@import 'components/toasts';
@import 'components/tables';
@import 'components/previews'; @import 'components/previews';
@import 'components/sidebar';
.flex-that {
display: flex;
justify-content: space-between;
}
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);
}
.pigimg, .mb {
padding-bottom:1.5rem;
}
.screen-reader-text {
visibility: collapse;
font-size:0;
}
nav.pagination {
padding-bottom:1.5rem;
.nav-links {
text-align: center;
width:100%;
}
.page-numbers, .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%;
}
.input-group {
padding-bottom:1.5rem;
input, textarea {
width:100%;
background-color:$color-light;
border-radius:0px;
border: 1px solid rgba(0,0,0,0.2);
padding:0.375rem;
}
}

View File

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

View File

@ -1,295 +1,5 @@
/* --- 03. GLOBAL STYLING --- */ /* 4 - Custom styling
* Styles that are custom to this particular theme
**/
/* @import 'custom/global';
* 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;
}
}
}
}

10
scss/_mixins.scss Normal file
View File

@ -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';

View File

@ -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); }
&-success { @include text-color($color-success); }
}

View File

@ -1,331 +0,0 @@
/*
* 2 - Typography ( _typography.scss )
*
* This part of the (s)css handle everything related to the typography
* like paragraphs, blockquote, etc.
*
*/
@import 'font-face';
/* 2.2 - Global Typography */
@mixin paragraph() {
padding:0;
padding-bottom: $lineheight;
margin: 0;
}
body {
font-family: $basefont;
text-align: left;
font-size: $fontsize;
line-height: $lineheight;
color: $color-font;
font-weight: $fontweight_base;
}
.night-mode {
color: $color-light2;
}
strong {
font-weight: $fontweight_bold;
}
em {
font-style: italic;
font-weight: $fontweight_base;
}
a, a:visited {
color: $color-light;
background-color: $color-link;
text-decoration:none;
padding:0.05rem;
padding-left:0.25rem;
padding-right:0.25rem;
border-radius:0.1rem;
&:hover, &:active, &:focus {
color: $color-link;
background-color: transparent;
text-decoration:none;
}
}
p {
@include paragraph();
&:last-child {
padding-bottom:0;
}
}
ul, ol {
@include paragraph();
list-style: disc;
ul, ol {
padding-bottom:0;
margin:0;
}
li {
margin:0;
margin-left: $lineheight;
line-height: $lineheight;
}
}
::selection { background: $color-selection; color: $color-light; }
::-moz-selection { background: $color-selection; color: $color-light; }
/* 2.2 - Text Wrapper */
.container-article, .container-typographic {
max-width: 800px;
margin:auto;
margin-bottom: 3rem;
}
.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;
}
.article-author {
margin:0;
padding:0;
.card-meta {
margin:0;
}
}
.bypass-flex-fontsize {
line-height: $lineheight;
}
}
article.maintext {
padding-bottom: $lineheight;
}
/* 2.3 - Titles */
@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: $basefont;
text-align: left;
font-size: 1em;
padding:0;
margin:0;
font-weight: $fontweight_base;
&.page-title {
color: $color-primary;
i {
font-size: 0.55em;
position: relative;
top: -0.175em;
}
&-flex {
display: flex;
flex-direction: row;
justify-content: space-between;
& > span, & > i, & > a {
display: block;
}
& > a {
color: $color-primary;
&:hover, &:focus, &:active {
color: darken($color-primary, 10%);
}
}
}
}
}
h1 {
//@include title(3.33em, 1.2em, 0.0em, 0.2em, 200);
@include newTitle($titlefont, 3.815, $fontweight_big);
color: $color-primary;
}
h2 {
//@include title(2.725em, 1.125em, 0em, 0.5625em, 200);
@include newTitle($basefont, 2.441, $fontweight_big);
}
h3 {
@include newTitle($basefont, 1.953, $fontweight_bold);
}
h4 {
@include newTitle($basefont, 1.563, $fontweight_hyper);
}
h5 {
@include newTitle($basefont, 1.25, $fontweight_bold);
}
h6 {
@include newTitle($basefont, 1, $fontweight_hyper);
}
/* 2.4 - hr */
hr {
border-top: 0px;
border-left: 0px;
border-right: 0px;
border-bottom: 1px;
border-color: rgba(1,1,1,0.15);
border-style: solid;
margin: 1.5em;
}
/* 2.5 - Wells and quotes */
@mixin well() {
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 {
@include well();
&:before {
content:"";
}
}
.well, pre, .pre, .well-pre {
@include well();
}
code {
background:transparent;
color: $color-red;
}
.small-text {
font-size: 0.9em;
}
/* 2.6 - Special styling */
mark {
border-radius: 0.2em;
padding:0 0.2em 0 0.2em;
background-color: lighten($color-mark, 30%);
color: inherit;
}
.night-mode mark {
background-color: $color-primary;
}
.time {
font-style: italic;
text-align: right;
width: 100%;
display: block;
}
/* 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); }
&-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); }
&-yellow { @include table-color($color-yellow); }
&-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); }
}
.text-maj {
text-transform: capitalize;
}

11
scss/_utils.scss Normal file
View File

@ -0,0 +1,11 @@
/* 1. Utils
** All the utilities class of the stylesheet
*/
@import 'utils/a11y';
@import 'utils/align';
@import 'utils/borders';
@import 'utils/colorize';
@import 'utils/lists';
@import 'utils/sizing';
@import 'utils/flex';

View File

@ -0,0 +1,6 @@
.badge {
@include button(0rem);
padding-left: $button_small;
padding-right: $button_small;
text-decoration:none!important;
}

View File

@ -0,0 +1,39 @@
/* ------------------ BREADCRUMB ------------------- */
ul.breadcrumb, ol.breadcrumb, .breadcrumb {
padding-top: 0em;
background-color:transparent;
margin: 0;
padding-bottom:$lineheight;
@include li-flex();
}
.breadcrumb li.breadcrumb-item {
padding:0;
margin:0!important;
&:before {
display:none;
}
a, & > span {
display:inline-block;
@include button($button-large);
@include button-fullcontrol($color-background-alt, accentuate($color-background-alt), get-color("dark2"));
margin:0 $button-group-margin 0 $button-group-margin;
&.active {
@include button-fullcontrol($color-primary, $color-primary, $color-font-light);
}
}
&:not(:first-child) a, &:not(:first-child) > span {
border-top-left-radius: 0;
border-bottom-left-radius:0;
}
&:not(:last-child) a, &:not(:last-child) > span {
border-top-right-radius: 0;
border-bottom-right-radius:0;
}
}

View File

@ -0,0 +1,26 @@
// BUTTONS GROUPS
.btn-toolbar {
padding: 0 $button-large;
}
.btn-group {
& > .btn {
@include border-radius($btn-radius);
margin:0 $button-group-margin 0 $button-group-margin!important;
}
&:not(:first-child) > .btn {
border-top-left-radius: 0;
border-bottom-left-radius:0;
&:before {
content: " "!important;
border-left:1px solid rgba(0,0,0,0.2);
}
}
&:not(:last-child) > .btn {
border-top-right-radius: 0;
border-bottom-right-radius:0;
}
}

View File

@ -4,72 +4,6 @@
* *
*/ */
$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 { .btn {
@include button($button_large); @include button($button_large);
&:hover, &:active { &:hover, &:active {
@ -81,120 +15,21 @@ $button_small: $lineheight_quarter;
} }
} }
.btn-small { .btn-small, .badge {
@include button($button_small); @include button($button_small);
padding-left: $button_small; padding-left: $button_small;
padding-right: $button_small; padding-right: $button_small;
text-decoration:none; text-decoration:none;
} }
.menu-label {
@include biseau($button_small);
padding-left: $button_small;
padding-right: $button_small;
}
// NAVBAR SPECIAL BUTTONS
.btn-navbar {
@include button-fullcontrol(transparent, rgba(0,0,0,0.1), $color-light);
padding-left: $button_small;
padding-right: $button_small;
}
.btn-readmore {
@include button-fullcontrol(transparent, rgba(0,0,0,0.05), $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 // COLORIZE BUTTONS
.btn, a.btn, .badge, .chip, a.chip, a.badge, .label, a.label, label.label { strong.btn-fake {
&-blue { @include button-color($color-blue, $color-button-light); } @include button($button_large);
&-violet { @include button-color($color-violet, $color-button-light); } @include button-fullcontrol(transparent, transparent, rgba(0,0,0,1));
&-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); }
&-yellow { @include button-color($color-yellow, $color-button-light); }
&-grey { @include button-color($color-grey, $color-button-light); }
&-primary { @include button-color($color-primary, $color-button-light); } .btn-readmore, .btn-link {
&-secondary { @include button-color($color-secondary, $color-button-light); } @include button-fullcontrol(transparent, accentuate($color-background-alt), $color-primary);
&-warning { @include button-color($color-warning, $color-button-light); } @include prefer-no-borders();
&-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;
padding-bottom: $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);}
}

View File

@ -8,144 +8,22 @@
$card-bigpad: $lineheight; $card-bigpad: $lineheight;
$card-smallpad: $lineheight_half; $card-smallpad: $lineheight_half;
@mixin card($size) { .card {
@include border-radius(); @include panel($card-bigpad);
background-color: $color-light2; display: flex;
box-shadow: $large-shadow; flex-direction: column;
border: none; color:$color-font;
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;
white-space: nowrap;
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 { &-body {
padding:0!important; padding:0!important;
margin:0!important;
} }
&-header { &-header {
@include card-header($card-bigpad); @include panel-header($card-bigpad);
.fa { .fa {
margin-right: 0.5em; 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, li a:visited {
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, a:visited {
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 */ /* CARD LIST - Make a list part of a card */
@ -191,63 +69,8 @@ ul.card-list, .card > ul {
&-success{@include list-color($color-success);} &-success{@include list-color($color-success);}
} }
.smallcard, .toast { .smallcard {
@include card($card-smallpad);
&-header { &-header {
@include card-header($card-bigpad); @include panel-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); }
&-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); }
&-yellow { @include card-color($color-yellow, $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); }
&-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); }
&-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); }
a, a:visited {
color: $color-light;
background-color:rgba(0,0,0,0.15);
text-decoration:none;
opacity:1;
&:hover, &:active, &:visited {
color: $color-light;
background-color:transparent;
opacity:1;
}
}
}

View File

@ -0,0 +1,11 @@
.input-group {
padding-bottom:$lineheight;
input, textarea {
width:100%;
background-color:$color-background;
border-radius:0px;
border: 1px solid rgba(0,0,0,0.2);
padding:$lineheight/4;
}
}

102
scss/components/_menus.scss Normal file
View File

@ -0,0 +1,102 @@
/* Menu handling */
.menu {
display: flex;
flex-direction: column;
padding: $lineheight/4;
ul,
li {
list-style: none;
padding: 0;
margin: 0;
}
a,
a:visited {
@include shape-style($lineheight_half);
display: flex;
line-height: $lineheight;
padding: $lineheight_quarter;
margin: 0;
justify-content: space-between;
align-items: center;
word-wrap: none;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
@include shape-style($lineheight_half);
//@include button-hover();
@include prefer-no-borders();
.badge {
margin: 0;
}
}
&.fg-light,
.fg-light & {
a {
color: $color-font-light;
&:hover,
&:active {
background-color: transparentize($color-font-light, 0.7);
}
}
}
&.fg-dark,
.fg-dark & {
a {
color: $color-font;
&:hover,
&:active {
background-color: transparentize($color-font, 0.85);
}
}
}
}
.toolbar {
flex-direction: row;
ul {
display: flex;
flex-direction: row;
flex-grow: 1;
}
li {
text-align: center;
a,
span,
em,
strong,
&.toolbar-element {
display: block;
padding: $lineheight/3;
padding-left: $lineheight/2;
padding-right: $lineheight/2;
}
}
}
.menu-divider {
position: relative;
left: -$lineheight_quarter;
font-weight: $fontweight_hyper;
padding-top: $lineheight_quarter;
padding-bottom: $lineheight_quarter;
}
.menu-label {
@include shape-style($button_small);
@include button-hover();
padding-left: $button_small;
padding-right: $button_small;
}

View File

@ -0,0 +1,25 @@
nav.pagination {
padding-bottom:$lineheight;
.nav-links {
text-align: center;
width:100%;
}
.page-numbers, .next, .prev {
@include button($button_small);
padding-left: $button_small;
padding-right: $button_small;
margin-right : $button_small / 8;
margin-left: $button_small / 8;
&:not(.current) {
@include button-color($color-background-alt);
}
&.current {
@include background-color($color-info);
&:hover {
@include background-color($color-info);
}
}
}
}

View File

@ -4,6 +4,9 @@
* *
*/ */
$preview-height: 8*$lineheight; $preview-height: 8*$lineheight;
$preview-content-height:165px;
$comment-peek-height:0px;
$comment-height:30px;
.previews-section { .previews-section {
display: grid; display: grid;
@ -53,6 +56,7 @@ $preview-height: 8*$lineheight;
.preview-link { .preview-link {
padding:0; padding:0;
background-color: transparent; background-color: transparent;
margin:0!important;
} }
.preview-item { .preview-item {
@ -61,7 +65,7 @@ $preview-height: 8*$lineheight;
line-height: $lineheight !important; line-height: $lineheight !important;
text-align:justify; text-align:justify;
background-color:rgba(0,0,0,0.00); background-color:rgba(0,0,0,0.00);
color:rgba(0,0,0,0.4); color:dim(getFontColor());
position: relative; position: relative;
display: flex; display: flex;
@ -75,12 +79,13 @@ $preview-height: 8*$lineheight;
top: 0; top: 0;
left: 0; left: 0;
position: absolute; position: absolute;
padding-top: $lineheight_half; padding-top: $card-header-vmargin/2;
backdrop-filter: none; backdrop-filter: none;
transition: background-color 0.3s; transition: background-color 0.3s;
@include border-radius($card-radius);
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
color: $color-light; color: $color-font-light;
font-size: 1rem; font-size: 1rem;
line-height: $lineheight; line-height: $lineheight;
font-weight:$fontweight_big; font-weight:$fontweight_big;
@ -89,9 +94,11 @@ $preview-height: 8*$lineheight;
.card-header { .card-header {
font-family: $basefont; font-family: $basefont;
font-size: 1rem; font-size: 1rem;
background-color: $color-primary; @include panel-header($lineheight_half);
@include card-header($lineheight_half); @include colorize-shape($color-primary);
color:getTextColorFromBackground($color-primary);
font-weight: $fontweight_big; font-weight: $fontweight_big;
margin-top:0px;
} }
} }
@ -103,7 +110,7 @@ $preview-height: 8*$lineheight;
.metadata-pills { .metadata-pills {
opacity: .9; opacity: .9;
transition: opacity .5s, height .5s; transition: opacity .5s, height .5s;
height:135px; height:$preview-content-height - $comment-height;
} }
} }
} }
@ -115,6 +122,9 @@ $preview-height: 8*$lineheight;
background-size: cover; background-size: cover;
min-height:100%; min-height:100%;
min-width:100%; min-width:100%;
@include border-radius($card-radius);
font-size:0.85rem;
line-height:1.25rem;
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
margin-bottom:0px; margin-bottom:0px;
@ -145,12 +155,13 @@ $preview-height: 8*$lineheight;
} }
.preview-metadata { .preview-metadata {
color: $color-light; color: $color-font-light;
height:165px; height:$preview-content-height;
overflow: hidden; overflow: hidden;
@include border-radius($card-radius);
.metadata-pills { .metadata-pills {
height:165px; height:$preview-content-height - $comment-peek-height;
opacity: 0; opacity: 0;
transition: opacity .3s, height .3s; transition: opacity .3s, height .3s;
display:flex; display:flex;
@ -161,24 +172,21 @@ $preview-height: 8*$lineheight;
} }
} }
.card-preview.card-info { .card-preview.head-info {
.comment-text { .comment-text {
@include angled-edge('outside top', 'upper left', $color-skyblue, 16); background-color:$color-info;
background-color:$color-skyblue;
} }
} }
.card-preview.card-grey { .card-preview.card-grey {
.comment-text { .comment-text {
@include angled-edge('outside top', 'upper left', $color-grey, 16); background-color:$color-muted;
background-color:$color-grey;
} }
} }
.comment-text { .comment-text {
@include angled-edge('outside top', 'upper left', $color-violet, 16); color: $color-font-light;
color: $color-light; background-color:$color-primary;
background-color:$color-violet;
text-align: center; text-align: center;
} }
@ -194,7 +202,7 @@ $preview-height: 8*$lineheight;
img.author-avatar, img.avatar { img.author-avatar, img.avatar {
display:block; display:block;
height: 4.5rem; height: $lineheight*3;
width:auto; width:auto;
border-radius:100%; border-radius:100%;
padding:0; padding:0;
@ -243,6 +251,7 @@ $preview-height: 8*$lineheight;
.cover { .cover {
width:100%; width:100%;
height:auto; height:auto;
@include border-radius($card-radius);
} }
.roman { .roman {

View File

@ -0,0 +1,21 @@
.sidebar-container {
width:100%;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
row-gap: $lineheight;
column-gap: $lineheight*2;
grid-template-areas:
"side"
"main";
@include lg() {
grid-template-columns: 360px auto;
grid-template-areas: "side main";
}
.sidebar {
padding:1rem;
}
}

View File

@ -0,0 +1,23 @@
/* TABLE
* Style tables
*/
table {
border-collapse: collapse;
}
table, th, td {
border:0;
padding:0;
margin:0;
}
th, td {
vertical-align:center;
padding-top: 0.325em;
padding-bottom: 0.325em;
}
th {
font-weight: $fontweight_hyper;
}

View File

@ -0,0 +1,4 @@
.toast {
@include panel($card-smallpad);
padding:$card-smallpad;
}

View File

@ -0,0 +1,18 @@
/* 0.2 - Box-sizing
* Make sure that everything have its box-sizing to border-box
**/
*,
*::before,
*::after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
body {
overflow-x: hidden;
text-rendering: optimizeLegibility;
}

68
scss/core/_columns.scss Normal file
View File

@ -0,0 +1,68 @@
@mixin column($size) {
grid-column: span $size;
width:100%;
margin:0;
& > *:last-child {
margin-bottom:0!important;
}
}
@mixin column-list() {
&-1 {@include column(1);}
&-2 {@include column(2);}
&-3 {@include column(3);}
&-4 {@include column(4);}
&-5 {@include column(5);}
&-6 {@include column(6);}
&-7 {@include column(7);}
&-8 {@include column(8);}
&-9 {@include column(9);}
&-10 {@include column(10);}
&-11 {@include column(11);}
&-12 {@include column(12);}
}
.columns {
display:grid;
grid-gap:$lineheight;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: auto;
padding:$lineheight;
&-nogap {
grid-gap:0px;
}
}
.column {
@include column(12);
}
.col {
@include column-list();
&-sm {
@include sm() {
@include column-list();
}
}
&-md {
@include md() {
@include column-list();
}
}
&-lg {
@include lg() {
@include column-list();
}
}
&-xl {
@include xl() {
@include column-list();
}
}
&-xxl {
@include xxl() {
@include column-list();
}
}
}

View File

@ -0,0 +1,11 @@
#wrapper {
background-color: $color-background;
}
.container-big {
@include container($container-size-large, $lineheight);
}
.container, .container-onecolumn {
@include container($container-size, $lineheight);
}

349
scss/core/_normalize.scss Normal file
View File

@ -0,0 +1,349 @@
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Render the `main` element consistently in IE.
*/
main {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}

190
scss/core/_typography.scss Normal file
View File

@ -0,0 +1,190 @@
/* 0.3 - Typography
* This part of the (s)css handle everything related to the typography
* like paragraphs, blockquote, etc.
**/
/* 2.2 - Global Typography */
@mixin paragraph() {
padding:0;
padding-bottom: $lineheight;
margin: 0;
}
html, body {
font-family: $basefont;
text-align: left;
font-size: $fontsize;
line-height: $lineheight;
color: getFontColor();
font-weight: $fontweight_base;
}
strong {
font-weight: $fontweight_bold;
}
em {
font-style: italic;
font-weight: $fontweight_base;
}
a, a:visited, mark {
text-decoration: none;
padding: 0.05rem 0.25rem;
border-radius: 0.1rem;
}
a, a:visited {
@include background-color($color-link);
&:hover, &:active, &:focus {
color: $color-link;
background-color: transparent;
}
&:focus {
outline-color: currentColor;
outline-style: dashed;
outline-width: 2px;
}
}
mark {
background-color: lighten($color-mark, 30%);
color: inherit;
}
p, ul, ol {
@include paragraph();
&:last-child {
padding-bottom:0;
}
}
ul, ol {
list-style: disc;
ul, ol {
padding-bottom:0;
margin:0;
}
li {
margin:0;
margin-left: $lineheight;
line-height: $lineheight;
}
}
::selection, ::-moz-selection {
@include background-color($color-selection);
}
/* 2.3 - Titles */
@mixin newTitle($size, $weight) {
$lineNumber: ceil($size / 1.5);
font-size: $size * 1rem;
line-height: $lineNumber * $lineheight;
font-weight: $weight;
}
h1, h2, h3, h4, h5, h6, h7 {
font-family: $basefont;
text-align: left;
font-size: 1em;
padding:0;
margin:0;
font-weight: $fontweight_base;
padding-bottom: $lineheight;
}
sup, sub {
& > a {
color: $color-link;
background-color:transparent;
&:hover, &:focus, &:active {
color: darken($color-link, 10%);
}
}
}
.main-title {
font-family: $titlefont;
@include newTitle(3.815, $fontweight_hyper);
}
h1, .title-1 {
font-family: $titlefont;
@include newTitle(2.441, $fontweight_hyper);
color: $color-primary;
}
h2, .title-2 {
@include newTitle(2.441, $fontweight_big);
}
h3, .title-3 {
@include newTitle(1.953, $fontweight_bold);
}
h4, .title-4 {
@include newTitle(1.563, $fontweight_hyper);
}
h5, .title-5 {
@include newTitle(1.25, $fontweight_bold);
}
h6, .title-6 {
@include newTitle(1, $fontweight_hyper);
}
/* 2.4 - hr */
hr {
border: 0px solid rgba(1, 1, 1, 0.15);
border-bottom: 1px;
margin: 1.5em;
}
/* 2.5 - Wells and quotes */
@mixin well() {
border: 0;
border-radius: $well-radius;
margin: 0 0 $lineheight 0;
padding: $lineheight 1rem $lineheight 1rem;
max-width: 100%;
font-style: italic;
@include background-color($color-background-alt);
box-shadow: $narrow-shadow;
}
blockquote, .quote {
&:before {
content:"";
}
}
blockquote, .quote, .well, pre, .pre, .well-pre {
@include well();
}
code {
background:transparent;
color: $color-danger;
}
.small-text {
font-size: 0.9em;
}
/* 2.6 - Special styling */
.time {
font-style: italic;
text-align: right;
width: 100%;
display: block;
}

297
scss/custom/_global.scss Normal file
View File

@ -0,0 +1,297 @@
/* --- 03. GLOBAL STYLING --- */
/*
* 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-primary url('img/background.png') center bottom repeat-x;
padding-top: .75rem;
padding-bottom:1.5rem;
}
header h1 {
border-style:none !important;
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-background;
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-font-light;
a {
color: $color-font-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-background;
}
/* ------------------ FOOTER ------------------- */
$color-footer-back: getColor("dark");
$color-footer-text: getColor("light");
body {
// On colorise le background de la page complete de la même
// couleur que le fond du footer.
background-color: $color-footer-back;
}
footer {
color: $color-footer-text;
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-footer-text;
}
}
}
}
/* 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;
}
}
}
}
.container-article {
margin:auto;
width:800px;
}

View File

@ -0,0 +1,6 @@
// BORDERS AND BORDER-RADIUSES
$card-radius: 8px;
$btn-radius: 4px;
$well-radius: $btn-radius;
$border-size: 0px;

View File

@ -0,0 +1,12 @@
// FONTS
// Define how looks the text
$fontsize: 4.75mm;
$fontweight_big: 300;
$fontweight_base: 400;
$fontweight_bold: 600;
$fontweight_hyper: 800;
$basefont: Open Sans, sans-serif;
$titlefont: Open Sans, sans-serif;

View File

@ -0,0 +1,82 @@
/* --- 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)
*
*/
$whiteness_value: 0.8;
// Couleurs de base du theme :
$palette: (
"blue":#339af0,
"violet":#845ef7,
"red":#ff6b6b,
"orange":#ff922b,
"green":#51cf66,
"skyblue":#3bc9db,
"dark": #343a40,
"light":#fefefe,
"yellow":#fcc419,
"grey":#adb5bd,
"dark2":#212529,
"light2":#f1f3f5);
$semantics: (
"primary":"blue",
"secondary":"dark",
"warning":"orange",
"danger":"red",
"info":"skyblue",
"success":"green",
"muted":"grey");
$helpers: (
"font":"dark2",
"font-light":"light",
"background":"light",
"background-alt":"light2",
"link":"blue",
"selection":"blue",
"mark":"yellow",
);
@function get-color($name) {
@if map-has-key($helpers, $name) {
@return map-get($palette, map-get($helpers, $name));
} @else {
@if map-has-key($semantics, $name) {
@return map-get($palette, map-get($semantics, $name));
} @else {
@return map-get($palette, $name);
}
}
}
// **Couleurs du theme**
// Ne pas retirer ces couleurs, qui
// sont essentielle pour que le framework functionne.
// Pour les modifier, modifier le contenu du tableau $semantics.
$color-link: get-color("link");
$color-selection: get-color("selection");
$color-mark: get-color("mark");
$color-font: get-color("font");
$color-font-light: get-color("font-light");
$color-primary: get-color("primary");
$color-secondary: get-color("secondary");
$color-warning: get-color("warning");
$color-danger: get-color("danger");
$color-info: get-color("info");
$color-success: get-color("success");
$color-muted: get-color("muted");
$color-background: get-color("background");
$color-background-alt: get-color("background-alt");

View File

@ -0,0 +1,8 @@
// SHADOWS
// Define how looks the shadows and the relief effects
$large-shadow: 0px 2px 4px rgba(0, 0, 0, 0);
$narrow-shadow: 0px 1px 2px 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);

View File

@ -0,0 +1,34 @@
// SIZING
// All the spacing and sizing variables
$baseline: 1.6;
$lineheight: $baseline * 1rem;
$lineheight_half: $lineheight/2;
$lineheight_quarter: $lineheight/4;
$card-header-vmargin: 0px;
$card-header-hmargin: 0px;
$card-header-padding: $lineheight;
$card-header-width: 100%;
$card-header-position:0px;
// Buttons
$button_large: $lineheight;
$button_small: $lineheight_quarter;
$button-group-margin: 0;
// Responsives sizes
// - sm : Small tablets and large smartphones (landscape view)
// - md : Small tablets (portrait view)
// - lg : Tablets and small desktops
// - xl : Large tablets and desktops
// - xxl : Very large desktops
$screen-sm-min: 576px;
$screen-md-min: 768px;
$screen-lg-min: 992px;
$screen-xl-min: 1200px;
$screen-xxl-min: 1600px;
// Containers size
$container-size: $screen-xxl-min;
$container-size-large: $screen-xxl-min;

15
scss/mixins/_borders.scss Normal file
View File

@ -0,0 +1,15 @@
// Border, border radius and margin
@mixin borders() {
border: $border-size solid rgba(0, 0, 0, 0.3)
}
@mixin prefer-no-borders() {
&:not(:hover) {
border-color:transparent;
}
}
@mixin border-radius($border-radius) {
border-radius: $border-radius $border-radius $border-radius $border-radius;
}

54
scss/mixins/_btns.scss Normal file
View File

@ -0,0 +1,54 @@
@mixin button($size) {
@include button-layout($size);
@include shape-style($size);
@include button-hover();
font-weight: $fontweight_base;
}
@mixin button-layout($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;
}
@mixin button-hover() {
transition: background-color .2s, border .2s, box-shadow .2s, color .2s;
&:hover, &:active, &:focus {
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 button-fullcontrol($background-color, $hover-color, $text-color) {
@include colorize-shape($background-color);
color:$text-color;
&:visited {
@include colorize-shape($background-color);
color:$text-color;
}
&, &:visited, &:not(.disabled):not(:disabled) {
&:hover, &:active, &:focus {
@include colorize-shape($hover-color);
color:lighten($text-color, 5%);
}
}
}
@mixin button-color($background-color) {
@include button-fullcontrol($background-color, mix($background-color, getTextColorFromBackground($background-color), 85%), getTextColorFromBackground($background-color));
box-shadow: $narrow-shadow;
}

61
scss/mixins/_colors.scss Normal file
View File

@ -0,0 +1,61 @@
/* --- 00. COLORS --- */
/*
* La gestion des couleurs dans le theme. Cette partie de la stylesheet est
* automatique et n'a pas besoin d'être modifiée
*/
// FUNCTIONS TO GET MORE EASILY COLORS
@function list-colors() {
$newmap: map-merge($palette, $semantics);
@return $newmap;
}
@function luminance($color) {
$c_red: red($color);
$c_grn: green($color);
$c_blu: blue($color);
$luminance: $c_red*0.299 + $c_grn*0.587 + $c_blu*0.114;
@return $luminance
}
@function getFontColor() {
@return getTextColorFromBackground(get-color("background-alt"));
}
@function getTextColorFromBackground($background-color) {
@if (luminance($background-color) < 255 * $whiteness_value) {
@return $color-font-light;
} @else {
@return $color-font;
}
}
@function accentuate($color) {
@if (luminance($color) > 64) {
@return darken($color, 7.5%);
} @else {
@return lighten($color, 4%);
}
}
@function dim($color) {
@if (luminance($color) > 255 * $whiteness_value) {
@return transparentize($color, 0.8);
} @else {
@return transparentize($color, 0.6);
}
}
// fonction texte et background
@mixin text-color($text-color) {
color: $text-color;
}
@mixin background-color($background-color) {
background-color: $background-color;
color: getTextColorFromBackground($background-color);
}

13
scss/mixins/_li.scss Normal file
View File

@ -0,0 +1,13 @@
@mixin li-no-margin() {
li {
margin: 0;
}
}
@mixin li-flex() {
display:flex;
flex-direction: row;
align-items: flex-start;
@include li-no-margin();
list-style: none;
}

64
scss/mixins/_panels.scss Normal file
View File

@ -0,0 +1,64 @@
@mixin panel($size) {
@include border-radius($card-radius);
background-color: $color-background-alt;
box-shadow: $large-shadow;
border: none;
margin:0;
margin-bottom:$lineheight;
& > * {
margin-left: $size / 2;
margin-right: $size / 2;
&:first-child {
margin-top: $size;
&.card-header {
margin-top:$card-header-vmargin;
}
}
&:last-child {
margin-bottom: $size;
&.card-header {
margin-bottom:$card-header-vmargin;
}
}
}
}
@mixin panel-header($size) {
font-size:1.1em;
font-weight: $fontweight_big;
padding: $size/2;
padding-left:$card-header-padding;
padding-right:$card-header-padding;
padding-bottom: $size/2!important;
margin:$card-header-hmargin;
margin-bottom:$lineheight_half;
margin-top:$lineheight_half;
line-height:$lineheight;
white-space: nowrap;
position:relative;
left: $card-header-position;
width:$card-header-width;
@include shape-style($size);
border-radius:0;
&:first-child {
border-top-left-radius: $card-radius;
border-top-right-radius: $card-radius;
}
&:last-child {
border-bottom-left-radius: $card-radius;
border-bottom-right-radius: $card-radius;
}
h1, h2, h3, h4, h5, h6, h7, h8, h9, h10 {
font-family:$basefont;
font-size:1rem;
padding:0px;
margin:0px;
color:$color-font-light;
font-weight: $fontweight_big;
line-height:$lineheight;
}
}

View File

@ -0,0 +1,50 @@
// MIXINS RESPONSIVES
// 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;
}
}
@mixin container($size, $padding) {
padding-left: $padding;
padding-right: $padding;
max-width: $size;
margin:auto;
}

10
scss/mixins/_shape.scss Normal file
View File

@ -0,0 +1,10 @@
@mixin shape-style($size) {
@include borders();
@include border-radius($btn-radius);
background-color:transparent;
}
@mixin colorize-shape($background-color) {
background-color: $background-color;
}

View File

@ -1,27 +1,23 @@
/* /*
Theme Name: Kazhnuz Space Theme Name: Quarante-Douze
Theme URI: https://git.kobold.cafe/kazhnuz/kspace-wordpress-theme Theme URI: https://git.kobold.cafe/quarante-douze/qdouze2-wordpress-theme
Author: Kazhnuz Author: Kazhnuz
Author URI: https://kazhnuz.space Author URI: https://kazhnuz.space
Description: The default theme for Kazhnuz.space, my personnal blog. Made using spectre.css Description: The default theme for Quarante-Douze, my tech blog.
Version: 0.1 Version: 0.1
License: GNU General Public License v3 or later License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, two-columns, right-sidebar, artist, solarized Tags: blog, two-columns, right-sidebar
Text Domain: kspace-wordpress-theme Text Domain: qdouze2-wordpress-theme
This theme is licensed under the GPLv3. This theme is licensed under the GPLv3.
*/ */
@import 'dep';
@import 'angled-edges';
@import 'palette';
@import 'definitions'; @import 'definitions';
@import 'mixins';
@import 'typography'; @import 'core';
@import 'global';
@import 'drawing'; @import 'drawing';
@import 'utils';
@import 'global';

8
scss/utils/_a11y.scss Normal file
View File

@ -0,0 +1,8 @@
/* 1.0 - Accessibility classes
* Some classes to help accessibility
**/
.screen-reader-text {
visibility: collapse;
font-size:0;
}

14
scss/utils/_align.scss Normal file
View File

@ -0,0 +1,14 @@
/* 1.1 - Alignement classes
* Handle easily alignement and flexboxes
**/
.flex-that {
display: flex;
justify-content: space-between;
}
.align {
&-center {text-align: center;text-indent: 0!important;}
&-left {text-align: left;}
&-right {text-align: right;}
}

8
scss/utils/_borders.scss Normal file
View File

@ -0,0 +1,8 @@
.round, .pill {
border-radius: 9999px;
}
.no-borders {
border-width:0px;
border-style:none;
}

85
scss/utils/_colorize.scss Normal file
View File

@ -0,0 +1,85 @@
/* 1.2 - Colorization classes
* Colorize some aspect of a class
**/
@mixin heading-color($background-color) {
& .card-header,
& .menu-header,
&.header-bg th {
@include colorize-shape($background-color);
color: getTextColorFromBackground($background-color);
}
th {
color: $background-color;
}
}
@mixin bg-color($background-color) {
@include background-color($background-color);
&>a,
&>a:visited {
color: $background-color;
background-color: getTextColorFromBackground($background-color);
&:hover,
&:active,
&:visited {
color: getTextColorFromBackground($background-color);
background: none;
}
}
}
.bg {
@each $name,
$color in list-colors() {
&-#{$name} {
@include bg-color(get-color($name));
&:hover {
@include bg-color(get-color($name));
}
}
}
}
.text {
@each $name,
$color in list-colors() {
&-#{$name} {
@include text-color(get-color($name));
}
}
}
.btn {
@each $name,
$color in list-colors() {
&-#{$name} {
@include button-color(get-color($name));
}
}
}
.head {
@each $name,
$color in list-colors() {
&-#{$name} {
@include heading-color(get-color($name));
}
}
}
.fg-light {
color: $color-font-light;
}
.fg-dark {
color: $color-font;
}

35
scss/utils/_flex.scss Normal file
View File

@ -0,0 +1,35 @@
.f-column {
display:flex;
flex-direction: column;
&.reverse {
flex-direction:column-reverse;
}
}
.f-row {
display:flex;
flex-direction: row;
&.reverse {
flex-direction:row-reverse;
}
}
.f-start {
justify-content: flex-start;
}
.f-end {
justify-content: flex-end;
}
.f-center {
justify-content: center;
}
.f-around {
justify-content: space-around;
}
.f-between {
justify-content: space-between;
}

7
scss/utils/_lists.scss Normal file
View File

@ -0,0 +1,7 @@
/* 1.3 - List classes
* Handle more easily list
**/
.no-pills {
list-style:none;
}

61
scss/utils/_sizing.scss Normal file
View File

@ -0,0 +1,61 @@
/* 1.3 - Sizing classes
* Handle sizing and margin
**/
@mixin addmargins($name, $size) {
&-#{$name} {
margin:$size;
}
&b-#{$name} {
margin-bottom:$size;
}
&r-#{$name} {
margin-right:$size;
}
&l-#{$name} {
margin-left:$size;
}
&t-#{$name} {
margin-top:$size;
}
}
@mixin addpaddings($name, $size) {
&-#{$name} {
padding:$size;
}
&b-#{$name} {
padding-bottom:$size;
}
&r-#{$name} {
padding-right:$size;
}
&l-#{$name} {
padding-left:$size;
}
&t-#{$name} {
padding-top:$size;
}
}
.m {
@include addmargins("half", $lineheight * .5);
@for $i from 1 through 4 {
@include addmargins($i, $lineheight*$i)
}
}
.p {
@include addpaddings("half", $lineheight * .5);
@for $i from 1 through 4 {
@include addpaddings($i, $lineheight*$i)
}
}

4473
style.css

File diff suppressed because one or more lines are too long

View File

@ -7,7 +7,7 @@
</main> </main>
<!-- Sidebar custom pour contenir la description --> <!-- Sidebar custom pour contenir la description -->
<aside class="sidebar"> <aside class="sidebar">
<div class="card card-info"> <div class="card head-info">
<div class="card-header"><i class="fa fa-fw fa-tag"></i> <?php echo single_cat_title(); ?></div> <div class="card-header"><i class="fa fa-fw fa-tag"></i> <?php echo single_cat_title(); ?></div>
<div class="card-body"> <div class="card-body">
<?php echo tag_description();?> <?php echo tag_description();?>

View File

@ -29,7 +29,7 @@
$query = new WP_Query( $args ); $query = new WP_Query( $args );
?> ?>
<div class="card card-primary"> <div class="card head-primary">
<div class="card-header"><i class="fa fa-list" aria-hidden="true"></i> Chapitres</div> <div class="card-header"><i class="fa fa-list" aria-hidden="true"></i> Chapitres</div>
<div class="card-menu"> <div class="card-menu">
<?php if($query->have_posts()) : ?> <?php if($query->have_posts()) : ?>