Add style
Tim Izzo tim@5ika.ch
Fri, 04 Oct 2024 13:37:51 +0000
3 files changed,
171 insertions(+),
2 deletions(-)
M
README.md
→
README.md
@@ -1,4 +1,6 @@
-# CLIPunk.net +--- +title: $ CLIPunk.net +--- CLIPunk est serveur multi-utilisateur ouvert inspiré des communautés [tilde](https://tildeverse.org/). C'est un lieu de rencontre inclusif et non-commercial pour apprendre ensemble autour de la sobriété numérique, le small web et le permacomputing à travers la ligne de commande (CLI).@@ -9,7 +11,7 @@ - Un Solid Pod pour chaque utilisateur
- Un serveur Web basique pour partager du contenu selon les principes du Small Web - Un wiki simpliste pour partager la connaissance -Chaque membre peut proposer des ajouts et des configurations si cela sert l'ensemble dans l'idée de mettre en place une gouvernance partagée. +Chaque membre peut proposer des ajouts et des configurations si cela sert l'ensemble des utilisateurs dans l'idée de mettre en place une gouvernance partagée. Ça vous intéresse ? Vous voulez rejoindre le serveur ? Envoyer votre clé SSH publique et le nom d'utilisateur que vous souhaitez à [tim@5ika.ch](mailto:tim@5ika.ch).
A
markdown.css
@@ -0,0 +1,151 @@
+:root { + --color-primary: #E0E722; + --color-bg: #18181b; + --text-primary: #44D62C; + --color-link: #a3ea97; + --text-secondary: #9ca3af; +} + +body { + color: var(--text-primary); + font-family: + Menlo, + Monaco, + Lucida Console, + Liberation Mono, + DejaVu Sans Mono, + Bitstream Vera Sans Mono, + Courier New, + monospace, + serif; + background-color: var(--color-bg); +} + +main { + max-width: 40rem; + margin: 0 auto; + padding: 2rem 0 4rem; +} + +blockquote { + margin: 0; + padding-left: 1rem; + color: var(--text-secondary); + border-left: 6px solid var(--color-primary); +} + +a { + color: var(--color-link); +} + +a:hover { + opacity: 0.7; +} + +h1 { + font-size: 1.5rem; + line-height: 2rem; +} + +h2 { + font-size: 1.25rem; + line-height: 1.75rem; + margin-bottom: 1rem; +} + +p { + margin: 1.5rem 0; + line-height: 1.5; +} + +ul { + line-height: 1.3; +} + +input, textarea { + border-radius: 4px; + border: 1px solid #eee; + padding: 0.5rem; + resize: vertical; +} + +button { + border-radius: 4px; + color: white; + background-color: var(--color-primary); + border: none; + padding: 0.5rem; + cursor: pointer; + + &:hover,&:focus { + opacity: 0.8; + } +} + +pre:has(code) { + padding: 0.5rem 0.75rem; + border-radius: 4px; + overflow: auto; +} + +:not(pre) > code { + font-size: 0.9rem; + color: var(--text-secondary); + background-color: rgb(221, 221, 221); + padding: 0 0.25rem; + border-radius: 4px; +} + +nav { + display: grid; + grid-template-columns: 1fr 1fr; +} + +nav > a { + display: block; + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.date { + font-size: 0.9rem; + color: var(--text-secondary); + background-color: var(--color-primary-light); + padding: 0 0.25rem; + border-radius: 4px; +} + +.activity-grid { + display: grid; + grid-template-columns: 1fr 4fr; + column-gap: 1rem; + row-gap: 1rem; + + > h4 { + margin: 0; + } +} + +@media only screen and (max-width: 600px) { + main { + padding: 0 0.5rem; + } + + nav { + display: grid; + grid-template-columns: 1fr 1fr; + } + + .activity-grid { + grid-template-columns: 1fr; + } + + ul.links-list { + padding-left: 1rem; + font-size: 1.1rem; + + & > * { + margin-bottom: 1rem; + } + } +}
A
template.html
@@ -0,0 +1,16 @@
+{{$md := (include .OriginalReq.URL.Path | splitFrontMatter)}} +<!DOCTYPE html> +<html> + <head> + <title>{{$md.Meta.title}}</title> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width,initial-scale=1"> + <link href="/markdown.css" rel="stylesheet"> + </head> + <body> + <main> + <h1>{{$md.Meta.title}}</h1> + {{markdown $md.Body}} + </main> + </body> +</html>