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

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

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.

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 <a href='https://riggraz.dev'>riggraz.dev</a> and <a href='https://github.com/riggraz/no-style-please/network/dependents'>many others</a>"
 
 [[entries]]
 title = "all posts"

layouts/_default/baseof.html

@@ -5,6 +5,7 @@
         <main class="page-content" aria-label="Content">
             <div class="w">
                 {{- block "main" . }}{{- end }}
+                {{ partial "footer.html" }}
             </div>
         </main>
     </body>

layouts/footer.md

@@ -0,0 +1,2 @@
+This is footer.
+You can edit this in ../nostyleplease/layouts/footer.md

layouts/partials/footer.html

@@ -0,0 +1,2 @@
+{{ $footerContent := readFile "layouts/footer.md" }}
+{{ $footerContent | markdownify }}

layouts/shortcodes/details.html

@@ -0,0 +1,6 @@
+<details {{ if eq (.Get "open" | default "false") "true" }}open{{ end }}>
+    <summary>
+        {{ .Get "summary" | default "Details:" }}
+    </summary>
+    {{ .Inner | markdownify }}
+</details>