feat: Add paper theme and light theme support
- Introduced new 'paper' light theme in README.md - Added new blog post explaining the paper theme - Included paper theme image - Updated theme color options to include 'paper' - Added new CSS variables for light theme support
This commit is contained in:
26
README.md
26
README.md
@@ -4,19 +4,16 @@
|
|||||||
|
|
||||||
Hello! I'm thrilled to announce a brand new fork of Hugo Theme Terminal, now officially known as Hugo Theme Re-Terminal!
|
Hello! I'm thrilled to announce a brand new fork of Hugo Theme Terminal, now officially known as Hugo Theme Re-Terminal!
|
||||||
|
|
||||||
|
|
||||||
As the maintainer, I'm excited to share that this theme will continue to evolve and receive updates with new features. Why? Because I use it myself! You can bet your last byte that any changes I make will be thoroughly tested and refined for real-world use.
|
As the maintainer, I'm excited to share that this theme will continue to evolve and receive updates with new features. Why? Because I use it myself! You can bet your last byte that any changes I make will be thoroughly tested and refined for real-world use.
|
||||||
|
|
||||||
|
|
||||||
This fork aims to breathe new life into the original Terminal theme, which was once a popular choice among Hugo enthusiasts. Unfortunately, it had been neglected over time. But no more! With re-Terminal, we're committed to keeping the spirit of the original alive while adding fresh perspectives and innovations.
|
This fork aims to breathe new life into the original Terminal theme, which was once a popular choice among Hugo enthusiasts. Unfortunately, it had been neglected over time. But no more! With re-Terminal, we're committed to keeping the spirit of the original alive while adding fresh perspectives and innovations.
|
||||||
|
|
||||||
|
|
||||||
In the coming weeks and months, you can expect to see new features, and bug fixes. We'll also be actively seeking feedback from our community to ensure that this theme continues to meet your needs and exceed your expectations.
|
In the coming weeks and months, you can expect to see new features, and bug fixes. We'll also be actively seeking feedback from our community to ensure that this theme continues to meet your needs and exceed your expectations.
|
||||||
|
|
||||||
|
|
||||||
So, welcome aboard! I'm excited to have you join us on this journey as we shape the future of Hugo Theme re-Terminal together. Let's get started!
|
So, welcome aboard! I'm excited to have you join us on this journey as we shape the future of Hugo Theme re-Terminal together. Let's get started!
|
||||||
|
|
||||||
## Changes vs original Terminal
|
## Changes vs original Terminal
|
||||||
|
|
||||||
- removed all deprecated HUGO code
|
- removed all deprecated HUGO code
|
||||||
- comments counter for pages
|
- comments counter for pages
|
||||||
- added post base primitive for more flexible pages where you can embed your code
|
- added post base primitive for more flexible pages where you can embed your code
|
||||||
@@ -25,16 +22,16 @@ So, welcome aboard! I'm excited to have you join us on this journey as we shape
|
|||||||
- add submenus for the main menu
|
- add submenus for the main menu
|
||||||
- `coverCaption` for your article covers. Now you can add some information about the image in proper way
|
- `coverCaption` for your article covers. Now you can add some information about the image in proper way
|
||||||
|
|
||||||
----
|
---
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
|
|
||||||
### DEMO and some blog posts about re-Terminal - https://re-terminal.nebrowser.com/
|
### DEMO and some blog posts about re-Terminal - https://re-terminal.nebrowser.com/
|
||||||
|
|
||||||
### Visit repo's wiki (WIP) - https://github.com/mirus-ua/hugo-theme-re-terminal/wiki
|
### Visit repo's wiki (WIP) - https://github.com/mirus-ua/hugo-theme-re-terminal/wiki
|
||||||
|
|
||||||
### ⚠️ The theme needs at least Hugo **Extended** v0.128.0.
|
### ⚠️ The theme needs at least Hugo **Extended** v0.128.0.
|
||||||
|
|
||||||
re-Terminal before v2.1.0 may work with versions of HUGO less than v0.128.0 below to v0.90.0 if you change the min version manually in mod files, but I didn't test it
|
re-Terminal before v2.1.0 may work with versions of HUGO less than v0.128.0 below to v0.90.0 if you change the min version manually in mod files, but I didn't test it
|
||||||
|
|
||||||
---
|
---
|
||||||
@@ -56,7 +53,7 @@ re-Terminal before v2.1.0 may work with versions of HUGO less than v0.128.0 belo
|
|||||||
|
|
||||||
## Features
|
## Features
|
||||||
|
|
||||||
- **5 duotone themes**, depending on your preferences (blue is default, red, orange, green, pink)
|
- **6 duotone themes**, depending on your preferences (blue is default, red, orange, green, pink, paper)
|
||||||
- [**Fira Code**](https://github.com/tonsky/FiraCode) as default monospaced font. It's gorgeous!
|
- [**Fira Code**](https://github.com/tonsky/FiraCode) as default monospaced font. It's gorgeous!
|
||||||
- **really nice duotone**, custom syntax highlighting based on [**PrismJS**](https://prismjs.com)
|
- **really nice duotone**, custom syntax highlighting based on [**PrismJS**](https://prismjs.com)
|
||||||
- fully responsive
|
- fully responsive
|
||||||
@@ -67,6 +64,7 @@ re-Terminal before v2.1.0 may work with versions of HUGO less than v0.128.0 belo
|
|||||||
You can find all of them in the browser's page inspector, but here is the list with default values anyway:
|
You can find all of them in the browser's page inspector, but here is the list with default values anyway:
|
||||||
|
|
||||||
```css
|
```css
|
||||||
|
/* the colors are from dark pallets; light themes have different defaults */
|
||||||
:root {
|
:root {
|
||||||
--accent: #23B0FF; /* 1 of 5 basic colors */
|
--accent: #23B0FF; /* 1 of 5 basic colors */
|
||||||
--background: color-mix(in srgb, var(--accent) 2%, #1D1E28 98%); /* background color; inherit shades of the accent */
|
--background: color-mix(in srgb, var(--accent) 2%, #1D1E28 98%); /* background color; inherit shades of the accent */
|
||||||
@@ -74,6 +72,7 @@ You can find all of them in the browser's page inspector, but here is the list w
|
|||||||
--color: white; /* text color, also some other text use the variable in color mixing */
|
--color: white; /* text color, also some other text use the variable in color mixing */
|
||||||
--border-color: rgba(255, 255, 255, .1); /* border color */
|
--border-color: rgba(255, 255, 255, .1); /* border color */
|
||||||
--article-link-color: var(inherit); /* for you, who want to colorize your article links */
|
--article-link-color: var(inherit); /* for you, who want to colorize your article links */
|
||||||
|
--menu-color: blackl /* a variable for menus color */
|
||||||
|
|
||||||
/* code syntax */
|
/* code syntax */
|
||||||
/* take a look at themes/re-terminal/assets/css/syntax.scss to understand in detail which color stands for */
|
/* take a look at themes/re-terminal/assets/css/syntax.scss to understand in detail which color stands for */
|
||||||
@@ -92,16 +91,19 @@ You can find all of them in the browser's page inspector, but here is the list w
|
|||||||
|
|
||||||
- **`image`** (props required: **`src`**; props optional: **`alt`**, **`position`** (**left** is default | center | right), **`style`**)
|
- **`image`** (props required: **`src`**; props optional: **`alt`**, **`position`** (**left** is default | center | right), **`style`**)
|
||||||
- e.g.
|
- e.g.
|
||||||
|
|
||||||
```go
|
```go
|
||||||
{{< image src="/img/hello.png" alt="Hello Friend" position="center" style="border-radius: 8px;" >}}
|
{{< image src="/img/hello.png" alt="Hello Friend" position="center" style="border-radius: 8px;" >}}
|
||||||
```
|
```
|
||||||
- **`figure`** (same as `image`, plus few optional props: **`caption`**, **`captionPosition`** (left | **center** is default | right), **`captionStyle`**)
|
- **`figure`** (same as `image`, plus few optional props: **`caption`**, **`captionPosition`** (left | **center** is default | right), **`captionStyle`**)
|
||||||
- e.g.
|
- e.g.
|
||||||
|
|
||||||
```go
|
```go
|
||||||
{{< figure src="/img/hello.png" alt="Hello Friend" position="center" style="border-radius: 8px;" caption="Hello Friend!" captionPosition="right" captionStyle="color: red;" >}}
|
{{< figure src="/img/hello.png" alt="Hello Friend" position="center" style="border-radius: 8px;" caption="Hello Friend!" captionPosition="right" captionStyle="color: red;" >}}
|
||||||
```
|
```
|
||||||
- **`code`** (props required: **`language`**; props optional: **`title`**, **`id`**, **`expand`** (default "△"), **`collapse`** (default "▽"), **`isCollapsed`**)
|
- **`code`** (props required: **`language`**; props optional: **`title`**, **`id`**, **`expand`** (default "△"), **`collapse`** (default "▽"), **`isCollapsed`**)
|
||||||
- e.g.
|
- e.g.
|
||||||
|
|
||||||
```go
|
```go
|
||||||
{{< code language="css" title="Really cool snippet" id="1" expand="Show" collapse="Hide" isCollapsed="true" >}}
|
{{< code language="css" title="Really cool snippet" id="1" expand="Show" collapse="Hide" isCollapsed="true" >}}
|
||||||
pre {
|
pre {
|
||||||
@@ -222,7 +224,7 @@ pagination.pagerSize = 5
|
|||||||
# the list of set content will show up on your index page (baseurl).
|
# the list of set content will show up on your index page (baseurl).
|
||||||
contentTypeName = "posts"
|
contentTypeName = "posts"
|
||||||
|
|
||||||
# ["orange", "blue", "red", "green", "pink"]
|
# ["orange", "blue", "red", "green", "pink", "paper"]
|
||||||
themeColor = "orange"
|
themeColor = "orange"
|
||||||
|
|
||||||
# if you set this to 0, only submenu trigger will be visible
|
# if you set this to 0, only submenu trigger will be visible
|
||||||
@@ -348,19 +350,20 @@ See the default `post` file params supported by the theme — https://github.com
|
|||||||
- **Extended Footer** — please take a look at `layouts/partials/extended_footer.html` https://github.com/mirus-ua/hugo-theme-re-terminal/blob/main/layouts/partials/extended_footer.html
|
- **Extended Footer** — please take a look at `layouts/partials/extended_footer.html` https://github.com/mirus-ua/hugo-theme-re-terminal/blob/main/layouts/partials/extended_footer.html
|
||||||
|
|
||||||
### Low-level add-ons
|
### Low-level add-ons
|
||||||
|
|
||||||
- **Post base** — Renders bare minimum of posts' content. For motivation and details take a look at https://github.com/mirus-ua/hugo-theme-re-terminal/blob/main/layouts/partials/single_basic.html
|
- **Post base** — Renders bare minimum of posts' content. For motivation and details take a look at https://github.com/mirus-ua/hugo-theme-re-terminal/blob/main/layouts/partials/single_basic.html
|
||||||
|
|
||||||
## How to edit the theme <a id="how-to-edit" />
|
## How to edit the theme `<a id="how-to-edit" />`
|
||||||
|
|
||||||
If you are using as a remote Hugo Module (you don't have the theme files in the `theme/re-terminal`) and you have to override only some of the styles, you can do this easily by adding `static/style.css` in your root directory and point things you want to change.
|
If you are using as a remote Hugo Module (you don't have the theme files in the `theme/re-terminal`) and you have to override only some of the styles, you can do this easily by adding `static/style.css` in your root directory and point things you want to change.
|
||||||
|
|
||||||
If you have the theme files in the theme directory, then you can directly edit anything in the theme, you just have to go to `themes/re-terminal` and modify the files. No compilation step needed.
|
If you have the theme files in the theme directory, then you can directly edit anything in the theme, you just have to go to `themes/re-terminal` and modify the files. No compilation step needed.
|
||||||
|
|
||||||
## Found a bug? <a id="bug" />
|
## Found a bug? `<a id="bug" />`
|
||||||
|
|
||||||
If you spot any bugs, please use [Issue Tracker](https://github.com/mirus-ua/hugo-theme-re-terminal/issues) or create a new [Pull Request](https://github.com/mirus-ua/hugo-theme-re-terminal/pulls) to fix the issue.
|
If you spot any bugs, please use [Issue Tracker](https://github.com/mirus-ua/hugo-theme-re-terminal/issues) or create a new [Pull Request](https://github.com/mirus-ua/hugo-theme-re-terminal/pulls) to fix the issue.
|
||||||
|
|
||||||
## New cool idea or feature? <a id="feature" />
|
## New cool idea or feature? `<a id="feature" />`
|
||||||
|
|
||||||
The theme is in constant development since 2019 and has got many cool features that helped many of you and made the theme better. But there were also many features that I wasn't sure about because I want to keep the theme as simple as possible.
|
The theme is in constant development since 2019 and has got many cool features that helped many of you and made the theme better. But there were also many features that I wasn't sure about because I want to keep the theme as simple as possible.
|
||||||
|
|
||||||
@@ -381,7 +384,6 @@ Sounds OK? Cool, let's rock! 🤘
|
|||||||
|
|
||||||
I'd be happy to know more about you and what you are doing. If you want to share it, please make a contribution and [add your site to the list](https://github.com/mirus-ua/hugo-theme-re-terminal/blob/main/USERS.md)! 🤗
|
I'd be happy to know more about you and what you are doing. If you want to share it, please make a contribution and [add your site to the list](https://github.com/mirus-ua/hugo-theme-re-terminal/blob/main/USERS.md)! 🤗
|
||||||
|
|
||||||
|
|
||||||
## License
|
## License
|
||||||
|
|
||||||
Copyright © 2019-2022 Radosław Kozieł ([@panr](https://twitter.com/panr))
|
Copyright © 2019-2022 Radosław Kozieł ([@panr](https://twitter.com/panr))
|
||||||
|
|||||||
27
demoSite/content/posts/paper-a-light-theme.md
Normal file
27
demoSite/content/posts/paper-a-light-theme.md
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
+++
|
||||||
|
title = "Introducing Paper a light theme"
|
||||||
|
date = "2025-03-12"
|
||||||
|
author = "Mirus"
|
||||||
|
cover = "img/paper.jpeg"
|
||||||
|
coverCaption = "The first light theme by community member trviph"
|
||||||
|
description = "As planned, re-Terminal got the first prebuilt light theme. Read some details in the article"
|
||||||
|
tags=["theme", "light"]
|
||||||
|
+++
|
||||||
|
|
||||||
|
## About Paper
|
||||||
|
|
||||||
|
We have an issue on the [GitHub](https://github.com/mirus-ua/hugo-theme-re-terminal/issues/10) about the built-in light themes for re-Terminal Hugo Theme, and today I'm glad to introduce the very first light theme made by [trviph](https://github.com/trviph) that is called `Paper`.
|
||||||
|
|
||||||
|
You can enable it via config
|
||||||
|
```yaml
|
||||||
|
[params]
|
||||||
|
themeColor = "paper"
|
||||||
|
```
|
||||||
|
|
||||||
|
## Tech enablers
|
||||||
|
With the new theme we got a few handy improvements:
|
||||||
|
- `--menu-color` a new CSS Variable
|
||||||
|
- `assets/css/variables-light.scss` a new conditional set of variables for the light themes; you can start your very own theme with [CSS Variables](/posts/css-vars/) and better defaults if you aren't on the dark side
|
||||||
|
|
||||||
|
## Outro
|
||||||
|
If you want to add your vision of a perfect accessible light theme, I'm gladly accept your contribution
|
||||||
BIN
demoSite/static/img/paper.jpeg
Normal file
BIN
demoSite/static/img/paper.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Reference in New Issue
Block a user