fix: optimisation
This commit is contained in:
Kazhnuz
parent
d6cfc35f36
commit
3e1d26b32e
5 changed files with 84 additions and 204 deletions
|
|
@ -25,19 +25,19 @@
|
|||
</ul>
|
||||
|
||||
<div class="container columns">
|
||||
<section class="col-12 col-md-4" aria-labelledby="title-footer-section-1">
|
||||
<section class="col" 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 icon icon-heart" aria-hidden="true"></i></p>
|
||||
</section>
|
||||
|
||||
<section class="col-12 col-md-4" aria-labelledby="title-footer-section-2">
|
||||
<section class="col" 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://forkawesome.github.io/Fork-Awesome/">Fork-Awesome</a> pour les icones.</p>
|
||||
</section>
|
||||
|
||||
<section class="col-12 col-md-4" aria-labelledby="title-footer-section-3">
|
||||
<section class="col" 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>
|
||||
<ul>
|
||||
|
|
|
|||
15
home.php
15
home.php
|
|
@ -6,17 +6,16 @@
|
|||
$page = get_page_by_path( 'home' );
|
||||
if ($page != null) {
|
||||
?>
|
||||
<section class="columns p-0">
|
||||
<h1 class="col-12 page-title pb-0" id="desc-title"><?php echo get_the_title( $page ); ?></h1>
|
||||
<div class="col-xl-4 col-12"><img class="illustration" alt="Un kobold gris et violet binoclard, avec un manteau noir plein de cables" src="<?php echo get_template_directory_uri();?>/img/zerhjyj-small.webp" /></div>
|
||||
<div class="col-xl-8 col-12">
|
||||
<div aria-libelledby="desc-title" class="mb-1"><?php echo $page->post_content; ?></div>
|
||||
<div class="align-center d-none d-block-xl"><a href="/about" class="btn btn-primary">Plus d'info</a></div>
|
||||
<section id="description" class="p-0">
|
||||
<h1 id="desc-title" class="page-title"><?php echo get_the_title( $page ); ?></h1>
|
||||
<img class="illustration" alt="Un kobold gris et violet binoclard, avec un manteau noir plein de cables" src="<?php echo get_template_directory_uri();?>/img/zerhjyj-small.webp" height="530px" width="509px" />
|
||||
<div id="description-content">
|
||||
<div aria-libelledby="desc-title" class="post-content"><?php echo $page->post_content; ?></div>
|
||||
<div class="align-centered-block"><a href="/about" class="btn btn-primary">Plus d'info</a></div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="mb-2 d-none d-block-xl">
|
||||
<h1 class="screen-reader-text">Mes sites web</h1>
|
||||
<nav>
|
||||
<nav aria-label="Mes sites web">
|
||||
<ul class="no-pills f-row f-between mb-1">
|
||||
<?php
|
||||
$listmenu = get_nav_menu_locations();
|
||||
|
|
|
|||
|
|
@ -2,4 +2,4 @@
|
|||
@import 'core/bases';
|
||||
@import 'core/typography';
|
||||
@import 'core/containers';
|
||||
@import 'core/columns';
|
||||
//@import 'core/columns';
|
||||
|
|
|
|||
|
|
@ -21,13 +21,38 @@
|
|||
&-right {text-align: right;}
|
||||
}
|
||||
|
||||
#description {
|
||||
display:grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-areas:
|
||||
"title"
|
||||
"illustration"
|
||||
"content";
|
||||
@include xl() {
|
||||
grid-template-columns: 400px auto;
|
||||
grid-template-areas:
|
||||
"title title"
|
||||
"illustration content";
|
||||
}
|
||||
}
|
||||
|
||||
#desc-title {
|
||||
grid-area: title;
|
||||
}
|
||||
|
||||
#description-content {
|
||||
grid-area:content;
|
||||
}
|
||||
|
||||
.illustration {
|
||||
width: 300px;
|
||||
display:block;
|
||||
margin:auto;
|
||||
grid-area:illustration;
|
||||
max-width:100%;
|
||||
height:auto;
|
||||
@include xl() {
|
||||
width: 145%;
|
||||
padding-bottom: 0;
|
||||
max-width: 530px;
|
||||
margin-bottom: 1.5rem;
|
||||
position: relative;
|
||||
top: 0px;
|
||||
|
|
@ -35,6 +60,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
.align-centered-block {
|
||||
text-align:center;
|
||||
padding:1rem;
|
||||
}
|
||||
|
||||
#page-header {
|
||||
background: get-color("skyblue") url('img/background.png');
|
||||
border-top: 6px solid get-color("dark");
|
||||
|
|
@ -199,6 +229,16 @@ footer {
|
|||
padding-bottom:1.5rem;
|
||||
padding-top: 1.5rem;
|
||||
.columns {
|
||||
@include md() {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-gap: $lineheight;
|
||||
}
|
||||
|
||||
.col {
|
||||
margin-bottom: $lineheight;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color-footer-text;
|
||||
}
|
||||
|
|
|
|||
221
style.css
221
style.css
|
|
@ -220,192 +220,6 @@ pre {
|
|||
max-width: 1200px;
|
||||
margin: auto; }
|
||||
|
||||
[class*=" col-"],
|
||||
[class^=col-] {
|
||||
width: 100%;
|
||||
margin: 0; }
|
||||
[class*=" col-"] > *:last-child,
|
||||
[class^=col-] > *:last-child {
|
||||
margin-bottom: 0 !important; }
|
||||
|
||||
.columns {
|
||||
display: grid;
|
||||
grid-gap: 1.6rem;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
grid-template-rows: auto;
|
||||
padding: 1.6rem; }
|
||||
.columns-nogap {
|
||||
grid-gap: 0px; }
|
||||
|
||||
.column {
|
||||
grid-column: span 12; }
|
||||
|
||||
.col-1 {
|
||||
grid-column: span 1; }
|
||||
|
||||
.col-2 {
|
||||
grid-column: span 2; }
|
||||
|
||||
.col-3 {
|
||||
grid-column: span 3; }
|
||||
|
||||
.col-4 {
|
||||
grid-column: span 4; }
|
||||
|
||||
.col-5 {
|
||||
grid-column: span 5; }
|
||||
|
||||
.col-6 {
|
||||
grid-column: span 6; }
|
||||
|
||||
.col-7 {
|
||||
grid-column: span 7; }
|
||||
|
||||
.col-8 {
|
||||
grid-column: span 8; }
|
||||
|
||||
.col-9 {
|
||||
grid-column: span 9; }
|
||||
|
||||
.col-10 {
|
||||
grid-column: span 10; }
|
||||
|
||||
.col-11 {
|
||||
grid-column: span 11; }
|
||||
|
||||
.col-12 {
|
||||
grid-column: span 12; }
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.col-sm-1 {
|
||||
grid-column: span 1; }
|
||||
.col-sm-2 {
|
||||
grid-column: span 2; }
|
||||
.col-sm-3 {
|
||||
grid-column: span 3; }
|
||||
.col-sm-4 {
|
||||
grid-column: span 4; }
|
||||
.col-sm-5 {
|
||||
grid-column: span 5; }
|
||||
.col-sm-6 {
|
||||
grid-column: span 6; }
|
||||
.col-sm-7 {
|
||||
grid-column: span 7; }
|
||||
.col-sm-8 {
|
||||
grid-column: span 8; }
|
||||
.col-sm-9 {
|
||||
grid-column: span 9; }
|
||||
.col-sm-10 {
|
||||
grid-column: span 10; }
|
||||
.col-sm-11 {
|
||||
grid-column: span 11; }
|
||||
.col-sm-12 {
|
||||
grid-column: span 12; } }
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.col-md-1 {
|
||||
grid-column: span 1; }
|
||||
.col-md-2 {
|
||||
grid-column: span 2; }
|
||||
.col-md-3 {
|
||||
grid-column: span 3; }
|
||||
.col-md-4 {
|
||||
grid-column: span 4; }
|
||||
.col-md-5 {
|
||||
grid-column: span 5; }
|
||||
.col-md-6 {
|
||||
grid-column: span 6; }
|
||||
.col-md-7 {
|
||||
grid-column: span 7; }
|
||||
.col-md-8 {
|
||||
grid-column: span 8; }
|
||||
.col-md-9 {
|
||||
grid-column: span 9; }
|
||||
.col-md-10 {
|
||||
grid-column: span 10; }
|
||||
.col-md-11 {
|
||||
grid-column: span 11; }
|
||||
.col-md-12 {
|
||||
grid-column: span 12; } }
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.col-lg-1 {
|
||||
grid-column: span 1; }
|
||||
.col-lg-2 {
|
||||
grid-column: span 2; }
|
||||
.col-lg-3 {
|
||||
grid-column: span 3; }
|
||||
.col-lg-4 {
|
||||
grid-column: span 4; }
|
||||
.col-lg-5 {
|
||||
grid-column: span 5; }
|
||||
.col-lg-6 {
|
||||
grid-column: span 6; }
|
||||
.col-lg-7 {
|
||||
grid-column: span 7; }
|
||||
.col-lg-8 {
|
||||
grid-column: span 8; }
|
||||
.col-lg-9 {
|
||||
grid-column: span 9; }
|
||||
.col-lg-10 {
|
||||
grid-column: span 10; }
|
||||
.col-lg-11 {
|
||||
grid-column: span 11; }
|
||||
.col-lg-12 {
|
||||
grid-column: span 12; } }
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.col-xl-1 {
|
||||
grid-column: span 1; }
|
||||
.col-xl-2 {
|
||||
grid-column: span 2; }
|
||||
.col-xl-3 {
|
||||
grid-column: span 3; }
|
||||
.col-xl-4 {
|
||||
grid-column: span 4; }
|
||||
.col-xl-5 {
|
||||
grid-column: span 5; }
|
||||
.col-xl-6 {
|
||||
grid-column: span 6; }
|
||||
.col-xl-7 {
|
||||
grid-column: span 7; }
|
||||
.col-xl-8 {
|
||||
grid-column: span 8; }
|
||||
.col-xl-9 {
|
||||
grid-column: span 9; }
|
||||
.col-xl-10 {
|
||||
grid-column: span 10; }
|
||||
.col-xl-11 {
|
||||
grid-column: span 11; }
|
||||
.col-xl-12 {
|
||||
grid-column: span 12; } }
|
||||
|
||||
@media (min-width: 1600px) {
|
||||
.col-xxl-1 {
|
||||
grid-column: span 1; }
|
||||
.col-xxl-2 {
|
||||
grid-column: span 2; }
|
||||
.col-xxl-3 {
|
||||
grid-column: span 3; }
|
||||
.col-xxl-4 {
|
||||
grid-column: span 4; }
|
||||
.col-xxl-5 {
|
||||
grid-column: span 5; }
|
||||
.col-xxl-6 {
|
||||
grid-column: span 6; }
|
||||
.col-xxl-7 {
|
||||
grid-column: span 7; }
|
||||
.col-xxl-8 {
|
||||
grid-column: span 8; }
|
||||
.col-xxl-9 {
|
||||
grid-column: span 9; }
|
||||
.col-xxl-10 {
|
||||
grid-column: span 10; }
|
||||
.col-xxl-11 {
|
||||
grid-column: span 11; }
|
||||
.col-xxl-12 {
|
||||
grid-column: span 12; } }
|
||||
|
||||
.btn {
|
||||
border: 0px solid rgba(0, 0, 0, 0.3);
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
|
|
@ -1261,20 +1075,40 @@ textarea {
|
|||
.align-right {
|
||||
text-align: right; }
|
||||
|
||||
#description {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-areas: "title" "illustration" "content"; }
|
||||
@media (min-width: 1200px) {
|
||||
#description {
|
||||
grid-template-columns: 400px auto;
|
||||
grid-template-areas: "title title" "illustration content"; } }
|
||||
#desc-title {
|
||||
grid-area: title; }
|
||||
|
||||
#description-content {
|
||||
grid-area: content; }
|
||||
|
||||
.illustration {
|
||||
width: 300px;
|
||||
display: block;
|
||||
margin: auto; }
|
||||
margin: auto;
|
||||
grid-area: illustration;
|
||||
max-width: 100%;
|
||||
height: auto; }
|
||||
@media (min-width: 1200px) {
|
||||
.illustration {
|
||||
width: 145%;
|
||||
padding-bottom: 0;
|
||||
max-width: 530px;
|
||||
margin-bottom: 1.5rem;
|
||||
position: relative;
|
||||
top: 0px;
|
||||
right: 64px; } }
|
||||
.align-centered-block {
|
||||
text-align: center;
|
||||
padding: 1rem; }
|
||||
|
||||
#page-header {
|
||||
background: #0f7e84 url("img/background.png");
|
||||
background: #0f7e84 url('data: image/svg+xml;utf8,<svg width="800" height="300" xmlns="http://www.w3.org/2000/svg"><circle cx="420" cy="440" r="300" fill="#FDF7E7" /><circle cx="700" cy="510" r="300" fill="#FDF7E7" /><circle cx="-100" cy="510" r="300" fill="#FDF7E7" /><circle cx="150" cy="380" r="150" fill="#FDF7E7" /></svg>');
|
||||
border-top: 6px solid #002b36;
|
||||
background-position: bottom center;
|
||||
background-repeat: repeat-x;
|
||||
|
|
@ -1415,6 +1249,13 @@ footer {
|
|||
width: 100%;
|
||||
z-index: 1;
|
||||
top: -24px; }
|
||||
@media (min-width: 768px) {
|
||||
footer .columns {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-gap: 1.6rem; } }
|
||||
footer .columns .col {
|
||||
margin-bottom: 1.6rem; }
|
||||
footer .columns a {
|
||||
color: #FDF7E7; }
|
||||
|
||||
|
|
|
|||
Reference in a new issue