uutils/uutils.github.io
0
0
Fork 0
mirror of https://github.com/uutils/uutils.github.io.git synced 2026-06-10 16:12:28 -07:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #38 from LouisDISPA/main

Browse Source 
Add dark mode support to website
This commit is contained in:
Sylvestre Ledru
2025-02-28 09:17:12 +01:00
committed by GitHub
parent 6811eff824 219f09af3a
commit aa24730f54
9 changed files with 158 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.github/workflows/website.yml
+3 -2
View File
@@ -64,9 +64,9 @@ jobs:
cd findutils
cd docs
mdbook build
- name: Run Zola
uses: shalzz/zola-deploy-action@v0.18.0
uses: shalzz/zola-deploy-action@v0.20.0
env:
BUILD_DIR: uutils.github.io
BUILD_ONLY: true
@@ -158,6 +158,7 @@ jobs:
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
needs: build
if: (github.event_name == 'push' && github.ref == 'refs/heads/main') || github.event_name == 'schedule'
steps:
- name: Deploy to GitHub Pages
id: deployment
.gitignore
+2 -1
View File
@@ -1 +1,2 @@
/public/
/public/
/static/syntax-*
README.md
+2 -2
View File
@@ -8,7 +8,7 @@ It is available on:
https://uutils.github.io/coreutils/docs/
Can be generated with:
```
```bash
cargo run --bin uudoc --all-features
cd docs
mdbook build
@@ -20,7 +20,7 @@ It is available on:
https://uutils.github.io/dev/coreutils/
Can be generated with:
```
```bash
cargo doc --no-deps --all-features --workspace
```
config.toml
+7 -4
View File
@@ -7,10 +7,13 @@ description = ""
default_language = "en"
paginate_by = 10
generate_feed = true
generate_feeds = true
[markdown]
highlight_code = true
highlight_theme = "OneHalfLight"
highlight_theme = "css"
highlight_themes_css = [
{ theme = "OneHalfDark", filename = "syntax-theme-dark.css" },
{ theme = "OneHalfLight", filename = "syntax-theme-light.css" },
]
content/_index.md
+5 -2
View File
@@ -4,8 +4,11 @@ template = "index.html"
+++
<div class="hero">
<img src="logo.svg">
<div>uutils</div>
<picture>
<source srcset="logo-dark.svg" media="(prefers-color-scheme: dark)">
<img src="logo.svg">
</picture>
<div>uutils</div>
</div>
The uutils project reimplements ubiquitous command line utilities in
content/gsoc.md
+6 -6
View File
@@ -65,8 +65,8 @@ However, a bunch of work remains on the color side for a full GNU compat. Other
We have 12 remaining failing tests.
To get the list of failing tests, run:
```
$ ./util/remaining-gnu-error.py |grep "/ls/"
```bash
$ ./util/remaining-gnu-error.py | grep "/ls/"
```
- Difficulty: Medium
@@ -82,8 +82,8 @@ Most of the features in `cp` have been implemented by now.
However, some corner cases needs to be implemented. We have 16 remaining failing tests.
To get the list of failing tests, run:
```
$ ./util/remaining-gnu-error.py |grep "/cp/"
```bash
$ ./util/remaining-gnu-error.py | grep "/cp/"
```
- Difficulty: Medium
@@ -99,8 +99,8 @@ Most of the features in `mv` have been implemented by now.
However, some corner cases needs to be implemented. We have 10 remaining failing tests.
To get the list of failing tests, run:
```
$ ./util/remaining-gnu-error.py |grep "/mv/"
```bash
$ ./util/remaining-gnu-error.py | grep "/mv/"
```
- Difficulty: Medium
static/logo-dark.svg
+61
View File
@@ -0,0 +1,61 @@
<svg height="106" width="106" viewbox="0 0 106 106" id="logo"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<g id="logo" transform="translate(53, 53)">
<g id="gear" mask="url(#holes)">
<circle r="43" fill="none" stroke="white" stroke-width="9" />
<g id="cogs">
<polygon id="cog" stroke="white" stroke-width="3.3" stroke-linejoin="round" points="46,3 51,0 46,-3" />
<use xlink:href="#cog" transform="rotate(11.25)" />
<use xlink:href="#cog" transform="rotate(22.50)" />
<use xlink:href="#cog" transform="rotate(33.75)" />
<use xlink:href="#cog" transform="rotate(45.00)" />
<use xlink:href="#cog" transform="rotate(56.25)" />
<use xlink:href="#cog" transform="rotate(67.50)" />
<use xlink:href="#cog" transform="rotate(78.75)" />
<use xlink:href="#cog" transform="rotate(90.00)" />
<use xlink:href="#cog" transform="rotate(101.25)" />
<use xlink:href="#cog" transform="rotate(112.50)" />
<use xlink:href="#cog" transform="rotate(123.75)" />
<use xlink:href="#cog" transform="rotate(135.00)" />
<use xlink:href="#cog" transform="rotate(146.25)" />
<use xlink:href="#cog" transform="rotate(157.50)" />
<use xlink:href="#cog" transform="rotate(168.75)" />
<use xlink:href="#cog" transform="rotate(180.00)" />
<use xlink:href="#cog" transform="rotate(191.25)" />
<use xlink:href="#cog" transform="rotate(202.50)" />
<use xlink:href="#cog" transform="rotate(213.75)" />
<use xlink:href="#cog" transform="rotate(225.00)" />
<use xlink:href="#cog" transform="rotate(236.25)" />
<use xlink:href="#cog" transform="rotate(247.50)" />
<use xlink:href="#cog" transform="rotate(258.75)" />
<use xlink:href="#cog" transform="rotate(270.00)" />
<use xlink:href="#cog" transform="rotate(281.25)" />
<use xlink:href="#cog" transform="rotate(292.50)" />
<use xlink:href="#cog" transform="rotate(303.75)" />
<use xlink:href="#cog" transform="rotate(315.00)" />
<use xlink:href="#cog" transform="rotate(326.25)" />
<use xlink:href="#cog" transform="rotate(337.50)" />
<use xlink:href="#cog" transform="rotate(348.75)" />
</g>
<g id="mounts">
<polygon id="mount" stroke="white" stroke-width="6" stroke-linejoin="round" points="-7,-42 0,-35 7,-42" />
<use xlink:href="#mount" transform="rotate(72)" />
<use xlink:href="#mount" transform="rotate(144)" />
<use xlink:href="#mount" transform="rotate(216)" />
<use xlink:href="#mount" transform="rotate(288)" />
</g>
</g>
<mask id="holes">
<rect x="-60" y="-60" width="120" height="120" fill="#fff" />
<circle id="hole" cy="-40" r="3" />
<use xlink:href="#hole" transform="rotate(72)" />
<use xlink:href="#hole" transform="rotate(144)" />
<use xlink:href="#hole" transform="rotate(216)" />
<use xlink:href="#hole" transform="rotate(288)" />
</mask>
</g>
<path aria-label="U" transform="matrix(1.1188958,0,0,1.3531467,106.90401,-3.0479991)" style="fill:#c04828"
d="m -30.914582,47.152116 c 0,-6.410851 0,-27.142255 0,-27.142255 h -9.981735 c 0,0 0,22.706465 0,27.142255 0,4.43579 -0.989404,8.475308 -7.250584,8.492265 -6.26118,0.01696 -7.308935,-4.147055 -7.308935,-8.492265 V 20.009861 h -9.981735 v 27.142255 c 0,6.425292 2.643496,15.679002 17.261495,15.679002 14.617999,0 17.261494,-9.268151 17.261494,-15.679002 z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

static/style.css
+65 -23
View File
@@ -1,20 +1,50 @@
:root {
/* Light theme colors (default) */
--accent-color: #c04828;
--dark-fg-color: #fff;
--light-fg-color: #141414;
--light-bg-color: var(--dark-fg-color);
--dark-bg-color: var(--light-fg-color);
--fg-color: var(--light-fg-color);
--bg-color: var(--light-bg-color);
--light-link-color: #c04828;
--dark-link-color: #c04828;
--link-color: var(--light-link-color);
--link-color: var(--accent-color);
--light-highlight-bg-color: #ededed;
--light-highlight-fg-color: #595959;
--dark-highlight-bg-color: #27272a;
--dark-highlight-fg-color: #ededed;
--highlight-fg-color: var(--light-highlight-fg-color);
--highlight-bg-color: var(--light-highlight-bg-color);
--link-text-color: var(--accent-color);
--header-border-color: #ddd;
--post-bg-color: #e5e5e5;
--font-face: "Fira Sans", sans-serif;
--github-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E");
--github-icon-black: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='000' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
:root {
--fg-color: #e1e1e1;
--bg-color: #222222;
--link-color: var(--accent-color);
--light-highlight-bg-color: #2d2d2d;
--light-highlight-fg-color: #ffffff;
--dark-highlight-bg-color: #27272a;
--dark-highlight-fg-color: #ededed;
--highlight-fg-color: var(--light-highlight-fg-color);
--highlight-bg-color: var(--light-highlight-bg-color);
--link-text-color: var(--accent-color);
--header-border-color: #404040;
--post-bg-color: #2d2d2d;
}
}
body {
background-color: var(--bg-color);
color: var(--fg-color);
}
*,
@@ -89,7 +119,7 @@ header {
justify-items: center;
padding: 0.5rem 2rem;
width: 100%;
border-bottom: 1px solid #ddd;
border-bottom: 1px solid var(--header-border-color);
font-size: 1.2rem;
}
@@ -111,13 +141,12 @@ header .home svg {
}
header a {
color: black;
color: var(--fg-color);
border-bottom: 2px solid transparent;
}
header a:hover:not(.home) {
color: black;
border-bottom: 2px solid #c04828;
border-bottom: 2px solid var(--link-text-color);
}
.navigation-block {
@@ -149,13 +178,13 @@ header .icon {
#mobile-open-navigation button div {
margin: 0.5em 0;
width: 2em;
border-bottom: 0.25em solid black;
border-bottom: 0.25em solid var(--fg-color);
}
header {
grid-template-columns: max-content 1fr;
}
.spacer {
display: none;
}
@@ -165,7 +194,7 @@ header .icon {
grid-column: auto / span 2;
justify-self: left;
}
header:not(.open) .spacer,
header:not(.open) .navigation-block {
display: none;
@@ -273,8 +302,8 @@ ul {
/* FOOTER */
footer {
align-items: center;
background-color: var(--fg-color);
color: var(--bg-color);
background-color: var(--light-fg-color);
color: var(--light-bg-color);
display: flex;
flex-grow: 0;
flex-shrink: 1;
@@ -286,17 +315,23 @@ footer {
}
.github-icon {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E");
background-image: var(--github-icon);
height: 1.25rem;
width: 1.25rem;
}
.github-icon-black {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='000' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E");
background-image: var(--github-icon-black);
height: 1em;
width: 1em;
}
@media (prefers-color-scheme: dark) {
.github-icon-black {
background-image: var(--github-icon);
}
}
.projects {
display: flex;
flex-direction: column;
@@ -325,13 +360,13 @@ footer {
margin-bottom: 0;
}
.project>span {
.project > span {
color: transparent;
transition: color 0.3s;
}
.project:hover>span {
color: black;
.project:hover > span {
color: var(--fg-color);
}
.project:hover {
@@ -342,6 +377,7 @@ footer {
font-size: 3em;
font-weight: 900;
margin-bottom: 0.5em;
text-transform: capitalize;
}
@media (min-width: 640px) {
@@ -353,21 +389,21 @@ footer {
.details {
margin-bottom: 1.5em;
color: #333;
color: var(--fg-color);
}
.post-thingy {
display: block;
padding: 1em;
color: black;
background: #e5e5e5;
color: var(--fg-color);
background: var(--post-bg-color);
border-radius: 0.3em;
border: 0.2em solid #e5e5e5;
border: 0.2em solid var(--post-bg-color);
margin-bottom: 0.5em;
}
.post-thingy:hover {
border-color: #c04828;
border-color: var(--link-text-color);
background: transparent;
}
@@ -391,8 +427,14 @@ blockquote {
.links > a {
padding: 0.2em 1em;
color: #c04828;
color: var(--link-text-color);
border: 2px solid #c04828;
flex: 1;
text-align: center;
}
.links > a:hover {
color: var(--dark-fg-color);
background-color: #c04828;
border-color: #c04828;
}
templates/base.html
+7 -5
View File
@@ -10,6 +10,8 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/style.css" rel="stylesheet">
<link href="/syntax-theme-dark.css" rel="stylesheet" media="(prefers-color-scheme: dark)" />
<link href="/syntax-theme-light.css" rel="stylesheet" media="(prefers-color-scheme: light)" />
</head>
<body>
@@ -23,13 +25,13 @@
</button>
</div>
<div class="navigation-block">
<a href="/coreutils">coreutils</a>
<a href="/findutils">findutils</a>
<a href="/diffutils">diffutils</a>
<a href="/coreutils">Coreutils</a>
<a href="/findutils">Findutils</a>
<a href="/diffutils">Diffutils</a>
</div>
<div class="spacer"></div>
<div class="navigation-block">
<a href="/blog">blog</a>
<a href="/blog">Blog</a>
<a href="https://twitter.com/uutils_/">Twitter</a>
<a href="https://mastodon.social/@uutils" rel="me">Mastodon</a>
<a href="/gsoc">GSOC</a>
@@ -54,4 +56,4 @@
});
</script>
</body>
</html>
</html>