feat: rebuild du theme basé sur celui de qdouze
Fixes #30 Fixes #35 Fixes #36 Fixes #38 Fixes #40 Fixes #43 Fixes #44 Fixes #46 Fixes #47 Fixes #49 Fixes #51 Fixes #53
This commit is contained in:
Kazhnuz
parent
2b2e650da7
commit
52dc0b9c5c
99 changed files with 5310 additions and 3429 deletions
8
404.php
8
404.php
|
|
@ -1,12 +1,8 @@
|
|||
<?php get_header(); ?>
|
||||
<main>
|
||||
<div class="card card-danger">
|
||||
<div class="card-header"><i class="fa fa-folder-exclamation-mark" aria-hidden="true"></i> 404 Not Found</div>
|
||||
<div class="card-body">
|
||||
<main id="skip">
|
||||
<h1 class="page-title">Page non trouvée</h1>
|
||||
<p>La page que vous cherchez n'a pas été trouvée</p>
|
||||
<p>Veuillez vérifier l'adresse, si le cas recommence, n'hésitez pas à contacter le webmestre via kazhnuz [at] kobold [point] cafe</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<?php get_sidebar(); ?>
|
||||
<?php get_footer(); ?>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<?php get_header(); ?> <!-- ouvrir header,php -->
|
||||
<main>
|
||||
<main id="skip">
|
||||
<?php kspace_cat_breadcrumb(get_the_archive_title(), 'calendar'); ?>
|
||||
<?php include(TEMPLATEPATH . '/components/preview-list.php'); ?>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -1,21 +1,15 @@
|
|||
<?php get_header(); ?> <!-- ouvrir header,php -->
|
||||
<main>
|
||||
<main id="skip">
|
||||
<?php $category = get_category( get_query_var( 'cat' ) );
|
||||
kspace_cat_breadcrumb_with_rss(single_cat_title('', false), 'folder-open', 'la catégorie', get_category_link( $category->cat_ID ) . '/feed' );
|
||||
?>
|
||||
<?php include(TEMPLATEPATH . '/components/posts-list.php'); ?>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- Sidebar custom pour contenir la description -->
|
||||
<aside class="sidebar">
|
||||
<div class="card card-info">
|
||||
<div class="card-header"><i class="fa fa-folder-open"></i> <?php echo single_cat_title(); ?></div>
|
||||
<div class="card-body">
|
||||
<div class="well">
|
||||
<?php the_archive_description() ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php include(TEMPLATEPATH . '/components/sidebar-content.php'); ?>
|
||||
</aside>
|
||||
<?php include(TEMPLATEPATH . '/components/posts-list.php'); ?>
|
||||
</main>
|
||||
|
||||
<?php get_sidebar(); ?>
|
||||
<?php get_footer(); ?>
|
||||
|
|
|
|||
18
category.php
18
category.php
|
|
@ -1,21 +1,15 @@
|
|||
<?php get_header(); ?> <!-- ouvrir header,php -->
|
||||
<main>
|
||||
<main id="skip">
|
||||
<?php $category = get_category( get_query_var( 'cat' ) );
|
||||
kspace_cat_breadcrumb_with_rss(single_cat_title('', false), 'folder-open', 'la catégorie', get_category_link( $category->cat_ID ) . '/feed' );
|
||||
?>
|
||||
<?php include(TEMPLATEPATH . '/components/preview-list.php'); ?>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- Sidebar custom pour contenir la description -->
|
||||
<aside class="sidebar">
|
||||
<div class="card card-info">
|
||||
<div class="card-header"><i class="fa fa-folder-open" aria-hidden="true"></i> <?php echo single_cat_title(); ?></div>
|
||||
<div class="card-body">
|
||||
<div class="well">
|
||||
<?php the_archive_description() ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php include(TEMPLATEPATH . '/components/sidebar-content.php'); ?>
|
||||
</aside>
|
||||
<?php include(TEMPLATEPATH . '/components/preview-list.php'); ?>
|
||||
</main>
|
||||
|
||||
<?php get_sidebar(); ?>
|
||||
<?php get_footer(); ?>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
<?php include(TEMPLATEPATH . '/components/article/breadcrumb.php'); ?>
|
||||
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
|
||||
|
||||
<?php include(TEMPLATEPATH . '/components/article/flags.php'); ?>
|
||||
|
|
@ -6,10 +5,12 @@
|
|||
<article class="article container-article" id="post-<?php the_ID(); ?>">
|
||||
<?php if ($haveTitle) { ?>
|
||||
<h1 class="page-title"><?php the_title(); ?></h1>
|
||||
<p class="text-right"><span class="btn-small btn-secondary"> <?php echo reading_time(); ?> </span></p>
|
||||
<p class="align-right"><span class="btn-small btn-secondary"> <?php echo reading_time(); ?> </span></p>
|
||||
<?php } else { ?>
|
||||
<h1 class="sr-only"><?php the_title(); ?></h1>
|
||||
<?php } ?>
|
||||
|
||||
<div class="article-entry">
|
||||
<div class="article-entry mb-1">
|
||||
<?php the_content(); ?>
|
||||
</div>
|
||||
</article>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="flex-that">
|
||||
<div class="flex-that d-none d-flex-sm pl-half pr-half">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class='breadcrumb-item'><a href='<?php echo site_url(); ?>'>kazhnuz.space</a></li><?php
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
$my_custom_field = $custom_fields['description'];
|
||||
if ($my_custom_field != null) {
|
||||
foreach ( $my_custom_field as $key => $value ) {
|
||||
echo " <div> " . $value . "</div>";
|
||||
echo " <div class='mb-half'> " . $value . "</div>";
|
||||
}
|
||||
}
|
||||
?>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
if ($flags) {
|
||||
foreach( $flags as $flag ) {
|
||||
$term_meta = get_option( "taxonomy_term_$flag->term_id" );
|
||||
echo "<div class='toast toast-" . $term_meta['niveau'] . "'>";
|
||||
echo "<div class='toast bg-" . $term_meta['niveau'] . "'>";
|
||||
echo $flag->description;
|
||||
echo "</div>";
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,19 +1,29 @@
|
|||
<h3 class="sr-only">Tags et catégories</h3>
|
||||
<?php
|
||||
if (has_category('chapters')) {
|
||||
echo "<ul class='nolist' aria-labelledby='title-article-taxo-romans'>";
|
||||
echo '<h4 class="sr-only" id="title-article-taxo-romans">Romans</h4>';
|
||||
$romans = get_the_terms($post->ID, 'roman');
|
||||
foreach( $romans as $roman ) {
|
||||
echo "<a href= '" . esc_url( get_category_link( $roman->term_id ) ) . "' class='btn-small btn-info mr-2'><i class='fa fa-book mr-1'></i> " . $roman->name . "</a>";
|
||||
echo "<li><a href= '" . esc_url( get_category_link( $roman->term_id ) ) . "' class='badge btn-primary mr-half'><i class='fa fa-book'></i> " . $roman->name . "</a></li>";
|
||||
}
|
||||
echo "</ul>";
|
||||
} else {
|
||||
$categories = get_the_category();
|
||||
echo "<ul class='nolist' aria-labelledby='title-article-taxo-categories'>";
|
||||
echo '<h4 class="sr-only" id="title-article-taxo-categories">Catégories</h4>';
|
||||
foreach( $categories as $category ) {
|
||||
echo "<a href= '" . esc_url( get_category_link( $category->term_id ) ) . "' class='btn-small btn-info mr-2'><i class='fa fa-folder mr-1'></i> " . $category->cat_name . "</a>";
|
||||
echo "<li><a href= '" . esc_url( get_category_link( $category->term_id ) ) . "' class='badge btn-primary mr-half'><i class='fa fa-folder'></i> " . $category->cat_name . "</a></li>";
|
||||
}
|
||||
echo "</ul>";
|
||||
}
|
||||
$tags = get_the_tags();
|
||||
if ($tags) {
|
||||
echo "<ul class='nolist' aria-labelledby='title-article-taxo-tags'>";
|
||||
echo '<h4 class="sr-only" id="title-article-taxo-tags">Tags</h4>';
|
||||
foreach( $tags as $tag ) {
|
||||
echo "<a href= '" . esc_url( get_tag_link( $tag->term_id ) ) . "' class='btn-small btn-primary mr-2'><i class='fa fa-tag mr-1'></i> " . $tag->name . "</a> ";
|
||||
echo "<li><a href= '" . esc_url( get_tag_link( $tag->term_id ) ) . "' class='badge btn-secondary mr-half'><i class='fa fa-tag'></i> " . $tag->name . "</a></li>";
|
||||
}
|
||||
echo "</ul>";
|
||||
}
|
||||
?>
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@
|
|||
'post_type' => 'post',
|
||||
'tax_query' => array(
|
||||
array(
|
||||
'taxonomy' => 'category',
|
||||
'terms' => 'blog',
|
||||
'taxonomy' => 'niveau',
|
||||
'terms' => 'featured',
|
||||
'field' => 'slug',
|
||||
)
|
||||
),
|
||||
|
|
|
|||
|
|
@ -5,31 +5,45 @@
|
|||
$menu = wp_get_nav_menu_items($listmenu['social']);
|
||||
if ($menu != null) {
|
||||
foreach ($menu as $menuElement) {
|
||||
echo '<li class="social-li"><a class="social-link" href="'. $menuElement->url .'" title="Accéder à mon '.$menuElement->title.'" aria-label="Accéder à mon '.$menuElement->title.'"><i class="fa fa-fw fa-'.$menuElement->title.'" aria-hidden="true"></i></a></li> ';
|
||||
echo '<li class="social-li"><a class="social-link" href="'. $menuElement->url .'"><i class="fa fa-fw fa-'.$menuElement->title.'" aria-hidden="true"></i><span class="sr-only">Accéder à mon '.$menuElement->title.'</span></a></li> ';
|
||||
}
|
||||
|
||||
}
|
||||
?>
|
||||
<li class="social-li">
|
||||
<a class="social-link" href="https://kazhnuz.space/links" title="Plus de liens" aria-label="Plus de liens">
|
||||
<a class="social-link" href="https://kazhnuz.space/links">
|
||||
<i class="fa fa-fw fa-ellipsis-h" aria-hidden="true"></i>
|
||||
<span class='sr-only'>Plus de liens</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="footer-collumns">
|
||||
<div>
|
||||
<div class="container columns">
|
||||
<section class="col-12 col-md-4" aria-labelledby="title-footer-section-1">
|
||||
<h2 class="sr-only" id="title-footer-section-1">Droit d'utiliations</h2>
|
||||
<p>Les contenus sont diffusé sous licence Creative Common Attribution - Partage à l'Identique 4.0 - hors mention contraire.</p>
|
||||
<p>Ces licences vous autorise à partager et copier mes travaux, tant que vous me citiez en source, et que vous autorisez la même chose pour les travaux qui en seraient dérivés. N'hésitez pas à partager ! <i class="text-red fa fa-heart" aria-hidden="true"></i></p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div>
|
||||
<section class="col-12 col-md-4" aria-labelledby="title-footer-section-2">
|
||||
<h2 class="sr-only" id="title-footer-section-2">Crédits</h2>
|
||||
<p>Ce site est propulsé par <a href="https://wordpress.org">Wordpress</a></p>
|
||||
<p>Le <a href="https://git.kobold.cafe/kazhnuz.space/kspace-wordpress-theme">theme wordpress</a> de ce site est disponible sous licence CC BY-SA et GPL v3. Il utilise <a href="https://picturepan2.github.io/spectre/">Spectre</a> et <a href="https://forkawesome.github.io/Fork-Awesome/">Fork-Awesome</a>.</p>
|
||||
</div>
|
||||
<p>Le <a href="https://git.kobold.cafe/kazhnuz.space/kspace-wordpress-theme">theme wordpress</a> de ce site est disponible sous licence CC BY-SA et GPL v3. Il utilise <a href="https://forkawesome.github.io/Fork-Awesome/">Fork-Awesome</a> pour les icones.</p>
|
||||
</section>
|
||||
|
||||
<div>
|
||||
<section class="col-12 col-md-4" aria-labelledby="title-footer-section-3">
|
||||
<h2 class="sr-only" id="title-footer-section-3">Informations annexes</h2>
|
||||
<p>Kazhnuz Space et les différents sites/services qui le composent sont fourni "tel-quel", sans garantie. Cependant, toute critique, remarque, etc. est la bienvenue. Pour cela, vous pouvez me contacter à kazhnuz [at] kobold [point] cafe ou sur les réseaux sociaux visible plus haut</p>
|
||||
</div>
|
||||
<ul>
|
||||
<h3 class="sr-only">Pages annexes</h3>
|
||||
<?php
|
||||
$listmenu = get_nav_menu_locations();
|
||||
$menu = wp_get_nav_menu_items($listmenu['footer-pages']);
|
||||
foreach ($menu as $menuElement) {
|
||||
echo '<li><a href="' . $menuElement->url . '" class="menu-item">'. $menuElement->title . '</a></li>';
|
||||
}
|
||||
?>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
<div class="logo-area">
|
||||
<h1><a href="<?php echo site_url(); ?>"><img src="<?php echo get_template_directory_uri();?>/img/logo.png" alt="Kazhnuz"/></a></h1>
|
||||
<div class="logo-area container">
|
||||
<h1><a href="<?php echo site_url(); ?>"><img src="<?php echo get_template_directory_uri();?>/img/logo.png" alt="Kazhnuz"/> <span class="sr-only">Kazhnuz</span></a></h1>
|
||||
</div>
|
||||
|
|
|
|||
48
components/mobile-sidebar.php
Normal file
48
components/mobile-sidebar.php
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
<nav id="mobile-sidebar" class="bg-dark fg-light sidebar menu hidden">
|
||||
<h1 class="align-center text-light">Menu du site</h1>
|
||||
<div class="mb-1">
|
||||
<?php include(TEMPLATEPATH . '/components/searchform.php'); ?>
|
||||
</div>
|
||||
<ul>
|
||||
<h2>Menu principal</h2>
|
||||
<li>
|
||||
<a href="<?php echo site_url(); ?>" class="menu-item">
|
||||
<span><i class="fa fa-home" aria-hidden="true"></i> Accueil</span>
|
||||
</a>
|
||||
</li>
|
||||
<?php
|
||||
$listmenu = get_nav_menu_locations();
|
||||
$menu = wp_get_nav_menu_items($listmenu['top-navbar']);
|
||||
foreach ($menu as $menuElement) {
|
||||
echo '<li><a href="' . $menuElement->url . '" class="menu-item">'. $menuElement->title . '</a></li>';
|
||||
}
|
||||
?>
|
||||
</ul>
|
||||
<ul>
|
||||
<h2>Liste des catégories</h2>
|
||||
<?php
|
||||
$categories = get_categories( array(
|
||||
'orderby' => 'name',
|
||||
'order' => 'ASC'
|
||||
) );
|
||||
|
||||
foreach( $categories as $category ) {?>
|
||||
<li>
|
||||
<a class="menu-item" href="<?php echo get_category_link($category->term_id) ?>"><?php echo $category->name ?></a>
|
||||
</li>
|
||||
<?php }
|
||||
?>
|
||||
</ul>
|
||||
<ul>
|
||||
<h2>Pages</h2>
|
||||
<?php
|
||||
$listmenu = get_nav_menu_locations();
|
||||
$menu = wp_get_nav_menu_items($listmenu['top-navbar-2']);
|
||||
foreach ($menu as $menuElement) {
|
||||
echo '<li><a href="' . $menuElement->url . '" class="menu-item">'. $menuElement->title . '</a></li>';
|
||||
}
|
||||
?>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<button id="mobile-button" class="menu-button"><i class="fa fa-navicon" aria-hidden="true"></i> <span class="sr-only">Afficher le menu</span></button>
|
||||
|
|
@ -8,10 +8,10 @@
|
|||
foreach( $parent_categories as $parent_category ) {
|
||||
?>
|
||||
<li>
|
||||
<span class="btn btn-navbar">
|
||||
<?php echo $parent_category->name ?> <i class="fa fa-caret-down" aria-hidden="true"></i>
|
||||
<a class="menu-item submenu" href="#">
|
||||
<?php echo $parent_category->name ?> <i class="fa fa-caret-down" aria-hidden="true"></i></a>
|
||||
|
||||
<ul class="card-menu">
|
||||
<ul class="bg-light menu fg-dark">
|
||||
<?php
|
||||
$categories = get_categories( array(
|
||||
'orderby' => 'slug',
|
||||
|
|
@ -21,12 +21,13 @@
|
|||
|
||||
foreach( $categories as $category ) {
|
||||
if ($category->slug != "chapters") {
|
||||
echo "<!-- " . get_category_link($category->term_id) . " -->";
|
||||
echo '<li><a class="menu-element" href="' . get_category_link($category->term_id) . '">' . $category->name . '</a></li>';
|
||||
}
|
||||
}
|
||||
?>
|
||||
</ul>
|
||||
</span>
|
||||
|
||||
</li>
|
||||
<?php
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<nav class="toolbar flex-that">
|
||||
<nav class="container menu toolbar flex-that fg-light">
|
||||
<h2 class="sr-only">Menu des pages</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="<?php echo site_url(); ?>" class="btn btn-navbar">
|
||||
|
|
@ -15,7 +16,7 @@
|
|||
?>
|
||||
</ul>
|
||||
|
||||
<ul>
|
||||
<ul class="f-end">
|
||||
<?php
|
||||
$listmenu = get_nav_menu_locations();
|
||||
$menu = wp_get_nav_menu_items($listmenu['top-navbar-2']);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
|
||||
<div class="card card-primary" id="post-<?php the_ID(); ?>">
|
||||
<div class="card head-primary" id="post-<?php the_ID(); ?>">
|
||||
<div class="card-header"><h1><?php the_title(); ?></h1></div>
|
||||
<div class="flex-that mb">
|
||||
<div class="article-category">
|
||||
|
|
|
|||
|
|
@ -1,22 +1,21 @@
|
|||
<?php if(have_posts()) : ?>
|
||||
<div class="previews-section">
|
||||
<div class="preview-grid">
|
||||
<?php while(have_posts()) : the_post(); ?>
|
||||
<article class="card card-preview card-primary">
|
||||
<a href="<?php the_permalink(); ?>" class="preview-link">
|
||||
<div class="preview-item">
|
||||
|
||||
<h1 class="card-header"><?php the_title(); ?></h1>
|
||||
<div class="preview-content">
|
||||
<?php if(!has_post_thumbnail( $post->ID )) {
|
||||
?>
|
||||
<div class="preview-content" aria-hidden="true"><?php the_excerpt(); ?></div>
|
||||
<div class="preview-exerpt" aria-hidden="true"><?php the_excerpt(); ?></div>
|
||||
<?php
|
||||
} else {
|
||||
?>
|
||||
<div class="preview-content" aria-hidden="true"><p class="p-img"><img class="preview-img" src="<?php echo get_the_post_thumbnail_url(); ?>" /></p></div>
|
||||
<div class="preview-exerpt" aria-hidden="true"><p class="p-img"><img class="preview-img" src="<?php echo get_the_post_thumbnail_url(); ?>" /></p></div>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
<div class="preview-overlay">
|
||||
<h1 class="card-header"><?php the_title(); ?></h1>
|
||||
<div class="preview-metadata">
|
||||
<div class="metadata-pills">
|
||||
<div><?php
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<form method="get" id="searchform" action="<?php bloginfo('home'); ?>/">
|
||||
<div>
|
||||
<input class="form-control" type="search" placeholder="Chercher" aria-label="Chercher" value="<?php the_search_query(); ?>" name="s" id="s" />
|
||||
<label for="searchfield" class="sr-only">Formulaire de recherche</label>
|
||||
<input class="form-control" id="searchfield" type="search" placeholder="Chercher sur le site" aria-label="Chercher sur le site" value="<?php the_search_query(); ?>" name="s" id="s" />
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<div class="card card-primary">
|
||||
<div class="card-header"><i class="fa fa-folder" aria-hidden="true"></i> Archives</div>
|
||||
<section class="card head-primary">
|
||||
<h2 class="card-header"><i class="fa fa-folder" aria-hidden="true"></i> Archives</h2>
|
||||
<div class="card-body">
|
||||
<ul class="tag-list">
|
||||
<?php wp_get_archives('type=yearly&format=html&show_post_count=0'); ?>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -7,9 +7,10 @@
|
|||
|
||||
foreach( $parent_categories as $parent_category ) {
|
||||
?>
|
||||
<div class="card card-primary">
|
||||
<div class="card-header"><i class="fa fa-folder" aria-hidden="true"></i> <?php echo $parent_category->name ?></div>
|
||||
<ul class="card-menu">
|
||||
<section class="card head-primary">
|
||||
<h2 class="card-header"><i class="fa fa-folder" aria-hidden="true"></i> <?php echo $parent_category->name ?></h2>
|
||||
<div class="menu fg-dark">
|
||||
<ul>
|
||||
<?php
|
||||
$categories = get_categories( array(
|
||||
'orderby' => 'slug',
|
||||
|
|
@ -19,12 +20,13 @@
|
|||
|
||||
foreach( $categories as $category ) {
|
||||
if ($category->slug != "chapters") {
|
||||
echo '<li><a class="menu-element" href="' . get_category_link($category->term_id) . '">' . $category->name . '<span class="menu-label label-secondary">'. $category->count . '</span></a></li>';
|
||||
echo '<li><a class="menu-element" href="' . get_category_link($category->term_id) . '">' . $category->name . '<span class="badge bg-secondary">'. $category->count . '</span></a></li>';
|
||||
}
|
||||
}
|
||||
?>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<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">
|
||||
<section class="card head-primary">
|
||||
<h2 class="card-header"><i class="fa fa-rss" aria-hidden="true"></i> Publications</h2>
|
||||
<div class="menu fg-dark">
|
||||
<ul class="trim-that">
|
||||
<?php
|
||||
wp_get_archives( array(
|
||||
'type' => 'postbypost',
|
||||
|
|
@ -11,3 +12,4 @@
|
|||
?>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -3,9 +3,10 @@ $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">
|
||||
<section class="card head-primary">
|
||||
<h2 class="card-header"><i class="fa fa-link" aria-hidden="true"></i> Liens</h2>
|
||||
<div class="menu fg-dark">
|
||||
<ul>
|
||||
<?php
|
||||
$menu = wp_get_nav_menu_items( 'link-menu');
|
||||
foreach ($menu as $menuElement) {
|
||||
|
|
@ -14,6 +15,7 @@ if ($menu != null) {
|
|||
?>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@ $tags = get_tags($args);
|
|||
|
||||
?>
|
||||
|
||||
<div class="card card-primary">
|
||||
<div class="card-header"><i class="fa fa-tags" aria-hidden="true"></i> Tags</div>
|
||||
<section class="card head-primary">
|
||||
<h2 class="card-header"><i class="fa fa-tags" aria-hidden="true"></i> Tags</h2>
|
||||
<div class="card-body">
|
||||
<ul class="tag-list">
|
||||
<?php foreach ($tags as $tag) {?>
|
||||
|
|
@ -18,4 +18,4 @@ $tags = get_tags($args);
|
|||
<?php } ?>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
BIN
fonts/AmaticSC-Bold.ttf
Normal file
BIN
fonts/AmaticSC-Bold.ttf
Normal file
Binary file not shown.
BIN
fonts/AmaticSC-Regular.ttf
Normal file
BIN
fonts/AmaticSC-Regular.ttf
Normal file
Binary file not shown.
|
|
@ -1,9 +1,11 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<?php include(TEMPLATEPATH . '/components/mobile-sidebar.php'); ?>
|
||||
<?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>
|
||||
<script src="<?php echo get_template_directory_uri();?>/js/mobile-sidebar.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -125,7 +125,7 @@ function kspace_cat_breadcrumb_nav($categoryName, $icon) {
|
|||
|
||||
function kspace_cat_breadcrumb($categoryName, $icon) {
|
||||
?>
|
||||
<div class="flex-that">
|
||||
<div class="flex-that d-none d-flex-sm pr-half pl-half">
|
||||
<?php kspace_cat_breadcrumb_nav($categoryName, $icon); ?>
|
||||
</div>
|
||||
<?php
|
||||
|
|
@ -133,10 +133,10 @@ function kspace_cat_breadcrumb($categoryName, $icon) {
|
|||
|
||||
function kspace_cat_breadcrumb_with_rss($categoryName, $icon, $categoryType, $rssLink) {
|
||||
?>
|
||||
<div class="flex-that">
|
||||
<div class="flex-that d-none d-flex-sm pr-half pl-half">
|
||||
<?php kspace_cat_breadcrumb_nav($categoryName, $icon); ?>
|
||||
<div class="rss">
|
||||
<a href="<?php echo $rssLink; ?>" class="btn btn-orange" /><i class="fa fa-rss" aria-hidden="true"></i><span class="sr-only">Flux RSS de <?php echo $categoryType; ?></span></a>
|
||||
<a href="<?php echo $rssLink; ?>" class="btn btn-warning d-block m-0" /><i class="fa fa-rss" aria-hidden="true"></i><span class="sr-only">Flux RSS de <?php echo $categoryType; ?></span></a>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
|
|
|
|||
12
header.php
12
header.php
|
|
@ -12,24 +12,20 @@
|
|||
|
||||
<?php wp_head(); ?>
|
||||
<?php include(TEMPLATEPATH . '/components/opengraph.php'); ?>
|
||||
<link rel="shortcut icon" href="img/favicon.png">
|
||||
|
||||
<!-- Polices d'écriture -->
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,800&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Amatic+SC&display=swap" rel="stylesheet">
|
||||
<link rel="shortcut icon" href="<?php echo get_template_directory_uri();?>/img/favicon.png">
|
||||
|
||||
<!-- framework utilisés -->
|
||||
<link href="<?php echo get_template_directory_uri() . "/dep/spectre/css/spectre.min.css"; ?>" rel="stylesheet"/>
|
||||
<link href="<?php echo get_template_directory_uri() . "/dep/fork-awesome/css/fork-awesome.min.css"; ?>" rel="stylesheet"/>
|
||||
|
||||
<!-- CSS -->
|
||||
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet"/>
|
||||
|
||||
<script src="<?php echo get_template_directory_uri();?>/dep/jquery/jquery.js"></script>
|
||||
</head>
|
||||
|
||||
<!-- Début du vrai HTML -->
|
||||
<body>
|
||||
<div class="bg-dark skip small-text">
|
||||
<a href="#skip">Accéder au contenu</a>
|
||||
</div>
|
||||
<div id="wrapper">
|
||||
<?php include(TEMPLATEPATH . '/components/header-content.php'); ?>
|
||||
<div class="container-blog">
|
||||
|
|
|
|||
2
home.php
2
home.php
|
|
@ -1,5 +1,5 @@
|
|||
<?php get_header(); ?>
|
||||
<main>
|
||||
<main id="skip">
|
||||
<?php include(TEMPLATEPATH . '/components/globalflag.php'); ?>
|
||||
|
||||
<!-- Recuperation de la page de home -->
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 4.1 KiB After Width: | Height: | Size: 8.6 KiB |
|
|
@ -1,5 +1,5 @@
|
|||
<?php get_header(); ?>
|
||||
<main>
|
||||
<main id="skip">
|
||||
<h1 class="page-title">Publications</h1>
|
||||
<?php include(TEMPLATEPATH . '/components/preview-list.php'); ?>
|
||||
</main>
|
||||
|
|
|
|||
10
js/mobile-sidebar.js
Normal file
10
js/mobile-sidebar.js
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
document.getElementById('mobile-button').addEventListener('click', function () {
|
||||
const sidebar = document.getElementById('mobile-sidebar');
|
||||
if (sidebar.classList.contains('hidden')) {
|
||||
sidebar.classList.remove('hidden');
|
||||
sidebar.classList.add('shown');
|
||||
} else {
|
||||
sidebar.classList.remove('shown');
|
||||
sidebar.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
|
|
@ -1,8 +1,6 @@
|
|||
var length = 35;
|
||||
|
||||
$(function(){
|
||||
$(".pretty-link").each(function(i){
|
||||
var str = $(this).text().replace("https://", "");
|
||||
$(this).text(str);
|
||||
});
|
||||
document.querySelectorAll('.pretty-link').forEach(function (i) {
|
||||
var str = i.textContent.replace('https://', '');
|
||||
i.textContent = str;
|
||||
});
|
||||
21
js/trim.js
21
js/trim.js
|
|
@ -1,11 +1,18 @@
|
|||
var length = 35;
|
||||
const LENGHT = 35;
|
||||
|
||||
$(function(){
|
||||
$(".trim-that a, .limit").each(function(i){
|
||||
len=$(this).text().length;
|
||||
if(len>length)
|
||||
{
|
||||
$(this).text($(this).text().substr(0,(length-3))+'...');
|
||||
function limitString(str) {
|
||||
len = str.length;
|
||||
if (len > LENGHT) {
|
||||
return str.substr(0, (LENGHT - 3)) + '...';
|
||||
} else {
|
||||
return str;
|
||||
}
|
||||
}
|
||||
|
||||
document.querySelectorAll('.trim-that a').forEach(function (i) {
|
||||
i.textContent = limitString(i.textContent);
|
||||
});
|
||||
|
||||
document.querySelectorAll('.limit').forEach(function (i) {
|
||||
i.textContent = limitString(i.textContent);
|
||||
});
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
<?php endif; ?>
|
||||
</main>
|
||||
<aside class="sidebar">
|
||||
<div class="card card-info">
|
||||
<div class="card head-info">
|
||||
<?php $desc = explode(";", get_the_author_meta( 'infodata' )) ?>
|
||||
<div class="card-header"><i class="fa fa-info" aria-hidden="true"></i> <?php
|
||||
if (!empty($desc[1])) {
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
}
|
||||
?></div>
|
||||
<p class="mwarea"><?php echo get_avatar( get_the_author_meta('user_email'), $size = '500'); ?></p>
|
||||
<table style="width:100%" class="table-primary">
|
||||
<table style="width:100%" class="head-primary">
|
||||
<tr>
|
||||
<th>Pseudo</th>
|
||||
<td><?php the_author() ?></td>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
</div>
|
||||
</article>
|
||||
|
||||
<div class="card card-primary">
|
||||
<div class="card head-primary">
|
||||
<h2 class="card-header">Liste de mes réseaux sociaux</h2>
|
||||
<table>
|
||||
<thead>
|
||||
|
|
|
|||
56
page-plan.php
Normal file
56
page-plan.php
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
<?php /* Template Name: page-plan */ ?>
|
||||
<?php get_header(); ?> <!-- ouvrir header,php -->
|
||||
<main id="skip">
|
||||
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
|
||||
|
||||
<article class="article-content" id="post-<?php the_ID(); ?>">
|
||||
<h1 class="page-title"><?php the_title(); ?></h1>
|
||||
|
||||
<div class="article-body">
|
||||
<section class="mb-1">
|
||||
<h2>Derniers articles</h2>
|
||||
<ul>
|
||||
<?php
|
||||
wp_get_archives( array(
|
||||
'type' => 'postbypost',
|
||||
'echo' => 1,
|
||||
'order' => 'ASC',
|
||||
'limit' => 12
|
||||
) );
|
||||
?>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="mb-1">
|
||||
<h2>Pages</h2>
|
||||
<ul>
|
||||
<?php wp_list_pages( 'sort_column=menu_order&depth=1&title_li=' ) ?>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="mb-1">
|
||||
<h2>Catégories</h2>
|
||||
<ul>
|
||||
<?php
|
||||
$categories = get_categories( array(
|
||||
'orderby' => 'name',
|
||||
'order' => 'ASC'
|
||||
) );
|
||||
|
||||
foreach( $categories as $category ) {
|
||||
echo '<li><a href="' . get_category_link($category->term_id) . '">' . $category->name . '</a></li>';
|
||||
}?>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="mb-1">
|
||||
<h2>Archive des articles</h2>
|
||||
<ul>
|
||||
<?php wp_get_archives('type=yearly&format=html&show_post_count=0'); ?>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<?php endwhile; ?>
|
||||
<?php endif; ?>
|
||||
</main>
|
||||
<?php get_sidebar(); ?>
|
||||
<?php get_footer(); ?>
|
||||
|
|
@ -1,12 +1,16 @@
|
|||
<?php /* Template Name: page-romans */ ?>
|
||||
<?php get_header(); ?> <!-- ouvrir header,php -->
|
||||
<main>
|
||||
<main id="skip">
|
||||
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
|
||||
<?php kspace_cat_breadcrumb('Romans', 'book'); ?>
|
||||
|
||||
<div class="well">
|
||||
<?php the_content(); ?>
|
||||
</div>
|
||||
|
||||
<?php endwhile; ?>
|
||||
<?php endif; ?>
|
||||
<div class="previews-section">
|
||||
<div class="preview-grid">
|
||||
<?php $terms = get_terms(array('taxonomy' => 'roman','hide_empty' => false));?>
|
||||
|
||||
<?php if ( ! empty( $terms ) && is_array( $terms ) ) : ?>
|
||||
|
|
@ -36,20 +40,5 @@
|
|||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
<aside class="sidebar">
|
||||
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
|
||||
|
||||
<div class="card card-info">
|
||||
<div class="card-header"><i class="fa fa-folder-open" aria-hidden="true"></i> <?php the_title(); ?></div>
|
||||
<div class="card-body">
|
||||
<?php the_content(); ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php endwhile; ?>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php include(TEMPLATEPATH . '/components/sidebar-content.php'); ?>
|
||||
</aside>
|
||||
<?php get_sidebar(); ?>
|
||||
<?php get_footer(); ?>
|
||||
|
|
|
|||
2
page.php
2
page.php
|
|
@ -1,5 +1,5 @@
|
|||
<?php get_header(); ?> <!-- ouvrir header,php -->
|
||||
<main>
|
||||
<main id="skip">
|
||||
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
|
||||
|
||||
<article class="article-content" id="post-<?php the_ID(); ?>">
|
||||
|
|
|
|||
9
scss/_core.scss
Normal file
9
scss/_core.scss
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
/* 0. CORE
|
||||
** All the basic functions from the stylesheet
|
||||
*/
|
||||
|
||||
@import 'core/normalize';
|
||||
@import 'core/box-sizing';
|
||||
@import 'core/typography';
|
||||
@import 'core/containers';
|
||||
@import 'core/columns';
|
||||
|
|
@ -1,124 +1,12 @@
|
|||
/* --- 01. DEFINITIONS --- */
|
||||
// DEFINITIONS
|
||||
|
||||
/*
|
||||
* Les définitions globales de la stylesheet.
|
||||
* Elle permette de rapidement modifier le style globale de la fiche en modifiant les éléments centraux
|
||||
* D'autres définitions importantes sont visibles dans les autres parties de la fiche.
|
||||
*
|
||||
* Pour customiser les couleurs, voyez _palette.scss
|
||||
*/
|
||||
// Global definitions and variables of the stylesheet
|
||||
// With them, you can customize easily how the style look
|
||||
// Look at each component inside the definitions subfolder to customize the
|
||||
// styles
|
||||
|
||||
// A modifier pour customiser le style facilement :
|
||||
|
||||
$large-shadow: 0px 2px 10px rgba(0, 0, 0, 0);
|
||||
$narrow-shadow: 0px 2px 6px rgba(0, 0, 0, 0);
|
||||
$inset-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0);
|
||||
$inset-shadow-inverted: inset 0px 2px 0px rgba(0, 0, 0, 0);
|
||||
$inset-relief: inset 0px 2px 0px rgba(255, 255, 255, 0);
|
||||
|
||||
$baseline: 1.5;
|
||||
$fontsize: 4.75mm;
|
||||
|
||||
$lineheight: $baseline * 1rem;
|
||||
$lineheight_half: $lineheight/2;
|
||||
$lineheight_quarter: $lineheight/4;
|
||||
|
||||
$border-radius: 0px;
|
||||
$border-size: 0px;
|
||||
|
||||
$fontweight_big: 300;
|
||||
$fontweight_base: 400;
|
||||
$fontweight_bold: 600;
|
||||
$fontweight_hyper: 800;
|
||||
|
||||
$basefont: Open Sans, sans-serif;
|
||||
$titlefont: Amatic SC, sans-serif;
|
||||
|
||||
|
||||
// MIXINS RESPONSIVES
|
||||
|
||||
// Small tablets and large smartphones (landscape view)
|
||||
$screen-sm-min: 576px;
|
||||
|
||||
// Small tablets (portrait view)
|
||||
$screen-md-min: 768px;
|
||||
|
||||
// Tablets and small desktops
|
||||
$screen-lg-min: 992px;
|
||||
|
||||
// Large tablets and desktops
|
||||
$screen-xl-min: 1200px;
|
||||
|
||||
// Very large desktops
|
||||
$screen-xxl-min: 1600px;
|
||||
|
||||
|
||||
// Small devices
|
||||
@mixin sm {
|
||||
@media (min-width: #{$screen-sm-min}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Medium devices
|
||||
@mixin md {
|
||||
@media (min-width: #{$screen-md-min}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Large devices
|
||||
@mixin lg {
|
||||
@media (min-width: #{$screen-lg-min}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Extra large devices
|
||||
@mixin xl {
|
||||
@media (min-width: #{$screen-xl-min}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Extra large desktops
|
||||
@mixin xxl {
|
||||
@media (min-width: #{$screen-xxl-min}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Custom devices
|
||||
@mixin rwd($screen) {
|
||||
@media (min-width: $screen+'px' ) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// MIXINS AUTRES
|
||||
|
||||
@mixin borders() {
|
||||
border: $border-size solid rgba(0, 0, 0, 0.3)
|
||||
}
|
||||
|
||||
@mixin border-radius() {
|
||||
border-radius: $border-radius $border-radius $border-radius $border-radius;
|
||||
}
|
||||
|
||||
@mixin biseau($size) {
|
||||
position: relative;
|
||||
z-index:1;
|
||||
overflow: visible;
|
||||
|
||||
&:before {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
top:0;
|
||||
left:-$size/2;
|
||||
right:-$size/2;
|
||||
bottom:0;
|
||||
z-index:-1;
|
||||
transform: skewX(-15deg);
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
}
|
||||
@import 'definitions/palette';
|
||||
@import 'definitions/shadows';
|
||||
@import 'definitions/fonts';
|
||||
@import 'definitions/borders';
|
||||
@import 'definitions/sizing';
|
||||
|
|
|
|||
2
scss/_dep.scss
Normal file
2
scss/_dep.scss
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
// DEPENDECIES
|
||||
// Other style used as dependencies
|
||||
|
|
@ -5,75 +5,14 @@
|
|||
*
|
||||
*/
|
||||
|
||||
@import 'components/cards';
|
||||
|
||||
@import 'components/buttons';
|
||||
|
||||
@import 'components/previews';
|
||||
|
||||
.flex-that {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
strong.btn-fake {
|
||||
@include button($button_large);
|
||||
@include button-fullcontrol(transparent, transparent, rgba(0,0,0,1));
|
||||
}
|
||||
|
||||
a.article-nav-link-wrap {
|
||||
@include button($button_large);
|
||||
padding-left: $button_large;
|
||||
padding-right: $button_large;
|
||||
&:hover, &:active {
|
||||
@include borders();
|
||||
}
|
||||
|
||||
p &:last-child {
|
||||
margin-bottom:0;
|
||||
}
|
||||
@include button-color($color-info, $color-button-light);
|
||||
}
|
||||
|
||||
.pigimg, .mb {
|
||||
padding-bottom:1.5rem;
|
||||
}
|
||||
|
||||
.screen-reader-text {
|
||||
visibility: collapse;
|
||||
font-size:0;
|
||||
}
|
||||
|
||||
nav.pagination {
|
||||
padding-bottom:1.5rem;
|
||||
.nav-links {
|
||||
text-align: center;
|
||||
width:100%;
|
||||
}
|
||||
.page-numbers, .next, .prev {
|
||||
@include button($button_small);
|
||||
padding-left: $button_small;
|
||||
padding-right: $button_small;
|
||||
@include button-color($color-light2, $color-button-dark);
|
||||
|
||||
&.current {
|
||||
@include button-color($color-info, $color-button-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-select {
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
padding-bottom:1.5rem;
|
||||
|
||||
input, textarea {
|
||||
width:100%;
|
||||
background-color:$color-light;
|
||||
border-radius:0px;
|
||||
border: 1px solid rgba(0,0,0,0.2);
|
||||
padding:0.375rem;
|
||||
}
|
||||
}
|
||||
@import 'components/btn-groups';
|
||||
@import 'components/breadcrumb';
|
||||
@import 'components/pagination';
|
||||
@import 'components/cards';
|
||||
@import 'components/menus';
|
||||
@import 'components/toasts';
|
||||
@import 'components/tables';
|
||||
//@import 'components/previews';
|
||||
@import 'components/sidebar';
|
||||
@import 'components/input';
|
||||
|
|
|
|||
|
|
@ -1,123 +0,0 @@
|
|||
/* 2.1 - Font Face */
|
||||
|
||||
/* 2.1.1 - OpenSans
|
||||
|
||||
@font-face {
|
||||
font-family: 'OpenSans';
|
||||
src: url('fonts/OpenSans-Light-webfont.eot');
|
||||
src: url('fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/OpenSans-Light-webfont.woff2') format('woff2'),
|
||||
url('fonts/OpenSans-Light-webfont.woff') format('woff'),
|
||||
url('fonts/OpenSans-Light-webfont.ttf') format('truetype'),
|
||||
url('fonts/OpenSans-Light-webfont.svg#open_sansbold') format('svg');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'OpenSans';
|
||||
src: url('fonts/OpenSans-LightItalic-webfont.eot');
|
||||
src: url('fonts/OpenSans-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/OpenSans-LightItalic-webfont.woff2') format('woff2'),
|
||||
url('fonts/OpenSans-LightItalic-webfont.woff') format('woff'),
|
||||
url('fonts/OpenSans-LightItalic-webfont.ttf') format('truetype'),
|
||||
url('fonts/OpenSans-LightItalic-webfont.svg#open_sansbold') format('svg');
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'OpenSans';
|
||||
src: url('fonts/OpenSans-Regular-webfont.eot');
|
||||
src: url('fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/OpenSans-Regular-webfont.woff2') format('woff2'),
|
||||
url('fonts/OpenSans-Regular-webfont.woff') format('woff'),
|
||||
url('fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
|
||||
url('fonts/OpenSans-Regular-webfont.svg#open_sansbold') format('svg');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'OpenSans';
|
||||
src: url('fonts/OpenSans-Italic-webfont.eot');
|
||||
src: url('fonts/OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/OpenSans-Italic-webfont.woff2') format('woff2'),
|
||||
url('fonts/OpenSans-Italic-webfont.woff') format('woff'),
|
||||
url('fonts/OpenSans-Italic-webfont.ttf') format('truetype'),
|
||||
url('fonts/OpenSans-Italic-webfont.svg#open_sansbold') format('svg');
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'OpenSans';
|
||||
src: url('fonts/OpenSans-Semibold-webfont.eot');
|
||||
src: url('fonts/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/OpenSans-Semibold-webfont.woff2') format('woff2'),
|
||||
url('fonts/OpenSans-Semibold-webfont.woff') format('woff'),
|
||||
url('fonts/OpenSans-Semibold-webfont.ttf') format('truetype'),
|
||||
url('fonts/OpenSans-Semibold-webfont.svg#open_sansbold') format('svg');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'OpenSans';
|
||||
src: url('fonts/OpenSans-SemiboldItalic-webfont.eot');
|
||||
src: url('fonts/OpenSans-SemiboldItalic-webfont.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/OpenSans-SemiboldItalic-webfont.woff2') format('woff2'),
|
||||
url('fonts/OpenSans-SemiboldItalic-webfont.woff') format('woff'),
|
||||
url('fonts/OpenSans-SemiboldItalic-webfont.ttf') format('truetype'),
|
||||
url('fonts/OpenSans-SemiboldItalic-webfont.svg#open_sansbold') format('svg');
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'OpenSans';
|
||||
src: url('fonts/OpenSans-Bold-webfont.eot');
|
||||
src: url('fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/OpenSans-Bold-webfont.woff2') format('woff2'),
|
||||
url('fonts/OpenSans-Bold-webfont.woff') format('woff'),
|
||||
url('fonts/OpenSans-Bold-webfont.ttf') format('truetype'),
|
||||
url('fonts/OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'OpenSans';
|
||||
src: url('fonts/OpenSans-BoldItalic-webfont.eot');
|
||||
src: url('fonts/OpenSans-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/OpenSans-BoldItalic-webfont.woff2') format('woff2'),
|
||||
url('fonts/OpenSans-BoldItalic-webfont.woff') format('woff'),
|
||||
url('fonts/OpenSans-BoldItalic-webfont.ttf') format('truetype'),
|
||||
url('fonts/OpenSans-BoldItalic-webfont.svg#open_sansbold') format('svg');
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'OpenSans';
|
||||
src: url('fonts/OpenSans-ExtraBold-webfont.eot');
|
||||
src: url('fonts/OpenSans-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/OpenSans-ExtraBold-webfont.woff2') format('woff2'),
|
||||
url('fonts/OpenSans-ExtraBold-webfont.woff') format('woff'),
|
||||
url('fonts/OpenSans-ExtraBold-webfont.ttf') format('truetype'),
|
||||
url('fonts/OpenSans-ExtraBold-webfont.svg#open_sansbold') format('svg');
|
||||
font-weight: 800;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'OpenSans';
|
||||
src: url('fonts/OpenSans-ExtraBoldItalic-webfont.eot');
|
||||
src: url('fonts/OpenSans-ExtraBoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/OpenSans-ExtraBoldItalic-webfont.woff2') format('woff2'),
|
||||
url('fonts/OpenSans-ExtraBoldItalic-webfont.woff') format('woff'),
|
||||
url('fonts/OpenSans-ExtraBoldItalic-webfont.ttf') format('truetype'),
|
||||
url('fonts/OpenSans-ExtraBoldItalic-webfont.svg#open_sansbold') format('svg');
|
||||
font-weight: 800;
|
||||
font-style: italic;
|
||||
}*/
|
||||
|
|
@ -1,295 +1,9 @@
|
|||
/* --- 03. GLOBAL STYLING --- */
|
||||
/* 4 - Custom styling
|
||||
* Styles that are custom to this particular theme
|
||||
**/
|
||||
|
||||
/*
|
||||
* Les styles "globaux" touchant toute la page.
|
||||
*
|
||||
*/
|
||||
|
||||
@mixin li-no-margin() {
|
||||
li {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin container-big() {
|
||||
padding-left: $lineheight;
|
||||
padding-right: $lineheight;
|
||||
max-width: 1600px;
|
||||
margin:auto;
|
||||
}
|
||||
|
||||
.no-pills {
|
||||
list-style:none;
|
||||
}
|
||||
|
||||
.align {
|
||||
&-center {text-align: center;}
|
||||
&-left {text-align: left;}
|
||||
&-right {text-align: right;}
|
||||
}
|
||||
|
||||
/* ------------------ HEADERS ------------------- */
|
||||
|
||||
#page-header {
|
||||
background: $color-skyblue url('img/background.png') center bottom repeat-x;
|
||||
border-top: 6px solid $color-dark2;
|
||||
padding-top: .75rem;
|
||||
padding-bottom:1.5rem;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
border-style:none !important;
|
||||
color: $color-light;
|
||||
font-weight: $fontweight_hyper;
|
||||
font-size:5.4em;
|
||||
font-style:oblique;
|
||||
padding-bottom:0px;
|
||||
line-height: 1.5em;
|
||||
max-width: 1600px;
|
||||
margin: auto;
|
||||
|
||||
img {
|
||||
width: 600px;
|
||||
height: auto;
|
||||
margin-top:0rem;
|
||||
}
|
||||
|
||||
a, a:visited, a:hover {
|
||||
background-color:transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display:flex;
|
||||
justify-content: space-between;
|
||||
margin:auto;
|
||||
padding:0;
|
||||
max-width: 1600px;
|
||||
z-index:2;
|
||||
|
||||
ul {
|
||||
display:flex;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
li {
|
||||
list-style: none;
|
||||
margin:0;
|
||||
position:relative;
|
||||
z-index: 2;
|
||||
ul {
|
||||
display:none;
|
||||
position:absolute;
|
||||
left:-0.75rem;
|
||||
background-color:$color-light2;
|
||||
padding: 1.5rem;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
ul {
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-navbar {
|
||||
margin:0rem;
|
||||
margin-left:0.75rem;
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar {
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
padding: 0.75rem;
|
||||
color: $color-light;
|
||||
a {
|
||||
color: $color-light;
|
||||
}
|
||||
@include li-no-margin();
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
box-shadow: $narrow-shadow, $inset-shadow;
|
||||
}
|
||||
/* ------------------ CONTAINERS ------------------- */
|
||||
|
||||
.container-big {
|
||||
@include container-big();
|
||||
}
|
||||
|
||||
.container-blog {
|
||||
@include container-big();
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto;
|
||||
row-gap: $lineheight;
|
||||
column-gap: 3rem;
|
||||
grid-template-areas:
|
||||
"main"
|
||||
"side";
|
||||
|
||||
@include lg() {
|
||||
grid-template-columns: auto 360px;
|
||||
grid-template-areas: "main side";
|
||||
}
|
||||
}
|
||||
|
||||
.mainpane {
|
||||
grid-area: main;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
grid-area: side;
|
||||
}
|
||||
|
||||
ul.tag-list {
|
||||
display:flex;
|
||||
padding-bottom:0;
|
||||
overflow: hidden;
|
||||
height:auto;
|
||||
flex-wrap: wrap;
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
margin:3px;
|
||||
}
|
||||
}
|
||||
|
||||
.container-preview {
|
||||
@include container-big();
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto;
|
||||
row-gap: $lineheight;
|
||||
column-gap: 3rem;
|
||||
grid-template-areas:
|
||||
"main"
|
||||
"side";
|
||||
|
||||
@include lg() {
|
||||
grid-template-columns: 360px auto;
|
||||
grid-template-areas: "side main";
|
||||
}
|
||||
}
|
||||
|
||||
.container-onecolumn {
|
||||
max-width:1280px;
|
||||
margin: auto;
|
||||
padding-bottom: $lineheight;
|
||||
}
|
||||
|
||||
.container-personnage {
|
||||
@include container-big();
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
grid-template-rows: auto;
|
||||
row-gap: 3rem;
|
||||
column-gap: 3rem;
|
||||
|
||||
grid-template-areas:
|
||||
"nomp nomp nomp nomp nomp nomp"
|
||||
"info info info info meta meta"
|
||||
"goss goss look look look look"
|
||||
"aime aime aime dete dete dete"
|
||||
"hist hist hist hist hist hist";
|
||||
|
||||
.card {
|
||||
margin:0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
padding:0;
|
||||
}
|
||||
}
|
||||
|
||||
.personnage {
|
||||
&-nomp {grid-area: nomp;}
|
||||
&-info {grid-area: info;}
|
||||
&-meta {grid-area: meta;}
|
||||
&-goss {grid-area: goss;}
|
||||
&-look {grid-area: look;}
|
||||
&-aime {grid-area: aime;}
|
||||
&-dete {grid-area: dete;}
|
||||
&-hist {grid-area: hist;}
|
||||
}
|
||||
|
||||
/* ------------------ PAGE ------------------- */
|
||||
|
||||
#wrapper {
|
||||
background-color: $color-light;
|
||||
}
|
||||
|
||||
/* ------------------ FOOTER ------------------- */
|
||||
|
||||
$color-footer-back: $color-dark2;
|
||||
$color-footer-text: $color-light;
|
||||
|
||||
body {
|
||||
// On colorise le background de la page complete de la même
|
||||
// couleur que le fond du footer.
|
||||
background-color: $color-footer-back;
|
||||
}
|
||||
|
||||
footer {
|
||||
@include angled-edge('outside top', 'upper left', $color-footer-back, 32);
|
||||
color: $color-footer-text;
|
||||
padding-top:1.5rem;
|
||||
font-size: 0.8rem!important;
|
||||
padding-bottom:1.5rem;
|
||||
|
||||
.footer-collumns {
|
||||
@include container-big();
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto;
|
||||
grid-gap: $lineheight;
|
||||
padding-bottom: $lineheight;
|
||||
|
||||
@include lg() {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
a, a:visited {
|
||||
&:hover, &:active, &:visited {
|
||||
color: $color-light;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
/* social media */
|
||||
|
||||
ul.social {
|
||||
font-size:1.5em;
|
||||
padding-bottom:1.5em;
|
||||
margin:auto;
|
||||
text-align:center;
|
||||
li {
|
||||
margin:0;
|
||||
list-style: none;
|
||||
display: inline;
|
||||
a, a:visited {
|
||||
color: $color-footer-back;
|
||||
background-color: $color-footer-text;
|
||||
padding:0.3em;
|
||||
padding-left:0.36em;
|
||||
padding-right:0.36em;
|
||||
vertical-align:middle;
|
||||
border-radius:100%;
|
||||
&:hover {
|
||||
color:$color-footer-text;
|
||||
background-color: $color-footer-back;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@import 'custom/global';
|
||||
@import 'components/previews';
|
||||
@import 'custom/featured';
|
||||
@import 'custom/article';
|
||||
@import 'custom/mobile';
|
||||
10
scss/_mixins.scss
Normal file
10
scss/_mixins.scss
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
// MIXINS
|
||||
// Include every mixins files
|
||||
|
||||
@import 'mixins/colors';
|
||||
@import 'mixins/responsive';
|
||||
@import 'mixins/borders';
|
||||
@import 'mixins/shape';
|
||||
@import 'mixins/btns';
|
||||
@import 'mixins/panels';
|
||||
@import 'mixins/li';
|
||||
|
|
@ -1,115 +0,0 @@
|
|||
/* --- 00. PALETTE --- */
|
||||
|
||||
/*
|
||||
* Les définitions globales des couleurs du theme.
|
||||
*
|
||||
* Elle permettent de définir rapidement à la fois les couleurs
|
||||
* de base qui seront utilisée pour tout le theme, mais
|
||||
* également celles spécifiques pour certains sujets (liens, texte)
|
||||
*
|
||||
*/
|
||||
|
||||
// Couleurs de base du theme :
|
||||
|
||||
$color-blue: #268bd2;
|
||||
$color-violet: #d33682;
|
||||
$color-red: #dc322f;
|
||||
$color-orange: #cb4b16;
|
||||
$color-green: #859900;
|
||||
$color-skyblue: #2aa198;
|
||||
$color-dark: #002b36;
|
||||
$color-light: #fdf6e3;
|
||||
$color-yellow: #b58900;
|
||||
$color-grey: #586e75;
|
||||
|
||||
$color-dark2: #073642;
|
||||
$color-light2: #eee8d5;
|
||||
|
||||
$color-gray2: #657b83;
|
||||
$color-gray3: #839496;
|
||||
$color-gray4: #93a1a1;
|
||||
|
||||
$color-primary: $color-violet;
|
||||
$color-secondary: $color-skyblue;
|
||||
|
||||
$color-link: $color-skyblue;
|
||||
$color-selection: $color-skyblue;
|
||||
$color-mark: $color-yellow;
|
||||
|
||||
$color-font: $color-dark2;
|
||||
$color-warning: $color-orange;
|
||||
$color-danger: $color-red;
|
||||
$color-info: $color-skyblue;
|
||||
$color-success: $color-green;
|
||||
|
||||
@mixin background-color($background-color, $text-color) {
|
||||
background-color: $background-color!important;
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
@mixin text-color($text-color) {
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
// Colorize important elements
|
||||
|
||||
::selection {
|
||||
@include background-color($color-selection, $color-light);
|
||||
}
|
||||
::-moz-selection {
|
||||
@include background-color($color-selection, $color-light);
|
||||
}
|
||||
|
||||
mark {
|
||||
background-color: lighten($color-mark, 30%)
|
||||
}
|
||||
|
||||
blockquote, pre {
|
||||
border-color: $color-primary;
|
||||
}
|
||||
|
||||
// Add generic colorizations classes
|
||||
|
||||
/* BACKGROUNDS */
|
||||
|
||||
.bg {
|
||||
&-blue { @include background-color($color-blue, $color-light); }
|
||||
&-violet { @include background-color($color-violet, $color-light); }
|
||||
&-red { @include background-color($color-red, $color-light); }
|
||||
&-orange { @include background-color($color-orange, $color-light); }
|
||||
&-green { @include background-color($color-green, $color-light); }
|
||||
&-skyblue { @include background-color($color-skyblue, $color-light); }
|
||||
&-dark { @include background-color($color-dark, $color-light); }
|
||||
&-light { @include background-color($color-light, $color-dark); }
|
||||
&-yellow { @include background-color($color-yellow, $color-light); }
|
||||
&-grey { @include background-color($color-grey, $color-light); }
|
||||
|
||||
&-primary { @include background-color($color-primary, $color-light); }
|
||||
&-secondary { @include background-color($color-secondary, $color-light); }
|
||||
&-warning { @include background-color($color-warning, $color-light); }
|
||||
&-danger { @include background-color($color-danger, $color-light); }
|
||||
&-info { @include background-color($color-info, $color-light); }
|
||||
&-success { @include background-color($color-success, $color-light); }
|
||||
}
|
||||
|
||||
/* TEXT */
|
||||
|
||||
.text {
|
||||
&-blue { @include text-color($color-blue); }
|
||||
&-violet { @include text-color($color-violet); }
|
||||
&-red { @include text-color($color-red); }
|
||||
&-orange { @include text-color($color-orange); }
|
||||
&-green { @include text-color($color-green); }
|
||||
&-skyblue { @include text-color($color-skyblue); }
|
||||
&-dark { @include text-color($color-dark); }
|
||||
&-light { @include text-color($color-light); }
|
||||
&-yellow { @include text-color($color-yellow); }
|
||||
&-grey { @include text-color($color-grey); }
|
||||
|
||||
&-primary { @include text-color($color-primary); }
|
||||
&-secondary { @include text-color($color-secondary); }
|
||||
&-warning { @include text-color($color-warning); }
|
||||
&-danger { @include text-color($color-danger); }
|
||||
&-info { @include text-color($color-info); }
|
||||
&-success { @include text-color($color-success); }
|
||||
}
|
||||
|
|
@ -1,335 +0,0 @@
|
|||
/*
|
||||
* 2 - Typography ( _typography.scss )
|
||||
*
|
||||
* This part of the (s)css handle everything related to the typography
|
||||
* like paragraphs, blockquote, etc.
|
||||
*
|
||||
*/
|
||||
|
||||
@import 'font-face';
|
||||
|
||||
/* 2.2 - Global Typography */
|
||||
|
||||
@mixin paragraph() {
|
||||
padding:0;
|
||||
padding-bottom: $lineheight;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: $basefont;
|
||||
text-align: left;
|
||||
font-size: $fontsize;
|
||||
line-height: $lineheight;
|
||||
color: $color-font;
|
||||
font-weight: $fontweight_base;
|
||||
}
|
||||
|
||||
.night-mode {
|
||||
color: $color-light2;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: $fontweight_bold;
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: italic;
|
||||
font-weight: $fontweight_base;
|
||||
}
|
||||
|
||||
|
||||
a, a:visited {
|
||||
color: $color-light;
|
||||
background-color: $color-link;
|
||||
text-decoration:none;
|
||||
padding:0.05rem;
|
||||
padding-left:0.25rem;
|
||||
padding-right:0.25rem;
|
||||
border-radius:0.1rem;
|
||||
&:hover, &:active, &:focus {
|
||||
color: $color-link;
|
||||
background-color: transparent;
|
||||
text-decoration:none;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
@include paragraph();
|
||||
.card-body > &:last-child, &.p-img {
|
||||
padding-bottom:0;
|
||||
}
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
@include paragraph();
|
||||
list-style: disc;
|
||||
ul, ol {
|
||||
padding-bottom:0;
|
||||
margin:0;
|
||||
}
|
||||
li {
|
||||
margin:0;
|
||||
margin-left: $lineheight;
|
||||
line-height: $lineheight;
|
||||
}
|
||||
}
|
||||
|
||||
::selection { background: $color-selection; color: $color-light; }
|
||||
::-moz-selection { background: $color-selection; color: $color-light; }
|
||||
|
||||
/* 2.2 - Text Wrapper */
|
||||
|
||||
.container-article, .container-typographic {
|
||||
max-width: 800px;
|
||||
margin:auto;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.container-typographic {
|
||||
p {
|
||||
padding:0;
|
||||
margin:0;
|
||||
text-indent: 3rem;
|
||||
}
|
||||
|
||||
p, em, p em {
|
||||
font-weight:$fontweight_base;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.article-thumbnail {
|
||||
padding-bottom: 1em;
|
||||
text-align: center;
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
|
||||
}
|
||||
}
|
||||
.article-excerpt {
|
||||
padding: 0.5em 0.5em 0.5em 0.5em;
|
||||
font-style: italic;
|
||||
}
|
||||
.article-author {
|
||||
margin:0;
|
||||
padding:0;
|
||||
.card-meta {
|
||||
margin:0;
|
||||
}
|
||||
}
|
||||
|
||||
.bypass-flex-fontsize {
|
||||
line-height: $lineheight;
|
||||
}
|
||||
}
|
||||
|
||||
article.maintext {
|
||||
padding-bottom: $lineheight;
|
||||
}
|
||||
|
||||
.wp-block-image {
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
/* 2.3 - Titles */
|
||||
|
||||
@mixin newTitle($font, $size, $weight) {
|
||||
$lineNumber: ceil($size / 1.5);
|
||||
font-family: $font;
|
||||
font-size: $size * 1rem;
|
||||
line-height: $lineNumber * $lineheight;
|
||||
padding: 0;
|
||||
padding-bottom: $lineheight;
|
||||
font-weight: $weight;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6, h7 {
|
||||
font-family: $basefont;
|
||||
text-align: left;
|
||||
font-size: 1em;
|
||||
padding:0;
|
||||
margin:0;
|
||||
font-weight: $fontweight_base;
|
||||
|
||||
&.page-title {
|
||||
color: $color-primary;
|
||||
|
||||
i {
|
||||
font-size: 0.55em;
|
||||
position: relative;
|
||||
top: -0.175em;
|
||||
}
|
||||
|
||||
&-flex {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
& > span, & > i, & > a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
& > a {
|
||||
color: $color-primary;
|
||||
&:hover, &:focus, &:active {
|
||||
color: darken($color-primary, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
//@include title(3.33em, 1.2em, 0.0em, 0.2em, 200);
|
||||
@include newTitle($titlefont, 3.815, $fontweight_big);
|
||||
color: $color-primary;
|
||||
}
|
||||
|
||||
h2 {
|
||||
//@include title(2.725em, 1.125em, 0em, 0.5625em, 200);
|
||||
@include newTitle($basefont, 2.441, $fontweight_big);
|
||||
}
|
||||
|
||||
h3 {
|
||||
@include newTitle($basefont, 1.953, $fontweight_bold);
|
||||
}
|
||||
|
||||
h4 {
|
||||
@include newTitle($basefont, 1.563, $fontweight_hyper);
|
||||
}
|
||||
|
||||
h5 {
|
||||
@include newTitle($basefont, 1.25, $fontweight_bold);
|
||||
}
|
||||
|
||||
h6 {
|
||||
@include newTitle($basefont, 1, $fontweight_hyper);
|
||||
}
|
||||
|
||||
/* 2.4 - hr */
|
||||
|
||||
hr {
|
||||
border-top: 0px;
|
||||
border-left: 0px;
|
||||
border-right: 0px;
|
||||
border-bottom: 1px;
|
||||
border-color: rgba(1,1,1,0.15);
|
||||
border-style: solid;
|
||||
margin: 1.5em;
|
||||
}
|
||||
|
||||
/* 2.5 - Wells and quotes */
|
||||
|
||||
@mixin well() {
|
||||
border-width: 0 0 0 0em;
|
||||
border-style: none;
|
||||
border-radius: 0px;
|
||||
|
||||
margin: 0 0 $lineheight 0;
|
||||
padding: $lineheight 1rem $lineheight 1rem;
|
||||
|
||||
max-width: 100%;
|
||||
background-color: $color-light2;
|
||||
font-style: italic;
|
||||
color: $color-dark2;
|
||||
}
|
||||
|
||||
blockquote, .quote {
|
||||
@include well();
|
||||
&:before {
|
||||
content:"";
|
||||
}
|
||||
}
|
||||
|
||||
.well, pre, .pre, .well-pre {
|
||||
@include well();
|
||||
}
|
||||
|
||||
|
||||
|
||||
code {
|
||||
background:transparent;
|
||||
color: $color-red;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
|
||||
/* 2.6 - Special styling */
|
||||
|
||||
mark {
|
||||
border-radius: 0.2em;
|
||||
padding:0 0.2em 0 0.2em;
|
||||
|
||||
background-color: lighten($color-mark, 30%);
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.night-mode mark {
|
||||
background-color: $color-primary;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-style: italic;
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Table elements */
|
||||
|
||||
@mixin table-color($text-color) {
|
||||
th {
|
||||
color: $text-color;
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table, th, td {
|
||||
border: 0;
|
||||
padding:0px;
|
||||
margin:0px;
|
||||
}
|
||||
|
||||
th, td {
|
||||
vertical-align:center;
|
||||
padding-top: 0.325em;
|
||||
padding-bottom: 0.325em;
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: $fontweight_hyper;
|
||||
}
|
||||
|
||||
.table {
|
||||
&-blue { @include table-color($color-blue); }
|
||||
&-violet { @include table-color($color-violet); }
|
||||
&-red { @include table-color($color-red); }
|
||||
&-orange { @include table-color($color-orange); }
|
||||
&-green { @include table-color($color-green); }
|
||||
&-skyblue { @include table-color($color-skyblue); }
|
||||
&-dark { @include table-color($color-dark); }
|
||||
&-light { @include table-color($color-light); }
|
||||
&-yellow { @include table-color($color-yellow); }
|
||||
&-grey { @include table-color($color-grey); }
|
||||
|
||||
&-primary { @include table-color($color-primary); }
|
||||
&-secondary { @include table-color($color-secondary); }
|
||||
&-warning { @include table-color($color-warning); }
|
||||
&-danger { @include table-color($color-danger); }
|
||||
&-info { @include table-color($color-info); }
|
||||
&-success { @include table-color($color-success); }
|
||||
}
|
||||
|
||||
.text-maj {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
12
scss/_utils.scss
Normal file
12
scss/_utils.scss
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
/* 1. Utils
|
||||
** All the utilities class of the stylesheet
|
||||
*/
|
||||
|
||||
@import 'utils/a11y';
|
||||
@import 'utils/align';
|
||||
@import 'utils/borders';
|
||||
@import 'utils/colorize';
|
||||
@import 'utils/lists';
|
||||
@import 'utils/sizing';
|
||||
@import 'utils/flex';
|
||||
@import 'utils/display';
|
||||
7
scss/components/_badges.scss
Normal file
7
scss/components/_badges.scss
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
.badge {
|
||||
@include button(0rem);
|
||||
line-height: 1.5em;
|
||||
padding-left: $button_small;
|
||||
padding-right: $button_small;
|
||||
text-decoration:none!important;
|
||||
}
|
||||
44
scss/components/_breadcrumb.scss
Normal file
44
scss/components/_breadcrumb.scss
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
/* ------------------ BREADCRUMB ------------------- */
|
||||
|
||||
ul.breadcrumb, ol.breadcrumb, .breadcrumb {
|
||||
padding-top: 0em;
|
||||
background-color:transparent;
|
||||
margin: 0;
|
||||
padding-bottom:$lineheight;
|
||||
@include li-flex();
|
||||
}
|
||||
|
||||
.breadcrumb li.breadcrumb-item {
|
||||
padding:0;
|
||||
margin:0;
|
||||
&:not(:first-child) {
|
||||
margin: 0 0 0 1rem !important;
|
||||
}
|
||||
&:before {
|
||||
display:none;
|
||||
}
|
||||
|
||||
a, & > span {
|
||||
display:inline-block;
|
||||
@include button($button-large);
|
||||
@include button-fullcontrol($color-background-alt, accentuate($color-background-alt), get-color("dark2"));
|
||||
margin:0 $button-group-margin 0 $button-group-margin;
|
||||
outline-color: accentuate($color-background-alt)!important;
|
||||
text-decoration: none;
|
||||
|
||||
&.active {
|
||||
@include button-fullcontrol($color-secondary, $color-secondary, $color-font-light);
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:first-child) a, &:not(:first-child) > span {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius:0;
|
||||
}
|
||||
|
||||
&:not(:last-child) a, &:not(:last-child) > span {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius:0;
|
||||
}
|
||||
|
||||
}
|
||||
26
scss/components/_btn-groups.scss
Normal file
26
scss/components/_btn-groups.scss
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
// BUTTONS GROUPS
|
||||
|
||||
.btn-toolbar {
|
||||
padding: 0 $button-large;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
& > .btn {
|
||||
@include border-radius($btn-radius);
|
||||
margin:0 $button-group-margin 0 $button-group-margin!important;
|
||||
}
|
||||
|
||||
&:not(:first-child) > .btn {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius:0;
|
||||
&:before {
|
||||
content: " "!important;
|
||||
border-left:1px solid rgba(0,0,0,0.2);
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:last-child) > .btn {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius:0;
|
||||
}
|
||||
}
|
||||
|
|
@ -4,72 +4,6 @@
|
|||
*
|
||||
*/
|
||||
|
||||
$color-button-light: $color-light;
|
||||
$color-button-dark: $color-dark;
|
||||
|
||||
$button_large: $lineheight;
|
||||
$button_small: $lineheight_quarter;
|
||||
|
||||
@mixin button($size) {
|
||||
@include button-nobiseau($size);
|
||||
@include biseau($size);
|
||||
}
|
||||
|
||||
@mixin button-nobiseau($size) {
|
||||
padding: $size;
|
||||
padding-top: $size/3;
|
||||
padding-bottom: $size/3;
|
||||
margin:$size/2;
|
||||
margin-top: $size/3;
|
||||
margin-bottom: $lineheight;
|
||||
//font-size: 4.75mm;
|
||||
line-height:$lineheight;
|
||||
height:auto;
|
||||
@include borders();
|
||||
@include border-radius();
|
||||
font-weight: $fontweight_base;
|
||||
|
||||
background-color:transparent;
|
||||
|
||||
&:hover, &:active, &:focus, a:hover > &, a:active > &, a:focus > & {
|
||||
text-decoration:none;
|
||||
background-color:transparent;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
box-shadow: $narrow-shadow, $inset-shadow, 0px 0px 0px 2px rgba(0, 0, 0, 0);
|
||||
&:before {
|
||||
box-shadow: $narrow-shadow, $inset-shadow, 0px 0px 0px 2px rgba(0, 0, 0, 0.3);
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin colorize-button($background-color, $text-color) {
|
||||
//@include background-color($background-color, $text-color);
|
||||
color: $text-color;
|
||||
&:before {
|
||||
background-color: $background-color;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin button-fullcontrol($background-color, $hover-color, $text-color) {
|
||||
@include colorize-button($background-color, $text-color);
|
||||
&:visited {
|
||||
@include colorize-button($background-color, $text-color);
|
||||
}
|
||||
&, &:visited, &:not(.disabled):not(:disabled) {
|
||||
&:hover, &:active, &:focus, a:hover > &, a:active > &, a:focus > & {
|
||||
@include colorize-button($hover-color, lighten($text-color, 5%));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin button-color($background-color, $text-color) {
|
||||
@include button-fullcontrol($background-color, darken($background-color, 7.5%), $text-color)
|
||||
}
|
||||
|
||||
.btn {
|
||||
@include button($button_large);
|
||||
&:hover, &:active {
|
||||
|
|
@ -81,120 +15,22 @@ $button_small: $lineheight_quarter;
|
|||
}
|
||||
}
|
||||
|
||||
.btn-small {
|
||||
.btn-small, .badge {
|
||||
@include button($button_small);
|
||||
padding-left: $button_small;
|
||||
padding-right: $button_small;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
.menu-label {
|
||||
@include biseau($button_small);
|
||||
padding-left: $button_small;
|
||||
padding-right: $button_small;
|
||||
}
|
||||
|
||||
// NAVBAR SPECIAL BUTTONS
|
||||
|
||||
.btn-navbar {
|
||||
@include button-fullcontrol(transparent, rgba(0,0,0,0.1), $color-light);
|
||||
padding-left: $button_small;
|
||||
padding-right: $button_small;
|
||||
}
|
||||
|
||||
.btn-readmore {
|
||||
@include button-fullcontrol(transparent, rgba(0,0,0,0.05), $color-primary);
|
||||
}
|
||||
|
||||
// BUTTONS GROUPS
|
||||
|
||||
$grouped-test: $button-large/1.5 - 0.05rem ;
|
||||
|
||||
.btn-toolbar {
|
||||
padding: 0 $button-large;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
padding: 0px;
|
||||
background-color:transparent;
|
||||
margin-bottom: 1.33em;
|
||||
}
|
||||
|
||||
.btn-group .btn {
|
||||
margin:0 $grouped-test 0 $grouped-test!important;
|
||||
}
|
||||
|
||||
/* ------------------ BREADCRUMB ------------------- */
|
||||
|
||||
ul.breadcrumb, ol.breadcrumb, .breadcrumb {
|
||||
padding-top: 0em;
|
||||
background-color:transparent;
|
||||
margin: 0;
|
||||
padding-bottom:2rem;
|
||||
}
|
||||
|
||||
.breadcrumb li.breadcrumb-item {
|
||||
padding:0;
|
||||
&:before {
|
||||
display:none;
|
||||
}
|
||||
|
||||
a, & > span {
|
||||
display:inline-block;
|
||||
@include button($button-large);
|
||||
@include button-fullcontrol($color-light2, darken($color-light2, 5%), $color-dark2);
|
||||
margin:0 $button-large/2.5 0 $button-large/2.5;
|
||||
|
||||
&:before {
|
||||
content: " "!important;
|
||||
border-right:1px solid rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
&.active {
|
||||
@include button-fullcontrol($color-primary, $color-primary, $color-light);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
// COLORIZE BUTTONS
|
||||
|
||||
.btn, a.btn, .badge, .chip, a.chip, a.badge, .label, a.label, label.label {
|
||||
&-blue { @include button-color($color-blue, $color-button-light); }
|
||||
&-violet { @include button-color($color-violet, $color-button-light); }
|
||||
&-red { @include button-color($color-red, $color-button-light); }
|
||||
&-orange { @include button-color($color-orange, $color-button-light); }
|
||||
&-green { @include button-color($color-green, $color-button-light); }
|
||||
&-skyblue { @include button-color($color-skyblue, $color-button-light); }
|
||||
&-dark { @include button-color($color-dark, $color-button-light); }
|
||||
&-light { @include button-color($color-light2, $color-button-dark); }
|
||||
&-yellow { @include button-color($color-yellow, $color-button-light); }
|
||||
&-grey { @include button-color($color-grey, $color-button-light); }
|
||||
|
||||
&-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);}
|
||||
strong.btn-fake {
|
||||
@include button($button_large);
|
||||
@include button-fullcontrol(transparent, transparent, rgba(0,0,0,1));
|
||||
}
|
||||
|
||||
/* ------------------ PARTAGE RESEAUX SOCIAUX ------------------- */
|
||||
|
||||
.share-buttons {
|
||||
margin-top: $lineheight;
|
||||
padding-bottom: $lineheight;
|
||||
}
|
||||
|
||||
.reagir {
|
||||
text-align:right;
|
||||
}
|
||||
.btn, a.btn {
|
||||
&-facebook {@include button-color(#3B5998, $color-button-light);}
|
||||
&-twitter {@include button-color(#55ACEE, $color-button-light);}
|
||||
&-googleplus {@include button-color(#d34836, $color-button-light);}
|
||||
&-diaspora {@include button-color(#313739, $color-button-light);}
|
||||
&-mastodon {@include button-color(#282c37, $color-button-light);}
|
||||
.btn-readmore, .btn-link {
|
||||
@include button-fullcontrol(transparent, accentuate($color-background-alt), $color-primary);
|
||||
@include prefer-no-borders();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,147 +5,25 @@
|
|||
*
|
||||
*/
|
||||
|
||||
$card-bigpad: $lineheight;
|
||||
$card-smallpad: $lineheight_half;
|
||||
$card-bigpad: $lineheight_rel * 1.25;
|
||||
$card-smallpad: $lineheight_rel / 4;
|
||||
|
||||
@mixin card($size) {
|
||||
@include border-radius();
|
||||
background-color: $color-light2;
|
||||
box-shadow: $large-shadow;
|
||||
border: none;
|
||||
margin:0;
|
||||
margin-bottom:$lineheight;
|
||||
padding: $size;
|
||||
}
|
||||
|
||||
@mixin card-header($size) {
|
||||
font-size:1.1em;
|
||||
font-weight: $fontweight_big;
|
||||
border-radius: 0;
|
||||
padding: $size/2;
|
||||
padding-left:0;
|
||||
padding-right:0;
|
||||
padding-bottom: $size/2!important;
|
||||
margin-bottom:$lineheight_half;
|
||||
line-height:$lineheight;
|
||||
white-space: nowrap;
|
||||
|
||||
position:relative;
|
||||
left: -$size*1.25;
|
||||
|
||||
width:95%;
|
||||
|
||||
@include biseau($size);
|
||||
|
||||
h1, h2, h3, h4, h5, h6, h7, h8, h9, h10 {
|
||||
font-family:$basefont;
|
||||
font-size:1rem;
|
||||
padding:0px;
|
||||
margin:0px;
|
||||
color:$color-light;
|
||||
font-weight: $fontweight_big;
|
||||
line-height:$lineheight;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin card-color($background-color, $text-color) {
|
||||
& .card-header, & .menu-header {
|
||||
@include background-color($background-color, $text-color);
|
||||
&:before {
|
||||
@include background-color($background-color, $text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card, .menu {
|
||||
@include card($card-bigpad);
|
||||
.card {
|
||||
@include panel($card-bigpad);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color:$color-font;
|
||||
|
||||
&-body {
|
||||
padding:0!important;
|
||||
margin:0!important;
|
||||
}
|
||||
|
||||
&-header {
|
||||
@include card-header($card-bigpad);
|
||||
@include panel-header($card-bigpad);
|
||||
.fa {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
/* Menu handling */
|
||||
|
||||
&-menu {
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
|
||||
ul {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
padding:0;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
.menu-element, .menu-element-link, li a, li a:visited {
|
||||
display:flex;
|
||||
line-height:$lineheight;
|
||||
padding-right:$lineheight_half;
|
||||
padding-left:$lineheight_quarter;
|
||||
padding-top:$lineheight_quarter;
|
||||
padding-bottom:$lineheight_quarter;
|
||||
margin:0;
|
||||
justify-content: space-between;
|
||||
|
||||
word-wrap:none;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow:hidden;
|
||||
|
||||
@include biseau($lineheight_half);
|
||||
|
||||
strong {
|
||||
font-weight: 900;
|
||||
color:$color-dark!important;
|
||||
}
|
||||
|
||||
&.noflex {
|
||||
& :first-child {
|
||||
min-width:2rem;
|
||||
}
|
||||
justify-content: flex-start;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
a, a:visited {
|
||||
text-decoration:none;
|
||||
color: $color-violet;
|
||||
background-color:transparent;
|
||||
&:hover {
|
||||
text-decoration:none;
|
||||
color: $color-violet;
|
||||
|
||||
@include biseau($lineheight_half);
|
||||
|
||||
&:before {
|
||||
background-color: darken($color-light2, 7.5%)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.menu-divider {
|
||||
position: relative;
|
||||
left: -$lineheight_quarter;
|
||||
font-weight: $fontweight_hyper;
|
||||
padding-top:$lineheight_quarter;
|
||||
padding-bottom:$lineheight_quarter;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* CARD LIST - Make a list part of a card */
|
||||
|
|
@ -157,7 +35,7 @@ $card-smallpad: $lineheight_half;
|
|||
&::before {
|
||||
font-family: "ForkAwesome";
|
||||
content:$symbol;
|
||||
padding-right:$lineheight_half;
|
||||
padding-right: $lineheight_rel / 4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -174,11 +52,8 @@ ul.card-list, .card > ul {
|
|||
padding:0;
|
||||
margin:0;
|
||||
li.list-element {
|
||||
line-height:$lineheight;
|
||||
padding-right:$lineheight_half;
|
||||
padding-left:$lineheight_quarter;
|
||||
padding-top:$lineheight_quarter;
|
||||
padding-bottom:$lineheight_quarter;
|
||||
line-height:$lineheight_rel / 2;
|
||||
padding: $lineheight_rel / 4, $lineheight_rel / 4, $lineheight_rel / 4, $lineheight_rel / 2;
|
||||
margin:0;
|
||||
}
|
||||
}
|
||||
|
|
@ -191,63 +66,8 @@ ul.card-list, .card > ul {
|
|||
&-success{@include list-color($color-success);}
|
||||
}
|
||||
|
||||
.smallcard, .toast {
|
||||
@include card($card-smallpad);
|
||||
.smallcard {
|
||||
&-header {
|
||||
@include card-header($card-bigpad);
|
||||
}
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
@include panel-header($card-bigpad);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
9
scss/components/_input.scss
Normal file
9
scss/components/_input.scss
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
input,
|
||||
textarea {
|
||||
width: 100%;
|
||||
background-color: $color-background;
|
||||
border-radius: $btn-radius;
|
||||
border: 0px solid rgba(0, 0, 0, 0);
|
||||
padding: $lineheight_rel / 4;
|
||||
line-height: $lineheight_rel;
|
||||
}
|
||||
154
scss/components/_menus.scss
Normal file
154
scss/components/_menus.scss
Normal file
|
|
@ -0,0 +1,154 @@
|
|||
/* Menu handling */
|
||||
|
||||
.menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
ul,
|
||||
li {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
@include shape-style($lineheight_half);
|
||||
display: flex;
|
||||
line-height: $lineheight_rel;
|
||||
padding: $lineheight_rel / 4;
|
||||
margin: 0;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
|
||||
word-wrap: none;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
|
||||
@include shape-style($lineheight_half);
|
||||
//@include button-hover();
|
||||
@include prefer-no-borders();
|
||||
.badge {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.fg-light,
|
||||
.fg-light & {
|
||||
a {
|
||||
color: $color-font-light;
|
||||
outline-color: $color-font-light;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&.submenu:focus {
|
||||
background-color: transparentize($color-font-light, 0.7);
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
outline-color: $color-font-light;
|
||||
}
|
||||
}
|
||||
|
||||
&.fg-dark,
|
||||
.fg-dark & {
|
||||
a {
|
||||
color: $color-font;
|
||||
outline-color: $color-font;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&.submenu:focus {
|
||||
background-color: transparentize($color-font, 0.85);
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
outline-color: $color-font;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.submenu .fa-caret-down {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
font-size:0.8em;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
flex-direction: row;
|
||||
padding: $lineheight_rel/4;
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
li {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
|
||||
a,
|
||||
span,
|
||||
em,
|
||||
strong,
|
||||
&.toolbar-element {
|
||||
display: block;
|
||||
padding: $lineheight_rel/3;
|
||||
padding-left: $lineheight_rel/2;
|
||||
padding-right: $lineheight_rel/2;
|
||||
}
|
||||
|
||||
ul {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
transition: all 0.5s ease;
|
||||
margin-top: 0rem;
|
||||
left: 0;
|
||||
display: none;
|
||||
padding:0.33rem;
|
||||
z-index:1;
|
||||
}
|
||||
|
||||
&:hover ul,
|
||||
ul:hover,
|
||||
&:focus-within ul {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: $card-radius;
|
||||
box-shadow:0px 1px 1px rgba(0,0,0,0.2);
|
||||
width: max-content;
|
||||
li {
|
||||
text-align:left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-divider,
|
||||
.menu ul h1,
|
||||
ul.menu h1,
|
||||
.menu h2,
|
||||
ul.menu h2 {
|
||||
position: relative;
|
||||
left: -$lineheight_rel / 4;
|
||||
font-weight: $fontweight_hyper;
|
||||
padding-top: $lineheight_rel / 4;
|
||||
padding-bottom: $lineheight_rel / 4;
|
||||
font-size:1em;
|
||||
line-height:$lineheight_rel;
|
||||
}
|
||||
|
||||
.menu-label {
|
||||
@include shape-style($button_small);
|
||||
@include button-hover();
|
||||
padding-left: $button_small;
|
||||
padding-right: $button_small;
|
||||
}
|
||||
28
scss/components/_pagination.scss
Normal file
28
scss/components/_pagination.scss
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
nav.pagination {
|
||||
padding-bottom:$lineheight;
|
||||
.nav-links {
|
||||
text-align: center;
|
||||
width:100%;
|
||||
}
|
||||
.page-numbers, .next, .prev {
|
||||
@include button($button_small);
|
||||
padding-left: $button_small;
|
||||
padding-right: $button_small;
|
||||
margin-right : $button_small / 2;
|
||||
margin-left: $button_small / 2;
|
||||
text-decoration: none;
|
||||
|
||||
|
||||
&:not(.current):not(.dots) {
|
||||
@include button-color($color-background-alt);
|
||||
outline-color: mix($color-background-alt, getTextColorFromBackground($color-background-alt), 85%);
|
||||
}
|
||||
|
||||
&.current {
|
||||
@include background-color($color-primary);
|
||||
&::before {
|
||||
background-color: $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -4,21 +4,27 @@
|
|||
*
|
||||
*/
|
||||
$preview-height: 8*$lineheight;
|
||||
$preview-content-height:165px;
|
||||
$comment-peek-height:0px;
|
||||
|
||||
.previews-section {
|
||||
.preview-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto;
|
||||
grid-gap: $lineheight;
|
||||
padding-bottom: $lineheight;
|
||||
|
||||
@include xl() {
|
||||
@include md() {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@include xxl() {
|
||||
.preview-grid-3 {
|
||||
|
||||
@include xl() {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.preview-container {
|
||||
|
|
@ -53,21 +59,39 @@ $preview-height: 8*$lineheight;
|
|||
.preview-link {
|
||||
padding:0;
|
||||
background-color: transparent;
|
||||
margin:0!important;
|
||||
text-decoration: none;
|
||||
position:relative;
|
||||
height: $preview-height;
|
||||
|
||||
.card-header {
|
||||
font-family: $basefont;
|
||||
font-size: 1em;
|
||||
@include panel-header($lineheight_half);
|
||||
@include colorize-shape($color-primary);
|
||||
color: getTextColorFromBackground($color-primary);
|
||||
font-weight: $fontweight_bold;
|
||||
position:absolute;
|
||||
margin:0;
|
||||
top:0.5rem;
|
||||
z-index:1;
|
||||
min-height:2.8rem;
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-item {
|
||||
height: $preview-height;
|
||||
.preview-content {
|
||||
font-size:0.9rem;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
line-height: $lineheight !important;
|
||||
text-align:justify;
|
||||
background-color:rgba(0,0,0,0.00);
|
||||
color:rgba(0,0,0,0.4);
|
||||
color:dim(getFontColor());
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
-ms-flex-align: center !important;
|
||||
align-items: center !important;
|
||||
justify-content: center;
|
||||
overflow:hidden;
|
||||
|
||||
.preview-overlay {
|
||||
height: 100%;
|
||||
|
|
@ -75,24 +99,10 @@ $preview-height: 8*$lineheight;
|
|||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
padding-top: $lineheight_half;
|
||||
padding-top: $card-header-vmargin/2;
|
||||
backdrop-filter: none;
|
||||
transition: background-color 0.3s;
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: $color-light;
|
||||
font-size: 1rem;
|
||||
line-height: $lineheight;
|
||||
font-weight:$fontweight_big;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
font-family: $basefont;
|
||||
font-size: 1rem;
|
||||
background-color: $color-primary;
|
||||
@include card-header($lineheight_half);
|
||||
font-weight: $fontweight_big;
|
||||
}
|
||||
transition: background-color 0.3s, backdrop-filter 0.3s;
|
||||
@include border-radius($card-radius);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
@ -103,18 +113,29 @@ $preview-height: 8*$lineheight;
|
|||
.metadata-pills {
|
||||
opacity: .9;
|
||||
transition: opacity .5s, height .5s;
|
||||
height:135px;
|
||||
}
|
||||
|
||||
.comment-text {
|
||||
bottom:0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.preview-content {
|
||||
.preview-exerpt {
|
||||
max-height: $preview-height;
|
||||
overflow:hidden;
|
||||
background-size: cover;
|
||||
min-height:100%;
|
||||
min-width:100%;
|
||||
@include border-radius($card-radius);
|
||||
font-size:0.85rem;
|
||||
line-height:1.25rem;
|
||||
|
||||
display: flex;
|
||||
-ms-flex-align: center !important;
|
||||
align-items: center !important;
|
||||
justify-content: center;
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-bottom:0px;
|
||||
|
|
@ -138,20 +159,19 @@ $preview-height: 8*$lineheight;
|
|||
text-align:center;
|
||||
margin:auto;
|
||||
padding:auto;
|
||||
display: flex;
|
||||
display: block;
|
||||
width:100%;
|
||||
height: $preview-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.preview-metadata {
|
||||
color: $color-light;
|
||||
height:165px;
|
||||
color: $color-font-light;
|
||||
height:100%;
|
||||
overflow: hidden;
|
||||
@include border-radius($card-radius);
|
||||
|
||||
.metadata-pills {
|
||||
height:165px;
|
||||
opacity: 0;
|
||||
transition: opacity .3s, height .3s;
|
||||
display:flex;
|
||||
|
|
@ -159,28 +179,33 @@ $preview-height: 8*$lineheight;
|
|||
padding-left: $lineheight/2;
|
||||
padding-right: $lineheight/2;
|
||||
font-size:0.9em;
|
||||
padding-top:3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.card-preview.card-info {
|
||||
.card-preview.head-info {
|
||||
.comment-text {
|
||||
@include angled-edge('outside top', 'upper left', $color-skyblue, 16);
|
||||
background-color:$color-skyblue;
|
||||
@include angled-edge('outside top', 'upper left', $color-secondary, 16);
|
||||
background-color:$color-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.card-preview.card-grey {
|
||||
.comment-text {
|
||||
@include angled-edge('outside top', 'upper left', $color-grey, 16);
|
||||
background-color:$color-grey;
|
||||
@include angled-edge('outside top', 'upper left', $color-muted, 16);
|
||||
background-color:$color-muted;
|
||||
}
|
||||
}
|
||||
|
||||
.comment-text {
|
||||
@include angled-edge('outside top', 'upper left', $color-violet, 16);
|
||||
color: $color-light;
|
||||
background-color:$color-violet;
|
||||
color: $color-font-light;
|
||||
background-color:$color-primary;
|
||||
@include angled-edge('outside top', 'upper left', $color-primary, 16);
|
||||
text-align: center;
|
||||
position:absolute;
|
||||
bottom:-$lineheight;
|
||||
width:100%;
|
||||
transition: bottom 0.3s;
|
||||
}
|
||||
|
||||
.card-preview time {
|
||||
|
|
@ -195,7 +220,7 @@ $preview-height: 8*$lineheight;
|
|||
|
||||
img.author-avatar, img.avatar {
|
||||
display:block;
|
||||
height: 4.5rem;
|
||||
height: $lineheight*3;
|
||||
width:auto;
|
||||
border-radius:100%;
|
||||
padding:0;
|
||||
|
|
@ -244,6 +269,7 @@ $preview-height: 8*$lineheight;
|
|||
.cover {
|
||||
width:100%;
|
||||
height:auto;
|
||||
@include border-radius($card-radius);
|
||||
}
|
||||
|
||||
.roman {
|
||||
|
|
|
|||
21
scss/components/_sidebar.scss
Normal file
21
scss/components/_sidebar.scss
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
.sidebar-container {
|
||||
width:100%;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto;
|
||||
row-gap: $lineheight;
|
||||
column-gap: $lineheight*2;
|
||||
grid-template-areas:
|
||||
"side"
|
||||
"main";
|
||||
|
||||
@include lg() {
|
||||
grid-template-columns: 360px auto;
|
||||
grid-template-areas: "side main";
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
padding:1rem;
|
||||
}
|
||||
}
|
||||
23
scss/components/_tables.scss
Normal file
23
scss/components/_tables.scss
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
/* TABLE
|
||||
* Style tables
|
||||
*/
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table, th, td {
|
||||
border:0;
|
||||
padding:0;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
th, td {
|
||||
vertical-align:center;
|
||||
padding-top: 0.325em;
|
||||
padding-bottom: 0.325em;
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: $fontweight_hyper;
|
||||
}
|
||||
8
scss/components/_toasts.scss
Normal file
8
scss/components/_toasts.scss
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
.toast {
|
||||
@include panel($card-smallpad);
|
||||
padding:$card-smallpad;
|
||||
font-size: 0.8rem;
|
||||
a {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
18
scss/core/_box-sizing.scss
Normal file
18
scss/core/_box-sizing.scss
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
/* 0.2 - Box-sizing
|
||||
* Make sure that everything have its box-sizing to border-box
|
||||
**/
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
68
scss/core/_columns.scss
Normal file
68
scss/core/_columns.scss
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
@mixin column($size) {
|
||||
grid-column: span $size;
|
||||
width:100%;
|
||||
margin:0;
|
||||
|
||||
& > *:last-child {
|
||||
margin-bottom:0!important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin column-list() {
|
||||
&-1 {@include column(1);}
|
||||
&-2 {@include column(2);}
|
||||
&-3 {@include column(3);}
|
||||
&-4 {@include column(4);}
|
||||
&-5 {@include column(5);}
|
||||
&-6 {@include column(6);}
|
||||
&-7 {@include column(7);}
|
||||
&-8 {@include column(8);}
|
||||
&-9 {@include column(9);}
|
||||
&-10 {@include column(10);}
|
||||
&-11 {@include column(11);}
|
||||
&-12 {@include column(12);}
|
||||
}
|
||||
|
||||
.columns {
|
||||
display:grid;
|
||||
grid-gap:$lineheight;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
grid-template-rows: auto;
|
||||
padding:$lineheight;
|
||||
&-nogap {
|
||||
grid-gap:0px;
|
||||
}
|
||||
}
|
||||
|
||||
.column {
|
||||
@include column(12);
|
||||
}
|
||||
|
||||
.col {
|
||||
@include column-list();
|
||||
&-sm {
|
||||
@include sm() {
|
||||
@include column-list();
|
||||
}
|
||||
}
|
||||
&-md {
|
||||
@include md() {
|
||||
@include column-list();
|
||||
}
|
||||
}
|
||||
&-lg {
|
||||
@include lg() {
|
||||
@include column-list();
|
||||
}
|
||||
}
|
||||
&-xl {
|
||||
@include xl() {
|
||||
@include column-list();
|
||||
}
|
||||
}
|
||||
&-xxl {
|
||||
@include xxl() {
|
||||
@include column-list();
|
||||
}
|
||||
}
|
||||
}
|
||||
11
scss/core/_containers.scss
Normal file
11
scss/core/_containers.scss
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
#wrapper {
|
||||
background-color: $color-background;
|
||||
}
|
||||
|
||||
.container-big {
|
||||
@include container($container-size-large, $lineheight);
|
||||
}
|
||||
|
||||
.container, .container-onecolumn {
|
||||
@include container($container-size, $lineheight);
|
||||
}
|
||||
349
scss/core/_normalize.scss
Normal file
349
scss/core/_normalize.scss
Normal file
|
|
@ -0,0 +1,349 @@
|
|||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
/* Document
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Correct the line height in all browsers.
|
||||
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
||||
*/
|
||||
|
||||
html {
|
||||
line-height: 1.15; /* 1 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/* Sections
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the margin in all browsers.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the `main` element consistently in IE.
|
||||
*/
|
||||
|
||||
main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the font size and margin on `h1` elements within `section` and
|
||||
* `article` contexts in Chrome, Firefox, and Safari.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in Firefox.
|
||||
* 2. Show the overflow in Edge and IE.
|
||||
*/
|
||||
|
||||
hr {
|
||||
box-sizing: content-box; /* 1 */
|
||||
height: 0; /* 1 */
|
||||
overflow: visible; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the gray background on active links in IE 10.
|
||||
*/
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove the bottom border in Chrome 57-
|
||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none; /* 1 */
|
||||
text-decoration: underline; /* 2 */
|
||||
text-decoration: underline dotted; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||
* all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the border on images inside links in IE 10.
|
||||
*/
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Change the font styles in all browsers.
|
||||
* 2. Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit; /* 1 */
|
||||
font-size: 100%; /* 1 */
|
||||
line-height: 1.15; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the overflow in IE.
|
||||
* 1. Show the overflow in Edge.
|
||||
*/
|
||||
|
||||
button,
|
||||
input { /* 1 */
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||
* 1. Remove the inheritance of text transform in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select { /* 1 */
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner border and padding in Firefox.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Restore the focus styles unset by the previous rule.
|
||||
*/
|
||||
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the padding in Firefox.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
padding: 0.35em 0.75em 0.625em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the text wrapping in Edge and IE.
|
||||
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||
* 3. Remove the padding so developers are not caught out when they zero out
|
||||
* `fieldset` elements in all browsers.
|
||||
*/
|
||||
|
||||
legend {
|
||||
box-sizing: border-box; /* 1 */
|
||||
color: inherit; /* 2 */
|
||||
display: table; /* 1 */
|
||||
max-width: 100%; /* 1 */
|
||||
padding: 0; /* 3 */
|
||||
white-space: normal; /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the default vertical scrollbar in IE 10+.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in IE 10.
|
||||
* 2. Remove the padding in IE 10.
|
||||
*/
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
*/
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the odd appearance in Chrome and Safari.
|
||||
* 2. Correct the outline style in Safari.
|
||||
*/
|
||||
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
outline-offset: -2px; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner padding in Chrome and Safari on macOS.
|
||||
*/
|
||||
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||
* 2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/* Interactive
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Add the correct display in Edge, IE 10+, and Firefox.
|
||||
*/
|
||||
|
||||
details {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Add the correct display in all browsers.
|
||||
*/
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
/* Misc
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10+.
|
||||
*/
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
220
scss/core/_typography.scss
Normal file
220
scss/core/_typography.scss
Normal file
|
|
@ -0,0 +1,220 @@
|
|||
/* 0.3 - Typography
|
||||
* This part of the (s)css handle everything related to the typography
|
||||
* like paragraphs, blockquote, etc.
|
||||
**/
|
||||
|
||||
/* 2.2 - Global Typography */
|
||||
|
||||
@mixin paragraph() {
|
||||
padding:0;
|
||||
padding-bottom: $lineheight;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html, body {
|
||||
font-family: $basefont;
|
||||
text-align: left;
|
||||
font-size: $fontsize;
|
||||
line-height: $lineheight;
|
||||
color: getFontColor();
|
||||
font-weight: $fontweight_base;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: $fontweight_bold;
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: italic;
|
||||
font-weight: $fontweight_base;
|
||||
}
|
||||
|
||||
mark {
|
||||
padding: 0.05rem 0.25rem;
|
||||
border-radius: 0.1rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: darken($color-link, 10%);
|
||||
outline-color: $color-link;
|
||||
padding: 0.05rem;
|
||||
border-radius: 0.1rem;
|
||||
text-decoration: underline dashed;
|
||||
|
||||
&:visited {
|
||||
color: darken($color-link, 10%);
|
||||
}
|
||||
|
||||
&:hover, &:active {
|
||||
&, &.fg-dark, .fg-light & {
|
||||
background-color: transparentize($color-font, 0.9);
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
.fg-light &, &.fg-light {
|
||||
background-color: transparentize($color-font-light, 0.8);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a:focus-visible, input:focus-visible {
|
||||
outline-style: dashed;
|
||||
outline-width: 2px;
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
mark {
|
||||
background-color: lighten($color-mark, 30%);
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
p, ul, ol {
|
||||
@include paragraph();
|
||||
&:last-child {
|
||||
padding-bottom:0;
|
||||
}
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
list-style: disc;
|
||||
ul, ol {
|
||||
padding-bottom:0;
|
||||
margin:0;
|
||||
}
|
||||
li {
|
||||
margin:0;
|
||||
margin-left: $lineheight;
|
||||
line-height: $lineheight;
|
||||
}
|
||||
|
||||
&.nolist {
|
||||
display:inline;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
li {
|
||||
display: inline;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::selection, ::-moz-selection {
|
||||
@include background-color($color-selection);
|
||||
}
|
||||
|
||||
/* 2.3 - Titles */
|
||||
|
||||
@mixin newTitle($size, $weight) {
|
||||
$lineNumber: ceil($size / 1.5);
|
||||
font-size: $size * 1rem;
|
||||
line-height: $lineNumber * $lineheight;
|
||||
font-weight: $weight;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6, h7 {
|
||||
font-family: $basefont;
|
||||
text-align: left;
|
||||
font-size: 1em;
|
||||
padding:0;
|
||||
margin:0;
|
||||
font-weight: $fontweight_base;
|
||||
padding-bottom: $lineheight;
|
||||
a {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
sup, sub {
|
||||
& > a {
|
||||
color: $color-link;
|
||||
background-color:transparent;
|
||||
&:hover, &:focus, &:active {
|
||||
color: darken($color-link, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-title, .page-title {
|
||||
font-family: $titlefont;
|
||||
@include newTitle(3.815, $fontweight_base);
|
||||
}
|
||||
|
||||
h1, .title-1 {
|
||||
font-family: $titlefont;
|
||||
@include newTitle(2.441, $fontweight_hyper);
|
||||
color: $color-primary;
|
||||
}
|
||||
|
||||
h2, .title-2 {
|
||||
@include newTitle(2.441, $fontweight_big);
|
||||
}
|
||||
|
||||
h3, .title-3 {
|
||||
@include newTitle(1.953, $fontweight_bold);
|
||||
}
|
||||
|
||||
h4, .title-4 {
|
||||
@include newTitle(1.563, $fontweight_hyper);
|
||||
}
|
||||
|
||||
h5, .title-5 {
|
||||
@include newTitle(1.25, $fontweight_bold);
|
||||
}
|
||||
|
||||
h6, .title-6 {
|
||||
@include newTitle(1, $fontweight_hyper);
|
||||
}
|
||||
|
||||
/* 2.4 - hr */
|
||||
|
||||
hr {
|
||||
border: 0px solid rgba(1, 1, 1, 0.15);
|
||||
border-bottom: 1px;
|
||||
margin: 1.5em;
|
||||
}
|
||||
|
||||
/* 2.5 - Wells and quotes */
|
||||
|
||||
@mixin well() {
|
||||
border: 0;
|
||||
border-radius: $well-radius;
|
||||
|
||||
margin: 0 0 $lineheight 0;
|
||||
padding: $lineheight 1rem $lineheight 1rem;
|
||||
|
||||
max-width: 100%;
|
||||
font-style: italic;
|
||||
@include background-color($color-background-alt);
|
||||
box-shadow: $narrow-shadow;
|
||||
}
|
||||
|
||||
blockquote, .quote {
|
||||
&:before {
|
||||
content:"";
|
||||
}
|
||||
}
|
||||
|
||||
blockquote, .quote, .well, pre, .pre, .well-pre {
|
||||
@include well();
|
||||
}
|
||||
|
||||
code {
|
||||
background:transparent;
|
||||
color: $color-danger;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
/* 2.6 - Special styling */
|
||||
|
||||
.time {
|
||||
font-style: italic;
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
37
scss/custom/_article.scss
Normal file
37
scss/custom/_article.scss
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
.article {
|
||||
img {
|
||||
max-width:100%;
|
||||
height:auto;
|
||||
margin:auto;
|
||||
}
|
||||
|
||||
.thumbnail img {
|
||||
width:100%;
|
||||
aspect-ratio: 16 / 9;
|
||||
border-radius: $card-radius;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.article-meta {
|
||||
.author-area {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: $lineheight / 2;
|
||||
|
||||
img {
|
||||
border-radius: 9999px;
|
||||
width: $lineheight * 3;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
margin-right: $lineheight / 2;
|
||||
}
|
||||
}
|
||||
|
||||
.article-category {
|
||||
.badge {
|
||||
display: inline-block;
|
||||
margin-bottom: $lineheight / 4;
|
||||
}
|
||||
}
|
||||
}
|
||||
49
scss/custom/_featured.scss
Normal file
49
scss/custom/_featured.scss
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
#featured-articles {
|
||||
display:grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto;
|
||||
grid-gap: $lineheight;
|
||||
padding-bottom: $lineheight;
|
||||
@include lg() {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-featured {
|
||||
font-size: 0.8rem;
|
||||
|
||||
.preview-link {
|
||||
display: block;
|
||||
padding:0;
|
||||
border-radius: $card-radius;
|
||||
overflow: hidden;
|
||||
text-decoration: none;
|
||||
.preview-item {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
aspect-ratio: 16 / 9;
|
||||
background-size:100% auto;
|
||||
background-position: center center;
|
||||
transition: background-size .5s;
|
||||
|
||||
&:hover {
|
||||
background-size: 120% auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.preview-overlay {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
height:100%;
|
||||
color: white !important;
|
||||
background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 60%);
|
||||
padding:$lineheight / 8;
|
||||
|
||||
h2 {
|
||||
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
}
|
||||
}
|
||||
278
scss/custom/_global.scss
Normal file
278
scss/custom/_global.scss
Normal file
|
|
@ -0,0 +1,278 @@
|
|||
/* --- 03. GLOBAL STYLING --- */
|
||||
|
||||
/*
|
||||
* Les styles "globaux" touchant toute la page.
|
||||
*
|
||||
*/
|
||||
|
||||
@mixin li-no-margin() {
|
||||
li {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin container-big() {
|
||||
padding-left: $lineheight;
|
||||
padding-right: $lineheight;
|
||||
max-width: $container-size;
|
||||
margin:auto;
|
||||
}
|
||||
|
||||
.no-pills {
|
||||
list-style:none;
|
||||
}
|
||||
|
||||
.align {
|
||||
&-center {text-align: center;}
|
||||
&-left {text-align: left;}
|
||||
&-right {text-align: right;}
|
||||
}
|
||||
|
||||
/* ------------------ HEADERS ------------------- */
|
||||
|
||||
#page-header {
|
||||
background: get-color("skyblue") url('img/background.png');
|
||||
border-top: 6px solid get-color("dark");
|
||||
background-position: bottom center;
|
||||
background-repeat: repeat-x;
|
||||
margin-bottom:1.5rem;
|
||||
.fa {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
header h1 {
|
||||
border-style:none !important;
|
||||
font-weight: $fontweight_hyper;
|
||||
font-size:5.4em;
|
||||
font-style:oblique;
|
||||
padding:1.5rem;
|
||||
line-height: 1rem;
|
||||
max-width: $container-size;
|
||||
margin: auto;
|
||||
text-align:center;
|
||||
|
||||
@include lg() {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 640px;
|
||||
height: auto;
|
||||
margin-top:0rem;
|
||||
width: 100%;
|
||||
|
||||
@include lg() {
|
||||
position: relative;
|
||||
left:-6rem;
|
||||
}
|
||||
z-index:0;
|
||||
}
|
||||
|
||||
a, a:visited, a:hover {
|
||||
background-color:transparent;
|
||||
outline-color:white;
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.osd {
|
||||
background-color:rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
padding: 0.75rem;
|
||||
color: $color-font-light;
|
||||
a {
|
||||
color: $color-font-light;
|
||||
}
|
||||
@include li-no-margin();
|
||||
}
|
||||
|
||||
.categories {
|
||||
font-weight:800;
|
||||
font-size:0.8rem;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
box-shadow: $narrow-shadow, $inset-shadow;
|
||||
}
|
||||
/* ------------------ CONTAINERS ------------------- */
|
||||
|
||||
.container-big {
|
||||
@include container-big();
|
||||
}
|
||||
|
||||
.container-blog {
|
||||
@include container-big();
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto;
|
||||
row-gap: $lineheight;
|
||||
column-gap: 1.5rem;
|
||||
grid-template-areas:
|
||||
"main"
|
||||
"side";
|
||||
|
||||
@include lg() {
|
||||
grid-template-columns: auto 320px;
|
||||
grid-template-areas: "main side";
|
||||
}
|
||||
}
|
||||
|
||||
.fullwidth {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
grid-area: side;
|
||||
}
|
||||
|
||||
ul.tag-list {
|
||||
display:flex;
|
||||
padding-bottom:0;
|
||||
overflow: hidden;
|
||||
height:auto;
|
||||
flex-wrap: wrap;
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
margin:3px;
|
||||
}
|
||||
}
|
||||
|
||||
.container-preview {
|
||||
@include container-big();
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto;
|
||||
row-gap: $lineheight;
|
||||
column-gap: 3rem;
|
||||
grid-template-areas:
|
||||
"main"
|
||||
"side";
|
||||
|
||||
@include lg() {
|
||||
grid-template-columns: 360px auto;
|
||||
grid-template-areas: "side main";
|
||||
}
|
||||
}
|
||||
|
||||
.container-onecolumn {
|
||||
max-width:1280px;
|
||||
margin: auto;
|
||||
padding-bottom: $lineheight;
|
||||
}
|
||||
|
||||
.container-personnage {
|
||||
@include container-big();
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
grid-template-rows: auto;
|
||||
row-gap: 3rem;
|
||||
column-gap: 3rem;
|
||||
|
||||
grid-template-areas:
|
||||
"nomp nomp nomp nomp nomp nomp"
|
||||
"info info info info meta meta"
|
||||
"goss goss look look look look"
|
||||
"aime aime aime dete dete dete"
|
||||
"hist hist hist hist hist hist";
|
||||
|
||||
.card {
|
||||
margin:0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
padding:0;
|
||||
}
|
||||
}
|
||||
|
||||
.personnage {
|
||||
&-nomp {grid-area: nomp;}
|
||||
&-info {grid-area: info;}
|
||||
&-meta {grid-area: meta;}
|
||||
&-goss {grid-area: goss;}
|
||||
&-look {grid-area: look;}
|
||||
&-aime {grid-area: aime;}
|
||||
&-dete {grid-area: dete;}
|
||||
&-hist {grid-area: hist;}
|
||||
}
|
||||
|
||||
/* ------------------ PAGE ------------------- */
|
||||
|
||||
#wrapper {
|
||||
background-color: $color-background;
|
||||
}
|
||||
|
||||
/* ------------------ FOOTER ------------------- */
|
||||
|
||||
$color-footer-back: get-color("dark");
|
||||
$color-footer-text: get-color("light");
|
||||
|
||||
body {
|
||||
// On colorise le background de la page complete de la même
|
||||
// couleur que le fond du footer.
|
||||
background-color: $color-footer-back;
|
||||
}
|
||||
|
||||
footer {
|
||||
@include angled-edge('outside top', 'upper left', $color-footer-back, 24);
|
||||
color: $color-footer-text;
|
||||
padding-bottom:1.5rem;
|
||||
padding-top: 1.5rem;
|
||||
.columns {
|
||||
a {
|
||||
color: $color-footer-text;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.home-toast {
|
||||
max-width:800px;
|
||||
width:100%;
|
||||
margin:auto;
|
||||
}
|
||||
|
||||
ul.social {
|
||||
font-size: 1.5em;
|
||||
padding-bottom: 0;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
line-height: 1;
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
color: $color-footer-back;
|
||||
background-color: $color-footer-text;
|
||||
padding: 0.3em;
|
||||
width: 3rem;
|
||||
aspect-ratio: 1;
|
||||
|
||||
display:flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
border-radius: 100%;
|
||||
line-height: 1;
|
||||
margin:0.33rem;
|
||||
|
||||
&:hover {
|
||||
color: $color-footer-text;
|
||||
background-color: $color-footer-back;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
42
scss/custom/_mobile.scss
Normal file
42
scss/custom/_mobile.scss
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
#mobile-sidebar {
|
||||
position: fixed;
|
||||
top:0;
|
||||
left:-100vw;
|
||||
width:100vw;
|
||||
height:100vh;
|
||||
transition: left 0.2s;
|
||||
padding: 1rem;
|
||||
overflow: scroll;
|
||||
&.shown {
|
||||
left:0;
|
||||
}
|
||||
|
||||
@include sm() {
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-button {
|
||||
position:fixed;
|
||||
bottom: 24px;
|
||||
right: 24px;
|
||||
background-color:rgba(0,0,0,0.2);
|
||||
color:$color-font-light;
|
||||
padding:0.75em;
|
||||
border:none;
|
||||
font-size:1.2rem;
|
||||
display:flex;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
aspect-ratio: 1;
|
||||
border-radius:999px;
|
||||
opacity: 0.75;
|
||||
|
||||
&:hover {
|
||||
opacity:1;
|
||||
}
|
||||
|
||||
@include sm() {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
93
scss/custom/_previews.scss
Normal file
93
scss/custom/_previews.scss
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
.preview-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto;
|
||||
grid-gap: $lineheight / 3;
|
||||
margin: -$lineheight / 3;
|
||||
padding-bottom: $lineheight;
|
||||
|
||||
@include md() {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
@include lg() {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
@include xl() {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-list {
|
||||
.preview {
|
||||
display: block;
|
||||
}
|
||||
@include sm() {
|
||||
.preview-thumbnail {
|
||||
width: min-content;
|
||||
img {
|
||||
width: 240px;
|
||||
margin-right: $lineheight /2;
|
||||
}
|
||||
}
|
||||
|
||||
.preview {
|
||||
display: flex;
|
||||
align-items: start;
|
||||
margin-bottom: $lineheight;
|
||||
}
|
||||
}
|
||||
@include xl() {
|
||||
.preview-thumbnail img {
|
||||
width: 320px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.preview {
|
||||
font-size: 0.8rem;
|
||||
text-decoration: none;
|
||||
padding: $lineheight / 3;
|
||||
border-radius: $card-radius;
|
||||
}
|
||||
|
||||
.preview-thumbnail {
|
||||
display:block;
|
||||
width: 100%;
|
||||
background-color:transparent;
|
||||
object-fit: cover;
|
||||
padding:0;
|
||||
line-height:0;
|
||||
img {
|
||||
width:100%;
|
||||
object-fit: cover;
|
||||
height: auto;
|
||||
aspect-ratio: 16/9;
|
||||
border-radius: $card-radius;
|
||||
}
|
||||
}
|
||||
|
||||
.preview h2, .preview-featured h2 {
|
||||
font-size:1.25rem;
|
||||
line-height: 1.5rem;
|
||||
font-family: $titlefont;
|
||||
font-weight: 800;
|
||||
height:3rem;
|
||||
color: $color-font;
|
||||
a {
|
||||
background-color:transparent!important;
|
||||
color:$color-font;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-featured h2 {
|
||||
color: $color-font-light;
|
||||
}
|
||||
|
||||
.preview-excerpt {
|
||||
margin-top: $lineheight / 2;
|
||||
font-size:0.8rem;
|
||||
line-height:1.25rem;
|
||||
color:transparentize($color-font, 0.2);
|
||||
}
|
||||
6
scss/definitions/_borders.scss
Normal file
6
scss/definitions/_borders.scss
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
// BORDERS AND BORDER-RADIUSES
|
||||
|
||||
$card-radius: 0px;
|
||||
$btn-radius: 0px;
|
||||
$well-radius: $btn-radius;
|
||||
$border-size: 0px;
|
||||
29
scss/definitions/_fonts.scss
Normal file
29
scss/definitions/_fonts.scss
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
// FONTS
|
||||
// Define how looks the text
|
||||
|
||||
$fontsize: 4.5mm;
|
||||
|
||||
$fontweight_big: 300;
|
||||
$fontweight_base: 400;
|
||||
$fontweight_bold: 600;
|
||||
$fontweight_hyper: 800;
|
||||
|
||||
$basefont: Inter,
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
'Segoe UI',
|
||||
Cantarell,
|
||||
Roboto,
|
||||
Oxygen,
|
||||
Ubuntu,
|
||||
'Fira Sans',
|
||||
'Droid Sans',
|
||||
'Helvetica Neue',
|
||||
sans-serif;
|
||||
$titlefont: Amatic SC, sans-serif;
|
||||
|
||||
@font-face {
|
||||
font-family: 'Amatic SC';
|
||||
src: url('fonts/AmaticSC-Regular.ttf');
|
||||
font-weight: 400;
|
||||
}
|
||||
84
scss/definitions/_palette.scss
Normal file
84
scss/definitions/_palette.scss
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
/* --- 00. PALETTE --- */
|
||||
|
||||
/*
|
||||
* Les définitions globales des couleurs du theme.
|
||||
*
|
||||
* Elle permettent de définir rapidement à la fois les couleurs
|
||||
* de base qui seront utilisée pour tout le theme, mais
|
||||
* également celles spécifiques pour certains sujets (liens, texte)
|
||||
*
|
||||
*/
|
||||
|
||||
$whiteness_value: 0.8;
|
||||
|
||||
// Couleurs de base du theme :
|
||||
|
||||
$palette: (
|
||||
"blue":#0f7e84,
|
||||
"violet":#CB357D,
|
||||
"red":#dc322f,
|
||||
"orange":#cb4b16,
|
||||
"green":#859900,
|
||||
"skyblue":#0f7e84,
|
||||
"dark": #002b36,
|
||||
"light":#FDF7E7,
|
||||
"yellow":#b58900,
|
||||
"grey":#586e75,
|
||||
"dark2":#073642,
|
||||
"light2":#eee8d5);
|
||||
|
||||
$semantics: (
|
||||
"primary":"violet",
|
||||
"secondary":"skyblue",
|
||||
"warning":"orange",
|
||||
"danger":"red",
|
||||
"info":"skyblue",
|
||||
"success":"green",
|
||||
"muted":"grey",
|
||||
"light":"light",
|
||||
"dark":"dark");
|
||||
|
||||
$helpers: (
|
||||
"font":"dark2",
|
||||
"font-light":"light",
|
||||
"background":"light",
|
||||
"background-alt":"light2",
|
||||
"link":"violet",
|
||||
"selection":"skyblue",
|
||||
"mark":"yellow",
|
||||
);
|
||||
|
||||
@function get-color($name) {
|
||||
@if map-has-key($helpers, $name) {
|
||||
@return map-get($palette, map-get($helpers, $name));
|
||||
} @else {
|
||||
@if map-has-key($semantics, $name) {
|
||||
@return map-get($palette, map-get($semantics, $name));
|
||||
} @else {
|
||||
@return map-get($palette, $name);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// **Couleurs du theme**
|
||||
// Ne pas retirer ces couleurs, qui
|
||||
// sont essentielle pour que le framework functionne.
|
||||
// Pour les modifier, modifier le contenu du tableau $semantics.
|
||||
|
||||
$color-link: get-color("link");
|
||||
$color-selection: get-color("selection");
|
||||
$color-mark: get-color("mark");
|
||||
$color-font: get-color("font");
|
||||
$color-font-light: get-color("font-light");
|
||||
|
||||
$color-primary: get-color("primary");
|
||||
$color-secondary: get-color("secondary");
|
||||
$color-warning: get-color("warning");
|
||||
$color-danger: get-color("danger");
|
||||
$color-info: get-color("info");
|
||||
$color-success: get-color("success");
|
||||
|
||||
$color-muted: get-color("muted");
|
||||
|
||||
$color-background: get-color("background");
|
||||
$color-background-alt: get-color("background-alt");
|
||||
8
scss/definitions/_shadows.scss
Normal file
8
scss/definitions/_shadows.scss
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
// SHADOWS
|
||||
// Define how looks the shadows and the relief effects
|
||||
|
||||
$large-shadow: 0px 2px 4px rgba(0, 0, 0, 0);
|
||||
$narrow-shadow: 0px 1px 2px rgba(0, 0, 0, 0);
|
||||
$inset-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0);
|
||||
$inset-shadow-inverted: inset 0px 2px 0px rgba(0, 0, 0, 0);
|
||||
$inset-relief: inset 0px 2px 0px rgba(255, 255, 255, 0);
|
||||
35
scss/definitions/_sizing.scss
Normal file
35
scss/definitions/_sizing.scss
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
// SIZING
|
||||
// All the spacing and sizing variables
|
||||
|
||||
$baseline: 1.6;
|
||||
|
||||
$lineheight: $baseline * 1rem;
|
||||
$lineheight_half: $lineheight/2;
|
||||
$lineheight_quarter: $lineheight/4;
|
||||
$lineheight_rel: $baseline * 1em;
|
||||
|
||||
$card-header-vmargin: $lineheight_rel / 2;
|
||||
$card-header-hmargin: 0px;
|
||||
$card-header-padding: $lineheight_rel;
|
||||
$card-header-width: 85%;
|
||||
$card-header-position:0px;
|
||||
// Buttons
|
||||
$button_large: $lineheight_rel;
|
||||
$button_small: $lineheight_rel / 4;
|
||||
$button-group-margin: 0;
|
||||
|
||||
// Responsives sizes
|
||||
// - sm : Small tablets and large smartphones (landscape view)
|
||||
// - md : Small tablets (portrait view)
|
||||
// - lg : Tablets and small desktops
|
||||
// - xl : Large tablets and desktops
|
||||
// - xxl : Very large desktops
|
||||
$screen-sm-min: 576px;
|
||||
$screen-md-min: 768px;
|
||||
$screen-lg-min: 992px;
|
||||
$screen-xl-min: 1200px;
|
||||
$screen-xxl-min: 1600px;
|
||||
|
||||
// Containers size
|
||||
$container-size: $screen-xl-min;
|
||||
$container-size-large: $screen-xxl-min;
|
||||
15
scss/mixins/_borders.scss
Normal file
15
scss/mixins/_borders.scss
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
// Border, border radius and margin
|
||||
|
||||
@mixin borders() {
|
||||
border: $border-size solid rgba(0, 0, 0, 0.3)
|
||||
}
|
||||
|
||||
@mixin prefer-no-borders() {
|
||||
&:not(:hover) {
|
||||
border-color:transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin border-radius($border-radius) {
|
||||
border-radius: $border-radius $border-radius $border-radius $border-radius;
|
||||
}
|
||||
48
scss/mixins/_btns.scss
Normal file
48
scss/mixins/_btns.scss
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
@mixin button($size) {
|
||||
@include button-layout($size);
|
||||
@include shape-style($size);
|
||||
@include button-hover();
|
||||
font-weight: $fontweight_base;
|
||||
}
|
||||
|
||||
@mixin button-layout($size) {
|
||||
padding: $size;
|
||||
padding-top: $size/3;
|
||||
padding-bottom: $size/3;
|
||||
margin:$size/2;
|
||||
margin-top: $size/3;
|
||||
margin-bottom: $lineheight;
|
||||
//font-size: 4.75mm;
|
||||
line-height:$lineheight;
|
||||
height:auto;
|
||||
}
|
||||
|
||||
@mixin button-hover() {
|
||||
transition: background-color .2s, border .2s, box-shadow .2s, color .2s;
|
||||
&:hover, &:active {
|
||||
background-color:transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin button-fullcontrol($background-color, $hover-color, $text-color) {
|
||||
@include colorize-shape($background-color);
|
||||
outline-color: $background-color;
|
||||
color:$text-color;
|
||||
&:visited {
|
||||
@include colorize-shape($background-color);
|
||||
color:$text-color;
|
||||
}
|
||||
&, &:visited, &:not(.disabled):not(:disabled) {
|
||||
&:hover, &:active {
|
||||
@include colorize-shape($hover-color);
|
||||
color:lighten($text-color, 5%);
|
||||
outline-color: $hover-color;
|
||||
box-shadow:none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin button-color($background-color) {
|
||||
@include button-fullcontrol($background-color, mix($background-color, getTextColorFromBackground($background-color), 85%), getTextColorFromBackground($background-color));
|
||||
box-shadow: $narrow-shadow;
|
||||
}
|
||||
60
scss/mixins/_colors.scss
Normal file
60
scss/mixins/_colors.scss
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
/* --- 00. COLORS --- */
|
||||
|
||||
/*
|
||||
* La gestion des couleurs dans le theme. Cette partie de la stylesheet est
|
||||
* automatique et n'a pas besoin d'être modifiée
|
||||
*/
|
||||
|
||||
// FUNCTIONS TO GET MORE EASILY COLORS
|
||||
@function list-colors() {
|
||||
@return $semantics;
|
||||
}
|
||||
|
||||
@function luminance($color) {
|
||||
$c_red: red($color);
|
||||
$c_grn: green($color);
|
||||
$c_blu: blue($color);
|
||||
|
||||
$luminance: $c_red*0.299 + $c_grn*0.587 + $c_blu*0.114;
|
||||
|
||||
@return $luminance
|
||||
}
|
||||
|
||||
@function getFontColor() {
|
||||
@return getTextColorFromBackground(get-color("background-alt"));
|
||||
}
|
||||
|
||||
@function getTextColorFromBackground($background-color) {
|
||||
@if (luminance($background-color) < 255 * $whiteness_value) {
|
||||
@return $color-font-light;
|
||||
} @else {
|
||||
@return $color-font;
|
||||
}
|
||||
}
|
||||
|
||||
@function accentuate($color) {
|
||||
@if (luminance($color) > 64) {
|
||||
@return darken($color, 7.5%);
|
||||
} @else {
|
||||
@return lighten($color, 4%);
|
||||
}
|
||||
}
|
||||
|
||||
@function dim($color) {
|
||||
@if (luminance($color) > 255 * $whiteness_value) {
|
||||
@return transparentize($color, 0.8);
|
||||
} @else {
|
||||
@return transparentize($color, 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
// fonction texte et background
|
||||
|
||||
@mixin text-color($text-color) {
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
@mixin background-color($background-color) {
|
||||
background-color: $background-color;
|
||||
color: getTextColorFromBackground($background-color);
|
||||
}
|
||||
13
scss/mixins/_li.scss
Normal file
13
scss/mixins/_li.scss
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
@mixin li-no-margin() {
|
||||
li {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin li-flex() {
|
||||
display:flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
@include li-no-margin();
|
||||
list-style: none;
|
||||
}
|
||||
64
scss/mixins/_panels.scss
Normal file
64
scss/mixins/_panels.scss
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
@mixin panel($size) {
|
||||
@include border-radius($card-radius);
|
||||
background-color: $color-background-alt;
|
||||
box-shadow: $large-shadow;
|
||||
border: none;
|
||||
margin:0;
|
||||
margin-bottom:$lineheight;
|
||||
|
||||
& > * {
|
||||
margin-left: $size / 2;
|
||||
margin-right: $size / 2;
|
||||
&:first-child,
|
||||
&.sr-only:first-child ~ * {
|
||||
margin-top: $size;
|
||||
&.card-header {
|
||||
margin-top:$card-header-vmargin;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: $size;
|
||||
&.card-header {
|
||||
margin-bottom:$card-header-vmargin;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin panel-header($size) {
|
||||
font-size:1em;
|
||||
font-weight: $fontweight_bold;
|
||||
padding: $size/2;
|
||||
padding-left:$card-header-padding;
|
||||
padding-right:$card-header-padding;
|
||||
padding-bottom: $size/2!important;
|
||||
margin:$card-header-hmargin;
|
||||
margin-bottom:$lineheight_rel / 2;
|
||||
margin-top:$lineheight_rel / 2;
|
||||
line-height:1;
|
||||
|
||||
position:relative;
|
||||
left: $card-header-position;
|
||||
width:$card-header-width;
|
||||
|
||||
@include shape-style($size);
|
||||
border-radius:0;
|
||||
&:first-child {
|
||||
border-top-left-radius: $card-radius;
|
||||
border-top-right-radius: $card-radius;
|
||||
}
|
||||
&:last-child {
|
||||
border-bottom-left-radius: $card-radius;
|
||||
border-bottom-right-radius: $card-radius;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6, h7, h8, h9, h10 {
|
||||
font-family:$basefont;
|
||||
font-size:1em;
|
||||
padding:0px;
|
||||
margin:0px;
|
||||
color:$color-font-light;
|
||||
font-weight: $fontweight_big;
|
||||
line-height:$lineheight_rel;
|
||||
}
|
||||
}
|
||||
84
scss/mixins/_responsive.scss
Normal file
84
scss/mixins/_responsive.scss
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
// MIXINS RESPONSIVES
|
||||
|
||||
// Small devices
|
||||
@mixin sm {
|
||||
@media (min-width: #{$screen-sm-min}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Medium devices
|
||||
@mixin md {
|
||||
@media (min-width: #{$screen-md-min}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Large devices
|
||||
@mixin lg {
|
||||
@media (min-width: #{$screen-lg-min}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Extra large devices
|
||||
@mixin xl {
|
||||
@media (min-width: #{$screen-xl-min}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Extra large desktops
|
||||
@mixin xxl {
|
||||
@media (min-width: #{$screen-xxl-min}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Custom devices
|
||||
@mixin rwd($screen) {
|
||||
@media (min-width: $screen+'px' ) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin container($size, $padding) {
|
||||
padding-left: $padding;
|
||||
padding-right: $padding;
|
||||
max-width: $size;
|
||||
margin:auto;
|
||||
}
|
||||
|
||||
@mixin responsive() {
|
||||
@content;
|
||||
|
||||
&-sm {
|
||||
@include sm() {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
&-md {
|
||||
@include md() {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
&-lg {
|
||||
@include lg() {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
&-xl {
|
||||
@include xl() {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
&-xxl {
|
||||
@include xxl() {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
33
scss/mixins/_shape.scss
Normal file
33
scss/mixins/_shape.scss
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
@mixin biseau($size) {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
overflow: visible;
|
||||
|
||||
&:before {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -$size/2;
|
||||
right: -$size/2;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
transform: skewX(-15deg);
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin shape-style($size) {
|
||||
@include borders();
|
||||
@include border-radius($btn-radius);
|
||||
@include biseau($size);
|
||||
|
||||
background-color:transparent;
|
||||
}
|
||||
|
||||
@mixin colorize-shape($background-color) {
|
||||
background-color: $background-color;
|
||||
|
||||
&:before {
|
||||
background-color: $background-color;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,27 +1,25 @@
|
|||
/*
|
||||
Theme Name: Kazhnuz Space
|
||||
Theme URI: https://git.kobold.cafe/kazhnuz/kspace-wordpress-theme
|
||||
Theme URI: https://git.kobold.cafe/quarante-douze/qdouze2-wordpress-theme
|
||||
Author: Kazhnuz
|
||||
Author URI: https://kazhnuz.space
|
||||
Description: The default theme for Kazhnuz.space, my personnal blog. Made using spectre.css
|
||||
Version: 0.1
|
||||
Description: The default theme for Kazhnuz Space, my personnal blog.
|
||||
Version: 0.2
|
||||
License: GNU General Public License v3 or later
|
||||
License URI: http://www.gnu.org/licenses/gpl-2.0.html
|
||||
Tags: blog, two-columns, right-sidebar, artist, solarized
|
||||
Tags: blog, two-columns, right-sidebar
|
||||
Text Domain: kspace-wordpress-theme
|
||||
|
||||
This theme is licensed under the GPLv3.
|
||||
*/
|
||||
|
||||
@import 'custom/angled-edges';
|
||||
|
||||
@import 'angled-edges';
|
||||
|
||||
@import 'palette';
|
||||
|
||||
@import 'dep';
|
||||
@import 'definitions';
|
||||
@import 'mixins';
|
||||
|
||||
@import 'typography';
|
||||
|
||||
@import 'global';
|
||||
|
||||
@import 'core';
|
||||
@import 'drawing';
|
||||
@import 'utils';
|
||||
@import 'global';
|
||||
|
|
|
|||
23
scss/utils/_a11y.scss
Normal file
23
scss/utils/_a11y.scss
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
/* 1.0 - Accessibility classes
|
||||
* Some classes to help accessibility
|
||||
**/
|
||||
|
||||
.screen-reader-text {
|
||||
visibility: collapse;
|
||||
font-size:0;
|
||||
}
|
||||
|
||||
.skip {
|
||||
position: absolute;
|
||||
left: -10000px;
|
||||
top: auto;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.skip:focus-within {
|
||||
position: static;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
14
scss/utils/_align.scss
Normal file
14
scss/utils/_align.scss
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
/* 1.1 - Alignement classes
|
||||
* Handle easily alignement and flexboxes
|
||||
**/
|
||||
|
||||
.flex-that {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.align {
|
||||
&-center {text-align: center;text-indent: 0!important;}
|
||||
&-left {text-align: left;}
|
||||
&-right {text-align: right;}
|
||||
}
|
||||
8
scss/utils/_borders.scss
Normal file
8
scss/utils/_borders.scss
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
.round, .pill {
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.no-borders {
|
||||
border-width:0px;
|
||||
border-style:none;
|
||||
}
|
||||
77
scss/utils/_colorize.scss
Normal file
77
scss/utils/_colorize.scss
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
/* 1.2 - Colorization classes
|
||||
* Colorize some aspect of a class
|
||||
**/
|
||||
|
||||
@mixin heading-color($background-color) {
|
||||
|
||||
& .card-header,
|
||||
& .menu-header,
|
||||
&.header-bg th {
|
||||
@include colorize-shape($background-color);
|
||||
color: getTextColorFromBackground($background-color);
|
||||
}
|
||||
|
||||
th {
|
||||
color: $background-color;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin bg-color($background-color) {
|
||||
@include background-color($background-color);
|
||||
|
||||
a {
|
||||
color:currentColor;
|
||||
outline-color: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
.bg {
|
||||
|
||||
@each $name,
|
||||
$color in list-colors() {
|
||||
&-#{$name} {
|
||||
@include bg-color(get-color($name));
|
||||
&:hover {
|
||||
@include bg-color(get-color($name));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
|
||||
@each $name,
|
||||
$color in list-colors() {
|
||||
&-#{$name} {
|
||||
@include text-color(get-color($name));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
|
||||
@each $name,
|
||||
$color in list-colors() {
|
||||
&-#{$name} {
|
||||
@include button-color(get-color($name));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.head {
|
||||
|
||||
@each $name,
|
||||
$color in list-colors() {
|
||||
&-#{$name} {
|
||||
@include heading-color(get-color($name));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fg-light {
|
||||
color: $color-font-light;
|
||||
}
|
||||
|
||||
.fg-dark {
|
||||
color: $color-font;
|
||||
}
|
||||
17
scss/utils/_display.scss
Normal file
17
scss/utils/_display.scss
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
.d-none {
|
||||
@include responsive() {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.d-block {
|
||||
@include responsive() {
|
||||
display: block!important;
|
||||
}
|
||||
}
|
||||
|
||||
.d-flex {
|
||||
@include responsive() {
|
||||
display: flex!important;
|
||||
}
|
||||
}
|
||||
35
scss/utils/_flex.scss
Normal file
35
scss/utils/_flex.scss
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
.f-column {
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
&.reverse {
|
||||
flex-direction:column-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
.f-row {
|
||||
display:flex;
|
||||
flex-direction: row;
|
||||
&.reverse {
|
||||
flex-direction:row-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
.f-start {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.f-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.f-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.f-around {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.f-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
7
scss/utils/_lists.scss
Normal file
7
scss/utils/_lists.scss
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
/* 1.3 - List classes
|
||||
* Handle more easily list
|
||||
**/
|
||||
|
||||
.no-pills {
|
||||
list-style:none;
|
||||
}
|
||||
61
scss/utils/_sizing.scss
Normal file
61
scss/utils/_sizing.scss
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
/* 1.3 - Sizing classes
|
||||
* Handle sizing and margin
|
||||
**/
|
||||
|
||||
@mixin addmargins($name, $size) {
|
||||
&-#{$name} {
|
||||
margin:$size;
|
||||
}
|
||||
|
||||
&b-#{$name} {
|
||||
margin-bottom:$size;
|
||||
}
|
||||
|
||||
&r-#{$name} {
|
||||
margin-right:$size;
|
||||
}
|
||||
|
||||
&l-#{$name} {
|
||||
margin-left:$size;
|
||||
}
|
||||
|
||||
&t-#{$name} {
|
||||
margin-top:$size;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin addpaddings($name, $size) {
|
||||
&-#{$name} {
|
||||
padding:$size;
|
||||
}
|
||||
|
||||
&b-#{$name} {
|
||||
padding-bottom:$size;
|
||||
}
|
||||
|
||||
&r-#{$name} {
|
||||
padding-right:$size;
|
||||
}
|
||||
|
||||
&l-#{$name} {
|
||||
padding-left:$size;
|
||||
}
|
||||
|
||||
&t-#{$name} {
|
||||
padding-top:$size;
|
||||
}
|
||||
}
|
||||
|
||||
.m {
|
||||
@include addmargins("half", $lineheight * .5);
|
||||
@for $i from 0 through 4 {
|
||||
@include addmargins($i, $lineheight*$i)
|
||||
}
|
||||
}
|
||||
|
||||
.p {
|
||||
@include addpaddings("half", $lineheight * .5);
|
||||
@for $i from 0 through 4 {
|
||||
@include addpaddings($i, $lineheight*$i)
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<?php get_header(); ?> <!-- ouvrir header,php -->
|
||||
<main>
|
||||
<h1 class="page-title"><i class="fa fa-fw fa-search" aria-hidden="true"></i><?php _e('', 'sandbox') ?> Recherche pour le terme « <?php echo get_search_query(); ?> »</h1>
|
||||
<main id="skip">
|
||||
<h1 class="page-title"><?php _e('', 'sandbox') ?> Recherche pour le terme « <?php echo get_search_query(); ?> »</h1>
|
||||
|
||||
<?php include(TEMPLATEPATH . '/components/posts-list.php'); ?>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
<aside class="sidebar">
|
||||
<aside class="sidebar" aria-labelledby="title-sidebar">
|
||||
<h1 class="sr-only" id="title-sidebar">Menu de navigation</h1>
|
||||
<?php include(TEMPLATEPATH . '/components/sidebar-content.php'); ?>
|
||||
</aside>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ Template Post Type: post
|
|||
*/
|
||||
|
||||
?> <!-- ouvrir header,php -->
|
||||
<main>
|
||||
<main id="skip">
|
||||
<?php $haveTitle = false; ?>
|
||||
<?php include(TEMPLATEPATH . '/components/article.php'); ?>
|
||||
|
||||
|
|
|
|||
4380
style.css
4380
style.css
File diff suppressed because one or more lines are too long
18
tag.php
18
tag.php
|
|
@ -1,15 +1,10 @@
|
|||
<?php get_header(); ?> <!-- ouvrir header,php -->
|
||||
<main>
|
||||
<main id="skip">
|
||||
<?php $tag = get_category( get_query_var( 'tag' ) );
|
||||
kspace_cat_breadcrumb_with_rss(single_cat_title('', false), 'tag', 'RSS du tag', get_tag_link( $tag->cat_ID ) . '/feed' );
|
||||
?>
|
||||
<?php include(TEMPLATEPATH . '/components/preview-list.php'); ?>
|
||||
</main>
|
||||
<!-- Sidebar custom pour contenir la description -->
|
||||
<aside class="sidebar">
|
||||
<div class="card card-info">
|
||||
<div class="card-header"><i class="fa fa-fw fa-tag"></i> <?php echo single_cat_title(); ?></div>
|
||||
<div class="card-body">
|
||||
|
||||
<div class="well">
|
||||
<?php echo tag_description();?>
|
||||
<?php $infourl = get_term_meta(get_queried_object_id(), 'plus-dinfo', true);
|
||||
if ($infourl != null) {
|
||||
|
|
@ -17,8 +12,9 @@
|
|||
}
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php include(TEMPLATEPATH . '/components/sidebar-content.php'); ?>
|
||||
</aside>
|
||||
<?php include(TEMPLATEPATH . '/components/preview-list.php'); ?>
|
||||
</main>
|
||||
<!-- Sidebar custom pour contenir la description -->
|
||||
<?php get_sidebar(); ?>
|
||||
<?php get_footer(); ?>
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
$query = new WP_Query( $args );
|
||||
?>
|
||||
|
||||
<div class="card card-primary">
|
||||
<div class="card head-primary">
|
||||
<div class="card-header"><i class="fa fa-list" aria-hidden="true"></i> Chapitres</div>
|
||||
<div class="card-menu">
|
||||
<?php if($query->have_posts()) : ?>
|
||||
|
|
|
|||
Reference in a new issue