diff --git a/README.md b/README.md index ed3d99f..d1c29c6 100644 --- a/README.md +++ b/README.md @@ -1,17 +1,18 @@ # no style, please! -A (nearly) no-CSS, fast, minimalist [Hugo](https://gohugo.io/) theme ported from [riggraz/no-style-please](https://github.com/riggraz/no-style-please/). +A (nearly) no-CSS, fast, minimalist [Hugo](https://gohugo.io/) theme ported from [riggraz/no-style-please](https://github.com/riggraz/no-style-please/). - + ## Features -* Fast (**1kb of CSS!**) +* Fast (**under 3kb of CSS!**) * Light, dark and auto modes * Responsive * Content first (typography optimized for maximum readability) * RSS feed (using Hugo's embedded RSS template) * MathJax support +* Supporting details HTML tag ## Installation @@ -50,6 +51,7 @@ The `index.md` page should use layout `home`, which is the layout that displays Another thing you can do to customize the index page is show the description of your blog between the title and the menu. To do this, just edit `config.toml` and change `params.theme_config.show_description` to `true`. +You can also add footer. Just edit ..nostyleplease/layouts/footer.md. ### Adding table of contents You can add a table of contents by supplying the `toc: true` param to your post front matter. If you want a border around it you can also set `tocBorder: true`. The toc style behavior is handled by Goldmark and the defaults can be found in the `config.toml` file. @@ -70,7 +72,7 @@ For example, if you have a black and white image it could make sense to invert i ## Contributing -Bug reports and pull requests are welcome on GitHub at https://github.com/Masellum/hugo-theme-nostyleplease. +Bug reports and pull requests are welcome on GitHub at https://github.com/hanwenguo/hugo-theme-nostyleplease/. ## Thanks diff --git a/assets/css/main.scss b/assets/css/main.scss index 3974b1c..9607128 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,55 @@ a { color: $--link-color; text-decoration: none; - &:visited { color: $--visited-link-color; } &:hover { text-decoration: underline; } } + details { + border: thin solid $--primary-text-color; + padding: 1rem; + } + + details summary { + color: $--primary-text-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 $--primary-text-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); } 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 +80,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 +88,6 @@ p { margin: 1rem 0; } li { margin: 0.4rem 0; } -*:target { background: yellow; } - .w { max-width: 640px; margin: 0 auto; @@ -72,7 +95,6 @@ li { margin: 0.4rem 0; } } .toc { - border: thin solid black; padding: 1rem; } diff --git a/content/_index.md b/content/_index.md index 143ef15..93feffb 100644 --- a/content/_index.md +++ b/content/_index.md @@ -3,3 +3,4 @@ title = "" date = 2022-08-25T21:30:04+08:00 draft = false +++ +To edit this find file nostyleplease/content/_index.md diff --git a/content/posts/test-toc-and-details.md b/content/posts/test-toc-and-details.md new file mode 100644 index 0000000..8664433 --- /dev/null +++ b/content/posts/test-toc-and-details.md @@ -0,0 +1,37 @@ ++++ +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: +```toml +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" >}} +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: + + ```toml + appearance = "auto" + ``` + you can change it to 2 predefined styles: **light** and **dark**. 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. 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/images/screenshot-both.png b/images/screenshot-both.png index 73b4161..6ffed3b 100644 Binary files a/images/screenshot-both.png and b/images/screenshot-both.png differ 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 }} +