From 6e47ef329efec4cb8899ef215ef75811e0b8d875 Mon Sep 17 00:00:00 2001 From: Jan-Lukas Else Date: Sat, 9 May 2020 11:07:37 +0200 Subject: [PATCH] Site param "inlinecss", improvements here & there --- assets/css/style.scss | 165 ++++++++++++--------------- layouts/_default/baseof.html | 74 ++++++------ layouts/_default/photosummary.html | 2 +- layouts/_default/single.html | 6 +- layouts/partials/mentions.html | 7 +- layouts/partials/pagination.html | 6 +- layouts/partials/post_meta.html | 4 +- layouts/partials/post_tags.html | 4 +- layouts/partials/related.html | 6 +- layouts/partials/styles.html | 6 + layouts/partials/webmentionform.html | 2 +- layouts/tags/terms.html | 2 +- 12 files changed, 128 insertions(+), 156 deletions(-) create mode 100644 layouts/partials/styles.html diff --git a/assets/css/style.scss b/assets/css/style.scss index dda2be6..37d4e81 100644 --- a/assets/css/style.scss +++ b/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; diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 27beece..2b138d3 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -1,45 +1,39 @@ - - - - - {{ block "title" . }}{{ if not .IsHome }}{{ with .Title }}{{ . }} - {{end}}{{ end }}{{ .Site.Title }}{{ end }} - - - {{ template "_internal/opengraph.html" . }} - {{ template "_internal/schema.html" . }} - {{ template "_internal/twitter_cards.html" . }} - {{ $styles := resources.Get "css/style.scss" | toCSS | minify | fingerprint }} - - - {{ range .AlternativeOutputFormats }} - - {{ end }} - {{ if .Param "original" }} - - {{ else }} - - {{ end }} - {{ partialCached "indiewebhead" . (.Param "indieweb.enabled") }} - {{ partialCached "customhead" . }} - - -
- {{ partialCached "header" . }} -
-
- {{ block "main" . }} - {{ with .Content }} -
- {{ . }} -
- {{ end }} - {{ end }} + + + +{{ block "title" . }}{{ if not .IsHome }}{{ with .Title }}{{ . }} - {{end}}{{ end }}{{ .Site.Title }}{{ end }} + + +{{ template "_internal/opengraph.html" . }} +{{ template "_internal/schema.html" . }} +{{ template "_internal/twitter_cards.html" . }} +{{ partialCached "styles" . }} + +{{ range .AlternativeOutputFormats }} + +{{ end }} +{{ if .Param "original" }} + +{{ else }} + +{{ end }} +{{ partialCached "indiewebhead" . (.Param "indieweb.enabled") }} +{{ partialCached "customhead" . }} +
+ {{ partialCached "header" . }} +
+
+ {{ block "main" . }} + {{ with .Content }} +
+ {{ . }}
+ {{ end }} + {{ end }}
- {{ partialCached "footer" . }}
- {{ partialCached "custombodyend" . }} - - \ No newline at end of file + {{ partialCached "footer" . }} +
+{{ partialCached "custombodyend" . }} \ No newline at end of file diff --git a/layouts/_default/photosummary.html b/layouts/_default/photosummary.html index 9d23a33..4aba955 100644 --- a/layouts/_default/photosummary.html +++ b/layouts/_default/photosummary.html @@ -1,7 +1,7 @@
{{ range .Params.images }} -

+

{{ end }}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 3083c70..f3c8f32 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -6,14 +6,12 @@

{{ . }}

{{ end }} {{ if not .Params.nometa }} -
- {{ partial "post_meta" . }} -
+ {{ partial "post_meta" . }} {{ partial "post_actions" . }} {{ end }} {{ partial "oldcontentwarning" . }} -
+
{{ with .Params.audio }}

{{ end }} diff --git a/layouts/partials/mentions.html b/layouts/partials/mentions.html index 637ffc8..7aaace3 100644 --- a/layouts/partials/mentions.html +++ b/layouts/partials/mentions.html @@ -5,11 +5,10 @@ {{ with $mentions }}
- {{ T "interactions" }} + {{ T "interactions" }}
    - {{ range sort . ".date" "asc" }} - {{ $sourceUrl := urls.Parse .source }} -
  • {{ $sourceUrl.Host }} {{ dateFormat $dateFormat .date }}
    • + {{ range sort . ".date" "asc" }}{{ $sourceUrl := urls.Parse .source }} +
  • {{ $sourceUrl.Host }} {{ dateFormat $dateFormat .date }}
    • {{ end }}
diff --git a/layouts/partials/pagination.html b/layouts/partials/pagination.html index 39eee02..16a6680 100644 --- a/layouts/partials/pagination.html +++ b/layouts/partials/pagination.html @@ -1,11 +1,11 @@ {{ if or (.Paginator.HasPrev) (.Paginator.HasNext) }} {{ end }} \ No newline at end of file diff --git a/layouts/partials/post_meta.html b/layouts/partials/post_meta.html index ca8b5b3..8529448 100644 --- a/layouts/partials/post_meta.html +++ b/layouts/partials/post_meta.html @@ -1,3 +1,4 @@ +
{{ if not .Date.IsZero }}
{{ if not (eq .FirstSection.RelPermalink .RelPermalink) }} in {{ .FirstSection.Title }}{{ end }} @@ -37,4 +38,5 @@
{{ i18n "translations" }}: {{ $delimiter := "" }}{{ range .Translations }}{{ $delimiter }}{{ .Language.LanguageName }}{{ $delimiter = ", " }}{{ end }}
-{{ end }} \ No newline at end of file +{{ end }} +
\ No newline at end of file diff --git a/layouts/partials/post_tags.html b/layouts/partials/post_tags.html index de8cc2b..75d1aad 100644 --- a/layouts/partials/post_tags.html +++ b/layouts/partials/post_tags.html @@ -3,14 +3,14 @@ {{ with (.GetTerms "series") }} {{ end }} {{ with (.GetTerms "tags") }} {{ end }} diff --git a/layouts/partials/related.html b/layouts/partials/related.html index c3b3f8b..dbe2e31 100644 --- a/layouts/partials/related.html +++ b/layouts/partials/related.html @@ -2,12 +2,10 @@ {{ with $related }}
- {{ T "related" }} + {{ T "related" }}
diff --git a/layouts/partials/styles.html b/layouts/partials/styles.html new file mode 100644 index 0000000..b6a25c2 --- /dev/null +++ b/layouts/partials/styles.html @@ -0,0 +1,6 @@ +{{ $styles := resources.Get "css/style.scss" | toCSS | minify | fingerprint }} +{{ if .Site.Params.inlinecss }} + +{{ else }} + +{{ end }} \ No newline at end of file diff --git a/layouts/partials/webmentionform.html b/layouts/partials/webmentionform.html index 0b8f34e..9a1ad87 100644 --- a/layouts/partials/webmentionform.html +++ b/layouts/partials/webmentionform.html @@ -5,7 +5,7 @@
- +

{{ T "anon_comment" }}

diff --git a/layouts/tags/terms.html b/layouts/tags/terms.html index 4faee69..c23f2eb 100644 --- a/layouts/tags/terms.html +++ b/layouts/tags/terms.html @@ -13,7 +13,7 @@
    {{ range (.Paginate ( .Pages.ByTitle ) 100).Pages }} -
  • {{ .Title }}{{ len .Pages }}
    • +
  • {{ .Title }}{{ len .Pages }}
    • {{ end }}