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 @@