feat: add theme dark / light + add base content
This commit is contained in:
@@ -1,4 +1,4 @@
|
|||||||
# Low-Tech Lab - Grenoble
|
# Low-tech Lab - Grenoble
|
||||||
|
|
||||||
## Local Development
|
## Local Development
|
||||||
|
|
||||||
|
|||||||
28
assets/theme-toggle.js
Normal file
28
assets/theme-toggle.js
Normal file
@@ -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);
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
<?php
|
<?php
|
||||||
$sitename = "SomeWebsite";
|
$sitename = "Low-tech Lab - Grenoble";
|
||||||
$blogpagename = "blog";
|
$blogpagename = "blog";
|
||||||
|
|
||||||
error_reporting(0);
|
error_reporting(0);
|
||||||
@@ -36,7 +36,7 @@ if (!$pageurl) { $pageurl = pathinfo($page)['filename']; }
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<div class="logo"><a href="."><?php echo $sitename;?></a></div>
|
<div class="logo"><a href="/"><?php echo $sitename;?></a></div>
|
||||||
<ul class="menu">
|
<ul class="menu">
|
||||||
<?php
|
<?php
|
||||||
$pages = glob("./page/*.{txt,md}", GLOB_BRACE);
|
$pages = glob("./page/*.{txt,md}", GLOB_BRACE);
|
||||||
@@ -47,6 +47,8 @@ if (!$pageurl) { $pageurl = pathinfo($page)['filename']; }
|
|||||||
}
|
}
|
||||||
?>
|
?>
|
||||||
</ul>
|
</ul>
|
||||||
|
<!-- Theme Toggle Button -->
|
||||||
|
<button id="theme-toggle" class="theme-toggle">🌙</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="main">
|
<div class="main">
|
||||||
|
|
||||||
@@ -82,5 +84,6 @@ if ($requestedpage === $blogpagename)
|
|||||||
<div class="left"><a href="">© <?php echo date('Y') . " " . $sitename; ?></a></div>
|
<div class="left"><a href="">© <?php echo date('Y') . " " . $sitename; ?></a></div>
|
||||||
<div class="right">Powered by <a href="https://github.com/josephernest/void">Void</a>.</div>
|
<div class="right">Powered by <a href="https://github.com/josephernest/void">Void</a>.</div>
|
||||||
</div>
|
</div>
|
||||||
|
<script src="/assets/theme-toggle.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
69
page/01-home.md
Normal file
69
page/01-home.md
Normal file
@@ -0,0 +1,69 @@
|
|||||||
|
TITLE:Accueil
|
||||||
|
NOMENU:1
|
||||||
|
|
||||||
|
|
||||||
|
![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)
|
||||||
|
<a href="https://lowtechlab.org/fr" target="_blank">Low-tech Lab national</a>
|
||||||
@@ -1,6 +0,0 @@
|
|||||||
TITLE:Home
|
|
||||||
NOMENU:1
|
|
||||||
|
|
||||||
This is a demo website powered by [Void](http://thisisvoid.org).
|
|
||||||
|
|
||||||
|
|
||||||
@@ -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!
|
|
||||||
24
page/02-actions.md
Normal file
24
page/02-actions.md
Normal file
@@ -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.
|
||||||
|
|
||||||
21
page/03-contact.md
Normal file
21
page/03-contact.md
Normal file
@@ -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)
|
||||||
@@ -1,2 +0,0 @@
|
|||||||
TITLE:Contact
|
|
||||||
URL:mailto:contact@somewebsi.te
|
|
||||||
22
page/04-ressources.md
Normal file
22
page/04-ressources.md
Normal file
@@ -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)*
|
||||||
15
page/05-faq.md
Normal file
15
page/05-faq.md
Normal file
@@ -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
|
||||||
273
style.css
273
style.css
@@ -1,41 +1,240 @@
|
|||||||
.header { margin-bottom: 1.5em; padding-bottom: 1em; min-height: 3.1em; border-bottom: 2px solid #2980b9; }
|
/* Light Mode (default) */
|
||||||
.header a:hover, .footer a:hover { border: none; }
|
:root {
|
||||||
.header:after { content: ''; clear: both; display: block; }
|
/* Color Palette */
|
||||||
.logo { float: left; margin-top: 0.3em; }
|
--primary-color: #2980b9; /* Blue */
|
||||||
.logo a { background-color: #2980b9; color: white; padding: 0.2em 0.2em; font-size: 1.4em; }
|
--secondary-color: #D1D1D1; /* Light Gray */
|
||||||
.logo a:hover { color: white; }
|
--text-color: #333; /* Dark Gray for text */
|
||||||
.menu { float: right; padding: 0; margin: 0; }
|
--text-muted: #AAA; /* Light Gray for muted text */
|
||||||
.menu li { display: inline-block; padding: 0.4em 0 0.4em 2em; }
|
--hover-color: #2980b9; /* Hover color (same as primary) */
|
||||||
.menu a { font-weight: 600; }
|
--link-color: black; /* Default link color */
|
||||||
.main { min-height: 18em; padding-bottom: 3em; border-bottom: 2px solid #2980b9; }
|
--background-light: #F1F1F1;/* Light background for pre */
|
||||||
.main a { border-bottom: 2px solid #D1D1D1; }
|
--background-dark: #2c3e50; /* Dark background for pre in dark mode */
|
||||||
.main p, .main ul { margin-top: 0; margin-bottom: 0.5em; }
|
--border-color: #D1D1D1; /* Light Gray border color */
|
||||||
.page { font-size: 0.95em; }
|
--footer-background: #fff; /* Light footer background */
|
||||||
.article { margin-bottom: 4em; font-size: 0.9em; line-height: 1.4em; }
|
--body-background: #fff; /* Light body background */
|
||||||
.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; }
|
/* Dark Mode */
|
||||||
html { height: 100%; font-family: sans-serif; font-size: 1.25em; }
|
[data-theme="dark"] {
|
||||||
body { margin: 0 auto; padding: 3em 3em 1em 3em; max-width: 44em; line-height: 1.5em; color: #333; }
|
--primary-color: #3498db; /* Lighter blue for dark mode */
|
||||||
a { color: black; text-decoration: none; transition: color .2s, background .2s, border .2s; }
|
--secondary-color: #555; /* Darker gray for borders */
|
||||||
a:hover { border-bottom: 2px solid black; color: #2980b9; }
|
--text-color: #ccc; /* Light gray for text */
|
||||||
img { max-width: 100%; }
|
--text-muted: #888; /* Muted text in dark mode */
|
||||||
h1 { font-size: 2em; font-weight: 300; margin-bottom: .5em; line-height: 1.25em; color: #2980b9; }
|
--hover-color: #1abc9c; /* Teal hover color */
|
||||||
h2 { font-size: 1.95em; font-weight: 300; margin-bottom: .5em; line-height: 1.25em; }
|
--link-color: #ecf0f1; /* Light color links */
|
||||||
h3 { font-size: 1.4em; font-weight: 400; margin-bottom: .5em; line-height: 1.25em; }
|
--background-light: #34495e; /* Darker background for pre */
|
||||||
h4 { font-size: 1.2em; font-weight: 600; margin-bottom: .5em; line-height: 1.25em; }
|
--background-dark: #1c2833; /* Dark background for pre */
|
||||||
blockquote { background: none; border-left: 3px solid #777; color: #777; padding: 0 0 0 10px; margin-left: 1.2em; }
|
--border-color: #555; /* Dark border color */
|
||||||
hr { margin: 2em 0; height: 2px; background-color: #D1D1D1; border: none; }
|
--footer-background: #2c3e50; /* Dark footer background */
|
||||||
pre { background-color: #F1F1F1; margin-bottom: 0.7em; line-height: 1.5em; }
|
--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) {
|
@media (max-width: 640px) {
|
||||||
body { padding: 1.25em; }
|
body {
|
||||||
.header { padding-bottom: 0; }
|
padding: 1.25em;
|
||||||
.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; }
|
.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);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user