Adrien/actuel-inactuel
1
0
Fork 0
Code Issues 13 Pull requests Projects Releases Packages Wiki Activity Actions

ajout du bouton de switch + quelque reglage des input

Browse source
This commit is contained in:
antonin gallon 2025-11-21 15:32:57 +01:00
parent af6feaf913
commit 57b2e432e2
10 changed files with 48 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

2
assets/css/src/generic.css
View file

@ -138,3 +138,5 @@ button.less::after {
width: 100%; width: 100%;
margin-top: calc(var(--unit--vertical) / 2); margin-top: calc(var(--unit--vertical) / 2);
} }

6
assets/css/src/nav.css
View file

@ -79,14 +79,16 @@
padding: calc(var(--unit--vertical) / 4) 0; padding: calc(var(--unit--vertical) / 4) 0;
border: none; border: none;
border-bottom: 1px solid var(--color-background); border-bottom: 1px solid var(--color-background);
color: var(--color-background); color: var(--color-primary);
font-size: var(--font-size-m); font-size: var(--font-size-m);
font-weight: var(--font-weight-light); font-weight: var(--font-weight-light);
caret-color: var(--color-primary);
} }
.search__input::placeholder { .search__input::placeholder {
color: var(--color-primary);
font-size: var(--font-size-sm); font-size: var(--font-size-sm);
letter-spacing: 1px; letter-spacing: 1px;
color: var(--color-primary);
opacity: 0.55; opacity: 0.55;
} }
.search__icon { .search__icon {

12
assets/css/src/newsletter.css
View file

@ -11,18 +11,24 @@
#subscribe-form input { #subscribe-form input {
background-color: transparent; background-color: transparent;
border: none; border: none;
border-bottom: 1px solid var(--color-background);
box-sizing: border-box; box-sizing: border-box;
padding-bottom: 0.3rem; padding-bottom: 0.3rem;
padding-right: 2rem; padding-right: 2rem;
color: var(--color-background);
width: 15rem; width: 15rem;
border-bottom: 1px solid var(--color-primary);
color: var(--color-primary);
caret-color: var(--color-primary);
}
#subscribe-form input::placeholder {
color: var(--color-primary);
opacity: 0.55;
} }
#subscribe-form input:focus-visible { #subscribe-form input:focus-visible {
outline: none; outline: none;
} }
#subscribe-form button[type="submit"] { #subscribe-form button[type="submit"] {
color: var(--color-background); color: var(--color-primary);
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;

20
assets/css/src/toggle-light-mode.css Normal file
View file

@ -0,0 +1,20 @@
.theme-toggler{
position: fixed;
right: 0;
bottom: 0;
padding: var(--unit--vertical) var(--unit--horizontal);
}
.theme-toggler > *{
}
.theme-toggler-icon {
width: 1.2rem;
height: 1.2rem;
background-color: var(--color-primary);
mask-size: cover;
-webkit-mask-size: cover;
mask: var(--icon-theme-toggler) no-repeat center;
-webkit-mask: var(--icon-theme-toggler) no-repeat center;
}

1
assets/css/style.css
View file

@ -11,6 +11,7 @@
@import url("src/newsletter.css"); @import url("src/newsletter.css");
@import url("src/footer.css"); @import url("src/footer.css");
@import url("src/print.css"); @import url("src/print.css");
@import url("src/toggle-light-mode.css");

3
assets/images/icons/circle-half.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-circle-half" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 0 8 1zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 181 B

6
assets/js/light-mode.js
View file

@ -6,20 +6,22 @@
const newTheme = currentTheme === "dark" ? "light" : "dark"; const newTheme = currentTheme === "dark" ? "light" : "dark";
root.setAttribute("data-theme", newTheme); root.setAttribute("data-theme", newTheme);
localStorage.setItem("theme", newTheme); localStorage.setItem("theme", newTheme);
console.log("tets");
} }
function init() { function init() {
const storedPreference = localStorage.getItem("theme"); const storedPreference = localStorage.getItem("theme");
const systemPrefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches; const systemPrefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
const theme = storedPreference || (systemPrefersDark ? "dark" : "light"); const theme = storedPreference || (systemPrefersDark ? "dark" : "light");
// const theme = "dark";
root.setAttribute("data-theme", theme); root.setAttribute("data-theme", theme);
} }
init(); init();
document.addEventListener("DOMContentLoaded", function () { document.addEventListener("DOMContentLoaded", function () {
const togglers = document.querySelectorAll("[data-theme-toggler]"); const togglers = document.querySelectorAll(".theme-toggler");
togglers.forEach((toggler) => { togglers.forEach((toggler) => {
toggler.addEventListener("click", toggleDarkMode); toggler.addEventListener("click", toggleDarkMode);
}); });

1
site/snippets/footer.php
View file

@ -1,7 +1,6 @@
<?php if (!$page->is(page('lettre')) && !$page->is(page('a-propos'))): ?> <?php if (!$page->is(page('lettre')) && !$page->is(page('a-propos'))): ?>
<footer id="main-footer"> <footer id="main-footer">
<button data-theme-toggler>Changer de mode</button>
<ul id="links"> <ul id="links">
<li class="open-nav-wrapper hidden"> <li class="open-nav-wrapper hidden">
<button class="plus open-nav" title="chercher parmi les textes">textes</button> <button class="plus open-nav" title="chercher parmi les textes">textes</button>

4
site/snippets/header.php
View file

@ -69,6 +69,7 @@ $entryTopPos ??= 20;
:root { :root {
--icon-search: url("<?= url('assets/images/icons/search.svg') ?>"); --icon-search: url("<?= url('assets/images/icons/search.svg') ?>");
--icon-close: url("<?= url('assets/images/icons/close.svg') ?>"); --icon-close: url("<?= url('assets/images/icons/close.svg') ?>");
--icon-theme-toggler: url("<?= url('assets/images/icons/circle-half.svg') ?>");
} }
</style> </style>
@ -84,6 +85,9 @@ $entryTopPos ??= 20;
<body <body
class="background-grid <?= e($page->fullWidth() == 'true', 'full-width') ?>" class="background-grid <?= e($page->fullWidth() == 'true', 'full-width') ?>"
data-template="<?= $page->template() ?>"> data-template="<?= $page->template() ?>">
<button class="theme-toggler" data-theme-toggler>
<span class="theme-toggler-icon"></span>
</button>
<header id="main-header"> <header id="main-header">
<a id="logo" <a id="logo"
href="<?= e($page->isHomePage(), '#main-edito', $site->url()) ?>" href="<?= e($page->isHomePage(), '#main-edito', $site->url()) ?>"

4
site/snippets/nav.php
View file

@ -7,9 +7,7 @@
</p> </p>
<div class="search"> <div class="search">
<input class="search__input" type="text" placeholder="Chercher" x-model="search"> <input class="search__input" type="text" placeholder="Chercher" x-model="search">
<img x-show="search.length === 0" <div class="search__icon"></div>
src="<?= url('assets/images/icons/search.svg') ?>"
class="search__icon" alt="Icône loupe indiquant le champ de recherche.">
<button x-show="search.length > 0" @click="search = ''" class="search__icon"> <button x-show="search.length > 0" @click="search = ''" class="search__icon">
<img <img
src="<?= url('assets/images/icons/close.svg') ?>" src="<?= url('assets/images/icons/close.svg') ?>"