From 1524820d5e1fc933fa989f0b44169b11033315ff Mon Sep 17 00:00:00 2001
From: Niko Abeler <niko@rerere.org>
Date: Thu, 9 May 2024 14:15:19 +0200
Subject: [PATCH] extending own stylesheet to remove pico

---
 render/templates/base.tmpl        | 53 ++++-------------
 render/templates/views/entry.tmpl | 45 +++++++-------
 render/templates/views/index.tmpl | 35 ++++++-----
 render/templates/views/list.tmpl  | 35 ++++++-----
 web/app.go                        | 12 ----
 web/static/style.css              | 98 +++++++++++++++++++++++++++++++
 6 files changed, 167 insertions(+), 111 deletions(-)
diff --git a/render/templates/base.tmpl b/render/templates/base.tmpl
index 9872a76..bdde27d 100644
--- a/render/templates/base.tmpl
+++ b/render/templates/base.tmpl
@@ -12,7 +12,6 @@
         <link rel="webmention" href="/webmention/" />
         <link rel="alternate" type="application/rss+xml" title="RSS" href="/index.xml">
 
-        <link rel='stylesheet' href='/static/pico-2.min.css'>
         <link rel='stylesheet' href='/static/style.css'>        
         <style>
             :root {
@@ -41,11 +40,6 @@
             }
 
 
-            header {
-                background-color: var(--background);
-                padding-bottom: 1rem !important;
-            }
-
             footer {
                 border-top: dashed 2px;
                 border-color: #ccc;
@@ -57,23 +51,6 @@
                 border-radius: 50%;
             }
 
-            .header {
-                display: flex;
-                flex-flow: row wrap;
-                justify-content: space-between;
-                align-items: flex-start;
-            }
-
-            .header-title {
-                order: 0;
-            }
-
-            .header-profile {
-                order: 1;
-            }
-
-            hgroup h2 a { color: inherit; } 
-        
             .photo-grid {
                 display: flex;
                 flex-wrap: wrap;
@@ -93,7 +70,7 @@
             }
             
             main img {
-                max-height: 50vh;
+                max-width: 100%;
                 margin: auto;
                 text-align: center;
                 display: block;
@@ -104,25 +81,19 @@
     </head>
     <body>
         <header>
-            <div class="container header h-card">
-                <hgroup class="header-title">
+            <div class="header h-card">
+                {{ if .SiteConfig.AvatarUrl }}
+                    <div class="header-profile">
+                        <img class="u-photo u-logo avatar" src="{{ .SiteConfig.AvatarUrl }}" alt="{{ .SiteConfig.Title }}" width="100" height="100" />
+                    </div>
+                {{ end }}
+
+                <div>
                     <h2><a class="p-name u-url" href="/">{{ .SiteConfig.Title }}</a></h2>
                     <h3 class="p-note">{{ .SiteConfig.SubTitle }}</h3>
-                </hgroup>
-
-                <div class="header-profile">
-                    {{ if .SiteConfig.AvatarUrl }}
-                        <img class="u-photo u-logo avatar" src="{{ .SiteConfig.AvatarUrl }}" alt="{{ .SiteConfig.Title }}" width="100" height="100" />
-                    {{ end }}
-                    <div style="float: right; list-style: none;">
-                    {{ range $me := .SiteConfig.Me }}
-                        <li><a href="{{$me.Url}}" rel="me">{{$me.Name}}</a>
-                        </li>
-                    {{ end }}
-                    </div>
                 </div>
             </div>
-            <div class="container">
+            <div>
                 <nav>
                     <ul>
                         {{ range $link := .SiteConfig.HeaderMenu }}
@@ -138,10 +109,10 @@
                 </nav>
             </div>
         </header>
-        <main class="container">
+        <main>
             {{template "main" .Data}}
         </main>
-        <footer class="container">
+        <footer>
             <nav>
                 <ul>
                     <li><a target="_blank" href="/index.xml">RSS Feed</a></li>
diff --git a/render/templates/views/entry.tmpl b/render/templates/views/entry.tmpl
index 1cd67d2..bb35505 100644
--- a/render/templates/views/entry.tmpl
+++ b/render/templates/views/entry.tmpl
@@ -22,28 +22,29 @@
 {{ end }}
 
 <div class="h-entry">
-    <hgroup>
-        {{if .Entry.Title}}
-            <h1 class="p-name">{{.Entry.Title}}</h1>
-        {{end}}
-        <small>
-            <a class="u-url" href="/posts/{{ .Entry.ID }}/">#</a>
-            Published:
-            {{ if .Entry.PublishedAt }}
-                <time class="dt-published" datetime="{{.Entry.PublishedAt.Format "2006-01-02T15:04:05" }}">
-                    {{.Entry.PublishedAt.Format "2006-01-02" }}
-                </time>
-            {{ end }}
-            {{ if .Author.Name }}
-                by
-                <a class="p-author h-card" href="{{.Author.FullUrl}}">
-                    {{ if .Author.AvatarUrl }}
-                        <img class="u-photo u-logo" style="height: 1em;" src="{{ .Author.AvatarUrl }}" alt="{{ .Author.Config.Title }}" />
-                    {{ end }}
-                    {{.Author.Name}}
-                </a>
-            {{ end }}
-        </small> 
+    {{if .Entry.Title}}
+        <h1 class="p-name entry-title">{{.Entry.Title}}</h1>
+    {{else}}
+        <div style="padding-top:4rem;"></div>
+    {{end}}
+    <div class="entry-meta">
+        <a class="u-url" href="/posts/{{ .Entry.ID }}/">#</a>
+        Published:
+        {{ if .Entry.PublishedAt }}
+            <time class="dt-published" datetime="{{.Entry.PublishedAt.Format "2006-01-02T15:04:05" }}">
+                {{.Entry.PublishedAt.Format "2006-01-02" }}
+            </time>
+        {{ end }}
+        {{ if .Author.Name }}
+            by
+            <a class="p-author h-card" href="{{.Author.FullUrl}}">
+                {{ if .Author.AvatarUrl }}
+                    <img class="u-photo u-logo" style="height: 1em;" src="{{ .Author.AvatarUrl }}" alt="{{ .Author.Config.Title }}" />
+                {{ end }}
+                {{.Author.Name}}
+            </a>
+        {{ end }}
+    </div> 
     </hgroup>
 
     <div class="e-content">
diff --git a/render/templates/views/index.tmpl b/render/templates/views/index.tmpl
index e6d3aa1..83b8027 100644
--- a/render/templates/views/index.tmpl
+++ b/render/templates/views/index.tmpl
@@ -6,24 +6,23 @@
 <div class="h-feed">
 {{ range .Entries }}
     <div class="h-entry">
-        <hgroup>
-            <h3>
-                <a class="u-url" href="/posts/{{ .ID }}/">
-                    {{if .Title}}
-                        {{ .Title }}
-                    {{else}}
-                        #
-                    {{end}}
-                </a>
-            </h3>
-            <small style="font-size: 0.75em;">
-                {{ if .PublishedAt }}
-                    <time class="dt-published" datetime="{{.PublishedAt.Format "2006-01-02T15:04:05" }}">
-                        {{.PublishedAt.Format "2006-01-02" }}
-                    </time>
-                {{ end }}
-            </small>
-        </hgroup>
+        <h1 class="entry-title">
+            <a class="u-url" href="/posts/{{ .ID }}/">
+                {{if .Title}}
+                    {{ .Title }}
+                {{else}}
+                    #
+                {{end}}
+            </a>
+        </h1>
+        <div class="entry-meta">
+            Published:
+            {{ if .PublishedAt }}
+                <time class="dt-published" datetime="{{.PublishedAt.Format "2006-01-02T15:04:05" }}">
+                    {{.PublishedAt.Format "2006-01-02" }}
+                </time>
+            {{ end }}
+        </div> 
         {{ .Content }}
     </div>
     <hr>
diff --git a/render/templates/views/list.tmpl b/render/templates/views/list.tmpl
index fd657f1..0b38740 100644
--- a/render/templates/views/list.tmpl
+++ b/render/templates/views/list.tmpl
@@ -6,24 +6,23 @@
 <div class="h-feed">
 {{ range .Entries }}
     <div class="h-entry">
-        <hgroup>
-            <h3>
-                <a class="u-url" href="/posts/{{ .ID }}/">
-                    {{if .Title}}
-                        {{ .Title }}
-                    {{else}}
-                        #
-                    {{end}}
-                </a>
-            </h3>
-            <small style="font-size: 0.75em;">
-                {{ if .PublishedAt }}
-                    <time class="dt-published" datetime="{{.PublishedAt.Format "2006-01-02T15:04:05" }}">
-                        {{.PublishedAt.Format "2006-01-02" }}
-                    </time>
-                {{ end }}
-            </small>
-        </hgroup>
+        <h1 class="entry-title">
+            <a class="u-url" href="/posts/{{ .ID }}/">
+                {{if .Title}}
+                    {{ .Title }}
+                {{else}}
+                    #
+                {{end}}
+            </a>
+        </h1>
+        <div class="entry-meta">
+            Published:
+            {{ if .PublishedAt }}
+                <time class="dt-published" datetime="{{.PublishedAt.Format "2006-01-02T15:04:05" }}">
+                    {{.PublishedAt.Format "2006-01-02" }}
+                </time>
+            {{ end }}
+        </div> 
         {{ .Content }}
     </div>
     <hr>
diff --git a/web/app.go b/web/app.go
index 692069f..80830cc 100644
--- a/web/app.go
+++ b/web/app.go
@@ -107,7 +107,6 @@ func NewWebApp(
 	siteConfig.Post("/menus/create/", siteConfigMenusHandler.HandleCreate)
 	siteConfig.Post("/menus/delete/", siteConfigMenusHandler.HandleDelete)
 
-	// app.Static("/static/*filepath", http.Dir(repo.StaticDir()))
 	app.Use("/static", filesystem.New(filesystem.Config{
 		Root:       http.FS(embedDirStatic),
 		PathPrefix: "static",
@@ -139,17 +138,6 @@ func NewWebApp(
 	app.Get("/.well-known/webfinger", activityPubServer.HandleWebfinger)
 	app.Route("/activitypub", activityPubServer.Router)
 
-	// Webmention
-	// app.Post("/webmention/", userWebmentionHandler(repo))
-	// Micropub
-	// app.Post("/micropub/", userMicropubHandler(repo))
-	// IndieAuth
-	// app.Get("/auth/", userAuthHandler(repo))
-	// app.Post("/auth/", userAuthProfileHandler(repo))
-	// app.Post("/auth/verify/", userAuthVerifyHandler(repo))
-	// app.Post("/auth/token/", userAuthTokenHandler(repo))
-	// app.Get("/.well-known/oauth-authorization-server", userAuthMetadataHandler(repo))
-	// app.NotFound = http.HandlerFunc(notFoundHandler(repo))
 	return &WebApp{
 		FiberApp:       app,
 		EntryService:   entryService,
diff --git a/web/static/style.css b/web/static/style.css
index 9650694..0bd944d 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -1,3 +1,101 @@
+body {
+    font-family: sans-serif;
+    max-width: 800px;
+    margin: 0 auto 0 auto;
+}
+
+header {
+    padding: 1rem;
+    background-color: var(--background);
+    /* background: linear-gradient(180deg, var(--background) 0%, rgba(255, 255, 255, 0) 100%); */
+
+    padding-bottom: 1rem !important;
+}
+
+footer {
+    border-top: dashed 2px;
+    border-color: #ccc;
+    padding-bottom: 5rem;
+}
+
+a {
+    color: var(--primary);
+    text-decoration: none;
+}
+
+a:hover {
+    color: var(--primary-hover);
+}
+
+a:focus {
+    color: var(--primary-focus);
+}
+
+nav > ul {
+    list-style-type: none;
+    margin: 0;
+    padding-left: 0;
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+}
+
+nav > ul > li {
+    float: left;
+    padding-right: 2rem;
+}
+
+hr {
+    margin: 3rem
+}
+h1 {
+    font-size: 1.5rem;
+}
+h2 {
+    font-size: 1.25rem;
+}
+h3 {
+    font-size: 1.125rem;
+}
+h4, h5, h6 {
+    font-size: 1.0rem;
+}
+
+pre {
+    background-color: #eee;
+    padding: 0.5rem;
+    white-space: pre-wrap;
+}
+
+.header {
+    display: flex;
+    flex-flow: row;
+}
+
+.header-profile {
+    padding-right: 0.5rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.row {
+    display: flex;
+    justify-content: space-between;
+}
+
+nav.row {
+    margin-bottom: 2rem;
+}
+
+.entry-title {
+    margin-bottom: 0;
+}
+
+.entry-meta {
+    font-size: 0.8rem;
+    padding-bottom: 2rem;
+}
+
 .action-tile-list {
     display: flex;
     flex-wrap: wrap;
