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

fix: responsive fixes

Browse source
This commit is contained in:
Kazhnuz 2022-12-18 16:41:18 +01:00
parent 9c0b92d0fa
commit 6b8fbca595
12 changed files with 148 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
category.php
View file

@ -11,7 +11,5 @@
</main>
<!-- Sidebar custom pour contenir la description -->
<aside class="sidebar">
<?php include(TEMPLATEPATH . '/components/sidebar-content.php'); ?>
</aside>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

6
components/footer-content.php
View file

@ -14,17 +14,17 @@
</ul>
</nav>
<div class="container columns">
<div class="col-md-4">
<div class="col-12 col-md-4">
<p>Les contenus sont diffusé sous licence Creative Common Attribution - Partage à l'Identique 4.0 - hors mention contraire.</p>
<p>Ces licences vous autorise à partager et copier mes travaux, tant que vous me citiez en source, et que vous autorisez la même chose pour les travaux qui en seraient dérivés. N'hésitez pas à partager ! <i class="text-red fa fa-heart" aria-hidden="true"></i></p>
</div>
<div class="col-md-4">
<div class="col-12 col-md-4">
<p>Ce site est propulsé par <a href="https://wordpress.org">Wordpress</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 class="col-md-4">
<div class="col-12 col-md-4">
<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>

2
components/navbar-category.php
View file

@ -1,4 +1,4 @@
<nav class="container menu toolbar bg-light fg-dark categories">
<nav class="container menu toolbar bg-light fg-dark categories d-none d-flex-sm">
<ul class="f-around">
<?php
$categories = get_categories( array(

4
components/navbar-pages.php
View file

@ -1,5 +1,5 @@
<div class="osd">
<nav class="container menu toolbar fg-light">
<nav class="container menu toolbar fg-light d-block d-flex-sm">
<ul>
<li>
<a href="<?php echo site_url(); ?>" class="menu-item">
@ -15,7 +15,7 @@
?>
</ul>
<ul class="f-end">
<ul class="f-end d-none d-flex-sm">
<?php
$listmenu = get_nav_menu_locations();
$menu = wp_get_nav_menu_items($listmenu['top-navbar-2']);

4
functions.php
View file

@ -150,7 +150,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">
<?php kspace_cat_breadcrumb_nav($categoryName, $icon); ?>
</div>
<?php
@ -158,7 +158,7 @@ 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">
<?php kspace_cat_breadcrumb_nav($categoryName, $icon); ?>
<div class="rss">
<a href="<?php echo $rssLink; ?>" class="btn btn-orange 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>

20
home.php
View file

@ -18,12 +18,30 @@
<?php if ( !is_paged() ) {
?>
<div class="toast mb-1 bg-blue" style="width:800px;margin:auto;"><strong class="m-0"><i class="fa fa-fw fa-info"></i> Note :</strong> Si vous êtes intéressé pour découvrir plus
<div class="toast mb-1 bg-blue home-toast"><strong class="m-0"><i class="fa fa-fw fa-info"></i> Note :</strong> Si vous êtes intéressé pour découvrir plus
de contenus trouvé sur internet, vous pouvez aussi regarder mon <a href="http://shaarli.kazhnuz.space/">Shaarli</a>, qui sert plus à
partager des petites découverte rigolote ou intéressantes.</div>
<?php
}
?>
<nav class="container menu bg-light fg-dark categories d-block d-none-sm">
<ul class="f-around">
<?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) ?>"><span><i class="fa fa-fw fa-folder"></i> <?php echo $category->name ?></span></a>
</li>
<?php }
?>
</ul>
</nav>
</main>
<?php get_footer(); ?>

11
scss/custom/_global.scss
View file

@ -51,9 +51,10 @@ header h1 {
text-align:center;
img {
width: 800px;
max-width: 800px;
height: auto;
margin-top:0rem;
width: 100%;
}
a, a:visited, a:hover {
@ -102,7 +103,7 @@ header h1 {
"main"
"side";
@include xl() {
@include lg() {
grid-template-columns: auto 360px;
grid-template-areas: "main side";
}
@ -220,3 +221,9 @@ footer {
}
}
}
.home-toast {
max-width:800px;
width:100%;
margin:auto;
}

2
scss/custom/_previews.scss
View file

@ -31,7 +31,7 @@
margin-bottom: $lineheight;
}
}
@include lg() {
@include xl() {
.preview-thumbnail a {
width: 320px;
}

34
scss/mixins/_responsive.scss
View file

@ -48,3 +48,37 @@
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;
}
}
}

16
scss/utils/_display.scss
View file

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

66
style.css
View file

@ -2550,8 +2550,56 @@ textarea {
justify-content: space-between; }
.d-block {
display: block; }
display: block !important; }
@media (min-width: 576px) {
.d-block-sm {
display: block !important; } }
@media (min-width: 768px) {
.d-block-md {
display: block !important; } }
@media (min-width: 992px) {
.d-block-lg {
display: block !important; } }
@media (min-width: 1200px) {
.d-block-xl {
display: block !important; } }
@media (min-width: 1600px) {
.d-block-xxl {
display: block !important; } }
.d-none {
display: none !important; }
@media (min-width: 576px) {
.d-none-sm {
display: none !important; } }
@media (min-width: 768px) {
.d-none-md {
display: none !important; } }
@media (min-width: 992px) {
.d-none-lg {
display: none !important; } }
@media (min-width: 1200px) {
.d-none-xl {
display: none !important; } }
@media (min-width: 1600px) {
.d-none-xxl {
display: none !important; } }
.d-flex {
display: flex !important; }
@media (min-width: 576px) {
.d-flex-sm {
display: flex !important; } }
@media (min-width: 768px) {
.d-flex-md {
display: flex !important; } }
@media (min-width: 992px) {
.d-flex-lg {
display: flex !important; } }
@media (min-width: 1200px) {
.d-flex-xl {
display: flex !important; } }
@media (min-width: 1600px) {
.d-flex-xxl {
display: flex !important; } }
/* 4 - Custom styling
* Styles that are custom to this particular theme
**/
@ -2591,9 +2639,10 @@ header h1 {
margin: auto;
text-align: center; }
header h1 img {
width: 800px;
max-width: 800px;
height: auto;
margin-top: 0rem; }
margin-top: 0rem;
width: 100%; }
header h1 a, header h1 a:visited, header h1 a:hover {
background-color: transparent; }
@ -2635,7 +2684,7 @@ header h1 {
row-gap: 1.6rem;
column-gap: 3rem;
grid-template-areas: "main" "side"; }
@media (min-width: 1200px) {
@media (min-width: 992px) {
.container-blog {
grid-template-columns: auto 360px;
grid-template-areas: "main side"; } }
@ -2734,6 +2783,11 @@ footer {
footer .columns a:visited:visited {
color: #fefefe; }
.home-toast {
max-width: 800px;
width: 100%;
margin: auto; }
.preview-grid {
display: grid;
grid-template-columns: 1fr;
@ -2758,7 +2812,7 @@ footer {
align-items: center;
margin-bottom: 1.6rem; } }
@media (min-width: 992px) {
@media (min-width: 1200px) {
.preview-list .preview-thumbnail a {
width: 320px; } }

17
tag.php
View file

@ -5,20 +5,5 @@
?>
<?php include(TEMPLATEPATH . '/components/preview-list.php'); ?>
</main>
<!-- Sidebar custom pour contenir la description -->
<aside class="sidebar">
<div class="card head-info">
<div class="card-header"><i class="fa fa-fw fa-tag"></i> <?php echo single_cat_title(); ?></div>
<div class="card-body">
<?php echo tag_description();?>
<?php $infourl = get_term_meta(get_queried_object_id(), 'plus-dinfo', true);
if ($infourl != null) {
echo '<p class="align-center"><a href="' . $infourl . '" class="btn btn-readmore">Plus d\'info</a></p>';
}
?>
</div>
</div>
<?php include(TEMPLATEPATH . '/components/sidebar-content.php'); ?>
</aside>
<?php get_sidebar(); ?>
<?php get_footer(); ?>