kazhnuz.space/kspace-wordpress-theme
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

feat: rebuild du theme basé sur celui de qdouze

Browse source 
Fixes #30
Fixes #35
Fixes #36
Fixes #38
Fixes #40
Fixes #43
Fixes #44
Fixes #46
Fixes #47
Fixes #49
Fixes #51
Fixes #53
This commit is contained in:
Kazhnuz 2023-05-20 10:02:10 +02:00
parent 2b2e650da7
commit 52dc0b9c5c
99 changed files with 5310 additions and 3429 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
404.php
View file

@ -1,12 +1,8 @@
<?php get_header(); ?>
<main>
<div class="card card-danger">
<div class="card-header"><i class="fa fa-folder-exclamation-mark" aria-hidden="true"></i> 404 Not Found</div>
<div class="card-body">
<p>La page que vous cherchez n'a pas été trouvée</p>
<p>Veuillez vérifier l'adresse, si le cas recommence, n'hésitez pas à contacter le webmestre via kazhnuz [at] kobold [point] cafe</p>
</div>
</div>
<main id="skip">
<h1 class="page-title">Page non trouvée</h1>
<p>La page que vous cherchez n'a pas été trouvée</p>
<p>Veuillez vérifier l'adresse, si le cas recommence, n'hésitez pas à contacter le webmestre via kazhnuz [at] kobold [point] cafe</p>
</main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

2
archive.php
View file

@ -1,5 +1,5 @@
<?php get_header(); ?> <!-- ouvrir header,php -->
<main>
<main id="skip">
<?php kspace_cat_breadcrumb(get_the_archive_title(), 'calendar'); ?>
<?php include(TEMPLATEPATH . '/components/preview-list.php'); ?>
</main>

20
category-blog.php
View file

@ -1,21 +1,15 @@
<?php get_header(); ?> <!-- ouvrir header,php -->
<main>
<main id="skip">
<?php $category = get_category( get_query_var( 'cat' ) );
kspace_cat_breadcrumb_with_rss(single_cat_title('', false), 'folder-open', 'la catégorie', get_category_link( $category->cat_ID ) . '/feed' );
?>
<?php include(TEMPLATEPATH . '/components/posts-list.php'); ?>
</main>
<!-- Sidebar custom pour contenir la description -->
<aside class="sidebar">
<div class="card card-info">
<div class="card-header"><i class="fa fa-folder-open"></i> <?php echo single_cat_title(); ?></div>
<div class="card-body">
<?php the_archive_description() ?>
</div>
<div class="well">
<?php the_archive_description() ?>
</div>
<?php include(TEMPLATEPATH . '/components/sidebar-content.php'); ?>
</aside>
<?php include(TEMPLATEPATH . '/components/posts-list.php'); ?>
</main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

20
category.php
View file

@ -1,21 +1,15 @@
<?php get_header(); ?> <!-- ouvrir header,php -->
<main>
<main id="skip">
<?php $category = get_category( get_query_var( 'cat' ) );
kspace_cat_breadcrumb_with_rss(single_cat_title('', false), 'folder-open', 'la catégorie', get_category_link( $category->cat_ID ) . '/feed' );
?>
<?php include(TEMPLATEPATH . '/components/preview-list.php'); ?>
</main>
<!-- Sidebar custom pour contenir la description -->
<aside class="sidebar">
<div class="card card-info">
<div class="card-header"><i class="fa fa-folder-open" aria-hidden="true"></i> <?php echo single_cat_title(); ?></div>
<div class="card-body">
<?php the_archive_description() ?>
</div>
<div class="well">
<?php the_archive_description() ?>
</div>
<?php include(TEMPLATEPATH . '/components/sidebar-content.php'); ?>
</aside>
<?php include(TEMPLATEPATH . '/components/preview-list.php'); ?>
</main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

7
components/article.php
View file

@ -1,4 +1,3 @@
<?php include(TEMPLATEPATH . '/components/article/breadcrumb.php'); ?>
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<?php include(TEMPLATEPATH . '/components/article/flags.php'); ?>
@ -6,10 +5,12 @@
<article class="article container-article" id="post-<?php the_ID(); ?>">
<?php if ($haveTitle) { ?>
<h1 class="page-title"><?php the_title(); ?></h1>
<p class="text-right"><span class="btn-small btn-secondary"> <?php echo reading_time(); ?> </span></p>
<p class="align-right"><span class="btn-small btn-secondary"> <?php echo reading_time(); ?> </span></p>
<?php } else { ?>
<h1 class="sr-only"><?php the_title(); ?></h1>
<?php } ?>
<div class="article-entry">
<div class="article-entry mb-1">
<?php the_content(); ?>
</div>
</article>

2
components/article/breadcrumb.php
View file

@ -1,4 +1,4 @@
<div class="flex-that">
<div class="flex-that d-none d-flex-sm pl-half pr-half">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class='breadcrumb-item'><a href='<?php echo site_url(); ?>'>kazhnuz.space</a></li><?php

2
components/article/description.php
View file

@ -3,7 +3,7 @@
$my_custom_field = $custom_fields['description'];
if ($my_custom_field != null) {
foreach ( $my_custom_field as $key => $value ) {
echo " <div> " . $value . "</div>";
echo " <div class='mb-half'> " . $value . "</div>";
}
}
?>

2
components/article/flags.php
View file

@ -2,7 +2,7 @@
if ($flags) {
foreach( $flags as $flag ) {
$term_meta = get_option( "taxonomy_term_$flag->term_id" );
echo "<div class='toast toast-" . $term_meta['niveau'] . "'>";
echo "<div class='toast bg-" . $term_meta['niveau'] . "'>";
echo $flag->description;
echo "</div>";
}

16
components/article/terms.php
View file

@ -1,19 +1,29 @@
<h3 class="sr-only">Tags et catégories</h3>
<?php
if (has_category('chapters')) {
echo "<ul class='nolist' aria-labelledby='title-article-taxo-romans'>";
echo '<h4 class="sr-only" id="title-article-taxo-romans">Romans</h4>';
$romans = get_the_terms($post->ID, 'roman');
foreach( $romans as $roman ) {
echo "<a href= '" . esc_url( get_category_link( $roman->term_id ) ) . "' class='btn-small btn-info mr-2'><i class='fa fa-book mr-1'></i> " . $roman->name . "</a>";
echo "<li><a href= '" . esc_url( get_category_link( $roman->term_id ) ) . "' class='badge btn-primary mr-half'><i class='fa fa-book'></i>&nbsp;" . $roman->name . "</a></li>";
}
echo "</ul>";
} else {
$categories = get_the_category();
echo "<ul class='nolist' aria-labelledby='title-article-taxo-categories'>";
echo '<h4 class="sr-only" id="title-article-taxo-categories">Catégories</h4>';
foreach( $categories as $category ) {
echo "<a href= '" . esc_url( get_category_link( $category->term_id ) ) . "' class='btn-small btn-info mr-2'><i class='fa fa-folder mr-1'></i> " . $category->cat_name . "</a>";
echo "<li><a href= '" . esc_url( get_category_link( $category->term_id ) ) . "' class='badge btn-primary mr-half'><i class='fa fa-folder'></i>&nbsp;" . $category->cat_name . "</a></li>";
}
echo "</ul>";
}
$tags = get_the_tags();
if ($tags) {
echo "<ul class='nolist' aria-labelledby='title-article-taxo-tags'>";
echo '<h4 class="sr-only" id="title-article-taxo-tags">Tags</h4>';
foreach( $tags as $tag ) {
echo "<a href= '" . esc_url( get_tag_link( $tag->term_id ) ) . "' class='btn-small btn-primary mr-2'><i class='fa fa-tag mr-1'></i> " . $tag->name . "</a> ";
echo "<li><a href= '" . esc_url( get_tag_link( $tag->term_id ) ) . "' class='badge btn-secondary mr-half'><i class='fa fa-tag'></i>&nbsp;" . $tag->name . "</a></li>";
}
echo "</ul>";
}
?>

4
components/featured.php
View file

@ -4,8 +4,8 @@
'post_type' => 'post',
'tax_query' => array(
array(
'taxonomy' => 'category',
'terms' => 'blog',
'taxonomy' => 'niveau',
'terms' => 'featured',
'field' => 'slug',
)
),

34
components/footer-content.php
View file

@ -5,31 +5,45 @@
$menu = wp_get_nav_menu_items($listmenu['social']);
if ($menu != null) {
foreach ($menu as $menuElement) {
echo '<li class="social-li"><a class="social-link" href="'. $menuElement->url .'" title="Accéder à mon '.$menuElement->title.'" aria-label="Accéder à mon '.$menuElement->title.'"><i class="fa fa-fw fa-'.$menuElement->title.'" aria-hidden="true"></i></a></li> ';
echo '<li class="social-li"><a class="social-link" href="'. $menuElement->url .'"><i class="fa fa-fw fa-'.$menuElement->title.'" aria-hidden="true"></i><span class="sr-only">Accéder à mon '.$menuElement->title.'</span></a></li> ';
}
}
?>
<li class="social-li">
<a class="social-link" href="https://kazhnuz.space/links" title="Plus de liens" aria-label="Plus de liens">
<a class="social-link" href="https://kazhnuz.space/links">
<i class="fa fa-fw fa-ellipsis-h" aria-hidden="true"></i>
<span class='sr-only'>Plus de liens</span>
</a>
</li>
</ul>
<div class="footer-collumns">
<div>
<div class="container columns">
<section class="col-12 col-md-4" aria-labelledby="title-footer-section-1">
<h2 class="sr-only" id="title-footer-section-1">Droit d'utiliations</h2>
<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>
</div>
</section>
<div>
<section class="col-12 col-md-4" aria-labelledby="title-footer-section-2">
<h2 class="sr-only" id="title-footer-section-2">Crédits</h2>
<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>
</div>
<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://forkawesome.github.io/Fork-Awesome/">Fork-Awesome</a> pour les icones.</p>
</section>
<div>
<section class="col-12 col-md-4" aria-labelledby="title-footer-section-3">
<h2 class="sr-only" id="title-footer-section-3">Informations annexes</h2>
<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>
<ul>
<h3 class="sr-only">Pages annexes</h3>
<?php
$listmenu = get_nav_menu_locations();
$menu = wp_get_nav_menu_items($listmenu['footer-pages']);
foreach ($menu as $menuElement) {
echo '<li><a href="' . $menuElement->url . '" class="menu-item">'. $menuElement->title . '</a></li>';
}
?>
</ul>
</section>
</div>
</footer>

4
components/logo.php
View file

@ -1,3 +1,3 @@
<div class="logo-area">
<h1><a href="<?php echo site_url(); ?>"><img src="<?php echo get_template_directory_uri();?>/img/logo.png" alt="Kazhnuz"/></a></h1>
<div class="logo-area container">
<h1><a href="<?php echo site_url(); ?>"><img src="<?php echo get_template_directory_uri();?>/img/logo.png" alt="Kazhnuz"/> <span class="sr-only">Kazhnuz</span></a></h1>
</div>

48
components/mobile-sidebar.php Normal file
View file

@ -0,0 +1,48 @@
<nav id="mobile-sidebar" class="bg-dark fg-light sidebar menu hidden">
<h1 class="align-center text-light">Menu du site</h1>
<div class="mb-1">
<?php include(TEMPLATEPATH . '/components/searchform.php'); ?>
</div>
<ul>
<h2>Menu principal</h2>
<li>
<a href="<?php echo site_url(); ?>" class="menu-item">
<span><i class="fa fa-home" aria-hidden="true"></i> Accueil</span>
</a>
</li>
<?php
$listmenu = get_nav_menu_locations();
$menu = wp_get_nav_menu_items($listmenu['top-navbar']);
foreach ($menu as $menuElement) {
echo '<li><a href="' . $menuElement->url . '" class="menu-item">'. $menuElement->title . '</a></li>';
}
?>
</ul>
<ul>
<h2>Liste des catégories</h2>
<?php
$categories = get_categories( array(
'orderby' => 'name',
'order' => 'ASC'
) );
foreach( $categories as $category ) {?>
<li>
<a class="menu-item" href="<?php echo get_category_link($category->term_id) ?>"><?php echo $category->name ?></a>
</li>
<?php }
?>
</ul>
<ul>
<h2>Pages</h2>
<?php
$listmenu = get_nav_menu_locations();
$menu = wp_get_nav_menu_items($listmenu['top-navbar-2']);
foreach ($menu as $menuElement) {
echo '<li><a href="' . $menuElement->url . '" class="menu-item">'. $menuElement->title . '</a></li>';
}
?>
</ul>
</nav>
<button id="mobile-button" class="menu-button"><i class="fa fa-navicon" aria-hidden="true"></i> <span class="sr-only">Afficher le menu</span></button>

9
components/navbar-category.php
View file

@ -8,10 +8,10 @@
foreach( $parent_categories as $parent_category ) {
?>
<li>
<span class="btn btn-navbar">
<?php echo $parent_category->name ?> <i class="fa fa-caret-down" aria-hidden="true"></i>
<a class="menu-item submenu" href="#">
<?php echo $parent_category->name ?> <i class="fa fa-caret-down" aria-hidden="true"></i></a>
<ul class="card-menu">
<ul class="bg-light menu fg-dark">
<?php
$categories = get_categories( array(
'orderby' => 'slug',
@ -21,12 +21,13 @@
foreach( $categories as $category ) {
if ($category->slug != "chapters") {
echo "<!-- " . get_category_link($category->term_id) . " -->";
echo '<li><a class="menu-element" href="' . get_category_link($category->term_id) . '">' . $category->name . '</a></li>';
}
}
?>
</ul>
</span>
</li>
<?php
}

5
components/navbar-pages.php
View file

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

2
components/posts-list.php
View file

@ -1,5 +1,5 @@
<?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="flex-that mb">
<div class="article-category">

11
components/preview-list.php
View file

@ -1,22 +1,21 @@
<?php if(have_posts()) : ?>
<div class="previews-section">
<div class="preview-grid">
<?php while(have_posts()) : the_post(); ?>
<article class="card card-preview card-primary">
<a href="<?php the_permalink(); ?>" class="preview-link">
<div class="preview-item">
<h1 class="card-header"><?php the_title(); ?></h1>
<div class="preview-content">
<?php if(!has_post_thumbnail( $post->ID )) {
?>
<div class="preview-content" aria-hidden="true"><?php the_excerpt(); ?></div>
<div class="preview-exerpt" aria-hidden="true"><?php the_excerpt(); ?></div>
<?php
} else {
?>
<div class="preview-content" aria-hidden="true"><p class="p-img"><img class="preview-img" src="<?php echo get_the_post_thumbnail_url(); ?>" /></p></div>
<div class="preview-exerpt" aria-hidden="true"><p class="p-img"><img class="preview-img" src="<?php echo get_the_post_thumbnail_url(); ?>" /></p></div>
<?php
}
?>
<div class="preview-overlay">
<h1 class="card-header"><?php the_title(); ?></h1>
<div class="preview-metadata">
<div class="metadata-pills">
<div><?php

3
components/searchform.php
View file

@ -1,5 +1,6 @@
<form method="get" id="searchform" action="<?php bloginfo('home'); ?>/">
<div>
<input class="form-control" type="search" placeholder="Chercher" aria-label="Chercher" value="<?php the_search_query(); ?>" name="s" id="s" />
<label for="searchfield" class="sr-only">Formulaire de recherche</label>
<input class="form-control" id="searchfield" type="search" placeholder="Chercher sur le site" aria-label="Chercher sur le site" value="<?php the_search_query(); ?>" name="s" id="s" />
</div>
</form>

6
components/sidebar/archives.php
View file

@ -1,8 +1,8 @@
<div class="card card-primary">
<div class="card-header"><i class="fa fa-folder" aria-hidden="true"></i> Archives</div>
<section class="card head-primary">
<h2 class="card-header"><i class="fa fa-folder" aria-hidden="true"></i> Archives</h2>
<div class="card-body">
<ul class="tag-list">
<?php wp_get_archives('type=yearly&format=html&show_post_count=0'); ?>
</ul>
</div>
</div>
</section>

36
components/sidebar/categories.php
View file

@ -7,24 +7,26 @@
foreach( $parent_categories as $parent_category ) {
?>
<div class="card card-primary">
<div class="card-header"><i class="fa fa-folder" aria-hidden="true"></i> <?php echo $parent_category->name ?></div>
<ul class="card-menu">
<?php
$categories = get_categories( array(
'orderby' => 'slug',
'order' => 'ASC',
'parent' => $parent_category->term_id
) );
<section class="card head-primary">
<h2 class="card-header"><i class="fa fa-folder" aria-hidden="true"></i> <?php echo $parent_category->name ?></h2>
<div class="menu fg-dark">
<ul>
<?php
$categories = get_categories( array(
'orderby' => 'slug',
'order' => 'ASC',
'parent' => $parent_category->term_id
) );
foreach( $categories as $category ) {
if ($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>
</div>
foreach( $categories as $category ) {
if ($category->slug != "chapters") {
echo '<li><a class="menu-element" href="' . get_category_link($category->term_id) . '">' . $category->name . '<span class="badge bg-secondary">'. $category->count . '</span></a></li>';
}
}
?>
</ul>
</div>
</section>
<?php
}
?>

28
components/sidebar/last-articles.php
View file

@ -1,13 +1,15 @@
<div class="card card-primary">
<div class="card-header"><i class="fa fa-rss" aria-hidden="true"></i> Publications</div>
<ul class="card-menu trim-that">
<?php
wp_get_archives( array(
'type' => 'postbypost',
'echo' => 1,
'order' => 'ASC',
'limit' => 6
) );
?>
</ul>
</div>
<section class="card head-primary">
<h2 class="card-header"><i class="fa fa-rss" aria-hidden="true"></i> Publications</h2>
<div class="menu fg-dark">
<ul class="trim-that">
<?php
wp_get_archives( array(
'type' => 'postbypost',
'echo' => 1,
'order' => 'ASC',
'limit' => 6
) );
?>
</ul>
</div>
</section>

24
components/sidebar/links.php
View file

@ -3,17 +3,19 @@ $listmenu = get_nav_menu_locations();
$menu = wp_get_nav_menu_items($listmenu['link-menu']);
if ($menu != null) {
?>
<div class="card card-primary">
<div class="card-header"><i class="fa fa-link" aria-hidden="true"></i> Liens</div>
<ul class="card-menu">
<?php
$menu = wp_get_nav_menu_items( 'link-menu');
foreach ($menu as $menuElement) {
echo '<li><a href="' . $menuElement->url . '" class="menu-element">'. $menuElement->title . '</a></li>';
}
?>
</ul>
</div>
<section class="card head-primary">
<h2 class="card-header"><i class="fa fa-link" aria-hidden="true"></i> Liens</h2>
<div class="menu fg-dark">
<ul>
<?php
$menu = wp_get_nav_menu_items( 'link-menu');
foreach ($menu as $menuElement) {
echo '<li><a href="' . $menuElement->url . '" class="menu-element">'. $menuElement->title . '</a></li>';
}
?>
</ul>
</div>
</section>
<?php
}
?>

6
components/sidebar/tags.php
View file

@ -9,8 +9,8 @@ $tags = get_tags($args);
?>
<div class="card card-primary">
<div class="card-header"><i class="fa fa-tags" aria-hidden="true"></i> Tags</div>
<section class="card head-primary">
<h2 class="card-header"><i class="fa fa-tags" aria-hidden="true"></i> Tags</h2>
<div class="card-body">
<ul class="tag-list">
<?php foreach ($tags as $tag) {?>
@ -18,4 +18,4 @@ $tags = get_tags($args);
<?php } ?>
</ul>
</div>
</div>
</section>

BIN
fonts/AmaticSC-Bold.ttf Normal file
View file

Binary file not shown.

BIN
fonts/AmaticSC-Regular.ttf Normal file
View file

Binary file not shown.

4
footer.php
View file

@ -1,9 +1,11 @@
</div>
</div>
<?php include(TEMPLATEPATH . '/components/mobile-sidebar.php'); ?>
<?php include(TEMPLATEPATH . '/components/footer-content.php'); ?>
<?php wp_footer(); ?>
<?php wp_footer(); ?>
<script src="<?php echo get_template_directory_uri();?>/js/trim.js"></script>
<script src="<?php echo get_template_directory_uri();?>/js/prettylinks.js"></script>
<script src="<?php echo get_template_directory_uri();?>/js/mobile-sidebar.js"></script>
</body>
</html>

6
functions.php
View file

@ -125,7 +125,7 @@ function kspace_cat_breadcrumb_nav($categoryName, $icon) {
function kspace_cat_breadcrumb($categoryName, $icon) {
?>
<div class="flex-that">
<div class="flex-that d-none d-flex-sm pr-half pl-half">
<?php kspace_cat_breadcrumb_nav($categoryName, $icon); ?>
</div>
<?php
@ -133,10 +133,10 @@ function kspace_cat_breadcrumb($categoryName, $icon) {
function kspace_cat_breadcrumb_with_rss($categoryName, $icon, $categoryType, $rssLink) {
?>
<div class="flex-that">
<div class="flex-that d-none d-flex-sm pr-half pl-half">
<?php kspace_cat_breadcrumb_nav($categoryName, $icon); ?>
<div class="rss">
<a href="<?php echo $rssLink; ?>" class="btn btn-orange" /><i class="fa fa-rss" aria-hidden="true"></i><span class="sr-only">Flux RSS de <?php echo $categoryType; ?></span></a>
<a href="<?php echo $rssLink; ?>" class="btn btn-warning d-block m-0" /><i class="fa fa-rss" aria-hidden="true"></i><span class="sr-only">Flux RSS de <?php echo $categoryType; ?></span></a>
</div>
</div>
<?php

12
header.php
View file

@ -12,24 +12,20 @@
<?php wp_head(); ?>
<?php include(TEMPLATEPATH . '/components/opengraph.php'); ?>
<link rel="shortcut icon" href="img/favicon.png">
<!-- Polices d'écriture -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Amatic+SC&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="<?php echo get_template_directory_uri();?>/img/favicon.png">
<!-- 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"/>
<!-- CSS -->
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet"/>
<script src="<?php echo get_template_directory_uri();?>/dep/jquery/jquery.js"></script>
</head>
<!-- Début du vrai HTML -->
<body>
<div class="bg-dark skip small-text">
<a href="#skip">Accéder au contenu</a>
</div>
<div id="wrapper">
<?php include(TEMPLATEPATH . '/components/header-content.php'); ?>
<div class="container-blog">

2
home.php
View file

@ -1,5 +1,5 @@
<?php get_header(); ?>
<main>
<main id="skip">
<?php include(TEMPLATEPATH . '/components/globalflag.php'); ?>
<!-- Recuperation de la page de home -->

BIN
img/background.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.1 KiB

After

Width:  |  Height:  |  Size: 8.6 KiB

2
index.php
View file

@ -1,5 +1,5 @@
<?php get_header(); ?>
<main>
<main id="skip">
<h1 class="page-title">Publications</h1>
<?php include(TEMPLATEPATH . '/components/preview-list.php'); ?>
</main>

10
js/mobile-sidebar.js Normal file
View file

@ -0,0 +1,10 @@
document.getElementById('mobile-button').addEventListener('click', function () {
const sidebar = document.getElementById('mobile-sidebar');
if (sidebar.classList.contains('hidden')) {
sidebar.classList.remove('hidden');
sidebar.classList.add('shown');
} else {
sidebar.classList.remove('shown');
sidebar.classList.add('hidden');
}
});

8
js/prettylinks.js
View file

@ -1,8 +1,6 @@
var length = 35;
$(function(){
$(".pretty-link").each(function(i){
var str = $(this).text().replace("https://", "");
$(this).text(str);
});
document.querySelectorAll('.pretty-link').forEach(function (i) {
var str = i.textContent.replace('https://', '');
i.textContent = str;
});

25
js/trim.js
View file

@ -1,11 +1,18 @@
var length = 35;
const LENGHT = 35;
$(function(){
$(".trim-that a, .limit").each(function(i){
len=$(this).text().length;
if(len>length)
{
$(this).text($(this).text().substr(0,(length-3))+'...');
}
});
function limitString(str) {
len = str.length;
if (len > LENGHT) {
return str.substr(0, (LENGHT - 3)) + '...';
} else {
return str;
}
}
document.querySelectorAll('.trim-that a').forEach(function (i) {
i.textContent = limitString(i.textContent);
});
document.querySelectorAll('.limit').forEach(function (i) {
i.textContent = limitString(i.textContent);
});

4
page-about.php
View file

@ -15,7 +15,7 @@
<?php endif; ?>
</main>
<aside class="sidebar">
<div class="card card-info">
<div class="card head-info">
<?php $desc = explode(";", get_the_author_meta( 'infodata' )) ?>
<div class="card-header"><i class="fa fa-info" aria-hidden="true"></i> <?php
if (!empty($desc[1])) {
@ -25,7 +25,7 @@
}
?></div>
<p class="mwarea"><?php echo get_avatar( get_the_author_meta('user_email'), $size = '500'); ?></p>
<table style="width:100%" class="table-primary">
<table style="width:100%" class="head-primary">
<tr>
<th>Pseudo</th>
<td><?php the_author() ?></td>

2
page-links.php
View file

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

56
page-plan.php Normal file
View file

@ -0,0 +1,56 @@
<?php /* Template Name: page-plan */ ?>
<?php get_header(); ?> <!-- ouvrir header,php -->
<main id="skip">
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<article class="article-content" id="post-<?php the_ID(); ?>">
<h1 class="page-title"><?php the_title(); ?></h1>
<div class="article-body">
<section class="mb-1">
<h2>Derniers articles</h2>
<ul>
<?php
wp_get_archives( array(
'type' => 'postbypost',
'echo' => 1,
'order' => 'ASC',
'limit' => 12
) );
?>
</ul>
</section>
<section class="mb-1">
<h2>Pages</h2>
<ul>
<?php wp_list_pages( 'sort_column=menu_order&depth=1&title_li=' ) ?>
</ul>
</section>
<section class="mb-1">
<h2>Catégories</h2>
<ul>
<?php
$categories = get_categories( array(
'orderby' => 'name',
'order' => 'ASC'
) );
foreach( $categories as $category ) {
echo '<li><a href="' . get_category_link($category->term_id) . '">' . $category->name . '</a></li>';
}?>
</ul>
</section>
<section class="mb-1">
<h2>Archive des articles</h2>
<ul>
<?php wp_get_archives('type=yearly&format=html&show_post_count=0'); ?>
</ul>
</section>
</div>
</article>
<?php endwhile; ?>
<?php endif; ?>
</main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

25
page-roman.php
View file

@ -1,12 +1,16 @@
<?php /* Template Name: page-romans */ ?>
<?php get_header(); ?> <!-- ouvrir header,php -->
<main>
<main id="skip">
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<?php kspace_cat_breadcrumb('Romans', 'book'); ?>
<div class="well">
<?php the_content(); ?>
</div>
<?php endwhile; ?>
<?php endif; ?>
<div class="previews-section">
<div class="preview-grid">
<?php $terms = get_terms(array('taxonomy' => 'roman','hide_empty' => false));?>
<?php if ( ! empty( $terms ) && is_array( $terms ) ) : ?>
@ -36,20 +40,5 @@
</div>
</main>
<aside class="sidebar">
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<div class="card card-info">
<div class="card-header"><i class="fa fa-folder-open" aria-hidden="true"></i> <?php the_title(); ?></div>
<div class="card-body">
<?php the_content(); ?>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
<?php include(TEMPLATEPATH . '/components/sidebar-content.php'); ?>
</aside>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

2
page.php
View file

@ -1,5 +1,5 @@
<?php get_header(); ?> <!-- ouvrir header,php -->
<main>
<main id="skip">
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<article class="article-content" id="post-<?php the_ID(); ?>">

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

132
scss/_definitions.scss
View file

@ -1,124 +1,12 @@
/* --- 01. DEFINITIONS --- */
// 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
*/
// 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
// 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;
}
}
@import 'definitions/palette';
@import 'definitions/shadows';
@import 'definitions/fonts';
@import 'definitions/borders';
@import 'definitions/sizing';

2
scss/_dep.scss Normal file
View file

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

81
scss/_drawing.scss
View file

@ -5,75 +5,14 @@
*
*/
@import 'components/cards';
@import 'components/buttons';
@import 'components/previews';
.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;
}
}
@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/sidebar';
@import 'components/input';

123
scss/_font-face.scss
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;
}*/

302
scss/_global.scss
View file

@ -1,295 +1,9 @@
/* --- 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';
@import 'components/previews';
@import 'custom/featured';
@import 'custom/article';
@import 'custom/mobile';

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

115
scss/_palette.scss
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); }
}

335
scss/_typography.scss
View file

@ -1,335 +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();
.card-body > &:last-child, &.p-img {
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: 1.5rem;
}
.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;
}
.wp-block-image {
text-align:center;
}
/* 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;
}

12
scss/_utils.scss Normal file
View file

@ -0,0 +1,12 @@
/* 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';
@import 'utils/display';

7
scss/components/_badges.scss Normal file
View file

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

44
scss/components/_breadcrumb.scss Normal file
View file

@ -0,0 +1,44 @@
/* ------------------ 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;
&:not(:first-child) {
margin: 0 0 0 1rem !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;
outline-color: accentuate($color-background-alt)!important;
text-decoration: none;
&.active {
@include button-fullcontrol($color-secondary, $color-secondary, $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;
}
}

26
scss/components/_btn-groups.scss Normal file
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;
}
}

184
scss/components/_buttons.scss
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 {
@include button($button_large);
&:hover, &:active {
@ -81,120 +15,22 @@ $button_small: $lineheight_quarter;
}
}
.btn-small {
.btn-small, .badge {
@include button($button_small);
padding-left: $button_small;
padding-right: $button_small;
text-decoration:none;
}
.menu-label {
@include biseau($button_small);
padding-left: $button_small;
padding-right: $button_small;
}
// NAVBAR SPECIAL BUTTONS
.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);
}
}
line-height: 1.5em;
}
// COLORIZE BUTTONS
.btn, a.btn, .badge, .chip, a.chip, a.badge, .label, a.label, label.label {
&-blue { @include button-color($color-blue, $color-button-light); }
&-violet { @include button-color($color-violet, $color-button-light); }
&-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); }
strong.btn-fake {
@include button($button_large);
@include button-fullcontrol(transparent, transparent, rgba(0,0,0,1));
}
&-primary { @include button-color($color-primary, $color-button-light); }
&-secondary { @include button-color($color-secondary, $color-button-light); }
&-warning { @include button-color($color-warning, $color-button-light); }
&-danger { @include button-color($color-danger, $color-button-light); }
&-info { @include button-color($color-info, $color-button-light); }
&-success { @include button-color($color-success, $color-button-light);}
&-link {@include button-color(transparent, $color-dark);}
}
/* ------------------ PARTAGE RESEAUX SOCIAUX ------------------- */
.share-buttons {
margin-top: $lineheight;
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);}
}
.btn-readmore, .btn-link {
@include button-fullcontrol(transparent, accentuate($color-background-alt), $color-primary);
@include prefer-no-borders();
}

206
scss/components/_cards.scss
View file

@ -5,147 +5,25 @@
*
*/
$card-bigpad: $lineheight;
$card-smallpad: $lineheight_half;
$card-bigpad: $lineheight_rel * 1.25;
$card-smallpad: $lineheight_rel / 4;
@mixin card($size) {
@include border-radius();
background-color: $color-light2;
box-shadow: $large-shadow;
border: none;
margin:0;
margin-bottom:$lineheight;
padding: $size;
}
@mixin card-header($size) {
font-size:1.1em;
font-weight: $fontweight_big;
border-radius: 0;
padding: $size/2;
padding-left:0;
padding-right:0;
padding-bottom: $size/2!important;
margin-bottom:$lineheight_half;
line-height:$lineheight;
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);
.card {
@include panel($card-bigpad);
display: flex;
flex-direction: column;
color:$color-font;
&-body {
padding:0!important;
margin:0!important;
}
&-header {
@include card-header($card-bigpad);
@include panel-header($card-bigpad);
.fa {
margin-right: 0.5em;
}
}
/* Menu handling */
&-menu {
display:flex;
flex-direction: column;
ul {
margin:0;
padding:0;
}
li {
list-style: none;
padding:0;
margin:0;
}
.menu-element, .menu-element-link, li a, 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 */
@ -157,7 +35,7 @@ $card-smallpad: $lineheight_half;
&::before {
font-family: "ForkAwesome";
content:$symbol;
padding-right:$lineheight_half;
padding-right: $lineheight_rel / 4;
}
}
}
@ -174,11 +52,8 @@ ul.card-list, .card > ul {
padding:0;
margin:0;
li.list-element {
line-height:$lineheight;
padding-right:$lineheight_half;
padding-left:$lineheight_quarter;
padding-top:$lineheight_quarter;
padding-bottom:$lineheight_quarter;
line-height:$lineheight_rel / 2;
padding: $lineheight_rel / 4, $lineheight_rel / 4, $lineheight_rel / 4, $lineheight_rel / 2;
margin:0;
}
}
@ -191,63 +66,8 @@ ul.card-list, .card > ul {
&-success{@include list-color($color-success);}
}
.smallcard, .toast {
@include card($card-smallpad);
.smallcard {
&-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;
}
}
}

9
scss/components/_input.scss Normal file
View file

@ -0,0 +1,9 @@
input,
textarea {
width: 100%;
background-color: $color-background;
border-radius: $btn-radius;
border: 0px solid rgba(0, 0, 0, 0);
padding: $lineheight_rel / 4;
line-height: $lineheight_rel;
}

154
scss/components/_menus.scss Normal file
View file

@ -0,0 +1,154 @@
/* Menu handling */
.menu {
display: flex;
flex-direction: column;
ul,
li {
list-style: none;
padding: 0;
margin: 0;
}
a,
a:visited {
@include shape-style($lineheight_half);
display: flex;
line-height: $lineheight_rel;
padding: $lineheight_rel / 4;
margin: 0;
justify-content: space-between;
align-items: center;
text-decoration: none;
word-wrap: none;
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;
outline-color: $color-font-light;
&:hover,
&:active,
&.submenu:focus {
background-color: transparentize($color-font-light, 0.7);
}
}
input {
outline-color: $color-font-light;
}
}
&.fg-dark,
.fg-dark & {
a {
color: $color-font;
outline-color: $color-font;
&:hover,
&:active,
&.submenu:focus {
background-color: transparentize($color-font, 0.85);
}
}
input {
outline-color: $color-font;
}
}
}
.submenu .fa-caret-down {
position: relative;
top: 2px;
font-size:0.8em;
}
.toolbar {
flex-direction: row;
padding: $lineheight_rel/4;
ul {
display: flex;
flex-direction: row;
flex-grow: 1;
}
li {
text-align: center;
position: relative;
a,
span,
em,
strong,
&.toolbar-element {
display: block;
padding: $lineheight_rel/3;
padding-left: $lineheight_rel/2;
padding-right: $lineheight_rel/2;
}
ul {
visibility: hidden;
opacity: 0;
position: absolute;
transition: all 0.5s ease;
margin-top: 0rem;
left: 0;
display: none;
padding:0.33rem;
z-index:1;
}
&:hover ul,
ul:hover,
&:focus-within ul {
visibility: visible;
opacity: 1;
display: flex;
flex-direction: column;
border-radius: $card-radius;
box-shadow:0px 1px 1px rgba(0,0,0,0.2);
width: max-content;
li {
text-align:left;
}
}
}
}
.menu-divider,
.menu ul h1,
ul.menu h1,
.menu h2,
ul.menu h2 {
position: relative;
left: -$lineheight_rel / 4;
font-weight: $fontweight_hyper;
padding-top: $lineheight_rel / 4;
padding-bottom: $lineheight_rel / 4;
font-size:1em;
line-height:$lineheight_rel;
}
.menu-label {
@include shape-style($button_small);
@include button-hover();
padding-left: $button_small;
padding-right: $button_small;
}

28
scss/components/_pagination.scss Normal file
View file

@ -0,0 +1,28 @@
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 / 2;
margin-left: $button_small / 2;
text-decoration: none;
&:not(.current):not(.dots) {
@include button-color($color-background-alt);
outline-color: mix($color-background-alt, getTextColorFromBackground($color-background-alt), 85%);
}
&.current {
@include background-color($color-primary);
&::before {
background-color: $color-primary;
}
}
}
}

114
scss/components/_previews.scss
View file

@ -4,21 +4,27 @@
*
*/
$preview-height: 8*$lineheight;
$preview-content-height:165px;
$comment-peek-height:0px;
.previews-section {
.preview-grid {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-gap: $lineheight;
padding-bottom: $lineheight;
@include xl() {
@include md() {
grid-template-columns: 1fr 1fr;
}
}
@include xxl() {
.preview-grid-3 {
@include xl() {
grid-template-columns: 1fr 1fr 1fr;
}
}
.preview-container {
@ -53,21 +59,39 @@ $preview-height: 8*$lineheight;
.preview-link {
padding:0;
background-color: transparent;
margin:0!important;
text-decoration: none;
position:relative;
height: $preview-height;
.card-header {
font-family: $basefont;
font-size: 1em;
@include panel-header($lineheight_half);
@include colorize-shape($color-primary);
color: getTextColorFromBackground($color-primary);
font-weight: $fontweight_bold;
position:absolute;
margin:0;
top:0.5rem;
z-index:1;
min-height:2.8rem;
display:flex;
flex-direction: column;
justify-content: center;
}
}
.preview-item {
height: $preview-height;
.preview-content {
font-size:0.9rem;
height: 100%;
width: 100%;
line-height: $lineheight !important;
text-align:justify;
background-color:rgba(0,0,0,0.00);
color:rgba(0,0,0,0.4);
color:dim(getFontColor());
position: relative;
display: flex;
-ms-flex-align: center !important;
align-items: center !important;
justify-content: center;
overflow:hidden;
.preview-overlay {
height: 100%;
@ -75,24 +99,10 @@ $preview-height: 8*$lineheight;
top: 0;
left: 0;
position: absolute;
padding-top: $lineheight_half;
padding-top: $card-header-vmargin/2;
backdrop-filter: none;
transition: background-color 0.3s;
h1, h2, h3, h4, h5, h6 {
color: $color-light;
font-size: 1rem;
line-height: $lineheight;
font-weight:$fontweight_big;
}
.card-header {
font-family: $basefont;
font-size: 1rem;
background-color: $color-primary;
@include card-header($lineheight_half);
font-weight: $fontweight_big;
}
transition: background-color 0.3s, backdrop-filter 0.3s;
@include border-radius($card-radius);
}
&:hover {
@ -103,18 +113,29 @@ $preview-height: 8*$lineheight;
.metadata-pills {
opacity: .9;
transition: opacity .5s, height .5s;
height:135px;
}
.comment-text {
bottom:0px;
}
}
}
}
.preview-content {
.preview-exerpt {
max-height: $preview-height;
overflow:hidden;
background-size: cover;
min-height:100%;
min-width:100%;
@include border-radius($card-radius);
font-size:0.85rem;
line-height:1.25rem;
display: flex;
-ms-flex-align: center !important;
align-items: center !important;
justify-content: center;
h1, h2, h3, h4, h5, h6 {
margin-bottom:0px;
@ -138,20 +159,19 @@ $preview-height: 8*$lineheight;
text-align:center;
margin:auto;
padding:auto;
display: flex;
display: block;
width:100%;
height: $preview-height;
}
}
}
.preview-metadata {
color: $color-light;
height:165px;
color: $color-font-light;
height:100%;
overflow: hidden;
@include border-radius($card-radius);
.metadata-pills {
height:165px;
opacity: 0;
transition: opacity .3s, height .3s;
display:flex;
@ -159,28 +179,33 @@ $preview-height: 8*$lineheight;
padding-left: $lineheight/2;
padding-right: $lineheight/2;
font-size:0.9em;
padding-top:3rem;
}
}
.card-preview.card-info {
.card-preview.head-info {
.comment-text {
@include angled-edge('outside top', 'upper left', $color-skyblue, 16);
background-color:$color-skyblue;
@include angled-edge('outside top', 'upper left', $color-secondary, 16);
background-color:$color-secondary;
}
}
.card-preview.card-grey {
.comment-text {
@include angled-edge('outside top', 'upper left', $color-grey, 16);
background-color:$color-grey;
@include angled-edge('outside top', 'upper left', $color-muted, 16);
background-color:$color-muted;
}
}
.comment-text {
@include angled-edge('outside top', 'upper left', $color-violet, 16);
color: $color-light;
background-color:$color-violet;
color: $color-font-light;
background-color:$color-primary;
@include angled-edge('outside top', 'upper left', $color-primary, 16);
text-align: center;
position:absolute;
bottom:-$lineheight;
width:100%;
transition: bottom 0.3s;
}
.card-preview time {
@ -195,7 +220,7 @@ $preview-height: 8*$lineheight;
img.author-avatar, img.avatar {
display:block;
height: 4.5rem;
height: $lineheight*3;
width:auto;
border-radius:100%;
padding:0;
@ -244,6 +269,7 @@ $preview-height: 8*$lineheight;
.cover {
width:100%;
height:auto;
@include border-radius($card-radius);
}
.roman {

21
scss/components/_sidebar.scss Normal file
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;
}
}

23
scss/components/_tables.scss Normal file
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;
}

8
scss/components/_toasts.scss Normal file
View file

@ -0,0 +1,8 @@
.toast {
@include panel($card-smallpad);
padding:$card-smallpad;
font-size: 0.8rem;
a {
margin: 0;
}
}

18
scss/core/_box-sizing.scss Normal file
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();
}
}
}

11
scss/core/_containers.scss Normal file
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;
}

220
scss/core/_typography.scss Normal file
View file

@ -0,0 +1,220 @@
/* 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;
}
mark {
padding: 0.05rem 0.25rem;
border-radius: 0.1rem;
}
a {
color: darken($color-link, 10%);
outline-color: $color-link;
padding: 0.05rem;
border-radius: 0.1rem;
text-decoration: underline dashed;
&:visited {
color: darken($color-link, 10%);
}
&:hover, &:active {
&, &.fg-dark, .fg-light & {
background-color: transparentize($color-font, 0.9);
text-decoration:none;
}
.fg-light &, &.fg-light {
background-color: transparentize($color-font-light, 0.8);
text-decoration: none;
}
}
}
a:focus-visible, input:focus-visible {
outline-style: dashed;
outline-width: 2px;
outline-offset: 1px;
}
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;
}
&.nolist {
display:inline;
list-style: none;
margin: 0;
padding: 0;
li {
display: inline;
margin: 0;
padding: 0;
}
}
}
::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;
a {
border: none;
}
}
sup, sub {
& > a {
color: $color-link;
background-color:transparent;
&:hover, &:focus, &:active {
color: darken($color-link, 10%);
}
}
}
.main-title, .page-title {
font-family: $titlefont;
@include newTitle(3.815, $fontweight_base);
}
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;
}

0
scss/_angled-edges.scss → scss/custom/_angled-edges.scss
View file

37
scss/custom/_article.scss Normal file
View file

@ -0,0 +1,37 @@
.article {
img {
max-width:100%;
height:auto;
margin:auto;
}
.thumbnail img {
width:100%;
aspect-ratio: 16 / 9;
border-radius: $card-radius;
object-fit: cover;
}
}
.article-meta {
.author-area {
display: flex;
align-items: center;
margin-bottom: $lineheight / 2;
img {
border-radius: 9999px;
width: $lineheight * 3;
height: auto;
margin: 0;
margin-right: $lineheight / 2;
}
}
.article-category {
.badge {
display: inline-block;
margin-bottom: $lineheight / 4;
}
}
}

49
scss/custom/_featured.scss Normal file
View file

@ -0,0 +1,49 @@
#featured-articles {
display:grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-gap: $lineheight;
padding-bottom: $lineheight;
@include lg() {
grid-template-columns: 1fr 1fr 1fr;
}
}
.preview-featured {
font-size: 0.8rem;
.preview-link {
display: block;
padding:0;
border-radius: $card-radius;
overflow: hidden;
text-decoration: none;
.preview-item {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
background-size:100% auto;
background-position: center center;
transition: background-size .5s;
&:hover {
background-size: 120% auto;
}
}
}
.preview-overlay {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
height:100%;
color: white !important;
background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 60%);
padding:$lineheight / 8;
h2 {
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}
}
}

278
scss/custom/_global.scss Normal file
View file

@ -0,0 +1,278 @@
/* --- 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: $container-size;
margin:auto;
}
.no-pills {
list-style:none;
}
.align {
&-center {text-align: center;}
&-left {text-align: left;}
&-right {text-align: right;}
}
/* ------------------ HEADERS ------------------- */
#page-header {
background: get-color("skyblue") url('img/background.png');
border-top: 6px solid get-color("dark");
background-position: bottom center;
background-repeat: repeat-x;
margin-bottom:1.5rem;
.fa {
font-size: 1rem;
}
}
header h1 {
border-style:none !important;
font-weight: $fontweight_hyper;
font-size:5.4em;
font-style:oblique;
padding:1.5rem;
line-height: 1rem;
max-width: $container-size;
margin: auto;
text-align:center;
@include lg() {
text-align: left;
}
img {
max-width: 640px;
height: auto;
margin-top:0rem;
width: 100%;
@include lg() {
position: relative;
left:-6rem;
}
z-index:0;
}
a, a:visited, a:hover {
background-color:transparent;
outline-color:white;
display: block;
}
}
.osd {
background-color:rgba(0,0,0,0.3);
}
.navbar {
border-left: 0;
border-right: 0;
padding: 0.75rem;
color: $color-font-light;
a {
color: $color-font-light;
}
@include li-no-margin();
}
.categories {
font-weight:800;
font-size:0.8rem;
}
.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: 1.5rem;
grid-template-areas:
"main"
"side";
@include lg() {
grid-template-columns: auto 320px;
grid-template-areas: "main side";
}
}
.fullwidth {
grid-column: span 2;
}
.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: get-color("dark");
$color-footer-text: get-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, 24);
color: $color-footer-text;
padding-bottom:1.5rem;
padding-top: 1.5rem;
.columns {
a {
color: $color-footer-text;
}
}
}
.home-toast {
max-width:800px;
width:100%;
margin:auto;
}
ul.social {
font-size: 1.5em;
padding-bottom: 0;
margin: auto;
text-align: center;
display: flex;
justify-content: center;
li {
margin: 0;
list-style: none;
line-height: 1;
a,
a:visited {
color: $color-footer-back;
background-color: $color-footer-text;
padding: 0.3em;
width: 3rem;
aspect-ratio: 1;
display:flex;
align-items: center;
justify-content: center;
text-decoration: none;
border-radius: 100%;
line-height: 1;
margin:0.33rem;
&:hover {
color: $color-footer-text;
background-color: $color-footer-back;
}
}
}
}

42
scss/custom/_mobile.scss Normal file
View file

@ -0,0 +1,42 @@
#mobile-sidebar {
position: fixed;
top:0;
left:-100vw;
width:100vw;
height:100vh;
transition: left 0.2s;
padding: 1rem;
overflow: scroll;
&.shown {
left:0;
}
@include sm() {
display:none;
}
}
.menu-button {
position:fixed;
bottom: 24px;
right: 24px;
background-color:rgba(0,0,0,0.2);
color:$color-font-light;
padding:0.75em;
border:none;
font-size:1.2rem;
display:flex;
align-content: center;
justify-content: center;
aspect-ratio: 1;
border-radius:999px;
opacity: 0.75;
&:hover {
opacity:1;
}
@include sm() {
display: none;
}
}

93
scss/custom/_previews.scss Normal file
View file

@ -0,0 +1,93 @@
.preview-grid {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-gap: $lineheight / 3;
margin: -$lineheight / 3;
padding-bottom: $lineheight;
@include md() {
grid-template-columns: 1fr 1fr;
}
@include lg() {
grid-template-columns: 1fr 1fr 1fr;
}
@include xl() {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
}
.preview-list {
.preview {
display: block;
}
@include sm() {
.preview-thumbnail {
width: min-content;
img {
width: 240px;
margin-right: $lineheight /2;
}
}
.preview {
display: flex;
align-items: start;
margin-bottom: $lineheight;
}
}
@include xl() {
.preview-thumbnail img {
width: 320px;
}
}
}
.preview {
font-size: 0.8rem;
text-decoration: none;
padding: $lineheight / 3;
border-radius: $card-radius;
}
.preview-thumbnail {
display:block;
width: 100%;
background-color:transparent;
object-fit: cover;
padding:0;
line-height:0;
img {
width:100%;
object-fit: cover;
height: auto;
aspect-ratio: 16/9;
border-radius: $card-radius;
}
}
.preview h2, .preview-featured h2 {
font-size:1.25rem;
line-height: 1.5rem;
font-family: $titlefont;
font-weight: 800;
height:3rem;
color: $color-font;
a {
background-color:transparent!important;
color:$color-font;
}
}
.preview-featured h2 {
color: $color-font-light;
}
.preview-excerpt {
margin-top: $lineheight / 2;
font-size:0.8rem;
line-height:1.25rem;
color:transparentize($color-font, 0.2);
}

6
scss/definitions/_borders.scss Normal file
View file

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

29
scss/definitions/_fonts.scss Normal file
View file

@ -0,0 +1,29 @@
// FONTS
// Define how looks the text
$fontsize: 4.5mm;
$fontweight_big: 300;
$fontweight_base: 400;
$fontweight_bold: 600;
$fontweight_hyper: 800;
$basefont: Inter,
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
Cantarell,
Roboto,
Oxygen,
Ubuntu,
'Fira Sans',
'Droid Sans',
'Helvetica Neue',
sans-serif;
$titlefont: Amatic SC, sans-serif;
@font-face {
font-family: 'Amatic SC';
src: url('fonts/AmaticSC-Regular.ttf');
font-weight: 400;
}

84
scss/definitions/_palette.scss Normal file
View file

@ -0,0 +1,84 @@
/* --- 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":#0f7e84,
"violet":#CB357D,
"red":#dc322f,
"orange":#cb4b16,
"green":#859900,
"skyblue":#0f7e84,
"dark": #002b36,
"light":#FDF7E7,
"yellow":#b58900,
"grey":#586e75,
"dark2":#073642,
"light2":#eee8d5);
$semantics: (
"primary":"violet",
"secondary":"skyblue",
"warning":"orange",
"danger":"red",
"info":"skyblue",
"success":"green",
"muted":"grey",
"light":"light",
"dark":"dark");
$helpers: (
"font":"dark2",
"font-light":"light",
"background":"light",
"background-alt":"light2",
"link":"violet",
"selection":"skyblue",
"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");

8
scss/definitions/_shadows.scss Normal file
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);

35
scss/definitions/_sizing.scss Normal file
View file

@ -0,0 +1,35 @@
// SIZING
// All the spacing and sizing variables
$baseline: 1.6;
$lineheight: $baseline * 1rem;
$lineheight_half: $lineheight/2;
$lineheight_quarter: $lineheight/4;
$lineheight_rel: $baseline * 1em;
$card-header-vmargin: $lineheight_rel / 2;
$card-header-hmargin: 0px;
$card-header-padding: $lineheight_rel;
$card-header-width: 85%;
$card-header-position:0px;
// Buttons
$button_large: $lineheight_rel;
$button_small: $lineheight_rel / 4;
$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-xl-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;
}

48
scss/mixins/_btns.scss Normal file
View file

@ -0,0 +1,48 @@
@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 {
background-color:transparent;
}
}
@mixin button-fullcontrol($background-color, $hover-color, $text-color) {
@include colorize-shape($background-color);
outline-color: $background-color;
color:$text-color;
&:visited {
@include colorize-shape($background-color);
color:$text-color;
}
&, &:visited, &:not(.disabled):not(:disabled) {
&:hover, &:active {
@include colorize-shape($hover-color);
color:lighten($text-color, 5%);
outline-color: $hover-color;
box-shadow:none;
}
}
}
@mixin button-color($background-color) {
@include button-fullcontrol($background-color, mix($background-color, getTextColorFromBackground($background-color), 85%), getTextColorFromBackground($background-color));
box-shadow: $narrow-shadow;
}

60
scss/mixins/_colors.scss Normal file
View file

@ -0,0 +1,60 @@
/* --- 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() {
@return $semantics;
}
@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,
&.sr-only: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:1em;
font-weight: $fontweight_bold;
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_rel / 2;
margin-top:$lineheight_rel / 2;
line-height:1;
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:1em;
padding:0px;
margin:0px;
color:$color-font-light;
font-weight: $fontweight_big;
line-height:$lineheight_rel;
}
}

84
scss/mixins/_responsive.scss Normal file
View file

@ -0,0 +1,84 @@
// 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;
}
@mixin responsive() {
@content;
&-sm {
@include sm() {
@content;
}
}
&-md {
@include md() {
@content;
}
}
&-lg {
@include lg() {
@content;
}
}
&-xl {
@include xl() {
@content;
}
}
&-xxl {
@include xxl() {
@content;
}
}
}

33
scss/mixins/_shape.scss Normal file
View file

@ -0,0 +1,33 @@
@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;
}
}
@mixin shape-style($size) {
@include borders();
@include border-radius($btn-radius);
@include biseau($size);
background-color:transparent;
}
@mixin colorize-shape($background-color) {
background-color: $background-color;
&:before {
background-color: $background-color;
}
}

22
scss/style.scss
View file

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

23
scss/utils/_a11y.scss Normal file
View file

@ -0,0 +1,23 @@
/* 1.0 - Accessibility classes
* Some classes to help accessibility
**/
.screen-reader-text {
visibility: collapse;
font-size:0;
}
.skip {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
.skip:focus-within {
position: static;
width: auto;
height: auto;
}

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

77
scss/utils/_colorize.scss Normal file
View file

@ -0,0 +1,77 @@
/* 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 {
color:currentColor;
outline-color: currentColor;
}
}
.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;
}

17
scss/utils/_display.scss Normal file
View file

@ -0,0 +1,17 @@
.d-none {
@include responsive() {
display: none !important;
}
}
.d-block {
@include responsive() {
display: block!important;
}
}
.d-flex {
@include responsive() {
display: flex!important;
}
}

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 0 through 4 {
@include addmargins($i, $lineheight*$i)
}
}
.p {
@include addpaddings("half", $lineheight * .5);
@for $i from 0 through 4 {
@include addpaddings($i, $lineheight*$i)
}
}

4
search.php
View file

@ -1,6 +1,6 @@
<?php get_header(); ?> <!-- ouvrir header,php -->
<main>
<h1 class="page-title"><i class="fa fa-fw fa-search" aria-hidden="true"></i><?php _e('', 'sandbox') ?> Recherche pour le terme « <?php echo get_search_query(); ?> »</h1>
<main id="skip">
<h1 class="page-title"><?php _e('', 'sandbox') ?> Recherche pour le terme « <?php echo get_search_query(); ?> »</h1>
<?php include(TEMPLATEPATH . '/components/posts-list.php'); ?>
</main>

3
sidebar.php
View file

@ -1,3 +1,4 @@
<aside class="sidebar">
<aside class="sidebar" aria-labelledby="title-sidebar">
<h1 class="sr-only" id="title-sidebar">Menu de navigation</h1>
<?php include(TEMPLATEPATH . '/components/sidebar-content.php'); ?>
</aside>

2
single-notitle.php
View file

@ -5,7 +5,7 @@ Template Post Type: post
*/
?> <!-- ouvrir header,php -->
<main>
<main id="skip">
<?php $haveTitle = false; ?>
<?php include(TEMPLATEPATH . '/components/article.php'); ?>

4392
style.css
View file

File diff suppressed because one or more lines are too long

18
tag.php
View file

@ -1,15 +1,10 @@
<?php get_header(); ?> <!-- ouvrir header,php -->
<main>
<main id="skip">
<?php $tag = get_category( get_query_var( 'tag' ) );
kspace_cat_breadcrumb_with_rss(single_cat_title('', false), 'tag', 'RSS du tag', get_tag_link( $tag->cat_ID ) . '/feed' );
?>
<?php include(TEMPLATEPATH . '/components/preview-list.php'); ?>
</main>
<!-- Sidebar custom pour contenir la description -->
<aside class="sidebar">
<div class="card card-info">
<div class="card-header"><i class="fa fa-fw fa-tag"></i> <?php echo single_cat_title(); ?></div>
<div class="card-body">
<div class="well">
<?php echo tag_description();?>
<?php $infourl = get_term_meta(get_queried_object_id(), 'plus-dinfo', true);
if ($infourl != null) {
@ -17,8 +12,9 @@
}
?>
</div>
</div>
<?php include(TEMPLATEPATH . '/components/sidebar-content.php'); ?>
</aside>
<?php include(TEMPLATEPATH . '/components/preview-list.php'); ?>
</main>
<!-- Sidebar custom pour contenir la description -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

2
taxonomy-roman.php
View file

@ -29,7 +29,7 @@
$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-menu">
<?php if($query->have_posts()) : ?>