Skip to content

Commit

Permalink
chore: CSS updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@nicosalm
nicosalm committed Oct 22, 2024
1 parent d519c47 commit b4fe085
Show file tree
Hide file tree
Showing 8 changed files with 242 additions and 276 deletions.
26 changes: 20 additions & 6 deletions src/components/Header.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,9 @@
import Theme from "./Theme.astro";
const currentPath = Astro.url.pathname;
---

<header>
<div class="header-background"></div>
<div class="container">
<div class="header-container">
<nav>
<a href="/" class="site-title">salm.dev</a>
<div class="nav-links">
Expand All @@ -15,7 +14,6 @@ const currentPath = Astro.url.pathname;
</nav>
</div>
</header>

<style>
header {
position: fixed;
Expand All @@ -35,45 +33,59 @@ const currentPath = Astro.url.pathname;
background-color: var(--color-header);
opacity: 0.80;
z-index: -1;
border-bottom: 1px solid rgba(var(--color-border-rgb), 0.3); /* More transparent border */
border-bottom: 1px solid rgba(var(--color-border-rgb), 0.3);
}

.container {
.header-container {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 1rem;
padding: 0 var(--side-padding);
position: relative;
box-sizing: border-box;
width: 100%;
}

nav {
display: flex;
justify-content: space-between;
align-items: center;
}

.site-title {
font-size: 1.5rem;
font-weight: bold;
color: var(--color-primary);
text-decoration: none;
transition: color 0.3s ease;
border-bottom: none;
}

.site-title:hover {
color: var(--color-accent);
border-bottom: none;
}

.nav-links {
display: flex;
gap: 2rem;
align-items: center;
}

.nav-links a {
color: var(--color-secondary);
border-bottom: none;
}

.nav-links a:hover,
.nav-links a.active {
color: var(--color-accent);
border-bottom: none;
}

.nav-links a.active {
font-weight: bold;
}

/* styles for the theme toggle */
:global(.nav-links .theme-toggle) {
width: 2.5rem;
Expand All @@ -87,9 +99,11 @@ const currentPath = Astro.url.pathname;
justify-content: center;
transition: background-color 0.3s ease;
}

:global(.nav-links .theme-toggle:hover) {
background-color: var(--color-accent);
}

@media (max-width: 768px) {
.site-title {
font-size: 1.2rem;
Expand Down
85 changes: 70 additions & 15 deletions src/layouts/BlogLayout.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const { content } = Astro.props as Props;
<time datetime={content.pubDate}>
{new Date(content.pubDate).toLocaleDateString('en-us', { year:"numeric", month:"long", day:"numeric"})}
</time>
<span class="reading-time">{content.minutesRead} min read</span>
<span class="reading-time">{content.minutesRead} read</span>
</p>
<p class="description">{content.description}</p>
</header>
Expand All @@ -48,24 +48,37 @@ const { content } = Astro.props as Props;
</Layout>

<style>
.container {
max-width: var(--max-width);
margin: 0 auto;
padding: 6rem var(--side-margin);
}
.blog-post {
max-width: 720px;
margin: 0 auto;
}

.blog-post header {
text-align: center;
margin-bottom: 2rem;
position: relative;
padding-top: 2rem;
}

.blog-post h1 {
text-align: center;
margin: 1rem 0;
font-size: 2.5rem;
line-height: 1.2;
}

.back-link {
display: inline-block;
color: var(--color-secondary);
text-decoration: none;
font-weight: bold;
position: relative;
padding-left: 1.5em;
margin-bottom: 2rem;
border-bottom: none;
transition: color 0.3s ease;
}

.back-link::before {
content: "←";
position: absolute;
Expand All @@ -74,6 +87,7 @@ const { content } = Astro.props as Props;
transform: translateY(-50%);
transition: transform 0.2s ease;
}

.back-link::after {
content: "";
position: absolute;
Expand All @@ -85,53 +99,94 @@ const { content } = Astro.props as Props;
transform: scaleX(0);
transition: transform 0.2s ease;
}

.back-link:hover {
color: var(--color-accent);
border-bottom: none;
}

.back-link:hover::after {
transform: scaleX(1);
background-color: var(--color-accent);
}

.back-link:hover::before {
transform: translateY(-50%) translateX(-3px);
}
.back-link:hover {
border-bottom: none;
transform: translate(-3px, -50%);
}

.post-meta {
text-align: center;
color: var(--color-secondary);
margin-bottom: 1rem;
font-size: 1.1rem;
}

.reading-time {
margin-left: 1rem;
}

.description {
text-align: center;
font-style: italic;
margin-bottom: 2rem;
color: var(--color-secondary);
font-size: 1.2rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}

.post-content {
margin-top: 3rem;
}

.tags {
margin-top: 2rem;
border-top: 1px solid var(--color-secondary);
padding-top: 1rem;
margin-top: 3rem;
border-top: 1px solid var(--color-border);
padding-top: 2rem;
}

.tags h3 {
margin-bottom: 0.5rem;
margin-top: 0;
margin-bottom: 1rem;
}

.tags ul {
list-style: none;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}

.tags li a {
display: inline-block;
padding: 0.25rem 0.5rem;
padding: 0.25rem 0.75rem;
background-color: var(--color-accent);
color: var(--color-bg);
border-radius: 0.25rem;
font-size: 0.9rem;
text-decoration: none;
transition: opacity 0.3s ease;
border-bottom: none;
}

.tags li a:hover {
opacity: 0.8;
border-bottom: none;
}

@media (max-width: 768px) {
.blog-post h1 {
font-size: 2rem;
}

.description {
font-size: 1.1rem;
}

.post-meta {
font-size: 1rem;
}
}
</style>
5 changes: 0 additions & 5 deletions src/pages/blog/[...page].astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,11 +60,6 @@ const { page } = Astro.props;
</Layout>

<style>
.container {
max-width: var(--max-width);
margin: 0 auto;
padding: 6rem var(--side-margin);
}
.page-title {
font-size: 2.5rem;
margin-bottom: 1rem;
Expand Down
67 changes: 54 additions & 13 deletions src/pages/blog/cli-productivity/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,8 @@ layout: ../../../layouts/BlogLayout.astro
pubDate: 2024/10/10
title: "Spotlight: CLI Productivity"
description: "My command-line-centric workflow where I do my best work."
readingTime: "8 minutes"
tags: ["productivity", "neovim", "tmux", "terminal efficiency"]
minutesRead: "7"
minutesRead: "9"
---

_You can achieve peak productivity with nothing but the command line and your web browser. I will describe my minimal, focused, keyboard-centric workflow where I do my best work._
Expand Down Expand Up @@ -40,14 +39,25 @@ A terminal multiplexer is a program that transparently “sits between” your a

TMUX is incredibly useful, and if you plan on doing **any** serious work in the terminal, it will save you a huge amount of time. Go ahead and install it.

```bash title="TMUX Installation"
pacman -S tmux # Arch Linux
apt install tmux # Debian or Ubuntu
dnf install tmux # Fedora
yum install tmux # RHEL or CentOS
brew install tmux # macOS (using Homebrew)
port install tmux # macOS (using MacPorts)
zypper install tmux # openSUSE
```
Arch Linux pacman -S tmux
Debian or Ubuntu apt install tmux
Fedora dnf install tmux
RHEL or CentOS yum install tmux
macOS (using Homebrew) brew install tmux
macOS (using MacPorts) port install tmux
openSUSE zypper install tmux

You can create a new session with `tmux new -s session_name`, detach with `CTRL-B D`, and reattach with `tmux attach -t session_name`.

Some other useful commands include:
```bash title="Additional TMUX Commands"
tmux ls # list sessions
tmux kill-session -t session_name # kill a session
tmux kill-server # kill the server
tmux a -t session_name # attach to a session
tmux a # attach to the last session
```

### Customization
Expand All @@ -58,15 +68,46 @@ When you start TMUX, the program looks for a .dotfile[^1] at `~/.tmux.conf`. Thi

I’ve been using Vim for about two years. When we mention Vim, it’s usually in one of two contexts: `vim` (the program), or Vim Motions.

Vim Motions are the keybindings that allow you to move around the text. They are the most important part of Vim. Everyone should use Vim Motions. They are extremely efficient. They’re available on all text editors and IDEs.

Vim, by contrast, is a highly configurable, extensible text editor built to make creating and changing any kind of text very efficient.

### Vim Motions

Everyone should use Vim Motions. They are extremely efficient. They’re available on all text editors and IDEs.
There is only one type of grammar in Vim: the grammar of Vim Motions. It’s a language that allows you to move around the text.

### Vim
Here's a quick reference of some common Vim Motions:

Vim, by contrast, is a highly configurable, extensible text editor built to make creating and changing any kind of text very efficient.
<br/>

| Category | Command | Description |
|----------|---------|-------------|
| motion | h | Left |
| | j | Down |
| | k | Up |
| | l | Right |
| | w | Move forward to the beginning of the next word |
| | } | Jump to the next paragraph |
| | $ | Go to the end of the line |
| operator | y | Yank text (copy) |
| | d | Delete text and save to register |
| | c | Delete text, save to register, and start insert mode |

<br/>

More generally, the syntax looks like: `[count] + operator + motion`. For example, `3dw` would delete three words. `2yy` would yank two lines. `c$` would delete to the end of the line and start insert mode. `dap` would delete a paragraph.

Notice how, for some, the phonetic sound of the command matches the action. `d` for delete, `y` for yank, `c` for change. This is a mnemonic device to help you remember the commands. Delete a paragraph? `dap`. Change a word? `caw`.

### Vim (The Program)

Vim, by contrast, is a highly configurable, extensible text editor in your terminal built to make creating and changing any kind of text very efficient.

My friend [Lucas](https://scharenbroch.dev/) rather aptly put:

> “Vim is the bliss of Ctrl C/V but applied to every facet of the editor.”
It was rather aptly put that: “Vim is the bliss of Ctrl C/V but applied to every facet of the text editor.” I think that's a really good way to describe it. Vim recognizes and eliminates the vast majority of typing inefficiencies. The result is blazingly fast precision.
I think that's a really good way to describe it. Vim recognizes and eliminates the vast majority of typing inefficiencies. The result is blazingly fast precision, and a workflow that feels like a dance.

A contention I often receive is, “well, how do I debug in Vim?” You don’t. You have separate programs[^4]. Each program is good at what it does. If you build a hodgepodge of functionality you end up with an IDE and that’s precisely what I’m trying to escape.

Expand Down
2 changes: 1 addition & 1 deletion src/pages/blog/ergonomics/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ pubDate: 2024/08/18
title: "Preserving my Future Self"
description: "I underwent an ergonomic overhaul to improve health and reduce strain."
tags: ["ergonomics", "typing setup", "health", "split keyboards", "colemak-dh"]
minutesRead: "7"
minutesRead: "6"
---

### Motivation
Expand Down
Loading

0 comments on commit b4fe085

Please sign in to comment.