tables

remove picocss files
actions and forms
2024-05-09 16:52:13 +02:00 · 2024-05-09 16:11:35 +02:00 · 2024-05-09 16:11:13 +02:00 · 2024-05-09 14:15:19 +02:00
8 changed files with 288 additions and 171 deletions
--- 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 {
@ -25,104 +24,31 @@
                --background-light: color-mix(in srgb,var(--background),#fff 50%);

            }
-
-            [data-theme="light"],
-            :root:not([data-theme="dark"]) {
-                --pico-primary: {{.SiteConfig.PrimaryColor}};
-                --pico-primary-background: {{.SiteConfig.PrimaryColor}};
-                --pico-primary-hover: color-mix(in srgb,var(--primary),#000 20%);
-                --pico-primary-hover-background: color-mix(in srgb,var(--primary),#000 20%);
-                --pico-primary-focus: color-mix(in srgb,var(--primary),#fff 40%);
-                --pico-primary-underline: color-mix(in srgb,var(--primary),#fff 40%);
-                --pico-primary-inverse: #FFF;
-                --pico-background: {{.SiteConfig.HeaderColor}};
-                --pico-background-dark: color-mix(in srgb,var(--background),#000 50%);
-                --pico-background-light: color-mix(in srgb,var(--background),#fff 50%);
-            }
-
-
-            header {
-                background-color: var(--background);
-                padding-bottom: 1rem !important;
-            }
-
-            footer {
-                border-top: dashed 2px;
-                border-color: #ccc;
-            }
-
-            .avatar {
-                float: left;
-                margin-right: 1rem;
-                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;
-                padding: 0 4px;
-            }
-
-            .photo-grid-item {
-                flex: 1 0 25%;
-                padding: 4px;
-            }
-
-            .photo-grid-item img {
-                width: 100%;
-                height: 100%;
-                aspect-ratio: 1 / 1 ;
-                object-fit: cover;
-            }
-            
-            main img {
-                max-height: 50vh;
-                margin: auto;
-                text-align: center;
-                display: block;
-            }
-
        </style>
        {{ .SiteConfig.HtmlHeadExtra }}
    </head>
    <body>
        <header>
-            <div class="container header h-card">
-                <hgroup class="header-title">
-                    <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 }}
+            <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" />
-                    {{ end }}
-                    <div style="float: right; list-style: none;">
+                    </div>
+                {{ end }}
+
+                <div>
+                    <h2><a class="p-name u-url" href="/">{{ .SiteConfig.Title }}</a></h2>
+                    <div class="p-note">{{ .SiteConfig.SubTitle }}</div>
+                </div>
+
+                <ul style="list-style: none;padding:0;flex-shrink: 0;">
                    {{ range $me := .SiteConfig.Me }}
                        <li><a href="{{$me.Url}}" rel="me">{{$me.Name}}</a>
                        </li>
                    {{ end }}
-                    </div>
-                </div>
+                </ul>                
            </div>
-            <div class="container">
+            <div>
                <nav>
                    <ul>
                        {{ range $link := .SiteConfig.HeaderMenu }}
@ -138,10 +64,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>
--- 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">
--- 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>
--- 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>
--- 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,
--- a/web/static/pico-2.min.css
+++ b/web/static/pico-2.min.css
--- a/web/static/pico.min.css
+++ b/web/static/pico.min.css
--- a/web/static/style.css
+++ b/web/static/style.css
@ -1,3 +1,192 @@
+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;
+    margin-bottom: 2rem;
+}
+
+footer {
+    border-top: dashed 2px;
+    border-color: #ccc;
+    padding-bottom: 5rem;
+}
+
+label {
+    display: inline-block;
+    padding-bottom: 0.25rem;
+}
+
+input, textarea, a[role='button'] {
+    display: inline-block;
+    width: 100%;
+    vertical-align: middle;
+    margin-bottom: 0.75rem;
+    padding: 0.25rem;
+    box-sizing: border-box;
+}
+
+input[type='submit'], a[role='button'] {
+    background-color: var(--primary);
+    color: #fff;
+    border: none;
+    border-radius: 2px;
+    font-size: 1rem;
+    text-align: center;
+    height: 2rem;
+}
+
+input[type='submit']:hover, a[role='button']:hover {
+    background-color: var(--primary-hover);
+    color: #fff;
+}
+
+input[type='submit']:focus, a[role='button']:focus {
+    background-color: var(--primary-focus);
+    color: #fff;
+}
+
+input[type='submit'].secondary {
+    background-color: #5d6b89;
+}
+
+input[type='submit'].secondary:hover {
+    background-color: #48536b;
+}
+
+input[type='submit'].secondary:focus {
+    background-color: rgba(93, 107, 137, 0.25);
+}
+
+/* for checkboxes */
+label > input {
+    display: inherit;
+    width: initial;
+}
+
+/* from pico.css */
+mark {
+    padding: 0.125rem 0.25rem;
+    background-color: #fde7c0;
+    vertical-align: baseline;
+}
+
+main img {
+    max-width: 100%;
+    margin: auto;
+    text-align: center;
+    display: block;
+}
+
+
+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;
+}
+
+table {
+    width: 100%;
+}
+
+th {
+    border-bottom: solid #888 1px;
+}
+
+tr:nth-child(2n) {
+    background: #f0f0f1;
+}
+
+.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;
+}
+
+.grid {
+    display: flex;
+    justify-content: space-between;
+    align-items: stretch;
+}
+
+.grid > * {
+    flex: 1;
+    margin: 0.25rem;
+}
+
+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;
@ -20,7 +209,7 @@
 }

 .danger {
-    background-color: var(--pico-del-color) !important;
+    background-color: rgb(136, 57, 53) !important;
 }

 .drop-file {
@ -72,3 +261,27 @@
    border-color: #ff3e3e;
    animation: border-pulsate-error 1s 2;
 }
+
+.avatar {
+    float: left;
+    margin-right: 1rem;
+    border-radius: 50%;
+}
+
+.photo-grid {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0 4px;
+}
+
+.photo-grid-item {
+    flex: 1 0 25%;
+    padding: 4px;
+}
+
+.photo-grid-item img {
+    width: 100%;
+    height: 100%;
+    aspect-ratio: 1 / 1;
+    object-fit: cover;
+}
Author	SHA1	Message	Date
Niko Abeler	d7e5df2a95	tables	2024-05-09 16:52:13 +02:00
Niko Abeler	3a3655b587	remove picocss files	2024-05-09 16:11:35 +02:00
Niko Abeler	cba07e961d	actions and forms	2024-05-09 16:11:13 +02:00
Niko Abeler	1524820d5e	extending own stylesheet to remove pico	2024-05-09 14:15:19 +02:00