Theme Update
This commit is contained in:
Francesco
parent
84696d9c4a
commit
9f41bb9ab3
48
README.md
48
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
|
||||
|
||||
|
||||
```
|
||||
|
||||
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'
|
||||
|
||||
@ -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;
|
||||
}
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user