From 145b34e96ade3812410d38690723390dc6379b38 Mon Sep 17 00:00:00 2001 From: Preston Pan Date: Wed, 15 Apr 2026 19:50:49 -0700 Subject: update some scss --- 404.org | 6 +++ agenda.org | 26 +++++++++-- config/emacs.org | 1 + config/nix.org | 1 + style.scss | 135 ++++++++++++++++++++++++++++++++++--------------------- 5 files changed, 113 insertions(+), 56 deletions(-) diff --git a/404.org b/404.org index 28fbd03..a5637a6 100644 --- a/404.org +++ b/404.org @@ -23,6 +23,12 @@ Because why not? I don't have anything against them. Yes, probably, but you know what, we're just going to run with it. * Visual Eye-Candy +To start with, let us ask a motivating question: +#+begin_question +Why does this webpage even exist in the way that it does? How come I made this thing? Why? +#+end_question +Which will be answered very shortly I'm sure! + Do you want to see some cool code blocks, and other such visual elements? Well you've discovered just the webpage! #+begin_src python :results output :exports both import math diff --git a/agenda.org b/agenda.org index 8585f84..a0b1a68 100644 --- a/agenda.org +++ b/agenda.org @@ -77,14 +77,17 @@ SCHEDULED: <2026-04-19 Sun 10:00 ++1w> :PROPERTIES: :LAST_REPEAT: [2026-04-12 Sun 12:25] :END: +:LOGBOOK: - State "DONE" from "TODO" [2026-04-12 Sun 12:25] - State "DONE" from "TODO" [2026-04-01 Wed 13:48] +:END: I need to have a schedule for cleaning my git tree. ** TODO Skincare SCHEDULED: <2026-04-13 Mon 12:30 .+1d> :PROPERTIES: :LAST_REPEAT: [2026-04-12 Sun 12:25] :END: +:LOGBOOK: - State "DONE" from "TODO" [2026-04-12 Sun 12:25] - State "DONE" from "TODO" [2026-04-11 Sat 13:20] - State "DONE" from "TODO" [2026-04-09 Thu 20:01] @@ -96,17 +99,20 @@ SCHEDULED: <2026-04-13 Mon 12:30 .+1d> - State "DONE" from "TODO" [2026-03-27 Fri 11:29] - State "DONE" from "TODO" [2026-03-19 Thu 03:36] - State "DONE" from "TODO" [2025-10-16 Thu 18:06] +:END: Current stack: - Retinol (2x/day) - Salicylic acid Cleanser (2x/day) - Hyaluronic acid (2x/day) - Glycerin for hands ** TODO Supplements -SCHEDULED: <2026-04-13 Mon 12:00 .+1d> +SCHEDULED: <2026-04-16 Thu 12:00 .+1d> :PROPERTIES: -:LAST_REPEAT: [2026-04-12 Sun 12:25] +:LAST_REPEAT: [2026-04-15 Wed 13:43] :STYLE: habit :END: +:LOGBOOK: +- State "DONE" from "TODO" [2026-04-15 Wed 13:43] - State "DONE" from "TODO" [2026-04-12 Sun 12:25] - State "DONE" from "TODO" [2026-04-11 Sat 13:20] - State "DONE" from "TODO" [2026-04-09 Thu 20:01] @@ -146,6 +152,7 @@ SCHEDULED: <2026-04-13 Mon 12:00 .+1d> - State "DONE" from "TODO" [2025-03-11 Tue 00:34] - State "DONE" from "TODO" [2025-03-10 Mon 23:23] - State "DONE" from "TODO" [2025-03-10 Mon 01:08] +:END: Current stack: - Iron - Vitamin D3 @@ -158,6 +165,7 @@ SCHEDULED: <2025-10-17 Fri 14:00 .+2d> :LAST_REPEAT: [2025-10-16 Thu 18:08] :STYLE: habit :END: +:LOGBOOK: - State "DONE" from "TODO" [2025-10-16 Thu 18:08] - State "DONE" from "TODO" [2025-09-28 Sun 20:52] - State "DONE" from "TODO" [2025-09-24 Wed 07:08] @@ -171,15 +179,18 @@ SCHEDULED: <2025-10-17 Fri 14:00 .+2d> - State "DONE" from "TODO" [2025-08-25 Mon 21:16] - State "DONE" from "TODO" [2025-03-21 Fri 04:49] - State "DONE" from "TODO" [2025-03-11 Tue 00:16] +:END: I want to be healthy. ** TODO Run SCHEDULED: <2025-09-29 Mon 16:00 .+1d> :PROPERTIES: :LAST_REPEAT: [2025-09-28 Sun 20:52] :END: +:LOGBOOK: - State "DONE" from "TODO" [2025-09-28 Sun 20:52] - State "DONE" from "TODO" [2025-08-25 Mon 21:17] - State "DONE" from "TODO" [2025-06-26 Thu 23:22] +:END: I want to be able to run or bike every day so that I get my exercise in. ** TODO Stretch SCHEDULED: <2026-04-04 Sat 00:00 .+1d> @@ -187,6 +198,7 @@ SCHEDULED: <2026-04-04 Sat 00:00 .+1d> :LAST_REPEAT: [2026-04-03 Fri 00:01] :STYLE: habit :END: +:LOGBOOK: - State "DONE" from "TODO" [2026-04-03 Fri 00:01] - State "DONE" from "TODO" [2026-03-19 Thu 03:36] - State "DONE" from "TODO" [2025-09-24 Wed 07:08] @@ -198,6 +210,7 @@ SCHEDULED: <2026-04-04 Sat 00:00 .+1d> - State "DONE" from "TODO" [2025-09-08 Mon 04:47] - State "DONE" from "TODO" [2025-02-11 Tue 04:01] - State "DONE" from "TODO" [2025-01-11 Sat 02:26] +:END: I want to stretch every day so that I can become more flexible. Stretches: - Splits attempt @@ -213,6 +226,7 @@ SCHEDULED: <2026-04-12 Sun 22:00 .+1d> :LAST_REPEAT: [2026-04-11 Sat 13:21] :STYLE: habit :END: +:LOGBOOK: - State "DONE" from "TODO" [2026-04-11 Sat 13:21] - State "DONE" from "TODO" [2026-04-02 Thu 22:09] - State "DONE" from "TODO" [2026-04-01 Wed 00:22] @@ -246,12 +260,15 @@ SCHEDULED: <2026-04-12 Sun 22:00 .+1d> - State "DONE" from "TODO" [2025-01-19 Sun 11:53] - State "DONE" from "TODO" [2025-01-16 Thu 19:19] - State "DONE" from "TODO" [2025-01-11 Sat 02:25] +:END: I want to journal every day, at least a little bit, about my life and track it with a git repo. ** TODO Update Agenda -SCHEDULED: <2026-04-13 Mon 11:00 .+1d> +SCHEDULED: <2026-04-16 Thu 11:00 .+1d> :PROPERTIES: -:LAST_REPEAT: [2026-04-12 Sun 12:25] +:LAST_REPEAT: [2026-04-15 Wed 13:43] :END: +:LOGBOOK: +- State "DONE" from "TODO" [2026-04-15 Wed 13:43] - State "DONE" from "TODO" [2026-04-12 Sun 12:25] - State "DONE" from "TODO" [2026-04-11 Sat 13:20] - State "DONE" from "TODO" [2026-04-09 Thu 20:01] @@ -271,6 +288,7 @@ SCHEDULED: <2026-04-13 Mon 11:00 .+1d> - State "DONE" from "TODO" [2026-03-21 Sat 10:26] - State "DONE" from "TODO" [2026-03-19 Thu 03:36] - State "DONE" from "TODO" [2026-03-18 Wed 22:51] +:END: If I didn't update the agenda today, take my agenda with a grain of salt. ** TODO Start Vacuum Robot Start the vacuum robot so that it can clean the floor, every day. diff --git a/config/emacs.org b/config/emacs.org index 375c31e..ce61b4a 100644 --- a/config/emacs.org +++ b/config/emacs.org @@ -451,6 +451,7 @@ This is my org mode configuration, which also configures latex. :hook ((org-mode . remove-annoying-pairing)) :custom + (org-log-into-drawer t) (org-export-allow-bind-keywords t "don't emit warnings") (org-confirm-babel-evaluate nil "I want to evaluate stuff when publishing") ;; Fix terrible indentation issues diff --git a/config/nix.org b/config/nix.org index 71d9b4c..afc94ab 100644 --- a/config/nix.org +++ b/config/nix.org @@ -3252,6 +3252,7 @@ in (if config.monorepo.profiles.lang-python.enable then (with pkgs; [ poetry python3 + python312 semgrep ty ruff diff --git a/style.scss b/style.scss index 467af9d..df95ea4 100644 --- a/style.scss +++ b/style.scss @@ -42,10 +42,28 @@ $isa: ( } } -@mixin hide-scrollbar { - &::-webkit-scrollbar { display: none; } - scrollbar-width: none; - -ms-overflow-style: none; +@mixin custom-scrollbar { + scrollbar-width: thin; + scrollbar-color: color-mix(in srgb, var(--accent) 50%, transparent) color-mix(in srgb, var(--accent) 8%, transparent); + + &::-webkit-scrollbar { + height: 6px; + width: 6px; + } + + &::-webkit-scrollbar-track { + background: color-mix(in srgb, var(--accent) 8%, transparent); + border-radius: 4px; + } + + &::-webkit-scrollbar-thumb { + background-color: color-mix(in srgb, var(--accent) 50%, transparent); + border-radius: 4px; + + &:hover { + background-color: var(--accent); + } + } } @mixin horizontal-scroll { @@ -226,7 +244,7 @@ table { line-height: 1.5; background: color-mix(in srgb, var(--accent) 4%, var(--bg-main)); @include horizontal-scroll; - @include hide-scrollbar; + @include custom-scrollbar; } th, td { @@ -332,7 +350,7 @@ math { } & mtd { text-align: left; } - @include hide-scrollbar; + @include custom-scrollbar; @include horizontal-scroll; } } @@ -519,7 +537,7 @@ h1.title { } .src, .example { - @include hide-scrollbar; + @include custom-scrollbar; @include horizontal-scroll; position: relative; @@ -548,48 +566,61 @@ h1.title { text-align: center; } -// .org-src-container { -// position: relative; -// margin: 1.2em 0; -// color: var(--code-text); -// background: var(--code-bg); -// padding: 1.5rem 1rem 1rem 1rem; -// @include horizontal-scroll; -// @include hide-scrollbar; - -// pre.src { -// overflow: visible; -// margin: 0; -// border: none; -// padding-inline-end: 1rem; -// box-sizing: border-box; -// & > code { -// white-space: pre; -// } -// } -// } -// .org-src-container { -// position: relative; -// margin: 1.2em 0; -// color: var(--code-text); -// background: var(--code-bg); -// padding: 1.5rem 1rem 1rem 1rem; -// overflow-x: auto; - -// pre.src { -// margin: 0; -// border: none; -// overflow: visible; -// } - -// pre.src > code { -// display: inline-block; -// min-width: 100%; -// white-space: pre; -// padding-inline-end: 1rem; -// box-sizing: border-box; -// } -// } +.question { + width: 80%; + margin: 40px auto; + font-style: normal; + color: var(--text-main); + padding: 1.5em 30px 1.5em 60px; + border-left: 4px solid var(--accent); + border-radius: 0 8px 8px 0; + line-height: 1.6; + position: relative; + z-index: 1; + background: color-mix(in srgb, var(--accent) 8%, transparent); + + @include bp('mobile') { + padding: 1em 15px 1em 40px; + width: 100%; + } + + &::before { + font-family: var(--font-serif), serif; + content: "?"; + color: var(--accent); + font-size: 5em; + position: absolute; + left: 15px; + top: -15px; + opacity: 0.5; + z-index: 0; + } + &::after { + content: ""; + position: absolute; + inset: 0; + z-index: -1; + pointer-events: none; + border-radius: inherit; + background-color: var(--accent); + opacity: 0.2; + + // This is your exact SVG, just safely encoded in Base64 + $svg-mask: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCIgdmlld0JveD0iMCAwIDYwIDYwIj48dGV4dCB4PSIxNSIgeT0iMjIiIGZvbnQtZmFtaWx5PSJzeXN0ZW0tdWksIHNhbnMtc2VyaWYiIGZvbnQtd2VpZ2h0PSJib2xkIiBmb250LXNpemU9IjIwIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj4/PC90ZXh0Pjx0ZXh0IHg9IjQ1IiB5PSI1MiIgZm9udC1mYW1pbHk9InN5c3RlbS11aSwgc2Fucy1zZXJpZiIgZm9udC13ZWlnaHQ9ImJvbGQiIGZvbnQtc2l6ZT0iMjAiIHRleHQtYW5jaG9yPSJtaWRkbGUiPj88L3RleHQ+PC9zdmc+"; + + -webkit-mask-image: url(#{$svg-mask}); + mask-image: url(#{$svg-mask}); + + -webkit-mask-size: 60px 60px; + mask-size: 60px 60px; + -webkit-mask-repeat: repeat; + mask-repeat: repeat; + } + + > * { + position: relative; + } +} .equation-container { display: grid; @@ -610,7 +641,7 @@ h1.title { & math[display="block"] { margin: 0; } @include horizontal-scroll; - @include hide-scrollbar; + @include custom-scrollbar; } .equation-label { @@ -627,7 +658,7 @@ h1.title { padding: 1.5rem 1rem 1rem 1rem; overflow-x: auto; overflow-y: hidden; - @include hide-scrollbar; + @include custom-scrollbar; pre.src { margin: 0; @@ -710,7 +741,7 @@ h1.title { overflow-y: auto; overflow-x: hidden; - @include hide-scrollbar; + @include custom-scrollbar; &::before { content: "NAVIGATION"; -- cgit v1.3