use tailwindcss prose

aviskase · Jan 8, 2024 · 821563f · 821563f
1 parent 7098257
commit 821563f
Show file tree

Hide file tree

Showing 20 changed files with 730 additions and 335 deletions.
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -4,8 +4,7 @@
 
 @import './fonts.css';
 
-html {
-  font-size: 62.5%;
-}
 
-@import './site.css';
+h1, h2, h3, h4, h5, h6, p {
+  text-rendering: optimizeLegibility;
+}
diff --git a/assets/css/site.css b/assets/css/site.css
diff --git a/layouts/_default/_markup/render-heading.html b/layouts/_default/_markup/render-heading.html
@@ -1,5 +1,6 @@
-{{/*  <div class="relative group/header"><h{{ .Level }} id="{{ .Anchor | safeURL }}" class=""><a href="#{{ .Anchor | safeURL }}" class="hidden pointer-events-none header-link focus:opacity-75 group-hover/header:opacity-75"><svg xmlns="http://www.w3.org/2000/svg" class="pointer-events-auto opacity-100 inline-block align-middle"  width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a>{{ .Text | safeHTML }}</h{{ .Level }}></div>  */}}
-<div class="relative group/header"><h{{ .Level }} id="{{ .Anchor | safeURL }}" class=""><a href="#{{ .Anchor | safeURL }}" class="hidden pointer-events-none header-link focus:opacity-75 group-hover/header:opacity-75 normal:text-inherit normal:block normal:absolute normal:opacity-0 normal:left-0 normal:text-[0.75em] normal:translate-x-[-125%] normal:translate-y-[-2px] normal:scroll-mt-[128px] normal:transition-opacity normal:duration-300">
-  <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[1em] h-[1em] pointer-events-auto opacity-100 inline-block align-middle">
-    <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244" />
-  </svg></a>{{ .Text | safeHTML }}</h{{ .Level }}></div>
+<h{{ .Level }} id="{{ .Anchor | safeURL }}" >
+  <a class="group relative" href="#{{ .Anchor | safeURL }}">
+    <span class="hidden md:group-hover:inline absolute -left-5">#</span>
+    {{- .Text | safeHTML -}}
+  </a>
+</h{{ .Level }}>
diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
@@ -1,19 +1,19 @@
 {{- $src := .Page.Resources.GetMatch (printf "*%s*" .Destination) -}}
-{{- $img_class := "my-[3.2rem] mx-auto rounded" -}}
+{{- $img_class := "mx-auto rounded" -}}
 {{ if or (hasPrefix .Destination "http://" ) (hasPrefix .Destination "https://" ) }}
 <img class="{{ $img_class }}" src="{{.Destination}}" {{ with .Text }}alt="{{.}}"{{ else }}alt=""{{ end }} {{ with .Title }}title="{{.}}"{{ end }}>
 {{ else if hasSuffix $src ".gif" }}
 <img class="{{ $img_class }}" src="{{$src.RelPermalink}}" {{ with .Text }}alt="{{.}}"{{ else }}alt=""{{ end }} {{ with .Title }}title="{{.}}"{{ end }}>
 {{ else }}
-<figure class="my-[3.2rem]">
-  <picture class="my-0">
+<figure>
+  <picture>
     {{ $resizeOptions := printf "%dx%d webp" $src.Width $src.Height }}
     {{ $webpImg := $src.Resize $resizeOptions }}
     <source srcset="{{ $webpImg.Permalink }}" type="image/webp">
     <img class="{{ $img_class }}" src="{{ $src.Permalink }}" alt="{{ .Text }}" defer>
 	</picture>
 	{{ with .Title }}
-  <figcaption class="my-0">
+  <figcaption class="text-center">
     <p class="caption">{{ . }}</p>
 	</figcaption>
 	{{ end }}

diff --git a/layouts/_default/_markup/render-link.html b/layouts/_default/_markup/render-link.html
@@ -1,7 +1,7 @@
 <a href="{{ .Destination | safeURL }}" class="
 {{- if or (strings.HasPrefix .Destination "http") (strings.HasPrefix .Destination "mailto:") -}}
-no-underline bg-gradient-to-b from-blue-500 to-blue-500 bg-left-bottom bg-no-repeat bg-[length:100%_0.2rem] transition-[background] duration-300 hover:bg-gradient-to-b hover:from-amber-300 hover:to-amber-300 hover:bg-[length:100%_100%]
+bg-gradient-to-b from-blue-500 to-blue-500 bg-left-bottom bg-no-repeat bg-[length:100%_0.1rem] transition-[background] duration-300 hover:bg-gradient-to-b hover:from-amber-300 hover:to-amber-300 hover:bg-[length:100%_100%]
 {{- else -}}
-transition-colors duration-300 before:content-['[['] after:content-[']]'] hover:text-blue-500 focus:text-blue-500 before:text-blue-500 after:text-blue-500 before:text-[1.05em] after:text-[1.05em]
+{{ partial "internal-link-classes" . }}
 {{- end -}}
 ">{{ .Text | safeHTML }}</a>
diff --git a/layouts/_default/archive.html b/layouts/_default/archive.html
@@ -1,6 +1,6 @@
 {{ define "content" }}
 {{ partial "title" . }}
-<section class="normal:max-w-4xl mx-6 mt-12 normal:mx-auto">
+<section class="md:mx-auto md:max-w-screen-md ">
     {{ partial "article-list" . }}
 </section>
 {{ end }}

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -1,10 +1,10 @@
 <!DOCTYPE html>
 <html lang="{{ .Site.Language.Lang }}" prefix="og: http://ogp.me/ns# article: http://ogp.me/ns/article# profile: http://ogp.me/ns/profile#">
     {{ partial "head.html" . }}
-    <body class="selection:bg-blue-500 selection:text-white bg-white text-slate-950 font-sans text-[1.8rem] leading-[1.77]">
-        <div class="min-h-screen grid grid-rows-mainLayout">
+    <body class="selection:bg-blue-500 selection:text-white bg-white">
+        <div class="min-h-screen flex flex-col">
             {{- partial "header.html" . -}}
-            <main>
+            <main class="flex-1 w-full px-6 pb-12 md:max-w-3xl md:mx-auto lg:max-w-4xl lg:pb-28">
             {{ block "content" . }}{{ end }}
             </main>
             {{- partial "footer.html" . -}}

diff --git a/layouts/articles/single.html b/layouts/articles/single.html
@@ -5,34 +5,34 @@
 {{- $next := $pages.ByDate.Reverse.Next . -}}
 {{ partial "title" . }}
 
-<div class="text-left mx-6 normal:text-center normal:mx-12">
-    <div class="text-[2rem] text-slate-500 normal:grid normal:grid-cols-[1fr_5rem_1fr]">
-        <div class="normal:justify-self-end">{{ .Date.Format "2 Jan 2006" }}
+<div class="text-left md:text-center mb-10">
+    <div class="text-xl text-slate-500 md:grid md:grid-cols-[1fr_5rem_1fr]">
+        <div class="md:justify-self-end">{{ .Date.Format "2 Jan 2006" }}
         {{- if ne .Lastmod .Date }}
         (upd: {{ .Lastmod.Format "2 Jan 2006" }})
         {{ end }}
         </div>
-        <div class="hidden normal:block">&nbsp;—&nbsp;</div>
-        <div class="relative normal:justify-self-start">
-            <svg class="inline relative bottom-[0.125em]" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span>&nbsp;{{- if gt .ReadingTime 1 }}{{ .ReadingTime }}&nbsp;mins{{ else }}1&nbsp;min{{ end -}}</span>
+        <div class="hidden md:block">&nbsp;—&nbsp;</div>
+        <div class="relative md:justify-self-start">
+            <svg class="inline relative bottom-0.5" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span>&nbsp;{{- if gt .ReadingTime 1 }}{{ .ReadingTime }}&nbsp;mins{{ else }}1&nbsp;min{{ end -}}</span>
         </div>
     </div>
 </div>
 {{ partial "article" . }}
 
 
-<div class="mx-auto max-w-max mt-[5rem]">
+<div class="mx-auto max-w-max mt-16 md:text-lg">
 
     {{ with $prev }}
-    <a class="relative" href="{{ .Permalink }}" title="{{ partial "func/MakeTitle" (dict "title" .Title "isVisible" false ) }}"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="relative inline text-blue-500 text-[1.3em] m-2"><path d="M11 17l-5-5 5-5M18 17l-5-5 5-5"/></svg>older</a>
+    <a class="relative" href="{{ .Permalink }}" title="{{ partial "func/MakeTitle" (dict "title" .Title "isVisible" false ) }}"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="relative inline text-blue-500 text-2xl md:text-3xl m-2"><path d="M11 17l-5-5 5-5M18 17l-5-5 5-5"/></svg>older</a>
     {{ end }}
 
     {{ if and $prev $next }}
-    <span class="text-blue-500">&nbsp; &middot; &nbsp; &middot; &nbsp; &middot; &nbsp;</span>
+    <span class="text-blue-500 font-bold">&nbsp; &middot; &nbsp; &middot; &nbsp; &middot; &nbsp;</span>
     {{ end }}
 
     {{ with $next }}
-    <a class="relative" href="{{ .Permalink }}" title="{{ partial "func/MakeTitle" (dict "title" .Title "isVisible" false ) }}">newer<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="relative inline text-blue-500 text-[1.3em] m-2"><path d="M13 17l5-5-5-5M6 17l5-5-5-5"/></svg></a>
+    <a class="relative" href="{{ .Permalink }}" title="{{ partial "func/MakeTitle" (dict "title" .Title "isVisible" false ) }}">newer<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="relative inline text-blue-500 text-2xl md:text-3xl m-2"><path d="M13 17l5-5-5-5M6 17l5-5-5-5"/></svg></a>
     {{ end }}
 </div>
 {{ end }}
diff --git a/layouts/index.html b/layouts/index.html
@@ -1,6 +1,6 @@
 {{ define "content" }}
-<section class="normal:max-w-4xl mx-6 mt-12 normal:mx-auto">
+<section class="mt-12 md:mx-auto md:max-w-screen-md ">
     {{ partial "article-list" . }}
-    <div class="flex text-16"><a class="p-[0.2rem] rounded-[0.6rem] bg-[linear-gradient(120deg,theme(colors.blue.500),theme(colors.blue.400),theme(colors.yellow.200),theme(colors.blue.400),theme(colors.blue.500))] bg-left hover:bg-right bg-[length:200%] transition-all duration-500 text-blue-800 hover:text-blue-500" href="{{ ref . "pages/archive" }}"><span class="bg-white flex w-full h-full items-center justify-center py-2 px-8 ">see more</span></a></div>
+    <div class="flex"><a class="p-0.5 rounded-md bg-[linear-gradient(120deg,theme(colors.blue.500),theme(colors.blue.400),theme(colors.yellow.200),theme(colors.blue.400),theme(colors.blue.500))] bg-left hover:bg-right bg-[length:200%] transition-all duration-500 text-blue-800 hover:text-blue-500" href="{{ ref . "pages/archive" }}"><span class="bg-white rounded flex w-full h-full items-center justify-center py-2 px-8 ">see more</span></a></div>
 </section>
 {{ end }}
diff --git a/layouts/partials/article-list.html b/layouts/partials/article-list.html
@@ -6,14 +6,14 @@
     {{- range $pages -}}
     {{- $firstArticle := index .Pages 0 -}}
     <li>
-        <div class="lowercase mb-3 text-slate-500 text-[2rem]">/&nbsp;{{ $firstArticle.Date.Format "January 2006"
+        <div class="lowercase mb-3 text-slate-500 text-xl">/&nbsp;{{ $firstArticle.Date.Format "January 2006"
             }}&nbsp;/</div>
     </li>
-    <ul class="mb-16">
+    <ul class="mb-12">
         {{- range .Pages -}}
         <li>
             <a class="flex hover:text-blue-500 mb-3" href="{{ .Permalink }}">
-                <div class="w-12 text-blue-500">{{ .Date.Day }}</div>
+                <div class="w-8 text-blue-500">{{ .Date.Day }}</div>
                 <div class="">{{ partial "func/MakeTitle" (dict "title" .Title ) }}</div>
             </a>
         </li>

diff --git a/layouts/partials/article.html b/layouts/partials/article.html
@@ -1,11 +1,11 @@
-<article class="mt-20 mb-0 mx-6 normal:mx-auto normal:max-w-normal">
+<article class="prose prose-slate md:mx-auto md:prose-lg">
   {{ .Content }}
 
   {{- if .Params.see_also }}
   <hr/>
   <p>See also:</p>
   <ul>{{ range .Params.see_also }}
-      {{ with $.Site.GetPage . }}<li><a class="internal" href="{{ .Permalink }}">{{ partial "func/MakeTitle" (dict "title" .Title ) }}</a></li>{{ end }}
+      {{ with $.Site.GetPage . }}<li><a class="{{ partial "internal-link-classes" . }}" href="{{ .Permalink }}">{{ partial "func/MakeTitle" (dict "title" .Title ) }}</a></li>{{ end }}
   {{ end }}</ul>
   {{ end }}
 </article>
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
@@ -1,3 +1,3 @@
-<footer class="justify-center flex w-full pt-6 pb-4 text-16 bg-amber-300 mt-12">
+<footer class="justify-center flex w-full pt-4 pb-3 bg-amber-300">
     <a class="border-b-2 border-transparent hover:border-blue-500" href="mailto:{{ .Site.Params.social.email }}">{{ .Site.Params.firstname }} {{ .Site.Params.lastname }}</a><span>&nbsp;&middot;&nbsp;{{ now.Format "2006" }}&nbsp;&middot;&nbsp;</span><a  class="border-b-2 border-transparent hover:border-blue-500" href="{{ ref . "pages/i-dont-track-you" }}">No tracking</a>
 </footer>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
@@ -1,30 +1,31 @@
 <header>
     <nav class="bg-gradient-to-b from-blue-800 to-sky-600 relative lowercase">
-        <div class="pb-12 pt-6 max-w-normal flex flex-wrap items-center normal:items-baseline justify-between mx-6 normal:mx-auto">
-            <a class="text-amber-300 font-bold text-24" href="/">{{ .Site.Title }}</a>
+        <div class="pb-8 pt-5 md:max-w-prose lg:max-w-screen-md flex flex-wrap items-center md:items-baseline justify-between mx-6 md:mx-auto">
+            <a class="text-amber-300 font-bold text-2xl" href="/">{{ .Site.Title }}</a>
 
             <input id="nav-toggle" type=checkbox class="hidden peer/nav">
 
-            <label id="show-button" for="nav-toggle" class="flex items-center normal:hidden peer-checked/nav:hidden">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"  class="w-12 h-12 stroke-amber-300">
+            <label id="show-button" for="nav-toggle" class="flex items-center md:hidden peer-checked/nav:hidden">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"  class="size-8 stroke-amber-300">
                     <title>Menu Open</title>
                     <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
                 </svg>     
             </label>
             <label id="hide-button" for="nav-toggle" class="items-center hidden peer-checked/nav:flex">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="w-12 h-12 stroke-amber-300">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="size-8 stroke-amber-300">
                     <title>Menu Close</title>
                     <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                 </svg>
             </label>
 
-            <ul id="nav-menu" class="font-semibold text-16 text-white hidden peer-checked/nav:block normal:flex mt-3 normal:mt-0 space-y-3 normal:space-y-0 normal:space-x-4.5 w-full normal:w-auto">
+            <ul id="nav-menu" class="font-semibold text-white hidden peer-checked/nav:block md:flex mt-4 md:mt-0 space-y-2 md:space-y-0 md:space-x-8 w-full md:w-auto">
                 {{ $currentPage := . }}
                 {{ range .Site.Menus.main }}
                 <li{{ if $currentPage.IsMenuCurrent "main" . }} class="border-amber-300 border-b-2  "{{ end }}><a href="{{ .URL }}">{{ .Name | markdownify }}</a></li>
                 {{ end }}
             </ul>
         </div>
+        {{/*  gradient lines  */}}
         <div class="absolute bottom-0 left-0 w-full overflow-hidden leading-[0] rotate-180">
             <svg class="relative block h-[37px] w-[calc(198%_+_1.3px)] [&>*]:fill-white" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
                 <path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" opacity=".25" class=""></path>

diff --git a/layouts/partials/internal-link-classes.html b/layouts/partials/internal-link-classes.html
@@ -0,0 +1 @@
+transition-colors duration-300 before:content-['[['] after:content-[']]'] hover:text-blue-500 focus:text-blue-500 before:text-blue-500 after:text-blue-500 before:text-[1.05em] after:text-[1.05em]
diff --git a/layouts/partials/title.html b/layouts/partials/title.html
@@ -1,3 +1,3 @@
-<div class="text-left mx-6 mt-24 mb-8 normal:text-center normal:mx-12">
-  <h1 class="text-[4.8rem] leading-none">{{ partial "func/MakeTitle" (dict "title" .Title) }}</h1>
+<div class="text-left mt-12 mb-8 md:text-center prose lg:prose-lg md:mx-auto">
+  <h1 class="">{{ partial "func/MakeTitle" (dict "title" .Title) }}</h1>
 </div>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		transition-colors duration-300 before:content-['[['] after:content-[']]'] hover:text-blue-500 focus:text-blue-500 before:text-blue-500 after:text-blue-500 before:text-[1.05em] after:text-[1.05em]