Browse Source

Site param "inlinecss", improvements here & there

master
Jan-Lukas Else 1 year ago
parent
commit
6e47ef329e
  1. 165
      assets/css/style.scss
  2. 74
      layouts/_default/baseof.html
  3. 2
      layouts/_default/photosummary.html
  4. 6
      layouts/_default/single.html
  5. 7
      layouts/partials/mentions.html
  6. 6
      layouts/partials/pagination.html
  7. 4
      layouts/partials/post_meta.html
  8. 4
      layouts/partials/post_tags.html
  9. 6
      layouts/partials/related.html
  10. 6
      layouts/partials/styles.html
  11. 2
      layouts/partials/webmentionform.html
  12. 2
      layouts/tags/terms.html

165
assets/css/style.scss

@ -152,7 +152,7 @@ body {
min-width: 0;
}
.clearfix {
@mixin clearfix {
display: block;
&::after {
display: block;
@ -178,14 +178,16 @@ textarea {
}
/* Button */
.btn {
@mixin btn {
padding: 5px 10px;
font-weight: 700;
white-space: pre-line;
@include color(color, contrast-text);
@include color(background, contrast-background);
&:hover {
@include color(color, contrast-text);
* {
@include color(color, contrast-text);
}
@include color(background, main-color);
}
* {
@ -477,6 +479,7 @@ select {
}
/* Posts/Pages */
.main-header {
margin-bottom: 20px;
.main-title {
@ -486,21 +489,9 @@ select {
margin: 0;
margin-bottom: 10px;
}
.post-meta {
@extend .meta;
padding: 5px 0;
@include color-border(border-top, 1px, dotted, border);
@include color-border(border-bottom, 1px, dotted, border);
}
}
.main-content {
@extend .content;
@extend .clearfix;
margin-bottom: 20px;
}
.meta {
@mixin meta {
font-size: .8125rem;
vertical-align: baseline;
@include color(color, meta);
@ -520,12 +511,26 @@ select {
}
}
.post-meta {
@include meta;
padding: 5px 0;
@include color-border(border-top, 1px, dotted, border);
@include color-border(border-bottom, 1px, dotted, border);
}
.main-content {
@extend .content;
@include clearfix;
margin-bottom: 20px;
}
.oldcontent {
padding: 5px;
@include color-border(border, 1px, solid, border);
}
.content {
@include clearfix;
a {
font-weight: 700;
text-decoration: underline;
@ -557,32 +562,25 @@ select {
}
.tags {
@extend .clearfix;
@include clearfix;
margin-bottom: 20px;
font-size: .75rem;
line-height: 1;
@include color(color, contrast-text);
.tags-list {
&-list {
list-style: none;
.tag-item {
float: left;
margin: 0 6px 6px 0;
text-transform: uppercase;
@include color(background, contrast-background);
&:hover {
@include color(background, main-color);
}
.tag-link {
@extend .btn;
display: block;
padding: 10px 15px;
}
}
}
&-item {
@include btn;
float: left;
margin: 0 6px 6px 0;
text-transform: uppercase;
display: block;
padding: 10px 15px;
}
}
.actions {
@extend .clearfix;
@include clearfix;
margin-top: 15px;
margin-bottom: 15px;
font-size: .75rem;
@ -597,7 +595,7 @@ select {
@include color(background, main-color);
}
.action-link {
@extend .btn;
@include btn;
display: block;
padding: 10px 15px;
}
@ -615,7 +613,7 @@ select {
/* Authorbox */
.authorbox {
@include subarticle-element;
@extend .clearfix;
@include clearfix;
line-height: 1.5;
display: block;
@media screen and (max-width: $break1) {
@ -661,6 +659,7 @@ select {
flex-grow: 1;
}
.action {
@include btn;
margin-left: 6px;
}
@media screen and (max-width: $break1) {
@ -682,71 +681,53 @@ select {
}
}
.mentions {
@include subarticle-element;
line-height: 1.5;
display: block;
@media screen and (max-width: $break1) {
text-align: center;
}
.caption {
font-weight: 700;
line-height: 1;
text-transform: uppercase;
}
.mentions-list {
margin-top: 5px;
list-style: none;
}
}
/* List content */
.list {
.list-item {
&-item {
padding-bottom: 20px;
margin-bottom: 20px;
@include color-border(border-bottom, 1px, solid, border);
.list-header {
margin-bottom: 10px;
.list-title {
margin: 0;
&:hover {
@include color(color, main-color);
}
}
.list-meta {
@extend .meta;
margin-top: 5px;
}
}
.list-excerpt {
@extend .content;
@extend .clearfix;
}
.list-footer {
@extend .clearfix;
.read-more {
@extend .btn;
float: right;
margin-top: 10px;
}
}
&-header {
margin-bottom: 10px;
}
&-title {
margin: 0;
&:hover {
@include color(color, main-color);
}
}
&-meta {
@include meta;
margin-top: 5px;
}
&-excerpt {
@extend .content;
@include clearfix;
}
&-footer {
@include clearfix;
}
.read-more {
@include btn;
float: right;
margin-top: 10px;
}
}
/* Pagination */
.pagination {
margin-top: 20px;
.item {
&-item {
display: inline-block;
padding: 10px 15px;
font-weight: 700;
@include color(color, strong-text);
@include color(background, light-background);
&:hover, &--current {
@include color(color, contrast-text);
@include color(background, main-color);
}
}
&-item:hover, .current {
@include color(color, contrast-text);
@include color(background, main-color);
}
}
@ -797,20 +778,19 @@ select {
}
}
// Related articles
.related {
/* Related articles and webmentions */
.related, .mentions {
@include subarticle-element;
@media screen and (max-width: $break1) {
min-width: 100%;
text-align: center;
}
.caption {
&-caption {
font-weight: 700;
line-height: 1;
text-transform: uppercase;
}
.related-list {
&-list {
margin-top: 5px;
list-style: none;
}
@ -861,7 +841,7 @@ input {
width: 100%;
}
&[type=submit], &[type=reset] {
@extend .btn;
@include btn;
min-width: 100px;
border: 0;
text-transform: uppercase;
@ -920,11 +900,6 @@ textarea {
}
}
/* Photo summary */
.photosummary .image {
width: 100%;
}
/* Lightbox */
.lightbox {
display: none;

74
layouts/_default/baseof.html

@ -1,45 +1,39 @@
<!DOCTYPE html>
<html lang="{{ .Site.LanguageCode | default "en-us" }}">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{{ block "title" . }}{{ if not .IsHome }}{{ with .Title }}{{ . }} - {{end}}{{ end }}{{ .Site.Title }}{{ end }}</title>
<meta name="theme-color" content="{{ .Param "colors.main" | default "#0275D8" }}">
<meta name="description" content="{{ with .Description }}{{ . }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end }}">
{{ template "_internal/opengraph.html" . }}
{{ template "_internal/schema.html" . }}
{{ template "_internal/twitter_cards.html" . }}
{{ $styles := resources.Get "css/style.scss" | toCSS | minify | fingerprint }}
<link rel="stylesheet" href="{{ $styles.RelPermalink }}" integrity="{{ $styles.Data.Integrity }}">
<link rel="shortcut icon" href="{{ .Site.Params.favicon }}">
{{ range .AlternativeOutputFormats }}
<link rel="{{ .Rel }}" type="{{ .MediaType.Type }}" href="{{ .Permalink | safeURL }}">
{{ end }}
{{ if .Param "original" }}
<link rel="canonical" href="{{ .Param "original" }}">
{{ else }}
<link rel="canonical" href="{{ .Permalink }}">
{{ end }}
{{ partialCached "indiewebhead" . (.Param "indieweb.enabled") }}
{{ partialCached "customhead" . }}
</head>
<body class="body">
<div class="body-container">
{{ partialCached "header" . }}
<div class="wrapper flex">
<div class="primary">
{{ block "main" . }}
{{ with .Content }}
<div class="main-content">
{{ . }}
</div>
{{ end }}
{{ end }}
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{{ block "title" . }}{{ if not .IsHome }}{{ with .Title }}{{ . }} - {{end}}{{ end }}{{ .Site.Title }}{{ end }}</title>
<meta name="theme-color" content="{{ .Param "colors.main" | default "#0275D8" }}">
<meta name="description" content="{{ with .Description }}{{ . }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end }}">
{{ template "_internal/opengraph.html" . }}
{{ template "_internal/schema.html" . }}
{{ template "_internal/twitter_cards.html" . }}
{{ partialCached "styles" . }}
<link rel="shortcut icon" href="{{ .Site.Params.favicon }}">
{{ range .AlternativeOutputFormats }}
<link rel="{{ .Rel }}" type="{{ .MediaType.Type }}" href="{{ .Permalink | safeURL }}">
{{ end }}
{{ if .Param "original" }}
<link rel="canonical" href="{{ .Param "original" }}">
{{ else }}
<link rel="canonical" href="{{ .Permalink }}">
{{ end }}
{{ partialCached "indiewebhead" . (.Param "indieweb.enabled") }}
{{ partialCached "customhead" . }}
<div class="body-container">
{{ partialCached "header" . }}
<div class="wrapper flex">
<div class="primary">
{{ block "main" . }}
{{ with .Content }}
<div class="main-content">
{{ . }}
</div>
{{ end }}
{{ end }}
</div>
{{ partialCached "footer" . }}
</div>
{{ partialCached "custombodyend" . }}
</body>
</html>
{{ partialCached "footer" . }}
</div>
{{ partialCached "custombodyend" . }}

2
layouts/_default/photosummary.html

@ -1,7 +1,7 @@
<article class="list-item h-entry photosummary">
<div class="list-excerpt">
{{ range .Params.images }}
<p><figure><a href="#{{ . | md5 }}-lightbox"><img class="image" src="{{ . | safeURL }}"></a></figure></p>
<p><figure><a href="#{{ . | md5 }}-lightbox"><img style="width: 100%;" src="{{ . | safeURL }}"></a></figure></p>
<a href="#_" class="lightbox" id="{{ . | md5 }}-lightbox"><img src="{{ . | safeURL }}"></a>
{{ end }}
</div>

6
layouts/_default/single.html

@ -6,14 +6,12 @@
<h1 class="p-name post-title">{{ . }}</h1>
{{ end }}
{{ if not .Params.nometa }}
<div class="post-meta">
{{ partial "post_meta" . }}
</div>
{{ partial "post_meta" . }}
{{ partial "post_actions" . }}
{{ end }}
</header>
{{ partial "oldcontentwarning" . }}
<div class="e-content content clearfix">
<div class="e-content content">
{{ with .Params.audio }}
<p><audio controls preload="metadata" style="width: 100%;"><source src="{{ . }}"/></audio></p>
{{ end }}

7
layouts/partials/mentions.html

@ -5,11 +5,10 @@
{{ with $mentions }}
<div class="mentions">
<details>
<summary class="caption">{{ T "interactions" }}</summary>
<summary class="mentions-caption">{{ T "interactions" }}</summary>
<ul class="mentions-list">
{{ range sort . ".date" "asc" }}
{{ $sourceUrl := urls.Parse .source }}
<li class="item"><a href="{{ .source }}" target="_blank" rel="nofollow noopener noreferrer">{{ $sourceUrl.Host }}</a> <i>{{ dateFormat $dateFormat .date }}</i></li>
{{ range sort . ".date" "asc" }}{{ $sourceUrl := urls.Parse .source }}
<li><a href="{{ .source }}" target="_blank" rel="nofollow noopener noreferrer">{{ $sourceUrl.Host }}</a> <i>{{ dateFormat $dateFormat .date }}</i></li>
{{ end }}
</ul>
</details>

6
layouts/partials/pagination.html

@ -1,11 +1,11 @@
{{ if or (.Paginator.HasPrev) (.Paginator.HasNext) }}
<div class="pagination">
{{- with .Paginator.Prev }}
<a class="item btn" href="{{ .URL }}">{{ .PageNumber }}</a>
<a class="pagination-item" href="{{ .URL }}">{{ .PageNumber }}</a>
{{- end }}
<span class="item item--current">{{ .Paginator.PageNumber }}/{{ .Paginator.TotalPages }}</span>
<span class="pagination-item current">{{ .Paginator.PageNumber }}/{{ .Paginator.TotalPages }}</span>
{{- with .Paginator.Next }}
<a class="item btn" href="{{ .URL }}">{{ .PageNumber }}</a>
<a class="pagination-item" href="{{ .URL }}">{{ .PageNumber }}</a>
{{- end }}
</div>
{{ end }}

4
layouts/partials/post_meta.html

@ -1,3 +1,4 @@
<div class="post-meta">
{{ if not .Date.IsZero }}
<div class="item">
<span><time class="dt-published" datetime="{{.Date.Format "2006-01-02T15:04:05Z07:00"}}">{{.Date.Format ( .Site.Params.dateformat | default "January 02, 2006")}}</time>{{ if not (eq .FirstSection.RelPermalink .RelPermalink) }} in <a href="{{ .FirstSection.RelPermalink }}">{{ .FirstSection.Title }}</a>{{ end }}</span>
@ -37,4 +38,5 @@
<div class="item">
{{ i18n "translations" }}: {{ $delimiter := "" }}{{ range .Translations }}{{ $delimiter }}<a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>{{ $delimiter = ", " }}{{ end }}
</div>
{{ end }}
{{ end }}
</div>

4
layouts/partials/post_tags.html

@ -3,14 +3,14 @@
{{ with (.GetTerms "series") }}
<ul class="tags-list">
{{ range sort . "Pages" "desc" }}
<li class="tag-item"><div class="tag-link"><a class="p-category" href="{{ .RelPermalink }}" rel="tag">{{ .Title }}</a><sup>{{ len .Pages }}</sup></div></li>
<li class="tags-item"><a class="p-category" href="{{ .RelPermalink }}" rel="tag">{{ .Title }}</a><sup>{{ len .Pages }}</sup></li>
{{ end }}
</ul>
{{ end }}
{{ with (.GetTerms "tags") }}
<ul class="tags-list">
{{ range sort . "Pages" "desc" }}
<li class="tag-item"><div class="tag-link"><a class="p-category" href="{{ .RelPermalink }}" rel="tag">{{ .Title }}</a><sup>{{ len .Pages }}</sup></div></li>
<li class="tags-item"><a class="p-category" href="{{ .RelPermalink }}" rel="tag">{{ .Title }}</a><sup>{{ len .Pages }}</sup></li>
{{ end }}
</ul>
{{ end }}

6
layouts/partials/related.html

@ -2,12 +2,10 @@
{{ with $related }}
<div class="related">
<details>
<summary class="caption">{{ T "related" }}</summary>
<summary class="related-caption">{{ T "related" }}</summary>
<ul class="related-list">
{{ range . }}
<li class="item">
<a class="link" href="{{ .RelPermalink }}">{{ with .Title }}{{ . }}{{ else }}{{ .Summary | truncate 60 }}{{ end }}</a> <i>{{.Date.Format ( .Site.Params.dateformat | default "January 02, 2006")}}</i>
</li>
<li><a href="{{ .RelPermalink }}">{{ with .Title }}{{ . }}{{ else }}{{ .Summary | truncate 60 }}{{ end }}</a> <i>{{.Date.Format ( .Site.Params.dateformat | default "January 02, 2006")}}</i></li>
{{ end }}
</ul>
</details>

6
layouts/partials/styles.html

@ -0,0 +1,6 @@
{{ $styles := resources.Get "css/style.scss" | toCSS | minify | fingerprint }}
{{ if .Site.Params.inlinecss }}
<style>{{ $styles.Content | safeCSS }}</style>
{{ else }}
<link rel="stylesheet" href="{{ $styles.RelPermalink }}" integrity="{{ $styles.Data.Integrity }}">
{{ end }}

2
layouts/partials/webmentionform.html

@ -5,7 +5,7 @@
<form id="wm-form" method="post" action="{{ .Param "indieweb.endpoints.webmention" }}">
<input type="url" name="source" id="wm-source" placeholder="{{ T "wmform_label" }}">
<input type="hidden" name="target" value="{{ .Permalink }}">
<input class="btn action" type="submit" value="{{ T "wmform_btn" }}">
<input class="action" type="submit" value="{{ T "wmform_btn" }}">
</form>
<p id="anon-comment"><a href="https://quill.p3k.io/?dontask=1&me=https://commentpara.de&reply={{ .Permalink }}">{{ T "anon_comment" }}</a></p>
</div>

2
layouts/tags/terms.html

@ -13,7 +13,7 @@
<div class="tags">
<ul class="tags-list">
{{ range (.Paginate ( .Pages.ByTitle ) 100).Pages }}
<li class="tag-item"><div class="tag-link"><a href="{{ .RelPermalink }}">{{ .Title }}</a><sup>{{ len .Pages }}</sup></div></li>
<li class="tags-item"><a class="p-category" href="{{ .RelPermalink }}">{{ .Title }}</a><sup>{{ len .Pages }}</sup></li>
{{ end }}
</ul>
</div>

Loading…
Cancel
Save