From 9f41bb9ab355b91c4e5224a4475979c5704f042d Mon Sep 17 00:00:00 2001
From: Francesco <tomaselli.fr@gmail.com>
Date: Tue, 23 Apr 2024 16:38:35 +0200
Subject: [PATCH] Theme Update

---
 README.md                    | 48 +++++++++++++++++++++++++++---------
 assets/css/main.css          | 15 ++++++++++-
 layouts/404.html             |  4 +--
 layouts/_default/baseof.html | 46 +++++++++++++++++++++++++++++++---
 4 files changed, 95 insertions(+), 18 deletions(-)

diff --git a/README.md b/README.md
index bfa63b6..df40bae 100644
--- a/README.md
+++ b/README.md
@@ -22,21 +22,46 @@ git submodule add git@github.com:tomfran/typo.git themes/typo
 
 Otherwise you can clone the repo and copy it manually to yout theme folder.
 
-## Peculiarities
+## Features
 
-**Latex and code overflow on mobile**
+### Header autonumbering
 
-...
+You can add auto-numbering to the pages by setting the following parameter in 
+the header of your md files. The numbering is currently supported to level 3 subheadings.
 
-**Dark and Light mode tags for images**
+```
+autonumber: true
+```
 
-...
+### Appearance preferences
+
+In your `hugo.toml` file you can specify the preferred theme: 
+
+```
+theme = "light | dark | auto"
+```
+
+### Dark and light mode images
+
+You can tags to decide if images are displayed in dark or light mode, as Github id doing for readmes.
+
+Let's say you have two different versions
+of an image, setting #dark or #light do the trick.
+
+```md
+![skiplist](skiplist-light.png#light)
+![skiplist](skiplist-dark.png#dark)
+```
+
+You can of course remove the final tag 
+to alway show the same image on light and 
+dark mode.
 
 ## Configuration example
 
 **post.md**
 
-```md
+```
 ---
 title: "Search Engine in Rust"
 date: "2024-02-01"
@@ -46,7 +71,7 @@ readTime: true
 autonumber: true
 ---
 
-...
+Your content...
 ```
 
 **hugo.toml**
@@ -57,7 +82,7 @@ languageCode = 'en-us'
 title = 'Francesco Tomaselli'
 theme = 'Typo'
 
-# Disable tags
+# Disable tags, actually, they are rendered as a list, but the idea is to disable them.
 disableKinds = ['taxonomy']
 
 # Google analytics code
@@ -67,7 +92,7 @@ googleAnalytics = "G-xxxxxxxxxx"
 # Math mode
 math = true
 
-# Intro on main page, content in markdown
+# Intro on main page, content in markdown, if you omit title or content the other can be displayed
 homeIntro = true
 homeIntroTitle = 'Hi!'
 homeIntroContent = """
@@ -75,11 +100,11 @@ I am an Italian Software Engineer with a strong foundation in computer science a
 I am interested in a range of topics, including algorithms, distributed systems, databases, and information retrieval.
 """
 
-# Collection to display on home
+# Collection to display on home page, do not set if tou don't want them
 homeCollectionTitle = 'Posts'
 homeCollection = 'posts'
 
-# Pagination size across all website
+# Pagination size across all website, this is the same for homepage and single list page
 paginationSize = 100
 
 # Social icons
@@ -110,6 +135,7 @@ url = "/resume"
 
 # Syntax highligth on code blocks, all styles: 
 # https://xyproto.github.io/splash/docs/all.html
+# I sugges algol
 [markup]
 [markup.highlight]
 style = 'algol'
diff --git a/assets/css/main.css b/assets/css/main.css
index 410c38a..7077a7a 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -67,6 +67,13 @@ pre {
   margin-top: var(--code-margin-top);
   margin-bottom: var(--code-margin-bottom);
   background-color: var(--code-background) !important;
+  overflow-x: auto;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+pre::-webkit-scrollbar {
+  display: none;
 }
 
 code {
@@ -81,11 +88,16 @@ code {
   font-size: .9em;
 }
 
-/* Latex Overflow */
 
 .MathJax {
   overflow-x: auto;
   overflow-y: hidden;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.MathJax::-webkit-scrollbar {
+  display: none;
 }
 
 /* Footnotes */
@@ -306,4 +318,5 @@ footer a {
 
 .not-found div h1 {
   font-size: 6rem;
+  margin-bottom: 3rem;
 }
\ No newline at end of file
diff --git a/layouts/404.html b/layouts/404.html
index dd02979..75b031c 100644
--- a/layouts/404.html
+++ b/layouts/404.html
@@ -3,8 +3,8 @@
 <div class="not-found">
 
     <div>
-        <h1> 404 </h1>
-        <p> You shouldn't be here, click on the header to return to home </p>
+        <h1> typo? </h1>
+        <p> Click <a href="/"> here </a> to return to home </p>
     </div>
 </div>
 
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 458589f..524af7f 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -9,7 +9,13 @@
   {{ end }}
 </head>
 
-<body class="light">
+{{ $theme := "auto"}}
+
+{{ with .Param "theme" }}
+{{ $theme = .}}
+{{ end }}
+
+<body class="{{ $theme }}">
 
   <div class="content">
     <header>
@@ -27,13 +33,45 @@
 
 </body>
 
+
 <script>
 
-  function toggleTheme() {
-    document.body.classList.toggle('light');
-    document.body.classList.toggle('dark');
+  function isAuto() {
+    return document.body.classList.contains("auto");
   }
 
+  function setTheme() {
+    if (!isAuto()) {
+      return
+    }
+
+    console
+    document.body.classList.remove("auto");
+    let cls = "light";
+
+    console.log
+
+    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      cls = "dark";
+    }
+
+    document.body.classList.add(cls);
+
+  }
+
+  function invert() {
+    document.body.classList.toggle("dark");
+    document.body.classList.toggle("light");
+  }
+
+  if (isAuto()) {
+    console.log("Setting invert listener");
+    window.matchMedia('(prefers-color-scheme: dark)').addListener(invert);
+  }
+
+  setTheme();
+
+
 </script>