commit dbe99605e98a54bb5ecc48f65a5189a752f0eeac Author: Yuri Zamyatin Date: Sat Jun 8 22:47:06 2024 +0400 init diff --git a/README.md b/README.md new file mode 100644 index 0000000..48e6434 --- /dev/null +++ b/README.md @@ -0,0 +1,5 @@ +# My Hugo theme + +Some styling and general logic of my website, separated from content. No extra abstractions. + +Templates to copy are in the `init` directory. \ No newline at end of file diff --git a/archetypes/default.md b/archetypes/default.md new file mode 100644 index 0000000..00041a2 --- /dev/null +++ b/archetypes/default.md @@ -0,0 +1,10 @@ +--- +linkTitle: "{{ .File.BaseFileName | humanize | lower }}" +title: "{{ .File.BaseFileName | humanize }}" +description: +{{replaceRE "/.*" "" .File.Path}}/tags: [] +toc: false +draft: true +publishDate: "{{ now.UTC.Format "2006-01-02T15:04:05Z" }}" +lastMod: "{{ now.UTC.Format "2006-01-02T15:04:05Z" }}" +--- diff --git a/assets/css/classic-layout.scss b/assets/css/classic-layout.scss new file mode 100644 index 0000000..398e3ec --- /dev/null +++ b/assets/css/classic-layout.scss @@ -0,0 +1,182 @@ +/* + Classic view: header, main and footer block. Aside column is possible. + Details depend on section. +*/ +.classic-layout-container { + display: flex; + flex-direction: column; + height: 100%; + header, + footer { + padding: $base-margin-y $base-margin-x; + .content { + max-width: $base-width; + margin: 0 auto; + } + } + header { + background: linear-gradient( + 135deg, + $bg-accent-color-light 0%, + $bg-accent-color-dark 100% + ); + .content { + & > :last-child { + margin-bottom: 0 !important; + } + } + } + main { + flex: 1 0 auto; + } + footer { + flex-shrink: 0; + .content { + text-align: center; + } + } +} + +/* section specific - list of classic */ +.classic-layout-container main .content.list { + padding: $base-margin-y $base-margin-x; + .main-container { + .list-container { + max-width: $base-width; + margin: 0 auto; + ul { + padding-left: 1rem; + } + .list-item-container { + margin: 0.2rem 0; + .list-item-a-wrapper { + text-decoration: none; + .list-item { + display: inline-block; + vertical-align: middle; + padding: 0.5rem 0 0.5rem 0.5rem; + line-height: 1.5; + .summary, + .pub-date { + color: $fg-color-dark; + } + .title { + font-weight: bold; + } + } + } + } + } + .paginator { + margin: $base-margin-y 0 0 0; + } + } +} + +/* section specific - single of classic */ +.classic-layout-container header .content.post { + .pub-date { + color: $fg-color-semitransp; + margin: 1em 0; + } +} +.classic-layout-container main .content.post { + .nav-block { + .toc-title { + text-align: center; + margin-top: $base-margin-y; + } + nav { + overflow-wrap: break-word; + overflow-y: auto; + ul { + padding: 0 0 0 1rem; // 1rem is the browser defined bullet offset + } + } + } + .main-container { + margin: $base-margin-y $base-margin-x; + } +} +@mixin media--classic-main-content-post_1col { + .classic-layout-container main .content.post { + .nav-block { + nav { + max-height: 50vh; + background-color: $bg-accent-color-dark; + padding: $base-margin-y $base-margin-x; + border: 2px solid $bg-accent-color-light; + } + } + .main-container { + margin: $base-margin-y * 2 $base-margin-x $base-margin-y $base-margin-x; + } + } +} +@mixin media--classic-main-content-post_2col { + .classic-layout-container main .content.post { + display: flex; + .aside-container { + display: flex; + .nav-block { + margin: $base-margin-y 0 0 $base-margin-x; + max-width: 20.5rem; + min-width: 0; + nav { + padding: 0.5rem 0.5rem 0.5rem 0; + position: sticky; + top: 0; + max-height: 100vh; + scrollbar-width: thin; + &, + a { + color: $fg-color-dark; + } + a:hover { + color: $fg-color; + } + } + scrollbar-color: transparent transparent; + &:hover { + scrollbar-color: rgba($fg-color-dark, 0.6) transparent; + } + } + } + .main-container { + margin: $base-margin-y $base-margin-x; + article { + max-width: $base-width; + margin: 0 auto; + } + } + } +} +@mixin media--classic-main-content-post-2col_narrow { + .classic-layout-container main .content.post { + .aside-container { + min-width: 0; + flex: 0 1 auto; + } + .main-container { + min-width: 0; + flex: 1 1 auto; + } + } +} +@mixin media--classic-main-content-post-2col_wide { + .classic-layout-container main .content.post { + &::after { + content: ""; + min-width: 0; + flex: 1; + } + .aside-container { + min-width: 0; + flex: 1; + } + .main-container { + min-width: 0; + flex: 0 1 $base-width; + } + } +} diff --git a/assets/css/home-layout.scss b/assets/css/home-layout.scss new file mode 100644 index 0000000..19dae72 --- /dev/null +++ b/assets/css/home-layout.scss @@ -0,0 +1,150 @@ +.home-layout-container { + display: flex; + height: 100%; + .content.home { + flex: 0 0 100%; + margin: auto 0; + .about-container { + background: linear-gradient( + 135deg, + $bg-accent-color-light 0%, + $bg-accent-color-dark 100% + ); + padding: $base-margin-y $base-margin-x; + } + .bottom-container { + margin: $base-margin-y $base-margin-x; + .bottom-block { + max-width: $base-width; + margin: 0 auto; + text-align: center; + } + } + } +} + +.home-layout-container .content.home .about-block { + max-width: $base-width; + margin: 0 auto; + display: flex; + flex-wrap: wrap; + flex-direction: row-reverse; + align-items: center; + justify-content: center; + gap: $base-margin-y $base-margin-x; + .info-container { + flex: 1; + h1 { + text-align: center; + margin-top: 0; + } + .pgp { + margin: 1em 0; + display: flex; + align-items: center; + column-gap: 0.8rem; + .icon { + height: 1.5rem; + width: 1.5rem; + color: $fg-color-semitransp; + &:hover { + color: $fg-accent-color; + } + } + .text { + color: $fg-color-dark; + } + } + .links { + display: flex; + justify-content: center; + column-gap: 1rem; + .icon { + height: 2rem; + width: 2rem; + color: $fg-color-semitransp; + &:hover { + color: $fg-accent-color; + } + } + } + } + .image-container { + flex: 0 1 30%; + img { + display: block; + width: 100%; + background: rgba(#000, 0.2); + border-radius: 0.5rem; + } + } +} + +.home-layout-container .content.home .section-list { + display: flex; + justify-content: center; + flex-wrap: wrap; + gap: 0.5rem; + .section-item { + white-space: nowrap; + text-decoration: none; + &:hover { + color: $fg-color; + border: 1px solid $fg-accent-color; + } + display: block; + flex: 1 0 30%; + border: 1px solid $fg-color-semitransp; + border-radius: 1rem; + text-align: center; + padding: 1rem; + .icon { + height: 2.5rem; + width: 2.5rem; + vertical-align: middle; + color: $fg-color-semitransp; + } + .label { + font-size: 1.3rem; + vertical-align: middle; + margin: 0 0 0 0.5rem; + } + } +} + +.home-layout-container .content.home .notice { + margin: $base-margin-y 0 0 0; + color: $fg-color-semitransp; +} + +@mixin media--home-content-about_vert_top { + .home-layout-container .content.home .about-block { + .image-container { + flex-basis: 10rem; + } + .info-container { + flex-basis: 100%; + } + } +} +@mixin media--home-content-about_vert_middle { + .home-layout-container { + .content.home { + .about-container { + padding: $base-margin-y * 2 $base-margin-x; + } + } + } + .home-layout-container .content.home .section-list { + .section-item .label { + font-size: 1.6rem; + } + } +} +@mixin media--home-content-about_vert_middle_wide { + .home-layout-container .content.home .section-list { + .section-item .label { + font-size: 1.8rem; + } + } +} diff --git a/assets/css/index.scss b/assets/css/index.scss new file mode 100644 index 0000000..95d3df1 --- /dev/null +++ b/assets/css/index.scss @@ -0,0 +1,208 @@ +$bg-color: #0d1117; +$fg-color: #fff; +$fg-color-dark: #b8bcc1; +$fg-color-semitransp: rgba(#fff, 0.55); +$bg-accent-color-dark: #020030; +$bg-accent-color-light: #510079; +$fg-accent-color: #98f; + +$base-margin-x: 1rem; +$base-margin-y: 1rem; +$base-width: 50rem; +$base-font-size: 16px; + +/* If style is modified in a certain context, other uses must not inherit from user agent stylesheet */ + +/* elements */ +* { + box-sizing: border-box; +} +/* prettier-ignore */ +html,body,ul,ol,li,blockquote,pre,hr { + margin: 0; + padding: 0; +} +/* prettier-ignore */ +h1,h2,h3,h4,h5,h6 { + margin: 0.5em 0; + padding: 0; +} +html { + font-size: 16px; + height: 100%; + scroll-behavior: smooth; + scrollbar-color: rgba($fg-accent-color, 0.6) transparent; + line-height: 1.3; +} +body { + height: 100%; + background-color: $bg-color; + color: $fg-color; +} +a { + color: $fg-color; + &:hover { + color: $fg-accent-color; + } +} +p { + margin: 1em 0; + line-height: 1.5; +} + +/* generic */ +.paginator { + text-align: center; + .button { + display: inline-block; + margin: 0; + padding: 0.2rem 0; + min-width: 2rem; + text-decoration: none; + background: $bg-accent-color-dark; + &.current { + background: $bg-accent-color-light; + } + } +} +.taxo-list { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + margin: 1em 0; + .button { + display: inline-block; + padding: 0.1rem 1rem; + border: 1px solid $fg-color-semitransp; + border-radius: 0.25rem; + text-decoration: none; + &:hover { + border: 1px solid $fg-accent-color; + color: $fg-color; + } + } +} +.icon { + display: inline-block; + svg { + height: 100%; + } +} +.icon-a-wrapper { + // if icon is inside link, eliminate inline line-height artifacts + display: inline-block; + .icon { + display: block; + } +} + +@import "classic-layout.scss"; +@import "home-layout.scss"; + +/* markdown */ +article { + overflow-wrap: break-word; + & > :first-child { + margin-top: $base-margin-y !important; + } + pre { + background: $bg-accent-color-dark !important; + overflow-x: auto; + padding: 1rem; + font-size: 0.875rem; + border: 1px solid $bg-accent-color-light; + margin: 1em 0; + scrollbar-color: rgba($fg-accent-color, 0.2) transparent; + &:hover { + scrollbar-color: rgba($fg-accent-color, 0.6) transparent; + } + transition: 0.1s all; + } + h2 code, + p code, + li code { + color: $fg-accent-color; + font-weight: bold; + } + p img, + li img { + width: 100%; + border: 1px solid $bg-accent-color-light; + } + blockquote { + border-left: 0.5rem solid $bg-accent-color-light; + background: $bg-accent-color-dark; + padding: 0.5rem; + p { + margin: 0; + } + margin: 0.5em 0; + } + ul, + ol { + padding-left: 2rem; + li { + margin: 0.5em 0; + line-height: 1.5; + } + } + & > ul, + ol { + margin: 1em 0; + } + h1, + h2, + h3, + h4, + h5, + h6 { + margin: 1.5em 0 0.5em 0; + } +} + +/* media */ +@mixin screen-w($mode, $rem1, $rem2: "") { + @if $mode== "less" { + @media screen and(max-width: ($rem1 / 1rem * $base-font-size - 0.02px)) { + @content; + } + } + @if $mode== "more" { + @media screen and(min-width: ($rem1 / 1rem * $base-font-size)) { + @content; + } + } + @if $mode== "between" { + @media screen and(min-width: ($rem1 / 1rem * $base-font-size)) and (max-width: ($rem2 / 1rem * $base-font-size - 0.02px)) { + @content; + } + } +} +$base-width-with-margin: $base-width + $base-margin-x * 2; +$post-2col-nav-block-max-width: 20.5rem + 1rem + 0.5rem; +@include screen-w("less", 35rem + $base-margin-x * 2) { + @include media--home-content-about_vert_top(); +} +@include screen-w("more", 35rem + $base-margin-x * 2) { + @include media--home-content-about_vert_middle(); +} +@include screen-w("less", $base-width-with-margin) { + @include media--classic-main-content-post_1col(); +} +@include screen-w("more", $base-width-with-margin) { + @include media--classic-main-content-post_2col(); + @include media--home-content-about_vert_middle_wide(); +} +@include screen-w( + "between", + $base-width-with-margin, + $base-width-with-margin + $post-2col-nav-block-max-width * 2 + 5rem +) { + @include media--classic-main-content-post_2col_narrow(); +} +@include screen-w( + "more", + $base-width-with-margin + $post-2col-nav-block-max-width * 2 + 5rem +) { + @include media--classic-main-content-post_2col_wide(); +} diff --git a/assets/icons/solid/download.svg b/assets/icons/solid/download.svg new file mode 100644 index 0000000..0375764 --- /dev/null +++ b/assets/icons/solid/download.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/init/content_list_index.md b/init/content_list_index.md new file mode 100644 index 0000000..9d06c8e --- /dev/null +++ b/init/content_list_index.md @@ -0,0 +1,4 @@ +--- +linkTitle: "name" +Title: "Long name" +--- diff --git a/init/content_root_index.md b/init/content_root_index.md new file mode 100644 index 0000000..38140ea --- /dev/null +++ b/init/content_root_index.md @@ -0,0 +1,21 @@ +--- +linkTitle: home +title: +description: +image: + link: + ratio: 1/1 # x/y +pgp: + fingerprint: + link: +contacts: + - link: + icon: + # ... +sections: + - name: + link: + icon: + # ... +notice: +--- diff --git a/init/hugo.yaml b/init/hugo.yaml new file mode 100644 index 0000000..1138f9a --- /dev/null +++ b/init/hugo.yaml @@ -0,0 +1,24 @@ +theme: yrzam + +# SITE INFO +baseURL: +title: +languageCode: +taxonomies: + # Create these per each section&taxo, replacing section + # with section name and taxo with taxonomy name + section_taxo: section/taxo + +# SITE SETTINGS +params: + dateFormat: "2006-01-02T15:04:05Z" + dateFormatShort: "2006-01-02" + paginationAdjacentLinks: 2 +paginate: 50 + +# GENERATOR SETTINGS +capitalizeListTitles: false +disableHugoGeneratorInject: true +disableKinds: [RSS, sitemap, taxonomy] +minify: + minifyOutput: false \ No newline at end of file diff --git a/layouts/404.html b/layouts/404.html new file mode 100644 index 0000000..0ef4635 --- /dev/null +++ b/layouts/404.html @@ -0,0 +1,7 @@ +{{ define "header" }} +
+ {{ partial "page_path.html" . }} +

Not found

+

Page has been deleted or did not exist.

+
+{{ end }} diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html new file mode 100644 index 0000000..dfd1cc6 --- /dev/null +++ b/layouts/_default/baseof.html @@ -0,0 +1,29 @@ + + + + + + + {{ if not .IsHome }}{{ .Title }} - {{ end }}{{ .Site.Title }} + {{ $opts := dict "transpiler" "libsass" "targetPath" "style.css" }} + {{ with resources.Get "css/index.scss" | toCSS $opts | minify | fingerprint }} + + {{ end }} + + + + {{ block "body" . }} +
+
+ {{ block "header" . }}{{ end }} +
+
+ {{ block "main" . }}{{ end }} +
+
+ {{ block "footer" . }}{{ end }} +
+
+ {{ end }} + + diff --git a/layouts/_default/index.html b/layouts/_default/index.html new file mode 100644 index 0000000..9c268ed --- /dev/null +++ b/layouts/_default/index.html @@ -0,0 +1,42 @@ +{{ define "body" }} +
+
+
+
+
+ +
+
+

{{ .Title }}

+

{{ .Description }}

+
+ {{ partial "icon.html" "solid/download" }} + {{ .Params.pgp.fingerprint }} +
+
+ {{- range .Params.contacts -}} + {{- partial "icon.html" .icon -}}{{- print "" -}} + {{- end -}} +
+
+
+
+
+
+
+ {{- range .Params.sections -}} + + {{ partial "icon.html" .icon }} + {{ .name }} + + {{- end -}} +
+
{{ .Params.notice }}
+
+
+
+
+{{ end }} diff --git a/layouts/_default/list.html b/layouts/_default/list.html new file mode 100644 index 0000000..1c662dd --- /dev/null +++ b/layouts/_default/list.html @@ -0,0 +1,40 @@ +{{- define "header" -}} +
+ {{ partial "page_path.html" . }} + {{ if .Title }}

{{ .Title }}

{{ end }} + {{ partial "taxo_of_list.html" . }} +
+{{- end -}} + +{{- define "main" -}} +
+
+ + {{ partial "pagination.html" . }} +
+
+{{- end -}} + +{{ define "footer" }} + +{{ end }} diff --git a/layouts/_default/single.html b/layouts/_default/single.html new file mode 100644 index 0000000..cf03069 --- /dev/null +++ b/layouts/_default/single.html @@ -0,0 +1,37 @@ +{{- define "header" -}} +
+ {{ partial "page_path.html" . }} + {{ if .Title }}

{{ .Title }}

{{ end }} + {{ if .Description }}

{{ .Description }}

{{ end }} + {{ partial "taxo_of_single.html" . }} +
+ mtime={{ .Lastmod.Format .Site.Params.dateFormat }} + archived={{ default false .Params.archived }} +
+
+{{- end -}} + +{{- define "main" -}} +
+
+ {{ if .Param "toc" }} +
+

TABLE OF CONTENTS

+ {{ .TableOfContents }} +
+ {{ end }} +
+
+
+ {{ .Content }} +
+
+
+{{- end -}} + +{{- define "footer" -}} + +{{- end -}} diff --git a/layouts/_default/taxonomy.html b/layouts/_default/taxonomy.html new file mode 100644 index 0000000..a25a019 --- /dev/null +++ b/layouts/_default/taxonomy.html @@ -0,0 +1,33 @@ +{{- define "header" -}} +
+ {{ partial "page_path.html" . }} +

{{ ($.Site.GetPage (replaceRE "/.*?$" "" .Data.Plural )).Title }}: {{ .Title }}

+
+{{- end -}} + +{{- define "main" -}} +
+
+ + {{ partial "pagination.html" . }} +
+
+{{- end -}} diff --git a/layouts/partials/icon.html b/layouts/partials/icon.html new file mode 100644 index 0000000..854b69d --- /dev/null +++ b/layouts/partials/icon.html @@ -0,0 +1,7 @@ + + {{- $fname:=print "assets/icons/" . ".svg" -}} + {{- $path:=" +{{- /**/ -}} diff --git a/layouts/partials/page_path.html b/layouts/partials/page_path.html new file mode 100644 index 0000000..eba817c --- /dev/null +++ b/layouts/partials/page_path.html @@ -0,0 +1,16 @@ + +{{- /**/ -}} diff --git a/layouts/partials/pagination.html b/layouts/partials/pagination.html new file mode 100644 index 0000000..d159f35 --- /dev/null +++ b/layouts/partials/pagination.html @@ -0,0 +1,57 @@ +{{- if gt $.Paginator.TotalPages 1 -}} + +{{- end -}} +{{- /**/ -}} diff --git a/layouts/partials/taxo_of_list.html b/layouts/partials/taxo_of_list.html new file mode 100644 index 0000000..60bde74 --- /dev/null +++ b/layouts/partials/taxo_of_list.html @@ -0,0 +1,10 @@ +{{- range $taxonomy, $term_set := .Site.Taxonomies -}} + {{- if hasPrefix $taxonomy (replaceRE "^/" "" $.Page.RelPermalink) -}} + + {{- end -}} +{{- end -}} +{{- /**/ -}} diff --git a/layouts/partials/taxo_of_single.html b/layouts/partials/taxo_of_single.html new file mode 100644 index 0000000..0b08188 --- /dev/null +++ b/layouts/partials/taxo_of_single.html @@ -0,0 +1,12 @@ +{{- range $taxonomy, $_ := .Site.Taxonomies -}} + {{- if $.GetTerms $taxonomy -}} + + {{- end -}} +{{- end -}} +{{- /**/ -}} diff --git a/layouts/shortcodes/icon.html b/layouts/shortcodes/icon.html new file mode 100644 index 0000000..a797db5 --- /dev/null +++ b/layouts/shortcodes/icon.html @@ -0,0 +1,7 @@ + + {{- $fname:=print "assets/icons/" ( .Get 0 ) ".svg" -}} + {{- $path:=" +{{- /**/ -}}