gcch/haiku-atelier-2024
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

2024-08-08

Browse source
This commit is contained in:
gcch 2024-08-08 10:10:49 +02:00
commit 9ab154bb77
23 changed files with 229 additions and 246 deletions
Download patch file Download diff file Expand all files Collapse all files

2
dprint.json
View file

@ -20,7 +20,7 @@
"https://plugins.dprint.dev/json-0.19.3.wasm",
"https://plugins.dprint.dev/markdown-0.17.2.wasm",
"https://plugins.dprint.dev/toml-0.6.2.wasm",
"https://plugins.dprint.dev/g-plane/malva-v0.6.0.wasm",
"https://plugins.dprint.dev/g-plane/malva-v0.7.1.wasm",
"https://plugins.dprint.dev/g-plane/markup_fmt-v0.11.0.wasm",
"https://plugins.dprint.dev/g-plane/pretty_yaml-v0.4.0.wasm",
"https://plugins.dprint.dev/exec-0.5.0.json@8d9972eee71fa1590e04873540421f3eda7674d0f1aae3d7c788615e7b7413d0"

2
package.json
View file

@ -26,6 +26,6 @@
"stylelint-config-standard-scss": "^13.1.0",
"stylelint-declaration-block-no-ignored-properties": "^2.8.0",
"stylelint-plugin-logical-css": "^1.2.1",
"vite": "^5.3.5"
"vite": "^5.4.0"
}
}

4
web/app/themes/haiku-atelier-2024/functions.php
View file

@ -31,7 +31,6 @@ add_action("wp_enqueue_scripts", "charge_styles_haiku_atelier_2024");
// Initialise les fonctionnalités du thème
new StarterSite();
// Personnalisation du thème
function enregistre_personnalisation_theme($wp_customize) {
// Section « Réseaux sociaux »
@ -74,3 +73,6 @@ function enregistre_personnalisation_theme($wp_customize) {
]);
}
add_action("customize_register", "enregistre_personnalisation_theme");
// Désactive les styles WooCommerce
add_filter("woocommerce_enqueue_styles", "__return_empty_array");

38
web/app/themes/haiku-atelier-2024/page-shop.php
View file

@ -7,9 +7,43 @@ declare(strict_types=1);
use Timber\Timber;
/* Contexte et modèles */
// Contexte et modèles
$contexte = Timber::context();
$modeles = ["shop.twig"];
/* Rendu */
// Récupère les Produits
$recupere_informations_produit = fn($produit) => [
"id" => $produit->id,
"illustration" => [
"image" => wp_get_attachment_image(get_post_thumbnail_id($produit->id), "full"),
],
"nom" => $produit->name,
"prix" => $produit->price,
"slug" => $produit->slug,
"premiere_variation_image" => wp_get_attachment_image(
$attachment_id = $produit->get_available_variations()[0]["image_id"],
$size = "large",
$attr = ["loading" => false],
),
"deuxieme_variation_image" => wp_get_attachment_image(
$attachment_id = $produit->get_available_variations()[1]["image_id"],
$size = "large",
$attr = ["loading" => false],
),
"url" => $produit->get_permalink(),
];
$informations_produits = wc_get_products([
"orderby" => "date",
"order" => "DESC",
]);
$produits = array_map($callback = $recupere_informations_produit, $array = $informations_produits);
$contexte["produits"] = $produits;
echo "<pre>";
// print_r($informations_produits);
// print_r($produits);
echo "</pre>";
// Rendu
Timber::render($filenames = $modeles, $data = $contexte);

6
web/app/themes/haiku-atelier-2024/src/sass/abstracts/_variables.scss
View file

@ -10,4 +10,10 @@
/* Polices */
--police-lato: "Lato", sans-serif;
--police-myriad: "Myriad", sans-serif;
/* Espacements */
--espace-xs: 0.25rem; // 4px;
--espace-s: 0.5rem; // 8px
--espace-m: 1rem; // 16px
--espace-l: 2rem; // 32px;
}

9
web/app/themes/haiku-atelier-2024/src/sass/base/_base.scss
View file

@ -21,7 +21,9 @@ html {
* 2. Pas de marges par défaut.
* 3. Hérite par défaut des styles de texte et de couleur.
*/
*, *::before, *::after {
*,
*::before,
*::after {
box-sizing: inherit; /* 1 */
margin: 0; /* 2 */
padding: 0; /* 2 */
@ -41,6 +43,9 @@ body {
/**
* Force l'héritage des styles pour ces éléments
*/
button, input, select, textarea {
button,
input,
select,
textarea {
font: inherit;
}

3
web/app/themes/haiku-atelier-2024/src/sass/base/_typographie.scss
View file

@ -1,6 +1,7 @@
// Styles typographiques de base
body {
font: 1rem/1.4 var(--police-myriad) 0.5px;
font: 1rem/1.4 Myriad;
color: var(--couleur-noir);
letter-spacing: 0.5px;
}

8
web/app/themes/haiku-atelier-2024/src/sass/base/elements/_images.scss
View file

@ -3,8 +3,14 @@
/**
* 1. Facilite l'usages des images.
* 2. Empêche les images de dépasser leur conteneur.
* 3. Arrière-plan jaune en attendant le chargement de l'image.
*/
img, picture {
img,
picture {
display: block; /* 1 */
max-width: 100%; /* 2 */
}
img {
background: var(--couleur-jaune); /* 3 */
}

19
web/app/themes/haiku-atelier-2024/src/sass/base/elements/_liens.scss
View file

@ -25,7 +25,8 @@ a {
text-decoration-skip: edges; /* 1 */
/* Change les couleurs de l'arrière-plan et du contour pour marquer le focus. */
&:focus, &:focus-visible {
&:focus,
&:focus-visible {
outline-color: var(--lien-contour-couleur-focus);
}
@ -34,16 +35,18 @@ a {
*/
&.lien-bouton {
/* Marges */
--lien-bouton-marges-internes-bloc: 0.33rem;
--lien-bouton-marges-internes-bloc: var(--espace-xs);
--lien-bouton-marges-internes-ligne: var(--espace-m);
/* Couleurs */
--lien-bouton-arriere-plan-couleur-survol: var(--couleur-jaune);
padding: var(--lien-bouton-marges-internes-bloc) 0;
padding: var(--lien-bouton-marges-internes-bloc) var(--lien-bouton-marges-internes-ligne);
border: 1px solid var(--couleur-noir);
/* Change la couleur de l'arrière-plan pour marquer le focus. */
&:focus, &:focus-visible {
&:focus,
&:focus-visible {
background: var(--lien-bouton-arriere-plan-couleur-survol);
}
@ -59,4 +62,12 @@ a {
}
}
}
&:not([class]) {
@media (hover: hover) {
&:hover {
text-decoration-color: var(--couleur-noir);
}
}
}
}

32
web/app/themes/haiku-atelier-2024/src/sass/layouts/_en-tete.scss
View file

@ -2,12 +2,12 @@
#en-tete {
/* Marges */
--en-tete-marges-internes-ligne: 2rem;
--en-tete-marges-internes-bloc: 1rem;
--en-tete-marges-internes-ligne: var(--espace-l);
--en-tete-marges-internes-bloc: var(--espace-m);
/* Dimensions */
--en-tete-hauteur: 80px;
--en-tete-logo-longueur: 120px;
--en-tete-logo-longueur: 100px;
display: flex;
flex-flow: row nowrap;
@ -16,10 +16,14 @@
height: var(--en-tete-hauteur);
padding: var(--en-tete-marges-internes-bloc) var(--en-tete-marges-internes-ligne);
background: var(--couleur-gris);
border: 1px solid var(--couleur-noir);
.logo {
width: var(--en-tete-logo-longueur);
picture,
img {
background: transparent;
}
}
/* TODO: Déplacer au sein d'un Composant ? */
@ -34,7 +38,7 @@
display: flex;
grid-column: 2;
flex-flow: row nowrap;
gap: max(2rem, 5vw);
gap: var(--espace-m);
justify-content: space-between;
}
@ -52,9 +56,9 @@
--nav-entree-arriere-plan-couleur: var(--couleur-jaune);
/* Marges */
--nav-entree-marges-internes-bloc: 0.33rem;
--nav-entree-marges-internes-bloc: var(--espace-xs);
--nav-entree-marges-internes-ligne: 3rem;
--liste-puce-cercle-lien-marges-internes-ligne-debut: calc(1rem + 1.5ch); /* 3 */
--liste-puce-cercle-lien-marges-internes-ligne-debut: calc(var(--espace-m) + 1.5ch); /* 3 */
/* Dispositions */
--liste-puce-cercle-puce-position-horizontale: 3.5ch; /* 3 */
@ -78,7 +82,7 @@
.compte-panier {
display: flex;
flex-flow: row nowrap;
gap: max(1rem, 2vw);
gap: 1rem;
place-items: center;
text-align: center;
@ -90,19 +94,7 @@
text-transform: lowercase;
&.lien-compte {
text-decoration: underline solid;
text-decoration-color: transparent;
text-decoration-skip-ink: auto;
border-color: transparent;
text-decoration-skip: edges;
@media (hover: hover) {
&:hover {
text-decoration-color: var(--couleur-noir);
// border-bottom-color: var(--couleur-noir);
}
}
}
&[data-contient-articles="true"] {

85
web/app/themes/haiku-atelier-2024/src/sass/layouts/_grille-produits.scss Normal file
View file

@ -0,0 +1,85 @@
// Styles pour la grille de Produits du Shop
/**
* La Grille des Produits sous forme de Cartes.
*
* Les Cartes ont une taille minimale et occupent l'espace en ligne disponible jusqu'à l'occuper
* entièrement.
* Quand il n'y a plus d'espace disponible pour une nouvelle Carte à longueur minimale, celle-ci
* se dispose sur une nouvelle ligne.
*
* 1. Taille minimale avec un nombre magique pour une disposition sur 3 colonnes en 1920p.
* 2. Un espacement inter-carte avec une ombre permet des bordures se superposant (« border
* collapse »).
*/
.grille-produits {
display: grid;
grid-auto-rows: 1fr;
grid-template-columns: repeat(3, minmax(0, 1fr)); /* 1 */
gap: 1px; /* 2 */
margin-bottom: 2rem;
article {
box-shadow: 0 0 0 1px var(--couleur-noir); /* 2 */
figure {
display: flex;
flex-flow: column nowrap;
row-gap: 2rem;
padding: 1rem;
a {
position: relative;
@media (hover: hover) {
&:hover {
.produit__illustration__survol {
visibility: visible;
opacity: 1;
}
}
}
}
.produit__illustration__principale {
display: block;
}
.produit__illustration__survol {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0;
transition: 0.2s opacity, 0.2s visibility;
}
img {
aspect-ratio: 9 / 16;
width: 100%;
max-height: 70vh;
object-fit: cover;
}
figcaption {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
margin-bottom: 2rem;
h3 {
font-style: italic;
letter-spacing: 1px;
}
p {
font-weight: 500;
letter-spacing: -0.5px;
}
}
}
}
}

5
web/app/themes/haiku-atelier-2024/src/sass/layouts/_menu-categories-produits.scss
View file

@ -5,7 +5,7 @@
--menu-entree-longueur-minimale: 13ch;
/* Marges */
--menu-entree-marges-internes-ligne: 1rem;
--menu-entree-marges-internes-ligne: var(--espace-m);
/**
* Liste des Catégories de Produits.
@ -49,7 +49,8 @@
border-left: 1px solid var(--couleur-gris);
outline: initial; /* 3 */
&:focus, &:focus-visible {
&:focus,
&:focus-visible {
color: var(--couleur-jaune);
outline: initial; /* 3 */
}

19
web/app/themes/haiku-atelier-2024/src/sass/layouts/_pied-de-page.scss
View file

@ -1,15 +1,22 @@
// Styles pour le pied de page du site
/**
* Le pied de page du site.
*/
#pied-de-page {
/* Marges */
--pied-de-page-marges-internes-bloc: var(--espace-m);
--pied-de-page-marges-internes-ligne: var(--espace-l);
display: grid;
grid-template-columns: 1fr 1fr;
place-items: center;
align-self: end;
min-width: 100vw;
padding: 1rem 2rem;
padding: var(--pied-de-page-marges-internes-bloc) var(--pied-de-page-marges-internes-ligne);
line-height: 1.5;
background: var(--couleur-jaune);
border: 1px solid var(--couleur-noir);
border-top: 1px solid var(--couleur-noir);
.zone-menu-navigation-secondaire {
justify-self: start;
@ -24,12 +31,4 @@
height: 100%;
text-align: right;
}
a {
@media (hover: hover) {
&:hover {
text-decoration-color: var(--couleur-noir);
}
}
}
}

1
web/app/themes/haiku-atelier-2024/src/sass/main.scss
View file

@ -14,5 +14,6 @@
// 3. Régions
@use "layouts/en-tete" as en-tete;
@use "layouts/grille-produits" as grille-produits;
@use "layouts/menu-categories-produits" as menu-categories-produits;
@use "layouts/pied-de-page" as pied-de-page;

1
web/app/themes/haiku-atelier-2024/style.css
View file

@ -1 +0,0 @@

2
web/app/themes/haiku-atelier-2024/views/accueil.twig
View file

@ -1,4 +1,4 @@
{% extends "base.twig" %}
{% block contenu %}
{% endblock %}
{% endblock contenu %}

8
web/app/themes/haiku-atelier-2024/views/base.twig
View file

@ -3,8 +3,8 @@
{% include "parts/html-head.twig" %}
{% block head %}
{% endblock %}
{% endblock %}
{% endblock head %}
{% endblock conteneur_html_head %}
<body class="{{ body_class }}" data-langue="{{ langue_courante }}">
{# En-tête #}
@ -12,12 +12,12 @@
{# Contenu #}
{% block contenu %}
{% endblock %}
{% endblock contenu %}
{# Pied de page #}
{% block footer %}
{% include "parts/pied-de-page.twig" %}
{{ function("wp_footer") }}
{% endblock %}
{% endblock footer %}
</body>

25
web/app/themes/haiku-atelier-2024/views/parts/en-tete.twig
View file

@ -2,10 +2,7 @@
<section class="logo">
<figure>
<picture>
<img
alt="Haiku Atelier's Logo"
src="{{ site.theme.link }}/assets/img/logos/logo-lines.svg"
>
<img alt="Haiku Atelier's Logo" src="{{ site.theme.link }}/assets/img/logos/logo-lines.svg" />
</picture>
</figure>
</section>
@ -13,28 +10,16 @@
<nav class="menu-navigation" id="menu-navigation-en-tete">
<ul class="avec-puce-cercle">
<span class="menu-navigation__entree">
<li>
<a href="{{ pages.home.lien }}">
{{ pages.home.nom }}</a>
</li>
<li><a class="lien-menu" href="{{ pages.home.lien }}">{{ pages.home.nom }}</a></li>
</span>
<span class="menu-navigation__entree">
<li>
<a href="{{ pages.about.lien }}">
{{ pages.about.nom }}</a>
</li>
<li><a class="lien-menu" href="{{ pages.about.lien }}">{{ pages.about.nom }}</a></li>
</span>
<span class="menu-navigation__entree">
<li>
<a href="{{ pages.shop.lien }}">
{{ pages.shop.nom }}</a>
</li>
<li><a class="lien-menu" href="{{ pages.shop.lien }}">{{ pages.shop.nom }}</a></li>
</span>
<span class="menu-navigation__entree">
<li>
<a href="{{ pages.contact.lien }}">
{{ pages.contact.nom }}</a>
</li>
<li><a class="lien-menu" href="{{ pages.contact.lien }}">{{ pages.contact.nom }}</a></li>
</span>
</ul>
</nav>

15
web/app/themes/haiku-atelier-2024/views/parts/html-head.twig
View file

@ -2,20 +2,11 @@
<head>
<meta charset="{{ site.charset }}" />
<meta
name="description"
content="{{ site.description }}"
/>
<meta name="description" content="{{ site.description }}" />
<meta
http-equiv="Content-Type"
content="text/html; charset=UTF-8"
/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1"
/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
{# <link
href="{{ site.theme.link }}/static/img/favicon.svg"

8
web/app/themes/haiku-atelier-2024/views/parts/menu-categories-produits.twig
View file

@ -1,13 +1,9 @@
<nav id="menu-categories-produits" class="menu-categories-produits">
<ul>
<li>
<a href="{{ pages.shop.lien }}">All</a>
</li>
<li><a href="{{ pages.shop.lien }}">All</a></li>
{% for categorie in categories_produits %}
<li id="categorie-{{ categorie.slug|e }}">
<a href="/categorie-produit/{{ categorie.slug|e }}">
{{ categorie.nom|e }}
</a>
<a href="/categorie-produit/{{ categorie.slug|e }}">{{ categorie.nom|e }}</a>
</li>
{% endfor %}
</ul>

169
web/app/themes/haiku-atelier-2024/views/parts/pages/shop/grille-produits.twig
View file

@ -1,158 +1,27 @@
<div class="grille-produits">
<article>
{% for produit in produits %}
{# TODO: Trouver une meilleure arborescence et des noms de classe #}
<article class="produit">
<figure>
<picture>
<img
alt=""
sizes=""
src=""
srcset=""
>
<a href="{{ produit.url }}">
<picture class="produit__illustration produit__illustration__principale">
{# {{ produit.illustration.image }} #} {{ produit.premiere_variation_image }}
</picture>
<figcaption>
<h3>Boro Boro Ring</h3>
<p>75 €</p>
<picture class="produit__illustration produit__illustration__survol">
{# {{ produit.illustration.image }} #} {{ produit.deuxieme_variation_image }}
</picture>
</a>
<figcaption class="produit__textuel">
<h3 class="produit__textuel__titre">
<a href="{{ produit.url }}">{{ produit.nom }}</a>
</h3>
<p class="produit__textuel__prix">
{{ produit.prix }}€
</p>
</figcaption>
</figure>
</article>
<article>
<figure>
<picture>
<img
alt=""
sizes=""
src=""
srcset=""
>
</picture>
<figcaption>
<h3>Boro Boro Ring</h3>
<p>75 €</p>
</figcaption>
</figure>
</article>
<article>
<figure>
<picture>
<img
alt=""
sizes=""
src=""
srcset=""
>
</picture>
<figcaption>
<h3>Boro Boro Ring</h3>
<p>75 €</p>
</figcaption>
</figure>
</article>
<article>
<figure>
<picture>
<img
alt=""
sizes=""
src=""
srcset=""
>
</picture>
<figcaption>
<h3>Boro Boro Ring</h3>
<p>75 €</p>
</figcaption>
</figure>
</article>
<article>
<figure>
<picture>
<img
alt=""
sizes=""
src=""
srcset=""
>
</picture>
<figcaption>
<h3>Boro Boro Ring</h3>
<p>75 €</p>
</figcaption>
</figure>
</article>
<article>
<figure>
<picture>
<img
alt=""
sizes=""
src=""
srcset=""
>
</picture>
<figcaption>
<h3>Boro Boro Ring</h3>
<p>75 €</p>
</figcaption>
</figure>
</article>
<article>
<figure>
<picture>
<img
alt=""
sizes=""
src=""
srcset=""
>
</picture>
<figcaption>
<h3>Boro Boro Ring</h3>
<p>75 €</p>
</figcaption>
</figure>
</article>
<article>
<figure>
<picture>
<img
alt=""
sizes=""
src=""
srcset=""
>
</picture>
<figcaption>
<h3>Boro Boro Ring</h3>
<p>75 €</p>
</figcaption>
</figure>
</article>
<article>
<figure>
<picture>
<img
alt=""
sizes=""
src=""
srcset=""
>
</picture>
</figure>
</article>
{% endfor %}
</div>

2
web/app/themes/haiku-atelier-2024/views/shop.twig
View file

@ -7,4 +7,4 @@
<main>
{% include "parts/pages/shop/grille-produits.twig" %}
</main>
{% endblock %}
{% endblock contenu %}