From 16cb49f9aef3beb9c303b4b1233a75d510a47370 Mon Sep 17 00:00:00 2001 From: Preston Pan Date: Thu, 5 Mar 2026 21:52:26 -0800 Subject: fix css --- flake.nix | 3 - style.css | 300 +++++++++++++++++++++++++++++--------------------------------- 2 files changed, 139 insertions(+), 164 deletions(-) diff --git a/flake.nix b/flake.nix index de232f7..e3e7214 100644 --- a/flake.nix +++ b/flake.nix @@ -136,7 +136,6 @@ fi }) ]; - buildPhase = '' export HOME=$TMPDIR/fake-home mkdir -p $HOME/.emacs.d @@ -191,7 +190,6 @@ emacs -q --batch \ --eval '(org-roam-db-sync)' \ --eval '(setq term-file-prefix nil)' \ --eval '(load-theme (quote doom-rouge) t)' \ - --eval '(setq htmlize-output-type (quote font))' \ --eval '(setq custom-safe-themes t)' \ --eval '(force-mode-line-update)' \ --eval '(setq org-html-link-use-abs-url nil)' \ @@ -234,7 +232,6 @@ sha256sum installer.iso > installer.iso.sha256 }; devShells."${system}".default = with pkgs; mkShell { - shellHook = '' ${pre-commit-check.shellHook} git config branch.main.mergeoptions "--no-ff" diff --git a/style.css b/style.css index cc3e152..17de7ac 100644 --- a/style.css +++ b/style.css @@ -1,49 +1,63 @@ @import url("https://fonts.googleapis.com/css2?family=Lora:wght@500&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Inconsolata&display=swap"); +:root { + --bg-main: #FBF8F1; /* Softer, warmer paper color */ + --text-main: #4A3F35; /* Deep espresso brown (easier on eyes than pure black) */ + --toc-bg: #EAE3D2; /* A muted, darker beige for the sidebar */ + --toc-text: #4A3F35; /* Dark brown text for the sidebar */ + --quote-accent: #D4A373; /* A warm terracotta/clay accent */ + --link-color: #8C6239; /* Muted copper for links */ +} + +@media (prefers-color-scheme: dark) { + :root { + --bg-main: #1e1e2e; /* A rich, dark slate */ + --text-main: #cdd6f4; /* Soft, readable off-white */ + --toc-bg: #11111b; /* An even darker shade for the sidebar */ + --quote-accent: #f5c2e7; /* A soft pastel pink/purple accent */ + } +} + body { margin: 40px auto; width: 700px; line-height: 1.6; font-size: 16px; - background: #fffff4; - color: #3a1616; + background: var(--bg-main); + color: var(--text-main); padding: 0 10px; font-size: 18px; line-height: 28px; font-family: "Lora"; font-weight: 500; - /* Smooth the font a little bit, it's a - bit too bold on retina screens */ -webkit-font-smoothing: antialiased; + + @media (max-width: 1250px) { + margin: 20px auto; + font-size: 20px; + } } -/* --------------------------------------------------- */ -/* Make a nice input form with rounded corners and hover - animations*/ -/* --------------------------------------------------- */ input { padding: 10px 16px; margin: 2px 0; box-sizing: border-box; border: 2px solid #dabebe; border-radius: 6px; - background: #fffff4; - color: #3a1616; + background: var(--bg-main); + color: var(--text-main); font-size: 16px; -webkit-transition: 0.5s; transition: 0.5s; outline: none; -} -input:focus { - border: 2px solid #3a1616; + &:focus { + border: 2px solid var(--text-main); + } } -/* --------------------------------------- */ -/* The button is very similar to the input */ -/* --------------------------------------- */ .button { - background-color: #fffff4; + background-color: var(--bg-main); border: none; color: black; padding: 6px 14px; @@ -54,12 +68,12 @@ input:focus { margin: 4px 2px; transition-duration: 0.4s; cursor: pointer; - border: 2px solid #3a1616; + border: 2px solid var(--text-main); border-radius: 6px; -} -.button:hover { - background-color: #3a1616; - color: white; + &:hover { + background-color: var(--text-main); + color: white; + } } /* ----------------------------------------------- */ @@ -77,14 +91,17 @@ input:focus { color: #00529b; background-color: #bde5f8; } + .isa_success { color: #4f8a10; background-color: #dff2bf; } + .isa_warning { color: #9f6000; background-color: #feefb3; } + .isa_error { color: #d8000c; background-color: #ffd2d2; @@ -97,6 +114,18 @@ h3 { font-family: "Lora"; } +h1 { + @media (max-width: 1250px) { + font-size: 20px; + } +} + +h2 { + @media (max-width: 1250px) { + font-size: 18px; + } +} + img { border-radius: 10px; text-align: center; @@ -121,24 +150,16 @@ mjx-container[jax="CHTML"] { a { cursor: pointer; color: #217ab7; - line-height: inherit; - transition: 0.14s; -} -a:hover { - color: white; - background-color: #3297d3; -} -a:visited { - color: #43458b; - border-color: #43458b; -} -a:visited:hover { - color: white; - background-color: #9251ac; -} - -pre { - font-family: "Inconsolata", monospace; + text-decoration: underline; + text-decoration-thickness: 2px; + text-underline-offset: 4px; /* Pushes the underline down slightly */ + transition: all 0.2s ease-in-out; + + /* Make the link change color and the underline grow on hover */ + &:hover { + color: #11507c; + text-decoration-thickness: 4px; + } } ::selection { @@ -147,62 +168,44 @@ pre { } #table-of-contents { - height: 100%; /* Full-height: remove this if you want "auto" height */ - width: 250px; /* Set the width of the sidebar */ - position: fixed; /* Fixed Sidebar (stay in place on scroll) */ - z-index: 1; /* Stay on top */ - top: 0; /* Stay at the top */ + height: 100%; + width: 250px; + position: fixed; + z-index: 1; + top: 0; left: 0; font-size: 0px; - overflow-x: hidden; /* Disable horizontal scroll */ + overflow-x: hidden; padding-top: 20px; border-right: 1px; - background: #133201; -} - -#table-of-contents ul a { - padding: 6px 8px 6px 16px; - text-decoration: none; - font-size: 25px; - display: block; - font-size: 15px; - color: black; -} - -#table-of-contents ul a { - padding: 6px 8px 6px 16px; - text-decoration: none; - font-size: 25px; - display: block; - font-size: 15px; - color: white; - background-color: #133201; -} - - -#table-of-contents ul a:hover { - color: white; - background-color: #133201; -} - -#table-of-contents ul a:visited { - color: white; - border-color: #133201; -} - -#table-of-contents ul a:visited:hover { - color: white; - background-color: #133201; -} + background: var(--toc-bg); + ul { + list-style-type: none; + padding-left: 0; + a { + padding: 6px 8px 6px 16px; + display: block; + font-size: 15px; + &, &:hover, &:visited, &:visited:hover { + color: white; + background-color: var(--toc-bg); + border-color: var(--toc-bg); + text-decoration: none; + } + } + } -#table-of-contents ul { - list-style-type: none; - padding-left: 0; + @media (max-width: 1250px) { + display: none; + } } .content { - margin-left: 160px; /* Same as the width of the sidebar */ + margin-left: 160px; padding: 0px 10px; + @media (max-width: 1250px) { + margin-left: 0; + } } .src, @@ -218,96 +221,71 @@ pre { text-align: center; } -pre.src-stem:before { - content: "Stem"; +pre { + font-family: "Inconsolata", monospace; + &.src-stem::before { + content: "Stem"; + } } -.links-page > ul { - columns: 2; - -webkit-columns: 2; - -moz-columns: 2; +.theorem, .proof { + display: block; + margin-left: 10px; + font-style: normal; + &::before { + float: left; + font-weight: bold; + } } .theorem { - display:block; - margin-left:10px; margin-bottom:20px; - font-style:normal; -} - -.theorem:before { - content:"Theorem.\00a0\00a0"; - float:left; - font-weight:bold; + &::before { + content:"Theorem.\00a0\00a0"; + } } .proof { - display:block; - margin-left:10px; margin-bottom:30px; - font-style:normal; -} -.proof:before { - content:'Proof.\00a0\00a0'; - float:left; - font-weight:bold; + &::before { + content:'Proof.\00a0\00a0'; + } + + &::after { + content: "\25FC"; + float: right; + } } -.proof:after { - content:"\25FC"; - float:right; +.links-page > ul { + columns: 2; + -webkit-columns: 2; + -moz-columns: 2; } + blockquote { - width:60%; - margin:50px auto; - font-style:italic; - color: #555555; - padding:1.2em 30px 1.2em 75px; - border-left:8px solid #78C0A8 ; - line-height:1.6; + width: 80%; /* Slightly wider so it doesn't feel cramped */ + margin: 40px auto; + font-style: italic; + color: var(--text-main); + padding: 1.5em 30px 1.5em 60px; /* Adjusted padding */ + border-left: 4px solid var(--quote-accent); /* Thinner, more elegant border */ + border-radius: 0 8px 8px 0; /* Round the right corners slightly */ + line-height: 1.6; position: relative; - background:#EDEDED; -} -blockquote::before { - font-family:Arial; - content: "\201C"; - color:#78C0A8; - font-size:4em; - position: absolute; - left: 10px; - top:-10px; -} + background: color-mix(in srgb, var(--quote-accent) 15%, transparent); /* Automatically makes a faint background based on your accent color! */ -blockquote::after{ - content: ''; -} -/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */ -@media screen and (max-height: 450px) { - .sidenav { - padding-top: 15px; - } - .sidenav a { - font-size: 18px; - } -} - -@media (max-width: 1250px) { - body { - margin: 20px auto; - font-size: 20px; - } - h1 { - font-size: 20px; - } - h2 { - font-size: 18px; - } - #table-of-contents { - display: none; - } - #table-of-contents ul a { - padding: 0px 0px 0px 0px; - text-decoration: none; + &::before { + font-family: "Lora", serif; /* Match your main font instead of Arial */ + content: "\201C"; + color: var(--quote-accent); + font-size: 5em; + position: absolute; + left: 10px; + top: -20px; + opacity: 0.5; /* Fade the quote mark so it isn't overpowering */ } + + &::after { content: ''; } } -- cgit v1.3 From 034e1c70a6304965475aeeabeaf735228db02bba Mon Sep 17 00:00:00 2001 From: Preston Pan Date: Thu, 5 Mar 2026 22:10:35 -0800 Subject: change css again; add fonts --- flake.nix | 8 ++++++- style.css | 73 +++++++++++++++++++++++++++++++++++++++------------------------ 2 files changed, 52 insertions(+), 29 deletions(-) diff --git a/flake.nix b/flake.nix index e3e7214..1df1f57 100644 --- a/flake.nix +++ b/flake.nix @@ -125,6 +125,8 @@ fi pkgs.ghostscript pkgs.imagemagick pkgs.jq + pkgs.lora + pkgs.inconsolata (pkgs.texlive.combine { inherit (pkgs.texlive) scheme-full @@ -207,7 +209,11 @@ ${publish-org-roam-ui.packages.${system}.default}/bin/build-org-roam-graph \ ''; installPhase = '' -mkdir -p $out +mkdir -p $out/fonts + +cp -L ${pkgs.lora}/share/fonts/truetype/*.ttf $out/fonts/ +cp -L ${pkgs.inconsolata}/share/fonts/truetype/*.ttf $out/fonts/ + cp -r $HOME/website_html/. $out/ cp ${installer-iso}/iso/*.iso $out/installer.iso cd $out diff --git a/style.css b/style.css index 17de7ac..f6fb041 100644 --- a/style.css +++ b/style.css @@ -1,21 +1,32 @@ -@import url("https://fonts.googleapis.com/css2?family=Lora:wght@500&display=swap"); -@import url("https://fonts.googleapis.com/css2?family=Inconsolata&display=swap"); +@font-face { + font-family: 'Lora'; + font-style: normal; + font-weight: 500; + src: url('./fonts/Lora-Medium.ttf') format('truetype'); +} + +@font-face { + font-family: 'Inconsolata'; + font-style: normal; + font-weight: 400; + src: url('./fonts/Inconsolata-Regular.ttf') format('truetype'); +} :root { - --bg-main: #FBF8F1; /* Softer, warmer paper color */ - --text-main: #4A3F35; /* Deep espresso brown (easier on eyes than pure black) */ - --toc-bg: #EAE3D2; /* A muted, darker beige for the sidebar */ - --toc-text: #4A3F35; /* Dark brown text for the sidebar */ - --quote-accent: #D4A373; /* A warm terracotta/clay accent */ - --link-color: #8C6239; /* Muted copper for links */ + --bg-main: #FBF8F1; + --text-main: #4A3F35; + --toc-bg: #EAE3D2; + --toc-text: #4A3F35; + --quote-accent: #D4A373; + --link-color: #8C6239; } @media (prefers-color-scheme: dark) { :root { - --bg-main: #1e1e2e; /* A rich, dark slate */ - --text-main: #cdd6f4; /* Soft, readable off-white */ - --toc-bg: #11111b; /* An even darker shade for the sidebar */ - --quote-accent: #f5c2e7; /* A soft pastel pink/purple accent */ + --bg-main: #1e1e2e; + --text-main: #cdd6f4; + --toc-bg: #11111b; + --quote-accent: #f5c2e7; } } @@ -149,15 +160,14 @@ mjx-container[jax="CHTML"] { /* --------------------------------------------- */ a { cursor: pointer; - color: #217ab7; + color: var(--link-color); text-decoration: underline; text-decoration-thickness: 2px; - text-underline-offset: 4px; /* Pushes the underline down slightly */ + text-underline-offset: 4px; transition: all 0.2s ease-in-out; - /* Make the link change color and the underline grow on hover */ &:hover { - color: #11507c; + color: color-mix(in srgb, var(--link-color) 80%, black); text-decoration-thickness: 4px; } } @@ -186,13 +196,20 @@ a { padding: 6px 8px 6px 16px; display: block; font-size: 15px; - &, &:hover, &:visited, &:visited:hover { - color: white; - background-color: var(--toc-bg); - border-color: var(--toc-bg); + + /* Standard state: Dark text, transparent background */ + &, &:visited { + color: var(--text-main); + background-color: transparent; text-decoration: none; } - } + + /* Hover state: Invert it so it highlights beautifully! */ + &:hover, &:visited:hover { + color: var(--bg-main); + background-color: var(--text-main); + } + } } @media (max-width: 1250px) { @@ -265,26 +282,26 @@ pre { } blockquote { - width: 80%; /* Slightly wider so it doesn't feel cramped */ + width: 80%; margin: 40px auto; font-style: italic; color: var(--text-main); - padding: 1.5em 30px 1.5em 60px; /* Adjusted padding */ - border-left: 4px solid var(--quote-accent); /* Thinner, more elegant border */ - border-radius: 0 8px 8px 0; /* Round the right corners slightly */ + padding: 1.5em 30px 1.5em 60px; + border-left: 4px solid var(--quote-accent); + border-radius: 0 8px 8px 0; line-height: 1.6; position: relative; - background: color-mix(in srgb, var(--quote-accent) 15%, transparent); /* Automatically makes a faint background based on your accent color! */ + background: color-mix(in srgb, var(--quote-accent) 15%, transparent); &::before { - font-family: "Lora", serif; /* Match your main font instead of Arial */ + font-family: "Lora", serif; content: "\201C"; color: var(--quote-accent); font-size: 5em; position: absolute; left: 10px; top: -20px; - opacity: 0.5; /* Fade the quote mark so it isn't overpowering */ + opacity: 0.5; } &::after { content: ''; } -- cgit v1.3 From 638232da6ad7fe4bee8874fc7cf12c2cb1504e04 Mon Sep 17 00:00:00 2001 From: Preston Pan Date: Thu, 5 Mar 2026 22:21:02 -0800 Subject: update everything to work with font --- flake.nix | 2 +- style.css | 8 -------- 2 files changed, 1 insertion(+), 9 deletions(-) diff --git a/flake.nix b/flake.nix index 1df1f57..5fc5881 100644 --- a/flake.nix +++ b/flake.nix @@ -212,7 +212,7 @@ ${publish-org-roam-ui.packages.${system}.default}/bin/build-org-roam-graph \ mkdir -p $out/fonts cp -L ${pkgs.lora}/share/fonts/truetype/*.ttf $out/fonts/ -cp -L ${pkgs.inconsolata}/share/fonts/truetype/*.ttf $out/fonts/ +cp -L ${pkgs.inconsolata}/share/fonts/truetype/inconsolata/*.ttf $out/fonts cp -r $HOME/website_html/. $out/ cp ${installer-iso}/iso/*.iso $out/installer.iso diff --git a/style.css b/style.css index f6fb041..0ee3405 100644 --- a/style.css +++ b/style.css @@ -87,9 +87,6 @@ input { } } -/* ----------------------------------------------- */ -/* Various classes for messages of different kinds */ -/* ----------------------------------------------- */ .isa_info, .isa_success, .isa_warning, @@ -155,9 +152,6 @@ mjx-container[jax="CHTML"] { text-align: left !important; } -/* --------------------------------------------- */ -/* Bold hover animations on links and clickables */ -/* --------------------------------------------- */ a { cursor: pointer; color: var(--link-color); @@ -197,14 +191,12 @@ a { display: block; font-size: 15px; - /* Standard state: Dark text, transparent background */ &, &:visited { color: var(--text-main); background-color: transparent; text-decoration: none; } - /* Hover state: Invert it so it highlights beautifully! */ &:hover, &:visited:hover { color: var(--bg-main); background-color: var(--text-main); -- cgit v1.3 From 9f2315ca519f698de715db83b775ee95d84b750e Mon Sep 17 00:00:00 2001 From: Preston Pan Date: Thu, 5 Mar 2026 23:40:40 -0800 Subject: hopefully export author/date --- config/emacs.org | 2 + flake.nix | 3 +- nix | 2 +- style.css | 230 +++++++++++++++++++++++++++++++++++++++++++++++-------- 4 files changed, 201 insertions(+), 36 deletions(-) diff --git a/config/emacs.org b/config/emacs.org index b792212..f489a5b 100644 --- a/config/emacs.org +++ b/config/emacs.org @@ -169,6 +169,8 @@ This is my org mode configuration, which also configures latex. :base-directory "~/monorepo" :base-extension "org" :publishing-directory "~/website_html" + :with-author t + :with-date t :recursive t :publishing-function org-html-publish-to-html :headline-levels 4 diff --git a/flake.nix b/flake.nix index 5fc5881..89034c7 100644 --- a/flake.nix +++ b/flake.nix @@ -164,7 +164,7 @@ emacs -q --batch \ --eval '(setq noninteractive t)' \ --eval '(setq system-email "lol@troll.com")' \ --eval '(setq system-username "ci-runner")' \ - --eval '(setq system-fullname "CI")' \ + --eval '(setq system-fullname "Preston Pan")' \ --eval '(setq system-gpgkey "00000000")' \ --eval '(defun package-vc-install (&rest args) (message "blocked package-vc-install for %s" args))' \ --eval '(defun package-vc--unpack (&rest args) nil)' \ @@ -247,6 +247,7 @@ alias gprune='git branch --merged | grep -v -E "^\*|main|master|dev" | xargs -r deadnix lychee python3 + miniserve ]; }; }; diff --git a/nix b/nix index 6f08e9d..9ca12ab 160000 --- a/nix +++ b/nix @@ -1 +1 @@ -Subproject commit 6f08e9d393e7c6cf3bfae4374e244bc84e2cb0b2 +Subproject commit 9ca12aba68db98afa72f3f8bcff4bd127fca1a81 diff --git a/style.css b/style.css index 0ee3405..0791632 100644 --- a/style.css +++ b/style.css @@ -21,27 +21,31 @@ --link-color: #8C6239; } -@media (prefers-color-scheme: dark) { - :root { - --bg-main: #1e1e2e; - --text-main: #cdd6f4; - --toc-bg: #11111b; - --quote-accent: #f5c2e7; - } -} +/* @media (prefers-color-scheme: dark) { */ +/* :root { */ +/* --bg-main: #1e1e2e; */ +/* --text-main: #cdd6f4; */ +/* --toc-bg: #11111b; */ +/* --quote-accent: #f5c2e7; */ +/* } */ +/* } */ body { + background: + radial-gradient(rgba(0,0,0,0.02) 1px, transparent 1px), + var(--bg-main); + max-width: 65ch; + line-height: 1.75; + background-size: 6px 6px; margin: 40px auto; - width: 700px; - line-height: 1.6; font-size: 16px; - background: var(--bg-main); color: var(--text-main); padding: 0 10px; + /* fonts */ font-size: 18px; - line-height: 28px; font-family: "Lora"; font-weight: 500; + font-variant-ligatures: common-ligatures; -webkit-font-smoothing: antialiased; @media (max-width: 1250px) { @@ -134,6 +138,45 @@ h2 { } } +h1, h2 { + border-bottom: 1px solid var(--border-color); /* Uses your existing #dabebe */ + padding-bottom: 8px; + margin-top: 2.5rem; + letter-spacing: -0.01em; + position: relative; +} + +h1 { + font-size: 2.1rem; + margin-top: 3rem; + margin-bottom: 1rem; +} + +h2 { + font-size: 1.6rem; + margin-top: 2.5rem; + margin-bottom: 0.6rem; +} + +h3 { + font-size: 1.25rem; + margin-top: 2rem; + margin-bottom: 0.4rem; +} + +p { + margin: 1.2rem 0; +} + +p, ul, ol { + margin-top: 1rem; + margin-bottom: 1rem; +} + +li { + margin: 0.3rem 0; +} + img { border-radius: 10px; text-align: center; @@ -150,6 +193,11 @@ img { mjx-container[jax="CHTML"] { text-align: left !important; + background: rgba(212, 163, 115, 0.05); /* Uses a hint of your --quote-accent */ + padding: 1.5rem; + border-left: 2px solid var(--quote-accent); + margin: 2rem 0 !important; + overflow-x: auto; } a { @@ -172,43 +220,98 @@ a { } #table-of-contents { - height: 100%; + height: 100vh; width: 250px; position: fixed; - z-index: 1; + z-index: 10; /* Ensure it stays above content */ top: 0; left: 0; - font-size: 0px; - overflow-x: hidden; - padding-top: 20px; - border-right: 1px; + padding-top: 0; /* Removed the 20px space at the top */ background: var(--toc-bg); + border-right: 1px solid var(--quote-accent); + overflow-y: auto; /* Allow scrolling if TOC is very long */ + overflow-x: hidden; + + /* Technical Header for TOC */ + &::before { + content: "INDEX // NAVIGATION"; + display: block; + padding: 20px 16px 10px 16px; + font-family: "Inconsolata"; + font-size: 10px; + letter-spacing: 2px; + color: var(--quote-accent); + border-bottom: 1px solid rgba(212, 163, 115, 0.2); + margin-bottom: 10px; + } + ul { list-style-type: none; padding-left: 0; + margin: 0; + a { - padding: 6px 8px 6px 16px; + padding: 8px 16px; display: block; - font-size: 15px; + font-size: 14px; + font-family: "Inconsolata"; /* Using mono for the 'futuristic' look */ + white-space: nowrap; /* Keep text on one line */ + overflow: hidden; /* Hide overflow */ + text-overflow: ellipsis; /* Use "..." for long titles */ + transition: all 0.2s ease; &, &:visited { - color: var(--text-main); - background-color: transparent; + color: var(--text-main); text-decoration: none; } - - &:hover, &:visited:hover { - color: var(--bg-main); - background-color: var(--text-main); + + &:hover { + background-color: var(--text-main); + color: var(--bg-main); + padding-left: 22px; /* Slight 'slide' effect on hover */ } } } - - @media (max-width: 1250px) { - display: none; - } } +/* #table-of-contents { */ +/* height: 100%; */ +/* width: 250px; */ +/* position: fixed; */ +/* z-index: 1; */ +/* top: 0; */ +/* left: 0; */ +/* font-size: 0px; */ +/* overflow-x: hidden; */ +/* padding-top: 20px; */ +/* border-right: 1px; */ +/* background: var(--toc-bg); */ +/* ul { */ +/* list-style-type: none; */ +/* padding-left: 0; */ +/* a { */ +/* padding: 6px 8px 6px 16px; */ +/* display: block; */ +/* font-size: 15px; */ + +/* &, &:visited { */ +/* color: var(--text-main); */ +/* background-color: transparent; */ +/* text-decoration: none; */ +/* } */ + +/* &:hover, &:visited:hover { */ +/* color: var(--bg-main); */ +/* background-color: var(--text-main); */ +/* } */ +/* } */ +/* } */ + +/* @media (max-width: 1250px) { */ +/* display: none; */ +/* } */ +/* } */ + .content { margin-left: 160px; padding: 0px 10px; @@ -219,11 +322,13 @@ a { .src, .example { + background: #1e1e2e; color: #cdd6f4; - background-color: #1e1e2e; - box-shadow: - rgba(0, 0, 0, 0.3) 0px 19px 38px, - rgba(0, 0, 0, 0.22) 0px 15px 12px; + padding: 1rem; + border-radius: 6px; + overflow-x: auto; + font-size: 0.9rem; + box-shadow: none; } #postamble { @@ -241,6 +346,10 @@ pre { display: block; margin-left: 10px; font-style: normal; + background: color-mix(in srgb, var(--quote-accent) 8%, transparent); + border-left: 3px solid var(--quote-accent); + padding: 1rem 1.3rem; + margin: 2rem 0; &::before { float: left; font-weight: bold; @@ -298,3 +407,56 @@ blockquote { &::after { content: ''; } } + +figure { + margin: 2rem auto; + text-align: center; +} + +figcaption { + font-size: 0.9rem; + color: color-mix(in srgb, var(--text-main) 80%, gray); + margin-top: 0.5rem; +} + +.title { + font-size: 2.6rem; + margin-bottom: 0.5rem; +} + +.subtitle { + font-size: 1.2rem; + color: color-mix(in srgb, var(--text-main) 70%, gray); +} + +.author, .date { + display: inline; /* Keep them on the same line */ + font-family: "Lora"; + font-style: italic; + font-size: 1.1rem; + color: color-mix(in srgb, var(--text-main) 70%, gray); +} + +/* Add the "by" prefix using a pseudo-element */ +.author::before { + content: "by "; + font-family: "Inconsolata"; /* Technical contrast */ + font-style: normal; + font-weight: bold; + text-transform: uppercase; + font-size: 0.8rem; + letter-spacing: 1px; + margin-right: 4px; +} + +/* Add a comma separator between author and date if both exist */ +.author:not(:last-child)::after { + content: ", "; + font-style: normal; +} + +header, .title + p, .subtitle + p { + margin-bottom: 3rem; + border-bottom: 1px double var(--quote-accent); + padding-bottom: 1rem; +} -- cgit v1.3 From f6832afefb9567f53ee1f78d4cea6f18b31e37f3 Mon Sep 17 00:00:00 2001 From: Preston Pan Date: Thu, 5 Mar 2026 23:49:27 -0800 Subject: update lock --- flake.lock | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/flake.lock b/flake.lock index f115ac1..9610798 100644 --- a/flake.lock +++ b/flake.lock @@ -593,11 +593,11 @@ }, "nixpkgs_6": { "locked": { - "lastModified": 1772542754, - "narHash": "sha256-WGV2hy+VIeQsYXpsLjdr4GvHv5eECMISX1zKLTedhdg=", + "lastModified": 1772624091, + "narHash": "sha256-QKyJ0QGWBn6r0invrMAK8dmJoBYWoOWy7lN+UHzW1jc=", "owner": "nixos", "repo": "nixpkgs", - "rev": "8c809a146a140c5c8806f13399592dbcb1bb5dc4", + "rev": "80bdc1e5ce51f56b19791b52b2901187931f5353", "type": "github" }, "original": { -- cgit v1.3 From 1bdf879821863a6df124516a9244f5d7371eb2c8 Mon Sep 17 00:00:00 2001 From: Preston Pan Date: Fri, 6 Mar 2026 00:46:45 -0800 Subject: maybe fix viewport issue --- config/emacs.org | 3 + nix | 2 +- style.css | 190 +++++++++++++++++++++++++++++++++---------------------- 3 files changed, 120 insertions(+), 75 deletions(-) diff --git a/config/emacs.org b/config/emacs.org index f489a5b..c9a8836 100644 --- a/config/emacs.org +++ b/config/emacs.org @@ -164,6 +164,9 @@ This is my org mode configuration, which also configures latex. (org-pretty-entities t "prettify org mode") (org-agenda-files (list "~/monorepo/agenda.org" "~/org/notes.org" "~/org/agenda.org") "set default org files") (org-default-notes-file (concat org-directory "/notes.org") "Notes file") + (org-html-viewport '((width . "device-width") + (initial-scale . "1.0") + (minimum-scale . "1.0")) "Prevent zooming out past default size") (org-publish-project-alist '(("website-org" :base-directory "~/monorepo" diff --git a/nix b/nix index 9ca12ab..ef1f7b7 160000 --- a/nix +++ b/nix @@ -1 +1 @@ -Subproject commit 9ca12aba68db98afa72f3f8bcff4bd127fca1a81 +Subproject commit ef1f7b7721521a0805f1b87ed0d174d63023db16 diff --git a/style.css b/style.css index 0791632..b6cd6b4 100644 --- a/style.css +++ b/style.css @@ -191,13 +191,31 @@ img { max-width: none; } -mjx-container[jax="CHTML"] { +mjx-container[jax="CHTML"][display="true"] { text-align: left !important; - background: rgba(212, 163, 115, 0.05); /* Uses a hint of your --quote-accent */ + background: rgba(212, 163, 115, 0.05); padding: 1.5rem; border-left: 2px solid var(--quote-accent); margin: 2rem 0 !important; overflow-x: auto; + + /* Hide scrollbar for Firefox */ + scrollbar-width: none; + /* Hide scrollbar for IE/Edge */ + -ms-overflow-style: none; +} + +/* Hide scrollbar for Chrome, Safari and Opera */ +mjx-container[jax="CHTML"][display="true"]::-webkit-scrollbar { + display: none; +} + +/* Inline MathJax (Inside paragraphs) */ +mjx-container[jax="CHTML"]:not([display="true"]) { + padding: 0; + margin: 0; + background: transparent; + border: none; } a { @@ -223,24 +241,33 @@ a { height: 100vh; width: 250px; position: fixed; - z-index: 10; /* Ensure it stays above content */ + z-index: 10; top: 0; left: 0; - padding-top: 0; /* Removed the 20px space at the top */ + padding-top: 0; background: var(--toc-bg); border-right: 1px solid var(--quote-accent); - overflow-y: auto; /* Allow scrolling if TOC is very long */ + overflow-y: auto; overflow-x: hidden; - - /* Technical Header for TOC */ + scrollbar-width: none; + + &::-webkit-scrollbar { display: none; } + + h2 { + display: none !important; + } + + /* 2. Insert the aligned futuristic header */ &::before { - content: "INDEX // NAVIGATION"; + content: "NAVIGATION"; display: block; - padding: 20px 16px 10px 16px; + /* Padding math: 19px left matches the link text exactly */ + padding: 24px 16px 12px 19px; font-family: "Inconsolata"; - font-size: 10px; + font-size: 11px; + font-weight: bold; letter-spacing: 2px; - color: var(--quote-accent); + color: var(--text-main); border-bottom: 1px solid rgba(212, 163, 115, 0.2); margin-bottom: 10px; } @@ -251,14 +278,16 @@ a { margin: 0; a { - padding: 8px 16px; display: block; - font-size: 14px; - font-family: "Inconsolata"; /* Using mono for the 'futuristic' look */ - white-space: nowrap; /* Keep text on one line */ - overflow: hidden; /* Hide overflow */ - text-overflow: ellipsis; /* Use "..." for long titles */ - transition: all 0.2s ease; + width: 218px; + padding: 10px 16px; + font-size: 13px; + font-family: "Inconsolata"; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + border-left: 3px solid transparent; &, &:visited { color: var(--text-main); @@ -268,49 +297,29 @@ a { &:hover { background-color: var(--text-main); color: var(--bg-main); - padding-left: 22px; /* Slight 'slide' effect on hover */ + padding-left: 22px; + border-left: 3px solid var(--quote-accent); } } - } -} -/* #table-of-contents { */ -/* height: 100%; */ -/* width: 250px; */ -/* position: fixed; */ -/* z-index: 1; */ -/* top: 0; */ -/* left: 0; */ -/* font-size: 0px; */ -/* overflow-x: hidden; */ -/* padding-top: 20px; */ -/* border-right: 1px; */ -/* background: var(--toc-bg); */ -/* ul { */ -/* list-style-type: none; */ -/* padding-left: 0; */ -/* a { */ -/* padding: 6px 8px 6px 16px; */ -/* display: block; */ -/* font-size: 15px; */ - -/* &, &:visited { */ -/* color: var(--text-main); */ -/* background-color: transparent; */ -/* text-decoration: none; */ -/* } */ - -/* &:hover, &:visited:hover { */ -/* color: var(--bg-main); */ -/* background-color: var(--text-main); */ -/* } */ -/* } */ -/* } */ + ul { + a { + padding-left: 32px; + font-size: 12px; + opacity: 0.8; + width: 202px; /* Adjusted width for nesting */ + + &:hover { + padding-left: 38px; + } + } + } + } -/* @media (max-width: 1250px) { */ -/* display: none; */ -/* } */ -/* } */ + @media (max-width: 1250px) { + display: none; + } +} .content { margin-left: 160px; @@ -329,6 +338,14 @@ a { overflow-x: auto; font-size: 0.9rem; box-shadow: none; + + scrollbar-width: none; + -ms-overflow-style: none; +} + +.src::-webkit-scrollbar, +.example::-webkit-scrollbar { + display: none; } #postamble { @@ -430,29 +447,28 @@ figcaption { } .author, .date { - display: inline; /* Keep them on the same line */ + display: inline; font-family: "Lora"; font-style: italic; font-size: 1.1rem; color: color-mix(in srgb, var(--text-main) 70%, gray); } -/* Add the "by" prefix using a pseudo-element */ -.author::before { - content: "by "; - font-family: "Inconsolata"; /* Technical contrast */ - font-style: normal; - font-weight: bold; - text-transform: uppercase; - font-size: 0.8rem; - letter-spacing: 1px; - margin-right: 4px; -} - -/* Add a comma separator between author and date if both exist */ -.author:not(:last-child)::after { - content: ", "; - font-style: normal; +.author { + &::before { + content: "by "; + font-family: "Inconsolata"; + font-style: normal; + font-weight: bold; + text-transform: uppercase; + font-size: 0.8rem; + letter-spacing: 1px; + margin-right: 4px; + } + &:not(:last-child)::after { + content: ", "; + font-style: normal; + } } header, .title + p, .subtitle + p { @@ -460,3 +476,29 @@ header, .title + p, .subtitle + p { border-bottom: 1px double var(--quote-accent); padding-bottom: 1rem; } + +@media (max-width: 768px) { + body { + max-width: 100%; + padding: 0 15px; + box-sizing: border-box; + } + + h1 { font-size: 2rem; } + h2 { font-size: 1.5rem; } + + img, blockquote, .src, .example, mjx-container[jax="CHTML"][display="true"] { + max-width: 100%; + box-sizing: border-box; + } + + blockquote { + padding: 1em 15px 1em 40px; + width: 100%; + } + + .src, .example, mjx-container[jax="CHTML"][display="true"] { + width: 100%; + overflow-x: auto; + } +} -- cgit v1.3 From 5bbcdf0ac7c971bfa0c01f820fb05a4f75a29215 Mon Sep 17 00:00:00 2001 From: Preston Pan Date: Fri, 6 Mar 2026 00:55:36 -0800 Subject: hopefully fix build --- config/emacs.org | 6 +++--- nix | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/config/emacs.org b/config/emacs.org index c9a8836..5bf4838 100644 --- a/config/emacs.org +++ b/config/emacs.org @@ -164,9 +164,9 @@ This is my org mode configuration, which also configures latex. (org-pretty-entities t "prettify org mode") (org-agenda-files (list "~/monorepo/agenda.org" "~/org/notes.org" "~/org/agenda.org") "set default org files") (org-default-notes-file (concat org-directory "/notes.org") "Notes file") - (org-html-viewport '((width . "device-width") - (initial-scale . "1.0") - (minimum-scale . "1.0")) "Prevent zooming out past default size") + (org-html-viewport '((width "device-width") + (initial-scale "1.0") + (minimum-scale "1.0")) "Prevent zooming out past default size") (org-publish-project-alist '(("website-org" :base-directory "~/monorepo" diff --git a/nix b/nix index ef1f7b7..d1412b3 160000 --- a/nix +++ b/nix @@ -1 +1 @@ -Subproject commit ef1f7b7721521a0805f1b87ed0d174d63023db16 +Subproject commit d1412b325e95cea7d820c89b561d43a291203e8e -- cgit v1.3