quarante-douze
/
qdouze2-wordpress-theme
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: optim css

This commit is contained in:
Kazhnuz Klappsthul 2023-11-20 10:05:50 +01:00
parent 7e5131df2a
commit 2781a3efc2
45 changed files with 838 additions and 1902 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
404.php
View File

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

2
category-blog.php
View File

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

4
comments.php
View File

@ -57,7 +57,7 @@ $oddcomment = 'alt';
<?php endif; ?>
<?php if ('open' == $post->comment_status) : ?>
<div class="card head-secondary">
<div class="card c-secondary">
<h2 id="respond" class="card-header">Laissez un commentaire</h2>
<!-- Cas du besoin de s'enregistrer -->
@ -97,7 +97,7 @@ $oddcomment = 'alt';
<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
<?php do_action('comment_form', $post->ID); ?>
<p class="align-right"><button name="submit" class="btn btn-primary" type="submit" id="submit" value="Envoyer" >Envoyer</button>
<p class="align-right"><button name="submit" class="btn c-primary" type="submit" id="submit" value="Envoyer" >Envoyer</button>
</p>

6
components/article/terms.php
View File

@ -5,7 +5,7 @@
echo '<h4 class="sr-only" id="title-article-taxo-romans">Romans</h4>';
$romans = get_the_terms($post->ID, 'roman');
foreach( $romans as $roman ) {
echo "<li><a href= '" . esc_url( get_category_link( $roman->term_id ) ) . "' class='badge btn-primary'><i class='icon-book'></i>&nbsp;" . $roman->name . "</a></li>";
echo "<li><a href= '" . esc_url( get_category_link( $roman->term_id ) ) . "' class='badge c-primary'><i class='icon-book'></i>&nbsp;" . $roman->name . "</a></li>";
}
echo "</ul>";
} else {
@ -13,7 +13,7 @@
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 "<li><a href= '" . esc_url( get_category_link( $category->term_id ) ) . "' class='badge btn-primary'><i class='icon-folder'></i>&nbsp;" . $category->cat_name . "</a></li>";
echo "<li><a href= '" . esc_url( get_category_link( $category->term_id ) ) . "' class='badge c-primary'><i class='icon-folder'></i>&nbsp;" . $category->cat_name . "</a></li>";
}
echo "</ul>";
}
@ -22,7 +22,7 @@
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 "<li><a href= '" . esc_url( get_tag_link( $tag->term_id ) ) . "' class='badge btn-secondary'><i class='icon-tag'></i>&nbsp;" . $tag->name . "</a></li>";
echo "<li><a href= '" . esc_url( get_tag_link( $tag->term_id ) ) . "' class='badge c-secondary'><i class='icon-tag'></i>&nbsp;" . $tag->name . "</a></li>";
}
echo "</ul>";
}

2
components/featured.php
View File

@ -22,7 +22,7 @@
<div class="preview-overlay">
<div class="preview-categories">
<?php $category = get_the_category();
echo"<span class='badge bg-secondary'>" . $category[0]->cat_name . "</span>"; ?>
echo"<span class='badge c-secondary'>" . $category[0]->cat_name . "</span>"; ?>
</div>
<h2 class="preview-title"><?php the_title();/*3*/ ?></h2>

2
components/footer-content.php
View File

@ -1,6 +1,6 @@
<footer class="bg-dark fg-light" aria-labelledby="title-footer">
<h1 class="sr-only" id="title-footer">Informations sur le site</h1>
<nav class="container menu toolbar bg-light fg-dark" aria-labelledby="title-footer-social">
<nav class="container menu toolbar bg fg-dark" aria-labelledby="title-footer-social">
<h2 class="sr-only" id="title-footer-social">Me suivre</h2>
<ul class="f-end">
<?php

2
components/navbar-category.php
View File

@ -1,4 +1,4 @@
<nav class="container menu toolbar bg-light fg-dark categories d-none d-flex-sm">
<nav class="container menu toolbar bg fg-dark categories d-none d-flex-sm">
<h2 class="sr-only">Liste des catégories</h2>
<ul class="f-around">
<?php

2
components/navbar-pages.php
View File

@ -12,7 +12,7 @@
<a href="#" class="menu-item submenu">
Pages <i class="icon-caret-down"></i>
</a>
<ul class="bg-light menu fg-dark">
<ul class="bg menu fg-dark">
<?php
$listmenu = get_nav_menu_locations();
$menu = wp_get_nav_menu_items($listmenu['top-navbar-2']);

4
components/posts-list.php
View File

@ -1,10 +1,10 @@
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<div class="card head-primary" id="post-<?php the_ID(); ?>">
<div class="card c-primary" id="post-<?php the_ID(); ?>">
<div class="card-header"><h1><?php the_title(); ?></h1></div>
<div class="flex-that mb">
<div class="article-category">
<?php $category = get_the_category();
echo"<a href= '" . esc_url( get_category_link( $category[0]->term_id ) ) . "' class='btn-small btn-info'><i class='icon-folder'></i> " . $category[0]->cat_name . "</a>"; ?>
echo"<a href= '" . esc_url( get_category_link( $category[0]->term_id ) ) . "' class='btn btn-small c-info'><i class='icon-folder'></i> " . $category[0]->cat_name . "</a>"; ?>
</div>
<time itemprop="datePublished"><em><?php the_time('j F Y') ?></em></time>
</div>

4
components/previews.php
View File

@ -12,12 +12,12 @@
<?php
if (!has_category('chapters')) {
$category = get_the_category();
echo"<span class='badge bg-secondary small-text m-0'>" . $category[0]->cat_name . "</span>";
echo"<span class='badge c-secondary small-text m-0'>" . $category[0]->cat_name . "</span>";
}
?>
</div>
<div>
<time><span class="badge bg-secondary small-text m-0"><?php the_time('d/m/Y') ?></span></time>
<time><span class="badge c-secondary small-text m-0"><?php the_time('d/m/Y') ?></span></time>
</div>
</div>
<div class="preview-excerpt" aria-excerpt="true"><?php the_excerpt(); ?></div>

2
components/sidebar/archives.php
View File

@ -1,4 +1,4 @@
<section class="card head-secondary">
<section class="card c-secondary">
<h2 class="card-header"><i class="icon-folder" aria-hidden="true"></i> Archives</h2>
<div class="card-body">
<ul class="tag-list">

2
components/sidebar/categories.php
View File

@ -1,4 +1,4 @@
<section class="card head-secondary d-flex-sm d-none">
<section class="card c-secondary d-flex-sm d-none">
<h2 class="card-header"><i class="icon-folder" aria-hidden="true"></i> Catégories</h2>
<div class="menu fg-dark">
<ul>

2
components/sidebar/last-articles.php
View File

@ -1,4 +1,4 @@
<section class="card head-secondary">
<section class="card c-secondary">
<h2 class="card-header"><i class="icon-rss" aria-hidden="true"></i> Publications</h2>
<div class="menu fg-dark">
<ul>

2
components/sidebar/links.php
View File

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

2
components/sidebar/tags.php
View File

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

BIN
fonts/teko-bold-webfont.woff2 Normal file
View File

Binary file not shown.

2
functions.php
View File

@ -172,7 +172,7 @@ function kspace_cat_breadcrumb_with_rss($categoryName, $icon, $categoryType, $rs
<div class="flex-that d-none d-flex-sm">
<?php kspace_cat_breadcrumb_nav($categoryName, $icon); ?>
<div class="rss">
<a href="<?php echo $rssLink; ?>" class="btn btn-warning d-block m-0" /><i class="icon-rss" aria-hidden="true"></i><span class="sr-only">Flux RSS de <?php echo $categoryType; ?></span></a>
<a href="<?php echo $rssLink; ?>" class="btn c-warning d-block m-0" /><i class="icon-rss" aria-hidden="true"></i><span class="sr-only">Flux RSS de <?php echo $categoryType; ?></span></a>
</div>
</div>
<?php

2
header.php
View File

@ -23,7 +23,7 @@
<!-- Début du vrai HTML -->
<body>
<div class="bg-dark skip small-text">
<div class="bg-dark skip small-text fg-light">
<a href="#skip">Accéder au contenu</a>
</div>
<div id="wrapper">

2
page-about.php
View File

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

2
page-links.php
View File

@ -11,7 +11,7 @@
</div>
</article>
<div class="card head-secondary" id="social-network-card">
<div class="card c-secondary" id="social-network-card">
<h2 class="card-header"><i class="icon-comments" aria-hidden="true"></i> Me retrouver</h2>
<table>
<thead>

4
page-roman.php
View File

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

5
scss/_core.scss
View File

@ -2,8 +2,7 @@
** All the basic functions from the stylesheet
*/
@import 'core/normalize';
@import 'core/box-sizing';
@import 'core/bases';
@import 'core/typography';
@import 'core/containers';
@import 'core/columns';
//@import 'core/columns';

2
scss/_drawing.scss
View File

@ -5,6 +5,7 @@
*
*/
@import 'components/badges';
@import 'components/buttons';
@import 'components/btn-groups';
@import 'components/breadcrumb';
@ -13,6 +14,5 @@
@import 'components/menus';
@import 'components/toasts';
@import 'components/tables';
//@import 'components/previews';
@import 'components/sidebar';
@import 'components/input';

9
scss/components/_badges.scss
View File

@ -1,6 +1,9 @@
.badge {
@include button(0rem);
@include shape-style($button_large);
line-height: 1.5em;
padding-left: $button_small;
padding-right: $button_small;
text-decoration:none!important;
}
text-decoration: none !important;
background-color: var(--accent-color);
color: var(--text-color-contrast);
}

50
scss/components/_breadcrumb.scss
View File

@ -1,41 +1,25 @@
/* ------------------ BREADCRUMB ------------------- */
ul.breadcrumb,
ol.breadcrumb,
.breadcrumb {
@include shape-style($button_large);
background-color: $color-background-alt;
ul.breadcrumb, ol.breadcrumb, .breadcrumb {
padding-top: 0em;
background-color:transparent;
margin: 0;
padding-bottom:$lineheight;
&::before {
background-color: $color-background-alt;
}
padding: $button_large/2;
margin: 0 0 $lineheight;
@include li-flex();
}
.breadcrumb li.breadcrumb-item {
padding:0;
margin:0!important;
&:before {
display:none;
.breadcrumb {
li:not(:first-child)::before {
content: "/";
padding: 0.3rem;
}
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);
}
.active {
font-weight: 600;
}
&: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;
}
}

2
scss/components/_btn-groups.scss
View File

@ -1,5 +1,3 @@
// BUTTONS GROUPS
.btn-toolbar {
padding: 0 $button-large;
}

99
scss/components/_buttons.scss
View File

@ -1,35 +1,72 @@
/*
* 3. Buttons and labels
* All clickable elements
*
*/
.btn {
@include button($button_large);
&:hover, &:active {
@include borders();
@include shape-style($button_large);
text-decoration: none;
padding: $button_large/3 $button_large;
margin: $button_large/3 $button_large/2 $lineheight;
line-height: $lineheight;
height: auto;
transition: background-color .2s, border .2s, box-shadow .2s, color .2s;
outline-color: var(--accent-color);
color: var(--text-color-contrast);
background-color: var(--accent-color);
&:visited {
color: var(--text-color-contrast);
}
&:hover,
&:active {
background-color: var(--accent-color-hover);
outline-color: var(--accent-color-hover);
box-shadow: none;
}
font-weight: $fontweight_base;
p &:last-child {
margin-bottom: 0;
}
.fake {
background-color: transparent !important;
color:var(--text-color);
}
}
.btn.disabled,
.btn:disabled {
opacity: 0.8;
background-color: var(--accent-color) !important;
outline-color: var(--accent-color) !important;
color: var(--text-color-contrast) !important;
}
.btn-small {
padding: $button_small/3 $button_small/2;
margin: $button_small/3 $button_small/2 $lineheight;
&:before {
left: -$button_small/2;
right: -$button_small/2;
}
}
.btn-readmore,
.btn-link {
color: var(--link-color);
&:visited {
color: var(--link-color);
}
background-color: transparent;
&:hover,
&:active {
&::before {
background-color: var(--link-color-hover);
}
}
p &:last-child {
margin-bottom:0;
}
}
.btn-small, .badge {
@include button($button_small);
padding-left: $button_small;
padding-right: $button_small;
text-decoration:none;
}
// COLORIZE BUTTONS
strong.btn-fake {
@include button($button_large);
@include button-fullcontrol(transparent, transparent, rgba(0,0,0,1));
}
.btn-readmore, .btn-link {
@include button-fullcontrol(transparent, accentuate($color-background-alt), $color-primary);
@include prefer-no-borders();
}

59
scss/components/_cards.scss
View File

@ -1,40 +1,39 @@
/*
* 2. Cards and containers
* All elements that are supposed to contain other stuff
*
*
*/
$card-bigpad: $lineheight_rel;
$card-bigpad: $lineheight_rel * 1.25;
$card-smallpad: $lineheight_rel / 4;
.card {
@include panel($card-bigpad);
display: flex;
flex-direction: column;
color:$color-font;
color: $color-font;
&-body {
padding:0!important;
padding: 0 !important;
}
&-header {
@include panel-header($card-bigpad);
.fa {
margin-right: 0.5em;
.icon {
margin-right: 0.25em;
}
font-family: $basefont;
color: var(--text-color-contrast);
&::before {
background-color: var(--accent-color);
}
}
}
/* CARD LIST - Make a list part of a card */
@mixin list-symbol($symbol) {
li.list-element {
list-style: none;
&::before {
font-family: "ForkAwesome";
content:$symbol;
content: $symbol;
padding-right: $lineheight_rel / 4;
}
}
@ -48,26 +47,14 @@ $card-smallpad: $lineheight_rel / 4;
}
}
ul.card-list, .card > ul {
padding:0;
margin:0;
ul.card-list,
.card>ul {
padding: 0;
margin: 0;
li.list-element {
line-height:$lineheight_rel / 2;
line-height: $lineheight_rel / 2;
padding: $lineheight_rel / 4, $lineheight_rel / 4, $lineheight_rel / 4, $lineheight_rel / 2;
margin:0;
margin: 0;
}
}
.list {
&-check {@include list-symbol("\f00c");}
&-cross {@include list-symbol("\f00d");}
&-danger{@include list-color($color-danger);}
&-success{@include list-color($color-success);}
}
.smallcard {
&-header {
@include panel-header($card-bigpad);
}
}
}

84
scss/components/_input.scss
View File

@ -6,4 +6,88 @@ textarea {
border: 0px solid rgba(0, 0, 0, 0);
padding: $lineheight_rel / 4;
line-height: $lineheight_rel;
}button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-size: 100%;
line-height: inherit;
margin: 0;
}
button,
select {
text-transform: none;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
appearance: button;
-webkit-appearance: button;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 2px dotted var(--accent-color);
}
fieldset {
padding: 0.35em 0.75em 0.625em;
}
legend {
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal;
}
progress {
vertical-align: baseline;
}
textarea {
overflow: auto;
}
[type="checkbox"],
[type="radio"] {
box-sizing: border-box;
padding: 0;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
[type="search"] {
appearance: textfield;
-webkit-appearance: textfield;
outline-offset: -2px;
}
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
}

65
scss/components/_menus.scss
View File

@ -1,5 +1,3 @@
/* Menu handling */
.menu {
display: flex;
flex-direction: column;
@ -13,7 +11,6 @@
a,
a:visited {
@include shape-style($lineheight_half);
display: flex;
line-height: $lineheight_rel;
padding: $lineheight_rel / 4;
@ -26,47 +23,19 @@
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;
a {
color: var(--text-color);
outline-color: var(--text-color);
&: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;
&:hover,
&:active,
&.submenu:focus {
background-color: var(--link-color-hover);
}
}
}
@ -74,7 +43,7 @@
.submenu .fa-caret-down {
position: relative;
top: 2px;
font-size:0.8em;
font-size: 0.8em;
}
.toolbar {
@ -98,9 +67,7 @@
strong,
&.toolbar-element {
display: block;
padding: $lineheight_rel/3;
padding-left: $lineheight_rel/2;
padding-right: $lineheight_rel/2;
padding: $lineheight_rel/3 $lineheight_rel/2;
}
ul {
@ -111,7 +78,9 @@
margin-top: 0rem;
left: 0;
display: none;
padding:0.33rem;
padding: 0.33rem;
z-index: 2;
background-color: $color-background-alt;
}
&:hover ul,
@ -122,10 +91,11 @@
display: flex;
flex-direction: column;
border-radius: $card-radius;
box-shadow:0px 1px 1px rgba(0,0,0,0.2);
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
width: max-content;
li {
text-align:left;
text-align: left;
}
}
}
@ -141,12 +111,11 @@ ul.menu h2 {
font-weight: $fontweight_hyper;
padding-top: $lineheight_rel / 4;
padding-bottom: $lineheight_rel / 4;
font-size:1em;
line-height:$lineheight_rel;
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;

39
scss/components/_pagination.scss
View File

@ -1,25 +1,32 @@
nav.pagination {
padding-bottom:$lineheight;
padding-bottom: $lineheight;
.nav-links {
text-align: center;
width:100%;
width: 100%;
}
.page-numbers, .next, .prev {
@include button($button_small);
padding-left: $button_small;
padding-right: $button_small;
margin-right : $button_small / 8;
margin-left: $button_small / 8;
text-decoration: none;
.page-numbers,
.next,
.prev {
@include shape-style($button_small);
padding: $button_small/2 $button_small;
margin: $button_small / 2;
text-decoration: none;
&:not(.current) {
@include button-color($color-background-alt);
outline-color: mix($color-background-alt, getTextColorFromBackground($color-background-alt), 85%);
&:not(.current):not(.dots) {
outline-color: var(--accent-color);
color: var(--link-color);
&:hover {
background-color: var(--link-color-hover);
}
}
&.current {
@include background-color($color-primary);
}
&.current {
@include background-color($color-primary);
background-color: $color-primary;
}
}
}
}

5
scss/components/_previews.scss
View File

@ -1,8 +1,3 @@
/*
* 4. Previews
* Special style for previews cards
*
*/
$preview-height: 8*$lineheight;
$preview-content-height:165px;
$comment-peek-height:0px;

4
scss/components/_tables.scss
View File

@ -1,7 +1,3 @@
/* TABLE
* Style tables
*/
table {
border-collapse: collapse;
}

39
scss/components/_toasts.scss
View File

@ -1,8 +1,33 @@
.toast {
@include panel($card-smallpad);
padding:$card-smallpad;
font-size: 0.8rem;
a {
margin: 0;
}
@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,
.well,
pre,
.pre,
.well-pre,
.toast,
.code {
@include well();
}
.toast {
font-size: 0.8rem;
line-height: 1.5em;
padding: $card-smallpad * 2;
}
code {
font-family: monospace, monospace;
}

47
scss/core/_bases.scss Normal file
View File

@ -0,0 +1,47 @@
*,
*::before,
*::after {
box-sizing: inherit;
}
html {
// Text initialization
font-family: $basefont;
text-align: left;
font-size: $fontsize;
line-height: $lineheight;
font-weight: $fontweight_base;
// Normalization
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
overflow-x: hidden;
text-rendering: optimizeLegibility;
color: var(--text-color);
}
abbr[title] {
border-bottom: none;
text-decoration: underline;
text-decoration: underline dotted;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}

99
scss/core/_typography.scss
View File

@ -1,23 +1,14 @@
/* 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;
:root {
@include accent-color($color-primary);
--text-color:#{$color-font};
--link-color-hover:#{transparentize($color-font, 0.85)};
--link-color:#{darken($color-link, 10%)};
}
strong {
@ -35,26 +26,21 @@ mark {
}
a {
color: darken($color-link, 25%);
color: var(--link-color);
outline-color: $color-link;
padding: 0.05rem;
border-radius: 0.1rem;
text-decoration: underline dashed;
text-decoration: underline dashed 1px;
text-underline-offset: 0.1rem;
&:visited {
color: darken($color-link, 25%);
color: var(--link-color);
}
&: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;
}
&:hover,
&:active {
background-color: var(--link-color-hover);
text-decoration: none;
}
}
@ -105,8 +91,6 @@ ul, ol {
@include background-color($color-selection);
}
/* 2.3 - Titles */
@mixin newTitle($size, $weight) {
$lineNumber: ceil($size / 1.5);
font-size: $size * 1rem;
@ -168,53 +152,28 @@ 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;
border: 0px solid rgba(1, 1, 1, 0.15);
border-bottom: 1px;
margin: 1.5em;
box-sizing: content-box;
height: 0;
overflow: visible;
}
/* 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;
pre {
font-family: monospace, monospace;
font-size: 1em;
}
blockquote, .quote {
&:before {
content:"";
}
}
blockquote, .quote, .well, pre, .pre, .well-pre {
@include well();
}
code {
background:transparent;
color: $color-danger;
}
.small-text {
.small-text,
small {
font-size: 0.9em;
}
/* 2.6 - Special styling */
.time {
font-style: italic;
text-align: right;
width: 100%;
display: block;
}
font-style: italic;
text-align: right;
width: 100%;
display: block;
}

49
scss/custom/_global.scss
View File

@ -157,41 +157,6 @@ ul.tag-list {
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 {
@ -211,12 +176,20 @@ body {
footer {
color: $color-footer-text;
--link-color: $color-footer-text;
padding-bottom:1.5rem;
.columns {
font-size:0.8rem;
a {
color: $color-footer-text;
}
margin-top: 1.5rem;
@include md() {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: $lineheight;
}
.col {
margin-bottom: $lineheight;
}
}
}

3
scss/definitions/_fonts.scss
View File

@ -48,6 +48,7 @@ $titlefont: Teko, sans-serif;
@font-face {
font-family: 'Teko';
src: url('fonts/teko-bold-webfont.woff');
src: url('fonts/teko-bold-webfont.woff2') format('woff2'), url('fonts/teko-bold-webfont.woff') format('woff');
font-weight: 700;
font-display: swap;
}

4
scss/definitions/_palette.scss
View File

@ -25,7 +25,7 @@ $palette: (
"yellow":#ffe066,
"grey":#adb5bd,
"dark2":#212529,
"light2":#f1f3f5);
"light2":#e9ecef);
$palette-light: (
"blue": #a5d8ff,
@ -36,7 +36,7 @@ $palette-light: (
"skyblue":#99e9f2,
"yellow":#ffec99,
"light":#ffffff,
"grey":#f1f3f5,
"grey":#e9ecef,
"dark":#adb5bd
);

6
scss/mixins/_colors.scss
View File

@ -58,3 +58,9 @@
background-color: $background-color;
color: getTextColorFromBackground($background-color);
}
@mixin accent-color($accent-color) {
--accent-color: #{$accent-color};
--text-color-contrast: #{getTextColorFromBackground($accent-color)};
--accent-color-hover: #{accentuate($accent-color)};
}

59
scss/mixins/_panels.scss
View File

@ -26,40 +26,33 @@
}
@mixin panel-header($size) {
font-size:1.1em;
font-weight: $fontweight_big;
padding: $size/2;
padding-left:$card-header-padding;
padding-right:$card-header-padding;
padding-bottom: $size/2!important;
margin:$card-header-hmargin;
margin-bottom:$lineheight_rel / 2;
margin-top:$lineheight_rel / 2;
line-height:$lineheight_rel;
white-space: nowrap;
font-family: $basefont;
font-size: 1em;
font-weight: $fontweight_bold;
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;
}
padding: $size/2 $card-header-padding;
padding-bottom: $size/2 !important;
margin: $lineheight_rel / 2 $card-header-hmargin;
// margin-bottom:$lineheight_rel / 2;
// margin-top:$lineheight_rel / 2;
line-height: 1;
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;
}
position: relative;
left: $card-header-position;
width: $card-header-width;
@include shape-style($size);
background-color: var(--accent-color);
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;
}
}

21
scss/utils/_a11y.scss
View File

@ -2,10 +2,25 @@
* Some classes to help accessibility
**/
.screen-reader-text, .sr-only {
visibility: collapse;
font-size:0;
.sr-only, .screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.sr-only-focusable:active,
.sr-only-focusable:focus {
position: static;
width: auto;
height: auto;
margin: 0;
overflow: visible;
clip: auto;
}
.skip {

87
scss/utils/_colorize.scss
View File

@ -2,6 +2,17 @@
* Colorize some aspect of a class
**/
.c {
@each $name,
$color in list-colors() {
&-#{$name} {
@include accent-color(get-color($name));
}
}
}
@mixin heading-color($background-color) {
& .card-header,
@ -25,17 +36,20 @@
}
}
.bg {
.bg-accent {
background-color: var(--accent-color);
}
@each $name,
$color in list-colors() {
&-#{$name} {
@include bg-color(get-color($name));
&:hover {
@include bg-color(get-color($name));
}
}
}
.bg-dark {
background-color: get-color("dark");
}
.bg {
background-color: $color-background;
}
.bg-alt {
background-color: $color-background-alt;
}
.bg-soft {
@ -52,40 +66,43 @@
}
}
.text {
// .text {
@each $name,
$color in list-colors() {
&-#{$name} {
@include text-color(get-color($name));
}
}
}
// @each $name,
// $color in list-colors() {
// &-#{$name} {
// @include text-color(get-color($name));
// }
// }
// }
.btn {
// .btn {
@each $name,
$color in list-colors() {
&-#{$name} {
@include button-color(get-color($name));
}
}
}
// @each $name,
// $color in list-colors() {
// &-#{$name} {
// @include button-color(get-color($name));
// }
// }
// }
.head {
// .head {
@each $name,
$color in list-colors() {
&-#{$name} {
@include heading-color(get-color($name));
}
}
}
// @each $name,
// $color in list-colors() {
// &-#{$name} {
// @include heading-color(get-color($name));
// }
// }
// }
.fg-light {
color: $color-font-light;
--text-color:#{$color-font-light};
--link-color-hover:#{transparentize($color-font-light, 0.7)};
}
.fg-dark {
color: $color-font;
--text-color:#{$color-font};
--link-color-hover:#{transparentize($color-font, 0.85)};
}

1849
style.css
View File

File diff suppressed because it is too large Load Diff

2
taxonomy-roman.php
View File

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