h4kor/owl-blogs
h4kor
/
owl-blogs
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Own Stylesheet #57

Merged
h4kor merged 4 commits from own_design into main 2024-05-09 14:55:15 +00:00
Conversation 0 Commits 4 Files Changed 8 +288 -171
8 changed files with 288 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
render/templates/base.tmpl
View File

@ -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>

45
render/templates/views/entry.tmpl
View File

@ -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">

35
render/templates/views/index.tmpl
View File

@ -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>

35
render/templates/views/list.tmpl
View File

@ -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>

12
web/app.go
View File

@ -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,

4
web/static/pico-2.min.css vendored
View File

File diff suppressed because one or more lines are too long

5
web/static/pico.min.css vendored
View File

File diff suppressed because one or more lines are too long

217
web/static/style.css
View File

@ -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 {
@ -71,4 +260,28 @@
border-width: 4px;
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;
}