First commit on new Repo

.gitignore

@@ -0,0 +1 @@
+.DS_Store

static/css/styles.css

@@ -0,0 +1,360 @@
+/* Import UTF-8 */
+
+@charset "UTF-8";
+
+/* Smooth scroll */
+
+@media (prefers-reduced-motion: no-preference) {
+  * {
+    scroll-behavior: smooth;
+  }
+}
+
+/* Import Luciole fonts */
+
+@font-face {
+    font-family: 'luciole';
+    src: url('/theme/fonts/Luciole-Regular.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'luciole-bold';
+    src: url('/theme/fonts/Luciole-Bold.ttf') format('truetype');
+    font-weight: bold;
+    font-style: bold;
+}
+
+/* Main font */
+
+* {
+    font-family: "luciole", "helvetica", "consolas", "sans-serif";
+    font-size: 19px;
+}
+
+/* Variables */
+
+:root {
+    --body-color: rgba(185, 175, 175, 0.493);
+    --header-color: #2a2a44;
+    --headerbackground-color: #ceced1 ;
+    --headerborder-color: rgba(87, 87, 95, 0);
+    --headerbordershadow-color: rgba(87, 87, 95, 0.678);
+    --headerhover-color: #d6d6db;
+    --logo-color: #66666d;
+    --logoborder-color: black;
+    --websitetitle-color: rgb(73, 72, 100);
+    --h1-color: #1c2ba8;
+    --h2-color: rgb(179, 59, 59);
+    --h2borderbottom-color: grey;
+    --footerbackground-color: grey;
+    --maina-color: rgb(173, 165, 168);
+    --articlehover-color: black;
+    --articlehover-background: #959f9752
+}
+
+/* || Body || */
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    position: relative;
+    background-color: var(--body-color);
+}
+
+a {
+    text-decoration: none;
+    color: blue;
+    text-decoration: underline dotted;
+}
+
+/* || HEADER NAV || */
+
+header {
+    width: 100%;
+    height: 115px;
+    background-color: var(--headerbackground-color);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    top: 0;
+    border-bottom: solid 2px var(--headerborder-color);
+    box-shadow: 0 3px 10px var(--headerbordershadow-color);
+}
+
+header > a {
+    text-decoration: none;
+}
+
+#logo {
+    height: 100px;
+    background-color: var(--logo-color);
+    border: thick double black;
+    margin: 5px 5px 0 10px;
+}
+
+.website_title {
+    width: 10%;
+    font-size: 3em;
+    color: var(--websitetitle-color);
+    margin-left: 5%;
+}
+
+header > nav {
+    width: 60%;
+    max-width: 900px;
+    height: 100%;
+    margin: 2%;
+}
+
+nav > ul {
+    height: 100%;
+    display: flex;
+    justify-content: space-evenly;
+    flex-wrap: wrap;
+    align-items: center;
+    padding-inline-start: 0;
+    margin-block: 0;
+}
+
+nav > ul > li {
+    margin: 0 0.2rem;
+    padding: 0.2rem;
+    display: block;
+}
+
+nav > ul > li > a:hover, a.mail:hover, a.precedent:hover, a.suivant:hover, a.archives_link:hover {
+    background-color: var(--headerhover-color);
+    color: var(--header-color);
+    cursor: pointer;
+    padding: 3px;
+    font-size: 1.2em;
+}
+
+li > a {
+    color: inherit;
+}
+
+/* || Main || */
+
+main {
+    margin: 2% 18%;
+    padding: auto;
+    /* border: solid 3px rgb(92, 78, 78); */
+    text-align: justify;
+    /* max-width: 1500px;*/
+}
+
+hr {
+    margin-top: 15px;
+    margin-bottom: 15px;
+}
+
+p, ul {
+    padding: 12px 0;
+    line-height: 1.6;
+}
+
+h1 {
+    color: var(--h2-color);
+    font-family: "luciole-bold";
+    font-size: 2.5em;
+    text-align: center;
+    color: var(--h1-color);
+}
+
+h2 {
+    color: var(--h2-color);
+    font-family: "luciole-bold";
+    font-size: 2.2em;
+    text-align: left;
+    padding-top: 15px;
+}
+
+h3, h4 {
+    font-size: 1.6em;
+    font-family: luciole-bold;
+    text-align: left;
+    padding-top: 15px;
+}
+
+main > a:hover {
+    background-color: var(--maina-color);
+    font-size: 2.2em;
+    cursor: pointer;
+    padding: 3px;
+}
+
+/* || Footer nav || */
+
+footer {
+    width: 100%;
+    height: 70px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    flex-wrap: wrap;
+    background-color: var(--footerbackground-color);
+    border-top: solid 5px;
+}
+
+#footer-nav {
+    line-height: 1;
+    padding: 5px 0;
+}
+
+/* Pelican */
+/* Index page */
+
+.titre_article_liste {
+    font-size: 1.2em;
+    padding-top: 15px;
+}
+
+.post-link {
+    font-size: 1.5em;
+    padding-top: 1%;
+}
+
+.infos {
+    font-size: 0.8em;
+    padding: 0;
+}
+
+a.post-link:hover {
+    background-color: var(--articlehover-background);
+    color: var(--articlehover-color);
+    cursor: pointer;
+    padding: 3px;
+    font-size: 1.8em;
+}
+
+/* Article page */
+
+.infos_article {
+    font-size: 0.8em;
+    text-align: center;
+}
+
+/* Archives page */
+
+.archives_date {
+    padding-top: 10px;
+}
+
+.archives_articles_title {
+    padding-top: 2px;
+    text-indent: 5%;
+    text-decoration: underline;
+}
+
+/* Comments part */
+
+.comments {
+    padding-top: 1%;
+}
+
+.mail, .precedent, .suivant {
+    text-decoration: underline;
+}
+
+/* Pagination */
+
+.pagination {
+    text-align: center;
+    padding-top: 30px;
+}
+
+/* Web responsive */
+/* Extra small devices (phones, 300px and down) */
+@media (max-width: 300px) {
+    header {
+        height: 400px;
+        flex-direction: column;
+    }
+    #logo {
+        margin-bottom: 5px;
+    }
+    header > nav {
+        margin: 0;
+    }
+    .website_title {
+        font-size: 1.5em;
+        margin-left: 0;
+    }
+    header > nav > ul {
+        flex-direction: column;
+        justify-content: left;
+    }
+    /* Besoin de verifier cette partie*/
+    footer {
+        height: 200px;
+        flex-direction: column;
+        align-items: left;
+    }
+    .footer-text, .footer-link {
+        font-size: 0.9em !important;
+    }
+    main {
+        margin: 4% 10%;
+    }
+}
+
+/* small devices (phones, 600px and down) */
+@media (max-width: 700px) and (min-width: 299px) {
+    header {
+        height: 425px;
+        flex-direction: column;
+    }
+    .website_title {
+        font-size: 1.5em;
+    }
+    #logo {
+        margin-bottom: 5px;
+    }
+    header > nav {
+        margin: 0;
+    }
+    header > nav > ul {
+        flex-direction: column;
+        /* justify-content: left; */
+    }
+    footer {
+        height: 120px;
+        font-size: 0.8em;
+    }
+    main {
+        margin: 4% 10%;
+    }
+}
+
+/* Medium devices (landscape tablets, 920px and down) */
+@media (max-width: 1200px) and (min-width: 701px) {
+    header {
+        height: 300px;
+        flex-direction: column;
+    }
+    header > nav {
+        width: 100%;
+    }
+    header > nav > ul {
+        flex-wrap: nowrap;
+    }
+    header > nav > ul > li > a {
+        font-size: 1.2em;
+    }
+    main {
+        margin: 3% 11%;
+    }
+    footer {
+        height: 100px;
+    }
+}
+
+/* Extra large devices (large laptops and desktops, 1200px and up)
+@media only screen and (min-width: 1200px) {...} */

templates/archives.html

@@ -0,0 +1,15 @@
+{% extends "base.html" %}
+
+{% block title %}Archives - {{ SITENAME }}{% endblock %}
+
+
+{% block content %}
+<h1 class="archives_title">Liste exhaustive des articles publiés à ce jour sur le blog : </h2>
+
+<dl>
+{% for article in dates %}
+    <dt class="archives_date"><strong>{{ article.date|strftime('%d/%m/%Y') }}</strong></dt>
+    <dd class="archives_articles_title"><a class="archives_link" href="{{ SITEURL }}/{{ article.url }}">{{ article.title }}</a></dd>
+{% endfor %}
+</dl>
+{% endblock %}

templates/article.html

@@ -0,0 +1,17 @@
+{% extends "base.html" %}
+
+{% block title %}{{ article.title }} - {{ SITENAME }}{% endblock %}
+
+{% block head %}
+{{ super() }}
+    <meta property="og:title" content="{{ article.title }}">
+    <meta property="og:description" content="{{ article.summary|striptags }}">
+    <meta property="og:url" content="{{ SITEURL }}/{{ article.url }}">
+{% endblock %}
+
+{% block content %}
+    <h1 class="article_main_title">{{ article.title }}</h1>
+    <p class="infos_article">Publié le {{ article.date|strftime('%d/%m/%Y') }}{% if article.author %} et écrit par {{ article.author }}{% endif %}, dans la catégorie : {% if article.category %}<a title="Lien vers les publications marquée par la catégorie {{ article.category }}" href="{{ SITEURL }}/{{ article.category.url }}"  class="category-link">#{{ article.category }} </a>{% endif %}</p>
+    {{ article.content }}
+	{% include 'comments.html' %}
+{% endblock %}

templates/base.html

@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="{% block html_lang %}{{ DEFAULT_LANG }}{% endblock html_lang %}">
+<head>
+    {% block head %}
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="author" content="{{ AUTHOR }}">
+    <meta name="description" content="Personal website about Japan and IT">
+    <meta name="keywords" content="Japan, Japon, web, html, css, Linux, adminsys">
+    <meta name="generator" content="Pelican">
+    <title>{% block title %}{{ SITENAME }}{% endblock title %}</title>
+
+    <!-- Links -->
+    <link rel="icon" type="image/x-icon" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/images/favicon.ico"><!--favicon Link-->
+    <link rel="stylesheet" type="text/css" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/styles.css">
+
+    <!--Force robots to index the page-->
+    <meta name="robots" content="index,follow">
+    <link rel="canonical" href="#"><!--Link-->
+
+    <!--Meta tags for Facebook-->
+    <meta property="og:title" content="{{ SITENAME }}">
+    <meta property="og:site_name" content="#"><!--Link without https://www.-->
+    <meta property="og:description" content="Personal website about Japan and IT">
+    <meta property="og:url" content="#"><!--Link-->
+    <meta property="type" content="website">
+    {% endblock head %}
+</head>
+<body>
+    <header>
+        <a href="{{ SITEURL }}/index.html" title="Acceuil du site MicroWeb" id="ordi"><img id="logo" src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/images/logo.png" alt="Logo representant un ordinateux en pixel art"></a>
+        <a href="{{ SITEURL }}/index.html" title="Acceuil du site MicroWeb"><strong class="website_title">MicroWeb</strong></a>
+        <nav class="nav">
+            <ul class="ul">
+                <li><a href="{{ SITEURL }}/index.html" title="Acceuil du site MicroWeb">Accueil</a></li>
+                <li><a href="{{ SITEURL }}/archives.html" title="Archives du blog de Supmagie">Archives</a></li>
+                <li><a href="https://avoir.unbon.cafe/supmagie/index.gmi" title="Capsule Gemini de Supmagie">Capsule Gemini</a></li>
+                <li><a href="{{ SITEURL }}/pages/galerie.html" title="Galerie photo du Supmagie">Galerie</a></li>
+                <li><a href="{{ SITEURL }}/pages/aboutme.html" title="Qui est Supmagie?">Qui suis-je ?</a></li>
+                <li><a href="{{ SITEURL }}/pages/cv.html" title="CV de Supmagie">Mon CV</a></li>
+        </ul>
+        </nav>
+    </header>
+
+    <main>
+        {% block content %}
+        {% endblock %}
+    </main>
+    
+    <footer> 
+        <nav>
+            <ul id="footer-nav">
+                <li class="footer-text">Created by Supmagie - 2024</li>
+                <li class="footer-text"> | </li>
+                <li class="footer-text">Pour me contacter : </li>
+                <li><a href="mailto:supmagie@gmail.com?subject=Contact from my website" title="Contacter par email" class="footer-link">Email</a></li>
+                <li><a href="#" title="Contacter par LinkedIn" class="footer-link">LinkedIn</a></li>
+                <li class="footer-text"> | </li>
+                <li class="footer-text">Pour me soutenir : </li>
+                <li><a href="https://liberapay.com/Supmagie/" title="Faire un don LiberaPay" class="footer-link">LiberaPay</a></li>
+            </ul>
+        </nav>
+    </footer>
+</body>
+</html>

templates/category.html

@@ -0,0 +1,23 @@
+{% extends "base.html" %}
+
+{% block title %}Catégorie "{{ category }}" - {{ SITENAME }}{% endblock %}
+
+{% block head %}
+{{ super() }}
+    <meta property="og:title" content="{{ category }}">
+    <meta property="og:description" content="Articles rangés dans la catégorie &laquo; {{ category }} &raquo;">
+    <meta property="og:url" content="{{ SITEURL }}/{{ category.url }}">
+{% endblock %}
+    
+{% block content %}
+    <h1 class="category_title">Catégorie &laquo; {{ category }} &raquo;</h1>
+    {% for article in articles_page.object_list %}
+        <h2><a title="Lien vers {{ article.title }}" class="post-link" href="{{ SITEURL }}/{{ article.url }}">{{ article.title }}</a></h2>
+        <p class="infos_article">Publié le {{ article.date|strftime('%d/%m/%Y') }} par {{ article.author }}</p>
+        <p>{{ article.summary }}</p>
+        <hr/>
+    {% endfor %}
+    {% if articles_page.has_other_pages() %}
+        {% include 'pagination.html' %}
+    {% endif %}
+{% endblock %}

templates/comments.html

@@ -0,0 +1,5 @@
+<hr>
+<div class="comments">
+    <h4>Vous avez une remarque ou un commentaire ?</h4>
+    <p>Contactez moi <a class="mail" title="Envoyer un commentaire ou une remarque" href="mailto:supmagie@gmail.com?subject=Commentaire à propos de {{ article.slug }}"><strong>par mail</strong></a></p>
+</div>

templates/index.html

@@ -0,0 +1,23 @@
+{% extends "base.html" %}
+
+{% block title %}Accueil - {{ SITENAME }}{% endblock %}
+
+{% block head %}
+{{ super() }}
+<meta property="og:title" content="{{ SITENAME }}">
+<meta property="og:description" content="{{ MOTTO }}">
+<meta property="og:url" content="{{ SITEURL }}">
+{% endblock %}
+
+{% block content %}
+    <h1 class="articles_recent">Articles récents : </h1>
+    {% for article in articles_page.object_list %}
+        <h2 class="titre_article_liste"><a title="Lien vers {{ article.title }}" class="post-link" href="{{ SITEURL }}/{{ article.url }}">{{ article.title }}</a></h2>
+        <p class="infos">Publié le {{ article.date|strftime('%d/%m/%Y') }} par {{ article.author }}, dans la catégorie : {% if article.category %}<a title="Lien vers les publications marquée par la catégorie {{ article.category }}" href="{{ SITEURL }}/{{ article.category.url }}" class="category-link">#{{ article.category }} </a>{% endif %}</p>
+        {{ article.summary }}
+        <hr/>
+    {% endfor %}
+    {% if articles_page.has_other_pages() %}
+        {% include 'pagination.html' %}
+    {% endif %}
+{% endblock %}

templates/page.html

@@ -0,0 +1,15 @@
+{% extends "base.html" %}
+
+{% block title %}{{ page.title }} - {{ SITENAME }}{% endblock %}
+
+{% block head %}
+{{ super() }}
+<meta property="og:title" content="{{ page.title }}">
+<meta property="og:description" content="{{ page.title }}">
+<meta property="og:url" content="{{ SITEURL }}/{{ page.url }}">
+{% endblock %}
+
+{% block content %}
+<h1>{{ page.title }}</h3>
+    {{ page.content }}
+{% endblock %}

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; Articles 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">Articles plus anciens &raquo;</a>
+        {% endif %}
+</p>
+{% endif %}

templates/translation.html

@@ -0,0 +1,17 @@
+{% macro translations_for(article) %}
+{% if article.translations %}
+<p>Traductions : 
+{% for translation in article.translations %}
+<a href="{{ SITEURL }}/{{ translation.url }}" hreflang="{{ translation.lang }}">{{ translation.lang }}</a>
+{% endfor %}
+</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 %}