davidbgk/index.html

## index.html
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Club de lecture — Lettres persanes</title>
    <link rel="stylesheet" href="main.css">
</head>
<body class="cleartheme"><!-- par défaut le thème est clair -->
    <div class="main"><!-- pour centrer le site -->
        <article>
            <header>
                <h1>Club de lecture : Lettres persanes</h1>
                <h3>Lettre XIV</h3>
            </header>
            <section>
<p>Comme le peuple grossissoit tous les jours, les Troglodytes crurent qu’il étoit à propos de se choisir un roi : ils convinrent qu’il falloit déférer la couronne à celui qui étoit le plus juste ; et ils jetèrent tous les yeux sur un vieillard vénérable par son âge et par une longue vertu. Il n’avoit pas voulu se trouver à cette assemblée ; il s’étoit retiré dans sa maison, le cœur serré de tristesse.</p>
<p>Lorsqu’on lui envoya des députés pour lui apprendre le choix qu’on avoit fait de lui : À Dieu ne plaise, dit-il, que je fasse ce tort aux Troglodytes, que l’on puisse croire qu’il n’y a personne parmi eux de plus juste que moi ! Vous me déférez la couronne, et, si vous le voulez absolument, il faudra bien que je la prenne ; mais comptez que je mourrai de douleur d’avoir vu en naissant les Troglodytes libres, et de les voir aujourd’hui assujettis. À ces mots, il se mit à répandre un torrent de larmes. Malheureux jour ! disoit-il ; et pourquoi ai-je tant vécu ? Puis il s’écria d’une voix sévère : Je vois bien ce que c’est, ô Troglodytes ! votre vertu commence à vous peser. Dans l’état où vous êtes, n’ayant point de chef, il faut que vous soyez vertueux, malgré vous ; sans cela vous ne sauriez subsister, et vous tomberiez dans le malheur de vos premiers pères. Mais ce joug vous paroît trop dur : vous aimez mieux être soumis à un prince, et obéir à ses lois, moins rigides que vos mœurs. Vous savez que pour lors vous pourrez contenter votre ambition, acquérir des richesses, et languir dans une lâche volupté ; et que, pourvu que vous évitiez de tomber dans les grands crimes, vous n’aurez pas besoin de la vertu. Il s’arrêta un moment, et ses larmes coulèrent plus que jamais. Et que prétendez-vous que je fasse ? Comment se peut-il que je commande quelque chose à un Troglodyte ? Voulez-vous qu’il fasse une action vertueuse parce que je la lui commande, lui qui la feroit tout de même sans moi, et par le seul penchant de la nature ? Ô Troglodytes ! je suis à la fin de mes jours, mon sang est glacé dans mes veines, je vais bientôt revoir vos sacrés aïeux : pourquoi voulez-vous que je les afflige, et que je sois obligé de leur dire que je vous ai laissés sous un autre joug que celui de la vertu ?</p>
            </section>
        </article>
    </div> <!-- .main -->
    <script src="main.js"></script>
</body>
</html>

## main.css
/* Approche mobile-first. */
body {
    font-size: 100%;
}
.main {
    width: 90%;
    margin: 0 auto;
    font-size: 1.2em;
    line-height: 1.2; /* Confort de lecture. */
}
/* Agrandissement du texte et rétrécissement
   de la colonne en fonction de la résolution
   pour avoir une lisibilité idéale. */
@media only screen and (min-width: 768px) {
    .main {
        width: 75%;
        font-size: 1.4em;
    }
}
@media only screen and (min-width: 1140px) {
    .main {
        width: 70%;
        font-size: 1.5em;
        max-width: 37em;
    }
}
/* Deux thèmes : l'un clair, l'autre foncé
   pour optimiser les contrastes en fonction
   de la luminosité ambiante. */
.cleartheme {
    background: white;
    color: black;
}
.darktheme {
    background: black;
    color: white;
}

## main.js
var bodyElement = document.getElementsByTagName("body")[0];

var changeTheme = function () {
    /* Toggle between clear/dark theme. */
    if (bodyElement.classList.contains('cleartheme')) {
        bodyElement.classList.remove('cleartheme');
        bodyElement.classList.add('darktheme');
    } else {
        bodyElement.classList.remove('darktheme');
        bodyElement.classList.add('cleartheme');
    }
};

bodyElement.addEventListener('click', changeTheme);

## styleguide.html
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Club de lecture — Styleguide</title>
    <link rel="stylesheet" href="main.css">
    <style>
    article {
        border: 1px dotted lightblue;
        padding: 2em;
    }
    </style>
</head>
<body>
    <div class="main">
        <h1>Styleguide pour le site du club de lecture</h1>
        <p>Par défaut le thème est plutôt clair avec la classe <code>cleartheme</code> :</p>
        <article class="cleartheme">
            <header>
                <h1>Un titre sur fond clair</h1>
                <h3>Un sous-titre</h3>
            </header>
            <section>
                <h2>Titre de la lecture</h2>
                <p>Contenu de la lecture.</p>
            </section>
        </article>
        <p>Mais il peut devenir foncé lorsque l'on change le thème en cliquant sur la page avec la classe <code>darktheme</code> :</p>
        <article class="darktheme">
            <header>
                <h1>Un titre sur fond foncé</h1>
                <h3>Un sous-titre</h3>
            </header>
            <section>
                <h2>Titre de la lecture</h2>
                <p>Contenu de la lecture.</p>
            </section>
        </article>
    </div> <!-- .main -->
</body>
</html>
	<!DOCTYPE html>
	<html lang="fr">
	<head>
	<meta charset="utf-8">
	<title>Club de lecture — Lettres persanes</title>
	<link rel="stylesheet" href="main.css">
	</head>
	<body class="cleartheme"><!-- par défaut le thème est clair -->
	<div class="main"><!-- pour centrer le site -->
	<article>
	<header>
	<h1>Club de lecture : Lettres persanes</h1>
	<h3>Lettre XIV</h3>
	</header>
	<section>
	<p>Comme le peuple grossissoit tous les jours, les Troglodytes crurent qu’il étoit à propos de se choisir un roi : ils convinrent qu’il falloit déférer la couronne à celui qui étoit le plus juste ; et ils jetèrent tous les yeux sur un vieillard vénérable par son âge et par une longue vertu. Il n’avoit pas voulu se trouver à cette assemblée ; il s’étoit retiré dans sa maison, le cœur serré de tristesse.</p>
	<p>Lorsqu’on lui envoya des députés pour lui apprendre le choix qu’on avoit fait de lui : À Dieu ne plaise, dit-il, que je fasse ce tort aux Troglodytes, que l’on puisse croire qu’il n’y a personne parmi eux de plus juste que moi ! Vous me déférez la couronne, et, si vous le voulez absolument, il faudra bien que je la prenne ; mais comptez que je mourrai de douleur d’avoir vu en naissant les Troglodytes libres, et de les voir aujourd’hui assujettis. À ces mots, il se mit à répandre un torrent de larmes. Malheureux jour ! disoit-il ; et pourquoi ai-je tant vécu ? Puis il s’écria d’une voix sévère : Je vois bien ce que c’est, ô Troglodytes ! votre vertu commence à vous peser. Dans l’état où vous êtes, n’ayant point de chef, il faut que vous soyez vertueux, malgré vous ; sans cela vous ne sauriez subsister, et vous tomberiez dans le malheur de vos premiers pères. Mais ce joug vous paroît trop dur : vous aimez mieux être soumis à un prince, et obéir à ses lois, moins rigides que vos mœurs. Vous savez que pour lors vous pourrez contenter votre ambition, acquérir des richesses, et languir dans une lâche volupté ; et que, pourvu que vous évitiez de tomber dans les grands crimes, vous n’aurez pas besoin de la vertu. Il s’arrêta un moment, et ses larmes coulèrent plus que jamais. Et que prétendez-vous que je fasse ? Comment se peut-il que je commande quelque chose à un Troglodyte ? Voulez-vous qu’il fasse une action vertueuse parce que je la lui commande, lui qui la feroit tout de même sans moi, et par le seul penchant de la nature ? Ô Troglodytes ! je suis à la fin de mes jours, mon sang est glacé dans mes veines, je vais bientôt revoir vos sacrés aïeux : pourquoi voulez-vous que je les afflige, et que je sois obligé de leur dire que je vous ai laissés sous un autre joug que celui de la vertu ?</p>
	</section>
	</article>
	</div> <!-- .main -->
	<script src="main.js"></script>
	</body>
	</html>
	/* Approche mobile-first. */
	body {
	font-size: 100%;
	}
	.main {
	width: 90%;
	margin: 0 auto;
	font-size: 1.2em;
	line-height: 1.2; /* Confort de lecture. */
	}
	/* Agrandissement du texte et rétrécissement
	de la colonne en fonction de la résolution
	pour avoir une lisibilité idéale. */
	@media only screen and (min-width: 768px) {
	.main {
	width: 75%;
	font-size: 1.4em;
	}
	}
	@media only screen and (min-width: 1140px) {
	.main {
	width: 70%;
	font-size: 1.5em;
	max-width: 37em;
	}
	}
	/* Deux thèmes : l'un clair, l'autre foncé
	pour optimiser les contrastes en fonction
	de la luminosité ambiante. */
	.cleartheme {
	background: white;
	color: black;
	}
	.darktheme {
	background: black;
	color: white;
	}
	var bodyElement = document.getElementsByTagName("body")[0];

	var changeTheme = function () {
	/* Toggle between clear/dark theme. */
	if (bodyElement.classList.contains('cleartheme')) {
	bodyElement.classList.remove('cleartheme');
	bodyElement.classList.add('darktheme');
	} else {
	bodyElement.classList.remove('darktheme');
	bodyElement.classList.add('cleartheme');
	}
	};

	bodyElement.addEventListener('click', changeTheme);