From 708bc19825122d9419c536a6ec0b3a47d14e95e4 Mon Sep 17 00:00:00 2001 From: nieregularnik Date: Wed, 21 Aug 2024 09:31:06 +0200 Subject: [PATCH] New features I edited CSS to: 1. I added new styles (not only light and dark). 2. I edited the .toc part. Color of border around TOC should be matching style of theme. Before that it was seted to black no matter what. 3. The same story about "higlight". 4. I added shortcode to support HTML details tag. I also added draft post to show how it's working. 5. I edited baseof.html to add footer. --- assets/css/main.scss | 43 +++++++++++++++++++++------ content/posts/test-toc-and-details.md | 40 +++++++++++++++++++++++++ data/menu.toml | 4 +-- layouts/_default/baseof.html | 1 + layouts/footer.md | 2 ++ layouts/partials/footer.html | 2 ++ layouts/shortcodes/details.html | 6 ++++ 7 files changed, 86 insertions(+), 12 deletions(-) create mode 100644 content/posts/test-toc-and-details.md create mode 100644 layouts/footer.md create mode 100644 layouts/partials/footer.html create mode 100644 layouts/shortcodes/details.html diff --git a/assets/css/main.scss b/assets/css/main.scss index 3974b1c..c2cb988 100644 --- a/assets/css/main.scss +++ b/assets/css/main.scss @@ -1,5 +1,5 @@ // -------------- THEME SWITCHER -------------- // -@mixin theme($--bg-color, $--primary-text-color, $--secondary-text-color, $--link-color, $--visited-link-color) { +@mixin theme($--bg-color, $--primary-text-color, $--secondary-text-color, $--link-color, $--visited-link-color, $--highlight) { background-color: $--bg-color; color: $--primary-text-color; @@ -7,30 +7,58 @@ a { color: $--link-color; text-decoration: none; - &:visited { color: $--visited-link-color; } &:hover { text-decoration: underline; } } + details summary { + color: $--link-color; + text-decoration: none; + } + code:not(pre > code) { background-color: $--primary-text-color; color: $--bg-color; } + *:target { + background: $--highlight; + color: $--primary-text-color; + } + + table, th, td { + border: thin solid $--primary-text-color; + + } + .toc { + border: thin solid $--link-color; + padding: 1rem; + } + figcaption { color: $--secondary-text-color; } } + @mixin dark-appearance { - @include theme(#212121, #fafafa, #eeeeee, #0071bc, #a359e9); + @include theme(#212121, #fafafa, #000000, #0071bc, #a359e9, #FFFF00); } @mixin light-appearance { - @include theme(#ffffff, #212121, #666666, #1e70bf, #921292); + @include theme(#ffffff, #212121, #666666, #1e70bf, #921292, #FFFF00); +} + +@mixin clean-appearance { + @include theme(#fbfbfb, #212121, #dfedff, #0066ff, #0066ff, #C3D3FF); +} + +@mixin retro-appearance { + @include theme(#000a1a, #c4ffc6, #161616, #c0ff00, #c0ff00, #007A35); } body[a="dark"] { @include dark-appearance; } body[a="light"] { @include light-appearance; } - +body[a="clean"] { @include clean-appearance; } +body[a="retro"] { @include retro-appearance; } @media (prefers-color-scheme: dark) { body[a="auto"] { @include dark-appearance; } @@ -55,7 +83,7 @@ body { .post-meta { text-align: right; } -h2, h3, h4, h5, h6 { margin-top: 3rem; } +h2, h3, h4, h5, h6 { margin-top: 0.5rem; } hr { margin: 2rem 0; } @@ -63,8 +91,6 @@ p { margin: 1rem 0; } li { margin: 0.4rem 0; } -*:target { background: yellow; } - .w { max-width: 640px; margin: 0 auto; @@ -72,7 +98,6 @@ li { margin: 0.4rem 0; } } .toc { - border: thin solid black; padding: 1rem; } diff --git a/content/posts/test-toc-and-details.md b/content/posts/test-toc-and-details.md new file mode 100644 index 0000000..af7e3f0 --- /dev/null +++ b/content/posts/test-toc-and-details.md @@ -0,0 +1,40 @@ ++++ +title = 'Test TOC, deatails and styles' +date = 2024-08-18T13:34:54+02:00 +draft = true +toc = true +tocBorder = true ++++ + + +## Table of Content +### What it is? +TOC is the box you see at the very top of this post. It may be framed (or not). +### How to enable TOC? +To enable it, all you need to do when creating a new post at the very top is to insert the code: +```markdown +toc = true +tocBorder = true +``` +You can of course find this post (../themes/nostyleplease/content/posts/test-toc-and-details.md) and open in editor to see how it's working. + +## Details +### What it is? +It's HTML standard sadly not supported native by markdown. But this theme support it anyway. So... sometimes you want to hide something. +{{< details summary="Click me" >}} +### You can hide something here +A lot of text or something else. +{{< /details >}} +### How to use "Details"? +Well you need to inspect this post and see by yourself. It's very easy. Take look at ../themes/nostyleplease/content/posts/test-toc-and-details.md. + +## Styles +Okey. So if you want to change color-theme you can: +- go to ../themes/nostyleplease/config.toml and find: + ```markdown + appearance = "clean" + ``` + you can change it to 4 predefined styles: **light**, **dark**, **clean** and **retro**. It can be also set to **auto** and the color scheme will match the user's system style. +- you can add new style or modify **auto** option, just edit CSS in ../themes/nostyleplease/assets/main.scss :-). It's easy, if you are able to operate Hugo - you can do it. + +[^1]: Some parts are wroten by GPT-4. I'm not a programmer and AI helped me a lot, especially with the parts that using the FTP server. diff --git a/data/menu.toml b/data/menu.toml index 4009734..9fbcd89 100644 --- a/data/menu.toml +++ b/data/menu.toml @@ -6,10 +6,8 @@ title = "info" [[entries.entries]] title = "github repo" - url = "https://github.com/riggraz/no-style-please" + url = "https://github.com/hanwenguo/hugo-theme-nostyleplease" - [[entries.entries]] - title = "used by riggraz.dev and many others" [[entries]] title = "all posts" diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 77b25a9..43aaa30 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -5,6 +5,7 @@
{{- block "main" . }}{{- end }} + {{ partial "footer.html" }}
diff --git a/layouts/footer.md b/layouts/footer.md new file mode 100644 index 0000000..67a260e --- /dev/null +++ b/layouts/footer.md @@ -0,0 +1,2 @@ +This is footer. +You can edit this in ../nostyleplease/layouts/footer.md diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html new file mode 100644 index 0000000..319153e --- /dev/null +++ b/layouts/partials/footer.html @@ -0,0 +1,2 @@ +{{ $footerContent := readFile "layouts/footer.md" }} +{{ $footerContent | markdownify }} diff --git a/layouts/shortcodes/details.html b/layouts/shortcodes/details.html new file mode 100644 index 0000000..80be121 --- /dev/null +++ b/layouts/shortcodes/details.html @@ -0,0 +1,6 @@ +
+ + {{ .Get "summary" | default "Details:" }} + + {{ .Inner | markdownify }} +