Merge pull request #26 from jkkNl:new-features

README.md

@@ -1,17 +1,18 @@
 # no style, please!
 
-<img src="https://raw.githubusercontent.com/Masellum/hugo-theme-nostyleplease/main/logo.png" width="64" align="left" />A (nearly) no-CSS, fast, minimalist [Hugo](https://gohugo.io/) theme ported from [riggraz/no-style-please](https://github.com/riggraz/no-style-please/).
+<img src="https://raw.githubusercontent.com/hanwenguo/hugo-theme-nostyleplease/main/logo.png" width="64" align="left" />A (nearly) no-CSS, fast, minimalist [Hugo](https://gohugo.io/) theme ported from [riggraz/no-style-please](https://github.com/riggraz/no-style-please/).
 
-<img src="https://raw.githubusercontent.com/Masellum/hugo-theme-nostyleplease/main/images/screenshot-both.png" />
+<img src="https://raw.githubusercontent.com/hanwenguo/hugo-theme-nostyleplease/main/images/screenshot-both.png" />
 
 ## 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
 

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

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

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.

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>