From 08a08b9b06449eaaddd2270483b0d6cc3fa50666 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?No=C3=A9=20Viricel?= Date: Sat, 30 Nov 2024 18:21:15 +0100 Subject: [PATCH] feat: add theme dark / light + add base content --- README.md | 2 +- assets/theme-toggle.js | 28 ++++ index.php | 7 +- page/01-home.md | 69 ++++++++ page/01-home.txt | 6 - page/02-about.txt | 7 - page/02-actions.md | 24 +++ page/03-contact.md | 21 +++ page/03-contact.txt | 2 - page/04-ressources.md | 22 +++ page/05-faq.md | 15 ++ page/{04-blog.txt => 06-blog.md} | 0 style.css | 279 ++++++++++++++++++++++++++----- 13 files changed, 424 insertions(+), 58 deletions(-) create mode 100644 assets/theme-toggle.js create mode 100644 page/01-home.md delete mode 100644 page/01-home.txt delete mode 100644 page/02-about.txt create mode 100644 page/02-actions.md create mode 100644 page/03-contact.md delete mode 100644 page/03-contact.txt create mode 100644 page/04-ressources.md create mode 100644 page/05-faq.md rename page/{04-blog.txt => 06-blog.md} (100%) diff --git a/README.md b/README.md index 1c4ee18..385d7c0 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# Low-Tech Lab - Grenoble +# Low-tech Lab - Grenoble ## Local Development diff --git a/assets/theme-toggle.js b/assets/theme-toggle.js new file mode 100644 index 0000000..5b6aa23 --- /dev/null +++ b/assets/theme-toggle.js @@ -0,0 +1,28 @@ +// Function to switch theme +const toggleTheme = () => { + const currentTheme = document.documentElement.getAttribute('data-theme'); + const newTheme = currentTheme === 'dark' ? 'light' : 'dark'; + + // Set the new theme to the root element + document.documentElement.setAttribute('data-theme', newTheme); + + // Store the theme preference in localStorage + localStorage.setItem('theme', newTheme); + + // Update the button icon + document.getElementById('theme-toggle').textContent = newTheme === 'dark' ? '🌙' : '🌞'; +}; + +// Check for saved theme preference in localStorage +const savedTheme = localStorage.getItem('theme'); +if (savedTheme) { + document.documentElement.setAttribute('data-theme', savedTheme); + document.getElementById('theme-toggle').textContent = savedTheme === 'dark' ? '🌙' : '🌞'; +} else { + // Default to light theme if no preference is saved + document.documentElement.setAttribute('data-theme', 'light'); + document.getElementById('theme-toggle').textContent = '🌞'; +} + +// Add event listener for the theme toggle button +document.getElementById('theme-toggle').addEventListener('click', toggleTheme); \ No newline at end of file diff --git a/index.php b/index.php index 301ffc1..2153346 100644 --- a/index.php +++ b/index.php @@ -1,5 +1,5 @@
- + + +
@@ -82,5 +84,6 @@ if ($requestedpage === $blogpagename)
©
Powered by Void.
+ diff --git a/page/01-home.md b/page/01-home.md new file mode 100644 index 0000000..19466ba --- /dev/null +++ b/page/01-home.md @@ -0,0 +1,69 @@ +TITLE:Accueil +NOMENU:1 + +![Logo du Low-tech Lab de Grenoble](/assets/brand.jpg) +![Photo de l'équipe ?]() + +# Présentation de l'asso + +Le Low-tech Lab Grenoble est une association loi 1901 reconnue d’intérêt général. +Fondée en 2019, l’association promeut la démarche Low-tech et les systèmes low-tech (technologies et savoirs répondant aux critères utile, durable et accessible). Elle représente l’antenne grenobloise du large archipèle des Low-tech Labs. + +**Objet de l’association :** +développer la résilience locale et collective, diffuser savoirs et techniques simples et accessibles aux citoyens, promouvoir et rechercher des solutions qui répondent à des problématiques d’habitat, d’autonomie en eau, énergie, alimentation ou matériaux, pour un meilleur respect de la nature, des cultures et des ressources propres à chaque territoire. + +# Comment nous rejoindre ? +Vous avez envie de nous rendre visite ? Vous êtes curieux.se des low-tech ? Vous voulez en savoir plus sur l’association ? Venez aux forums de l’association ! C’est tous les premiers mercredis du mois au local de l’asso (18h). On y parle low-tech, transition, écologie, projets personnels, … Et on cuisine au cuiseur bois pour celleux qui sont là ! Bref de bons moments conviviaux pour échanger toustes ensemble ! + +Pour les adhérents de l’association, on propose un temps collectif tous les 3e mercredis du mois au local (18h). +C’est un temps collectif de partage (débat, cercle de parole, savoir-faire, bricolage, …) + +Pour les bénévoles investis dans la CA, les 2e mercredi du mois nous organisons la réunion de gouvernance partagé au local (18h). On parle des projets de l’association, des stratégies de l’association, des sujets de gouvernance, des prises de décision, … Le tout de manière partagée et ouverte ! + +# Ils nous soutiennent ! + +**Institutions** + +- [Ville de Grenoble](#) +- [Métro](#) +- [Département](#) +- [Etat](#) +- [Union Européenne (Erasmus+)](#) + +**Partenaires** + +- [Fondation GEG](#) +- [Enerdata](#) + +# Nous travaillons ensemble ! + +- [Actis](#) +- [Mairies sur le projet Abbaye](#) +- [SolarFire](#) +- [Kerlotec](#) +- [ENSAM](#) +- [Parc régional des Monts d’Ardèche](#) +- [Scouts et Guides de France](#) +- [INRAE](#) +- [La Ligue de l’Enseignement 38](#) +- [Bar Radis](#) +- [Au Local](#) +- [Laboratoire PACTE](#) +- [IUGA](#) +- [UGA](#) +- [ENSE3 et Grenoble-INP](#) +- [Au Grès du Soleil](#) + +# Devenez mécène ! + +Vous souhaitez faire du mécénat avec l’association ? C’est possible ! +Savez-vous qu’il existe 3 types de mécénat ? +- Le mécénat financier, le plus connu. +- Le mécénat en nature, il s’agit de donner du matériel ou prêter des biens (local, outillages, matériaux, …) +- Le mécénat de compétences, il s’agit de mettre à disposition pour l’association du temps de travail d’un employé d’une entreprise (et de la fonction publique aussi !). Plein de compétences peuvent être valorisées à travers le mécénat de compétence : comptabilité, développement web, communication, juridique, ingénierie, artisanat, coup de main, … + +Ces 3 types de mécénat sont défiscalisables sur vos impôts (particulier et entreprise). Si vous êtes intéressé.e, contactez-nous ! + +[Agenda](/agenda) +[Inscription à l'infolettre](/infolettre) + Low-tech Lab national \ No newline at end of file diff --git a/page/01-home.txt b/page/01-home.txt deleted file mode 100644 index 95f4aeb..0000000 --- a/page/01-home.txt +++ /dev/null @@ -1,6 +0,0 @@ -TITLE:Home -NOMENU:1 - -This is a demo website powered by [Void](http://thisisvoid.org). - -![](http://gget.it/mspjlhh3/P1170225.JPG) \ No newline at end of file diff --git a/page/02-about.txt b/page/02-about.txt deleted file mode 100644 index 5fce2c1..0000000 --- a/page/02-about.txt +++ /dev/null @@ -1,7 +0,0 @@ -TITLE:About - -#About - -**SomeWebsite** is a great website. - -Do you want to get the latest news? The [blog](blog) is here! \ No newline at end of file diff --git a/page/02-actions.md b/page/02-actions.md new file mode 100644 index 0000000..b0e9fbf --- /dev/null +++ b/page/02-actions.md @@ -0,0 +1,24 @@ +TITLE:Actions + +# Action locale (quartier Abbaye) + +Texte à venir ... + +# Solaire à concentration + +Depuis quelques années, l’association investit le champ du solaire à concentration pour des pratiques de production artisanale. Convaincu du potentiel énergétique et de la résilience écologique de ces technologies, nous proposons des formations à l’auto-construction de concentrateurs solaires auprès d’artisans ou d’entreprises travaillant dans l’alimentaire (boulangeries, restaurants, brasseries, …). Nous construisons également de toutes pièces ces concentrateurs solaires. +Inspiré.e.s des travaux de [Lytefire](https://lytefire.com/fr), [Néoloco](https://neoloco.fr/), [Hélie](https://microbrasseriehelie.odoo.com/) et du [Présage](https://lepresage.fr/), nous sommes persuadé.e.s que d’autres modèles d’entreprises peuvent émerger sur ce modèle de sobriété énergétique. Nous souhaitons accompagner les personnes et les structures souhaitant utiliser ces nouvelles initiatives solaires. + +En parallèle, l’association poursuit des axes de R&D pour continuer d’étoffer les low-tech autour du solaire à concentration : automatisation de concentrateur, four alimentaire bi-énergie (bois-solaire), nouveaux design de concentrateur, procédés thermiques, … Le tout dans une démarche libre et ouverte. + +[*Photos du lytefire de l’asso, des scouts et de Violaine*]() + +# Enseignement + +Présentation des prestations/événements de l’asso (conférences, ateliers d’utilisation de LT, ateliers de formation de LT) +L’association peut réaliser divers types de prestations autour des low-tech et de la démarche Low-tech. + +Nous pouvons participer à des conférences ou des tables rondes pour apporter un point de vue sur la Low-tech, le techno-discernement ou les actions dans lesquelles nous sommes impliqué.e.s. + +Nous proposons également des ateliers d’utilisation ou de fabrication de low-tech. + diff --git a/page/03-contact.md b/page/03-contact.md new file mode 100644 index 0000000..325f2ed --- /dev/null +++ b/page/03-contact.md @@ -0,0 +1,21 @@ +TITLE:Contact + +Vous souhaitez rentrer en contact avec nous ? Ecrivez-nous ! +[contact@lowtechlabgrenoble.org](mailto:contact@lowtechlabgrenoble.org) + +Présentation du CA +Présentation des salarié.es + VSC ? + +**Kévin Loeslé** + +> Présentation à venir + +**Félicie Beth** + +> Présentation à venir + +**Grégoire Pourcelot** + +> Salarié, coordinateur de projet de l’association. Issu de (dé)formation ingénieur énergie, je m’intéresse particulièrement aux applications du solaire à concentration et à l’application des outils low-tech dans une économie régénératrice. Toujours motivé pour lancer de nouveaux projets dans l’asso ! + +Adresse de l’asso avec plan ? (pour situer la position sur le square Barbara) diff --git a/page/03-contact.txt b/page/03-contact.txt deleted file mode 100644 index d9fce6f..0000000 --- a/page/03-contact.txt +++ /dev/null @@ -1,2 +0,0 @@ -TITLE:Contact -URL:mailto:contact@somewebsi.te \ No newline at end of file diff --git a/page/04-ressources.md b/page/04-ressources.md new file mode 100644 index 0000000..8dabb6a --- /dev/null +++ b/page/04-ressources.md @@ -0,0 +1,22 @@ +TITLE:Ressources + +# Présentation des LT disponibles en prêt à prix libre & de la procédure (Si pas dans “Actions de l’asso”) + +L’association dispose d’un petit pannel de low-tech empruntable à prix libre. Pour les emprunter, il suffit de contacter l’association via le mail [contact@lowtechlabgrenoble.org](mailto:contact@lowtechlabgrenoble.org) et de demander à emprunter les low-tech. Une formation par un membre de l’association de 10/15 minutes est obligatoire. Ceci permet de bien comprendre et de bien utiliser les low-tech. L’emprunt se fait à prix libre. + +Liste des low-tech : +- Lampe solaire +- Fours solaires (plusieurs types) +- Marmite norvégienne +- Machine à coudre mécanique +- Cuiseurs bois collectif (poêle à paëlla, wok, billig) +- Smoocyclette +- Vélo générateur +- BommBike (vélo amplificateur de son pour mettre de la musique ou animer des conférences) + +# Liens utiles + +- Les tutos du LTLGrenoble & de ses membres sur le wiki national : [Wiki LTLNational](https://wiki.lowtechlab.org) +- D'autres liens utiles sur la LT (CF site national) : [Agenda national](https://lowtechlab.org/fr/les-outils/agenda), [Annuaire national](https://lowtechlab.org/fr/les-outils/annuaire) +- [Solar Low-tech Magazine](https://solar.lowtechmagazine.com/fr) +- *Les articles sur le blog du LTLNational (si pas hébergés chez nous) : [https://lowtechlab.org/fr/actualites-blog](https://lowtechlab.org/fr/actualites-blog)* \ No newline at end of file diff --git a/page/05-faq.md b/page/05-faq.md new file mode 100644 index 0000000..82cd4e5 --- /dev/null +++ b/page/05-faq.md @@ -0,0 +1,15 @@ +TITLE:FAQ + +Pas sûr qu’on en ait besoin, mais peut servir à éclarcir qqs questions récurrentes comme : + +**Est-ce que l’on recrute ?** + +> A ce jour, nous ne recrutons pas de poste permanent. Il est revanche possible d’effectuer un stage ou un service civique au sein de l’association. Merci de nous contacter à l’adresse [contact@lowtechlabgrenoble.org](contact@lowtechlabgrenoble.org) + +**Est-ce que l’on récupère du matériel ?** + +> Réponse à venir + +**Est-ce que l’on organise des formations ?** + +> Réponse à venir diff --git a/page/04-blog.txt b/page/06-blog.md similarity index 100% rename from page/04-blog.txt rename to page/06-blog.md diff --git a/style.css b/style.css index 3eb486b..dd40ac9 100644 --- a/style.css +++ b/style.css @@ -1,41 +1,240 @@ -.header { margin-bottom: 1.5em; padding-bottom: 1em; min-height: 3.1em; border-bottom: 2px solid #2980b9; } -.header a:hover, .footer a:hover { border: none; } -.header:after { content: ''; clear: both; display: block; } -.logo { float: left; margin-top: 0.3em; } -.logo a { background-color: #2980b9; color: white; padding: 0.2em 0.2em; font-size: 1.4em; } -.logo a:hover { color: white; } -.menu { float: right; padding: 0; margin: 0; } -.menu li { display: inline-block; padding: 0.4em 0 0.4em 2em; } -.menu a { font-weight: 600; } -.main { min-height: 18em; padding-bottom: 3em; border-bottom: 2px solid #2980b9; } -.main a { border-bottom: 2px solid #D1D1D1; } -.main p, .main ul { margin-top: 0; margin-bottom: 0.5em; } -.page { font-size: 0.95em; } -.article { margin-bottom: 4em; font-size: 0.9em; line-height: 1.4em; } -.articleinfo { color: #AAA; margin-bottom: 1em; font-size: 0.9em; } -.articletitle { margin-bottom: 0; } -.footer { padding: 1em 0 2em; font-size: .75em; color: #333; } -.footer .left { float: left; } -.footer .right { float: right; } - -* { margin: 0; } -html { height: 100%; font-family: sans-serif; font-size: 1.25em; } -body { margin: 0 auto; padding: 3em 3em 1em 3em; max-width: 44em; line-height: 1.5em; color: #333; } -a { color: black; text-decoration: none; transition: color .2s, background .2s, border .2s; } -a:hover { border-bottom: 2px solid black; color: #2980b9; } -img { max-width: 100%; } -h1 { font-size: 2em; font-weight: 300; margin-bottom: .5em; line-height: 1.25em; color: #2980b9; } -h2 { font-size: 1.95em; font-weight: 300; margin-bottom: .5em; line-height: 1.25em; } -h3 { font-size: 1.4em; font-weight: 400; margin-bottom: .5em; line-height: 1.25em; } -h4 { font-size: 1.2em; font-weight: 600; margin-bottom: .5em; line-height: 1.25em; } -blockquote { background: none; border-left: 3px solid #777; color: #777; padding: 0 0 0 10px; margin-left: 1.2em; } -hr { margin: 2em 0; height: 2px; background-color: #D1D1D1; border: none; } -pre { background-color: #F1F1F1; margin-bottom: 0.7em; line-height: 1.5em; } - -@media (max-width: 640px) { - body { padding: 1.25em; } - .header { padding-bottom: 0; } - .logo { float:none; } - .menu { float:none; margin-top: 2em; } - .menu li { display: block; padding: 0.2em 0; margin: 0.2em; border-top: 1px solid #D1D1D1; } +/* Light Mode (default) */ +:root { + /* Color Palette */ + --primary-color: #2980b9; /* Blue */ + --secondary-color: #D1D1D1; /* Light Gray */ + --text-color: #333; /* Dark Gray for text */ + --text-muted: #AAA; /* Light Gray for muted text */ + --hover-color: #2980b9; /* Hover color (same as primary) */ + --link-color: black; /* Default link color */ + --background-light: #F1F1F1;/* Light background for pre */ + --background-dark: #2c3e50; /* Dark background for pre in dark mode */ + --border-color: #D1D1D1; /* Light Gray border color */ + --footer-background: #fff; /* Light footer background */ + --body-background: #fff; /* Light body background */ } + +/* Dark Mode */ +[data-theme="dark"] { + --primary-color: #3498db; /* Lighter blue for dark mode */ + --secondary-color: #555; /* Darker gray for borders */ + --text-color: #ccc; /* Light gray for text */ + --text-muted: #888; /* Muted text in dark mode */ + --hover-color: #1abc9c; /* Teal hover color */ + --link-color: #ecf0f1; /* Light color links */ + --background-light: #34495e; /* Darker background for pre */ + --background-dark: #1c2833; /* Dark background for pre */ + --border-color: #555; /* Dark border color */ + --footer-background: #2c3e50; /* Dark footer background */ + --body-background: #2e3b4e; /* Dark body background */ +} + +.header { + margin-bottom: 1.5em; + padding-bottom: 1em; + min-height: 3.1em; + border-bottom: 2px solid var(--primary-color); +} + +.header a:hover, +.footer a:hover { + border: none; +} + +.header:after { + content: ''; + clear: both; + display: block; +} + +.logo { + float: left; + margin-top: 0.3em; +} + +.logo a { + background-color: var(--primary-color); + color: white; + padding: 0.2em 0.2em; + font-size: 1.4em; +} + +.logo a:hover { + color: white; +} + +.menu { + float: right; + padding: 0; + margin: 0; +} + +.menu li { + display: inline-block; + padding: 0.4em 0 0.4em 2em; +} + +.menu a { + font-weight: 600; +} + +.main { + min-height: 18em; + padding-bottom: 3em; + border-bottom: 2px solid var(--primary-color); +} + +.main a { + border-bottom: 2px solid var(--border-color); +} + +.main p, +.main ul { + margin-top: 0; + margin-bottom: 0.5em; +} + +.page { + font-size: 0.95em; +} + +.article { + margin-bottom: 4em; + font-size: 0.9em; + line-height: 1.4em; +} + +.articleinfo { + color: var(--text-muted); + margin-bottom: 1em; + font-size: 0.9em; +} + +.articletitle { + margin-bottom: 0; +} + +.footer { + padding: 1em 0 2em; + font-size: .75em; + background-color: var(--footer-background); + color: var(--text-muted); +} + +.footer .left { + float: left; +} + +.footer .right { + float: right; +} + +* { + margin: 0; +} + +html { + height: 100%; + font-family: sans-serif; + font-size: 1.25em; +} + +body { + margin: 0 auto; + padding: 3em 3em 1em 3em; + max-width: 44em; + line-height: 1.5em; + color: var(--text-color); + background-color: var(--body-background); +} + +a { + color: var(--link-color); + text-decoration: none; + transition: color .2s, background .2s, border .2s; +} + +a:hover { + border-bottom: 2px solid var(--link-color); + color: var(--hover-color); +} + +img { + max-width: 100%; +} + +h1 { + font-size: 2em; + font-weight: 300; + margin-bottom: .5em; + line-height: 1.25em; + color: var(--primary-color); +} + +h2 { + font-size: 1.95em; + font-weight: 300; + margin-bottom: .5em; + line-height: 1.25em; +} + +h3 { + font-size: 1.4em; + font-weight: 400; + margin-bottom: .5em; + line-height: 1.25em; +} + +h4 { + font-size: 1.2em; + font-weight: 600; + margin-bottom: .5em; + line-height: 1.25em; +} + +blockquote { + background: none; + border-left: 3px solid #777; + color: #777; + padding: 0 0 0 10px; + margin-left: 1.2em; +} + +hr { + margin: 2em 0; + height: 2px; + background-color: var(--secondary-color); + border: none; +} + +pre { + background-color: var(--background-light); + margin-bottom: 0.7em; + line-height: 1.5em; +} + +@media (max-width: 640px) { + body { + padding: 1.25em; + } + + .header { + padding-bottom: 0; + } + + .logo { + float: none; + } + + .menu { + float: none; + margin-top: 2em; + } + + .menu li { + display: block; + padding: 0.2em 0; + margin: 0.2em; + border-top: 1px solid var(--border-color); + } +} \ No newline at end of file