bebou

git clone git://bebou.netlib.re/bebou

Log | Files | Refs | zip | tar.gz |

commit d5823fbb7493b8672b4200244cb0bf477396b930
parent fd3f260dfb4417a4ddc801b47e011bbd70bc541e
Auteurice: timotheegoguely <timothee@goguely.com>
Date:   Sat, 18 Apr 2026 18:09:11 +0200

add humans.txt, update style.css, html layout and index-template.sh

Diffstat:
A
contents/humans.txt
 | 
11
+++++++++++
M
contents/index-template.sh
 | 
17
++++++++++++-----
M
contents/style.css
 | 
430
++++++++++++++++++++++++-------------------------------------------------------
M
layouts/html
 | 
64
+++++++++++++++++++++++++++++++++++++++++++++++-----------------

4 files changed, 197 insertions(+), 325 deletions(-)
diff --git a/contents/humans.txt b/contents/humans.txt
@@ -0,0 +1,11 @@
+# humans.txt
+# https://humanstxt.org/
+
+/* TEAM */
+From: Strasbourg, France
+
+/* SITE */                        
+Last update: 2026-04-18  
+Language: French    
+Generator: catium
+Hosting: DIY
diff --git a/contents/index-template.sh b/contents/index-template.sh
@@ -1,7 +1,12 @@
 #! /usr/bin/env ./page
-title: Bébous town
-author: bébouse
+title: bébou
+author: bebou
 description: La page d\'accueil du club des bébous
+
+sectionhtml: main
+
+endsection
+
 sectionmd: main
 
 Bientôt les deux ans de bebou ! Toutes les infos ici [🎂→](/anniv.html) !
@@ -18,12 +23,13 @@ La liste des sites :
 [Des statistiques sur le serveur](/stats)\
 [Foire aux questions](/faq)
 
-- - -
 endsection
 
 sectionhtml: main
+
 <figure>
-<img src="/serveur.jpeg" alt="Le raspberry servant de serveur sur le point de tomber par terre">
-<figcaption>C'est donc ça qu'on appelle <a href="https://fr.wikipedia.org/wiki/Edge_computing">Edge computing</a> ?</figcaption>
+	<img src="/serveur.jpeg" alt="Le raspberry servant de serveur sur le point de tomber par terre">
+	<figcaption>C’est donc ça qu’on appelle <a href="https://fr.wikipedia.org/wiki/Edge_computing">Edge computing</a> ?</figcaption>
 </figure>
 
+endsection
+\ No newline at end of file
diff --git a/contents/style.css b/contents/style.css
@@ -1,184 +1,173 @@
-/* Global variables. */
-:root,
-::backdrop {
-  /* Set sans-serif & mono fonts */
-  --sans-font: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir,
-    "Nimbus Sans L", Roboto, "Noto Sans", "Segoe UI", Arial, Helvetica,
-    "Helvetica Neue", sans-serif;
-  --mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
-  --standard-border-radius: 5px;
+/* Global variables */
+
+:root {
+  /* Fonts */
+  --font-sans: sans-serif;
+  --font-mono: monospace;
+
+  /* Layout */
+  --border-radius: 4px;
+  --flow-space: 1lh;
 
   /* Default (light) theme */
   --bg: #fff;
-  --accent-bg: #f5f7ff;
+  --accent-bg: #f9f9fa;
   --text: #212121;
   --text-light: #585858;
-  --border: #898EA4;
-  --accent: #0d47a1;
-  --accent-hover: #1266e2;
-  --accent-text: var(--bg);
+  --border: #e0e0e2;
+  --accent: #003eaa;
   --code: #d81b60;
   --preformatted: #444;
-  --marked: #ffdd33;
-  --disabled: #efefef;
+  --disabled: #737373;
 }
 
 /* Dark theme */
 @media (prefers-color-scheme: dark) {
-  :root,
-  ::backdrop {
+  :root {
     color-scheme: dark;
-    --bg: #212121;
-    --accent-bg: #2b2b2b;
+    --bg: #18181a;
+    --accent-bg: #232327;
     --text: #dcdcdc;
     --text-light: #ababab;
-    --accent: #ffb300;
-    --accent-hover: #ffe099;
-    --accent-text: var(--bg);
-    --code: #f06292;
+    --border: #38383d;
+    --accent: #b98eff;
+    --code: #ff7de9;
     --preformatted: #ccc;
-    --disabled: #111;
-  }
-  /* Add a bit of transparency so light media isn't so glaring in dark mode */
-  img,
-  video {
-    opacity: 0.8;
+    --disabled: #939395;
   }
 }
 
-/* Reset box-sizing */
+/* Reset */
 *, *::before, *::after {
   box-sizing: border-box;
 }
+:where(body, h1, h2, h3, h4, h5, p, ul, ol, li, figure, figcaption, blockquote, dl, dd) {
+  margin: 0;
+  padding: 0;
+}
 
 html {
-  /* Set the font globally */
-  font-family: var(--sans-font);
+  font-family: var(--font-sans);
   scroll-behavior: smooth;
 }
 
-/* Make the body a nice central block */
 body {
   color: var(--text);
   background-color: var(--bg);
-  font-size: 1.15rem;
   line-height: 1.5;
-  display: grid;
-  grid-template-columns: 1fr min(50rem, 90%) 1fr;
   margin: 0;
 }
 
-body > * {
-  grid-column: 2;
+body > :is(header, footer) {
+  font-family: var(--font-mono);
+  font-size: 1rem;
+  display: flex;
+  flex-wrap: wrap;
+  color: var(--preformatted);
+  background-color: var(--accent-bg);
+  outline: 1px solid var(--border);
+  iframe, nav {
+    margin: 0;
+    min-height: 32px;
+  }
+  h1 {
+    font: inherit;
+    color: var(--accent);
+  }
+  nav {
+    display: flex;
+    align-items: center;
+    padding-inline: 1ch;
+    min-width: 32ch;
+  }
+  iframe {
+    flex: 1 1 0;
+    border: none;
+    outline: 1px solid var(--border);
+  }
 }
 
-/* Make the header bg full width, but the content inline with body */
 body > header {
-  background-color: var(--accent-bg);
-  border-bottom: 1px solid var(--border);
-  text-align: center;
-  /*padding: 0 0.5rem 2rem 0.5rem;*/
-  grid-column: 1 / -1;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
 }
-
-body > header > *:only-child {
-  /*margin-block-start: 2rem;*/
+body > footer {
+  padding: 1ch;
 }
 
-body > header h1 {
-  max-width: 1200px;
-  margin: 1rem auto;
+main {
+  font-size: clamp(1rem, .75rem + 1vw, 1.25rem);
+  max-width: 80ch;
+  margin-top: 32px;
+  margin-inline: auto;
+  padding: 3rem 1em;
 }
-
-body > header p {
-  max-width: 40rem;
+main > header > h1 {
+  max-width: 1200px;
   margin: 1rem auto;
 }
 
-/* Add a little padding to ensure spacing is correct between content and header > nav */
-main {
-  padding-top: 1.5rem;
+/* Prevent long strings from overflowing container */
+p, h1, h2, h3, h4, h5, h6 {
+  overflow-wrap: break-word;
 }
 
-body > footer {
-  margin-top: 4rem;
-  padding: 2rem 1rem 1.5rem 1rem;
-  color: var(--text-light);
-  font-size: 0.9rem;
-  text-align: center;
-  border-top: 1px solid var(--border);
+/* Fix line height when title wraps */
+h1, h2, h3 {
+  line-height: 1.25;
+  text-wrap: balance;
 }
 
-/* Format headers */
-h1 {
-  font-size: 3rem;
+article {
+  --flow-space: 1.5rem;
+  overflow-wrap: break-word;
+  hyphens: auto;
+  text-wrap: pretty;
+  margin-inline: auto;
 }
 
-h2 {
-  font-size: 2.6rem;
-  margin-top: 3rem;
+article > * + * { 
+  margin-top: var(--flow-space, 1rem); 
+  margin-block-start: var(--flow-space, 1.25em); 
 }
 
-h3 {
-  font-size: 2rem;
-  margin-top: 3rem;
+article :is(h2, h3, h4) + p {
+  margin-top: 0.5lh;
 }
-
-h4 {
-  font-size: 1.44rem;
+article > hgroup {
+  padding-bottom: 3rem;
+  margin-bottom: 3rem;
+  border-bottom: 1px solid var(--border);
 }
-
-h5 {
-  font-size: 1.15rem;
+article > hgroup p {
+  color: var(--preformatted);
 }
-
-h6 {
-  font-size: 0.96rem;
+article > p + ul {
+  margin-top: 0.3lh;
 }
-
-p {
-  margin: 1.5rem 0;
+article :is(ol, ul) {
+  padding-left: 1em;
 }
 
-/* Prevent long strings from overflowing container */
-p, h1, h2, h3, h4, h5, h6 {
-  overflow-wrap: break-word;
+::selection {
+  background-color: var(--accent);
+  color: var(--bg);
 }
 
-/* Fix line height when title wraps */
-h1,
-h2,
-h3 {
-  line-height: 1.1;
+::marker {
+  color: var(--disabled);
 }
 
-/* Reduce header size on mobile */
-@media only screen and (max-width: 720px) {
-  h1 {
-    font-size: 2.5rem;
-  }
-
-  h2 {
-    font-size: 2.1rem;
-  }
-
-  h3 {
-    font-size: 1.75rem;
-  }
 
-  h4 {
-    font-size: 1.25rem;
-  }
-}
-
-/* Format links & buttons */
-a,
-a:visited {
+a, a:visited {
   color: var(--accent);
 }
-
-a:hover {
+a:hover,
+a:focus-visible {
   text-decoration: none;
+  color: color-mix(in srgb, var(--bg) 10%, var(--accent));
 }
 
 /* Set the cursor to '?' on an abbreviation and style the abbreviation to show that there is more information underneath */
@@ -188,122 +177,14 @@ abbr[title] {
   text-decoration-style: dotted;
 }
 
-/* Format navigation */
-header > nav {
-  font-size: 1.2rem;
-  line-height: 2;
-  /*padding: 1rem 0 0 0;*/
-}
-
-/* Use flexbox to allow items to wrap, as needed */
-header > nav ul,
-header > nav ol {
-  align-content: space-around;
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: center;
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-}
-
-/* List items are inline elements, make them behave more like blocks */
-header > nav ul li,
-header > nav ol li {
-  display: inline-block;
-}
-
-header > nav a,
-header > nav a:visited {
-  /*margin: 0 0.5rem 1rem 0.5rem;*/
-  /*border-left: 1px solid var(--border);
-  border-right: 1px solid var(--border);*/
-  /*border-radius: var(--standard-border-radius);*/
-  color: var(--text);
-  display: inline-block;
-  padding: 0.7rem 2.5rem;
-  text-decoration: none;
-}
-
-header > nav a:hover,
-header > nav a.current,
-header > nav a[aria-current="page"] {
-  /*border-color: var(--accent);*/
-  color: var(--accent);
-  cursor: pointer;
-}
-
-/* Reduce nav side on mobile */
-@media only screen and (max-width: 720px) {
-  header > nav a {
-    border: none;
-    padding: 0;
-    text-decoration: underline;
-    line-height: 1;
-  }
-}
-
 /* Consolidate box styling */
-aside, details, pre, progress {
+details, pre {
   background-color: var(--accent-bg);
   border: 1px solid var(--border);
-  border-radius: var(--standard-border-radius);
-  margin-bottom: 1rem;
-}
-
-aside {
-  font-size: 1rem;
-  width: 30%;
-  padding: 0 15px;
-  margin-inline-start: 15px;
-  float: right;
-}
-*[dir="rtl"] aside {
-  float: left;
-}
-
-/* Make aside full-width on mobile */
-@media only screen and (max-width: 720px) {
-  aside {
-    width: 100%;
-    float: none;
-    margin-inline-start: 0;
-  }
-}
-
-article, fieldset, dialog {
-  border: 1px solid var(--border);
-  padding: 1rem;
-  border-radius: var(--standard-border-radius);
+  border-radius: var(--border-radius);
   margin-bottom: 1rem;
 }
 
-article h2:first-child,
-section h2:first-child {
-  margin-top: 1rem;
-}
-
-section {
-  border-top: 1px solid var(--border);
-  border-bottom: 1px solid var(--border);
-  padding: 2rem 1rem;
-  margin: 3rem 0;
-}
-
-/* Don't double separators when chaining sections */
-section + section,
-sectionmd:first-child {
-  border-top: 0;
-  padding-top: 0;
-}
-
-section:last-child {
-  border-bottom: 0;
-  padding-bottom: 0;
-}
-
 details {
   padding: 0.7rem 1rem;
 }
@@ -355,39 +236,23 @@ tr:nth-child(even) {
   background-color: var(--accent-bg);
 }
 
-table caption {
-  font-weight: bold;
-  margin-bottom: 0.5rem;
-}
-
 /* Misc body elements */
 hr {
   border: none;
   height: 1px;
   background: var(--border);
-  margin: 1rem auto;
-}
-
-mark {
-  padding: 2px 5px;
-  border-radius: var(--standard-border-radius);
-  background-color: var(--marked);
-  color: black;
-}
-
-mark a {
-  color: #0d47a1;
+  margin: var(--flow-space) auto;
 }
 
 img,
 video {
   max-width: 100%;
   height: auto;
-  border-radius: var(--standard-border-radius);
+  border-radius: var(--border-radius);
 }
 
 figure {
-  margin: 0;
+  margin-block: var(--flow-space);
   display: block;
   overflow-x: auto;
 }
@@ -395,54 +260,34 @@ figure {
 figure > img,
 figure > picture > img {
   display: block;
-  margin-inline: auto;
+  margin-right: auto;
+  transition: filter 0.2s ease-out;
+  &:hover {
+    filter: saturate(32);
+  }
 }
 
 figcaption {
-  text-align: center;
   font-size: 0.9rem;
   color: var(--text-light);
   margin-block: 1rem;
 }
 
 blockquote {
-  margin-inline-start: 2rem;
-  margin-inline-end: 0;
-  margin-block: 2rem;
+  margin: 2rem 0;
   padding: 0.4rem 0.8rem;
-  border-inline-start: 0.35rem solid var(--accent);
+  border-inline-start: 2px solid var(--accent);
   color: var(--text-light);
   font-style: italic;
 }
 
-cite {
-  font-size: 0.9rem;
-  color: var(--text-light);
-  font-style: normal;
-}
-
-dt {
-    color: var(--text-light);
-}
-
-/* Use mono font for code elements */
 code,
 pre,
-pre span,
-kbd,
-samp {
-  font-family: var(--mono-font);
+pre span {
+  font-family: var(--font-mono);
   color: var(--code);
 }
 
-kbd {
-  color: var(--preformatted);
-  border: 1px solid var(--preformatted);
-  border-bottom: 3px solid var(--preformatted);
-  border-radius: var(--standard-border-radius);
-  padding: 0.1rem 0.4rem;
-}
-
 pre {
   padding: 1rem 1.4rem;
   max-width: 100%;
@@ -450,7 +295,6 @@ pre {
   color: var(--preformatted);
 }
 
-/* Fix embedded code within pre */
 pre code {
   color: var(--preformatted);
   background: none;
@@ -458,35 +302,15 @@ pre code {
   padding: 0;
 }
 
-dialog {
-  max-width: 40rem;
-  margin: auto;
-}
-
-dialog::backdrop {
-  background-color: var(--bg);
-  opacity: 0.8;
-}
-
-@media only screen and (max-width: 720px) {
-  dialog {
-    max-width: 100%;
-    margin: auto 1em;
-  }
+pre[aria-hidden] {
+  font-size: min(1rem, 2.5vw);
+  line-height: 1.2;
+  color: var(--preformatted);
+  background: none;
+  border: none;
+  padding: 0;
 }
 
-/* Superscript & Subscript */
-/* Prevent scripts from affecting line-height. */
 sup, sub {
-  vertical-align: baseline;
-  position: relative;
-}
-
-sup {
-  top: -0.4em;
-}
-
-sub {
-  top: 0.3em;
+  line-height: 1;
 }
-
diff --git a/layouts/html b/layouts/html
@@ -4,29 +4,59 @@ layout() {
 <html lang="fr">
 <head>
 	<title>${title?La page dont le chemin s'affiche au dessus nécessite un titre}</title>
-	${STYLE:+<link rel="stylesheet" href=\"$STYLE\" />}
+	${STYLE:+<link rel="stylesheet" href=\"$STYLE\">}
 	<meta charset="utf-8">
+	<meta name="color-scheme" content="light dark">
 	<meta name="viewport" content="width=device-width,initial-scale=1.0">
-	<meta name="description" content="$description" />
-	<meta name="author" content="$author" />
-	<link rel="icon" href="/favicon.png" />
+	<meta name="description" content="$description">
+	<meta name="author" content="$author">
+	<link rel="icon" type="image/x-icon" href="/favicon.ico">
+	<link rel="icon" href="/favicon.svg">
+	<link rel="author" type="text/plain" href="/humans.txt">
 </head>
-<header>
-<h1>$title</h1>
-	<iframe 
-		src="http://zinzine.bebou.netlib.re/cgi-bin/radioON.cgi"
-		id="radioON"
-		style="border: none; width: 22ch; height: 10ch;"
-		>
-
-	</iframe>
-$([ "$FILE" = "contents/index.sh" ] || echo "<p>$subtitle</br><a href='/'>retour accueil</a></p>")
-</header>
 <body>
+	<header>
+		<nav>$(
+			if echo $FILE | grep -q "index-template"; then 
+				echo "<h1>bébou</h1>/<span>index"; 
+			else echo "<a href="/">bébou</a>/<span>$(echo "$FILE" | cut -d '/' -f2)"; 
+			fi)</span>
+		</nav>
+		<iframe src="http://zinzine.bebou.netlib.re/cgi-bin/radioON.cgi" id="radioON" width="256" height="32" title="radio"></iframe>
+	</header>
 	<main>
-		$([ -d $the/tdm ] && the tdm)
-		$(the main)
+		<article>
+			<hgroup>$(
+				if echo $FILE | grep -q "index-template"; then 
+<<-. cat 
+<pre aria-hidden="true">
+	                                ✧✳✧
+	      ✧✯✷✧✯                   ✷    ✧
+	   ✧✧      ✽✽✧               ✯      ✽
+	✽✽ ✧        ✧✯✳              ✺     ✧
+	   ✽           ✧✺              ✧    ✯
+	    ✯       ✧✯✧✧      ✧✳✳    ✺   ✧      
+	    ✧ ✽✷✧ ✧✧✽       ✧    ✧   ✺ ✯      ✷✧✯✺    ✯   ✺
+	     ✺       ✯✧      ✧✯✯✧    ✧    ✷✧✺     ✽ ✷ ✽   ✯
+	     ✯         ✷✳   ✧ ✳      ✧✧     ✽  ✧     ✧   ✧   ✳  ✽
+	     ✳        ✧✯✧✳    ✽   ✧   ✷    ✧    ✧✳✳      ✺✷ ✯✯
+	 ✧✯✽        ✽✷✯        ✽✧     ✧   ✷                    
+	✳   ✧      ✧✯✧                   ✯✯
+	 ✧✽  ✳✺✯✯✧      
+
+</pre>
+.
+else echo "<h1>$title</h1>";
+fi)
+				$([ "$FILE" = "contents/index.sh" ] || echo "<p>$subtitle</p>")		
+			</hgroup>
+			$([ -d $the/tdm ] && the tdm)
+			$(the main)
+		</article>
 	</main>
+	<footer>
+		<p>Dernière mise à jour: <time datetime="$(date -I)">$(date -I)</time></p>
+	</footer>
 </body>
 </html>
 @@