switch to use tailwindcss

.gitignore

@@ -0,0 +1,2 @@
+tailwindcss/node_modules/
+tailwindcss/tailwindcss

layouts/_default/list.html

@@ -1,7 +1,7 @@
 {{ define "main" }}
-	<main>
+	<main class="grid grid-cols-1 place-content-evenly">
 		{{ if or .Title .Content }}
-		<div>
+		<div class="text-xl">
 			{{ with .Title }}<h1>{{ . }}</h1>{{ end }}
 			{{ with .Content }}<div>{{ . }}</div>{{ end }}
 		</div>
@@ -10,7 +10,9 @@
 		{{ range .Paginator.Pages }}
 			{{ .Render "summary" }}
 		{{ end }}
+		<div class="justify-self-center">
 			{{ partial "pagination.html" . }}
+		</div>
 	</main>
 {{ partial "sidebar.html" . }}
 {{ end }}

layouts/_default/single.html

@@ -1,20 +1,20 @@
 {{ define "main" }}
 	<main>
-		<article>
+		<article class="flex flex-col md:justify-center md:items-center gap-4 ml-10">
-			<h1>{{ .Title }}</h1>
+			<h1 class="text-2xl">{{ .Title }}</h1>
 			<time datetime="{{ .Date.Format "2006-01-02T15:04:05" }}">{{ .Date.Format "02.01.2006 15:04" }}</time>
-			<div>
-				{{ .Content }}
-			</div>
 			{{ with .Params.tags }}
 			<div>
 				<ul id="tags">
 					{{ range . }}
-					<li><a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">{{ . }}</a></li>
+					<li class="badge badge-outline"><a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">{{ . }}</a></li>
 					{{ end }}
 				</ul>
 			</div>
 			{{ end }}
+			<div class="prose sm:prose-sm dark:prose-invert">
+				{{ .Content }}
+			</div>
 			{{ with .Site.DisqusShortname }}
 			<div>
 				{{ template "_internal/disqus.html" . }}

layouts/_default/summary.html

@@ -1,13 +1,13 @@
-<article>
+<article class="card-body">
-	<h1><a href="{{ .Permalink }}">{{ .Title }}</a></h1>
+	<h1 class="card-title"><a href="{{ .Permalink }}">{{ .Title }}</a></h1>
 	<time datetime="{{ .Date.Format "2006-01-02T15:04:05" }}">{{ .Date.Format "02.01.2006 15:04" }}</time>
 	{{ range .Params.tags }}
-	<a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">{{ . }}</a>
+	<a class="badge badge-outline" href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">{{ . }}</a>
 	{{ end }}
-	<div>
+	<div class="card-actions justify-end">
 		{{ .Summary | safeHTML | truncate 125 }}
 		{{ if .Truncated }}
-			<a href="{{ .Permalink }}">Read more...</a>
+			<a class="btn btn-outline self-end" href="{{ .Permalink }}">Read more...</a>
 		{{ end }}
 	</div>
 </article>

layouts/index.html

@@ -1,12 +1,13 @@
 {{ define "main" }}
-	<main>
+	<main class="flex flex-wrap justify-around gap-4">
 		{{ $paginator := .Paginate (where .Site.RegularPages "Type" "in" .Site.Params.mainSections) }}
 		{{ range $paginator.Pages }}
-			<div class="row">
+			<div class="card lg:w-1/4 glass">
 			{{ .Render "summary" }}
 			</div>
 		{{ end }}
-		{{ partial "pagination.html" . }}
 	</main>
-{{ partial "sidebar.html" . }}
+	<div class="flex justify-center">
+	{{ partial "pagination.html" . }}
+	</div>
 {{ end }}

layouts/partials/footer.html

@@ -1,4 +1,2 @@
-<footer>
+<footer class="footer flex justify-center">
-	<a type="application/rss+xml" href="{{ .Site.BaseURL }}index.xml"><i class="fa fa-rss" aria-hidden="true"></i></a>
-	<a href="https://mastodon.sdf.org/@zongor"><i class="fa-brands fa-mastodon"></i></a>
 </footer>

layouts/partials/header.html

@@ -1,9 +1,30 @@
-<header>
+<header class="navbar dark:bg-neutral mb-10 shadow-xl rounded-box">
 	{{ with .Site.Menus.main }}
-	<nav>
+	<div class="navbar">
+		<div class="navbar-start">
+		  <div class="dropdown">
+			<label tabindex="0" class="btn btn-ghost lg:hidden">
+			  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" /></svg>
+			</label>
+			<ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
 				{{ range . }}
-		<a href="{{ .URL | relURL }}">{{ .Name }}</a>
+				<li><a href="{{ .URL | relURL }}">{{ .Name }}</a></li>
 				{{ end }}
-	</nav>
+			</ul>
+		  </div>
+		  <a class="btn btn-ghost normal-case text-xl" href="https://alfrescocavern.com">alfrescocavern</a>
+		</div>
+		<div class="navbar-center hidden lg:flex">
+			<ul class="menu menu-horizontal px-1">
+			{{ range . }}
+			<li><a href="{{ .URL | relURL }}">{{ .Name }}</a></li>
+			{{ end }}
+			</ul>
+		</div>
+		<div class="navbar-end">
+			<a class="p-2" type="application/rss+xml" href="https://alfrescocavern.com/index.xml"><i class="fa fa-rss" aria-hidden="true"></i></a>
+			<a class="p-2" href="https://mastodon.sdf.org/@zongor"><i class="fa-brands fa-mastodon"></i></a>
+		</div>
+	  </div>
 	{{ end }}
 </header>

layouts/partials/pagination.html

@@ -1,9 +1,9 @@
-<div>
+<div class="join">
 {{ if .Paginator.HasPrev }}
-	<a href="{{ .Paginator.Prev.URL }}">Previous Page</a>
+	<a class="join-item btn" href="{{ .Paginator.Prev.URL }}">Previous Page</a>
 {{ end }}
-{{ .Paginator.PageNumber }} of {{ .Paginator.TotalPages }}
+<a class="join-item btn">{{ .Paginator.PageNumber }} of {{ .Paginator.TotalPages }}</a>
 {{ if .Paginator.HasNext }}
-	<a href="{{ .Paginator.Next.URL }}">Next Page</a>
+	<a class="join-item btn" href="{{ .Paginator.Next.URL }}">Next Page</a>
 {{ end }}
 </div>

layouts/partials/sidebar.html

@@ -1,14 +1,12 @@
-<aside>
+<aside class="flex justify-center">
 	<div>
-		<div>
+		<ul class="menu menu-horizontal bg-base-200 rounded-box">
-			<h3>LATEST POSTS</h3>
+			<li class="justify-center">
-		</div>
+				LATEST POSTS:
-		<div>
+			</li>
-			<ul>
 			{{ range first 5 (where .Site.RegularPages "Type" "in" .Site.Params.mainSections) }}
 			<li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
 			{{ end }}
 		</ul>
 	</div>
-	</div>
 </aside>

tailwindcss/dev.sh

@@ -0,0 +1,2 @@
+#!/bin/sh
+./tailwindcss -i input.css -o ../static/css/style.css --watch

tailwindcss/input.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

tailwindcss/package.json

@@ -0,0 +1,6 @@
+{
+  "devDependencies": {
+    "@tailwindcss/typography": "^0.5.10",
+    "daisyui": "^3.9.4"
+  }
+}

tailwindcss/prod.sh

@@ -0,0 +1,2 @@
+#!/bin/sh
+./tailwindcss -i input.css -o ../static/css/style.css --minify

tailwindcss/tailwind.config.js

@@ -0,0 +1,15 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["../layouts/**/*.{html,js}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [
+    require("@tailwindcss/forms"), 
+    require("@tailwindcss/typography"),
+    require("daisyui")
+  ],
+  daisyui: {
+    themes: ["retro", "dark"],
+  },
+};

theme.toml

@@ -1,4 +1,4 @@
-name = "Blank"
+name = "zirakzigil"
 license = "MIT"
 licenselink = "https://git.alfrescocavern.com/zongor/hugo-theme-zirakzigil/raw/branch/main/LICENSE"
 description = "Custom theme for alfrescocavern.com based on `blank` by vimux."