Première publication du thème

2020-07-10 22:23:06 +02:00 · 2020-07-10 22:23:06 +02:00 · ac58f31bd5
parent c4a6b2b6de
commit ac58f31bd5
20 changed files with 536 additions and 1 deletions
--- a/LICENSE.md
+++ b/LICENSE.md
@ -0,0 +1,25 @@
+BSD 2-Clause License
+
+Copyright (c) 2020, Vincent Finance
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
--- a/README.md
+++ b/README.md
@ -1,3 +1,29 @@
 # BasicMario

-A simple, but yet practical theme for my blog / Un thème simple, mais fonctionnel pour mon blog.
+## French
+
+Un thème simple, mais fonctionnel pour mon blog
+
+Ce thème fonctionne avec la dernière version de Pelican (testé sous Ubuntu 20.04) et ne nécessite pas de dépendances particulières.  
+Il est responsive et fonctionne sur la plupart des équipements pouvant afficher un site web (liseuses d'ebooks, tablettes, smartphones, PC, TVs). Il inclut un script JavaScript qui sert uniquement à activer le mode jour/nuit en chargeant une classe dédiée.
+
+## English
+
+A simple, but yet practical theme for my blog
+
+This theme uses latest version of Pelican (tested on Ubuntu 20.04) and it doesn't any dependencies to work.  
+It's a reponsive theme and it works almost all of web-capable devices (e-books readers, tablets, smartphones, computers and TVs). It includes a JavaScript script to activate the night/day switch by loading a special CSS class.
+
+## Screenshots
+
+|![Normal version](screenshot1.png)|Normal version|
+|![Mobile version](screenshot2.png)|Mobile version|
+|![Night-mode version](screenshot3.png)|Night-mode version|
+
+## Licence / License
+
+Licence du projet / Project's license : BSD 2-Clause
+
+### Notes addtionnelles / Extra notes
+
+Script JavaScript : basé sur le travail de prx@ybad.name (CC BY 4.0) / JavaScript script : based on the work of prx@ybad.name
--- a/screenshot1.png
+++ b/screenshot1.png
--- a/screenshot2.png
+++ b/screenshot2.png
--- a/screenshot3.png
+++ b/screenshot3.png
--- a/static/css/style.css
+++ b/static/css/style.css
@ -0,0 +1,199 @@
+@charset "UTF-8";
+/* Réglages du corps de page */
+body {
+	margin: 0;
+	padding: 0;
+	background-color: #e5e9f0;
+	color: #3b4252;
+	text-align: justify;
+	font-size: medium;
+	font-family: sans-serif;
+	/* Propriétés pour les grilles */
+	display: grid;
+	grid-template-columns: 1fr;
+	grid-template-rows: auto;
+	grid-template-areas:	"nav"
+				"header"
+				"main"
+				"footer";
+}
+/* Réglages des liens dans les pages */
+a {
+	text-decoration: none;
+	color: #5e81ac;
+}
+a:hover, .rss:hover, body.night a:hover {
+	color: #bf616a;
+}
+/* Réglages pour l'apparence des listes */
+ul {
+	list-style: square;
+}
+/* Réglages pour la mise en forme du corps de l'article */
+.post {
+	grid-area: main;
+	margin: 3% 20%;
+}
+/* Réglages pour la mise en forme du système de pagination */
+/* Boîte principale */
+.pagination {
+	text-align: center;
+	padding: 15px;
+}
+/* Boutons "Billets plus récents" & "Billets plus anciens" */
+.precedent, .suivant {
+	margin: 10px;
+	padding: 5px;
+	background-color: #d8dee9;
+	border: 2px solid #5e81ac;
+}
+/* Option pour changer la couleur de la bordure du bouton lors du survol */
+.precedent:hover, .suivant:hover, body.night .precedent:hover, body.night .suivant:hover {
+	border: 2px solid #bf616a;
+}
+/* Classe dédiée pour le centrage de texte */
+.center {
+	text-align: center;
+}
+/* Réglages pour les blocs de citation */
+blockquote {
+	text-align: center;
+	font-style: italic;
+	padding: 1%;
+}
+/* Réglages pour les blocs "Poésie des mots" */
+kanji {
+	text-align: center;
+	font-size: 40px;
+}
+/* Réglages pour les images */
+img {
+	margin: 2% auto;
+	display: block;
+}
+table {
+	margin: auto;
+}
+/* Réglages pour le menu de navigation */
+nav {
+	grid-area: nav;
+	padding: 20px 0;
+	border-bottom: 3px solid #5e81ac;
+	background-color: #d8dee9;
+	text-align: right;
+	font-size: medium;
+}
+nav a {
+	padding: 15px;
+}
+.rss, body.night .rss {
+	color: #d08770;
+}
+#title {
+	float: left;
+}
+/* Réglages pour l'en-tête du site */
+header {
+	grid-area: header;
+	padding: 50px 0;
+	color: #0d0d0d;
+	background-repeat: no-repeat;
+	background-position: center;
+	background-size: 100%;
+}
+.fond {
+	width: 50%;
+	margin: auto;
+	padding: 5px 15px;
+	background-color: #eceff4b3;
+}
+#switch {
+	background-color: #2e3440;
+	color: #d8dee9;
+	float: right;
+	padding: 5px;
+	border: 3px solid #d8dee9;
+}
+/* Réglages pour le pied de page */
+footer {
+	grid-area: footer;
+	font-size: 0.75em;
+	border-top: 3px solid #5e81ac;
+	background-color: #d8dee9;
+}
+/* Réglages permettant d'améliorer l'expérience sur téléphones et tablettes */
+@media (max-width: 1050px) {
+	nav {
+		padding: 0;
+	}
+	nav a {
+		display: block;
+		text-align: center;
+	}
+	#title {
+		float: none;
+	}
+	#title a {
+		background-color: #2e3440;
+	}
+	.precedent, .suivant {
+		display: block;
+		margin: 2%;
+		padding: 2%;
+	}
+}
+/* Réglages concernant la taille du fond d'écran de la bannière pour les smartphones */
+@media (max-width: 500px) {
+	h1 {
+		font-size: 1.55em;
+	}
+	header {
+		background-size: 300%;
+	}
+	.precedent, .suivant {
+		margin: 5%;
+		padding: 5%;
+	}
+	.post {
+		margin: 3% 10%;
+	}
+	/* Adaptation des modules vidéo et autre plugins sur des écrans de petite taille */
+	iframe {
+		width: 250px;
+	}
+}
+/* Réglages permettant d'améliorer l'expérience sur les grands écrans */
+@media (min-width: 1200px) {
+	body {
+		font-size: larger;
+	}
+}
+/* Night mode */
+body.night {
+	background-color: #3b4252;
+	color: #d8dee9;
+}
+nav.night, footer.night {
+	background-color: #434c5e;
+	border-color: #88c0d0;
+	color: #d8dee9;
+}
+body.night header {
+	color: #d8dee9;
+}
+body.night .fond {
+	background-color: #4c566ab3;
+}
+body.night #switch {
+	color: #2e3440;
+	background-color: #d8dee9;
+	border-color: #2e3440;
+}
+body.night .precedent, body.night .suivant {
+	background-color: #4c566a;
+	border-color: #88c0d0;
+}
+body.night a {
+	color: #88c0d0;
+}
+
--- a/static/favicon.ico
+++ b/static/favicon.ico
--- a/static/fonds/wall1.jpg
+++ b/static/fonds/wall1.jpg
--- a/static/fonds/wall2.jpg
+++ b/static/fonds/wall2.jpg
--- a/static/fonds/wall3.jpg
+++ b/static/fonds/wall3.jpg
--- a/static/js.js
+++ b/static/js.js
@ -0,0 +1,48 @@
+/* Based on @prx's script available there : https://ybad.name/js.js */
+/* License : CC-BY 4.0 */
+/* night mode */
+/* each getElement declaration erase and add a special class "night" in the CSS file */
+function setNightMode() {
+	document.body.className = "night";
+	document.getElementById("switch").innerHTML = "Mode sombre";
+	document.getElementsByTagName("nav")[0].className = "night";
+	document.getElementsByTagName("footer")[0].className = "night center";
+}
+function setDayMode() {
+	document.body.className = "";
+	document.getElementById("switch").innerHTML = "Mode clair";
+	document.getElementsByTagName("nav")[0].className = "";
+	document.getElementsByTagName("footer")[0].className = "center";
+}
+/* this is the switch */
+function toggleNightMode() {
+    if (localStorage.nightMode == 'off') {
+        setNightMode();
+        localStorage.setItem('nightMode', 'on');
+    } 
+    else {
+        setDayMode();
+        localStorage.setItem('nightMode', 'off');
+    }
+}
+/* this allows a persistent theming */
+function setcolormode() {
+	if (typeof (Storage) !== 'undefined') {
+		if (localStorage.nightMode) {
+			if (localStorage.nightMode == 'on') {
+				setNightMode();
+			}
+		} 
+		else {
+			localStorage.setItem('nightMode', 'off');
+		}
+	} else {
+		/* Sorry! No Web Storage support..*/
+	}
+}
+/* startall */
+function start() {
+	setcolormode();
+}
+/* let's load the thing ! */
+window.onload = function(){start()};
--- a/templates/archives.html
+++ b/templates/archives.html
@ -0,0 +1,26 @@
+{% extends "base.html" %}
+
+{% block title %}Archives - {{ SITENAME }}{% endblock %}
+
+{% block head %}
+{{ super() }}
+<style>
+    header {background-image: url("{{ SITEURL }}/{{ THEME_STATIC_DIR }}/fonds/wall2.jpg");}
+</style>
+{% endblock %}
+
+{% block header %}
+<h1>Archives chronologiques du blog</h1>
+<p>Une liste de tous les articles publiés depuis son existence</p>
+{% endblock %}
+
+{% block content %}
+<div class="post">
+<dl>
+{% for article in dates %}
+    <dt><strong>{{ article.date|strftime('%d/%m/%Y') }}</strong></dt>
+    <dd><a href="{{ SITEURL }}/{{ article.url }}">{{ article.title }}</a></dd>
+{% endfor %}
+</dl>
+</div>
+{% endblock %}
--- a/templates/article.html
+++ b/templates/article.html
@ -0,0 +1,30 @@
+{% extends "base.html" %}
+
+{% block title %}{{ article.title }} - {{ SITENAME }}{% endblock %}
+
+{% block head %}
+{{ super() }}
+{% import 'translations.html' as translations with context %}
+{% if translations.entry_hreflang(article) %}
+    {{ translations.entry_hreflang(article) }}
+{% endif %}
+<style>
+    header {background-image: url("{{ SITEURL }}/{{ THEME_STATIC_DIR }}/fonds/wall2.jpg");}
+</style>
+{% endblock %}
+
+{% block header %}
+<h1>{{ article.title }}</h1>
+<p><span>Publié le {{ article.date|strftime('%d/%m/%Y') }}</span>{% if article.author %} • <span>Écrit par {{ article.author }}</span>{% endif %}</p>
+<p><strong>Catégorie : {% if article.category %}<span><a title="Lien vers les publications marquée par la catégorie {{ article.category }}" href="{{ SITEURL }}/{{ article.category.url }}">#{{ article.category }} </a></span>{% endif %}</strong></p>
+{% import 'translations.html' as translations with context %}
+{{ translations.translations_for(article) }}
+{% endblock %}
+
+{% block content %}
+<div class="post">
+    {{ article.content }}
+	<script type="text/javascript" src="/hashover/comments.php"></script>
+	{% include 'comments.html' %}
+</div>
+{% endblock %}
--- a/templates/base.html
+++ b/templates/base.html
@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="{% block html_lang %}{{ DEFAULT_LANG }}{% endblock html_lang %}">
+<head>
+        {% block head %}
+        <title>{% block title %}{{ SITENAME }}{% endblock title %}</title>
+        <meta charset=UTF-8>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <meta name="generator" content="Pelican">
+        <meta name="author" content="{{ AUTHOR }}"/>
+        <link rel="icon" type="image/x-icon" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/favicon.ico"/>
+        <link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/style.css">
+        <link rel="stylesheet" type="text/css" href="/hashover/themes/default/comments.css">
+        {% if FEED_ATOM %}
+        <link href="{{ FEED_DOMAIN }}/{%if FEED_ATOM_URL %}{{ FEED_ATOM_URL }}{% else %}{{ FEED_ATOM }}{% endif %}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} Atom Feed" />
+        {% endif %}
+        {% if FEED_RSS %}
+        <link href="{{ FEED_DOMAIN }}/{% if FEED_RSS_URL %}{{ FEED_RSS_URL }}{% else %}{{ FEED_RSS }}{% endif %}" type="application/rss+xml" rel="alternate" title="{{ SITENAME }} RSS Feed" />
+        {% endif %}
+        {% if CATEGORY_FEED_ATOM and category %}
+        <link href="{{ FEED_DOMAIN }}/{% if CATEGORY_FEED_ATOM_URL %}{{ CATEGORY_FEED_ATOM_URL.format(slug=category.slug) }}{% else %}{{ CATEGORY_FEED_ATOM.format(slug=category.slug) }}{% endif %}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} Categories Atom Feed" />
+        {% endif %}
+        {% if CATEGORY_FEED_RSS and category %}
+        <link href="{{ FEED_DOMAIN }}/{% if CATEGORY_FEED_RSS_URL %}{{ CATEGORY_FEED_RSS_URL.format(slug=category.slug) }}{% else %}{{ CATEGORY_FEED_RSS.format(slug=category.slug) }}{% endif %}" type="application/rss+xml" rel="alternate" title="{{ SITENAME }} Categories RSS Feed" />
+        {% endif %}
+        <script src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/js.js"></script>
+        {% endblock head %}
+</head>
+<body>
+        <nav>
+            <span id="title"><a title="Accueil du blog" href="/">{{ SITENAME }}</a></span>
+            <a title="Lien vers la page À propos de" href="{{ SITEURL }}/pages/about.html">À propos du blog</a>
+            <a title="Lien vers la page À propos de moi" href="{{ SITEURL }}/pages/about-me.html">À propos de l'auteur</a>
+            <a title="Lien vers les archives du blog" href="{{ SITEURL }}/archives.html">Archives</a>
+            <a title="Lien vers la page Sites du moment" href="{{ SITEURL }}/pages/sdm.html" rel="noopener noreferrer">Sites du moment</a>
+            <a title="Lien vers ma page de contact" href="{{ SITEURL }}/pages/contact.html">Contact</a>
+            <a class="rss" title="Flux RSS du blog" href="{{ SITEURL }}/{{ FEED_ALL_RSS }}">Flux RSS</a>
+            <a class="rss" title="Flux Atom du blog" href="{{ SITEURL }}/{{ FEED_ALL_ATOM }}">Flux Atom</a>
+        </nav>
+        <header class="center">
+            <a id="switch" href="#" onclick="toggleNightMode();" id="nightmode">Mode clair</a>
+            <div class="fond">
+                {% block header %}
+                {% endblock %}
+            </div>
+        </header>
+        {% block content %}
+        {% endblock %}
+        <footer class="center">
+            <p>{{ AUTHOR }} / <a title="Générateur de blogs statiques en Python" target="_blank" rel="noopener noreferrer" href="https://getpelican.com/">Pelican</a> & <a title="Site officiel d'OpenBSD" rel="noopener noreferrer" target="_blank" href="https://www.openbsd.org/">OpenBSD</a> / <a title="Licence de publication du blog" rel="noopener noreferrer" target="_blank" href="https://creativecommons.org/licenses/by/4.0/deed.fr">CC BY 4.0</a> / <a title="Lien vers ma page Liberapay" rel="noopener noreferrer" target="_blank" href="https://liberapay.com/linuxmario/donate">Me soutenir</a> / <a title="Lien vers le wiki de @prx" rel="noopener noreferrer" target="_blank" href="https://ybad.name/ah/">Envie d'apprendre à vous héberger ?</a></p>
+        </footer>
+</body>
+</html>
--- a/templates/category.html
+++ b/templates/category.html
@ -0,0 +1,35 @@
+{% extends "base.html" %}
+
+{% block title %}Catégorie "{{ category }}" - {{ SITENAME }}{% endblock %}
+
+{% block head %}
+{{ super() }}
+<style>
+    header {background-image: url("{{ SITEURL }}/{{ THEME_STATIC_DIR }}/fonds/wall3.jpg");}
+</style>
+{% endblock %}
+
+{% block header %}
+{{ super() }}
+<h1>Articles rangés dans la catégorie &laquo; {{ category }} &raquo;</h1>
+<p><strong><a class="rss" title="Lien vers le flux RSS pour la catégorie {{ category }}" href="{{ SITEURL }}/{{ CATEGORY_FEED_RSS.format(slug=category.slug) }}">Flux RSS de la catégorie</a> / <a class="rss" title="Lien vers le flux Atom pour la catégorie {{ category }}" href="{{ SITEURL }}/{{ CATEGORY_FEED_ATOM.format(slug=category.slug) }}">Flux Atom de la catégorie</a></strong></p>
+{% endblock %}
+
+{% block content %}
+<div class="post">
+    <ul>
+    {% for article in articles_page.object_list %}
+        <li>
+            <h3>
+            <a title="Lien vers {{ article.title }}" class="post-link" href="{{ SITEURL }}/{{ article.url }}">{{ article.title }}</a>
+            </h3>
+            <span class="post-meta">Publié le {{ article.date|strftime('%d/%m/%Y') }} par {{ article.author }}</span>
+            <p class="post-description">{{ article.summary }}</p>
+        </li>
+    {% endfor %}
+    </ul>
+    {% if articles_page.has_other_pages() %}
+        {% include 'pagination.html' %}
+    {% endif %}
+</div>
+{% endblock %}
--- a/templates/comments.html
+++ b/templates/comments.html
@ -0,0 +1,5 @@
+<hr>
+<div>
+	<h3>Un commentaire ?</h3>
+	<section id="hashover"></section> 
+</div>
--- a/templates/index.html
+++ b/templates/index.html
@ -0,0 +1,37 @@
+{% extends "base.html" %}
+
+{% block title %}Accueil - {{ SITENAME }}{% endblock %}
+
+{% block head %}
+{{ super() }}
+<style>
+    header {background-image: url("{{ SITEURL }}/{{ THEME_STATIC_DIR }}/fonds/wall1.jpg");}
+</style>
+{% endblock %}
+
+{% block header %}
+{{ super() }}
+<h1>{{ SITENAME }}</h1>
+<p>{{ MOTTO }}</p>
+{% endblock %}
+
+{% block content %}
+<div class="post">
+    <h2 class="page-heading">Liste des publications</h2>
+    <ul>
+    {% for article in articles_page.object_list %}
+        <li>
+            <h3>
+            <a title="Lien vers {{ article.title }}" class="post-link" href="{{ SITEURL }}/{{ article.url }}">{{ article.title }}</a>
+            </h3>
+            <span class="post-meta">Publié le {{ article.date|strftime('%d/%m/%Y') }} par {{ article.author }}</span>
+            <p><strong>Catégorie : {% if article.category %}<span><a title="Lien vers les publications marquée par la catégorie {{ article.category }}" href="{{ SITEURL }}/{{ article.category.url }}">#{{ article.category }} </a></span>{% endif %}</strong></p>
+            <p class="post-description">{{ article.summary }}</p>
+        </li>
+    {% endfor %}
+    </ul>
+    {% if articles_page.has_other_pages() %}
+        {% include 'pagination.html' %}
+    {% endif %}
+</div>
+{% endblock %}
--- a/templates/page.html
+++ b/templates/page.html
@ -0,0 +1,21 @@
+{% extends "base.html" %}
+
+{% block title %}{{ page.title }} - {{ SITENAME }}{% endblock %}
+
+{% block head %}
+{{ super() }}
+<style>
+    header {background-image: url("{{ SITEURL }}/{{ THEME_STATIC_DIR }}/fonds/wall1.jpg");}
+</style>
+{% endblock %}
+
+{% block header %}
+{{ super() }}
+<h1>{{ page.title }}</h1>
+{% endblock %}
+
+{% block content %}
+<div class="post">
+    {{ page.content }}
+</div>
+{% endblock %}
--- a/templates/pagination.html
+++ b/templates/pagination.html
@ -0,0 +1,13 @@
+{% if DEFAULT_PAGINATION %}
+{% set first_page = articles_paginator.page(1) %}
+{% set last_page = articles_paginator.page(articles_paginator.num_pages) %}
+<p class="pagination">
+        {% if articles_page.has_previous() %}
+            <a href="{{ SITEURL }}/{{ articles_previous_page.url }}" class="precedent">&laquo; Billets plus récents</a>
+        {% endif %}
+        Page {{ articles_page.number }} / {{ articles_paginator.num_pages }}
+        {% if articles_page.has_next() %}
+            <a href="{{ SITEURL }}/{{ articles_next_page.url }}" class="suivant">Billets plus anciens &raquo;</a>
+        {% endif %}
+</p>
+{% endif %}
--- a/templates/translations.html
+++ b/templates/translations.html
@ -0,0 +1,17 @@
+{% macro translations_for(article) %}
+{% if article.translations %}
+<p><span>Traductions disponibles : 
+{% for translation in article.translations %}
+<a href="{{ SITEURL }}/{{ translation.url }}" hreflang="{{ translation.lang }}">{{ translation.lang }}</a>
+{% endfor %}
+</span></p>
+{% endif %}
+{% endmacro %}
+
+{% macro entry_hreflang(entry) %}
+{% if entry.translations %}
+  {% for translation in entry.translations %}
+    <link rel="alternate" hreflang="{{ translation.lang }}" href="{{ SITEURL }}/{{ translation.url }}">
+  {% endfor %}
+{% endif %}
+{% endmacro %}