add theme to repo

Amolith created

Change summary

themes/secluded/archetypes/default.md        |   2 
themes/secluded/assets/scss/_dark.scss       |  30 ++++
themes/secluded/assets/scss/_fonts.scss      |  29 ++++
themes/secluded/assets/scss/_header.scss     |  44 +++++++
themes/secluded/assets/scss/_list.scss       |  40 ++++++
themes/secluded/assets/scss/_main.scss       | 134 ++++++++++++++++++++++
themes/secluded/assets/scss/_media.scss      |  12 +
themes/secluded/assets/scss/_single.scss     | 131 +++++++++++++++++++++
themes/secluded/assets/scss/_variables.scss  |   8 +
themes/secluded/assets/scss/imports.scss     |   8 +
themes/secluded/layouts/404.html             |   0 
themes/secluded/layouts/_default/baseof.html |  11 +
themes/secluded/layouts/_default/list.html   |  37 ++++++
themes/secluded/layouts/_default/rss.xml     |  38 ++++++
themes/secluded/layouts/_default/single.html |  23 +++
themes/secluded/layouts/index.html           |   9 +
themes/secluded/layouts/partials/footer.html |   0 
themes/secluded/layouts/partials/head.html   |  44 +++++++
themes/secluded/layouts/partials/header.html |  11 +
19 files changed, 611 insertions(+)

Detailed changes

themes/secluded/assets/scss/_dark.scss 🔗 

@@ -0,0 +1,30 @@
+@media (prefers-color-scheme: dark) {
+    body {
+        color: $light;
+        background: $dark;
+    }
+    hr {
+        border: 1px solid $light;
+    }
+    .content h2 a, .content h3 a, .content p a, .content li a, .content td a {
+        color: $light;
+    }
+    .frontmatter {
+        border-bottom: 2px solid $light;
+        a {
+            color: $light;
+        }
+        .post-title a:hover {
+            color: $light;
+        }
+    }
+    .toc {
+        border-bottom: 2px solid $light;
+        a {
+            color: $light;
+        }
+    }
+    .content h2 a::after, .content h3 a::after, .content p a::after, .content li a::after, .content td a::after {
+        color: $dark-highlight;
+    }
+}

themes/secluded/assets/scss/_fonts.scss 🔗 

@@ -0,0 +1,29 @@
+@font-face {
+    font-family: Heliotrope;
+    font-style: normal;
+    font-weight: normal;
+    font-stretch: normal;
+    font-stretch: normal;
+    font-display: auto;
+    src: url('/assets/fonts/heliotrope/heliotrope_4_regular.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: Heliotrope;
+    font-style: italic;
+    font-weight: normal;
+    font-stretch: normal;
+    font-stretch: normal;
+    font-display: auto;
+    src: url('/assets/fonts/heliotrope/heliotrope_4_italic.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: Heliotrope;
+    font-style: normal;
+    font-weight: bold;
+    font-stretch: normal;
+    font-stretch: normal;
+    font-display: auto;
+    src: url('/assets/fonts/heliotrope/heliotrope_4_bold.woff2') format('woff2');
+}

themes/secluded/assets/scss/_header.scss 🔗 

@@ -0,0 +1,44 @@
+.title-wrapper {
+    max-width: 800px;
+    margin: 0 auto;
+    padding-top: 20px;
+    padding-bottom: 10px;
+
+    .title {
+        font: bold 37px Heliotrope;
+    }
+
+    .menu {
+        float: right;
+        margin-top: 11px;
+        font-size: 29px;
+        ul {
+            list-style-type: none;
+            margin: 0px;
+            padding: 0px;
+        }
+        li {
+            display: inline;
+            padding-left: 15px;
+        }
+        @media (max-width: 600px) {
+            float: none;
+            ul {
+                padding: 5px 0px 5px;
+            }
+            li {
+                padding-left: 0px;
+                padding-right: 15px;
+            }
+
+        }
+    }
+    a {
+        text-decoration: none;
+        color: inherit;
+    }
+    a:visited {
+        color: inherit;
+    }
+    border-bottom: 2px solid;
+}

themes/secluded/assets/scss/_list.scss 🔗 

@@ -0,0 +1,40 @@
+.list {
+    max-width: 600px;
+    margin: 0 auto;
+    font-size: 18px;
+    line-height: 30px;
+    a {
+        color: inherit;
+    }
+}
+.categories {
+    a {
+        text-decoration: none;
+    }
+}
+.posts {
+    a {
+        text-decoration: none;
+        color: inherit;
+    }
+    ul {
+        list-style-type: none;
+        margin: 0px;
+        padding: 0px;
+    }
+    &-title {
+        font-size: larger;
+        font-weight: bold;
+    }
+
+    &-day {
+        float: right;
+        font-family: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+    }
+    &-item {
+        padding-bottom: 35px;
+    }
+
+    &-list {
+    }
+}

themes/secluded/assets/scss/_main.scss 🔗 

@@ -0,0 +1,134 @@
+html {
+    scroll-behavior: smooth;
+}
+body {
+    font-family: Heliotrope;
+    color: $dark;
+    background: $light;
+}
+hr {
+    margin: 15px 0;
+    border: 1px solid $dark;
+}
+code {
+    background: $button-background;
+    border-radius: 3px;
+    padding: 0 4px;
+}
+code, pre {
+    font-size: 16px;
+    font-family: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+    color: $dark;
+}
+.wrapper {
+    max-width: 600px;
+    margin: 0 auto;
+    font-size: 18px;
+    line-height: 30px;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    word-break: break-word;
+    -moz-hyphens: auto;
+    hyphens: auto;
+    text-align: left;
+}
+
+.content {
+    h2, p, li, td {
+        a {
+            color: $dark;
+            text-decoration: none;
+            background-image: linear-gradient(120deg,$gradient-right 0%,$gradient-left 100%);
+            background-repeat: no-repeat;
+            background-size: 0 0;
+            background-position: 100% 21%;
+            transition: .15s ease-out;
+            &:hover {
+                background-size: 100% 100%;
+                color: $light;
+                &:after {
+                    color: $gradient-right;
+                }
+            }
+            &::after {
+                position: relative;
+                content: "\FEFF°";
+                margin-left: 0.10em;
+                font-size: 90%;
+                top: -0.10em;
+                color: $light-highlight;
+                font-feature-settings: "caps";
+                font-variant-numeric: normal;
+            }
+        }
+    }
+    .anchor-tag {
+        font-size: 70%;
+        margin-left: 7px;
+        background-size: 100% 0;
+        background-position: 0 150%;
+        &::after {
+            content: "";
+        }
+    }
+    .footnote-ref {
+        background-size: 100% 1.5px;
+        background-position: 0 90%;
+        &::after {
+            content: "";
+        }
+        &:hover {
+            background-size: 100% 100%;
+            color: #fff;
+        }
+    }
+    .footnote-backref {
+        background-size: 100% 1.5px;
+        background-position: 0 90%;
+        &::after {
+            content: "";
+        }
+        &:hover {
+            background-size: 100% 100%;
+            color: #fff;
+        }
+    }
+    .highlight {
+        code {
+            padding: 0px !important;
+        }
+        pre {
+            overflow: auto;
+            border-radius: 5px;
+            padding: 12px;
+            background: $button-background !important;
+        }
+        a {
+            background-image: none;
+            &::after {
+                content: "";
+            }
+        }
+    }
+}
+
+.button {
+    font-family: inherit;
+    height: 25px;
+    box-shadow: 0 1px 1px rgba(12,13,14,0.15),inset 0 1px 0 0 #fff;
+    display: inline-block;
+    line-height: 1.5px;
+    color: $dark;
+    text-shadow: 0 1px 0 #fff;
+    background-color: #e4e6e8;
+    border: 1px solid #9fa6ad;
+    border-radius: 3px;
+    cursor: pointer;
+    margin: 2px 0;
+
+    p {
+        padding: .2rem;
+        margin: .5rem .2rem;
+        color: $dark;
+    }
+}

themes/secluded/assets/scss/_media.scss 🔗 

@@ -0,0 +1,12 @@
+.content {
+    img {
+        border-radius: 8px;
+        width: 100%;
+        display: block;
+        margin-left: auto;
+        margin-right: auto;
+        margin-top: 15px;
+        margin-bottom: 20px;
+        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    }
+}

themes/secluded/assets/scss/_single.scss 🔗 

@@ -0,0 +1,131 @@
+.toc {
+    padding-bottom: 5px;
+    border-bottom: 2px solid $dark;
+    a {
+        color: $dark;
+        text-decoration: underline;
+    }
+}
+.frontmatter {
+    padding: 15px 0;
+    border-bottom: 2px solid $dark;
+
+    a {
+        color: $dark;
+        text-decoration: none;
+        background-image: linear-gradient(120deg,$gradient-left 0%,$gradient-right 100%);
+        background-repeat: no-repeat;
+        background-size: 0 0;
+        background-position: 100% 21%;
+        transition: .15s ease-out;
+        &:hover {
+            background-size: 100% 100%;
+            color: $light;
+            &:after {
+                color: $gradient-right;
+            }
+        }
+        &::after {
+            position: relative;
+            content: "\FEFF°";
+            margin-left: 0.10em;
+            font-size: 90%;
+            top: -0.10em;
+            color: $light-highlight;
+            font-feature-settings: "caps";
+            font-variant-numeric: normal;
+        }
+    }
+
+    .post-title {
+        margin: 10px 0;
+        a {
+            text-decoration: none;
+            background-image: none;
+            &::after {
+                content: "";
+            }
+            &:hover {
+                background-size: 0 0;
+                color: $dark;
+            }
+        }
+    }
+    p {
+        margin: 0 0;
+    }
+}
+
+.content {
+    h2, h3 {
+        margin-top: 20px;
+        margin-bottom: -10px;
+    }
+    h2, h3, p, li, td {
+        a {
+            color: $dark;
+            text-decoration: none;
+            background-image: linear-gradient(120deg,$gradient-left 0%,$gradient-right 100%);
+            background-repeat: no-repeat;
+            background-size: 0 0;
+            background-position: 100% 21%;
+            transition: .15s ease-out;
+            &:hover {
+                background-size: 100% 100%;
+                color: $light;
+                &:after {
+                    color: $gradient-right;
+                }
+            }
+            &::after {
+                position: relative;
+                content: "\FEFF°";
+                margin-left: 0.10em;
+                font-size: 90%;
+                top: -0.10em;
+                color: $light-highlight;
+                font-feature-settings: "caps";
+                font-variant-numeric: normal;
+            }
+        }
+    }
+    .footnote-ref {
+        background-size: 100% 1.5px;
+        background-position: 0 90%;
+        &::after {
+            content: "";
+        }
+        &:hover {
+            background-size: 100% 100%;
+            color: $light;
+        }
+    }
+    .footnote-backref {
+        background-size: 100% 1.5px;
+        background-position: 0 90%;
+        &::after {
+            content: "";
+        }
+        &:hover {
+            background-size: 100% 100%;
+            color: $light;
+        }
+    }
+    .highlight {
+        a {
+            background-image: none;
+            &::after {
+                content: "";
+            }
+        }
+    }
+    .anchor-tag {
+        font-size: 70%;
+        margin-left: 7px;
+        background-size: 100% 0;
+        background-position: 0 150%;
+        &::after {
+            content: "";
+        }
+    }
+}

themes/secluded/assets/scss/_variables.scss 🔗 

@@ -0,0 +1,8 @@
+$dark: #2f2f2f;
+$light: #fff;
+$button-background: #e4e6e8;
+$button-border: #9fa6ad;
+$dark-highlight: #ff6565;
+$light-highlight: #c6359e;
+$gradient-left: #e96443;
+$gradient-right: #904e95;

themes/secluded/layouts/_default/baseof.html 🔗 

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+    {{- partial "head.html" . -}}
+    <body>
+        {{- partial "header.html" . -}}
+        <div id="content">
+        {{- block "main" . }}{{- end }}
+        </div>
+        {{- partial "footer.html" . -}}
+    </body>
+</html>

themes/secluded/layouts/_default/list.html 🔗 

@@ -0,0 +1,37 @@
+{{ define "main" }}
+<div class="list">
+    <h1>{{ .Title }}</h1>
+    <p>There are RSS feeds for <em>all</em> of the categories and tags on the site. If you want to subscribe to one of them, navigate to that list and <a href="index.xml">click here</a>; you'll be taken to the specific feed.</p>
+    {{ $title := .Title }}
+    {{ if eq $title "Posts" }}
+    <div class="categories">
+        <h2>Categories</h2>
+        {{range ($.Site.GetPage "taxonomyTerm" "categories").Pages }}
+        <a class="button" href="{{.Permalink}}">
+            <p>{{.Title}}</p>
+        </a>
+        {{end}}
+    </div>
+    {{ end }}
+
+    <hr/>
+
+    <div class="posts">
+        <ul class="posts-list">
+            {{- range .Pages }}
+            <li class="posts-item">
+                <a href="{{.Permalink}}">
+                    <span class="posts-title">{{.Title}}</span>
+                    <span class="posts-day">{{ if .Site.Params.dateformShort }}{{ .Date.Format .Site.Params.dateformShort }}{{ else }}{{ .Date.Format "Jan 02"}}{{ end }}</span>
+                </a>
+                <p>{{ .Summary | truncate 140 }}</p>
+                {{ range (.GetTerms "tags") }}
+                <a class="button" href="{{.Permalink}}">
+                    <p>{{.Title}}</p>
+                </a>
+                {{ end }}
+            </li>
+            {{- end }}
+        </ul>
+    </div>
+    {{ end }}

themes/secluded/layouts/_default/rss.xml 🔗 

@@ -0,0 +1,38 @@
+{{- $pctx := . -}}
+{{- if .IsHome -}}{{ $pctx = .Site }}{{- end -}}
+{{- $pages := slice -}}
+{{- if or $.IsHome $.IsSection -}}
+{{- $pages = $pctx.RegularPages -}}
+{{- else -}}
+{{- $pages = $pctx.Pages -}}
+{{- end -}}
+{{- $limit := .Site.Config.Services.RSS.Limit -}}
+{{- if ge $limit 1 -}}
+{{- $pages = $pages | first $limit -}}
+{{- end -}}
+{{- printf "<?xml version=\"1.0\" encoding=\"utf-8\" standalone=\"yes\"?>" | safeHTML }}
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
+  <channel>
+    <title>{{ .Site.Title }}</title>
+    <link>{{ .Permalink }}</link>
+    <description>Recent content {{ if ne  .Title  .Site.Title }}{{ with .Title }}in {{.}} {{ end }}{{ end }}on {{ .Site.Title }}</description>{{ with .Site.LanguageCode }}
+    <language>{{.}}</language>{{end}}{{ with .Site.Author.email }}
+    <managingEditor>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</managingEditor>{{end}}{{ with .Site.Author.email }}
+    <webMaster>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</webMaster>{{end}}{{ with .Site.Copyright }}
+    <copyright>{{.}}</copyright>{{end}}{{ if not .Date.IsZero }}
+    <lastBuildDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</lastBuildDate>{{ end }}
+    {{- with .OutputFormats.Get "RSS" -}}
+    {{ printf "<atom:link href=%q rel=\"self\" type=%q />" .Permalink .MediaType | safeHTML }}
+    {{- end -}}
+    {{ range $pages }}
+    <item>
+      <title>{{ .Title }}</title>
+      <link>{{ .Permalink }}</link>
+      <pubDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</pubDate>
+      {{ with .Site.Author.email }}<author>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</author>{{end}}
+      <guid>{{ .Permalink }}</guid>
+      <description>{{ .Content | html }}</description>
+    </item>
+    {{ end }}
+  </channel>
+</rss>

themes/secluded/layouts/_default/single.html 🔗 

@@ -0,0 +1,23 @@
+{{ define "main" }}
+<div class="wrapper">
+    <article>
+        <div class="frontmatter">
+            <h1 class="post-title"><a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h1>
+            {{- if .GitInfo }}
+            <p><strong>Last edited:</strong> <a href="{{ .Site.Params.gitUrl -}}{{ .GitInfo.Hash }}" target="_blank" rel="noopener">{{ if .Site.Params.dateformNum }}{{ dateFormat .Site.Params.dateformNum .GitInfo.AuthorDate.Local }}{{ else }}{{ dateFormat "2006-01-02" .GitInfo.AuthorDate.Local }}{{ end }}</a></p>
+            {{- end }}
+        </div>
+        {{- if .Params.toc }}
+        <aside id="toc">
+            <div class="toc">
+                <h3 class="toc-title">Table of Contents</h3>
+                {{ .TableOfContents }}
+            </div>
+        </aside>
+        {{- end }}
+        <div class="content">
+            {{ .Content | replaceRE "(<h[1-6] id=\"(.+)\".*>)(.*)(</h[1-6]>)" `${1}${3}<a class="anchor-tag" ariaLabel="Anchor" href="#${2}">¶</a>${4}` | safeHTML }}
+        </div>
+    </article>
+</div>
+{{ end }}

themes/secluded/layouts/index.html 🔗 

@@ -0,0 +1,9 @@
+{{define "main" }}
+<div class="wrapper">
+    <article>
+        <div class="content">
+            {{ .Content | safeHTML }}
+        </div>
+    </article>
+</div>
+{{ end }}

themes/secluded/layouts/partials/head.html 🔗 

@@ -0,0 +1,44 @@
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    {{ block "title" . }}
+    <title>
+        {{ if .IsHome }}
+            {{ $.Site.Title }} {{ with $.Site.Params.Subtitle }} — {{ . }} {{ end }}
+        {{ else }}
+            {{ .Title }} {{ with $.Site.Params.Subtitle }} — {{ . }}{{ end }}
+        {{ end }}
+    </title>
+    {{ end }}
+    <meta name="author" content="{{ $.Site.Params.author }}">
+    <meta name="description" content="{{if .IsHome}}{{ $.Site.Params.description }}{{else}}{{.Description}}{{end}}" />
+    <link rel="canonical" href="{{ .Permalink }}" />
+    <link rel="me" href="{{ $.Site.Params.contact.fediverse }}">
+    <link rel="me" href="{{ $.Site.Params.contact.email }}">
+    <meta http-equiv="X-Clacks-Overhead" content="GNU Terry Pratchett{{ range .Site.Params.clacks }}, {{ . }}{{end}}" />
+
+    <!-- Social: Twitter -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="{{ if .IsHome }}{{ $.Site.Title }}{{ with $.Site.Params.Subtitle }} — {{ . }}{{ end }}{{ else }}{{ .Title }}{{ with $.Site.Params.Subtitle }} — {{ . }}{{ end }}{{ end }}" />
+    <meta name="twitter:description" content="{{if .IsHome}}{{ $.Site.Params.description }}{{else}}{{.Description}}{{end}}"/>
+    <meta name="twitter:image" content="{{ if .IsHome }}{{ .Site.Params.cover }}{{ else }}{{ .Params.Cover }}{{ end }}" />
+
+    <!-- Social: OpenGraph -->
+    <meta property="og:locale" content="en_GB">
+    <meta property="og:type" content="article">
+    <meta property="og:title" content="{{ .Title }}">
+    <meta property="og:description" content="{{if .IsHome}}{{ $.Site.Params.description }}{{else}}{{.Description}}{{end}}">
+    <meta property="og:url" content="{{ .Permalink }}">
+    <meta property="og:site_name" content="{{ $.Site.Title }}">
+    <meta property="og:image" content="{{ if .IsHome }}{{ .Site.Params.cover }}{{ else }}{{ .Params.Cover }}{{ end }}" />
+
+    <!-- Styles -->
+    {{ $options := (dict "outputStyle" "compressed" "enableSourceMap" true) }}
+    {{ $scss := resources.Get "scss/imports.scss" }}
+    {{ $style := $scss | resources.ToCSS $options }}
+    <link rel="preload" href="{{ $style.RelPermalink }}" as="style">
+    <link rel="stylesheet" href="{{ $style.RelPermalink }}">
+
+    {{ partialCached "favicons.html" . }}
+</head>

themes/secluded/layouts/partials/header.html 🔗 

@@ -0,0 +1,11 @@
+<div class="title-wrapper">
+    <span class="title"><a href="{{ .Site.BaseURL }}">{{ $.Site.Title }}</a></span>
+    <span class="menu">
+        <ul>
+        {{- $currentPage := . -}}
+        {{ range .Site.Menus.main -}}
+            <li><a href="{{ .URL | absLangURL }}">{{ .Name }}</a></li>
+        {{- end }}
+        </ul>
+    </span>
+</div>