diff options
| -rw-r--r-- | README.md | 16 | ||||
| -rw-r--r-- | assets/stylesheets/highlight.css (renamed from static/stylesheets/highlight.css) | 0 | ||||
| -rw-r--r-- | assets/stylesheets/style.css (renamed from static/stylesheets/style.css) | 164 | ||||
| -rw-r--r-- | layouts/_default/baseof.html | 13 | ||||
| -rw-r--r-- | layouts/_default/single.html | 24 | ||||
| -rw-r--r-- | layouts/partials/footer-content.html (renamed from layouts/partials/theme-copyright.html) | 0 | ||||
| -rw-r--r-- | layouts/shortcodes/img.html | 5 | ||||
| -rw-r--r-- | static/icons/rss_feed_24dp_78A75A_FILL0_wght400_GRAD0_opsz24.svg | 1 |
8 files changed, 143 insertions, 80 deletions
@@ -1,17 +1,15 @@ # TJKBasic Hugo Theme -This is the hugo theme used on [tjkeller.xyz](https://tjkeller.xyz). -The theme was made from scratch. +This is the Hugo theme used on [tjkeller.xyz](https://tjkeller.xyz). +The theme was made from scratch, but still benefited from the availability from other open themes to reference. -This is really just meant as a reference for those who would like to replicate some features from my site. -I would prefer if you did not just copy + paste my theme on your own site. +This theme is made available as a reference for those who would like to replicate some features from my site. +Starting from scratch comes with many benefits, so you're better off not building off of this theme as a starting point. +To be clear, I would prefer if you did not just copy + paste my theme for your own site. Nobody likes a copycat, so that would be lame! -I wouldn't even recommend using it as a starting point to build off of since I believe that I have benefited greatly by starting from scratch. -However, I still believe that having it up as a reference could be useful for those who would like to start from scratch, but are having difficulty implementing specific features, etc. - -Because of that, I am hereby graciously releasing this theme unto the unwashed, liberal masses under the GPLv3 licence! -I am entrusting you (the public) to more or less respect my wishes, but I of course don't mind if you copy certain portions, etc. so long as you don't rip off my entire site. +With that being said, I hereby (graciously) release this theme unto the unwashed, liberal masses under the GPLv3 license! +I am entrusting you (the public) to more or less respect my wishes, just don't rip off my entire site if you can help it. Also, check out the `hugo.yaml` file. It contains some settings that you need to include in your main `hugo.yaml` to make it function correctly for some reason. diff --git a/static/stylesheets/highlight.css b/assets/stylesheets/highlight.css index 5efc353..5efc353 100644 --- a/static/stylesheets/highlight.css +++ b/assets/stylesheets/highlight.css diff --git a/static/stylesheets/style.css b/assets/stylesheets/style.css index 4c32ae3..05f0b5e 100644 --- a/static/stylesheets/style.css +++ b/assets/stylesheets/style.css @@ -2,13 +2,15 @@ html { background: #222; } body { - margin: 0 0 1.5em 0; + margin: 0; color: white; font-family: "Noto Serif", serif; text-underline-offset: 2.25px; overflow-x: hidden; + line-height: 1.35; } +/* header */ header { display: grid; grid-template-columns: 1fr auto 1fr; @@ -18,6 +20,7 @@ header { user-select: none; position: sticky; top: 0; + z-index: 100 } #title { @@ -32,14 +35,17 @@ header { header a { color: white; - text-decoration: none; position: relative; width: fit-content; } +header a:hover { + text-decoration: none; +} + header a:hover::after { content: ""; - background: green; + background: #309a00; position: absolute; display: block; bottom: -.3em; @@ -48,6 +54,7 @@ header a:hover::after { width: calc(100% + 2ex); } +/* page */ main, footer{ max-width: 900px; margin: 1.5em auto; @@ -58,10 +65,18 @@ main, footer{ text-align: right; color: #555; } -#publishing a { - color: #555; +#publishing a { color: #555 } +#publishing a:not(:last-child)::after { content: "," } + +footer span, +#copyright, #theme-copyright { + text-align: center; + display: block; + margin: .25em; + color: #6a6a6a; } +/* elements */ hr { color: #555; margin: 2em 0; @@ -71,79 +86,62 @@ h1, h2, h3, h4, h5, h6 { text-align: center; } -.monodate { - font-family: monospace; -} - -.bold { - font-weight: bold; -} - a { color: lightgreen; + text-decoration: none; } -/* highlighted code */ -.chroma { - background: none; +a:hover { + text-decoration: underline; } -div.chroma { - overflow: scroll; +/* essays */ +.essay { + font-size: 1.15em; + margin-inline: auto; + max-width: 80ch; + line-height: 1.6; } -.chroma .lntable { - margin: auto; - width: fit-content; -} -.chroma code { - margin: 0 1ex; +.essay p { + text-indent: 4ch; } -.chroma ::selection { - background: #444; +.essay blockquote { + font-style: italic; } -:not(.chroma span)::selection { - background: green; - color: white; +.essay blockquote p::before { + content: "“"; + font-size: 1.5em; } -pre { - tab-size: 4; - -webkit-text-size-adjust: 100%; - overflow: scroll; +.essay sup { + font-size: .6em; } -ol, ul, pre code { - margin: auto; - display: block; - width: fit-content; - max-width: 100%; -} +.essay sup a::before { content: "[" } +.essay sup a::after { content: "]" } -.alpha-ol ol { - list-style-type: lower-alpha; +/*.footnotes ol { + columns: 2 auto; + column-gap: 3em; } +.footnotes ol li { + break-inside: avoid; +}*/ + +/* images */ img, figcaption { margin: auto; display: block; width: fit-content; - max-width: 95%; + max-width: 60%; color: #ddd; } -#copyright, #theme-copyright { - text-align: center; - display: block; - opacity: .2; -} - -.overflow-box { - overflow: scroll; -} - +/* tables */ table { border-collapse: collapse; } @@ -170,6 +168,62 @@ td.img { border: none; } +/* highlighted code */ +.chroma { + background: none; +} + +div.chroma { + overflow: scroll; +} + +.chroma .lntable { + margin: auto; + width: fit-content; +} +.chroma code { + margin: 0 1ex; +} + +.chroma ::selection { + background: #444; +} + +:not(.chroma span)::selection { + background: green; + color: white; +} + +pre { + tab-size: 4; + -webkit-text-size-adjust: 100%; + overflow: scroll; +} + +ol, ul, pre code { + margin: auto; + display: block; + width: fit-content; + max-width: 100%; +} + +/* youtube iframe shortcode */ +div.yt-4x3 iframe { + display: block; + aspect-ratio: 4/3; + max-width: 600px; + width: 100%; + margin: 2em auto; + border: 0; +} + +/* utility classes */ +.monodate, .monospace { font-family: monospace } +.bold { font-weight: bold } +.nowrap { white-space: nowrap } +.overflow-box { overflow: scroll } +.alpha-ol ol { list-style-type: lower-alpha } + @media (max-width: 1000px) { header { grid-template-columns: auto auto; @@ -188,4 +242,10 @@ td.img { ol, ul, pre code { margin-left: 0; } + img, figcaption { + max-width: 95%; + } + .essay { + font-size: inherit; + } } diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 18ea135..974affa 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -6,8 +6,12 @@ <title>{{ $title | title }}</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"> - <link rel="stylesheet" type="text/css" href="/stylesheets/highlight.css"> - <link rel="stylesheet" type="text/css" href="/stylesheets/style.css"> + {{ $css := resources.Match "stylesheets/*.css" | resources.Concat "style.css" | minify | fingerprint }} + <link rel="stylesheet" href="{{ $css.Permalink }}"> + {{ with $.Resources.GetMatch "**.css*" }} + {{ $style := . | minify | fingerprint }} + <link type=text/css rel="stylesheet" href="{{ $style.Permalink }}"> + {{ end }} {{- block "head" . }}{{- end }} </head> <body> @@ -25,13 +29,10 @@ </main> <footer> <hr> - <div id="sharing"> - <a><img src="/icons/rss_feed_24dp_78A75A_FILL0_wght400_GRAD0_opsz24.svg" /></a> - </div> {{ if .Site.Params.copyright.include }} <span id="copyright">© {{ time.Now.Year }} {{ .Site.Params.copyright.name }} – {{ .Site.Params.copyright.type }}</span> {{ end }} - {{ partial "theme-copyright.html" . }} + {{ partial "footer-content.html" . }} </footer> </body> </html> diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 099d3fc..035d589 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -1,18 +1,20 @@ {{ define "main" }} <div id="publishing"> +{{ if ne .Date (time "0001-01-01") }} <span>{{ .PublishDate | time.Format ":date_long" }}</span> - {{ if and (isset .Params "lastmod") (ne .Lastmod .PublishDate) }} - <br> - <span>Revised: {{ .Lastmod | time.Format ":date_long" }}</span> - {{ end }} - {{ if isset .Params "tags" }} - <br> - <span>Tags:</span> - {{- range sort .Params.tags }} - <a href="/tags/{{ . }}">{{ . | humanize | title }}</a> - {{- end }} - {{ end }} +{{ end }} +{{ if and (isset .Params "lastmod") (ne .Lastmod .PublishDate) }} + <br> + <span>Revised: {{ .Lastmod | time.Format ":date_long" }}</span> +{{ end }} +{{ if isset .Params "tags" }} + <br> + <span>Tags:</span> + {{- range sort .Params.tags }} + <a href="/tags/{{ . }}">{{ . | humanize | title }}</a> + {{- end }} +{{ end }} </div> {{ .Content }} diff --git a/layouts/partials/theme-copyright.html b/layouts/partials/footer-content.html index b97de5f..b97de5f 100644 --- a/layouts/partials/theme-copyright.html +++ b/layouts/partials/footer-content.html diff --git a/layouts/shortcodes/img.html b/layouts/shortcodes/img.html index 56bf22f..a57e1ed 100644 --- a/layouts/shortcodes/img.html +++ b/layouts/shortcodes/img.html @@ -4,6 +4,7 @@ <!-- Get parameters --> {{- $alt := .Get "alt" | default "" -}} +{{- $caption := .Get "caption" | default "" -}} {{- $rotation := .Get "rotation" | default 0 -}} <!-- Get quality --> @@ -30,5 +31,7 @@ <figure> <img src="{{ $image.RelPermalink }}" title="{{ $alt }}" alt="{{ $alt }}" /> - <figcaption>{{ $alt }}</figcaption> + {{- if ne $caption "" -}} + <figcaption>{{ $caption }}</figcaption> + {{- end -}} </figure> diff --git a/static/icons/rss_feed_24dp_78A75A_FILL0_wght400_GRAD0_opsz24.svg b/static/icons/rss_feed_24dp_78A75A_FILL0_wght400_GRAD0_opsz24.svg deleted file mode 100644 index 01addb0..0000000 --- a/static/icons/rss_feed_24dp_78A75A_FILL0_wght400_GRAD0_opsz24.svg +++ /dev/null @@ -1 +0,0 @@ -<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#78A75A"><path d="M200-120q-33 0-56.5-23.5T120-200q0-33 23.5-56.5T200-280q33 0 56.5 23.5T280-200q0 33-23.5 56.5T200-120Zm480 0q0-117-44-218.5T516-516q-76-76-177.5-120T120-680v-120q142 0 265 53t216 146q93 93 146 216t53 265H680Zm-240 0q0-67-25-124.5T346-346q-44-44-101.5-69T120-440v-120q92 0 171.5 34.5T431-431q60 60 94.5 139.5T560-120H440Z"/></svg>
\ No newline at end of file |
