jlelse
/
Indieroad
Archived
1
Fork 0
Code Releases Activity

Site param "inlinecss", improvements here & there

This commit is contained in:
Jan-Lukas Else 2020-05-09 11:07:37 +02:00
parent 858e30eb5a
commit 6e47ef329e
12 changed files with 128 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

165
assets/css/style.scss
View File

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

74
layouts/_default/baseof.html
View File

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

2
layouts/_default/photosummary.html
View File

@ -1,7 +1,7 @@
<article class="list-item h-entry photosummary"> <article class="list-item h-entry photosummary">
<div class="list-excerpt"> <div class="list-excerpt">
{{ range .Params.images }} {{ 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> <a href="#_" class="lightbox" id="{{ . | md5 }}-lightbox"><img src="{{ . | safeURL }}"></a>
{{ end }} {{ end }}
</div> </div>

6
layouts/_default/single.html
View File

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

7
layouts/partials/mentions.html
View File

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

6
layouts/partials/pagination.html
View File

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

4
layouts/partials/post_meta.html
View File

@ -1,3 +1,4 @@
<div class="post-meta">
{{ if not .Date.IsZero }} {{ if not .Date.IsZero }}
<div class="item"> <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> <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"> <div class="item">
{{ i18n "translations" }}: {{ $delimiter := "" }}{{ range .Translations }}{{ $delimiter }}<a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>{{ $delimiter = ", " }}{{ end }} {{ i18n "translations" }}: {{ $delimiter := "" }}{{ range .Translations }}{{ $delimiter }}<a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>{{ $delimiter = ", " }}{{ end }}
</div> </div>
{{ end }} {{ end }}
</div>

4
layouts/partials/post_tags.html
View File

@ -3,14 +3,14 @@
{{ with (.GetTerms "series") }} {{ with (.GetTerms "series") }}
<ul class="tags-list"> <ul class="tags-list">
{{ range sort . "Pages" "desc" }} {{ 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 }} {{ end }}
</ul> </ul>
{{ end }} {{ end }}
{{ with (.GetTerms "tags") }} {{ with (.GetTerms "tags") }}
<ul class="tags-list"> <ul class="tags-list">
{{ range sort . "Pages" "desc" }} {{ 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 }} {{ end }}
</ul> </ul>
{{ end }} {{ end }}

6
layouts/partials/related.html
View File

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

6
layouts/partials/styles.html Normal file
View File

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

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

2
layouts/tags/terms.html
View File

@ -13,7 +13,7 @@
<div class="tags"> <div class="tags">
<ul class="tags-list"> <ul class="tags-list">
{{ range (.Paginate ( .Pages.ByTitle ) 100).Pages }} {{ 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 }} {{ end }}
</ul> </ul>
</div> </div>