init: fork from kspace

This commit is contained in:
Kazhnuz Klappsthul 2022-12-17 19:46:29 +01:00
parent 4374332eb8
commit 16af9f9645
103 changed files with 20344 additions and 0 deletions

12
404.php Normal file
View File

@ -0,0 +1,12 @@
<?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>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

7
archive.php Normal file
View File

@ -0,0 +1,7 @@
<?php get_header(); ?> <!-- ouvrir header,php -->
<main>
<?php kspace_cat_breadcrumb(get_the_archive_title(), 'calendar'); ?>
<?php include(TEMPLATEPATH . '/components/preview-list.php'); ?>
</main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

21
category-blog.php Normal file
View File

@ -0,0 +1,21 @@
<?php get_header(); ?> <!-- ouvrir header,php -->
<main>
<?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>
<?php include(TEMPLATEPATH . '/components/sidebar-content.php'); ?>
</aside>
<?php get_footer(); ?>

21
category.php Normal file
View File

@ -0,0 +1,21 @@
<?php get_header(); ?> <!-- ouvrir header,php -->
<main>
<?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>
<?php include(TEMPLATEPATH . '/components/sidebar-content.php'); ?>
</aside>
<?php get_footer(); ?>

114
comments.php Normal file
View File

@ -0,0 +1,114 @@
<?php // Do not delete these lines
if ('comments.php' == basename($_SERVER['SCRIPT_FILENAME'])) die ('Ne pas t&eacute;l&eacute;charger cette page directement, merci !');
if (!empty($post->post_password)) { // if there's a password
if ($_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password) { // and it doesn't match the cookie
?>
<h2><?php _e('Prot&eacute;g&eacute; par mot de passe'); ?></h2>
<p><?php _e('Entrer le mot de passe pour voir les commentaires'); ?></p>
<?php return;
}
}
/* This variable is for alternating comment background */
$oddcomment = 'alt';
?>
<!-- You can start editing here. -->
<section class="comment-list">
<?php if ($comments) : ?>
<h1 class="page-title" id="comments"><?php comments_number('Pas de commentaire', 'Un commentaire', '% commentaires' );?></h1>
<?php foreach ($comments as $comment) : ?>
<article class="card comment">
<div class="author-area">
<?php echo get_avatar( get_the_author_meta('user_email'), $size = '120'); ?>
<div class="author-metadata">
<div class="author-pseudo">Écrit par <a href="" >Pseudo</a></div>
<small class="author-date">Le vendredi 19 septembre 2014 à 07:16</small>
</div>
</div>
<div class="card-body">
<?php comment_text() ?>
</div>
</article>
<?php /* Changes every other comment to a different class */
if ('alt' == $oddcomment) $oddcomment = '';
else $oddcomment = 'alt';
?>
<?php endforeach; /* end for each comment */ ?>
<?php else : // this is displayed if there are no comments so far ?>
<?php if ('open' == $post->comment_status) : ?>
<!-- If comments are open, but there are no comments. -->
<?php else : // comments are closed ?>
<!-- If comments are closed. -->
<p class="nocomments toast toast-danger">Les commentaires sont fermŽs !</p>
<?php endif; ?>
<?php endif; ?>
<?php if ('open' == $post->comment_status) : ?>
<div class="card card-primary">
<h2 id="respond" class="card-header">Laissez un commentaire</h2>
<!-- Cas du besoin de s'enregistrer -->
<?php if ( get_option('comment_registration') && !$user_ID ) : ?>
<p>You must be <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php the_permalink(); ?>">connect&eacute;</a> pour laisser un commentaire.</p>
<!-- Utilisateur enregistré -->
<?php else : ?>
<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
<?php if ( $user_ID ) : ?>
<div class="toast toast-info alert-flex" role="alert">
<p class="mb-0"><i class="fa fa-info fa-fw" aria-hidden="true" ></i> Connect&eacute; en tant que <a class="alert-link" href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>.</p>
<p class="mb-0 align-right"><a class="alert-link" href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout"><i class="fa fa-fw fa-power-off"></i> <span class="sr-only">Se d&eacute;connecter de ce compte</span></a></p>
</div>
<!-- Commentaire non-enregistré -->
<?php else : ?>
<div class="toast toast-info"><p>Ce site utilise Akismet pour réduire les contenus indésirables (spam, etc). <a href="https://akismet.com/privacy/">En savoir plus sur la façon dont les données de vos commentaires sont traitées.</a></p></div>
<div class="input-group mb-3">
<input type="text" class="form-control" name="author" id="author" placeholder="Nom <?php if ($req) echo "(requis)"; ?>" aria-label="Username" value="<?php echo $comment_author; ?>" size="40" />
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" name="email" id="email" placeholder="Courriel (ne sera pas publi&eacute;) <?php if ($req) echo "(requis)"; ?>" value="<?php echo $comment_author_email; ?>" size="40" />
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" name="url" id="url" placeholder="Site Web" value="<?php echo $comment_author_url; ?>" size="40" />
</div>
<?php endif; ?>
<div class="input-group mb-3">
<textarea class="form-control" name="comment" id="comment" aria-label="Contenu du commentaire" placeholder="Contenu du commentaire"></textarea>
</div>
<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
<?php do_action('comment_form', $post->ID); ?>
<p class="align-right"><button name="submit" class="btn btn-primary" type="submit" id="submit" value="Envoyer" >Envoyer</button>
</p>
</form>
</div>
<?php endif; // If registration required and not logged in ?>
</section>
<?php endif; // if you delete this the sky will fall on your head ?>

35
components/article.php Normal file
View File

@ -0,0 +1,35 @@
<?php include(TEMPLATEPATH . '/components/article/breadcrumb.php'); ?>
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<?php include(TEMPLATEPATH . '/components/article/flags.php'); ?>
<article class="article container-article" id="post-<?php the_ID(); ?>">
<?php if ($haveTitle) { ?>
<h1 class="page-title"><?php the_title(); ?></h1>
<?php } ?>
<div class="article-entry">
<?php the_content(); ?>
</div>
</article>
<section class="card card-noheader">
<div class="author-area">
<?php echo get_avatar( get_the_author_meta('user_email'), $size = '120'); ?>
<div class="author-metadata">
<div class="author-pseudo">Écrit par <a href="https://kazhnuz.space"><?php the_author() ?></a></div>
<small class="author-date">Le <?php the_time('l j F Y à H:i') ?></small>
</div>
</div>
<?php include(TEMPLATEPATH . '/components/article/description.php'); ?>
<div class="article-category">
<?php include(TEMPLATEPATH . '/components/article/terms.php'); ?>
</div>
</section>
<?php comments_template(); ?>
<?php endwhile; ?>
<?php endif; ?>

View File

@ -0,0 +1,20 @@
<div class="flex-that">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class='breadcrumb-item'><a href='<?php echo site_url(); ?>'>kazhnuz.space</a></li><?php
if (has_category('chapters')) {
$romans = get_the_terms($post->ID, 'roman');
foreach( $romans as $roman ) {
echo "<li class='breadcrumb-item'><a href='" . esc_url( get_category_link( $roman->term_id ) ) . "'><i class='fa fa-book'></i> " . $roman->name . "</a></li>";
}
} else {
$categories = get_the_category();
foreach( $categories as $category ) {
echo "<li class='breadcrumb-item'><a href='" . esc_url( get_category_link( $category->term_id ) ) . "'><i class='fa fa-folder-open'></i> " . $category->cat_name . "</a></li>";
}
}
?><li class="breadcrumb-item" aria-current="page"><span class="active"><i class="fa fa-file" aria-hidden="true"></i> <?php echo the_title(); ?></span></li>
</ol>
</nav>
</div>

View File

@ -0,0 +1,9 @@
<?php
$custom_fields = get_post_custom();
$my_custom_field = $custom_fields['description'];
if ($my_custom_field != null) {
foreach ( $my_custom_field as $key => $value ) {
echo " <div class='card-body'> " . $value . "</div>";
}
}
?>

View File

@ -0,0 +1,9 @@
<?php $flags = get_the_terms($post->ID, 'flag');
if ($flags) {
foreach( $flags as $flag ) {
$term_meta = get_option( "taxonomy_term_$flag->term_id" );
echo "<div class='toast toast-" . $term_meta['niveau'] . "'>";
echo $flag->description;
echo "</div>";
}
} ?>

View File

@ -0,0 +1,19 @@
<?php
if (has_category('chapters')) {
$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'><i class='fa fa-book'></i> " . $roman->name . "</a>";
}
} else {
$categories = get_the_category();
foreach( $categories as $category ) {
echo "<a href= '" . esc_url( get_category_link( $category->term_id ) ) . "' class='btn-small btn-info'><i class='fa fa-folder'></i> " . $category->cat_name . "</a>";
}
}
$tags = get_the_tags();
if ($tags) {
foreach( $tags as $tag ) {
echo "<a href= '" . esc_url( get_tag_link( $tag->term_id ) ) . "' class='btn-small btn-primary'><i class='fa fa-tag'></i> " . $tag->name . "</a> ";
}
}
?>

34
components/featured.php Normal file
View File

@ -0,0 +1,34 @@
<div id="featured-articles">
<?php
query_posts(array(
'post_type' => 'post',
'tax_query' => array(
array(
'taxonomy' => 'category',
'terms' => 'blog',
'field' => 'slug',
)
),
'orderby' => 'date',
'post_count' => '1',
'order' => 'DESC',
'posts_per_page' => '1'
));
if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
<div class="card card-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">
<?php $category = get_the_category();
echo"<a href= '" . esc_url( get_category_link( $category[0]->term_id ) ) . "' class='btn-small btn-info'><i class='fa fa-folder'></i> " . $category[0]->cat_name . "</a>"; ?>
</div>
<time itemprop="datePublished"><em><?php the_time('j F Y') ?></em></time>
</div>
<?php the_excerpt(); ?>
<p class="align-center"> <a href="<?php the_permalink(); ?>" class="btn btn-readmore" title="<?php the_title();?>">Lire l'article</a> </p>
</div>
<?php endwhile; ?> <?php wp_reset_query(); /*4*/ ?>
</div>

View File

@ -0,0 +1,35 @@
<footer>
<ul class="social">
<?php
$listmenu = get_nav_menu_locations();
$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> ';
}
}
?>
<li class="social-li">
<a class="social-link" href="https://kazhnuz.space/links" title="Plus de liens" aria-label="Plus de liens">
<i class="fa fa-fw fa-ellipsis-h" aria-hidden="true"></i>
</a>
</li>
</ul>
<div class="footer-collumns">
<div>
<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>
<div>
<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>
<div>
<p>Kazhnuz Space et les différents sites/services qui le composent sont fourni "tel-quel", sans garantie. Cependant, toute critique, remarque, etc. est la bienvenue. Pour cela, vous pouvez me contacter à kazhnuz [at] kobold [point] cafe ou sur les réseaux sociaux visible plus haut</p>
</div>
</div>
</footer>

17
components/globalflag.php Normal file
View File

@ -0,0 +1,17 @@
<?php $flags = get_terms(
array(
'taxonomy' => 'flag',
'hide_empty' => false,
)
);
if ($flags) {
foreach( $flags as $flag ) {
if ($flag->slug == "global") {
$term_meta = get_option( "taxonomy_term_$flag->term_id" );
echo "<div class='toast toast-" . $term_meta['niveau'] . "'>";
echo $flag->description;
echo "</div>";
}
}
} ?>

View File

@ -0,0 +1,4 @@
<header id="page-header">
<?php include(TEMPLATEPATH . '/components/navbar-pages.php'); ?>
<?php include(TEMPLATEPATH . '/components/logo.php'); ?>
</header>

3
components/logo.php Normal file
View File

@ -0,0 +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>

View File

@ -0,0 +1,19 @@
<nav class="navbar navbar-expand-lg navbar-dark bg-grey" id="navbar-category">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav nav-justified w-100">
<?php
$categories = get_categories( array(
'orderby' => 'name',
'order' => 'ASC'
) );
foreach( $categories as $category ) {
echo '<li class="nav-item"><a class="nav-link" href="' . get_category_link($category->term_id) . '">' . $category->name . '</a></li>';
}?>
</ul>
</div>
</nav>

View File

@ -0,0 +1,46 @@
<nav class="toolbar flex-that">
<ul>
<li>
<a href="<?php echo site_url(); ?>" class="btn btn-navbar">
<i class="fa fa-home" aria-hidden="true"></i><span class="sr-only">Accueil</span>
</a>
</li>
<li>
<span class="btn btn-navbar">
Catégories <i class="fa fa-caret-down" aria-hidden="true"></i>
<ul class="card-menu">
<?php
$categories = get_categories( array(
'orderby' => 'name',
'order' => 'ASC'
) );
foreach( $categories as $category ) {
if ($category->slug != "blog" && $category->slug != "chapters") {
echo '<li><a class="menu-element" href="' . get_category_link($category->term_id) . '">' . $category->name . '</a></li>';
}
}?>
</ul>
</span>
</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="btn btn-navbar">'. $menuElement->title . '</a></li>';
}
?>
</ul>
<ul>
<?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="btn btn-navbar">'. $menuElement->title . '</a></li>';
}
?>
<li><a href="<?php bloginfo('rss2_url'); ?>" class="btn btn-navbar"><i class="fa fa-rss" aria-hidden="true"></i><span class="sr-only">Flux RSS du site</span></a></li>
</ul>
</nav>

15
components/opengraph.php Normal file
View File

@ -0,0 +1,15 @@
<?php if ( is_single() ) { ?>
<?php if(!has_post_thumbnail( $post->ID )) {
$image = get_template_directory_uri() . "/img/default-preview.png";
} else {
$image = get_the_post_thumbnail_url();
}
?>
<meta property='og:url' content='<?php echo get_permalink(); ?>'/>
<meta property='og:type' content='article'/>
<meta property='og:title' content='<?php wp_title(''); ?>'/>
<meta property='og:site_name' content='<?php bloginfo('name'); ?>'/>
<meta property='og:image' content='<?php echo $image ?>'/>
<meta property='og:description' content='<?php the_excerpt(); ?>'/>
<?php } ?>

18
components/posts-list.php Normal file
View File

@ -0,0 +1,18 @@
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<div class="card card-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">
<?php $category = get_the_category();
echo"<a href= '" . esc_url( get_category_link( $category[0]->term_id ) ) . "' class='btn-small btn-info'><i class='fa fa-folder'></i> " . $category[0]->cat_name . "</a>"; ?>
</div>
<time itemprop="datePublished"><em><?php the_time('j F Y') ?></em></time>
</div>
<?php the_excerpt(); ?>
<p class="align-center"> <a href="<?php the_permalink(); ?>" class="btn btn-readmore" title="<?php the_title();?>">Lire l'article</a> </p>
</div>
<?php endwhile; ?>
<div class="navigation">
<?php the_posts_pagination(); ?>
</div>
<?php endif; ?>

View File

@ -0,0 +1,34 @@
<?php if(have_posts()) : ?>
<div class="previews-section">
<?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">
<div class="preview-content" aria-hidden="true"><?php the_excerpt(); ?></div>
<div class="preview-overlay">
<h1 class="card-header"><?php the_title(); ?></h1>
<div class="preview-metadata">
<div class="metadata-pills">
<div><?php
if (!has_category('chapters')) {
$category = get_the_category();
echo"<span class='btn-small btn-info small-text'>" . $category[0]->cat_name . "</span>";
} else {
$romans = get_the_terms($post->ID, 'roman');
echo"<span class='btn-small btn-info small-text'>" . $romans[0]->name . "</span>";
}
?></div>
<div><time><span class="btn-small btn-info small-text"><?php the_time('d/m/Y') ?></span></time></div>
</div>
<div class="comment-text"><?php comments_number('Pas de commentaire', 'Un commentaire', '% commentaires' );?></div>
</div>
</div>
</div>
</a>
</article>
<?php endwhile; ?>
</div>
<div class="navigation">
<?php the_posts_pagination(); ?>
</div>
<?php endif; ?>

View File

@ -0,0 +1,5 @@
<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" />
</div>
</form>

View File

@ -0,0 +1,5 @@
<?php include(TEMPLATEPATH . '/components/sidebar/last-articles.php'); ?>
<?php include(TEMPLATEPATH . '/components/sidebar/categories.php'); ?>
<?php include(TEMPLATEPATH . '/components/sidebar/tags.php'); ?>
<?php include(TEMPLATEPATH . '/components/sidebar/archives.php'); ?>
<?php include(TEMPLATEPATH . '/components/sidebar/links.php'); ?>

View File

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

View File

@ -0,0 +1,16 @@
<div class="card card-primary">
<div class="card-header"><i class="fa fa-folder" aria-hidden="true"></i> Catégories</div>
<ul class="card-menu">
<?php
$categories = get_categories( array(
'orderby' => 'name',
'order' => 'ASC'
) );
foreach( $categories as $category ) {
if ($category->slug != "blog" && $category->slug != "chapters") {
echo '<li><a class="menu-element" href="' . get_category_link($category->term_id) . '">' . $category->name . '<span class="menu-label label-secondary">'. $category->count . '</span></a></li>';
}
}?>
</ul>
</div>

View File

@ -0,0 +1,13 @@
<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>

View File

@ -0,0 +1,19 @@
<?php
$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>
<?php
}
?>

View File

@ -0,0 +1,21 @@
<?php
$args = array(
'smallest' => 8, 'largest' => 22, 'unit' => 'pt', 'number' => 999,
'format' => 'array', 'orderby' => 'name', 'order' => 'ASC',
'exclude' => '', 'include' => '');
$tags = get_tags($args);
?>
<div class="card card-primary">
<div class="card-header"><i class="fa fa-tags" aria-hidden="true"></i> Tags</div>
<div class="card-body">
<ul class="tag-list">
<?php foreach ($tags as $tag) {?>
<li><a href="<?php bloginfo('url'); ?>/tag/<?php echo $tag->slug ?>"><?php echo $tag->name ?></a></li>
<?php } ?>
</ul>
</div>
</div>

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,446 @@
/*!
Fork Awesome 1.1.7
License - https://forkaweso.me/Fork-Awesome/license
Copyright 2018 Dave Gandy & Fork Awesome
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
.fas,
.fab,
.far {
display: inline-block;
font: normal normal normal 14px/1 ForkAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fas.fa-chart-area:before {
content: "\f1fe";
}
.fas.fa-arrows-alt:before {
content: "\f047";
}
.fas.fa-expand-arrows-alt:before {
content: "\f0b2";
}
.fas.fa-arrows-alt-h:before {
content: "\f07e";
}
.fas.fa-arrows-alt-v:before {
content: "\f07d";
}
.fas.fa-calendar-alt:before {
content: "\f073";
}
.fas.fa-circle-notch:before {
content: "\f1ce";
}
.fas.fa-cloud-download-alt:before {
content: "\f0ed";
}
.fas.fa-cloud-upload-alt:before {
content: "\f0ee";
}
.fas.fa-credit-card:before {
content: "\f283";
}
.fas.fa-dollar-sign:before {
content: "\f155";
}
.fas.fa-euro-sign:before {
content: "\f153";
}
.fas.fa-exchange-alt:before {
content: "\f0ec";
}
.fas.fa-external-link-alt:before {
content: "\f08e";
}
.fas.fa-external-link-square-alt:before {
content: "\f14c";
}
.fas.fa-eye-dropper:before {
content: "\f1fb";
}
.fas.fa-pound-sign:before {
content: "\f154";
}
.fas.fa-glass-martini:before {
content: "\f000";
}
.fas.fa-shekel-sign:before {
content: "\f20b";
}
.fas.fa-rupee-sign:before {
content: "\f156";
}
.fas.fa-won-sign:before {
content: "\f159";
}
.fas.fa-level-down-alt:before {
content: "\f149";
}
.fas.fa-level-up-alt:before {
content: "\f148";
}
.fas.fa-chart-line:before {
content: "\f201";
}
.fas.fa-long-arrow-alt-down:before {
content: "\f175";
}
.fas.fa-long-arrow-alt-left:before {
content: "\f177";
}
.fas.fa-long-arrow-alt-right:before {
content: "\f178";
}
.fas.fa-long-arrow-alt-up:before {
content: "\f176";
}
.fas.fa-map-marker-alt:before {
content: "\f041";
}
.fas.fa-mobile-alt:before {
content: "\f10b";
}
.fas.fa-pencil-alt:before {
content: "\f040";
}
.fas.fa-pen-square:before {
content: "\f14b";
}
.fas.fa-chart-pie:before {
content: "\f200";
}
.fas.fa-yen-sign:before {
content: "\f157";
}
.fas.fa-ruble-sign:before {
content: "\f158";
}
.fas.fa-shield-alt:before {
content: "\f132";
}
.fas.fa-sign-in-alt:before {
content: "\f090";
}
.fas.fa-sign-out-alt:before {
content: "\f08b";
}
.fas.fa-sliders-h:before {
content: "\f1de";
}
.fas.fa-tablet-alt:before {
content: "\f10a";
}
.fas.fa-tachometer-alt:before {
content: "\f0e4";
}
.fas.fa-thumbtack:before {
content: "\f08d";
}
.fas.fa-ticket-alt:before {
content: "\f145";
}
.fas.fa-trash-alt:before {
content: "\f1f8";
}
.fas.fa-lira-sign:before {
content: "\f195";
}
.fab.fa-linkedin-in:before {
content: "\fe01";
}
.fab.fa-linkedin:before {
content: "\f08c";
}
.far.fa-address-book:before {
content: "\f2ba";
}
.far.fa-address-card:before {
content: "\f2bc";
}
.far.fa-arrow-alt-circle-down:before {
content: "\f01a";
}
.far.fa-arrow-alt-circle-left:before {
content: "\f190";
}
.far.fa-arrow-alt-circle-right:before {
content: "\f18e";
}
.far.fa-arrow-alt-circle-up:before {
content: "\f01b";
}
.far.fa-bell:before {
content: "\f0f3";
}
.far.fa-bell-slash:before {
content: "\f1f7";
}
.far.fa-bookmark:before {
content: "\f097";
}
.far.fa-building:before {
content: "\f0f7";
}
.far.fa-calendar-check:before {
content: "\f274";
}
.far.fa-calendar-minus:before {
content: "\f272";
}
.far.fa-calendar:before {
content: "\f133";
}
.far.fa-calendar-plus:before {
content: "\f271";
}
.far.fa-calendar-times:before {
content: "\f273";
}
.far.fa-caret-square-down:before {
content: "\f150";
}
.far.fa-caret-square-left:before {
content: "\f191";
}
.far.fa-caret-square-right:before {
content: "\f152";
}
.far.fa-caret-square-up:before {
content: "\f151";
}
.far.fa-check-circle:before {
content: "\f05d";
}
.far.fa-check-square:before {
content: "\f046";
}
.far.fa-circle:before {
content: "\f10c";
}
.far.fa-clock:before {
content: "\f017";
}
.far.fa-comment:before {
content: "\f0e5";
}
.far.fa-comment-dots:before {
content: "\f27b";
}
.far.fa-comments:before {
content: "\f0e6";
}
.far.fa-dot-circle:before {
content: "\f192";
}
.far.fa-id-card:before {
content: "\f2c3";
}
.far.fa-envelope:before {
content: "\f003";
}
.far.fa-envelope-open:before {
content: "\f2b7";
}
.far.fa-file-archive:before {
content: "\f1c6";
}
.far.fa-file-audio:before {
content: "\f1c7";
}
.far.fa-file-code:before {
content: "\f1c9";
}
.far.fa-file-excel:before {
content: "\f1c3";
}
.far.fa-file-image:before {
content: "\f1c5";
}
.far.fa-file-video:before {
content: "\f1c8";
}
.far.fa-copy:before,
.far.fa-file:before {
content: "\f016";
}
.far.fa-file-pdf:before {
content: "\f1c1";
}
.far.fa-file-powerpoint:before {
content: "\f1c4";
}
.far.fa-file-alt:before {
content: "\f0f6";
}
.far.fa-file-word:before {
content: "\f1c2";
}
.far.fa-flag:before {
content: "\f11d";
}
.far.fa-save:before {
content: "\f0c7";
}
.far.fa-folder:before {
content: "\f114";
}
.far.fa-folder-open:before {
content: "\f115";
}
.far.fa-frown:before {
content: "\f119";
}
.far.fa-futbol:before {
content: "\f1e3";
}
.far.fa-hand-rock:before {
content: "\f255";
}
.far.fa-hand-lizard:before {
content: "\f258";
}
.far.fa-hand-point-down:before {
content: "\f0a7";
}
.far.fa-hand-point-left:before {
content: "\f0a5";
}
.far.fa-hand-point-right:before {
content: "\f0a4";
}
.far.fa-hand-point-up:before {
content: "\f0a6";
}
.far.fa-hand-paper:before {
content: "\256";
}
.far.fa-hand-pointer:before {
content: "\f25a";
}
.far.fa-hand-scissors:before {
content: "\f257";
}
.far.fa-hand-spock:before {
content: "\f259";
}
.far.fa-handshake:before {
content: "\f2b5";
}
.far.fa-hdd:before {
content: "\f0a0";
}
.far.fa-heart:before {
content: "\f08a";
}
.far.fa-hospital:before {
content: "\f0f8";
}
.far.fa-hourglass:before {
content: "\f250";
}
.far.fa-id-card:before {
content: "\f2c3";
}
.far.fa-keyboard:before {
content: "\f11c";
}
.far.fa-lemon:before {
content: "\f094";
}
.far.fa-lightbulb:before {
content: "\f0eb";
}
.far.fa-meh:before {
content: "\f11a";
}
.far.fa-minus-square:before {
content: "\f147";
}
.far.fa-money-bill-alt:before {
content: "\f0d6";
}
.far.fa-moon:before {
content: "\f186";
}
.far.fa-newspaper:before {
content: "\f1ea";
}
.far.fa-paper-plane:before {
content: "\f1d9";
}
.far.fa-pause-circle:before {
content: "\f28c";
}
.far.fa-edit:before {
content: "\f044";
}
.far.fa-image:before {
content: "\f03e";
}
.far.fa-play-circle:before {
content: "\f01d";
}
.far.fa-plus-square:before {
content: "\f196";
}
.far.fa-question-circle:before {
content: "\f92c";
}
.far.fa-share-square:before {
content: "\f045";
}
.far.fa-smile:before {
content: "\f118";
}
.far.fa-snowflake:before {
content: "\f2dc";
}
.far.fa-futbol:before {
content: "\f1e3";
}
.far.fa-star-half:before {
content: "\f089";
}
.far.fa-star:before {
content: "\f006";
}
.far.fa-sticky-note:before {
content: "\f24a";
}
.far.fa-stop-circle:before {
content: "\f28e";
}
.far.fa-sun:before {
content: "\f185";
}
.far.fa-thumbs-down:before {
content: "\f088";
}
.far.fa-thumbs-up:before {
content: "\f087";
}
.far.fa-times-circle:before {
content: "\f05c";
}
.far.fa-window-close:before {
content: "\f2d4";
}
.far.fa-trash-alt:before {
content: "\f014";
}
.far.fa-user-circle:before {
content: "\f2be";
}
.far.fa-user:before {
content: "\f2c0";
}

12
dep/fork-awesome/css/v5-compat.min.css vendored Normal file

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1 @@
{"version":3,"sources":["v5-compat.css"],"names":[],"mappings":";;;;;;;;;;;AAaA,KACA,KAFA,KAGE,QAAA,aACA,KAAA,OAAA,OAAA,OAAA,KAAA,EAAA,YACA,UAAA,QACA,eAAA,KACA,uBAAA,YACA,wBAAA,UAEgB,0BAChB,QAAA,QAEgB,0BAChB,QAAA,QAEuB,iCACvB,QAAA,QAEkB,4BAClB,QAAA,QAEkB,4BAClB,QAAA,QAEkB,4BAClB,QAAA,QAEkB,4BAClB,QAAA,QAEwB,kCACxB,QAAA,QAEsB,gCACtB,QAAA,QAEiB,2BACjB,QAAA,QAEiB,2BACjB,QAAA,QAEe,yBACf,QAAA,QAEkB,4BAClB,QAAA,QAEuB,iCACvB,QAAA,QAE8B,wCAC9B,QAAA,QAEiB,2BACjB,QAAA,QAEgB,0BAChB,QAAA,QAEmB,6BACnB,QAAA,QAEiB,2BACjB,QAAA,QAEgB,0BAChB,QAAA,QAEc,wBACd,QAAA,QAEoB,8BACpB,QAAA,QAEkB,4BAClB,QAAA,QAEgB,0BAChB,QAAA,QAEyB,mCACzB,QAAA,QAEyB,mCACzB,QAAA,QAE0B,oCAC1B,QAAA,QAEuB,iCACvB,QAAA,QAEoB,8BACpB,QAAA,QAEgB,0BAChB,QAAA,QAEgB,0BAChB,QAAA,QAEgB,0BAChB,QAAA,QAEe,yBACf,QAAA,QAEc,wBACd,QAAA,QAEgB,0BAChB,QAAA,QAEgB,0BAChB,QAAA,QAEiB,2BACjB,QAAA,QAEkB,4BAClB,QAAA,QAEe,yBACf,QAAA,QAEgB,0BAChB,QAAA,QAEoB,8BACpB,QAAA,QAEe,yBACf,QAAA,QAEgB,0BAChB,QAAA,QAEe,yBACf,QAAA,QAEe,yBACf,QAAA,QAEiB,2BACjB,QAAA,QAEc,wBACd,QAAA,QAEkB,4BAClB,QAAA,QAEkB,4BAClB,QAAA,QAE2B,qCAC3B,QAAA,QAE2B,qCAC3B,QAAA,QAE4B,sCAC5B,QAAA,QAEyB,mCACzB,QAAA,QAEU,oBACV,QAAA,QAEgB,0BAChB,QAAA,QAEc,wBACd,QAAA,QAEc,wBACd,QAAA,QAEoB,8BACpB,QAAA,QAEoB,8BACpB,QAAA,QAEc,wBACd,QAAA,QAEmB,6BACnB,QAAA,QAEoB,8BACpB,QAAA,QAEuB,iCACvB,QAAA,QAEuB,iCACvB,QAAA,QAEwB,kCACxB,QAAA,QAEqB,+BACrB,QAAA,QAEkB,4BAClB,QAAA,QAEkB,4BAClB,QAAA,QAEY,sBACZ,QAAA,QAEW,qBACX,QAAA,QAEa,uBACb,QAAA,QAEkB,4BAClB,QAAA,QAEc,wBACd,QAAA,QAEgB,0BAChB,QAAA,QAEa,uBACb,QAAA,QAEc,wBACd,QAAA,QAEmB,6BACnB,QAAA,QAEkB,4BAClB,QAAA,QAEgB,0BAChB,QAAA,QAEe,yBACf,QAAA,QAEgB,0BAChB,QAAA,QAEgB,0BAChB,QAAA,QAEgB,0BAChB,QAAA,QAEU,oBACA,oBACV,QAAA,QAEc,wBACd,QAAA,QAEqB,+BACrB,QAAA,QAEc,wBACd,QAAA,QAEe,yBACf,QAAA,QAEU,oBACV,QAAA,QAEU,oBACV,QAAA,QAEY,sBACZ,QAAA,QAEiB,2BACjB,QAAA,QAEW,qBACX,QAAA,QAEY,sBACZ,QAAA,QAEe,yBACf,QAAA,QAEiB,2BACjB,QAAA,QAEqB,+BACrB,QAAA,QAEqB,+BACrB,QAAA,QAEsB,gCACtB,QAAA,QAEmB,6BACnB,QAAA,QAEgB,0BAChB,QAAA,OAEkB,4BAClB,QAAA,QAEmB,6BACnB,QAAA,QAEgB,0BAChB,QAAA,QAEe,yBACf,QAAA,QAES,mBACT,QAAA,QAEW,qBACX,QAAA,QAEc,wBACd,QAAA,QAEe,yBACf,QAAA,QAEa,uBACb,QAAA,QAEc,wBACd,QAAA,QAEW,qBACX,QAAA,QAEe,yBACf,QAAA,QAES,mBACT,QAAA,QAEkB,4BAClB,QAAA,QAEoB,8BACpB,QAAA,QAEU,oBACV,QAAA,QAEe,yBACf,QAAA,QAEiB,2BACjB,QAAA,QAEkB,4BAClB,QAAA,QAEU,oBACV,QAAA,QAEW,qBACX,QAAA,QAEiB,2BACjB,QAAA,QAEiB,2BACjB,QAAA,QAEqB,+BACrB,QAAA,QAEkB,4BAClB,QAAA,QAEW,qBACX,QAAA,QAEe,yBACf,QAAA,QAEY,sBACZ,QAAA,QAEe,yBACf,QAAA,QAEU,oBACV,QAAA,QAEiB,2BACjB,QAAA,QAEiB,2BACjB,QAAA,QAES,mBACT,QAAA,QAEiB,2BACjB,QAAA,QAEe,yBACf,QAAA,QAEkB,4BAClB,QAAA,QAEkB,4BAClB,QAAA,QAEe,yBACf,QAAA,QAEiB,2BACjB,QAAA,QAEU,oBACV,QAAA"}

Binary file not shown.

File diff suppressed because it is too large Load Diff

After

Width:  |  Height:  |  Size: 469 KiB

Binary file not shown.

Binary file not shown.

Binary file not shown.

2
dep/jquery/jquery.js vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

1
dep/spectre/css/spectre-exp.min.css vendored Normal file

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,597 @@
/*! Spectre.css Icons v0.5.8 | MIT License | github.com/picturepan2/spectre */
.icon {
box-sizing: border-box;
display: inline-block;
font-size: inherit;
font-style: normal;
height: 1em;
position: relative;
text-indent: -9999px;
vertical-align: middle;
width: 1em;
}
.icon::before,
.icon::after {
content: "";
display: block;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
.icon.icon-2x {
font-size: 1.6rem;
}
.icon.icon-3x {
font-size: 2.4rem;
}
.icon.icon-4x {
font-size: 3.2rem;
}
.accordion .icon,
.btn .icon,
.toast .icon,
.menu .icon {
vertical-align: -10%;
}
.btn-lg .icon {
vertical-align: -15%;
}
.icon-arrow-down::before,
.icon-arrow-left::before,
.icon-arrow-right::before,
.icon-arrow-up::before,
.icon-downward::before,
.icon-back::before,
.icon-forward::before,
.icon-upward::before {
border: .1rem solid currentColor;
border-bottom: 0;
border-right: 0;
height: .65em;
width: .65em;
}
.icon-arrow-down::before {
transform: translate(-50%, -75%) rotate(225deg);
}
.icon-arrow-left::before {
transform: translate(-25%, -50%) rotate(-45deg);
}
.icon-arrow-right::before {
transform: translate(-75%, -50%) rotate(135deg);
}
.icon-arrow-up::before {
transform: translate(-50%, -25%) rotate(45deg);
}
.icon-back::after,
.icon-forward::after {
background: currentColor;
height: .1rem;
width: .8em;
}
.icon-downward::after,
.icon-upward::after {
background: currentColor;
height: .8em;
width: .1rem;
}
.icon-back::after {
left: 55%;
}
.icon-back::before {
transform: translate(-50%, -50%) rotate(-45deg);
}
.icon-downward::after {
top: 45%;
}
.icon-downward::before {
transform: translate(-50%, -50%) rotate(-135deg);
}
.icon-forward::after {
left: 45%;
}
.icon-forward::before {
transform: translate(-50%, -50%) rotate(135deg);
}
.icon-upward::after {
top: 55%;
}
.icon-upward::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.icon-caret::before {
border-left: .3em solid transparent;
border-right: .3em solid transparent;
border-top: .3em solid currentColor;
height: 0;
transform: translate(-50%, -25%);
width: 0;
}
.icon-menu::before {
background: currentColor;
box-shadow: 0 -.35em, 0 .35em;
height: .1rem;
width: 100%;
}
.icon-apps::before {
background: currentColor;
box-shadow: -.35em -.35em, -.35em 0, -.35em .35em, 0 -.35em, 0 .35em, .35em -.35em, .35em 0, .35em .35em;
height: 3px;
width: 3px;
}
.icon-resize-horiz::before,
.icon-resize-horiz::after,
.icon-resize-vert::before,
.icon-resize-vert::after {
border: .1rem solid currentColor;
border-bottom: 0;
border-right: 0;
height: .45em;
width: .45em;
}
.icon-resize-horiz::before,
.icon-resize-vert::before {
transform: translate(-50%, -90%) rotate(45deg);
}
.icon-resize-horiz::after,
.icon-resize-vert::after {
transform: translate(-50%, -10%) rotate(225deg);
}
.icon-resize-horiz::before {
transform: translate(-90%, -50%) rotate(-45deg);
}
.icon-resize-horiz::after {
transform: translate(-10%, -50%) rotate(135deg);
}
.icon-more-horiz::before,
.icon-more-vert::before {
background: currentColor;
border-radius: 50%;
box-shadow: -.4em 0, .4em 0;
height: 3px;
width: 3px;
}
.icon-more-vert::before {
box-shadow: 0 -.4em, 0 .4em;
}
.icon-plus::before,
.icon-minus::before,
.icon-cross::before {
background: currentColor;
height: .1rem;
width: 100%;
}
.icon-plus::after,
.icon-cross::after {
background: currentColor;
height: 100%;
width: .1rem;
}
.icon-cross::before {
width: 100%;
}
.icon-cross::after {
height: 100%;
}
.icon-cross::before,
.icon-cross::after {
transform: translate(-50%, -50%) rotate(45deg);
}
.icon-check::before {
border: .1rem solid currentColor;
border-right: 0;
border-top: 0;
height: .5em;
transform: translate(-50%, -75%) rotate(-45deg);
width: .9em;
}
.icon-stop {
border: .1rem solid currentColor;
border-radius: 50%;
}
.icon-stop::before {
background: currentColor;
height: .1rem;
transform: translate(-50%, -50%) rotate(45deg);
width: 1em;
}
.icon-shutdown {
border: .1rem solid currentColor;
border-radius: 50%;
border-top-color: transparent;
}
.icon-shutdown::before {
background: currentColor;
content: "";
height: .5em;
top: .1em;
width: .1rem;
}
.icon-refresh::before {
border: .1rem solid currentColor;
border-radius: 50%;
border-right-color: transparent;
height: 1em;
width: 1em;
}
.icon-refresh::after {
border: .2em solid currentColor;
border-left-color: transparent;
border-top-color: transparent;
height: 0;
left: 80%;
top: 20%;
width: 0;
}
.icon-search::before {
border: .1rem solid currentColor;
border-radius: 50%;
height: .75em;
left: 5%;
top: 5%;
transform: translate(0, 0) rotate(45deg);
width: .75em;
}
.icon-search::after {
background: currentColor;
height: .1rem;
left: 80%;
top: 80%;
transform: translate(-50%, -50%) rotate(45deg);
width: .4em;
}
.icon-edit::before {
border: .1rem solid currentColor;
height: .4em;
transform: translate(-40%, -60%) rotate(-45deg);
width: .85em;
}
.icon-edit::after {
border: .15em solid currentColor;
border-right-color: transparent;
border-top-color: transparent;
height: 0;
left: 5%;
top: 95%;
transform: translate(0, -100%);
width: 0;
}
.icon-delete::before {
border: .1rem solid currentColor;
border-bottom-left-radius: .1rem;
border-bottom-right-radius: .1rem;
border-top: 0;
height: .75em;
top: 60%;
width: .75em;
}
.icon-delete::after {
background: currentColor;
box-shadow: -.25em .2em, .25em .2em;
height: .1rem;
top: .05rem;
width: .5em;
}
.icon-share {
border: .1rem solid currentColor;
border-radius: .1rem;
border-right: 0;
border-top: 0;
}
.icon-share::before {
border: .1rem solid currentColor;
border-left: 0;
border-top: 0;
height: .4em;
left: 100%;
top: .25em;
transform: translate(-125%, -50%) rotate(-45deg);
width: .4em;
}
.icon-share::after {
border: .1rem solid currentColor;
border-bottom: 0;
border-radius: 75% 0;
border-right: 0;
height: .5em;
width: .6em;
}
.icon-flag::before {
background: currentColor;
height: 1em;
left: 15%;
width: .1rem;
}
.icon-flag::after {
border: .1rem solid currentColor;
border-bottom-right-radius: .1rem;
border-left: 0;
border-top-right-radius: .1rem;
height: .65em;
left: 60%;
top: 35%;
width: .8em;
}
.icon-bookmark::before {
border: .1rem solid currentColor;
border-bottom: 0;
border-top-left-radius: .1rem;
border-top-right-radius: .1rem;
height: .9em;
width: .8em;
}
.icon-bookmark::after {
border: .1rem solid currentColor;
border-bottom: 0;
border-left: 0;
border-radius: .1rem;
height: .5em;
transform: translate(-50%, 35%) rotate(-45deg) skew(15deg, 15deg);
width: .5em;
}
.icon-download,
.icon-upload {
border-bottom: .1rem solid currentColor;
}
.icon-download::before,
.icon-upload::before {
border: .1rem solid currentColor;
border-bottom: 0;
border-right: 0;
height: .5em;
transform: translate(-50%, -60%) rotate(-135deg);
width: .5em;
}
.icon-download::after,
.icon-upload::after {
background: currentColor;
height: .6em;
top: 40%;
width: .1rem;
}
.icon-upload::before {
transform: translate(-50%, -60%) rotate(45deg);
}
.icon-upload::after {
top: 50%;
}
.icon-copy::before {
border: .1rem solid currentColor;
border-bottom: 0;
border-radius: .1rem;
border-right: 0;
height: .8em;
left: 40%;
top: 35%;
width: .8em;
}
.icon-copy::after {
border: .1rem solid currentColor;
border-radius: .1rem;
height: .8em;
left: 60%;
top: 60%;
width: .8em;
}
.icon-time {
border: .1rem solid currentColor;
border-radius: 50%;
}
.icon-time::before {
background: currentColor;
height: .4em;
transform: translate(-50%, -75%);
width: .1rem;
}
.icon-time::after {
background: currentColor;
height: .3em;
transform: translate(-50%, -75%) rotate(90deg);
transform-origin: 50% 90%;
width: .1rem;
}
.icon-mail::before {
border: .1rem solid currentColor;
border-radius: .1rem;
height: .8em;
width: 1em;
}
.icon-mail::after {
border: .1rem solid currentColor;
border-right: 0;
border-top: 0;
height: .5em;
transform: translate(-50%, -90%) rotate(-45deg) skew(10deg, 10deg);
width: .5em;
}
.icon-people::before {
border: .1rem solid currentColor;
border-radius: 50%;
height: .45em;
top: 25%;
width: .45em;
}
.icon-people::after {
border: .1rem solid currentColor;
border-radius: 50% 50% 0 0;
height: .4em;
top: 75%;
width: .9em;
}
.icon-message {
border: .1rem solid currentColor;
border-bottom: 0;
border-radius: .1rem;
border-right: 0;
}
.icon-message::before {
border: .1rem solid currentColor;
border-bottom-right-radius: .1rem;
border-left: 0;
border-top: 0;
height: .8em;
left: 65%;
top: 40%;
width: .7em;
}
.icon-message::after {
background: currentColor;
border-radius: .1rem;
height: .3em;
left: 10%;
top: 100%;
transform: translate(0, -90%) rotate(45deg);
width: .1rem;
}
.icon-photo {
border: .1rem solid currentColor;
border-radius: .1rem;
}
.icon-photo::before {
border: .1rem solid currentColor;
border-radius: 50%;
height: .25em;
left: 35%;
top: 35%;
width: .25em;
}
.icon-photo::after {
border: .1rem solid currentColor;
border-bottom: 0;
border-left: 0;
height: .5em;
left: 60%;
transform: translate(-50%, 25%) rotate(-45deg);
width: .5em;
}
.icon-link::before,
.icon-link::after {
border: .1rem solid currentColor;
border-radius: 5em 0 0 5em;
border-right: 0;
height: .5em;
width: .75em;
}
.icon-link::before {
transform: translate(-70%, -45%) rotate(-45deg);
}
.icon-link::after {
transform: translate(-30%, -55%) rotate(135deg);
}
.icon-location::before {
border: .1rem solid currentColor;
border-radius: 50% 50% 50% 0;
height: .8em;
transform: translate(-50%, -60%) rotate(-45deg);
width: .8em;
}
.icon-location::after {
border: .1rem solid currentColor;
border-radius: 50%;
height: .2em;
transform: translate(-50%, -80%);
width: .2em;
}
.icon-emoji {
border: .1rem solid currentColor;
border-radius: 50%;
}
.icon-emoji::before {
border-radius: 50%;
box-shadow: -.17em -.1em, .17em -.1em;
height: .15em;
width: .15em;
}
.icon-emoji::after {
border: .1rem solid currentColor;
border-bottom-color: transparent;
border-radius: 50%;
border-right-color: transparent;
height: .5em;
transform: translate(-50%, -40%) rotate(-135deg);
width: .5em;
}

1
dep/spectre/css/spectre-icons.min.css vendored Normal file

File diff suppressed because one or more lines are too long

3718
dep/spectre/css/spectre.css Normal file

File diff suppressed because it is too large Load Diff

1
dep/spectre/css/spectre.min.css vendored Normal file

File diff suppressed because one or more lines are too long

360
example.html Normal file
View File

@ -0,0 +1,360 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Blue Sky, by Kazhnuz</title>
<!-- meta -->
<meta name="description" content="">
<meta name="author" content="">
<!-- mon icon -->
<link rel="shortcut icon" href="img/favicon.png">
<!-- framework utilisés -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/fork-awesome.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="wrapper" class="card">
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href="#" id="" ><img src="img/brand-icon.png" alt="Quarante-Douze"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">À propos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<section class="container-fluid">
<h1><a href="https://quarante-douze.net/"><img src="img/logo.png"></a></h1>
</section>
<nav class="navbar navbar-expand-lg navbar-dark bg-grey" id="navbar-category">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav nav-justified w-100">
<li class="nav-item active">
<a class="nav-link" href="#">La vie du blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contenus Culturels</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Fandoms</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tribunes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Libreries</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Internet et Numérique</a>
</li>
</ul>
</div>
</nav>
</header>
<section class="container-fluid">
<div class="row">
<div class="col-md-9">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Accueil</a></li>
<li class="breadcrumb-item"><a href="#">Contenus</a></li>
<li class="breadcrumb-item active" aria-current="page">Article exemple</li>
</ol>
</nav>
<article>
<section class="article-content">
<h1 class="card-title">Nom de l'article :</h1>
<div><em>test</em></div>
<hr />
<ul>
<li>1 - Titre de niveau 3
<ul>
<li>1.1 - Titre de niveau 4</li>
<li>1.2 - Titre de niveau 4</li>
<li>1.3 - Titre de niveau 4</li>
</ul>
</li>
<li>2 - Titre de niveau 3</li>
</ul>
<h3>Introduction : Lorem Ipsum</h3>
<p><em>Lorem ipsum dolor sit amet<sup><a href="#1">[1]</a></sup>, consectetur adipiscing elit. Praesent varius ullamcorper diam, non sagittis lectus rutrum id. Integer eros urna, egestas et libero a, finibus egestas odio. Nunc vel hendrerit quam, eget malesuada sem. Sed hendrerit ligula pharetra leo aliquam volutpat. Integer auctor urna ac convallis laoreet. Nunc vestibulum ipsum sed tortor aliquam porta. Cras nunc est, lobortis in est at, rhoncus auctor nunc. Sed dignissim erat non sollicitudin ultricies. Integer vel consectetur urna. Etiam fermentum ligula vitae nunc viverra, a fringilla sem aliquam. Suspendisse potenti. Morbi sem mi, malesuada quis odio vitae, suscipit congue metus. Sed ut ullamcorper urna, eget molestie est. Sed pulvinar justo ac urna consectetur fringilla. Donec tristique eget leo sit amet mollis.</em></p>
<p class="align-center"><a href="#" class="btn btn-warning">Télécharger ce thème</a></p>
<h3>Titre de niveau 3</h3>
<h4>Titre de niveau 4</h4>
<h4>Titre de niveau 4</h4>
<h4>Titre de niveau 4</h4>
<h3>Titre de niveau 3</h3>
<p>Proin bibendum felis sit amet nisl iaculis, <strong>vel blandit purus dictum</strong>. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. <mark>Sed posuere lectus eu orci tristique maximus</mark>. Nulla facilisi. Aenean sed fermentum nisl. Donec sodales ligula eu est finibus, eu posuere ligula condimentum. Morbi arcu magna, varius id justo ac, aliquam luctus magna. Pellentesque a velit et ipsum euismod congue eget eu sem. <del>Nulla luctus est nec arcu volutpat blandit.</del> Quisque egestas, elit eu tempus tincidunt, mi libero porta purus, eget lobortis metus erat a dolor. Integer ac turpis lacinia, interdum nisl non, feugiat libero.</p>
<blockquote><p>Cras malesuada, metus at viverra molestie, mi ligula sodales tellus, vitae facilisis ante est vitae dolor. Donec feugiat non est eget elementum. Nullam in erat et arcu tincidunt maximus. Nullam nibh orci, egestas eu ex non, viverra pretium magna. Proin convallis, risus eu condimentum luctus, ante dui mattis eros, a varius risus diam sed nisl. Ut malesuada ipsum in augue accumsan ullamcorper. Phasellus efficitur augue in venenatis sollicitudin. Integer at consectetur arcu.</p></blockquote>
<pre><code>Vivamus tincidunt dolor quis consectetur dapibus.
Ut metus risus, lobortis non venenatis in, ultricies a orci.
In suscipit ante et aliquet pretium.
Integer diam dui, rutrum vitae risus ultricies, varius vulputate magna.
In id suscipit elit.</code></pre>
<p id="1">[1] : Sed et odio volutpat, convallis est et, interdum sapien.</p>
</section>
<section class="share-buttons align-right">
<a href="#" class="btn btn-facebook"><i class="fa fa-fw fa-facebook"></i></a>
<a href="#" class="btn btn-twitter"><i class="fa fa-fw fa-twitter"></i></a>
<a href="#" class="btn btn-googleplus"><i class="fa fa-fw fa-google-plus"></i></a>
<a href="#" class="btn btn-diaspora"><i class="fa fa-fw fa-diaspora"></i></a>
<a href="#" class="btn btn-mastodon"><i class="fa fa-fw fa-mastodon"></i></a>
<a href="#" class="btn btn-light"><i class="fa fa-fw fa-envelope"></i></a>
</section>
<section class="card card-darker">
<div class="media card-meta">
<div class="media-left"><a href="#"><img class="media-object" src="img/avatar.png" alt="..."></a></div>
<div class="media-body"><author class="media-heading">Écrit par <a href="" >Pseudo</a></author><time> Le vendredi 19 septembre 2014 à 07:16 </time></div>
</div>
</section>
</article>
<div class="previews-section prev-col-3">
<div class="preview-container">
<article class="card card-preview">
<a href="#" class="preview-link">
<div class="preview-item">
<div class="preview-content"><p class="p-img"><img src="img/wmap.png" alt="Card image cap"></p></div>
<div class="preview-overlay"><h1>Image Exemple</h1></div>
</div>
</a>
<aside class="card-body">
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
<div class="align-left"><i class="fa fa-tags"></i>&nbsp; <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> </div>
<div class="align-center comment-text"><a href="#">3 commentaires</a></div>
</aside>
</article>
</div>
<div class="preview-container">
<article class="card card-preview">
<a href="#" class="preview-link">
<div class="preview-item">
<div class="preview-content"><p>Proin bibendum felis sit amet nisl iaculis, <strong>vel blandit purus dictum</strong>. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. Sed posuere lectus eu orci tristique maximus. Nulla facilisi. Aenean sed fermentum nisl. Donec sodales ligula eu est finibus, eu posuere ligula condimentum. Morbi arcu magna, varius id justo ac, aliquam luctus magna. Pellentesque a velit et ipsum euismod congue eget eu sem. <del>Nulla luctus est nec arcu volutpat blandit.</del> Quisque egestas, elit eu tempus tincidunt, mi libero porta purus, eget lobortis metus erat a dolor. Integer ac turpis lacinia, interdum nisl non, feugiat libero.</p></div>
<div class="preview-overlay"><h1>Text Exemple</h1></div>
</div>
</a>
<aside class="card-body">
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
<div class="align-left"><i class="fa fa-tags"></i>&nbsp; <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> </div>
<div class="align-center comment-text"><a href="#">3 commentaires</a></div>
</aside>
</article>
</div>
<div class="preview-container">
<article class="card card-preview">
<a href="#" class="preview-link">
<div class="preview-item">
<div class="preview-content"><p>Proin bibendum felis sit amet nisl iaculis, <strong>vel blandit purus dictum</strong>. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. Sed posuere lectus eu orci tristique maximus. Nulla facilisi. Aenean sed fermentum nisl. Donec sodales ligula eu est finibus, eu posuere ligula condimentum. Morbi arcu magna, varius id justo ac, aliquam luctus magna. Pellentesque a velit et ipsum euismod congue eget eu sem. <del>Nulla luctus est nec arcu volutpat blandit.</del> Quisque egestas, elit eu tempus tincidunt, mi libero porta purus, eget lobortis metus erat a dolor. Integer ac turpis lacinia, interdum nisl non, feugiat libero.</p></div>
<div class="preview-overlay"><h1>Text Exemple</h1></div>
</div>
</a>
<aside class="card-body">
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
<div class="align-left"><i class="fa fa-tags"></i>&nbsp; <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> </div>
<div class="align-center comment-text"><a href="#">3 commentaires</a></div>
</aside>
</article>
</div>
<div class="preview-container">
<article class="card card-preview">
<a href="#" class="preview-link">
<div class="preview-item">
<div class="preview-content"><p>Proin bibendum felis sit amet nisl iaculis, <strong>vel blandit purus dictum</strong>. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. Sed posuere lectus eu orci tristique maximus. Nulla facilisi. Aenean sed fermentum nisl. Donec sodales ligula eu est finibus, eu posuere ligula condimentum. Morbi arcu magna, varius id justo ac, aliquam luctus magna. Pellentesque a velit et ipsum euismod congue eget eu sem. <del>Nulla luctus est nec arcu volutpat blandit.</del> Quisque egestas, elit eu tempus tincidunt, mi libero porta purus, eget lobortis metus erat a dolor. Integer ac turpis lacinia, interdum nisl non, feugiat libero.</p></div>
<div class="preview-overlay"><h1>Text Exemple</h1></div>
</div>
</a>
<aside class="card-body">
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
<div class="align-left"><i class="fa fa-tags"></i>&nbsp; <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> </div>
<div class="align-center comment-text"><a href="#">3 commentaires</a></div>
</aside>
</article>
</div>
</div>
<section class="commentaires">
<h3>Commentaires :</h3>
<article class="comment">
<div class="media card-meta">
<div class="media-left"><a href="#"><img class="media-object" src="img/avatar.png" alt="..."></a></div>
<div class="media-body"><author class="media-heading">Écrit par <a href="" >Pseudo</a></author><time> Le vendredi 19 septembre 2014 à 07:16 </time></div>
</div>
<div class="article-content">
<p><em>Lorem ipsum dolor sit amet<sup><a href="#1">[1]</a></sup>, consectetur adipiscing elit. Praesent varius ullamcorper diam, non sagittis lectus rutrum id. Integer eros urna, egestas et libero a, finibus egestas odio. Nunc vel hendrerit quam, eget malesuada sem. Sed hendrerit ligula pharetra leo aliquam volutpat. Integer auctor urna ac convallis laoreet. Nunc vestibulum ipsum sed tortor aliquam porta. Cras nunc est, lobortis in est at, rhoncus auctor nunc. Sed dignissim erat non sollicitudin ultricies. Integer vel consectetur urna. Etiam fermentum ligula vitae nunc viverra, a fringilla sem aliquam. Suspendisse potenti. Morbi sem mi, malesuada quis odio vitae, suscipit congue metus. Sed ut ullamcorper urna, eget molestie est. Sed pulvinar justo ac urna consectetur fringilla. Donec tristique eget leo sit amet mollis.</em></p>
<p>Proin bibendum felis sit amet nisl iaculis, <strong>vel blandit purus dictum</strong>. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. <mark>Sed posuere lectus eu orci tristique maximus</mark>. Nulla facilisi. Aenean sed fermentum nisl. Donec sodales ligula eu est finibus, eu posuere ligula condimentum. Morbi arcu magna, varius id justo ac, aliquam luctus magna. Pellentesque a velit et ipsum euismod congue eget eu sem. <del>Nulla luctus est nec arcu volutpat blandit.</del> Quisque egestas, elit eu tempus tincidunt, mi libero porta purus, eget lobortis metus erat a dolor. Integer ac turpis lacinia, interdum nisl non, feugiat libero.</p>
</div>
</article>
<article class="comment">
<div class="media card-meta">
<div class="media-left"><a href="#"><img class="media-object" src="img/avatar.png" alt="..."></a></div>
<div class="media-body"><author class="media-heading">Écrit par <a href="" >Pseudo</a></author><time> Le vendredi 19 septembre 2014 à 07:16 </time></div>
</div>
<div class="article-content">
<p><em>Lorem ipsum dolor sit amet<sup><a href="#1">[1]</a></sup>, consectetur adipiscing elit. Praesent varius ullamcorper diam, non sagittis lectus rutrum id. Integer eros urna, egestas et libero a, finibus egestas odio. Nunc vel hendrerit quam, eget malesuada sem. Sed hendrerit ligula pharetra leo aliquam volutpat. Integer auctor urna ac convallis laoreet. Nunc vestibulum ipsum sed tortor aliquam porta. Cras nunc est, lobortis in est at, rhoncus auctor nunc. Sed dignissim erat non sollicitudin ultricies. Integer vel consectetur urna. Etiam fermentum ligula vitae nunc viverra, a fringilla sem aliquam. Suspendisse potenti. Morbi sem mi, malesuada quis odio vitae, suscipit congue metus. Sed ut ullamcorper urna, eget molestie est. Sed pulvinar justo ac urna consectetur fringilla. Donec tristique eget leo sit amet mollis.</em></p>
<p>Proin bibendum felis sit amet nisl iaculis, <strong>vel blandit purus dictum</strong>. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. <mark>Sed posuere lectus eu orci tristique maximus</mark>. Nulla facilisi. Aenean sed fermentum nisl. Donec sodales ligula eu est finibus, eu posuere ligula condimentum. Morbi arcu magna, varius id justo ac, aliquam luctus magna. Pellentesque a velit et ipsum euismod congue eget eu sem. <del>Nulla luctus est nec arcu volutpat blandit.</del> Quisque egestas, elit eu tempus tincidunt, mi libero porta purus, eget lobortis metus erat a dolor. Integer ac turpis lacinia, interdum nisl non, feugiat libero.</p>
</div>
</article>
</div>
<aside class="sidebar col-md-3">
<section class="card card-primary">
<div class="card-header">
<h3 class="card-title">Catégories</h3>
</div>
<div class="list-group list-group-flush">
<a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
Objet de liste
<span class="badge badge-primary badge-pill">14</span>
</a>
<a href="#" class="list-group-item list-group-item-action">Objet de liste</a>
<a href="#" class="list-group-item list-group-item-action">Objet de liste</a>
<a href="#" class="list-group-item list-group-item-action">Objet de liste</a>
<a href="#" class="list-group-item list-group-item-action">Objet de liste</a>
</div>
</section>
<section class="card card-primary">
<div class="card-header">
<h3 class="card-title"> Archive</h3>
</div>
<div class="list-group list-group-flush">
<a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
Objet de liste
<span class="badge badge-primary badge-pill">14</span>
</a>
<a href="#" class="list-group-item list-group-item-action">Objet de liste</a>
<a href="#" class="list-group-item list-group-item-action">Objet de liste</a>
<a href="#" class="list-group-item list-group-item-action">Objet de liste</a>
<a href="#" class="list-group-item list-group-item-action">Objet de liste</a>
</div>
</section>
<section class="card card-primary">
<div class="card-header">
<h3 class="card-title">Navigation</h3>
</div>
<div class="list-group list-group-flush">
<a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
Objet de liste
<span class="badge badge-primary badge-pill">14</span>
</a>
<a href="#" class="list-group-item list-group-item-action">Objet de liste</a>
<a href="#" class="list-group-item list-group-item-action">Objet de liste</a>
<a href="#" class="list-group-item list-group-item-action">Objet de liste</a>
<a href="#" class="list-group-item list-group-item-action">Objet de liste</a>
</div>
</section>
</aside>
</div>
</section>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#SecondNavbar" aria-controls="SecondNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="SecondNavbar">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item inactive">
CC BY-SA 2018 <strong>Quarante-Douze</strong>
</li>
</ul>
<ul class="navbar-nav my-2 my-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#"><i class="fa fa-fw fa-rss"></i></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#"><i class="fa fa-fw fa-twitter"></i></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#"><i class="fa fa-fw fa-facebook"></i></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#"><i class="fa fa-fw fa-diaspora"></i></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#"><i class="fa fa-fw fa-mastodon"></i></a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

File diff suppressed because it is too large Load Diff

After

Width:  |  Height:  |  Size: 455 KiB

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

9
footer.php Normal file
View File

@ -0,0 +1,9 @@
</div>
</div>
<?php include(TEMPLATEPATH . '/components/footer-content.php'); ?>
<?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>
</body>
</html>

324
functions.php Normal file
View File

@ -0,0 +1,324 @@
<?php
/* functions.php
*
* All the function of Kazhnuz.Space
*
*/
/* 0. Excerpt and thumbnail support
*
* Ces fonctions ajoutent les fonctionnalités de base du theme,
* tel que les extraits et les miniatures.
*/
function kspace_post_supports() {
add_post_type_support( 'post', 'excerpt');
}
add_action( 'init', 'kspace_post_supports' );
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 825, 510, true );
/* 1. Niveau support
*
* Permet d'afficher les niveaux de post pour les post features
*/
// 1.1 - Enregistrement de la taxonomy pour le flag
register_taxonomy(
'flag',
'post',
array(
'label' => 'Flag',
'labels' => array(
'name' => 'Flags',
'singular_name' => 'Flag',
'all_items' => 'Tous les flags',
'edit_item' => 'Éditer le flag',
'view_item' => 'Voir le flag',
'update_item' => 'Mettre à jour le flag',
'add_new_item' => 'Ajouter un flag',
'new_item_name' => 'Nouveau flag',
'search_items' => 'Rechercher parmi les flags',
'popular_items' => 'Flags les plus utilisés'
),
'hierarchical' => false
)
);
register_taxonomy_for_object_type( 'flag', 'post' );
// 1.2 - Ajout/Modif du niveau du flag
function flags_taxonomy_custom_fields($tag) {
// Check for existing taxonomy meta for the term you're editing
$t_id = $tag->term_id; // Get the ID of the term you're editing
$term_meta = get_option( "taxonomy_term_$t_id" ); // Do the check
?>
<tr class="form-field">
<th scope="row" valign="top">
<label for="niveau"><?php _e('Niveau du flag'); ?></label>
</th>
<td>
<input type="text" name="term_meta[niveau]" id="term_meta[niveau]" size="25" style="width:60%;" value="<?php echo $term_meta['niveau'] ? $term_meta['niveau'] : ''; ?>"><br />
<span class="description"><?php _e('Le niveau du flag (info, warning, danger…)'); ?></span>
</td>
</tr>
<?php
}
function flags_taxonomy_custom_fields_add( $taxonomy ) {
// Check for existing taxonomy meta for the term you're editing
$t_id = $tag->term_id; // Get the ID of the term you're editing
$term_meta = get_option( "taxonomy_term_$t_id" ); // Do the check
?>
<div class="form-field">
<label for="term_meta[niveau]"><?php _e('Niveau du flag'); ?></label>
<input type="text" name="term_meta[niveau]" id="term_meta[niveau]" />
<p><?php _e('Le niveau du flag (info, warning, danger…)'); ?>.</p>
</div>
<?php
}
add_action( 'post_tag_edit_form_fields', 'kspace_edit_term_fields', 10, 2 );
// 1.3 - Sauvegarde du niveau du flag
function save_taxonomy_custom_fields( $term_id ) {
if ( isset( $_POST['term_meta'] ) ) {
$t_id = $term_id;
$term_meta = get_option( "taxonomy_term_$t_id" );
$cat_keys = array_keys( $_POST['term_meta'] );
foreach ( $cat_keys as $key ){
if ( isset( $_POST['term_meta'][$key] ) ){
$term_meta[$key] = $_POST['term_meta'][$key];
}
}
//save the option array
update_option( "taxonomy_term_$t_id", $term_meta );
}
}
// Ajout des fields
add_action( 'flag_edit_form_fields', 'flags_taxonomy_custom_fields', 10, 2 );
add_action( 'flag_add_form_fields', 'flags_taxonomy_custom_fields_add' );
add_action( 'created_flag', 'save_taxonomy_custom_fields' );
add_action( 'edited_flag', 'save_taxonomy_custom_fields', 10, 2 );
function kspace_cat_breadcrumb_nav($categoryName, $icon) {
?>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="<?php echo site_url(); ?>">kazhnuz.space</a>
</li><li class="breadcrumb-item" aria-current="page">
<span class="active"><i class="fa fa-<?php echo $icon; ?>" aria-hidden="true"></i> <?php echo $categoryName; ?></span>
</li>
</ol>
</nav>
<?php
}
function kspace_cat_breadcrumb($categoryName, $icon) {
?>
<div class="flex-that">
<?php kspace_cat_breadcrumb_nav($categoryName, $icon); ?>
</div>
<?php
}
function kspace_cat_breadcrumb_with_rss($categoryName, $icon, $categoryType, $rssLink) {
?>
<div class="flex-that">
<?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>
</div>
</div>
<?php
}
/* 3. Plus d'info sur les tags
*
* Permet d'afficher un lien vers plus d'informations.
* Le liens est gardé comme un champ supplémentaire dans les tags.
*
*/
add_action( 'post_tag_add_form_fields', 'kspace_add_term_fields' );
function kspace_add_term_fields( $taxonomy ) {
echo '<div class="form-field">
<label for="plus-dinfo">Plus d\'Info</label>
<input type="text" name="plus-dinfo" id="plus-dinfo" />
<p>Une URL permettant d\'obtenir plus d\'information sur le tag.</p>
</div>';
}
add_action( 'post_tag_edit_form_fields', 'kspace_edit_term_fields', 10, 2 );
function kspace_edit_term_fields( $term, $taxonomy ) {
$value = get_term_meta( $term->term_id, 'plus-dinfo', true );
echo '<tr class="form-field">
<th>
<label for="plus-dinfo">Plus d\'Info</label>
</th>
<td>
<input name="plus-dinfo" id="plus-dinfo" type="text" value="' . esc_attr( $value ) .'" />
<p class="description">Une URL permettant d\'obtenir plus d\'information sur le tag.</p>
</td>
</tr>';
}
add_action( 'created_post_tag', 'kspace_save_term_fields' );
add_action( 'edited_post_tag', 'kspace_save_term_fields' );
function kspace_save_term_fields( $term_id ) {
update_term_meta(
$term_id,
'plus-dinfo',
sanitize_text_field( $_POST[ 'plus-dinfo' ] )
);
}
/* 3. Info supplémentaire sur profil utilisateur
*
* Permet d'afficher sous forme de chaine de caractères des infos supplémentaires qui seront
* transformé en un tableau..
*
*/
add_action( 'show_user_profile', 'kspace_show_extra_profile_fields' );
add_action( 'edit_user_profile', 'kspace_show_extra_profile_fields' );
function kspace_show_extra_profile_fields( $user ) {
$year = get_the_author_meta( 'infodata', $user->ID );
?>
<h3><?php esc_html_e( 'More Info', 'kspace' ); ?></h3>
<table class="form-table">
<tr>
<th><label for="infodata"><?php esc_html_e( 'infodata', 'kspace' ); ?></label></th>
<td>
<input type="input"
id="infodata"
name="infodata"
value="<?php echo esc_attr( $year ); ?>"
class="regular-text"
/>
</td>
</tr>
</table>
<?php
}
add_action( 'personal_options_update', 'kspace_update_profile_fields' );
add_action( 'edit_user_profile_update', 'kspace_update_profile_fields' );
function kspace_update_profile_fields( $user_id ) {
if ( ! current_user_can( 'edit_user', $user_id ) ) {
return false;
}
update_user_meta( $user_id, 'infodata', $_POST['infodata'] );
}
/* 4. Romans
*
* Permet de catégoriser des chapitres ensemble, via une catégorie spécifiques.
*
*/
register_taxonomy('roman', 'post',
array(
'label' => 'Roman',
'labels' => array(
'name' => 'Romans',
'singular_name' => 'Roman',
'all_items' => 'Tous les romans',
'edit_item' => 'Éditer le roman',
'view_item' => 'Voir le roman',
'update_item' => 'Mettre à jour le roman',
'add_new_item' => 'Ajouter un roman',
'new_item_name' => 'Nouveau roman',
'search_items' => 'Rechercher parmi les romans',
'popular_items' => 'Romans les plus utilisés'),
'rewrite' => array('slug' => 'roman'),
'hierarchical' => false,
'public' => true,
'hierarchical' => true,
'show_in_nav_menus' => true,
'has_archive' => true,
)
);
register_taxonomy_for_object_type( 'roman', 'post' );
// 1.2 - Ajout/Modif du niveau du flag
function romans_taxonomy_custom_fields($tag) {
// Check for existing taxonomy meta for the term you're editing
$t_id = $tag->term_id; // Get the ID of the term you're editing
$term_meta = get_option( "taxonomy_term_$t_id" ); // Do the check
?>
<tr class="form-field">
<th scope="row" valign="top">
<label for="niveau"><?php _e('Couverture du roman'); ?></label>
</th>
<td>
<input type="text" name="term_meta[cover]" id="term_meta[cover]" size="25" style="width:60%;" value="<?php echo $term_meta['cover'] ? $term_meta['cover'] : ''; ?>"><br />
<span class="description"><?php _e('La couverture du roman, sous format URL'); ?></span>
</td>
</tr>
<?php
}
function romans_taxonomy_custom_fields_add( $taxonomy ) {
// Check for existing taxonomy meta for the term you're editing
$t_id = $tag->term_id; // Get the ID of the term you're editing
$term_meta = get_option( "taxonomy_term_$t_id" ); // Do the check
?>
<div class="form-field">
<label for="term_meta[cover]"><?php _e('Couverture du roman'); ?></label>
<input type="text" name="term_meta[cover]" id="term_meta[cover]" />
<p><?php _e('La couverture du roman, sous format URL)'); ?>.</p>
</div>
<?php
}
// Ajout des fields
add_action( 'roman_edit_form_fields', 'romans_taxonomy_custom_fields', 10, 2 );
add_action( 'roman_add_form_fields', 'romans_taxonomy_custom_fields_add' );
add_action( 'created_roman', 'save_taxonomy_custom_fields' );
add_action( 'edited_roman', 'save_taxonomy_custom_fields', 10, 2 );
/* 4. Menus custom
*
* Quelques menus custom
*
*/
function wpb_custom_new_menu() {
register_nav_menus(
array(
'top-navbar' => __( 'Navbar (gauche)' ),
'top-navbar-2' => __( 'Navbar (droite)' ),
'link-menu' => __( 'Liste des liens' ),
'footer-pages' => __( 'Pages dans le footer' ),
'social' => __( 'Reseaux sociaux' ),
'social-plus' => __( 'Reseaux sociaux supplémentaires' ),
)
);
}
add_action( 'init', 'wpb_custom_new_menu' );

1
generate.sh Executable file
View File

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

35
header.php Normal file
View File

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php bloginfo('name'); ?><?php wp_title(' - '); ?></title>
<meta name="description" content="<?php bloginfo('name'); echo " - "; bloginfo('description');?>" />
<?php if ( is_singular() && pings_open( get_queried_object() ) ) : ?>
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php endif; ?>
<?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">
<!-- 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 id="wrapper">
<?php include(TEMPLATEPATH . '/components/header-content.php'); ?>
<div class="container-blog">

21
home.php Normal file
View File

@ -0,0 +1,21 @@
<?php get_header(); ?>
<main>
<?php include(TEMPLATEPATH . '/components/globalflag.php'); ?>
<!-- Recuperation de la page de home -->
<?php if ( !is_paged() ) {
$page = get_page_by_path( 'home' );
if ($page != null) {
echo '<h1 class="page-title">' . get_the_title( $page ) . '</h1>';
echo '<div>' . $page->post_content . '</div>';
}
echo '<h1 class="page-title">Dernier article</h1>';
include(TEMPLATEPATH . '/components/featured.php');
}
?>
<h1 class="page-title">Publications</h1>
<?php include(TEMPLATEPATH . '/components/preview-list.php'); ?>
</main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

BIN
img/avatar.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
img/background.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB

BIN
img/brand-icon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 251 B

BIN
img/default-preview.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 306 KiB

BIN
img/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 147 KiB

BIN
img/wmap.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

360
index.html Normal file
View File

@ -0,0 +1,360 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Blue Sky, by Kazhnuz</title>
<!-- meta -->
<meta name="description" content="">
<meta name="author" content="">
<!-- mon icon -->
<link rel="shortcut icon" href="img/favicon.png">
<!-- framework utilisés -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/fork-awesome.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="wrapper" class="card">
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href="#" id="" ><img src="img/brand-icon.png" alt="Quarante-Douze"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">À propos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<section class="container-fluid">
<h1><a href="https://quarante-douze.net/"><img src="img/logo.png"></a></h1>
</section>
<nav class="navbar navbar-expand-lg navbar-dark bg-grey" id="navbar-category">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav nav-justified w-100">
<li class="nav-item active">
<a class="nav-link" href="#">La vie du blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contenus Culturels</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Fandoms</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tribunes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Libreries</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Internet et Numérique</a>
</li>
</ul>
</div>
</nav>
</header>
<section class="container-fluid">
<div class="row">
<div class="col-md-9">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Accueil</a></li>
<li class="breadcrumb-item"><a href="#">Contenus</a></li>
<li class="breadcrumb-item active" aria-current="page">Article exemple</li>
</ol>
</nav>
<article>
<section class="article-content">
<h1 class="card-title">Nom de l'article :</h1>
<div><em>test</em></div>
<hr />
<ul>
<li>1 - Titre de niveau 3
<ul>
<li>1.1 - Titre de niveau 4</li>
<li>1.2 - Titre de niveau 4</li>
<li>1.3 - Titre de niveau 4</li>
</ul>
</li>
<li>2 - Titre de niveau 3</li>
</ul>
<h3>Introduction : Lorem Ipsum</h3>
<p><em>Lorem ipsum dolor sit amet<sup><a href="#1">[1]</a></sup>, consectetur adipiscing elit. Praesent varius ullamcorper diam, non sagittis lectus rutrum id. Integer eros urna, egestas et libero a, finibus egestas odio. Nunc vel hendrerit quam, eget malesuada sem. Sed hendrerit ligula pharetra leo aliquam volutpat. Integer auctor urna ac convallis laoreet. Nunc vestibulum ipsum sed tortor aliquam porta. Cras nunc est, lobortis in est at, rhoncus auctor nunc. Sed dignissim erat non sollicitudin ultricies. Integer vel consectetur urna. Etiam fermentum ligula vitae nunc viverra, a fringilla sem aliquam. Suspendisse potenti. Morbi sem mi, malesuada quis odio vitae, suscipit congue metus. Sed ut ullamcorper urna, eget molestie est. Sed pulvinar justo ac urna consectetur fringilla. Donec tristique eget leo sit amet mollis.</em></p>
<p class="align-center"><a href="#" class="btn btn-warning">Télécharger ce thème</a></p>
<h3>Titre de niveau 3</h3>
<h4>Titre de niveau 4</h4>
<h4>Titre de niveau 4</h4>
<h4>Titre de niveau 4</h4>
<h3>Titre de niveau 3</h3>
<p>Proin bibendum felis sit amet nisl iaculis, <strong>vel blandit purus dictum</strong>. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. <mark>Sed posuere lectus eu orci tristique maximus</mark>. Nulla facilisi. Aenean sed fermentum nisl. Donec sodales ligula eu est finibus, eu posuere ligula condimentum. Morbi arcu magna, varius id justo ac, aliquam luctus magna. Pellentesque a velit et ipsum euismod congue eget eu sem. <del>Nulla luctus est nec arcu volutpat blandit.</del> Quisque egestas, elit eu tempus tincidunt, mi libero porta purus, eget lobortis metus erat a dolor. Integer ac turpis lacinia, interdum nisl non, feugiat libero.</p>
<blockquote><p>Cras malesuada, metus at viverra molestie, mi ligula sodales tellus, vitae facilisis ante est vitae dolor. Donec feugiat non est eget elementum. Nullam in erat et arcu tincidunt maximus. Nullam nibh orci, egestas eu ex non, viverra pretium magna. Proin convallis, risus eu condimentum luctus, ante dui mattis eros, a varius risus diam sed nisl. Ut malesuada ipsum in augue accumsan ullamcorper. Phasellus efficitur augue in venenatis sollicitudin. Integer at consectetur arcu.</p></blockquote>
<pre><code>Vivamus tincidunt dolor quis consectetur dapibus.
Ut metus risus, lobortis non venenatis in, ultricies a orci.
In suscipit ante et aliquet pretium.
Integer diam dui, rutrum vitae risus ultricies, varius vulputate magna.
In id suscipit elit.</code></pre>
<p id="1">[1] : Sed et odio volutpat, convallis est et, interdum sapien.</p>
</section>
<section class="share-buttons align-right">
<a href="#" class="btn btn-facebook"><i class="fa fa-fw fa-facebook"></i></a>
<a href="#" class="btn btn-twitter"><i class="fa fa-fw fa-twitter"></i></a>
<a href="#" class="btn btn-googleplus"><i class="fa fa-fw fa-google-plus"></i></a>
<a href="#" class="btn btn-diaspora"><i class="fa fa-fw fa-diaspora"></i></a>
<a href="#" class="btn btn-mastodon"><i class="fa fa-fw fa-mastodon"></i></a>
<a href="#" class="btn btn-light"><i class="fa fa-fw fa-envelope"></i></a>
</section>
<section class="card card-darker">
<div class="media card-meta">
<div class="media-left"><a href="#"><img class="media-object" src="img/avatar.png" alt="..."></a></div>
<div class="media-body"><author class="media-heading">Écrit par <a href="" >Pseudo</a></author><time> Le vendredi 19 septembre 2014 à 07:16 </time></div>
</div>
</section>
</article>
<div class="previews-section prev-col-3">
<div class="preview-container">
<article class="card card-preview">
<a href="#" class="preview-link">
<div class="preview-item">
<div class="preview-content"><p class="p-img"><img src="img/wmap.png" alt="Card image cap"></p></div>
<div class="preview-overlay"><h1>Image Exemple</h1></div>
</div>
</a>
<aside class="card-body">
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
<div class="align-left"><i class="fa fa-tags"></i>&nbsp; <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> </div>
<div class="align-center comment-text"><a href="#">3 commentaires</a></div>
</aside>
</article>
</div>
<div class="preview-container">
<article class="card card-preview">
<a href="#" class="preview-link">
<div class="preview-item">
<div class="preview-content"><p>Proin bibendum felis sit amet nisl iaculis, <strong>vel blandit purus dictum</strong>. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. Sed posuere lectus eu orci tristique maximus. Nulla facilisi. Aenean sed fermentum nisl. Donec sodales ligula eu est finibus, eu posuere ligula condimentum. Morbi arcu magna, varius id justo ac, aliquam luctus magna. Pellentesque a velit et ipsum euismod congue eget eu sem. <del>Nulla luctus est nec arcu volutpat blandit.</del> Quisque egestas, elit eu tempus tincidunt, mi libero porta purus, eget lobortis metus erat a dolor. Integer ac turpis lacinia, interdum nisl non, feugiat libero.</p></div>
<div class="preview-overlay"><h1>Text Exemple</h1></div>
</div>
</a>
<aside class="card-body">
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
<div class="align-left"><i class="fa fa-tags"></i>&nbsp; <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> </div>
<div class="align-center comment-text"><a href="#">3 commentaires</a></div>
</aside>
</article>
</div>
<div class="preview-container">
<article class="card card-preview">
<a href="#" class="preview-link">
<div class="preview-item">
<div class="preview-content"><p>Proin bibendum felis sit amet nisl iaculis, <strong>vel blandit purus dictum</strong>. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. Sed posuere lectus eu orci tristique maximus. Nulla facilisi. Aenean sed fermentum nisl. Donec sodales ligula eu est finibus, eu posuere ligula condimentum. Morbi arcu magna, varius id justo ac, aliquam luctus magna. Pellentesque a velit et ipsum euismod congue eget eu sem. <del>Nulla luctus est nec arcu volutpat blandit.</del> Quisque egestas, elit eu tempus tincidunt, mi libero porta purus, eget lobortis metus erat a dolor. Integer ac turpis lacinia, interdum nisl non, feugiat libero.</p></div>
<div class="preview-overlay"><h1>Text Exemple</h1></div>
</div>
</a>
<aside class="card-body">
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
<div class="align-left"><i class="fa fa-tags"></i>&nbsp; <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> </div>
<div class="align-center comment-text"><a href="#">3 commentaires</a></div>
</aside>
</article>
</div>
<div class="preview-container">
<article class="card card-preview">
<a href="#" class="preview-link">
<div class="preview-item">
<div class="preview-content"><p>Proin bibendum felis sit amet nisl iaculis, <strong>vel blandit purus dictum</strong>. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. Sed posuere lectus eu orci tristique maximus. Nulla facilisi. Aenean sed fermentum nisl. Donec sodales ligula eu est finibus, eu posuere ligula condimentum. Morbi arcu magna, varius id justo ac, aliquam luctus magna. Pellentesque a velit et ipsum euismod congue eget eu sem. <del>Nulla luctus est nec arcu volutpat blandit.</del> Quisque egestas, elit eu tempus tincidunt, mi libero porta purus, eget lobortis metus erat a dolor. Integer ac turpis lacinia, interdum nisl non, feugiat libero.</p></div>
<div class="preview-overlay"><h1>Text Exemple</h1></div>
</div>
</a>
<aside class="card-body">
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
<div class="align-left"><i class="fa fa-tags"></i>&nbsp; <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> </div>
<div class="align-center comment-text"><a href="#">3 commentaires</a></div>
</aside>
</article>
</div>
</div>
<section class="commentaires">
<h3>Commentaires :</h3>
<article class="comment">
<div class="media card-meta">
<div class="media-left"><a href="#"><img class="media-object" src="img/avatar.png" alt="..."></a></div>
<div class="media-body"><author class="media-heading">Écrit par <a href="" >Pseudo</a></author><time> Le vendredi 19 septembre 2014 à 07:16 </time></div>
</div>
<div class="article-content">
<p><em>Lorem ipsum dolor sit amet<sup><a href="#1">[1]</a></sup>, consectetur adipiscing elit. Praesent varius ullamcorper diam, non sagittis lectus rutrum id. Integer eros urna, egestas et libero a, finibus egestas odio. Nunc vel hendrerit quam, eget malesuada sem. Sed hendrerit ligula pharetra leo aliquam volutpat. Integer auctor urna ac convallis laoreet. Nunc vestibulum ipsum sed tortor aliquam porta. Cras nunc est, lobortis in est at, rhoncus auctor nunc. Sed dignissim erat non sollicitudin ultricies. Integer vel consectetur urna. Etiam fermentum ligula vitae nunc viverra, a fringilla sem aliquam. Suspendisse potenti. Morbi sem mi, malesuada quis odio vitae, suscipit congue metus. Sed ut ullamcorper urna, eget molestie est. Sed pulvinar justo ac urna consectetur fringilla. Donec tristique eget leo sit amet mollis.</em></p>
<p>Proin bibendum felis sit amet nisl iaculis, <strong>vel blandit purus dictum</strong>. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. <mark>Sed posuere lectus eu orci tristique maximus</mark>. Nulla facilisi. Aenean sed fermentum nisl. Donec sodales ligula eu est finibus, eu posuere ligula condimentum. Morbi arcu magna, varius id justo ac, aliquam luctus magna. Pellentesque a velit et ipsum euismod congue eget eu sem. <del>Nulla luctus est nec arcu volutpat blandit.</del> Quisque egestas, elit eu tempus tincidunt, mi libero porta purus, eget lobortis metus erat a dolor. Integer ac turpis lacinia, interdum nisl non, feugiat libero.</p>
</div>
</article>
<article class="comment">
<div class="media card-meta">
<div class="media-left"><a href="#"><img class="media-object" src="img/avatar.png" alt="..."></a></div>
<div class="media-body"><author class="media-heading">Écrit par <a href="" >Pseudo</a></author><time> Le vendredi 19 septembre 2014 à 07:16 </time></div>
</div>
<div class="article-content">
<p><em>Lorem ipsum dolor sit amet<sup><a href="#1">[1]</a></sup>, consectetur adipiscing elit. Praesent varius ullamcorper diam, non sagittis lectus rutrum id. Integer eros urna, egestas et libero a, finibus egestas odio. Nunc vel hendrerit quam, eget malesuada sem. Sed hendrerit ligula pharetra leo aliquam volutpat. Integer auctor urna ac convallis laoreet. Nunc vestibulum ipsum sed tortor aliquam porta. Cras nunc est, lobortis in est at, rhoncus auctor nunc. Sed dignissim erat non sollicitudin ultricies. Integer vel consectetur urna. Etiam fermentum ligula vitae nunc viverra, a fringilla sem aliquam. Suspendisse potenti. Morbi sem mi, malesuada quis odio vitae, suscipit congue metus. Sed ut ullamcorper urna, eget molestie est. Sed pulvinar justo ac urna consectetur fringilla. Donec tristique eget leo sit amet mollis.</em></p>
<p>Proin bibendum felis sit amet nisl iaculis, <strong>vel blandit purus dictum</strong>. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. <mark>Sed posuere lectus eu orci tristique maximus</mark>. Nulla facilisi. Aenean sed fermentum nisl. Donec sodales ligula eu est finibus, eu posuere ligula condimentum. Morbi arcu magna, varius id justo ac, aliquam luctus magna. Pellentesque a velit et ipsum euismod congue eget eu sem. <del>Nulla luctus est nec arcu volutpat blandit.</del> Quisque egestas, elit eu tempus tincidunt, mi libero porta purus, eget lobortis metus erat a dolor. Integer ac turpis lacinia, interdum nisl non, feugiat libero.</p>
</div>
</article>
</div>
<aside class="sidebar col-md-3">
<section class="card card-primary">
<div class="card-header">
<h3 class="card-title">Catégories</h3>
</div>
<div class="list-group list-group-flush">
<a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
Objet de liste
<span class="badge badge-primary badge-pill">14</span>
</a>
<a href="#" class="list-group-item list-group-item-action">Objet de liste</a>
<a href="#" class="list-group-item list-group-item-action">Objet de liste</a>
<a href="#" class="list-group-item list-group-item-action">Objet de liste</a>
<a href="#" class="list-group-item list-group-item-action">Objet de liste</a>
</div>
</section>
<section class="card card-primary">
<div class="card-header">
<h3 class="card-title"> Archive</h3>
</div>
<div class="list-group list-group-flush">
<a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
Objet de liste
<span class="badge badge-primary badge-pill">14</span>
</a>
<a href="#" class="list-group-item list-group-item-action">Objet de liste</a>
<a href="#" class="list-group-item list-group-item-action">Objet de liste</a>
<a href="#" class="list-group-item list-group-item-action">Objet de liste</a>
<a href="#" class="list-group-item list-group-item-action">Objet de liste</a>
</div>
</section>
<section class="card card-primary">
<div class="card-header">
<h3 class="card-title">Navigation</h3>
</div>
<div class="list-group list-group-flush">
<a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
Objet de liste
<span class="badge badge-primary badge-pill">14</span>
</a>
<a href="#" class="list-group-item list-group-item-action">Objet de liste</a>
<a href="#" class="list-group-item list-group-item-action">Objet de liste</a>
<a href="#" class="list-group-item list-group-item-action">Objet de liste</a>
<a href="#" class="list-group-item list-group-item-action">Objet de liste</a>
</div>
</section>
</aside>
</div>
</section>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#SecondNavbar" aria-controls="SecondNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="SecondNavbar">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item inactive">
CC BY-SA 2018 <strong>Quarante-Douze</strong>
</li>
</ul>
<ul class="navbar-nav my-2 my-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#"><i class="fa fa-fw fa-rss"></i></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#"><i class="fa fa-fw fa-twitter"></i></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#"><i class="fa fa-fw fa-facebook"></i></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#"><i class="fa fa-fw fa-diaspora"></i></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#"><i class="fa fa-fw fa-mastodon"></i></a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

7
index.php Normal file
View File

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

8
js/prettylinks.js Normal file
View File

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

11
js/trim.js Normal file
View File

@ -0,0 +1,11 @@
var length = 35;
$(function(){
$(".trim-that a, .limit").each(function(i){
len=$(this).text().length;
if(len>length)
{
$(this).text($(this).text().substr(0,(length-3))+'...');
}
});
});

48
page-about.php Normal file
View File

@ -0,0 +1,48 @@
<?php /* Template Name: page-about */ ?>
<?php get_header(); ?> <!-- ouvrir header,php -->
<main>
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<article class="article-content container-article" id="post-<?php the_ID(); ?>">
<h1 class="page-title"><?php the_title(); ?></h1>
<div class="article-body">
<?php the_content(); ?>
</div>
</article>
<?php endwhile; ?>
<?php endif; ?>
</main>
<aside class="sidebar">
<div class="card card-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])) {
echo $desc[1];
} else {
the_author();
}
?></div>
<p class="mwarea"><?php echo get_avatar( get_the_author_meta('user_email'), $size = '500'); ?></p>
<table style="width:100%" class="table-primary">
<tr>
<th>Pseudo</th>
<td><?php the_author() ?></td>
</tr>
<?php $user_description = $desc[0];
$array_tr = explode ( ",", $user_description);
foreach ($array_tr as $tr) {
echo "<tr>";
$array_td = explode(':', $tr);
echo "<th>" . $array_td[0] . "</th>";
echo "<td>" . $array_td[1] . "</td>";
echo "</tr>";
}
?>
</table>
</div>
<?php include(TEMPLATEPATH . '/components/sidebar-content.php'); ?>
</aside>
<?php get_footer(); ?>

60
page-links.php Normal file
View File

@ -0,0 +1,60 @@
<?php /* Template Name: page-links */ ?>
<?php get_header(); ?> <!-- ouvrir header,php -->
<main>
<?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 mb-2">
<?php the_content(); ?>
</div>
</article>
<div class="card card-primary">
<h2 class="card-header">Liste de mes réseaux sociaux</h2>
<table>
<thead>
<tr>
<th class="text-info">Réseau social</th>
<th class="text-right text-info">Lien</th>
</tr>
</thead>
<tbody>
<?php
$listmenu = get_nav_menu_locations();
$menu = wp_get_nav_menu_items($listmenu['social']);
if ($menu != null) {
foreach ($menu as $menuElement) {
?>
<tr>
<th><i class="fa fa-fw fa-<?php echo $menuElement->title; ?>" aria-hidden="true"></i> <span class="text-maj"><?php echo $menuElement->title; ?></span></th>
<td class="text-right"><a class="pretty-link" href="<?php echo $menuElement->url; ?>"><?php echo $menuElement->url; ?></td>
</tr>
<?php
}
}
?>
<?php
$listmenu = get_nav_menu_locations();
$menu = wp_get_nav_menu_items($listmenu['social-plus']);
if ($menu != null) {
foreach ($menu as $menuElement) {
?>
<tr>
<th><i class="fa fa-fw fa-<?php echo $menuElement->title; ?>" aria-hidden="true"></i> <span class="text-maj"><?php echo $menuElement->title; ?></span></th>
<td class="text-right"><a class="pretty-link" href="<?php echo $menuElement->url; ?>"><?php echo $menuElement->url; ?></td>
</tr>
<?php
}
}
?>
</tbody>
</table>
</div>
<?php endwhile; ?>
<?php endif; ?>
</main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

55
page-roman.php Normal file
View File

@ -0,0 +1,55 @@
<?php /* Template Name: page-romans */ ?>
<?php get_header(); ?> <!-- ouvrir header,php -->
<main>
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<?php kspace_cat_breadcrumb('Romans', 'book'); ?>
<?php endwhile; ?>
<?php endif; ?>
<div class="previews-section">
<?php $terms = get_terms(array('taxonomy' => 'roman','hide_empty' => false));?>
<?php if ( ! empty( $terms ) && is_array( $terms ) ) : ?>
<?php foreach ( $terms as $term ) : ?>
<article class="card card-preview card-primary">
<a href="<?php echo esc_url( get_term_link( $term ) ) ?>" class="preview-link">
<div class="preview-item">
<?php
$tag_id = $term->term_id;
$term_meta = get_option( "taxonomy_term_$tag_id" );
$coverimg = $term_meta['cover'];
echo '<div class="preview-content" style="background-image:url(\'' . $coverimg . '\');"></div>';
?>
<div class="preview-overlay">
<h1 class="card-header"><?php echo $term->name; ?></h1>
<div class="preview-metadata">
<div class="metadata-pills">
</div>
<div class="comment-text"><?php echo $term->count; ?> Chapitres</div>
</div>
</div>
</div>
</a>
</article>
<?php endforeach; ?>
<?php endif; ?>
</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_footer(); ?>

17
page.php Normal file
View File

@ -0,0 +1,17 @@
<?php get_header(); ?> <!-- ouvrir header,php -->
<main>
<?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">
<?php the_content(); ?>
</div>
</article>
<?php endwhile; ?>
<?php endif; ?>
</main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

143
scss/_angled-edges.scss Normal file
View File

@ -0,0 +1,143 @@
//-------------------------------------------------------------------------------------
// Angled Edges v2.0.0 (https://github.com/josephfusco/angled-edges)
// Copyright 2017 Joseph Fusco
// Licensed under MIT (https://github.com/josephfusco/angled-edges/blob/master/LICENSE)
//-------------------------------------------------------------------------------------
/// Replace `$search` with `$replace` in `$string`.
///
/// @author Hugo Giraudel
/// @link http://www.sassmeister.com/gist/1b4f2da5527830088e4d
///
/// @param {String} $string - Initial string
/// @param {String} $search - Substring to replace
/// @param {String} $replace ('') - New value
/// @return {String} Updated string
///
@function ae-str-replace($string, $search, $replace: '') {
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace + ae-str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}
@return $string;
}
/// Encode SVG to use as background.
///
/// @param {String} $string
/// @return {String} Encoded svg data
///
@function ae-svg-encode($string){
$result: ae-str-replace($string, '<svg', '<svg xmlns="http://www.w3.org/2000/svg"');
$result: ae-str-replace($result, '%', '%25');
$result: ae-str-replace($result, '"', '\'');
$result: ae-str-replace($result, '<', '%3C');
$result: ae-str-replace($result, '>', '%3E');
@return 'data:image/svg+xml,' + $result;
}
/// Outputs pseudo content for main mixin.
///
/// @author Joseph Fusco
///
/// @param {String} $location
/// @param {Number} $height
/// @output psuedo content
///
@mixin ae-pseudo($wedge, $height, $width) {
background-image: url($wedge);
background-position: center center;
background-repeat: no-repeat;
// full width wedge - needed as Firefox ignores preserveAspectRatio="none" in this case
@if ($width == null) {
background-size: 100% 100%;
}
content: '';
height: $height * 1px;
left: 0;
position: absolute;
right: 0;
width: 100%;
z-index: 1;
}
/// Attatches an svg wedge shape to an element.
///
/// @author Joseph Fusco
///
/// @param {String} $location - 'inside top', 'outside top', 'inside bottom', 'outside bottom'
/// @param {String} $hypotenuse - 'upper left', 'upper right', 'lower left', 'lower right'
/// @param {Color} $fill
/// @param {Number} $height
/// @param {Number} $width
/// @output '::before' and/or '::after' with svg background image
///
@mixin angled-edge($location, $hypotenuse, $fill, $height: 100, $width: null) {
position: relative;
$points: (
'upper left': '0,#{$height} #{$width},#{$height} #{$width},0',
'upper right': '0,#{$height} #{$width},#{$height} 0,0',
'lower left': '0,0 #{$width},#{$height} #{$width},0',
'lower right': '0,0 #{$width},0 0,#{$height}'
);
// full width wedge
@if ($width == null) {
$points: (
'upper left': '0,#{$height} 100,#{$height} 100,0',
'upper right': '0,#{$height} 100,#{$height} 0,0',
'lower left': '0,0 100,#{$height} 100,0',
'lower right': '0,0 100,0 0,#{$height}'
);
}
// ensure $fill color is using rgb()
$fill-rgb: 'rgb(' + round(red($fill)) + ',' + round(green($fill)) + ',' + round(blue($fill)) + ')';
// capture alpha component of $fill to use with fill-opacity
$fill-alpha: alpha($fill);
$wedge: '<svg width="#{$width}" height="#{$height}" fill="#{$fill-rgb}" fill-opacity="#{$fill-alpha}"><polygon points="#{map-get($points, $hypotenuse)}"></polygon></svg>';
// full width wedge
@if ($width == null) {
$wedge: '<svg preserveAspectRatio="none" viewBox="0 0 100 #{$height}" fill="#{$fill-rgb}" fill-opacity="#{$fill-alpha}"><polygon points="#{map-get($points, $hypotenuse)}"></polygon></svg>';
}
$encoded-wedge: ae-svg-encode($wedge);
@if ($location == 'inside top') {
&::before {
@include ae-pseudo($encoded-wedge, $height, $width);
top: 0;
}
} @else if ($location == 'outside top') {
&::before {
@include ae-pseudo($encoded-wedge, $height, $width);
top: -$height * 1px;
}
} @else if ($location == 'inside bottom') {
&::after {
@include ae-pseudo($encoded-wedge, $height, $width);
bottom: 0;
}
} @else if ($location == 'outside bottom') {
&::after {
@include ae-pseudo($encoded-wedge, $height, $width);
bottom: -$height * 1px;
}
} @else {
@error 'Invalid argument for $location - must use: `inside top`, `outside top`, `inside bottom`, `outside bottom`';
}
@if (map-has-key($points, $hypotenuse) == false) {
@error 'Invalid argument for $hypotenuse - must use: `upper left`, `upper right`, `lower left`, `lower right`';
}
}

124
scss/_definitions.scss Normal file
View File

@ -0,0 +1,124 @@
/* --- 01. DEFINITIONS --- */
/*
* Les définitions globales de la stylesheet.
* Elle permette de rapidement modifier le style globale de la fiche en modifiant les éléments centraux
* D'autres définitions importantes sont visibles dans les autres parties de la fiche.
*
* Pour customiser les couleurs, voyez _palette.scss
*/
// A modifier pour customiser le style facilement :
$large-shadow: 0px 2px 10px rgba(0, 0, 0, 0);
$narrow-shadow: 0px 2px 6px rgba(0, 0, 0, 0);
$inset-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0);
$inset-shadow-inverted: inset 0px 2px 0px rgba(0, 0, 0, 0);
$inset-relief: inset 0px 2px 0px rgba(255, 255, 255, 0);
$baseline: 1.5;
$fontsize: 4.75mm;
$lineheight: $baseline * 1rem;
$lineheight_half: $lineheight/2;
$lineheight_quarter: $lineheight/4;
$border-radius: 0px;
$border-size: 0px;
$fontweight_big: 300;
$fontweight_base: 400;
$fontweight_bold: 600;
$fontweight_hyper: 800;
$basefont: Open Sans, sans-serif;
$titlefont: Amatic SC, sans-serif;
// MIXINS RESPONSIVES
// Small tablets and large smartphones (landscape view)
$screen-sm-min: 576px;
// Small tablets (portrait view)
$screen-md-min: 768px;
// Tablets and small desktops
$screen-lg-min: 992px;
// Large tablets and desktops
$screen-xl-min: 1200px;
// Very large desktops
$screen-xxl-min: 1600px;
// Small devices
@mixin sm {
@media (min-width: #{$screen-sm-min}) {
@content;
}
}
// Medium devices
@mixin md {
@media (min-width: #{$screen-md-min}) {
@content;
}
}
// Large devices
@mixin lg {
@media (min-width: #{$screen-lg-min}) {
@content;
}
}
// Extra large devices
@mixin xl {
@media (min-width: #{$screen-xl-min}) {
@content;
}
}
// Extra large desktops
@mixin xxl {
@media (min-width: #{$screen-xxl-min}) {
@content;
}
}
// Custom devices
@mixin rwd($screen) {
@media (min-width: $screen+'px' ) {
@content;
}
}
// MIXINS AUTRES
@mixin borders() {
border: $border-size solid rgba(0, 0, 0, 0.3)
}
@mixin border-radius() {
border-radius: $border-radius $border-radius $border-radius $border-radius;
}
@mixin biseau($size) {
position: relative;
z-index:1;
overflow: visible;
&:before {
content: " ";
position: absolute;
top:0;
left:-$size/2;
right:-$size/2;
bottom:0;
z-index:-1;
transform: skewX(-15deg);
transition: background-color 0.3s;
}
}

79
scss/_drawing.scss Normal file
View File

@ -0,0 +1,79 @@
/* --- 04. COMPOSANTS --- */
/*
* Les différents composants réutilisables de la page.
*
*/
@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;
}
}

123
scss/_font-face.scss Normal file
View File

@ -0,0 +1,123 @@
/* 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;
}*/

295
scss/_global.scss Normal file
View File

@ -0,0 +1,295 @@
/* --- 03. GLOBAL STYLING --- */
/*
* Les styles "globaux" touchant toute la page.
*
*/
@mixin li-no-margin() {
li {
margin: 0;
}
}
@mixin container-big() {
padding-left: $lineheight;
padding-right: $lineheight;
max-width: 1600px;
margin:auto;
}
.no-pills {
list-style:none;
}
.align {
&-center {text-align: center;}
&-left {text-align: left;}
&-right {text-align: right;}
}
/* ------------------ HEADERS ------------------- */
#page-header {
background: $color-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;
}
}
}
}

115
scss/_palette.scss Normal file
View File

@ -0,0 +1,115 @@
/* --- 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); }
}

331
scss/_typography.scss Normal file
View File

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

View File

@ -0,0 +1,200 @@
/*
* 3. Buttons and labels
* All clickable elements
*
*/
$color-button-light: $color-light;
$color-button-dark: $color-dark;
$button_large: $lineheight;
$button_small: $lineheight_quarter;
@mixin button($size) {
@include button-nobiseau($size);
@include biseau($size);
}
@mixin button-nobiseau($size) {
padding: $size;
padding-top: $size/3;
padding-bottom: $size/3;
margin:$size/2;
margin-top: $size/3;
margin-bottom: $lineheight;
//font-size: 4.75mm;
line-height:$lineheight;
height:auto;
@include borders();
@include border-radius();
font-weight: $fontweight_base;
background-color:transparent;
&:hover, &:active, &:focus, a:hover > &, a:active > &, a:focus > & {
text-decoration:none;
background-color:transparent;
}
&:focus {
outline: none;
box-shadow: $narrow-shadow, $inset-shadow, 0px 0px 0px 2px rgba(0, 0, 0, 0);
&:before {
box-shadow: $narrow-shadow, $inset-shadow, 0px 0px 0px 2px rgba(0, 0, 0, 0.3);
outline: none;
}
}
}
@mixin colorize-button($background-color, $text-color) {
//@include background-color($background-color, $text-color);
color: $text-color;
&:before {
background-color: $background-color;
}
}
@mixin button-fullcontrol($background-color, $hover-color, $text-color) {
@include colorize-button($background-color, $text-color);
&:visited {
@include colorize-button($background-color, $text-color);
}
&, &:visited, &:not(.disabled):not(:disabled) {
&:hover, &:active, &:focus, a:hover > &, a:active > &, a:focus > & {
@include colorize-button($hover-color, lighten($text-color, 5%));
}
}
}
@mixin button-color($background-color, $text-color) {
@include button-fullcontrol($background-color, darken($background-color, 7.5%), $text-color)
}
.btn {
@include button($button_large);
&:hover, &:active {
@include borders();
}
p &:last-child {
margin-bottom:0;
}
}
.btn-small {
@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);
}
}
}
// 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); }
&-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);}
}

253
scss/components/_cards.scss Normal file
View File

@ -0,0 +1,253 @@
/*
* 2. Cards and containers
* All elements that are supposed to contain other stuff
*
*
*/
$card-bigpad: $lineheight;
$card-smallpad: $lineheight_half;
@mixin card($size) {
@include border-radius();
background-color: $color-light2;
box-shadow: $large-shadow;
border: none;
margin:0;
margin-bottom:$lineheight;
padding: $size;
}
@mixin card-header($size) {
font-size:1.1em;
font-weight: $fontweight_big;
border-radius: 0;
padding: $size/2;
padding-left:0;
padding-right:0;
padding-bottom: $size/2!important;
margin-bottom:$lineheight_half;
line-height:$lineheight;
white-space: nowrap;
position:relative;
left: -$size*1.25;
width:95%;
@include biseau($size);
h1, h2, h3, h4, h5, h6, h7, h8, h9, h10 {
font-family:$basefont;
font-size:1rem;
padding:0px;
margin:0px;
color:$color-light;
font-weight: $fontweight_big;
line-height:$lineheight;
}
}
@mixin card-color($background-color, $text-color) {
& .card-header, & .menu-header {
@include background-color($background-color, $text-color);
&:before {
@include background-color($background-color, $text-color);
}
}
}
.card, .menu {
@include card($card-bigpad);
&-body {
padding:0!important;
margin:0!important;
}
&-header {
@include card-header($card-bigpad);
.fa {
margin-right: 0.5em;
}
}
/* Menu handling */
&-menu {
display:flex;
flex-direction: column;
ul {
margin:0;
padding:0;
}
li {
list-style: none;
padding:0;
margin:0;
}
.menu-element, .menu-element-link, li a, 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 */
@mixin list-symbol($symbol) {
li.list-element {
list-style: none;
&::before {
font-family: "ForkAwesome";
content:$symbol;
padding-right:$lineheight_half;
}
}
}
@mixin list-color($color) {
li.list-element {
&::before {
color: $color;
}
}
}
ul.card-list, .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;
margin:0;
}
}
.list {
&-check {@include list-symbol("\f00c");}
&-cross {@include list-symbol("\f00d");}
&-danger{@include list-color($color-danger);}
&-success{@include list-color($color-success);}
}
.smallcard, .toast {
@include card($card-smallpad);
&-header {
@include card-header($card-bigpad);
}
}
/* COLORIZE CARDS and TOASTS */
.card, .smallcard, .menu {
&-blue { @include card-color($color-blue, $color-light); }
&-violet { @include card-color($color-violet, $color-light); }
&-red { @include card-color($color-red, $color-light); }
&-orange { @include card-color($color-orange, $color-light); }
&-green { @include card-color($color-green, $color-light); }
&-skyblue { @include card-color($color-skyblue, $color-light); }
&-dark { @include card-color($color-dark, $color-light); }
&-light { @include card-color($color-light2, $color-dark); }
&-yellow { @include card-color($color-yellow, $color-light); }
&-grey { @include card-color($color-grey, $color-light); }
&-primary { @include card-color($color-primary, $color-light); }
&-secondary { @include card-color($color-secondary, $color-light); }
&-warning { @include card-color($color-warning, $color-light); }
&-danger { @include card-color($color-danger, $color-light); }
&-info { @include card-color($color-info, $color-light); }
&-success { @include card-color($color-success, $color-light); }
}
.toast {
&-blue { @include background-color($color-blue, $color-light); }
&-violet { @include background-color($color-violet, $color-light); }
&-red { @include background-color($color-red, $color-light); }
&-orange { @include background-color($color-orange, $color-light); }
&-green { @include background-color($color-green, $color-light); }
&-skyblue { @include background-color($color-skyblue, $color-light); }
&-dark { @include background-color($color-dark, $color-light); }
&-light { @include background-color($color-light2, $color-dark); }
&-yellow { @include background-color($color-yellow, $color-light); }
&-grey { @include background-color($color-grey, $color-light); }
&-primary { @include background-color($color-primary, $color-light); }
&-secondary { @include background-color($color-secondary, $color-light); }
&-warning { @include background-color($color-warning, $color-light); }
&-danger { @include background-color($color-danger, $color-light); }
&-info { @include background-color($color-info, $color-light); }
&-success { @include background-color($color-success, $color-light); }
a, a:visited {
color: $color-light;
background-color:rgba(0,0,0,0.15);
text-decoration:none;
opacity:1;
&:hover, &:active, &:visited {
color: $color-light;
background-color:transparent;
opacity:1;
}
}
}

View File

@ -0,0 +1,255 @@
/*
* 4. Previews
* Special style for previews cards
*
*/
$preview-height: 8*$lineheight;
.previews-section {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-gap: $lineheight;
padding-bottom: $lineheight;
@include xl() {
grid-template-columns: 1fr 1fr;
}
@include xxl() {
grid-template-columns: 1fr 1fr 1fr;
}
}
.preview-container {
width:100%;
}
@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){
.prev-col-2 .preview-container {
width:50%;
}
.prev-col-3 .preview-container {
width:33%;
}
.prev-col-4 .preview-container {
width:25%;
}
}
.card-preview {
padding:0;
width:100%;
margin:auto;
box-shadow: $large-shadow, $inset-shadow;
}
.preview-link {
padding:0;
background-color: transparent;
}
.preview-item {
height: $preview-height;
font-size:0.9rem;
line-height: $lineheight !important;
text-align:justify;
background-color:rgba(0,0,0,0.00);
color:rgba(0,0,0,0.4);
position: relative;
display: flex;
-ms-flex-align: center !important;
align-items: center !important;
justify-content: center;
.preview-overlay {
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
padding-top: $lineheight_half;
backdrop-filter: none;
transition: background-color 0.3s;
h1, h2, h3, h4, h5, h6 {
color: $color-light;
font-size: 1rem;
line-height: $lineheight;
font-weight:$fontweight_big;
}
.card-header {
font-family: $basefont;
font-size: 1rem;
background-color: $color-primary;
@include card-header($lineheight_half);
font-weight: $fontweight_big;
}
}
&:hover {
.preview-overlay {
backdrop-filter: blur(2px);
background-color:rgba(0,0,0,0.4);
.metadata-pills {
opacity: .9;
transition: opacity .5s, height .5s;
height:135px;
}
}
}
}
.preview-content {
max-height: $preview-height;
overflow:hidden;
background-size: cover;
min-height:100%;
min-width:100%;
h1, h2, h3, h4, h5, h6 {
margin-bottom:0px;
max-width:100%;
display:none;
}
& > p {
width:100%;
margin:auto;
& > img {
max-width:100%;
height:auto;
vertical-align:middle;
margin:auto;
text-align:center;
}
&.p-img {
text-align:center;
margin:auto;
padding:auto;
display: block;
width:100%;
}
}
}
.preview-metadata {
color: $color-light;
height:165px;
overflow: hidden;
.metadata-pills {
height:165px;
opacity: 0;
transition: opacity .3s, height .3s;
display:flex;
justify-content:space-between;
padding-left: $lineheight/2;
padding-right: $lineheight/2;
font-size:0.9em;
}
}
.card-preview.card-info {
.comment-text {
@include angled-edge('outside top', 'upper left', $color-skyblue, 16);
background-color:$color-skyblue;
}
}
.card-preview.card-grey {
.comment-text {
@include angled-edge('outside top', 'upper left', $color-grey, 16);
background-color:$color-grey;
}
}
.comment-text {
@include angled-edge('outside top', 'upper left', $color-violet, 16);
color: $color-light;
background-color:$color-violet;
text-align: center;
}
.card-preview time {
margin-bottom:0.4em;
display:block;
}
// Author area
.author-area {
display:flex;
img.author-avatar, img.avatar {
display:block;
height: 4.5rem;
width:auto;
border-radius:100%;
padding:0;
margin:0;
margin-right:$lineheight;
}
.author-metadata {
align-items:center;
display:flex;
flex-direction:column;
justify-content: center;
align-items: flex-start;
}
.author-date {
font-style:italic;
}
&:not(:last-child) {
margin-bottom:$lineheight;
}
}
.pigimg {
display:block;
max-width: 100%;
height:auto;
margin:auto;
}
.avatar {
background: transparent;
}
.mwarea {
padding-bottom: $lineheight;
.avatar {
width:80%;
height:auto;
display:block;
margin:auto;
}
}
.cover {
width:100%;
height:auto;
}
.roman {
@include md() {
width:80%;
position:relative;
top:-240px;
margin:auto;
}
}

27
scss/style.scss Normal file
View File

@ -0,0 +1,27 @@
/*
Theme Name: Kazhnuz Space
Theme URI: https://git.kobold.cafe/kazhnuz/kspace-wordpress-theme
Author: Kazhnuz
Author URI: https://kazhnuz.space
Description: The default theme for Kazhnuz.space, my personnal blog. Made using spectre.css
Version: 0.1
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
Text Domain: kspace-wordpress-theme
This theme is licensed under the GPLv3.
*/
@import 'angled-edges';
@import 'palette';
@import 'definitions';
@import 'typography';
@import 'global';
@import 'drawing';

8
search.php Normal file
View File

@ -0,0 +1,8 @@
<?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>
<?php include(TEMPLATEPATH . '/components/posts-list.php'); ?>
</main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

3
sidebar.php Normal file
View File

@ -0,0 +1,3 @@
<aside class="sidebar">
<?php include(TEMPLATEPATH . '/components/sidebar-content.php'); ?>
</aside>

14
single-notitle.php Normal file
View File

@ -0,0 +1,14 @@
<?php get_header();
/*
Template Name: no-title-article
Template Post Type: post
*/
?> <!-- ouvrir header,php -->
<main>
<?php $haveTitle = false; ?>
<?php include(TEMPLATEPATH . '/components/article.php'); ?>
</main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

9
single.php Normal file
View File

@ -0,0 +1,9 @@
<?php get_header(); ?> <!-- ouvrir header,php -->
<main>
<?php $haveTitle = true; ?>
<?php include(TEMPLATEPATH . '/components/article.php'); ?>
</main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Some files were not shown because too many files have changed in this diff Show More