BenHays42/typo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Theme Update

Browse Source
This commit is contained in:
Francesco 2024-04-23 16:38:35 +02:00
parent 84696d9c4a
commit 9f41bb9ab3
4 changed files with 95 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
README.md
View File

@ -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. 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 ## Configuration example
**post.md** **post.md**
```md ```
--- ---
title: "Search Engine in Rust" title: "Search Engine in Rust"
date: "2024-02-01" date: "2024-02-01"
@ -46,7 +71,7 @@ readTime: true
autonumber: true autonumber: true
--- ---
... Your content...
``` ```
**hugo.toml** **hugo.toml**
@ -57,7 +82,7 @@ languageCode = 'en-us'
title = 'Francesco Tomaselli' title = 'Francesco Tomaselli'
theme = 'Typo' theme = 'Typo'
# Disable tags # Disable tags, actually, they are rendered as a list, but the idea is to disable them.
disableKinds = ['taxonomy'] disableKinds = ['taxonomy']
# Google analytics code # Google analytics code
@ -67,7 +92,7 @@ googleAnalytics = "G-xxxxxxxxxx"
# Math mode # Math mode
math = true 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 homeIntro = true
homeIntroTitle = 'Hi!' homeIntroTitle = 'Hi!'
homeIntroContent = """ 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. 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' homeCollectionTitle = 'Posts'
homeCollection = '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 paginationSize = 100
# Social icons # Social icons
@ -110,6 +135,7 @@ url = "/resume"
# Syntax highligth on code blocks, all styles: # Syntax highligth on code blocks, all styles:
# https://xyproto.github.io/splash/docs/all.html # https://xyproto.github.io/splash/docs/all.html
# I sugges algol
[markup] [markup]
[markup.highlight] [markup.highlight]
style = 'algol' style = 'algol'

15
assets/css/main.css
View File

@ -67,6 +67,13 @@ pre {
margin-top: var(--code-margin-top); margin-top: var(--code-margin-top);
margin-bottom: var(--code-margin-bottom); margin-bottom: var(--code-margin-bottom);
background-color: var(--code-background) !important; background-color: var(--code-background) !important;
overflow-x: auto;
-ms-overflow-style: none;
scrollbar-width: none;
}
pre::-webkit-scrollbar {
display: none;
} }
code { code {
@ -81,11 +88,16 @@ code {
font-size: .9em; font-size: .9em;
} }
/* Latex Overflow */
.MathJax { .MathJax {
overflow-x: auto; overflow-x: auto;
overflow-y: hidden; overflow-y: hidden;
-ms-overflow-style: none;
scrollbar-width: none;
}
.MathJax::-webkit-scrollbar {
display: none;
} }
/* Footnotes */ /* Footnotes */
@ -306,4 +318,5 @@ footer a {
.not-found div h1 { .not-found div h1 {
font-size: 6rem; font-size: 6rem;
margin-bottom: 3rem;
} }

4
layouts/404.html
View File

@ -3,8 +3,8 @@
<div class="not-found"> <div class="not-found">
<div> <div>
<h1> 404 </h1> <h1> typo? </h1>
<p> You shouldn't be here, click on the header to return to home </p> <p> Click <a href="/"> here </a> to return to home </p>
</div> </div>
</div> </div>

46
layouts/_default/baseof.html
View File

@ -9,7 +9,13 @@
{{ end }} {{ end }}
</head> </head>
<body class="light"> {{ $theme := "auto"}}
{{ with .Param "theme" }}
{{ $theme = .}}
{{ end }}
<body class="{{ $theme }}">
<div class="content"> <div class="content">
<header> <header>
@ -27,13 +33,45 @@
</body> </body>
<script> <script>
function toggleTheme() { function isAuto() {
document.body.classList.toggle('light'); return document.body.classList.contains("auto");
document.body.classList.toggle('dark');
} }
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> </script>