Merge pull request #15 from barrett-ruth/feat/auto-theme.nvim
auto theme.nvim post
This commit is contained in:
Barrett Ruth
GitHub
commit
15401ee1de
12 changed files with 137 additions and 89 deletions
|
|
@ -201,7 +201,7 @@ body {
|
|||
|
||||
header,
|
||||
footer {
|
||||
padding: 20px;
|
||||
padding: 30px 20px;
|
||||
font-size: 1.5em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -270,14 +270,18 @@ pre {
|
|||
"calt" 0;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
header {
|
||||
font-size: 0.9em;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
header,
|
||||
footer {
|
||||
font-size: 0.9em;
|
||||
padding: 15px;
|
||||
font-size: 1.2em;
|
||||
padding: 20px 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
header,
|
||||
footer {
|
||||
font-size: 1em;
|
||||
padding: 15px 10px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,31 +1,26 @@
|
|||
html {
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
/* List pages only - no scroll */
|
||||
body:has(.content) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Fixed header and footer for list pages */
|
||||
body:has(.content) header {
|
||||
flex-shrink: 0;
|
||||
body:has(.content) > header {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
body:has(.content) footer {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.main {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
body:has(.content) > .main {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
body:has(.content) > footer {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -35,14 +30,13 @@ body:has(.content) footer {
|
|||
gap: 80px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.topics {
|
||||
font-size: 3em;
|
||||
max-height: calc(100vh - 200px);
|
||||
column-count: 2;
|
||||
column-gap: 80px;
|
||||
font-size: clamp(1.5em, 4vw, 3em);
|
||||
max-height: 80vh;
|
||||
column-width: 300px;
|
||||
column-gap: clamp(20px, 4vw, 60px);
|
||||
column-fill: auto;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
@ -51,15 +45,6 @@ body:has(.content) footer {
|
|||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.topics::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.topics {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.topics li:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
|
@ -69,7 +54,7 @@ body:has(.content) footer {
|
|||
}
|
||||
|
||||
.posts {
|
||||
font-size: 2.2em;
|
||||
font-size: clamp(1.2em, 3vw, 2.2em);
|
||||
text-align: right;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -123,29 +108,57 @@ ul {
|
|||
right: 0;
|
||||
}
|
||||
|
||||
body:has(#repo-list) .content,
|
||||
body:has(.topics:only-child) .content {
|
||||
justify-content: flex-start;
|
||||
display: block;
|
||||
}
|
||||
|
||||
body:has(#repo-list) .topics,
|
||||
body:has(.topics:only-child) .topics {
|
||||
column-count: 2;
|
||||
column-width: 350px;
|
||||
column-fill: auto;
|
||||
max-width: 1200px;
|
||||
height: calc(100vh - 200px);
|
||||
overflow-y: hidden;
|
||||
overflow-x: auto;
|
||||
max-height: calc(100vh - 200px);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body:has(#repo-list) .posts {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
body:has(.content) {
|
||||
height: auto;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
body:has(.content) > .main {
|
||||
display: block;
|
||||
min-height: calc(100vh - 200px);
|
||||
}
|
||||
|
||||
.content {
|
||||
display: block;
|
||||
padding: 20px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.topics {
|
||||
font-size: 2em;
|
||||
padding: 0 20px;
|
||||
font-size: 1.8em;
|
||||
column-count: 1;
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.posts {
|
||||
font-size: 1.47em;
|
||||
padding: 0 20px;
|
||||
font-size: 1.4em;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.topic a {
|
||||
display: block;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,28 +1,3 @@
|
|||
body:has(.post-container) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body:has(.post-container) header {
|
||||
flex-shrink: 0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
body:has(.post-container) .main {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body:has(.post-container) footer {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,11 +29,26 @@
|
|||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: 1024px) {
|
||||
footer {
|
||||
flex-direction: row;
|
||||
gap: 15px;
|
||||
}
|
||||
.footer-links-left,
|
||||
.footer-links-right {
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
gap: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
footer {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.footer-links-left,
|
||||
.footer-links-right {
|
||||
flex-direction: row;
|
||||
gap: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -29,18 +29,22 @@ const promptText = topic ? `barrett@ruth:~$ ${topic}` : "barrett@ruth:~$";
|
|||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: 640px) {
|
||||
header {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
}
|
||||
.terminal-container {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
}
|
||||
.terminal-prompt {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
#theme-toggle {
|
||||
flex: 0 0 auto;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,47 @@ slug: "auto-theme.nvim"
|
|||
date: "11/28/2025"
|
||||
---
|
||||
|
||||
[Source code](https://github.com/barrett-ruth/auto-theme.nvim)
|
||||
# the problem
|
||||
|
||||
wip
|
||||
I toggle between light and dark mode at at around 17:00 every day. Resetting my environment and theme across all my applications was a pain.
|
||||
|
||||
I use my color scheme [midnight.nvim](/git/midnight.nvim.html) on macOS and linux with these applications:
|
||||
|
||||
1. [neovim](https://neovim.io/)
|
||||
2. [ghostty](https://ghostty.org/)
|
||||
3. [sioyek](https://sioyek.info/)
|
||||
4. [ungoogled-chromium](https://github.com/ungoogled-software/ungoogled-chromium)
|
||||
5. [swaywm](https://swaywm.org/)
|
||||
6. [rofi](https://github.com/davatorium/rofi)
|
||||
7. [tmux](https://github.com/tmux/tmux/wiki)
|
||||
8. [fzf](https://github.com/junegunn/fzf)
|
||||
9. [ripgrep](https://github.com/BurntSushi/ripgrep)
|
||||
10. [zsh](https://www.zsh.org/)
|
||||
|
||||
# criteria for solution
|
||||
|
||||
I run or trigger _one command_--every application updates automatically.
|
||||
|
||||
The feasability of this depends on the underlying support software has for dynamic reloading of configuration. In many cases this is not possible.
|
||||
|
||||
# the solution
|
||||
|
||||
As of November 28, 2025, I've created [this script](https://github.com/barrett-ruth/dots/blob/main/scripts/theme) which is bound by a [karabiner](https://karabiner-elements.pqrs.org/) and [keyd](https://github.com/rvaiya/keyd) binding for macOS and linux, respectively.
|
||||
|
||||
## successes
|
||||
|
||||
1. neovim: I use my non-polling, macOS/linux-supporting automatic theme switcher [auto-theme.nvim](https://github.com/barrett-ruth/auto-theme.nvim)
|
||||
2. ghostty: Ghostty supports [light and dark themes based on the system appearance](https://github.com/tmux/tmux/wiki)--easy.
|
||||
3. sioyek: Any changes to user configuration are automatically reloaded--a script updates user preferences in-place
|
||||
4. ungoogled-chromium: I folded and used the default system theme which automatically reads and updates according to the system environment
|
||||
5. swaywm (linux): sway reads from a symlink'ed theme file `sed`ed, updated and reloaded by the script
|
||||
6. rofi: `config.rasi` also reads from a symlink'ed theme files that is updated and reloaded by the script
|
||||
7. tmux: `tmux.conf` reads from symlink'ed theme files that are automatically reloaded with `source-file`
|
||||
|
||||
## failures
|
||||
|
||||
Unfortunately, the following programs I've found nearly impossible to dynamically reload:
|
||||
|
||||
8. fzf: Overwriting fzf's themes, from the interactive shell `fzf` binary to `fzf-{cd,file}-widget` to integration with [fzf-lua](https://github.com/ibhagwan/fzf-lua/), I found this potentially doable but just _way too complex_. Feel free to investigate yourself--I'm going with the default theme.
|
||||
9. ripgrep: I use the default theme. The ripgrep global configuration file does not support environment variables, exterminating the option to provide a `${THEME}`-based path in the global configuration file.
|
||||
10. zsh: it's impossible to update `$THEME` across all existing shells (simply a limit of posix). However, all affected _programs_ will read the proper `$THEME`--I'm fine compromising here.
|
||||
|
|
|
|||
|
|
@ -4,4 +4,4 @@ date: "07/10/2025"
|
|||
slug: "barrettruth.com"
|
||||
---
|
||||
|
||||
source code for this website
|
||||
code for this website
|
||||
|
|
|
|||
|
|
@ -4,8 +4,6 @@ slug: "cp.nvim"
|
|||
date: "10/10/2025"
|
||||
---
|
||||
|
||||
[Source code](https://github.com/barrett-ruth/cp.nvim)
|
||||
|
||||
Things have changed since I last documented my competitive programming setup [here](/software/my-cp-setup.html).
|
||||
|
||||
# my goals
|
||||
|
|
|
|||
|
|
@ -4,10 +4,6 @@ slug: "midnight.nvim"
|
|||
date: "8/11/2025"
|
||||
---
|
||||
|
||||
[Source code](https://github.com/barrett-ruth/midnight.nvim)
|
||||
|
||||
neovim theme for code, not colors.
|
||||
|
||||
# motivation
|
||||
# a theme for code, not colors
|
||||
|
||||
I was tired of all the over-engineered and distracting color schemes. I wrote this to focus on the code in competitive programming and workplace environments. I included highlighting of constants (e.g. strings, numbers, booleans) and language keywords to emphasize the maximally important aspects of code and its structure, respectively.
|
||||
|
|
|
|||
|
|
@ -3,4 +3,4 @@ title: "sl"
|
|||
date: "09/10/2025"
|
||||
---
|
||||
|
||||
[archive](/meditations/suck-less-or-suck-more) of [suckless](https://suckless.org/) repositories
|
||||
[archive](/meditations/suck-less-or-suck-more.html) of [suckless](https://suckless.org/) repositories
|
||||
|
|
|
|||
|
|
@ -3,8 +3,6 @@ title: "my cp setup"
|
|||
date: "15/04/2025"
|
||||
---
|
||||
|
||||
Source code [here](https://github.com/barrett-ruth/dots/blob/main/nvim/lua/cp.lua).
|
||||
|
||||
# my goals
|
||||
|
||||
I wanted the following features in my competitive programming (cp) setup:
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ export async function getStaticPaths() {
|
|||
const { repo } = Astro.props;
|
||||
const { Content } = await repo.render();
|
||||
const cloneCommand = `git clone https://git.barrettruth.com/${repo.slug}.git`;
|
||||
const githubUrl = `https://github.com/barrett-ruth/${repo.slug}`;
|
||||
---
|
||||
|
||||
<PostLayout frontmatter={repo.data} post={repo}>
|
||||
|
|
@ -24,5 +25,8 @@ const cloneCommand = `git clone https://git.barrettruth.com/${repo.slug}.git`;
|
|||
<code><span class="prompt">> </span>{cloneCommand}</code>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
<div><a href={githubUrl}>source code</a></div>
|
||||
|
||||
<Content />
|
||||
</PostLayout>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue