joshua/joshua.seigler.net
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

better on mobile

Browse source
This commit is contained in:
Joshua Seigler 2025-06-08 20:38:53 -04:00
parent 6f46726e92
commit 331a69ea36
3 changed files with 10 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

2
site/_includes/-header.njk
View file

@ -1,7 +1,7 @@
<header> <header>
<nav> <nav>
<div class="nav-row"> <div class="nav-row">
<a class="nav-home" href="{{ "/" | url }}">{{ site.title }}</a> <div class="nav-home"><a href="{{ "/" | url }}">{{ site.title }}</a></div>
<div class="nav-settings"> <div class="nav-settings">
<div class="nav-toggles"> <div class="nav-toggles">
<label class="nav-toggle-button" title="Light mode">☀️<input type="radio" name="theme" value="light"/></label> <label class="nav-toggle-button" title="Light mode">☀️<input type="radio" name="theme" value="light"/></label>

2
site/_includes/base.njk
View file

@ -6,7 +6,7 @@ title: Joshua's Homepage
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<link rel="stylesheet" href="{{ "/site.css" | url }}?modified={{buildTime}}"/> <link rel="stylesheet" href="{{ "/site.css" | url }}?modified={{buildTime}}"/>
<link rel="webmention" href="https://webmention.io/joshua.seigler.net/webmention" /> <link rel="webmention" href="https://webmention.io/joshua.seigler.net/webmention" />
<title>{{ computedTitle }} - {{ site.title }}</title> <title>{{ computedTitle }} - {{ site.title }}</title>

11
site/_includes/css/site.css
View file

@ -34,7 +34,7 @@ body {
--s3: calc(var(--s2) * var(--ratio)); --s3: calc(var(--s2) * var(--ratio));
--s4: calc(var(--s3) * var(--ratio)); --s4: calc(var(--s3) * var(--ratio));
--s5: calc(var(--s4) * var(--ratio)); --s5: calc(var(--s4) * var(--ratio));
--content-width: clamp(75vw, 40rem, 100vw - 3rem); --content-width: clamp(75vw, 40rem, 100vw - 1rem);
--sidebar-width: clamp( --sidebar-width: clamp(
10rem, 10rem,
calc(0.2 * var(--content-width)), calc(0.2 * var(--content-width)),
@ -272,6 +272,7 @@ body > header {
color: var(--c-text-dark); color: var(--c-text-dark);
padding: 0 var(--inset) 0; padding: 0 var(--inset) 0;
border-radius: 0.5rem 0.5rem 0 0; border-radius: 0.5rem 0.5rem 0 0;
padding-top: env(safe-area-inset-top, 0);
} }
body > header > nav { body > header > nav {
margin: 0.5rem 0 3rem; margin: 0.5rem 0 3rem;
@ -290,16 +291,19 @@ body > header > nav {
.nav-row { .nav-row {
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: row; flex-direction: row-reverse;
flex-wrap: wrap; flex-wrap: wrap;
gap: 0.5rem; gap: 0.5rem;
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
} }
.nav-home {
flex-grow: 1;
order: 2;
}
.nav-home, .nav-active { .nav-home, .nav-active {
font-weight: bold; font-weight: bold;
} }
.nav-settings { .nav-settings {
margin-left: auto;
display: flex; display: flex;
gap: 0.5em; gap: 0.5em;
flex-direction: row; flex-direction: row;
@ -354,6 +358,7 @@ body > footer {
font-size: var(--s-1); font-size: var(--s-1);
margin: auto var(--inset) 0.5rem; margin: auto var(--inset) 0.5rem;
padding-top: 4rem; padding-top: 4rem;
padding-bottom: env(safe-area-inset-bottom, 0);
& a { & a {
white-space: nowrap; white-space: nowrap;
} }