diff options
| -rw-r--r-- | README.md | 48 | ||||
| -rw-r--r-- | assets/css/main.css | 15 | ||||
| -rw-r--r-- | layouts/404.html | 4 | ||||
| -rw-r--r-- | layouts/_default/baseof.html | 46 |
4 files changed, 95 insertions, 18 deletions
@@ -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 + + +``` + +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> |