From 117f7bbc15ceeebc566e88dd9c6007986638e97c Mon Sep 17 00:00:00 2001 From: Preston Pan Date: Fri, 6 Mar 2026 17:06:15 -0800 Subject: add syntax file; style.css is good? Add font --- style.css | 581 ++++++++++++++++++++++++++++++++------------------------------ 1 file changed, 300 insertions(+), 281 deletions(-) (limited to 'style.css') diff --git a/style.css b/style.css index b6cd6b4..e527d7a 100644 --- a/style.css +++ b/style.css @@ -12,23 +12,34 @@ src: url('./fonts/Inconsolata-Regular.ttf') format('truetype'); } +@font-face { + font-family: 'CormorantGaramond'; + font-style: normal; + font-weight: 600; + src: url('./fonts/CormorantGaramond-Medium.ttf') format('truetype'); +} + :root { --bg-main: #FBF8F1; --text-main: #4A3F35; --toc-bg: #EAE3D2; --toc-text: #4A3F35; - --quote-accent: #D4A373; + --accent: #D4A373; --link-color: #8C6239; + + --code-bg: #1e1e2e; + --code-text: #cdd6f4; + --code-radius: 6px; + + --font-serif: "Lora", serif; + --font-mono: "Inconsolata", monospace; + --font-header: "CormorantGaramond"; } -/* @media (prefers-color-scheme: dark) { */ -/* :root { */ -/* --bg-main: #1e1e2e; */ -/* --text-main: #cdd6f4; */ -/* --toc-bg: #11111b; */ -/* --quote-accent: #f5c2e7; */ -/* } */ -/* } */ +::selection { + color: white; + background: #ff4081; +} body { background: @@ -41,9 +52,10 @@ body { font-size: 16px; color: var(--text-main); padding: 0 10px; + /* fonts */ font-size: 18px; - font-family: "Lora"; + font-family: var(--font-serif); font-weight: 500; font-variant-ligatures: common-ligatures; -webkit-font-smoothing: antialiased; @@ -52,6 +64,12 @@ body { margin: 20px auto; font-size: 20px; } + + @media (max-width: 768px) { + max-width: 100%; + padding: 0 15px; + box-sizing: border-box; + } } input { @@ -66,96 +84,59 @@ input { -webkit-transition: 0.5s; transition: 0.5s; outline: none; - &:focus { - border: 2px solid var(--text-main); - } -} - -.button { - background-color: var(--bg-main); - border: none; - color: black; - padding: 6px 14px; - text-align: center; - text-decoration: none; - display: inline-block; - font-size: 16px; - margin: 4px 2px; - transition-duration: 0.4s; - cursor: pointer; - border: 2px solid var(--text-main); - border-radius: 6px; - &:hover { - background-color: var(--text-main); - color: white; - } -} - -.isa_info, -.isa_success, -.isa_warning, -.isa_error { - width: 90%; - margin: 10px 0px; - padding: 12px; -} -.isa_info { - color: #00529b; - background-color: #bde5f8; -} -.isa_success { - color: #4f8a10; - background-color: #dff2bf; + &:focus { border: 2px solid var(--text-main); } } -.isa_warning { - color: #9f6000; - background-color: #feefb3; +figure { + margin: 2rem auto; + text-align: center; } -.isa_error { - color: #d8000c; - background-color: #ffd2d2; +figcaption { + font-size: 0.9rem; + color: color-mix(in srgb, var(--text-main) 80%, gray); + margin-top: 0.5rem; } -h1, -h2, -h3 { +h1, h2, h3 { line-height: 1.2; - font-family: "Lora"; -} - -h1 { - @media (max-width: 1250px) { - font-size: 20px; - } -} - -h2 { - @media (max-width: 1250px) { - font-size: 18px; - } + font-family: var(--font-serif); } h1, h2 { - border-bottom: 1px solid var(--border-color); /* Uses your existing #dabebe */ + border-bottom: 1px solid var(--border-color); padding-bottom: 8px; margin-top: 2.5rem; letter-spacing: -0.01em; position: relative; } +p, ul, ol { + margin-top: 1rem; + margin-bottom: 1rem; +} + h1 { - font-size: 2.1rem; + font-size: 2.3rem; margin-top: 3rem; margin-bottom: 1rem; + font-family: var(--font-header); + font-weight: 600; + letter-spacing: 0; + line-height: 1.3; + -webkit-font-smoothing: antialiased; + + @media (max-width: 1250px) { font-size: 1.8rem; } } h2 { font-size: 1.6rem; margin-top: 2.5rem; margin-bottom: 0.6rem; + + @media (max-width: 1250px) { font-size: 18px; } + @media (max-width: 768px) { font-size: 1.5rem; } } h3 { @@ -164,17 +145,11 @@ h3 { margin-bottom: 0.4rem; } -p { - margin: 1.2rem 0; -} - -p, ul, ol { - margin-top: 1rem; - margin-bottom: 1rem; -} - -li { - margin: 0.3rem 0; +img, blockquote { + @media (max-width: 768px) { + max-width: 100%; + box-sizing: border-box; + } } img { @@ -186,36 +161,40 @@ img { display: block; } -.org-svg { - width: 100%; - max-width: none; -} +blockquote { + width: 80%; + margin: 40px auto; + font-style: italic; + 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; + background: color-mix(in srgb, var(--accent) 15%, transparent); -mjx-container[jax="CHTML"][display="true"] { - text-align: left !important; - 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; -} + &::before { + font-family: var(--font-serif), serif; + content: "\201C"; + color: var(--accent); + font-size: 5em; + position: absolute; + left: 10px; + top: -20px; + opacity: 0.5; + } + + &::after { content: ''; } -/* Hide scrollbar for Chrome, Safari and Opera */ -mjx-container[jax="CHTML"][display="true"]::-webkit-scrollbar { - display: none; + @media (max-width: 768px) { + padding: 1em 15px 1em 40px; + width: 100%; + } } -/* Inline MathJax (Inside paragraphs) */ -mjx-container[jax="CHTML"]:not([display="true"]) { - padding: 0; - margin: 0; - background: transparent; - border: none; +pre { + font-family: var(--font-mono), monospace; + &.src-stem::before { content: "Stem"; } } a { @@ -232,139 +211,130 @@ a { } } -::selection { - color: white; - background: #ff4081; -} - -#table-of-contents { - height: 100vh; - width: 250px; - position: fixed; - z-index: 10; - top: 0; - left: 0; - padding-top: 0; - background: var(--toc-bg); - border-right: 1px solid var(--quote-accent); - overflow-y: auto; - overflow-x: hidden; - scrollbar-width: none; - - &::-webkit-scrollbar { display: none; } - - h2 { - display: none !important; - } +p { margin: 1.2rem 0; } - /* 2. Insert the aligned futuristic header */ - &::before { - content: "NAVIGATION"; - display: block; - /* Padding math: 19px left matches the link text exactly */ - padding: 24px 16px 12px 19px; - font-family: "Inconsolata"; - font-size: 11px; - font-weight: bold; - letter-spacing: 2px; - color: var(--text-main); - border-bottom: 1px solid rgba(212, 163, 115, 0.2); - margin-bottom: 10px; - } +li { margin: 0.3rem 0; } - ul { - list-style-type: none; - padding-left: 0; - margin: 0; +.org-svg { + width: 100%; + max-width: none; +} - a { +.org-src-container { + position: relative; + margin: 1.2em 0; + + pre.src { + position: relative !important; + overflow: visible !important; + background: var(--code-bg); + border-radius: 6px; + margin: 0 !important; + padding: 0 !important; + border: none !important; + + & > code { display: block; - 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); - text-decoration: none; - } + overflow-x: auto; + padding: 1.5rem 1rem 1rem 1rem; + white-space: pre; + scrollbar-width: none; + -ms-overflow-style: none; - &:hover { - background-color: var(--text-main); - color: var(--bg-main); - padding-left: 22px; - border-left: 3px solid var(--quote-accent); - } + &::-webkit-scrollbar { display: none; } } - ul { - a { - padding-left: 32px; - font-size: 12px; - opacity: 0.8; - width: 202px; /* Adjusted width for nesting */ - - &:hover { - padding-left: 38px; - } - } + &::before { + content: attr(data-language); + display: block !important; + position: absolute !important; + top: 0.5rem; + right: 0.5rem; + z-index: 20; + + font-family: var(--font-mono), monospace; + font-size: 0.7rem; + color: var(--code-text); + background: var(--code-bg); + padding: 2px 8px; + border-radius: 4px; + opacity: 0.6; + pointer-events: none; } } - - @media (max-width: 1250px) { - display: none; - } } .content { - margin-left: 160px; + margin-left: 280px; padding: 0px 10px; - @media (max-width: 1250px) { - margin-left: 0; - } + + @media (max-width: 1250px) { margin-left: 0; } } -.src, -.example { - background: #1e1e2e; - color: #cdd6f4; - padding: 1rem; - border-radius: 6px; - overflow-x: auto; - font-size: 0.9rem; - box-shadow: none; - +.src, .example, mjx-container[jax="CHTML"][display="true"] { scrollbar-width: none; -ms-overflow-style: none; -} + overflow-x: auto; -.src::-webkit-scrollbar, -.example::-webkit-scrollbar { - display: none; + @media (max-width: 768px) { + max-width: 100%; + box-sizing: border-box; + width: 100%; + } } -#postamble { - text-align: center; +mjx-container[jax="CHTML"] { + &[display="true"] { + background: rgba(212, 163, 115, 0.05); + padding: 1.5rem; + text-align: left !important; + border-left: 2px solid var(--accent); + margin: 2rem 0 !important; + + &::-webkit-scrollbar { display: none; } + } + + &:not([display="true"]) { + padding: 0; + margin: 0; + background: transparent; + border: none; + } } -pre { - font-family: "Inconsolata", monospace; - &.src-stem::before { - content: "Stem"; +.src, .example { + position: relative; + background: var(--code-bg); + color: var(--code-text); + padding: 1rem; + border-radius: 6px; + font-size: 0.9rem; + box-shadow: none; + + &::before { + position: absolute; + top: 0.5rem; + right: 0.5rem; + float: right; + z-index: 10; + font-family: var(--font-mono), monospace; + font-size: 0.7rem; + opacity: 0.5; + pointer-events: none; + + background: var(--code-bg); + padding: 2px 4px; } + + &::-webkit-scrollbar { display: none; } } .theorem, .proof { 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); + background: color-mix(in srgb, var(--accent) 8%, transparent); + border-left: 3px solid var(--accent); padding: 1rem 1.3rem; margin: 2rem 0; &::before { @@ -375,22 +345,18 @@ pre { .theorem { margin-bottom:20px; - &::before { - content:"Theorem.\00a0\00a0"; - } + &::before { content:"Theorem.\00a0\00a0"; } } .proof { margin-bottom:30px; - &::before { - content:'Proof.\00a0\00a0'; - } - &::after { content: "\25FC"; float: right; } + + &::before { content:'Proof.\00a0\00a0'; } } .links-page > ul { @@ -399,41 +365,10 @@ pre { -moz-columns: 2; } -blockquote { - width: 80%; - margin: 40px auto; - font-style: italic; - color: var(--text-main); - 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); - - &::before { - font-family: "Lora", serif; - content: "\201C"; - color: var(--quote-accent); - font-size: 5em; - position: absolute; - left: 10px; - top: -20px; - opacity: 0.5; - } - - &::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; +header, .title + p, .subtitle + p { + margin-bottom: 3rem; + border-bottom: 1px double var(--accent); + padding-bottom: 1rem; } .title { @@ -448,7 +383,7 @@ figcaption { .author, .date { display: inline; - font-family: "Lora"; + font-family: var(--font-serif); font-style: italic; font-size: 1.1rem; color: color-mix(in srgb, var(--text-main) 70%, gray); @@ -457,7 +392,7 @@ figcaption { .author { &::before { content: "by "; - font-family: "Inconsolata"; + font-family: var(--font-mono); font-style: normal; font-weight: bold; text-transform: uppercase; @@ -465,40 +400,124 @@ figcaption { letter-spacing: 1px; margin-right: 4px; } + &: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; +.button { + background-color: var(--bg-main); + border: none; + color: black; + padding: 6px 14px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + margin: 4px 2px; + transition-duration: 0.4s; + cursor: pointer; + border: 2px solid var(--text-main); + border-radius: 6px; + &:hover { + background-color: var(--text-main); + color: white; + } } -@media (max-width: 768px) { - body { - max-width: 100%; - padding: 0 15px; - box-sizing: border-box; - } +.isa_info, .isa_success, .isa_warning, .isa_error { + width: 90%; + margin: 10px 0px; + padding: 12px; +} - h1 { font-size: 2rem; } - h2 { font-size: 1.5rem; } +.isa_info { + color: #00529b; + background-color: #bde5f8; +} - img, blockquote, .src, .example, mjx-container[jax="CHTML"][display="true"] { - max-width: 100%; - box-sizing: border-box; - } +.isa_success { + color: #4f8a10; + background-color: #dff2bf; +} - blockquote { - padding: 1em 15px 1em 40px; - width: 100%; +.isa_warning { + color: #9f6000; + background-color: #feefb3; +} + +.isa_error { + color: #d8000c; + background-color: #ffd2d2; +} + +#table-of-contents { + height: 100vh; + width: 250px; + position: fixed; + z-index: 10; + top: 0; + left: 0; + padding-top: 0; + background: var(--toc-bg); + border-right: 1px solid var(--accent); + overflow-y: auto; + overflow-x: hidden; + scrollbar-width: none; + + &::before { + content: "NAVIGATION"; + display: block; + padding: 24px 16px 12px 19px; + font-family: var(--font-mono); + font-size: 11px; + font-weight: bold; + letter-spacing: 2px; + color: var(--text-main); + border-bottom: 1px solid rgba(212, 163, 115, 0.2); + margin-bottom: 10px; } - .src, .example, mjx-container[jax="CHTML"][display="true"] { - width: 100%; - overflow-x: auto; + ul { + list-style-type: none; + padding-left: 0; + margin: 0; + + a { + display: block; + width: 218px; + padding: 10px 16px; + font-size: 13px; + font-family: var(--font-mono); + 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; + padding-left: 32px; + opacity: 0.8; + + &, &:visited { + color: var(--text-main); + text-decoration: none; + } + + &:hover { + background-color: var(--text-main); + color: var(--bg-main); + padding-left: 22px; + border-left: 3px solid var(--accent); + } + } } + + h2 { display: none !important; } + + &::-webkit-scrollbar { display: none; } + + @media (max-width: 1250px) { display: none; } } + +#postamble { text-align: center; } -- cgit v1.3 From 44fff74c17edc9039504974b27ae921c60a1742b Mon Sep 17 00:00:00 2001 From: Preston Pan Date: Fri, 6 Mar 2026 17:31:58 -0800 Subject: good version on branch --- index.org | 2 +- style.css | 28 +++++++++++++++++++++++++--- 2 files changed, 26 insertions(+), 4 deletions(-) (limited to 'style.css') diff --git a/index.org b/index.org index c4b0bf0..e521e29 100644 --- a/index.org +++ b/index.org @@ -1,4 +1,4 @@ -#+title: Introducing ret2pop +#+title: Introducing Ret2pop #+author: Preston Pan #+date: <2023-06-09 Fri> #+description: A website full of wonder and explanation diff --git a/style.css b/style.css index e527d7a..91993f0 100644 --- a/style.css +++ b/style.css @@ -487,8 +487,9 @@ header, .title + p, .subtitle + p { a { display: block; - width: 218px; - padding: 10px 16px; + width: 100%; + padding: 10px 16px 10px 32px; + box-sizing: border-box; font-size: 13px; font-family: var(--font-mono); white-space: nowrap; @@ -496,7 +497,6 @@ header, .title + p, .subtitle + p { text-overflow: ellipsis; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); border-left: 3px solid transparent; - padding-left: 32px; opacity: 0.8; &, &:visited { @@ -511,6 +511,28 @@ header, .title + p, .subtitle + p { border-left: 3px solid var(--accent); } } + ul { + a { + padding-left: 48px; + opacity: 0.55; + font-size: 12px; + + &:hover { + padding-left: 38px; + opacity: 1; + } + } + + ul a { + padding-left: 64px; + opacity: 0.4; + + &:hover { + padding-left: 54px; + } + } + + } } h2 { display: none !important; } -- cgit v1.3 From d15f074f583da6808b50c81f3ec779d8ab215ac3 Mon Sep 17 00:00:00 2001 From: Preston Pan Date: Fri, 6 Mar 2026 17:56:31 -0800 Subject: add author to everything --- blog/acausal.org | 1 + blog/automation.org | 1 + blog/cognition.org | 1 + blog/crypto.org | 1 + blog/horses.org | 1 + blog/manifesto-1.org | 4 ++-- blog/private_keys.org | 1 + blog/stem.org | 1 + blog/tech-bros.org | 1 + blog/voting.org | 1 + blog/you_dont_matter.org | 1 + style.css | 9 +++++++++ yasnippet/org-mode/blognew | 3 ++- 13 files changed, 23 insertions(+), 3 deletions(-) (limited to 'style.css') diff --git a/blog/acausal.org b/blog/acausal.org index 5ee0150..d3b923b 100644 --- a/blog/acausal.org +++ b/blog/acausal.org @@ -1,5 +1,6 @@ #+title: Consciousness and the Universal Handshake #+author: Preston Pan +#+subtitle: By {{{author}}} #+description: Narrative is the only real construction. #+html_head: #+html_head: diff --git a/blog/automation.org b/blog/automation.org index c79cba1..3ca71fc 100644 --- a/blog/automation.org +++ b/blog/automation.org @@ -1,5 +1,6 @@ #+title: Automation, Hypocrisy, and Capitalism #+author: Preston Pan +#+subtitle: By {{{author}}} #+description: Is automation taking jobs? Is capitalism causing all the world's problems? #+html_head: #+html_head: diff --git a/blog/cognition.org b/blog/cognition.org index b607660..2b15bc8 100644 --- a/blog/cognition.org +++ b/blog/cognition.org @@ -1,5 +1,6 @@ #+title: Cognition #+author: Preston Pan +#+subtitle: By {{{author}}} #+description: Other languages are inflexible and broken. Let's fix that. #+html_head: #+html_head: diff --git a/blog/crypto.org b/blog/crypto.org index 915606e..1a1ebb8 100644 --- a/blog/crypto.org +++ b/blog/crypto.org @@ -1,5 +1,6 @@ #+title: A Review of Cryptocurrency #+author: Preston Pan +#+subtitle: By {{{author}}} #+description: Are cryptocurrencies useful in economic transactions? As technologies? #+html_head: #+html_head: diff --git a/blog/horses.org b/blog/horses.org index 16b728c..31baa96 100644 --- a/blog/horses.org +++ b/blog/horses.org @@ -1,4 +1,5 @@ #+title: Stop Asking for Better Horses +#+subtitle: By {{{author}}} #+author: Preston Pan #+description: It doesn't happen instantly. #+html_head: diff --git a/blog/manifesto-1.org b/blog/manifesto-1.org index 73ec6ae..06666e7 100644 --- a/blog/manifesto-1.org +++ b/blog/manifesto-1.org @@ -1,5 +1,7 @@ #+title: The End of Equality and The Technocratic Imperative #+author: Preston Pan +#+subtitle: By {{{author}}} + #+description: A system built on illusions will always decay. #+html_head: #+html_head: @@ -12,8 +14,6 @@ #+language: en #+OPTIONS: broken-links:t -@@html:By Preston Pan@@ - * Introduction Our current economic and political system isn't totally failing right now, but it's pretty close. Everyone agrees that our current system diff --git a/blog/private_keys.org b/blog/private_keys.org index 37a2c87..9d4b9f7 100644 --- a/blog/private_keys.org +++ b/blog/private_keys.org @@ -1,5 +1,6 @@ #+title: Passwords Are Obselete #+author: Preston Pan +#+subtitle: By {{{author}}} #+description: Why haven't we switched to asymmetric cryptography? #+html_head: #+html_head: diff --git a/blog/stem.org b/blog/stem.org index 15e0544..ec9dde4 100644 --- a/blog/stem.org +++ b/blog/stem.org @@ -1,5 +1,6 @@ #+title: Stem #+author: Preston Pan +#+subtitle: By {{{author}}} #+description: My own concatenative programming language #+html_head: #+language: en diff --git a/blog/tech-bros.org b/blog/tech-bros.org index a5b452a..2b302fc 100644 --- a/blog/tech-bros.org +++ b/blog/tech-bros.org @@ -1,5 +1,6 @@ #+title: Tech Bros #+author: Preston Pan +#+subtitle: By {{{author}}} #+description: and other people that other people hate. #+html_head: #+html_head: diff --git a/blog/voting.org b/blog/voting.org index 3c5d5e8..6a0701d 100644 --- a/blog/voting.org +++ b/blog/voting.org @@ -1,5 +1,6 @@ #+title: Representative Voting #+author: Preston Pan +#+subtitle: By {{{author}}} #+description: What do we do about voter turnout? Voting demographics? Polarization? #+html_head: #+html_head: diff --git a/blog/you_dont_matter.org b/blog/you_dont_matter.org index efa4ca3..5eaa9ca 100644 --- a/blog/you_dont_matter.org +++ b/blog/you_dont_matter.org @@ -1,5 +1,6 @@ #+title: You Don't Matter #+author: Preston Pan +#+subtitle: By {{{author}}} #+description: Ideas aren't real, and morality is a spook. #+html_head: #+html_head: diff --git a/style.css b/style.css index 91993f0..452a13b 100644 --- a/style.css +++ b/style.css @@ -453,6 +453,15 @@ header, .title + p, .subtitle + p { background-color: #ffd2d2; } +.title + .subtitle { + text-align: center; + font-style: italic; + padding-bottom: 30px; + margin-top: -10px; + color: #555; + display: block; +} + #table-of-contents { height: 100vh; width: 250px; diff --git a/yasnippet/org-mode/blognew b/yasnippet/org-mode/blognew index 39899fb..da28363 100644 --- a/yasnippet/org-mode/blognew +++ b/yasnippet/org-mode/blognew @@ -4,7 +4,9 @@ # -- #+title: $1 #+author: Preston Pan +#+subtitle: By {{{author}}} #+description: $2 +#+date: [`(format-time-string "%Y-%m-%d %a")`] #+html_head: #+html_head: #+html_head: @@ -13,7 +15,6 @@ #+html_head: #+html_head: #+html_head: -#+html_head: #+language: en #+OPTIONS: broken-links:t -- cgit v1.3