Own Stylesheet #57
|
|
@ -12,7 +12,6 @@
|
||||||
<link rel="webmention" href="/webmention/" />
|
<link rel="webmention" href="/webmention/" />
|
||||||
<link rel="alternate" type="application/rss+xml" title="RSS" href="/index.xml">
|
<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'>
|
<link rel='stylesheet' href='/static/style.css'>
|
||||||
<style>
|
<style>
|
||||||
:root {
|
:root {
|
||||||
|
|
@ -25,104 +24,31 @@
|
||||||
--background-light: color-mix(in srgb,var(--background),#fff 50%);
|
--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>
|
</style>
|
||||||
{{ .SiteConfig.HtmlHeadExtra }}
|
{{ .SiteConfig.HtmlHeadExtra }}
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<div class="container header h-card">
|
<div class="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 }}
|
{{ if .SiteConfig.AvatarUrl }}
|
||||||
|
<div class="header-profile">
|
||||||
<img class="u-photo u-logo avatar" src="{{ .SiteConfig.AvatarUrl }}" alt="{{ .SiteConfig.Title }}" width="100" height="100" />
|
<img class="u-photo u-logo avatar" src="{{ .SiteConfig.AvatarUrl }}" alt="{{ .SiteConfig.Title }}" width="100" height="100" />
|
||||||
|
</div>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
<div style="float: right; list-style: none;">
|
|
||||||
|
<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 }}
|
{{ range $me := .SiteConfig.Me }}
|
||||||
<li><a href="{{$me.Url}}" rel="me">{{$me.Name}}</a>
|
<li><a href="{{$me.Url}}" rel="me">{{$me.Name}}</a>
|
||||||
</li>
|
</li>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div>
|
||||||
</div>
|
|
||||||
<div class="container">
|
|
||||||
<nav>
|
<nav>
|
||||||
<ul>
|
<ul>
|
||||||
{{ range $link := .SiteConfig.HeaderMenu }}
|
{{ range $link := .SiteConfig.HeaderMenu }}
|
||||||
|
|
@ -138,10 +64,10 @@
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<main class="container">
|
<main>
|
||||||
{{template "main" .Data}}
|
{{template "main" .Data}}
|
||||||
</main>
|
</main>
|
||||||
<footer class="container">
|
<footer>
|
||||||
<nav>
|
<nav>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a target="_blank" href="/index.xml">RSS Feed</a></li>
|
<li><a target="_blank" href="/index.xml">RSS Feed</a></li>
|
||||||
|
|
|
||||||
|
|
@ -22,11 +22,12 @@
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
<div class="h-entry">
|
<div class="h-entry">
|
||||||
<hgroup>
|
|
||||||
{{if .Entry.Title}}
|
{{if .Entry.Title}}
|
||||||
<h1 class="p-name">{{.Entry.Title}}</h1>
|
<h1 class="p-name entry-title">{{.Entry.Title}}</h1>
|
||||||
|
{{else}}
|
||||||
|
<div style="padding-top:4rem;"></div>
|
||||||
{{end}}
|
{{end}}
|
||||||
<small>
|
<div class="entry-meta">
|
||||||
<a class="u-url" href="/posts/{{ .Entry.ID }}/">#</a>
|
<a class="u-url" href="/posts/{{ .Entry.ID }}/">#</a>
|
||||||
Published:
|
Published:
|
||||||
{{ if .Entry.PublishedAt }}
|
{{ if .Entry.PublishedAt }}
|
||||||
|
|
@ -43,7 +44,7 @@
|
||||||
{{.Author.Name}}
|
{{.Author.Name}}
|
||||||
</a>
|
</a>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</small>
|
</div>
|
||||||
</hgroup>
|
</hgroup>
|
||||||
|
|
||||||
<div class="e-content">
|
<div class="e-content">
|
||||||
|
|
|
||||||
|
|
@ -6,8 +6,7 @@
|
||||||
<div class="h-feed">
|
<div class="h-feed">
|
||||||
{{ range .Entries }}
|
{{ range .Entries }}
|
||||||
<div class="h-entry">
|
<div class="h-entry">
|
||||||
<hgroup>
|
<h1 class="entry-title">
|
||||||
<h3>
|
|
||||||
<a class="u-url" href="/posts/{{ .ID }}/">
|
<a class="u-url" href="/posts/{{ .ID }}/">
|
||||||
{{if .Title}}
|
{{if .Title}}
|
||||||
{{ .Title }}
|
{{ .Title }}
|
||||||
|
|
@ -15,15 +14,15 @@
|
||||||
#
|
#
|
||||||
{{end}}
|
{{end}}
|
||||||
</a>
|
</a>
|
||||||
</h3>
|
</h1>
|
||||||
<small style="font-size: 0.75em;">
|
<div class="entry-meta">
|
||||||
|
Published:
|
||||||
{{ if .PublishedAt }}
|
{{ if .PublishedAt }}
|
||||||
<time class="dt-published" datetime="{{.PublishedAt.Format "2006-01-02T15:04:05" }}">
|
<time class="dt-published" datetime="{{.PublishedAt.Format "2006-01-02T15:04:05" }}">
|
||||||
{{.PublishedAt.Format "2006-01-02" }}
|
{{.PublishedAt.Format "2006-01-02" }}
|
||||||
</time>
|
</time>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</small>
|
</div>
|
||||||
</hgroup>
|
|
||||||
{{ .Content }}
|
{{ .Content }}
|
||||||
</div>
|
</div>
|
||||||
<hr>
|
<hr>
|
||||||
|
|
|
||||||
|
|
@ -6,8 +6,7 @@
|
||||||
<div class="h-feed">
|
<div class="h-feed">
|
||||||
{{ range .Entries }}
|
{{ range .Entries }}
|
||||||
<div class="h-entry">
|
<div class="h-entry">
|
||||||
<hgroup>
|
<h1 class="entry-title">
|
||||||
<h3>
|
|
||||||
<a class="u-url" href="/posts/{{ .ID }}/">
|
<a class="u-url" href="/posts/{{ .ID }}/">
|
||||||
{{if .Title}}
|
{{if .Title}}
|
||||||
{{ .Title }}
|
{{ .Title }}
|
||||||
|
|
@ -15,15 +14,15 @@
|
||||||
#
|
#
|
||||||
{{end}}
|
{{end}}
|
||||||
</a>
|
</a>
|
||||||
</h3>
|
</h1>
|
||||||
<small style="font-size: 0.75em;">
|
<div class="entry-meta">
|
||||||
|
Published:
|
||||||
{{ if .PublishedAt }}
|
{{ if .PublishedAt }}
|
||||||
<time class="dt-published" datetime="{{.PublishedAt.Format "2006-01-02T15:04:05" }}">
|
<time class="dt-published" datetime="{{.PublishedAt.Format "2006-01-02T15:04:05" }}">
|
||||||
{{.PublishedAt.Format "2006-01-02" }}
|
{{.PublishedAt.Format "2006-01-02" }}
|
||||||
</time>
|
</time>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</small>
|
</div>
|
||||||
</hgroup>
|
|
||||||
{{ .Content }}
|
{{ .Content }}
|
||||||
</div>
|
</div>
|
||||||
<hr>
|
<hr>
|
||||||
|
|
|
||||||
12
web/app.go
12
web/app.go
|
|
@ -107,7 +107,6 @@ func NewWebApp(
|
||||||
siteConfig.Post("/menus/create/", siteConfigMenusHandler.HandleCreate)
|
siteConfig.Post("/menus/create/", siteConfigMenusHandler.HandleCreate)
|
||||||
siteConfig.Post("/menus/delete/", siteConfigMenusHandler.HandleDelete)
|
siteConfig.Post("/menus/delete/", siteConfigMenusHandler.HandleDelete)
|
||||||
|
|
||||||
// app.Static("/static/*filepath", http.Dir(repo.StaticDir()))
|
|
||||||
app.Use("/static", filesystem.New(filesystem.Config{
|
app.Use("/static", filesystem.New(filesystem.Config{
|
||||||
Root: http.FS(embedDirStatic),
|
Root: http.FS(embedDirStatic),
|
||||||
PathPrefix: "static",
|
PathPrefix: "static",
|
||||||
|
|
@ -139,17 +138,6 @@ func NewWebApp(
|
||||||
app.Get("/.well-known/webfinger", activityPubServer.HandleWebfinger)
|
app.Get("/.well-known/webfinger", activityPubServer.HandleWebfinger)
|
||||||
app.Route("/activitypub", activityPubServer.Router)
|
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{
|
return &WebApp{
|
||||||
FiberApp: app,
|
FiberApp: app,
|
||||||
EntryService: entryService,
|
EntryService: entryService,
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -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 {
|
.action-tile-list {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
|
@ -20,7 +209,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.danger {
|
.danger {
|
||||||
background-color: var(--pico-del-color) !important;
|
background-color: rgb(136, 57, 53) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.drop-file {
|
.drop-file {
|
||||||
|
|
@ -72,3 +261,27 @@
|
||||||
border-color: #ff3e3e;
|
border-color: #ff3e3e;
|
||||||
animation: border-pulsate-error 1s 2;
|
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;
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue