style sass

This commit is contained in:
Tykayn 2024-11-10 18:43:38 +01:00 committed by tykayn
parent f016f842c9
commit 8c45ae05f9
24 changed files with 803 additions and 647 deletions

View File

@ -215,14 +215,12 @@ def generer_index(dossier_source, fichier_index, titre_index):
os.makedirs(os.path.dirname(new_folder_path_this_article), exist_ok=True) os.makedirs(os.path.dirname(new_folder_path_this_article), exist_ok=True)
# déplacer le fichier html dans le dossier slug, et le renommer en index.html ensuite pour ne pas modifier l'index du blog # déplacer le fichier html dans le dossier slug, et le renommer en index.html ensuite pour ne pas modifier l'index du blog
shutil.copy(chemin_fichier_this_article, new_folder_path_this_article+'index.html') shutil.copy(chemin_fichier_this_article, new_folder_path_this_article+'index.html')
# ---------------- pareil en anglais TODO
# contenu_index_gmi += "\n# Articles in English\n-------------------------\n" # contenu_index_gmi += "\n# Articles in English\n-------------------------\n"
# contenu_index_html += "<h1>Articles in English</h1>" # contenu_index_html += "<h1>Articles in English</h1>"
# lang_folder="lang_en/" # lang_folder="lang_en/"
# for fichier in files_en: # for fichier in files_en:
# contenu_index_gmi += f"=> {fichier}\n" # ----------------------------------------
# link_html = fichier.replace('..gmi','.html')
# contenu_index_html += f"<br><a href=/{lang_folder}{link_html}>{link_html}</a>"
print(contenu_index_gmi) print(contenu_index_gmi)

View File

@ -178,7 +178,7 @@ bash sass_styles.sh
for website_name in "${blogs_folders[@]}"; do for website_name in "${blogs_folders[@]}"; do
generate_website $website_name generate_website $website_name
convert_markdown_to_gmi $website_name # convert_markdown_to_gmi $website_name
# création de l'index: # création de l'index:
# prendre les fichiers markdown du dossier md/ , # prendre les fichiers markdown du dossier md/ ,
@ -187,21 +187,20 @@ for website_name in "${blogs_folders[@]}"; do
python3 build_indexes.py $website_name "$website_name" python3 build_indexes.py $website_name "$website_name"
# déplacer les fichiers générés en html dans le dossier statique # déplacer les fichiers générés en html dans le dossier statique
# mv sources/$website_name/converted/*.html html-websites/$website_name/
# mv sources/$website_name/lang_fr/converted/*.html html-websites/$website_name/ cp sources/$website_name/converted/*.html html-websites/$website_name/
mv index_$website_name.html html-websites/$website_name/index.html cp index_$website_name.html html-websites/$website_name/index.html
mv sources/$website_name/converted/*.html html-websites/$website_name/ cp sources/$website_name/converted/lang_fr/*.html html-websites/$website_name/lang_fr/
mv sources/$website_name/converted/lang_fr/*.html html-websites/$website_name/lang_fr/ cp sources/$website_name/converted/lang_en/*.html html-websites/$website_name/lang_en/
mv sources/$website_name/converted/lang_en/*.html html-websites/$website_name/lang_en/
python3 enrich_html.py html-websites/$website_name -t $website_name --style $style_file python3 enrich_html.py html-websites/$website_name -t $website_name --style $style_file
# # déplacer les fichirers gemini dans la capsule # # déplacer les fichirers gemini dans la capsule
# mv index_$website_name.gmi gemini-capsules/$website_name/index.gmi cp index_$website_name.gmi gemini-capsules/$website_name/index.gmi
# mv sources/$website_name/converted/*.gmi gemini-capsules/$website_name/ cp sources/$website_name/converted/*.gmi gemini-capsules/$website_name/
# mv sources/$website_name/converted/lang_fr/*.gmi gemini-capsules/$website_name/lang_fr/ cp sources/$website_name/converted/lang_fr/*.gmi gemini-capsules/$website_name/lang_fr/
# mv sources/$website_name/converted/lang_en/*.gmi gemini-capsules/$website_name/lang_en/ cp sources/$website_name/converted/lang_en/*.gmi gemini-capsules/$website_name/lang_en/
# copy style # copy style
cp $style_file html-websites/$website_name/style.css cp $style_file html-websites/$website_name/style.css

View File

@ -99,7 +99,7 @@ def enrich_one_file(file, root_path):
html_content = remove_article_head_properties_orgmode(html_content) html_content = remove_article_head_properties_orgmode(html_content)
html_content = remove_hint_html(html_content) html_content = remove_hint_html(html_content)
if inline_the_css: if inline_the_css == True:
print(' ----------- include css inline in each html page') print(' ----------- include css inline in each html page')
with open(os.path.join(root_path, file), "r") as f: with open(os.path.join(root_path, file), "r") as f:
css_content = f.read() css_content = f.read()
@ -140,14 +140,17 @@ def enrich_one_file(file, root_path):
<body> <body>
<div id="page"> <div id="page">
<header id="masthead" class="site-header"> <header id="masthead" class="site-header">
<div class="header-image"> <div class="header-image" style="background: url({BANNIERE_ENTETE})">
{BANNIERE_ENTETE} <a href="/">
<img src="{SITE_ICON}" class="site-icon img">
</a>
<h1 class="blog-title">{BLOG_TITLE}</h1>
<p class="blog-subtitle">{BLOG_SUBTITLE}</p>
</div> </div>
<nav class="navbar is-fixed-top is-dark" role="navigation" aria-label="main navigation"> <nav class="navbar is-fixed-top is-dark" role="navigation" aria-label="main navigation">
<div class="navbar-brand"> <div class="navbar-brand">
<a class="navbar-item" href="{NDD}"> <a class="navbar-item" href="{NDD}">
<img src="{SITE_ICON}"
class="img-fluid">
</a> </a>
</div> </div>
@ -183,8 +186,7 @@ def enrich_one_file(file, root_path):
<div class="container"> <div class="container">
<div class="site-footer-inner"> <div class="site-footer-inner">
{BLOG_TITLE}
{BLOG_SUBTITLE}
{NAVIGATION} {NAVIGATION}
{css_content} {css_content}

View File

@ -0,0 +1,13 @@
# Navigation
-------------------------
=> index.gmi
=> contact.gmi
# Articles en Français
-------------------------
=> 2024-11-03-création-d'un-blog-gemini.gmi
=> 20210927092238_cipherbliss_215_des-sauvegardes-qui-durent-mille-ans.gmi

View File

@ -0,0 +1,166 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:image" content="https://www.cipherbliss.com/wp-content/uploads/2016/12/rond.png">
<meta property="og:locale" content="fr_FR">
<meta property="og:description" content="Code, nouvelles technologies et entrepreneurariat par B. Lemoine">
<meta property="og:url" content="https://portfolio.cipherbliss.com/">
<meta property="og:site_name" content="Cipher Bliss">
<link rel="alternate" type="application/rss+xml" title="Cipher Bliss » Flux"
href="https://www.cipherbliss.com/feed/">
<link href="/style.css" rel="stylesheet">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<meta name="author" content="">
<link rel="alternate" type="application/rss+xml" title="Cipher Bliss » Flux"
href="https://www.cipherbliss.com/feed/">
<meta property="og:title" content="">
<meta property="og:locale" content="fr_FR">
<!-- Description de la page -->
<meta name="description" content="">
<meta name="reply-to" content="contact@cipherbliss.com">
<link rel="icon" type="image/png" href="https://www.cipherbliss.com/wp-content/uploads/2016/12/rond.png">
</head>
<body>
<div id="page">
<header id="masthead" class="site-header">
<div class="header-image" style="background: url(https://www.cipherbliss.com/wp-content/uploads/2016/11/bg.jpg)">
<a href="/">
<img src="https://www.cipherbliss.com/wp-content/uploads/2016/12/rond.png" class="site-icon img">
</a>
<h1 class="blog-title">Cipher Bliss</h1>
<p class="blog-subtitle">Code, nouvelles technologies et entrepreneurariat par B. Lemoine</p>
</div>
<nav class="navbar is-fixed-top is-dark" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="https://www.cipherbliss.com">
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="https://www.cipherbliss.com">
<img src="https://www.cipherbliss.com/wp-content/uploads/2016/12/rond.png"
class="img-fluid">
</a>
<nav><a href="/">Accueil</a><a href="https://portfolio.cipherbliss.com">Portfolio</a><a href="/feed">Flux RSS</a><a href="/contact">Contact</a><a href="/ressources-de-café-vie-privée">Ressources</a></nav>
</div>
<div class="navbar-end">
<div class="navbar-item">
<form role="search" method="get" class="search-form" action="/">
<label>
<input class="search-field" placeholder="Recherche" value="" name="s"
type="search">
</label>
<input class="is-hidden search-submit" value="Rechercher" type="submit">
</form>
</div>
</div>
</div>
</nav>
</header>
<main class="body-wrap boxed-container">
<article class="content">
--------------------------------------------------------------------------------
## title: cipherbliss_blog
# Des sauvegardes qui durent mille ans
J'ai animé un atelier au cours du premier camp CHATONS qui a eu lieu le week-end dernier. (Le
=> https://www.chatons.org/ Collectif des Hébergeurs Alternatifs, Transparents, Ouverts, Neutres et Solidaires
vise à rassembler des structures proposant des **services en ligne libres, éthiques et décentralisés** afin de permettre aux utilisateur⋅ices de
=> https://www.chatons.org/search/by-service trouver rapidement des alternatives
respectueuses de leurs données et de leur vie privée)Pas de compte rendu du camp en lui même pour tout de suite, cependant voici un résumé de l'atelier qui aura duré près d'une heure.
=> https://libreto.sans-nuage.fr/camps-chatons/programme https://libreto.sans-nuage.fr/camps-chatons/programme
Comment se protéger des pertes de données et ne pas perdre la confiance et les précieuses données des membres de son CHATONS?
L'atelier aborde la définition d'un modèle de menace pour savoir contre quoi se prémunir, et quels critères de qualité utiliser pour réaliser automatiquement ses sauvegardes en tant que particulier, ou en tant que CHATONS. On y voit de la façon la plus "grand public" à la façon la plus "techno geek" comment récupérer ses données éparpillées en ligne, historiser, chiffrer, dédupliquer, compresser, répliquer, partager les clés d'accès, et prévoir des restaurations périodiques, de sorte que les données les plus cruciales survivent à leurs administrateurs et administratrices.
```{=org}
#+caption: Jancovici et le stockage à froid, une remarquable utilisation
```
des couches géologiquement stables
=> https://www.cipherbliss.com/wp-content/uploads/2021/09/Screenshot_2021-09-27-Les-Sauvegardes-automatiques-Slides-1024x747.jpg [IMG]
Liens: Les slides sont disponibles ici:
=> https://slides.com/tykayn/les-sauvegardes-automatiques https://slides.com/tykayn/les-sauvegardes-automatiques
La feuille de calcul pour cartographier son matériel
=> https://cloud.tykayn.fr/index.php/s/KQfYHpaSpgwrWam https://cloud.tykayn.fr/index.php/s/KQfYHpaSpgwrWam
Le site des CHATONS:
=> https://www.chatons.org https://www.chatons.org
Le forum où tout se discute:
=> %20https://forum.chatons.org <https://forum.chatons.org>
La documentation pour ne pas réinventer la roue:
=> https://wiki.chatons.org https://wiki.chatons.org
# Métadonnées
```{=org}
#+post_ID: 1595
```
```{=org}
#+post_slug: des-sauvegardes-qui-durent-mille-ans
```
```{=org}
#+post_url: https://www.ciperbliss.com/2021/des-sauvegardes-qui-durent-mille-ans
```
```{=org}
#+post_title: Des sauvegardes qui durent mille ans
```
```{=org}
#+post_type: post #+post_mime_types:
```
```{=org}
#+post_guid:https://www.cipherbliss.com/?p=1595 #+post_status:
```
publish #+post~datepublished~: <2021-09-27 09:22:38>
```{=org}
#+post_date_modified: <2021-09-27 09:22:42>
```
```{=org}
#+post_index_page_roam_id: [[id:1b454ab3-53f0-411f-94e6-d488718dee27][undefined]]
```
```{=org}
#+retrieved_from_db_at: <2024-11-07 22:57:06>
```
</article>
</main>
<footer class="site-footer has-top-divider">
<div class="container">
<div class="site-footer-inner">
<nav><a href="/">Accueil</a><a href="https://portfolio.cipherbliss.com">Portfolio</a><a href="/feed">Flux RSS</a><a href="/contact">Contact</a><a href="/ressources-de-café-vie-privée">Ressources</a></nav>
</div>
</div>
</footer>
</div>
</body>
<!-- généré avec orgmode-to-gemini-blog par Tykayn -->
</html>

View File

@ -32,14 +32,17 @@
<body> <body>
<div id="page"> <div id="page">
<header id="masthead" class="site-header"> <header id="masthead" class="site-header">
<div class="header-image"> <div class="header-image" style="background: url(https://www.cipherbliss.com/wp-content/uploads/2016/11/bg.jpg)">
https://www.cipherbliss.com/wp-content/uploads/2016/11/bg.jpg <a href="/">
<img src="https://www.cipherbliss.com/wp-content/uploads/2016/12/rond.png" class="site-icon img">
</a>
<h1 class="blog-title">Cipher Bliss</h1>
<p class="blog-subtitle">Code, nouvelles technologies et entrepreneurariat par B. Lemoine</p>
</div> </div>
<nav class="navbar is-fixed-top is-dark" role="navigation" aria-label="main navigation"> <nav class="navbar is-fixed-top is-dark" role="navigation" aria-label="main navigation">
<div class="navbar-brand"> <div class="navbar-brand">
<a class="navbar-item" href="https://www.cipherbliss.com"> <a class="navbar-item" href="https://www.cipherbliss.com">
<img src="https://www.cipherbliss.com/wp-content/uploads/2016/12/rond.png"
class="img-fluid">
</a> </a>
</div> </div>
@ -90,15 +93,67 @@ id: 8e220f62-f0fc-4394-8bdf-f9b3db30711e title: cipherbliss_blog
Et hop, un générateur qui fait le café à partir de fichiers orgmode ou markdown. Et hop, un générateur qui fait le café à partir de fichiers orgmode ou markdown.
[2024-11-03] Génération de capsules gemini et blog html à partir d'articles en fichiers Orgmode.
exemple avec le blog de DragonFeu. `sources/dragonfeu~blog~`
Les articles sont écrits dans le dossier source/, leur nom permet de déduire l'ordre de publication grâce à une date YYY-MM-DD en début de nom de fichier ## création d'un article Pour un article en langue En, sur le blog cipherbliss~blog~, donner le titre entre guillemets ainsi: ```shell python3 new~article~.py cipherbliss~blog~ en "Creation of a gemini blog" ``` ## prérequis pour installation
Avoir des articles au format org, les mettre dans un dossier source/nom~dublog~, et avoir quelques bibliothèques dispo:
```shell bash install.sh ``` [2024-11-04] Testé avec: Pandoc 2.9.2.1
=> http://fr.archive.ubuntu.com/ubuntu/pool/universe/p/pandoc/pandoc_2.9.2.1-3ubuntu2_amd64.deb http://fr.archive.ubuntu.com/ubuntu/pool/universe/p/pandoc/pandoc_2.9.2.1-3ubuntu2_amd64.deb
Python 3.10.12 ## Conversion des fichiers Org vers gemini et html Ceci va convertir ce qui se trouve dans le dossier `sources/tykayn~blog~` et produire un site web dans `html~output~/tykayn~blog~` ainsi qu'une capsule gemini dans `capsules-gemini/tykayn~blog~`
```shell bash converters.sh tykayn~blog~ ```
## Conversion de blog en capsule gemini
L'idée est d'avoir un ensemble de billets de blogs en texte simple versionnés avec git et servis par une capsule gemini ainsi que par un site web. On aura besoin de convertir des billets existants, et de rédiger les nouveaux dans un format qui nous convient, par exemple markdown ou orgmode afin de rendre le tout le plus pérenne possible. On aura aussi besoin de référencer les images dans un dossier de notre dépot, et de gérer les relations entres articles pour que les liens aient du sens sur la capsule gemini autant que dans la version web. On souhaite aussi fournir un flux RSS, et un template de billet de blog avec une entête et un pied de page commun qui donne des moyens de contact, de soutenir l'auteur, et de revenir à l'accueil. On prendra aussi en charge différentes pages:
* à propos
* contact
* nos projets
* une liste des articles triés par date.
Il nous faudra aussi un script de mise à jour du blog qui se charge de mettre à jour le flux rss, le dépot git. On peut aller chercher de l'automatisation dans la gestion de plusieurs capsules différentes en tagguant les articles par nom de blog, ce qui nécessite un fichier de config pour les correspondances.
## Depuis wordpress Connec à la base de données mysql, et extraction de chaque article pour récupérer la partie HTML et la convertir en markdown et en fichiers org.
## Depuis des fichiers orgmode. J'écris en orgmode une base de connaissances qui contient aussi un export de mes anciens billets de blog dans un dossier par blog. Pour cibler quels billets utiliser pour quel blog j'ai donc deux possibilités: leur chemin de fichier, ou des tags particuliers présents dans les fichiers org.
=> id:5a197a1b-ddfe-4c79-8934-d9a28ab6df65 Textes de blog en préparation
=> https://forge.chapril.org/tykayn/org-report-stats https://forge.chapril.org/tykayn/org-report-stats
Rédaction, conversion, completion des nouveaux articles, régénération des indexs et flux rss, mise à jour du dépot git, publication des pages.
Offpunk LazyBlog Dotclear, Wordpress, Hugo, Pélican Pandoc, PandocGmi
=> https://github.com/njamescouk/pandocGmi/tree/master https://github.com/njamescouk/pandocGmi/tree/master
* config par site web de son nom de domaine
* réécriture des liens internes
* réécriture des url des images vers le dossier courant
* réparer la génération de fichiers gmi
* template footer article: gestion article suivant et précédent
* conversion des liens avec nom de domaine si relatifs
```{=html}
<!-- -->
```
* navigation sur les pages d'article
-gestion des langues dans la source et la destination
* gestion multi site et multi langue
</article> </article>
</main> </main>
<footer class="site-footer has-top-divider"> <footer class="site-footer has-top-divider">
<div class="container"> <div class="container">
<div class="site-footer-inner"> <div class="site-footer-inner">
Cipher Bliss
Code, nouvelles technologies et entrepreneurariat par B. Lemoine
<nav><a href="/">Accueil</a><a href="https://portfolio.cipherbliss.com">Portfolio</a><a href="/feed">Flux RSS</a><a href="/contact">Contact</a><a href="/ressources-de-café-vie-privée">Ressources</a></nav> <nav><a href="/">Accueil</a><a href="https://portfolio.cipherbliss.com">Portfolio</a><a href="/feed">Flux RSS</a><a href="/contact">Contact</a><a href="/ressources-de-café-vie-privée">Ressources</a></nav>

View File

@ -32,14 +32,17 @@
<body> <body>
<div id="page"> <div id="page">
<header id="masthead" class="site-header"> <header id="masthead" class="site-header">
<div class="header-image"> <div class="header-image" style="background: url(https://www.cipherbliss.com/wp-content/uploads/2016/11/bg.jpg)">
https://www.cipherbliss.com/wp-content/uploads/2016/11/bg.jpg <a href="/">
<img src="https://www.cipherbliss.com/wp-content/uploads/2016/12/rond.png" class="site-icon img">
</a>
<h1 class="blog-title">Cipher Bliss</h1>
<p class="blog-subtitle">Code, nouvelles technologies et entrepreneurariat par B. Lemoine</p>
</div> </div>
<nav class="navbar is-fixed-top is-dark" role="navigation" aria-label="main navigation"> <nav class="navbar is-fixed-top is-dark" role="navigation" aria-label="main navigation">
<div class="navbar-brand"> <div class="navbar-brand">
<a class="navbar-item" href="https://www.cipherbliss.com"> <a class="navbar-item" href="https://www.cipherbliss.com">
<img src="https://www.cipherbliss.com/wp-content/uploads/2016/12/rond.png"
class="img-fluid">
</a> </a>
</div> </div>
@ -281,8 +284,7 @@ href="https://web.archive.org/web/20240721071559/https://www.cipherbliss.com/">w
<div class="container"> <div class="container">
<div class="site-footer-inner"> <div class="site-footer-inner">
Cipher Bliss
Code, nouvelles technologies et entrepreneurariat par B. Lemoine
<nav><a href="/">Accueil</a><a href="https://portfolio.cipherbliss.com">Portfolio</a><a href="/feed">Flux RSS</a><a href="/contact">Contact</a><a href="/ressources-de-café-vie-privée">Ressources</a></nav> <nav><a href="/">Accueil</a><a href="https://portfolio.cipherbliss.com">Portfolio</a><a href="/feed">Flux RSS</a><a href="/contact">Contact</a><a href="/ressources-de-café-vie-privée">Ressources</a></nav>

View File

@ -32,14 +32,17 @@
<body> <body>
<div id="page"> <div id="page">
<header id="masthead" class="site-header"> <header id="masthead" class="site-header">
<div class="header-image"> <div class="header-image" style="background: url(https://www.cipherbliss.com/wp-content/uploads/2016/11/bg.jpg)">
https://www.cipherbliss.com/wp-content/uploads/2016/11/bg.jpg <a href="/">
<img src="https://www.cipherbliss.com/wp-content/uploads/2016/12/rond.png" class="site-icon img">
</a>
<h1 class="blog-title">Cipher Bliss</h1>
<p class="blog-subtitle">Code, nouvelles technologies et entrepreneurariat par B. Lemoine</p>
</div> </div>
<nav class="navbar is-fixed-top is-dark" role="navigation" aria-label="main navigation"> <nav class="navbar is-fixed-top is-dark" role="navigation" aria-label="main navigation">
<div class="navbar-brand"> <div class="navbar-brand">
<a class="navbar-item" href="https://www.cipherbliss.com"> <a class="navbar-item" href="https://www.cipherbliss.com">
<img src="https://www.cipherbliss.com/wp-content/uploads/2016/12/rond.png"
class="img-fluid">
</a> </a>
</div> </div>
@ -68,194 +71,17 @@
</header> </header>
<main class="body-wrap boxed-container"> <main class="body-wrap boxed-container">
<article class="content"> <article class="content">
<!DOCTYPE html> <html><head><title>cipherbliss_blog</title><link rel="stylesheet" href="/style.css"></link></head><body>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="cipherbliss">CipherBliss</h1>
<p>[contact](contact.org)</p>
<h1 id="articles">Articles</h1>
<h1 id="en-fr">en Fr</h1>
<h1 id="en-en">en En</h1>
<h1 id="flux-rss">Flux RSS</h1>
<h1 id="bisous">Bisous</h1>
</body>
</html>
<h1>Navigation</h1><br><a href=/index.html>Index</a><br><a href=/contact.html>Contact</a><h1>Articles en Français</h1><br><a href=/2024/2024-11-03-création-d'un-blog-gemini>2024 2024 11 03 création d'un blog gemini</a><br><a href=/2021/cipherbliss_215_des-sauvegardes-qui-durent-mille-ans>2021 cipherbliss_215_des sauvegardes qui durent mille ans</a></article></body></html>
</article> </article>
</main> </main>
<footer class="site-footer has-top-divider"> <footer class="site-footer has-top-divider">
<div class="container"> <div class="container">
<div class="site-footer-inner"> <div class="site-footer-inner">
Cipher Bliss
Code, nouvelles technologies et entrepreneurariat par B. Lemoine
<nav><a href="/">Accueil</a><a href="https://portfolio.cipherbliss.com">Portfolio</a><a href="/feed">Flux RSS</a><a href="/contact">Contact</a><a href="/ressources-de-café-vie-privée">Ressources</a></nav> <nav><a href="/">Accueil</a><a href="https://portfolio.cipherbliss.com">Portfolio</a><a href="/feed">Flux RSS</a><a href="/contact">Contact</a><a href="/ressources-de-café-vie-privée">Ressources</a></nav>

View File

@ -17,14 +17,20 @@ body {
background: #fff; background: #fff;
} }
nav, .navbar, nav,
.navbar,
.container, .container,
.body-wrap { .body-wrap {
max-width: 70ch; max-width: 70ch;
margin: 0 auto; margin: 0 auto;
} }
h1, h2, h3, h4, h5, h6 { h1,
h2,
h3,
h4,
h5,
h6 {
font-family: Helvetica, "Ubuntu Sans", "Noto Sans", Calibri, Arial, sans-serif; font-family: Helvetica, "Ubuntu Sans", "Noto Sans", Calibri, Arial, sans-serif;
margin-top: 1em; margin-top: 1em;
margin-bottom: 2rem; margin-bottom: 2rem;
@ -44,12 +50,15 @@ body {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
font-family: Helvetica, Arial, sans-serif; font-family: Helvetica, Arial, sans-serif;
padding-bottom: 20vh; padding-bottom: 20vh;
padding-left: 2rem;
padding-bottom: 2rem; padding-bottom: 2rem;
} }
/* Improve media defaults */ /* Improve media defaults */
img, picture, video, canvas, svg { img,
picture,
video,
canvas,
svg {
display: block; display: block;
width: 100%; width: 100%;
margin-top: 1rem; margin-top: 1rem;
@ -58,16 +67,24 @@ img, picture, video, canvas, svg {
} }
/* Inherit fonts for form controls */ /* Inherit fonts for form controls */
input, button, textarea, select { input,
button,
textarea,
select {
font: inherit; font: inherit;
} }
/* Avoid text overflows */ /* Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 { p,
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word; overflow-wrap: break-word;
} }
/* Improve line wrapping */
p { p {
text-wrap: pretty; text-wrap: pretty;
margin-top: 1.5rem; margin-top: 1.5rem;
@ -87,26 +104,28 @@ h3 {
font-size: 1.5rem; font-size: 1.5rem;
} }
h1, h2, h3, h4, h5, h6 { h1,
h2,
h3,
h4,
h5,
h6 {
text-wrap: balance; text-wrap: balance;
line-height: 1.3em; line-height: 1.3em;
} }
#root, #__next { #root,
#__next {
isolation: isolate; isolation: isolate;
} }
input, button, textarea, select { input,
button,
textarea,
select {
font: inherit; font: inherit;
} }
a {
display: inline-block;
padding: 0.5rem 2rem;
margin-right: 1rem;
margin-bottom: 1rem;
}
ul { ul {
padding-left: 4ch; padding-left: 4ch;
padding-right: 4ch; padding-right: 4ch;
@ -126,12 +145,54 @@ li {
margin-right: 1rem; margin-right: 1rem;
} }
#masthead {
text-align: center;
}
#masthead .site-icon {
width: 9rem;
height: auto;
margin: 1rem auto;
position: static;
padding: 1rem;
}
.header-image {
padding: 1rem;
}
.blog-title,
.blog-subtitle {
margin: 1rem;
}
.content { .content {
min-height: 50rem; min-height: 50rem;
} }
@media (max-width: 20rem) { .site-footer {
min-height: 20vh;
padding: 2rem;
}
a {
display: inline-block;
padding: 0.55rem 2rem;
margin-right: 1rem;
margin-bottom: 1rem;
border-radius: 1rem;
color: rgb(0, 123, 255);
text-decoration: none;
}
main a:hover {
background: #303030;
color: #dedede;
}
@media (max-width: 75ch) {
body { body {
padding: 0;
}
main {
padding: 1rem; padding: 1rem;
} }
} }

View File

@ -10,3 +10,4 @@
# Articles en Français # Articles en Français
------------------------- -------------------------
=> 2024-11-03-création-d'un-blog-gemini.gmi => 2024-11-03-création-d'un-blog-gemini.gmi
=> 20210927092238_cipherbliss_215_des-sauvegardes-qui-durent-mille-ans.gmi

View File

@ -0,0 +1,68 @@
* Des sauvegardes qui durent mille ans
:PROPERTIES:
:CUSTOM_ID: des-sauvegardes-qui-durent-mille-ans
:END:
J'ai animé un atelier au cours du premier camp
CHATONS qui a eu lieu le week-end dernier. (Le
[[https://www.chatons.org/][Collectif des Hébergeurs Alternatifs,
Transparents, Ouverts, Neutres et Solidaires]] vise à rassembler des
structures proposant des *services en ligne libres, éthiques et
décentralisés* afin de permettre aux utilisateur⋅ices de
[[https://www.chatons.org/search/by-service][trouver rapidement des
alternatives]] respectueuses de leurs données et de leur vie
privée)Pas de compte rendu du camp en lui même pour
tout de suite, cependant voici un résumé de l'atelier qui aura duré près
d'une heure.
[[https://libreto.sans-nuage.fr/camps-chatons/programme]]
Comment se protéger des pertes de données et ne pas perdre la confiance
et les précieuses données des membres de son CHATONS?
L'atelier aborde la définition d'un modèle de menace pour savoir contre
quoi se prémunir, et quels critères de qualité utiliser pour réaliser
automatiquement ses sauvegardes en tant que particulier, ou en tant que
CHATONS.
On y voit de la façon la plus "grand public" à la façon la plus "techno
geek" comment récupérer ses données éparpillées en ligne, historiser,
chiffrer, dédupliquer, compresser, répliquer, partager les clés d'accès,
et prévoir des restaurations périodiques, de sorte que les données les
plus cruciales survivent à leurs administrateurs et
administratrices.
#+caption: Jancovici et le stockage à froid, une remarquable utilisation
des couches géologiquement stables
[[https://www.cipherbliss.com/wp-content/uploads/2021/09/Screenshot_2021-09-27-Les-Sauvegardes-automatiques-Slides-1024x747.jpg]]
Liens:
Les slides sont disponibles ici:
[[https://slides.com/tykayn/les-sauvegardes-automatiques]]
La feuille de calcul pour cartographier son matériel
[[https://cloud.tykayn.fr/index.php/s/KQfYHpaSpgwrWam]]Le
site des CHATONS:
[[https://www.chatons.org]]Le forum où tout se
discute:
[[file:%20https://forum.chatons.org][https://forum.chatons.org]]La
documentation pour ne pas réinventer la roue:
[[https://wiki.chatons.org]]
* Métadonnées
:PROPERTIES:
:CUSTOM_ID: métadonnées
:END:
:PROPERTIES:
:ID: 3154e447-b390-481f-8842-18f9ca75c58f
:END:
#+title:des-sauvegardes-qui-durent-mille-ans
#+post_ID: 1595
#+post_slug: des-sauvegardes-qui-durent-mille-ans
#+post_url: https://www.ciperbliss.com/2021/des-sauvegardes-qui-durent-mille-ans
#+post_title: Des sauvegardes qui durent mille ans
#+post_type: post #+post_mime_types:
#+post_guid:https://www.cipherbliss.com/?p=1595 #+post_status:
publish #+post_date_published: <2021-09-27 09:22:38>
#+post_date_modified: <2021-09-27 09:22:42>
#+post_index_page_roam_id: [[id:1b454ab3-53f0-411f-94e6-d488718dee27][undefined]]
#+retrieved_from_db_at: <2024-11-07 22:57:06>

View File

@ -9,5 +9,90 @@
* Création d'un blog gemini * Création d'un blog gemini
Et hop, un générateur qui fait le café à partir de fichiers orgmode ou markdown. Et hop, un générateur qui fait le café à partir de fichiers orgmode ou markdown.
[2024-11-03] Génération de capsules gemini et blog html à partir d'articles en fichiers Orgmode.
exemple avec le blog de DragonFeu.
`sources/dragonfeu_blog`
Les articles sont écrits dans le dossier source/, leur nom permet de déduire l'ordre de publication grâce à une date YYY-MM-DD en début de nom de fichier
## création d'un article
Pour un article en langue En, sur le blog cipherbliss_blog, donner le titre entre guillemets ainsi:
```shell
python3 new_article.py cipherbliss_blog en "Creation of a gemini blog"
```
## prérequis pour installation
Avoir des articles au format org, les mettre dans un dossier source/nom_du_blog, et avoir quelques bibliothèques dispo:
```shell
bash install.sh
```
[2024-11-04]
Testé avec:
Pandoc 2.9.2.1
http://fr.archive.ubuntu.com/ubuntu/pool/universe/p/pandoc/pandoc_2.9.2.1-3ubuntu2_amd64.deb
Python 3.10.12
## Conversion des fichiers Org vers gemini et html
Ceci va convertir ce qui se trouve dans le dossier `sources/tykayn_blog`
et produire un site web dans `html_output/tykayn_blog`
ainsi qu'une capsule gemini dans `capsules-gemini/tykayn_blog`
```shell
bash converters.sh tykayn_blog
```
## Conversion de blog en capsule gemini
:PROPERTIES:
:CREATED: [2024-11-02 12:08:22]
:END:
L'idée est d'avoir un ensemble de billets de blogs en texte simple versionnés avec git et servis par une capsule gemini ainsi que par un site web.
On aura besoin de convertir des billets existants, et de rédiger les nouveaux dans un format qui nous convient, par exemple markdown ou orgmode afin de rendre le tout le plus pérenne possible.
On aura aussi besoin de référencer les images dans un dossier de notre dépot, et de gérer les relations entres articles pour que les liens aient du sens sur la capsule gemini autant que dans la version web.
On souhaite aussi fournir un flux RSS, et un template de billet de blog avec une entête et un pied de page commun qui donne des moyens de contact, de soutenir l'auteur, et de revenir à l'accueil.
On prendra aussi en charge différentes pages:
- à propos
- contact
- nos projets
- une liste des articles triés par date.
Il nous faudra aussi un script de mise à jour du blog qui se charge de mettre à jour le flux rss, le dépot git.
On peut aller chercher de l'automatisation dans la gestion de plusieurs capsules différentes en tagguant les articles par nom de blog, ce qui nécessite un fichier de config pour les correspondances.
# export d'articles existants
## Depuis wordpress
Connec à la base de données mysql, et extraction de chaque article pour récupérer la partie HTML et la convertir en markdown et en fichiers org.
## Depuis des fichiers orgmode.
J'écris en orgmode une base de connaissances qui contient aussi un export de mes anciens billets de blog dans un dossier par blog. Pour cibler quels billets utiliser pour quel blog j'ai donc deux possibilités: leur chemin de fichier, ou des tags particuliers présents dans les fichiers org.
[[id:5a197a1b-ddfe-4c79-8934-d9a28ab6df65][Textes de blog en préparation]]
https://forge.chapril.org/tykayn/org-report-stats
# Flux créatif
Rédaction,
conversion,
completion des nouveaux articles,
régénération des indexs et flux rss,
mise à jour du dépot git,
publication des pages.
# Sources d'inspiration:
Offpunk
LazyBlog
Dotclear, Wordpress, Hugo, Pélican
Pandoc, PandocGmi
https://github.com/njamescouk/pandocGmi/tree/master
# Roadmap
- config par site web de son nom de domaine
- réécriture des liens internes
- réécriture des url des images vers le dossier courant
- réparer la génération de fichiers gmi
- template footer article: gestion article suivant et précédent
- conversion des liens avec nom de domaine si relatifs
# Fait
- navigation sur les pages d'article
-gestion des langues dans la source et la destination
- gestion multi site et multi langue

View File

@ -1,246 +0,0 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>cipherbliss_blog</title>
<style>
html {
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 12px;
}
h1 {
font-size: 1.8em;
}
}
@media print {
html {
background-color: white;
}
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
font-size: 85%;
margin: 0;
hyphens: manual;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
/* The extra [class] is a hack that increases specificity enough to
override a similar rule in reveal.js */
ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
font-size: inherit;
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<header id="title-block-header">
<h1 class="title">cipherbliss_blog</h1>
</header>
<h1 id="article">Article</h1>
<ul>
<li>ID: 1595</li>
<li>guid:</li>
<li>status: publish</li>
<li>publié le: &lt;2021-09-27 09:22:38&gt;</li>
<li>modifié: &lt;2021-09-27 09:22:42&gt;</li>
<li>Index des articles du blog <a
href="id:39e91a2e-d003-4acd-a99a-b58dca74df77">Cipherbliss blog</a></li>
</ul>
<h2 id="des-sauvegardes-qui-durent-mille-ans-1">Des sauvegardes qui
durent mille ans</h2>
<p>ceci<sub>estduhtml</sub></p>
<p>J'ai animé un atelier au cours du premier camp CHATONS qui a eu lieu
le week-end dernier. (Le &lt;a href="<a
href="https://www.chatons.org/">https://www.chatons.org/</a>"&gt;Collectif
des Hébergeurs Alternatifs, Transparents, Ouverts, Neutres et
Solidaires&lt;/a&gt; vise à rassembler des structures proposant des
&lt;strong&gt;services en ligne libres, éthiques et
décentralisés&lt;/strong&gt; afin de permettre aux utilisateur⋅ices de
&lt;a href="<a
href="https://www.chatons.org/search/by-service">https://www.chatons.org/search/by-service</a>"&gt;trouver
rapidement des alternatives&lt;/a&gt; respectueuses de leurs données et
de leur vie privée)#+begin<sub>src</sub> shell</p>
<p>Pas de compte rendu du camp en lui même pour tout de suite, cependant
voici un résumé de l'atelier qui aura duré près d'une
heure.&lt;br&gt;&lt;a href="<a
href="https://libreto.sans-nuage.fr/camps-chatons/programme">https://libreto.sans-nuage.fr/camps-chatons/programme</a>"&gt;<a
href="https://libreto.sans-nuage.fr/camps-chatons/programme">https://libreto.sans-nuage.fr/camps-chatons/programme</a>&lt;/a&gt;&lt;br&gt;&lt;br&gt;Comment
se protéger des pertes de données et ne pas perdre la confiance et les
précieuses données des membres de son
CHATONS?&lt;br&gt;&lt;br&gt;L'atelier aborde la définition d'un modèle
de menace pour savoir contre quoi se prémunir, et quels critères de
qualité utiliser pour réaliser automatiquement ses sauvegardes en tant
que particulier, ou en tant que CHATONS.&lt;br&gt;On y voit de la façon
la plus "grand public" à la façon la plus "techno geek" comment
récupérer ses données éparpillées en ligne, historiser, chiffrer,
dédupliquer, compresser, répliquer, partager les clés d'accès, et
prévoir des restaurations périodiques, de sorte que les données les plus
cruciales survivent à leurs administrateurs et
administratrices.#+begin<sub>src</sub> shell</p>
<p>&lt;! wp:image
{"id":1598,"sizeSlug":"large","linkDestination":"none"} &gt; &lt;figure
class="wp-block-image size-large"&gt;&lt;img src="<a
href="https://www.cipherbliss.com/wp-content/uploads/2021/09/Screenshot_2021-09-27-Les-Sauvegardes-automatiques-Slides-1024x747.jpg">https://www.cipherbliss.com/wp-content/uploads/2021/09/Screenshot_2021-09-27-Les-Sauvegardes-automatiques-Slides-1024x747.jpg</a>"
alt="" class="wp-image-1598"/&gt;&lt;figcaption&gt;Jancovici et le
stockage à froid, une remarquable utilisation des couches géologiquement
stables&lt;/figcaption&gt;&lt;/figure&gt; &lt;! /wp:image &gt;</p>
<p>&lt;br&gt;Liens:&lt;br&gt;Les slides sont disponibles
ici:&lt;br&gt;&lt;a href="<a
href="https://slides.com/tykayn/les-sauvegardes-automatiques">https://slides.com/tykayn/les-sauvegardes-automatiques</a>"&gt;<a
href="https://slides.com/tykayn/les-sauvegardes-automatiques">https://slides.com/tykayn/les-sauvegardes-automatiques</a>&lt;/a&gt;&lt;br&gt;&lt;br&gt;La
feuille de calcul pour cartographier son matériel&lt;br&gt;&lt;a
href="<a
href="https://cloud.tykayn.fr/index.php/s/KQfYHpaSpgwrWam">https://cloud.tykayn.fr/index.php/s/KQfYHpaSpgwrWam</a>"&gt;<a
href="https://cloud.tykayn.fr/index.php/s/KQfYHpaSpgwrWam">https://cloud.tykayn.fr/index.php/s/KQfYHpaSpgwrWam</a>&lt;/a&gt;#+begin<sub>src</sub>
shell</p>
<p>Le site des CHATONS: &lt;br&gt;&lt;a href="<a
href="https://www.chatons.org">https://www.chatons.org</a>"&gt;<a
href="https://www.chatons.org">https://www.chatons.org</a>&lt;/a&gt;#+begin<sub>src</sub>
shell</p>
<p>Le forum où tout se discute:&lt;br&gt;&lt;a href=" <a
href="https://forum.chatons.org">https://forum.chatons.org</a>"&gt; <a
href="https://forum.chatons.org">https://forum.chatons.org</a>&lt;/a&gt;#+begin<sub>src</sub>
shell</p>
<p>La documentation pour ne pas réinventer la roue: &lt;br&gt;&lt;a
href="<a
href="https://wiki.chatons.org">https://wiki.chatons.org</a>"&gt;<a
href="https://wiki.chatons.org">https://wiki.chatons.org</a>&lt;/a&gt;</p>
<h1 id="liens">Liens</h1>
<ul>
<li>cipherbliss <a
href="id:d14d8051-bbb9-4279-a574-84d78bfe5b66">Cipherbliss blog</a></li>
</ul>
</body>
</html>

View File

@ -17,14 +17,20 @@ body {
background: #fff; background: #fff;
} }
nav, .navbar, nav,
.navbar,
.container, .container,
.body-wrap { .body-wrap {
max-width: 70ch; max-width: 70ch;
margin: 0 auto; margin: 0 auto;
} }
h1, h2, h3, h4, h5, h6 { h1,
h2,
h3,
h4,
h5,
h6 {
font-family: Helvetica, "Ubuntu Sans", "Noto Sans", Calibri, Arial, sans-serif; font-family: Helvetica, "Ubuntu Sans", "Noto Sans", Calibri, Arial, sans-serif;
margin-top: 1em; margin-top: 1em;
margin-bottom: 2rem; margin-bottom: 2rem;
@ -44,12 +50,15 @@ body {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
font-family: Helvetica, Arial, sans-serif; font-family: Helvetica, Arial, sans-serif;
padding-bottom: 20vh; padding-bottom: 20vh;
padding-left: 2rem;
padding-bottom: 2rem; padding-bottom: 2rem;
} }
/* Improve media defaults */ /* Improve media defaults */
img, picture, video, canvas, svg { img,
picture,
video,
canvas,
svg {
display: block; display: block;
width: 100%; width: 100%;
margin-top: 1rem; margin-top: 1rem;
@ -58,16 +67,24 @@ img, picture, video, canvas, svg {
} }
/* Inherit fonts for form controls */ /* Inherit fonts for form controls */
input, button, textarea, select { input,
button,
textarea,
select {
font: inherit; font: inherit;
} }
/* Avoid text overflows */ /* Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 { p,
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word; overflow-wrap: break-word;
} }
/* Improve line wrapping */
p { p {
text-wrap: pretty; text-wrap: pretty;
margin-top: 1.5rem; margin-top: 1.5rem;
@ -87,26 +104,28 @@ h3 {
font-size: 1.5rem; font-size: 1.5rem;
} }
h1, h2, h3, h4, h5, h6 { h1,
h2,
h3,
h4,
h5,
h6 {
text-wrap: balance; text-wrap: balance;
line-height: 1.3em; line-height: 1.3em;
} }
#root, #__next { #root,
#__next {
isolation: isolate; isolation: isolate;
} }
input, button, textarea, select { input,
button,
textarea,
select {
font: inherit; font: inherit;
} }
a {
display: inline-block;
padding: 0.5rem 2rem;
margin-right: 1rem;
margin-bottom: 1rem;
}
ul { ul {
padding-left: 4ch; padding-left: 4ch;
padding-right: 4ch; padding-right: 4ch;
@ -126,12 +145,54 @@ li {
margin-right: 1rem; margin-right: 1rem;
} }
#masthead {
text-align: center;
}
#masthead .site-icon {
width: 9rem;
height: auto;
margin: 1rem auto;
position: static;
padding: 1rem;
}
.header-image {
padding: 1rem;
}
.blog-title,
.blog-subtitle {
margin: 1rem;
}
.content { .content {
min-height: 50rem; min-height: 50rem;
} }
@media (max-width: 20rem) { .site-footer {
min-height: 20vh;
padding: 2rem;
}
a {
display: inline-block;
padding: 0.55rem 2rem;
margin-right: 1rem;
margin-bottom: 1rem;
border-radius: 1rem;
color: rgb(0, 123, 255);
text-decoration: none;
}
main a:hover {
background: #303030;
color: #dedede;
}
@media (max-width: 75ch) {
body { body {
padding: 0;
}
main {
padding: 1rem; padding: 1rem;
} }
} }

View File

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["../styles_src/style_general.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EAEA;EACA;EAEA;EACA;;;AAGF;AAAA;AAAA;EAGE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;AAEA;EACE;;AAEA;EACE;;;AAIJ;AACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAEA;EACE;EACA;EACA;EACA;EACA;;;AAGF;AAEA;EACE;;;AAGF;AAEA;EACE;;;AAGF;AAEA;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AAGF;EACE;;;AAIF;EACE;;;AAIA;EAEE;EACA;EACA;;;AAIJ;EACE;;;AAEF;EACE;IACE","file":"style_general.css"} {"version":3,"sourceRoot":"","sources":["../styles_src/style_general.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EAEA;EACA;EAEA;EACA;;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;EACA;EACA;EACA;;;AAGF;AAEA;EACE;;AAEA;EAEE;;;AAIJ;AACE;EACA;EACA;EACA;EACA;;;AAKF;AAEA;AAAA;AAAA;AAAA;AAAA;EAKE;EACA;EACA;EACA;EACA;;;AAGF;AAEA;AAAA;AAAA;AAAA;EAIE;;;AAGF;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;EACA;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;AAAA;AAAA;EAIE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAIF;EACE;;;AAIA;EAEE;EACA;EACA;;;AAIJ;EACE;;AACA;EACE;EACA;EACA;EACA;EACA;;;AAGJ;EACE;;;AAEF;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAKJ;EACE;IACE;;EAEF;IACE","file":"style_general.css"}

View File

@ -19,14 +19,20 @@
background: #fff; background: #fff;
} }
nav, .navbar, nav,
.navbar,
.container, .container,
.body-wrap { .body-wrap {
max-width: 70ch; max-width: 70ch;
margin: 0 auto; margin: 0 auto;
} }
h1, h2, h3, h4, h5, h6 { h1,
h2,
h3,
h4,
h5,
h6 {
font-family: Helvetica, "Ubuntu Sans", "Noto Sans", Calibri, Arial, sans-serif; font-family: Helvetica, "Ubuntu Sans", "Noto Sans", Calibri, Arial, sans-serif;
margin-top: 1em; margin-top: 1em;
margin-bottom: 2rem; margin-bottom: 2rem;
@ -38,7 +44,8 @@
* { * {
box-sizing: border-box; box-sizing: border-box;
&::before, &::after { &::before,
&::after {
box-sizing: border-box; box-sizing: border-box;
} }
} }
@ -48,13 +55,18 @@
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
font-family: Helvetica, Arial, sans-serif; font-family: Helvetica, Arial, sans-serif;
padding-bottom: 20vh; padding-bottom: 20vh;
padding-left: 2rem;
padding-bottom: 2rem; padding-bottom: 2rem;
// background: #222;
// color: #fff;
} }
/* Improve media defaults */ /* Improve media defaults */
img, picture, video, canvas, svg { img,
picture,
video,
canvas,
svg {
display: block; display: block;
width: 100%; width: 100%;
margin-top: 1rem; margin-top: 1rem;
@ -64,18 +76,25 @@
/* Inherit fonts for form controls */ /* Inherit fonts for form controls */
input, button, textarea, select { input,
button,
textarea,
select {
font: inherit; font: inherit;
} }
/* Avoid text overflows */ /* Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 { p,
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word; overflow-wrap: break-word;
} }
/* Improve line wrapping */
p { p {
text-wrap: pretty; text-wrap: pretty;
margin-top: 1.5rem; margin-top: 1.5rem;
@ -95,25 +114,28 @@
font-size: 1.5rem; font-size: 1.5rem;
} }
h1, h2, h3, h4, h5, h6 { h1,
h2,
h3,
h4,
h5,
h6 {
text-wrap: balance; text-wrap: balance;
line-height: 1.3em; line-height: 1.3em;
} }
#root, #__next { #root,
#__next {
isolation: isolate; isolation: isolate;
} }
input, button, textarea, select { input,
button,
textarea,
select {
font: inherit; font: inherit;
} }
a{
display: inline-block;
padding: 0.5rem 2rem;
margin-right: 1rem;
margin-bottom: 1rem;
}
ul { ul {
padding-left: 4ch; padding-left: 4ch;
padding-right: 4ch; padding-right: 4ch;
@ -137,12 +159,55 @@
} }
} }
.content{ #masthead {
min-height: 50rem; text-align: center;
} .site-icon {
@media (max-width: 20rem) { width: 9rem;
body { height: auto;
margin: 1rem auto;
position: static;
padding: 1rem; padding: 1rem;
} }
} }
.header-image{
padding: 1rem;
}
.blog-title,
.blog-subtitle {
margin: 1rem;
}
.content {
min-height: 50rem;
}
.site-footer{
min-height: 20vh;
padding: 2rem;
}
// ancres
a {
display: inline-block;
padding: 0.55rem 2rem;
margin-right: 1rem;
margin-bottom: 1rem;
border-radius: 1rem;
color: rgb(0, 123, 255);
text-decoration: none;
main &:hover {
background: #303030;
color: #dedede;
}
}
@media (max-width: 75ch) {
body{
padding: 0;
}
main {
padding: 1rem;
}
}