astolfo/astolfo.org
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

make gaps a variable

Browse source
This commit is contained in:
Nico 2026-02-03 23:13:51 +11:00
parent 7c7153ee05
commit 3107405da3
Signed by: nico
SSH key fingerprint: SHA256:XuacYOrGqRxC3jVFjfLROn1CSvLz85Dec6N7O9Gwu/0
2 changed files with 16 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

20
bundle.css
View file

@ -2,7 +2,8 @@
color-scheme: light dark; color-scheme: light dark;
--background: light-dark(#FFADD6, black); --background: light-dark(#FFADD6, black);
--text: light-dark(black, white); --text: light-dark(black, white);
--rounding: 25px; --rounding: 30px;
--gaps: 30px;
} }
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
@ -55,12 +56,16 @@ i {
color: var(--primary); color: var(--primary);
} }
/*
* main content area
*/
#content { #content {
width: calc(100vw - 50px); width: calc(100vw - var(--gaps)*2);
height: calc(100vh - 50px); min-height: calc(100vh - var(--gaps)*2);
display: flex; display: flex;
margin: 25px; margin: var(--gaps);
} }
#content > * { #content > * {
@ -72,12 +77,17 @@ i {
#bg-overlay { #bg-overlay {
min-width: 50vw; min-width: 50vw;
margin-left: 12px; margin-left: var(--gaps);
max-width: 100vw; max-width: 100vw;
flex-grow: 1; flex-grow: 1;
padding: 12px; padding: 12px;
} }
/*
* header/nav bar side bar whatevr
*/
header h1 { header h1 {
writing-mode: vertical-lr; writing-mode: vertical-lr;
text-orientation: mixed; text-orientation: mixed;

2
index.html
View file

@ -10,7 +10,7 @@
<body> <body>
<div id="content"> <div id="content">
<header style="background-color: var(--background); display: flex; flex-direction: column; margin-right: 13px;"> <header style="background-color: var(--background); display: flex; flex-direction: column;">
<a style="color: inherit; text-decoration: inherit; height: fit-content;" href="/"> <a style="color: inherit; text-decoration: inherit; height: fit-content;" href="/">
<div style="background-color: var(--accent); width: 100%; margin: none; border-radius: var(--rounding);"> <div style="background-color: var(--accent); width: 100%; margin: none; border-radius: var(--rounding);">
<h1 style="color: black;">astolfo.org</h1> <h1 style="color: black;">astolfo.org</h1>