fix: use qdouze branding

This commit is contained in:
Kazhnuz 2022-12-18 09:46:44 +01:00
parent d4c3a6f5be
commit 618b1461cf
21 changed files with 190 additions and 247 deletions

View file

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

View file

@ -1,7 +1,7 @@
<div class="flex-that"> <div class="flex-that">
<nav aria-label="breadcrumb"> <nav aria-label="breadcrumb">
<ol class="breadcrumb"> <ol class="breadcrumb">
<li class='breadcrumb-item'><a href='<?php echo site_url(); ?>'>kazhnuz.space</a></li><?php <li class='breadcrumb-item'><a href='<?php echo site_url(); ?>'>Quarante-Douze</a></li><?php
if (has_category('chapters')) { if (has_category('chapters')) {
$romans = get_the_terms($post->ID, 'roman'); $romans = get_the_terms($post->ID, 'roman');
foreach( $romans as $roman ) { foreach( $romans as $roman ) {

View file

@ -2,18 +2,18 @@
if (has_category('chapters')) { if (has_category('chapters')) {
$romans = get_the_terms($post->ID, 'roman'); $romans = get_the_terms($post->ID, 'roman');
foreach( $romans as $roman ) { foreach( $romans as $roman ) {
echo "<a href= '" . esc_url( get_category_link( $roman->term_id ) ) . "' class='btn-small btn-info'><i class='fa fa-book'></i> " . $roman->name . "</a>"; echo "<a href= '" . esc_url( get_category_link( $roman->term_id ) ) . "' class='btn-small btn-primary'><i class='fa fa-book'></i> " . $roman->name . "</a>";
} }
} else { } else {
$categories = get_the_category(); $categories = get_the_category();
foreach( $categories as $category ) { foreach( $categories as $category ) {
echo "<a href= '" . esc_url( get_category_link( $category->term_id ) ) . "' class='btn-small btn-info'><i class='fa fa-folder'></i> " . $category->cat_name . "</a>"; echo "<a href= '" . esc_url( get_category_link( $category->term_id ) ) . "' class='btn-small btn-primary'><i class='fa fa-folder'></i> " . $category->cat_name . "</a>";
} }
} }
$tags = get_the_tags(); $tags = get_the_tags();
if ($tags) { if ($tags) {
foreach( $tags as $tag ) { foreach( $tags as $tag ) {
echo "<a href= '" . esc_url( get_tag_link( $tag->term_id ) ) . "' class='btn-small btn-primary'><i class='fa fa-tag'></i> " . $tag->name . "</a> "; echo "<a href= '" . esc_url( get_tag_link( $tag->term_id ) ) . "' class='btn-small btn-secondary'><i class='fa fa-tag'></i> " . $tag->name . "</a> ";
} }
} }
?> ?>

View file

@ -25,11 +25,11 @@
<div class="col-md-4"> <div class="col-md-4">
<p>Ce site est propulsé par <a href="https://wordpress.org">Wordpress</a></p> <p>Ce site est propulsé par <a href="https://wordpress.org">Wordpress</a></p>
<p>Le <a href="https://git.kobold.cafe/kazhnuz.space/kspace-wordpress-theme">theme wordpress</a> de ce site est disponible sous licence CC BY-SA et GPL v3. Il utilise <a href="https://picturepan2.github.io/spectre/">Spectre</a> et <a href="https://forkawesome.github.io/Fork-Awesome/">Fork-Awesome</a>.</p> <p>Le <a href="https://git.kobold.cafe/quarante-douze/qdouze2-wordpress-theme">theme wordpress</a> de ce site est disponible sous licence CC BY-SA et GPL v3. Il utilise <a href="https://picturepan2.github.io/spectre/">Spectre</a> et <a href="https://forkawesome.github.io/Fork-Awesome/">Fork-Awesome</a>.</p>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<p>Kazhnuz Space et les différents sites/services qui le composent sont fourni "tel-quel", sans garantie. Cependant, toute critique, remarque, etc. est la bienvenue. Pour cela, vous pouvez me contacter à kazhnuz [at] kobold [point] cafe ou sur les réseaux sociaux visible plus haut</p> <p>Toute critique, remarque, etc. est la bienvenue. Pour cela, vous pouvez me contacter à kazhnuz [at] kobold [point] cafe ou sur mes <a href="https://kazhnuz.space/links">réseaux sociaux</a></p>
</div> </div>
</div> </div>
</footer> </footer>

View file

@ -1,28 +1,11 @@
<nav class="menu toolbar fg-light"> <div class="osd">
<nav class="container menu toolbar fg-light">
<ul> <ul>
<li> <li>
<a href="<?php echo site_url(); ?>" class="btn btn-navbar"> <a href="<?php echo site_url(); ?>" class="btn btn-navbar">
<i class="fa fa-home" aria-hidden="true"></i><span class="sr-only">Accueil</span> <i class="fa fa-home" aria-hidden="true"></i><span class="sr-only">Accueil</span>
</a> </a>
</li> </li>
<li>
<span class="btn btn-navbar">
Catégories <i class="fa fa-caret-down" aria-hidden="true"></i>
<ul class="card-menu">
<?php
$categories = get_categories( array(
'orderby' => 'name',
'order' => 'ASC'
) );
foreach( $categories as $category ) {
if ($category->slug != "blog" && $category->slug != "chapters") {
echo '<li><a class="menu-element" href="' . get_category_link($category->term_id) . '">' . $category->name . '</a></li>';
}
}?>
</ul>
</span>
</li>
<?php <?php
$listmenu = get_nav_menu_locations(); $listmenu = get_nav_menu_locations();
$menu = wp_get_nav_menu_items($listmenu['top-navbar']); $menu = wp_get_nav_menu_items($listmenu['top-navbar']);
@ -43,4 +26,4 @@
<li><a href="<?php bloginfo('rss2_url'); ?>" class="btn btn-navbar"><i class="fa fa-rss" aria-hidden="true"></i><span class="sr-only">Flux RSS du site</span></a></li> <li><a href="<?php bloginfo('rss2_url'); ?>" class="btn btn-navbar"><i class="fa fa-rss" aria-hidden="true"></i><span class="sr-only">Flux RSS du site</span></a></li>
</ul> </ul>
</nav> </nav>
</div>

View file

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

View file

@ -1,4 +1,4 @@
<div class="card head-primary"> <div class="card head-secondary">
<div class="card-header"><i class="fa fa-folder" aria-hidden="true"></i> Catégories</div> <div class="card-header"><i class="fa fa-folder" aria-hidden="true"></i> Catégories</div>
<div class="menu fg-dark"> <div class="menu fg-dark">
<ul> <ul>
@ -10,7 +10,7 @@
foreach( $categories as $category ) { foreach( $categories as $category ) {
if ($category->slug != "blog" && $category->slug != "chapters") { if ($category->slug != "blog" && $category->slug != "chapters") {
echo '<li><a class="menu-element" href="' . get_category_link($category->term_id) . '">' . $category->name . '<span class="badge bg-secondary m0">'. $category->count . '</span></a></li>'; echo '<li><a class="menu-element" href="' . get_category_link($category->term_id) . '">' . $category->name . '<span class="badge bg-primary m0">'. $category->count . '</span></a></li>';
} }
}?> }?>
</ul> </ul>

View file

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

View file

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

View file

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

View file

@ -1,7 +1,7 @@
<?php <?php
/* functions.php /* functions.php
* *
* All the function of Kazhnuz.Space * All the function of Quarante-Douze
* *
*/ */
@ -114,7 +114,7 @@ function kspace_cat_breadcrumb_nav($categoryName, $icon) {
?> ?>
<nav aria-label="breadcrumb"> <nav aria-label="breadcrumb">
<ol class="breadcrumb"> <ol class="breadcrumb">
<li class="breadcrumb-item"><a href="<?php echo site_url(); ?>">kazhnuz.space</a> <li class="breadcrumb-item"><a href="<?php echo site_url(); ?>">Quarante-Douze</a>
</li><li class="breadcrumb-item" aria-current="page"> </li><li class="breadcrumb-item" aria-current="page">
<span class="active"><i class="fa fa-<?php echo $icon; ?>" aria-hidden="true"></i> <?php echo $categoryName; ?></span> <span class="active"><i class="fa fa-<?php echo $icon; ?>" aria-hidden="true"></i> <?php echo $categoryName; ?></span>
</li> </li>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.1 KiB

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 306 KiB

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 147 KiB

After

Width:  |  Height:  |  Size: 100 KiB

View file

@ -22,7 +22,7 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
margin:0 $button-group-margin 0 $button-group-margin; margin:0 $button-group-margin 0 $button-group-margin;
&.active { &.active {
@include button-fullcontrol($color-primary, $color-primary, $color-font-light); @include button-fullcontrol($color-secondary, $color-secondary, $color-font-light);
} }
} }

View file

@ -16,9 +16,9 @@ nav.pagination {
} }
&.current { &.current {
@include background-color($color-info); @include background-color($color-primary);
&:hover { &:hover {
@include background-color($color-info); @include background-color($color-primary);
} }
} }
} }

View file

@ -174,7 +174,7 @@ $comment-height:30px;
.card-preview.head-info { .card-preview.head-info {
.comment-text { .comment-text {
background-color:$color-info; background-color:$color-secondary;
} }
} }

View file

@ -31,9 +31,7 @@
/* ------------------ HEADERS ------------------- */ /* ------------------ HEADERS ------------------- */
#page-header { #page-header {
background: $color-primary url('img/background.png') center bottom repeat-x; background: $color-primary url('img/background.png');
padding-top: .75rem;
padding-bottom:1.5rem;
} }
header h1 { header h1 {
@ -41,13 +39,14 @@ header h1 {
font-weight: $fontweight_hyper; font-weight: $fontweight_hyper;
font-size:5.4em; font-size:5.4em;
font-style:oblique; font-style:oblique;
padding-bottom:0px; padding:1.5rem;
line-height: 1.5em; line-height: 1rem;
max-width: 1600px; max-width: 1600px;
margin: auto; margin: auto;
text-align:center;
img { img {
width: 600px; width: 800px;
height: auto; height: auto;
margin-top:0rem; margin-top:0rem;
} }
@ -57,49 +56,8 @@ header h1 {
} }
} }
.toolbar { .osd {
display:flex; background-color:rgba(0,0,0,0.3);
justify-content: space-between;
margin:auto;
padding:0;
max-width: 1600px;
z-index:2;
ul {
display:flex;
margin: 0;
padding: 0;
li {
list-style: none;
margin:0;
position:relative;
z-index: 2;
ul {
display:none;
position:absolute;
left:-0.75rem;
background-color:$color-background;
padding: 1.5rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3);
z-index: 2;
}
&:hover {
ul {
display:flex;
flex-direction:column;
}
}
}
}
.btn-navbar {
margin:0rem;
margin-left:0.75rem;
margin-right: 0.75rem;
}
} }
.navbar { .navbar {
@ -228,8 +186,8 @@ ul.tag-list {
/* ------------------ FOOTER ------------------- */ /* ------------------ FOOTER ------------------- */
$color-footer-back: getColor("dark"); $color-footer-back: get-color("dark");
$color-footer-text: getColor("light"); $color-footer-text: get-color("light");
body { body {
// On colorise le background de la page complete de la même // On colorise le background de la page complete de la même
@ -243,25 +201,14 @@ footer {
font-size: 0.8rem!important; font-size: 0.8rem!important;
padding-bottom:1.5rem; padding-bottom:1.5rem;
.footer-collumns { a,
@include container-big(); a:visited {
display: grid; &:hover,
grid-template-columns: 1fr; &:active,
grid-template-rows: auto; &:visited {
grid-gap: $lineheight;
padding-bottom: $lineheight;
@include lg() {
grid-template-columns: 1fr 1fr 1fr;
}
a, a:visited {
&:hover, &:active, &:visited {
color: $color-footer-text; color: $color-footer-text;
} }
} }
}
} }
/* social media */ /* social media */

View file

@ -9,4 +9,34 @@ $fontweight_bold: 600;
$fontweight_hyper: 800; $fontweight_hyper: 800;
$basefont: Open Sans, sans-serif; $basefont: Open Sans, sans-serif;
$titlefont: Open Sans, sans-serif; $titlefont: Teko, sans-serif;
@font-face {
font-family: 'Teko';
src: url('fonts/teko-light-webfont.woff');
font-weight: 300;
}
@font-face {
font-family: 'Teko';
src: url('fonts/teko-regular-webfont.woff');
font-weight: 400;
}
@font-face {
font-family: 'Teko';
src: url('fonts/teko-medium-webfont.woff');
font-weight: 500;
}
@font-face {
font-family: 'Teko';
src: url('fonts/teko-semibold-webfont.woff');
font-weight: 600;
}
@font-face {
font-family: 'Teko';
src: url('fonts/teko-bold-webfont.woff');
font-weight: 700;
}

View file

@ -16,7 +16,7 @@ $whiteness_value: 0.8;
$palette: ( $palette: (
"blue":#339af0, "blue":#339af0,
"violet":#845ef7, "violet":#845ef7,
"red":#ff6b6b, "red":#e33d22,
"orange":#ff922b, "orange":#ff922b,
"green":#51cf66, "green":#51cf66,
"skyblue":#3bc9db, "skyblue":#3bc9db,
@ -28,7 +28,7 @@ $palette: (
"light2":#f1f3f5); "light2":#f1f3f5);
$semantics: ( $semantics: (
"primary":"blue", "primary":"red",
"secondary":"dark", "secondary":"dark",
"warning":"orange", "warning":"orange",
"danger":"red", "danger":"red",
@ -41,7 +41,7 @@ $helpers: (
"font-light":"light", "font-light":"light",
"background":"light", "background":"light",
"background-alt":"light2", "background-alt":"light2",
"link":"blue", "link":"red",
"selection":"blue", "selection":"blue",
"mark":"yellow", "mark":"yellow",
); );

205
style.css
View file

@ -22,6 +22,31 @@
* également celles spécifiques pour certains sujets (liens, texte) * également celles spécifiques pour certains sujets (liens, texte)
* *
*/ */
@font-face {
font-family: 'Teko';
src: url("fonts/teko-light-webfont.woff");
font-weight: 300; }
@font-face {
font-family: 'Teko';
src: url("fonts/teko-regular-webfont.woff");
font-weight: 400; }
@font-face {
font-family: 'Teko';
src: url("fonts/teko-medium-webfont.woff");
font-weight: 500; }
@font-face {
font-family: 'Teko';
src: url("fonts/teko-semibold-webfont.woff");
font-weight: 600; }
@font-face {
font-family: 'Teko';
src: url("fonts/teko-bold-webfont.woff");
font-weight: 700; }
/* --- 00. COLORS --- */ /* --- 00. COLORS --- */
/* /*
* La gestion des couleurs dans le theme. Cette partie de la stylesheet est * La gestion des couleurs dans le theme. Cette partie de la stylesheet est
@ -376,10 +401,10 @@ a, a:visited, mark {
border-radius: 0.1rem; } border-radius: 0.1rem; }
a, a:visited { a, a:visited {
background-color: #339af0; background-color: #e33d22;
color: #fefefe; } color: #fefefe; }
a:hover, a:active, a:focus, a:visited:hover, a:visited:active, a:visited:focus { a:hover, a:active, a:focus, a:visited:hover, a:visited:active, a:visited:focus {
color: #339af0; color: #e33d22;
background-color: transparent; } background-color: transparent; }
a:focus, a:visited:focus { a:focus, a:visited:focus {
outline-color: currentColor; outline-color: currentColor;
@ -422,23 +447,23 @@ h1, h2, h3, h4, h5, h6, h7 {
padding-bottom: 1.6rem; } padding-bottom: 1.6rem; }
sup > a, sub > a { sup > a, sub > a {
color: #339af0; color: #e33d22;
background-color: transparent; } background-color: transparent; }
sup > a:hover, sup > a:focus, sup > a:active, sub > a:hover, sub > a:focus, sub > a:active { sup > a:hover, sup > a:focus, sup > a:active, sub > a:hover, sub > a:focus, sub > a:active {
color: #1081e0; } color: #ba2e18; }
.main-title { .main-title {
font-family: Open Sans, sans-serif; font-family: Teko, sans-serif;
font-size: 3.815rem; font-size: 3.815rem;
line-height: 4.8rem; line-height: 4.8rem;
font-weight: 800; } font-weight: 800; }
h1, .title-1 { h1, .title-1 {
font-family: Open Sans, sans-serif; font-family: Teko, sans-serif;
font-size: 2.441rem; font-size: 2.441rem;
line-height: 3.2rem; line-height: 3.2rem;
font-weight: 800; font-weight: 800;
color: #339af0; } color: #e33d22; }
h2, .title-2 { h2, .title-2 {
font-size: 2.441rem; font-size: 2.441rem;
@ -488,7 +513,7 @@ blockquote, .quote, .well, pre, .pre, .well-pre {
code { code {
background: transparent; background: transparent;
color: #ff6b6b; } color: #e33d22; }
.small-text { .small-text {
font-size: 0.9em; } font-size: 0.9em; }
@ -1081,13 +1106,13 @@ strong.btn-fake {
.btn-readmore, .btn-link { .btn-readmore, .btn-link {
background-color: transparent; background-color: transparent;
color: #339af0; } color: #e33d22; }
.btn-readmore:visited, .btn-link:visited { .btn-readmore:visited, .btn-link:visited {
background-color: transparent; background-color: transparent;
color: #339af0; } color: #e33d22; }
.btn-readmore:hover, .btn-readmore:active, .btn-readmore:focus, .btn-readmore:visited:hover, .btn-readmore:visited:active, .btn-readmore:visited:focus, .btn-readmore:not(.disabled):not(:disabled):hover, .btn-readmore:not(.disabled):not(:disabled):active, .btn-readmore:not(.disabled):not(:disabled):focus, .btn-link:hover, .btn-link:active, .btn-link:focus, .btn-link:visited:hover, .btn-link:visited:active, .btn-link:visited:focus, .btn-link:not(.disabled):not(:disabled):hover, .btn-link:not(.disabled):not(:disabled):active, .btn-link:not(.disabled):not(:disabled):focus { .btn-readmore:hover, .btn-readmore:active, .btn-readmore:focus, .btn-readmore:visited:hover, .btn-readmore:visited:active, .btn-readmore:visited:focus, .btn-readmore:not(.disabled):not(:disabled):hover, .btn-readmore:not(.disabled):not(:disabled):active, .btn-readmore:not(.disabled):not(:disabled):focus, .btn-link:hover, .btn-link:active, .btn-link:focus, .btn-link:visited:hover, .btn-link:visited:active, .btn-link:visited:focus, .btn-link:not(.disabled):not(:disabled):hover, .btn-link:not(.disabled):not(:disabled):active, .btn-link:not(.disabled):not(:disabled):focus {
background-color: #dbe0e5; background-color: #dbe0e5;
color: #4ba6f2; } color: #e65139; }
.btn-readmore:not(:hover), .btn-link:not(:hover) { .btn-readmore:not(:hover), .btn-link:not(:hover) {
border-color: transparent; } border-color: transparent; }
@ -1160,13 +1185,13 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
background-color: #dbe0e5; background-color: #dbe0e5;
color: #2c3237; } color: #2c3237; }
.breadcrumb li.breadcrumb-item a.active, .breadcrumb li.breadcrumb-item > span.active { .breadcrumb li.breadcrumb-item a.active, .breadcrumb li.breadcrumb-item > span.active {
background-color: #339af0; background-color: #343a40;
color: #fefefe; } color: #fefefe; }
.breadcrumb li.breadcrumb-item a.active:visited, .breadcrumb li.breadcrumb-item > span.active:visited { .breadcrumb li.breadcrumb-item a.active:visited, .breadcrumb li.breadcrumb-item > span.active:visited {
background-color: #339af0; background-color: #343a40;
color: #fefefe; } color: #fefefe; }
.breadcrumb li.breadcrumb-item a.active:hover, .breadcrumb li.breadcrumb-item a.active:active, .breadcrumb li.breadcrumb-item a.active:focus, .breadcrumb li.breadcrumb-item a.active:visited:hover, .breadcrumb li.breadcrumb-item a.active:visited:active, .breadcrumb li.breadcrumb-item a.active:visited:focus, .breadcrumb li.breadcrumb-item a.active:not(.disabled):not(:disabled):hover, .breadcrumb li.breadcrumb-item a.active:not(.disabled):not(:disabled):active, .breadcrumb li.breadcrumb-item a.active:not(.disabled):not(:disabled):focus, .breadcrumb li.breadcrumb-item > span.active:hover, .breadcrumb li.breadcrumb-item > span.active:active, .breadcrumb li.breadcrumb-item > span.active:focus, .breadcrumb li.breadcrumb-item > span.active:visited:hover, .breadcrumb li.breadcrumb-item > span.active:visited:active, .breadcrumb li.breadcrumb-item > span.active:visited:focus, .breadcrumb li.breadcrumb-item > span.active:not(.disabled):not(:disabled):hover, .breadcrumb li.breadcrumb-item > span.active:not(.disabled):not(:disabled):active, .breadcrumb li.breadcrumb-item > span.active:not(.disabled):not(:disabled):focus { .breadcrumb li.breadcrumb-item a.active:hover, .breadcrumb li.breadcrumb-item a.active:active, .breadcrumb li.breadcrumb-item a.active:focus, .breadcrumb li.breadcrumb-item a.active:visited:hover, .breadcrumb li.breadcrumb-item a.active:visited:active, .breadcrumb li.breadcrumb-item a.active:visited:focus, .breadcrumb li.breadcrumb-item a.active:not(.disabled):not(:disabled):hover, .breadcrumb li.breadcrumb-item a.active:not(.disabled):not(:disabled):active, .breadcrumb li.breadcrumb-item a.active:not(.disabled):not(:disabled):focus, .breadcrumb li.breadcrumb-item > span.active:hover, .breadcrumb li.breadcrumb-item > span.active:active, .breadcrumb li.breadcrumb-item > span.active:focus, .breadcrumb li.breadcrumb-item > span.active:visited:hover, .breadcrumb li.breadcrumb-item > span.active:visited:active, .breadcrumb li.breadcrumb-item > span.active:visited:focus, .breadcrumb li.breadcrumb-item > span.active:not(.disabled):not(:disabled):hover, .breadcrumb li.breadcrumb-item > span.active:not(.disabled):not(:disabled):active, .breadcrumb li.breadcrumb-item > span.active:not(.disabled):not(:disabled):focus {
background-color: #339af0; background-color: #343a40;
color: white; } color: white; }
.breadcrumb li.breadcrumb-item:not(:first-child) a, .breadcrumb li.breadcrumb-item:not(:first-child) > span { .breadcrumb li.breadcrumb-item:not(:first-child) a, .breadcrumb li.breadcrumb-item:not(:first-child) > span {
border-top-left-radius: 0; border-top-left-radius: 0;
@ -1217,10 +1242,10 @@ nav.pagination {
background-color: #d2d4d6; background-color: #d2d4d6;
color: #2c3237; } color: #2c3237; }
nav.pagination .page-numbers.current, nav.pagination .next.current, nav.pagination .prev.current { nav.pagination .page-numbers.current, nav.pagination .next.current, nav.pagination .prev.current {
background-color: #3bc9db; background-color: #e33d22;
color: #fefefe; } color: #fefefe; }
nav.pagination .page-numbers.current:hover, nav.pagination .next.current:hover, nav.pagination .prev.current:hover { nav.pagination .page-numbers.current:hover, nav.pagination .next.current:hover, nav.pagination .prev.current:hover {
background-color: #3bc9db; background-color: #e33d22;
color: #fefefe; } color: #fefefe; }
/* /*
@ -1315,7 +1340,7 @@ ul.card-list, .card > ul {
padding-right: 0.8rem; } padding-right: 0.8rem; }
.list-danger li.list-element::before { .list-danger li.list-element::before {
color: #ff6b6b; } color: #e33d22; }
.list-success li.list-element::before { .list-success li.list-element::before {
color: #51cf66; } color: #51cf66; }
@ -1563,7 +1588,7 @@ th {
border-radius: 4px 4px 4px 4px; border-radius: 4px 4px 4px 4px;
background-color: transparent; background-color: transparent;
border-radius: 0; border-radius: 0;
background-color: #339af0; background-color: #e33d22;
color: #fefefe; color: #fefefe;
font-weight: 300; font-weight: 300;
margin-top: 0px; } margin-top: 0px; }
@ -1634,14 +1659,14 @@ th {
font-size: 0.9em; } font-size: 0.9em; }
.card-preview.head-info .comment-text { .card-preview.head-info .comment-text {
background-color: #3bc9db; } background-color: #343a40; }
.card-preview.card-grey .comment-text { .card-preview.card-grey .comment-text {
background-color: #adb5bd; } background-color: #adb5bd; }
.comment-text { .comment-text {
color: #fefefe; color: #fefefe;
background-color: #339af0; background-color: #e33d22;
text-align: center; } text-align: center; }
.card-preview time { .card-preview time {
@ -1789,19 +1814,19 @@ th {
background: none; } background: none; }
.bg-red { .bg-red {
background-color: #ff6b6b; background-color: #e33d22;
color: #fefefe; } color: #fefefe; }
.bg-red > a, .bg-red > a:visited { .bg-red > a, .bg-red > a:visited {
color: #ff6b6b; color: #e33d22;
background-color: #fefefe; } background-color: #fefefe; }
.bg-red > a:hover, .bg-red > a:active, .bg-red > a:visited, .bg-red > a:visited:hover, .bg-red > a:visited:active, .bg-red > a:visited:visited { .bg-red > a:hover, .bg-red > a:active, .bg-red > a:visited, .bg-red > a:visited:hover, .bg-red > a:visited:active, .bg-red > a:visited:visited {
color: #fefefe; color: #fefefe;
background: none; } background: none; }
.bg-red:hover { .bg-red:hover {
background-color: #ff6b6b; background-color: #e33d22;
color: #fefefe; } color: #fefefe; }
.bg-red:hover > a, .bg-red:hover > a:visited { .bg-red:hover > a, .bg-red:hover > a:visited {
color: #ff6b6b; color: #e33d22;
background-color: #fefefe; } background-color: #fefefe; }
.bg-red:hover > a:hover, .bg-red:hover > a:active, .bg-red:hover > a:visited, .bg-red:hover > a:visited:hover, .bg-red:hover > a:visited:active, .bg-red:hover > a:visited:visited { .bg-red:hover > a:hover, .bg-red:hover > a:active, .bg-red:hover > a:visited, .bg-red:hover > a:visited:hover, .bg-red:hover > a:visited:active, .bg-red:hover > a:visited:visited {
color: #fefefe; color: #fefefe;
@ -1979,19 +2004,19 @@ th {
background: none; } background: none; }
.bg-primary { .bg-primary {
background-color: #339af0; background-color: #e33d22;
color: #fefefe; } color: #fefefe; }
.bg-primary > a, .bg-primary > a:visited { .bg-primary > a, .bg-primary > a:visited {
color: #339af0; color: #e33d22;
background-color: #fefefe; } background-color: #fefefe; }
.bg-primary > a:hover, .bg-primary > a:active, .bg-primary > a:visited, .bg-primary > a:visited:hover, .bg-primary > a:visited:active, .bg-primary > a:visited:visited { .bg-primary > a:hover, .bg-primary > a:active, .bg-primary > a:visited, .bg-primary > a:visited:hover, .bg-primary > a:visited:active, .bg-primary > a:visited:visited {
color: #fefefe; color: #fefefe;
background: none; } background: none; }
.bg-primary:hover { .bg-primary:hover {
background-color: #339af0; background-color: #e33d22;
color: #fefefe; } color: #fefefe; }
.bg-primary:hover > a, .bg-primary:hover > a:visited { .bg-primary:hover > a, .bg-primary:hover > a:visited {
color: #339af0; color: #e33d22;
background-color: #fefefe; } background-color: #fefefe; }
.bg-primary:hover > a:hover, .bg-primary:hover > a:active, .bg-primary:hover > a:visited, .bg-primary:hover > a:visited:hover, .bg-primary:hover > a:visited:active, .bg-primary:hover > a:visited:visited { .bg-primary:hover > a:hover, .bg-primary:hover > a:active, .bg-primary:hover > a:visited, .bg-primary:hover > a:visited:hover, .bg-primary:hover > a:visited:active, .bg-primary:hover > a:visited:visited {
color: #fefefe; color: #fefefe;
@ -2036,19 +2061,19 @@ th {
background: none; } background: none; }
.bg-danger { .bg-danger {
background-color: #ff6b6b; background-color: #e33d22;
color: #fefefe; } color: #fefefe; }
.bg-danger > a, .bg-danger > a:visited { .bg-danger > a, .bg-danger > a:visited {
color: #ff6b6b; color: #e33d22;
background-color: #fefefe; } background-color: #fefefe; }
.bg-danger > a:hover, .bg-danger > a:active, .bg-danger > a:visited, .bg-danger > a:visited:hover, .bg-danger > a:visited:active, .bg-danger > a:visited:visited { .bg-danger > a:hover, .bg-danger > a:active, .bg-danger > a:visited, .bg-danger > a:visited:hover, .bg-danger > a:visited:active, .bg-danger > a:visited:visited {
color: #fefefe; color: #fefefe;
background: none; } background: none; }
.bg-danger:hover { .bg-danger:hover {
background-color: #ff6b6b; background-color: #e33d22;
color: #fefefe; } color: #fefefe; }
.bg-danger:hover > a, .bg-danger:hover > a:visited { .bg-danger:hover > a, .bg-danger:hover > a:visited {
color: #ff6b6b; color: #e33d22;
background-color: #fefefe; } background-color: #fefefe; }
.bg-danger:hover > a:hover, .bg-danger:hover > a:active, .bg-danger:hover > a:visited, .bg-danger:hover > a:visited:hover, .bg-danger:hover > a:visited:active, .bg-danger:hover > a:visited:visited { .bg-danger:hover > a:hover, .bg-danger:hover > a:active, .bg-danger:hover > a:visited, .bg-danger:hover > a:visited:hover, .bg-danger:hover > a:visited:active, .bg-danger:hover > a:visited:visited {
color: #fefefe; color: #fefefe;
@ -2118,7 +2143,7 @@ th {
color: #845ef7; } color: #845ef7; }
.text-red { .text-red {
color: #ff6b6b; } color: #e33d22; }
.text-orange { .text-orange {
color: #ff922b; } color: #ff922b; }
@ -2148,7 +2173,7 @@ th {
color: #f1f3f5; } color: #f1f3f5; }
.text-primary { .text-primary {
color: #339af0; } color: #e33d22; }
.text-secondary { .text-secondary {
color: #343a40; } color: #343a40; }
@ -2157,7 +2182,7 @@ th {
color: #ff922b; } color: #ff922b; }
.text-danger { .text-danger {
color: #ff6b6b; } color: #e33d22; }
.text-info { .text-info {
color: #3bc9db; } color: #3bc9db; }
@ -2191,14 +2216,14 @@ th {
color: white; } color: white; }
.btn-red { .btn-red {
background-color: #ff6b6b; background-color: #e33d22;
color: #fefefe; color: #fefefe;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); } box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
.btn-red:visited { .btn-red:visited {
background-color: #ff6b6b; background-color: #e33d22;
color: #fefefe; } color: #fefefe; }
.btn-red:hover, .btn-red:active, .btn-red:focus, .btn-red:visited:hover, .btn-red:visited:active, .btn-red:visited:focus, .btn-red:not(.disabled):not(:disabled):hover, .btn-red:not(.disabled):not(:disabled):active, .btn-red:not(.disabled):not(:disabled):focus { .btn-red:hover, .btn-red:active, .btn-red:focus, .btn-red:visited:hover, .btn-red:visited:active, .btn-red:visited:focus, .btn-red:not(.disabled):not(:disabled):hover, .btn-red:not(.disabled):not(:disabled):active, .btn-red:not(.disabled):not(:disabled):focus {
background-color: #ff8181; background-color: #e75a43;
color: white; } color: white; }
.btn-orange { .btn-orange {
@ -2301,14 +2326,14 @@ th {
color: #2c3237; } color: #2c3237; }
.btn-primary { .btn-primary {
background-color: #339af0; background-color: #e33d22;
color: #fefefe; color: #fefefe;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); } box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
.btn-primary:visited { .btn-primary:visited {
background-color: #339af0; background-color: #e33d22;
color: #fefefe; } color: #fefefe; }
.btn-primary:hover, .btn-primary:active, .btn-primary:focus, .btn-primary:visited:hover, .btn-primary:visited:active, .btn-primary:visited:focus, .btn-primary:not(.disabled):not(:disabled):hover, .btn-primary:not(.disabled):not(:disabled):active, .btn-primary:not(.disabled):not(:disabled):focus { .btn-primary:hover, .btn-primary:active, .btn-primary:focus, .btn-primary:visited:hover, .btn-primary:visited:active, .btn-primary:visited:focus, .btn-primary:not(.disabled):not(:disabled):hover, .btn-primary:not(.disabled):not(:disabled):active, .btn-primary:not(.disabled):not(:disabled):focus {
background-color: #51a9f2; background-color: #e75a43;
color: white; } color: white; }
.btn-secondary { .btn-secondary {
@ -2334,14 +2359,14 @@ th {
color: white; } color: white; }
.btn-danger { .btn-danger {
background-color: #ff6b6b; background-color: #e33d22;
color: #fefefe; color: #fefefe;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); } box-shadow: 0px 1px 2px rgba(0, 0, 0, 0); }
.btn-danger:visited { .btn-danger:visited {
background-color: #ff6b6b; background-color: #e33d22;
color: #fefefe; } color: #fefefe; }
.btn-danger:hover, .btn-danger:active, .btn-danger:focus, .btn-danger:visited:hover, .btn-danger:visited:active, .btn-danger:visited:focus, .btn-danger:not(.disabled):not(:disabled):hover, .btn-danger:not(.disabled):not(:disabled):active, .btn-danger:not(.disabled):not(:disabled):focus { .btn-danger:hover, .btn-danger:active, .btn-danger:focus, .btn-danger:visited:hover, .btn-danger:visited:active, .btn-danger:visited:focus, .btn-danger:not(.disabled):not(:disabled):hover, .btn-danger:not(.disabled):not(:disabled):active, .btn-danger:not(.disabled):not(:disabled):focus {
background-color: #ff8181; background-color: #e75a43;
color: white; } color: white; }
.btn-info { .btn-info {
@ -2392,11 +2417,11 @@ th {
color: #845ef7; } color: #845ef7; }
.head-red .card-header, .head-red .menu-header, .head-red.header-bg th { .head-red .card-header, .head-red .menu-header, .head-red.header-bg th {
background-color: #ff6b6b; background-color: #e33d22;
color: #fefefe; } color: #fefefe; }
.head-red th { .head-red th {
color: #ff6b6b; } color: #e33d22; }
.head-orange .card-header, .head-orange .menu-header, .head-orange.header-bg th { .head-orange .card-header, .head-orange .menu-header, .head-orange.header-bg th {
background-color: #ff922b; background-color: #ff922b;
@ -2462,11 +2487,11 @@ th {
color: #f1f3f5; } color: #f1f3f5; }
.head-primary .card-header, .head-primary .menu-header, .head-primary.header-bg th { .head-primary .card-header, .head-primary .menu-header, .head-primary.header-bg th {
background-color: #339af0; background-color: #e33d22;
color: #fefefe; } color: #fefefe; }
.head-primary th { .head-primary th {
color: #339af0; } color: #e33d22; }
.head-secondary .card-header, .head-secondary .menu-header, .head-secondary.header-bg th { .head-secondary .card-header, .head-secondary .menu-header, .head-secondary.header-bg th {
background-color: #343a40; background-color: #343a40;
@ -2483,11 +2508,11 @@ th {
color: #ff922b; } color: #ff922b; }
.head-danger .card-header, .head-danger .menu-header, .head-danger.header-bg th { .head-danger .card-header, .head-danger .menu-header, .head-danger.header-bg th {
background-color: #ff6b6b; background-color: #e33d22;
color: #fefefe; } color: #fefefe; }
.head-danger th { .head-danger th {
color: #ff6b6b; } color: #e33d22; }
.head-info .card-header, .head-info .menu-header, .head-info.header-bg th { .head-info .card-header, .head-info .menu-header, .head-info.header-bg th {
background-color: #3bc9db; background-color: #3bc9db;
@ -2724,59 +2749,27 @@ th {
/* ------------------ HEADERS ------------------- */ /* ------------------ HEADERS ------------------- */
#page-header { #page-header {
background: #339af0 url("img/background.png") center bottom repeat-x; background: #e33d22 url("img/background.png"); }
padding-top: .75rem;
padding-bottom: 1.5rem; }
header h1 { header h1 {
border-style: none !important; border-style: none !important;
font-weight: 800; font-weight: 800;
font-size: 5.4em; font-size: 5.4em;
font-style: oblique; font-style: oblique;
padding-bottom: 0px; padding: 1.5rem;
line-height: 1.5em; line-height: 1rem;
max-width: 1600px; max-width: 1600px;
margin: auto; } margin: auto;
text-align: center; }
header h1 img { header h1 img {
width: 600px; width: 800px;
height: auto; height: auto;
margin-top: 0rem; } margin-top: 0rem; }
header h1 a, header h1 a:visited, header h1 a:hover { header h1 a, header h1 a:visited, header h1 a:hover {
background-color: transparent; } background-color: transparent; }
.toolbar { .osd {
display: flex; background-color: rgba(0, 0, 0, 0.3); }
justify-content: space-between;
margin: auto;
padding: 0;
max-width: 1600px;
z-index: 2; }
.toolbar ul {
display: flex;
margin: 0;
padding: 0; }
.toolbar ul li {
list-style: none;
margin: 0;
position: relative;
z-index: 2; }
.toolbar ul li ul {
display: none;
position: absolute;
left: -0.75rem;
background-color: #fefefe;
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; }
.toolbar ul li:hover ul {
display: flex;
flex-direction: column; }
.toolbar .btn-navbar {
margin: 0rem;
margin-left: 0.75rem;
margin-right: 0.75rem; }
.navbar { .navbar {
border-left: 0; border-left: 0;
@ -2895,28 +2888,18 @@ ul.tag-list {
/* ------------------ FOOTER ------------------- */ /* ------------------ FOOTER ------------------- */
body { body {
background-color: getColor("dark"); } background-color: #343a40; }
footer { footer {
color: getColor("light"); color: #fefefe;
padding-top: 1.5rem; padding-top: 1.5rem;
font-size: 0.8rem !important; font-size: 0.8rem !important;
padding-bottom: 1.5rem; } padding-bottom: 1.5rem; }
footer .footer-collumns { footer a:hover, footer a:active, footer a:visited,
padding-left: 1.6rem; footer a:visited:hover,
padding-right: 1.6rem; footer a:visited:active,
max-width: 1600px; footer a:visited:visited {
margin: auto; color: #fefefe; }
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-gap: 1.6rem;
padding-bottom: 1.6rem; }
@media (min-width: 992px) {
footer .footer-collumns {
grid-template-columns: 1fr 1fr 1fr; } }
footer .footer-collumns a:hover, footer .footer-collumns a:active, footer .footer-collumns a:visited, footer .footer-collumns a:visited:hover, footer .footer-collumns a:visited:active, footer .footer-collumns a:visited:visited {
color: getColor("light"); }
/* social media */ /* social media */
ul.social { ul.social {
@ -2929,16 +2912,16 @@ ul.social {
list-style: none; list-style: none;
display: inline; } display: inline; }
ul.social li a, ul.social li a:visited { ul.social li a, ul.social li a:visited {
color: getColor("dark"); color: #343a40;
background-color: getColor("light"); background-color: #fefefe;
padding: 0.3em; padding: 0.3em;
padding-left: 0.36em; padding-left: 0.36em;
padding-right: 0.36em; padding-right: 0.36em;
vertical-align: middle; vertical-align: middle;
border-radius: 100%; } border-radius: 100%; }
ul.social li a:hover, ul.social li a:visited:hover { ul.social li a:hover, ul.social li a:visited:hover {
color: getColor("light"); color: #fefefe;
background-color: getColor("dark"); } background-color: #343a40; }
.container-article { .container-article {
margin: auto; margin: auto;