diff options
Diffstat (limited to 'style.scss')
| -rw-r--r-- | style.scss | 649 |
1 files changed, 649 insertions, 0 deletions
diff --git a/style.scss b/style.scss new file mode 100644 index 0000000..db04896 --- /dev/null +++ b/style.scss @@ -0,0 +1,649 @@ +@font-face { + font-family: 'Lora'; + font-style: normal; + font-weight: 500; + src: url('/fonts/Lora-Medium.woff2') format('woff2'); + font-display: swap; +} + +@font-face { + font-family: 'Inconsolata'; + font-style: normal; + font-weight: 400; + src: url('/fonts/Inconsolata-Regular.woff2') format('woff2'); + font-display: swap; +} + +@font-face { + font-family: 'STIX Two Math'; + font-style: normal; + font-weight: 400; + src: url('/fonts/STIXTwoMath-Regular.woff2') format('woff2'); + font-display: swap; +} + +@font-face { + font-family: 'CormorantGaramond'; + font-style: normal; + font-weight: 600; + src: url('/fonts/CormorantGaramond-Medium.woff2') format('woff2'); + font-display: swap; +} + +@font-face { + font-family: 'CormorantGaramond'; + font-style: normal; + font-weight: 700; + src: url('/fonts/CormorantGaramond-Bold.woff2') format('woff2'); + font-display: swap; +} + +@font-face { + font-family: 'CormorantGaramond'; + font-style: italic; + font-weight: 500; + src: url('/fonts/CormorantGaramond-MediumItalic.woff2') format('woff2'); + font-display: swap; +} + +@mixin hide-scrollbar { + &::-webkit-scrollbar { display: none; } + scrollbar-width: none; + -ms-overflow-style: none; +} + +@mixin horizontal-scroll { + display: block !important; + overflow-x: auto; +} + +:root { + --bg-main: #FBF8F1; + --text-main: #4A3F35; + --toc-bg: #EAE3D2; + --toc-text: #4A3F35; + --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", serif; +} + +::selection { + color: white; + background: #ff4081; +} + +*, *::before, *::after { box-sizing: border-box; } + +body { + background: + radial-gradient(rgba(0,0,0,0.02) 1px, transparent 1px), + var(--bg-main); + background-size: 6px 6px; + margin: 0; + padding: 0; + padding-left: 250px; + + color: var(--text-main); + font-family: var(--font-serif), serif; + font-size: 18px; + line-height: 1.75; + font-weight: 500; + font-variant-ligatures: common-ligatures; + -webkit-font-smoothing: antialiased; + + display: flex; + flex-direction: column; + align-items: center; + min-height: 100vh; +} + +h1, h2, h3 { line-height: 1.2; font-family: var(--font-header), serif; } +h4, h5, h6 { font-family: var(--font-mono), monospace; line-height: 1.3; margin-top: 1.5rem; margin-bottom: 0.5rem; } + +h1, h2 { + padding-bottom: 8px; + margin-top: 2.5rem; + letter-spacing: -0.01em; + position: relative; +} + +h1 { + font-size: 2.3rem; + margin-top: 3rem; + margin-bottom: 1rem; + font-weight: 600; + letter-spacing: 0; + line-height: 1.3; +} + +h2 { font-size: 1.6rem; margin-top: 2.5rem; margin-bottom: 0.6rem; } +h3 { font-size: 1.25rem; font-weight: 700; margin-top: 2rem; margin-bottom: 0.4rem; letter-spacing: 0.02em; } +h4 { font-size: 1.1rem; font-weight: 700; color: var(--text-main); } +h5 { font-size: 1rem; font-weight: 700; color: var(--link-color); } +h6 { font-size: 0.85rem; font-weight: 400; text-transform: uppercase; letter-spacing: 1px; color: color-mix(in srgb, var(--text-main) 60%, transparent); } + +p, ul, ol { margin-top: 1rem; margin-bottom: 1rem; } +p { margin: 1.2rem 0; } +li { margin: 0.3rem 0; } + +a { + cursor: pointer; + color: var(--link-color); + text-decoration: underline; + text-decoration-thickness: 2px; + text-underline-offset: 4px; + transition: all 0.2s ease-in-out; + &:hover { + color: color-mix(in srgb, var(--link-color) 80%, black); + text-decoration-thickness: 4px; + } +} + +figure { + margin: 2rem auto; + text-align: center; +} + +figcaption { + font-family: var(--text-serif); + font-size: 0.9rem; + color: color-mix(in srgb, var(--text-main) 80%, gray); + margin-top: 0.5rem; +} + +img { + border-radius: 10px; + display: block; + margin: 2rem auto; + max-width: 50%; + width: auto; + height: auto; +} + +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); + + &::before { + font-family: var(--font-serif), serif; + content: "\201C"; + color: var(--accent); + font-size: 5em; + position: absolute; + left: 10px; + top: -20px; + opacity: 0.5; + } +} + +input { + padding: 10px 16px; + margin: 2px 0; + border: 2px solid #dabebe; + border-radius: 6px; + background: var(--bg-main); + color: var(--text-main); + font-size: 16px; + transition: 0.5s; + outline: none; + &:focus { border: 2px solid var(--text-main); } +} + +math { + display: inline-block; + white-space: nowrap; + + &[display="block"] { + font-family: 'STIX Two Math', 'Latin Modern Math', serif; + font-size: 1.3em; + min-width: 0 !important; + overflow-y: hidden !important; + + & mtable { + margin-left: 0 !important; + text-align: left !important; + } + + & mtd { text-align: left !important; } + + @include hide-scrollbar; + @include horizontal-scroll; + } +} + + +.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; } +} + +header, .title + p, .subtitle + p { + margin-bottom: 3rem; + padding-bottom: 1rem; +} + +#preamble { + padding-bottom: 0 !important; +} + +#preamble hr { + margin-bottom: 0 !important; +} + +#content { + padding-top: 0 !important; +} + +h1.title { + padding-top: 1.5rem !important; +} + +#preamble + hr, header + hr { + display: none !important; +} + +#preamble, header { + padding-bottom: 0 !important; +} + +h1.title { + margin-top: 0.5rem; /* Reduced from 3rem */ +} + +.title { + font-size: 2.6rem; + margin-bottom: 0.5rem; + text-align: center; +} + +.subtitle { + display: block; + font-size: 1.2rem; + text-align: center; + font-style: italic; + margin-top: 0.5rem; + font-family: var(--font-header), serif; +} + +.title + .subtitle { + text-align: center; + font-style: italic; + padding-bottom: 30px; + margin-top: -10px; + color: #555; + display: block; +} + +.author, .date { + display: inline; + font-family: var(--font-serif), serif; + font-style: italic; + font-size: 1.1rem; + color: color-mix(in srgb, var(--text-main) 70%, gray); +} + +.author { + &::before { + content: "by "; + font-family: var(--font-mono), monospace; + font-style: normal; + font-weight: bold; + text-transform: uppercase; + font-size: 0.8rem; + letter-spacing: 1px; + margin-right: 4px; + text-align: center; + } + &:not(:last-child)::after { content: ", "; font-style: normal; } +} + +.preamble { + font-family: var(--font-mono), monospace; + font-size: 0.85rem; + text-transform: uppercase; + letter-spacing: 1px; + margin-top: 10px; + color: color-mix(in srgb, var(--text-main) 50%, transparent); + + a { + color: var(--text-main); + text-decoration: none; + padding: 4px 8px; + border-radius: 4px; + transition: all 0.2s ease; + &:hover { + background: color-mix(in srgb, var(--accent) 15%, transparent); + color: var(--link-color); + } + } + + & + hr { + border: none; + height: 1px; + background: linear-gradient(to right, var(--accent), transparent); + margin-bottom: 0rem; + opacity: 0.5; + + width: 100%; + max-width: 85ch; + } +} + +.todo, .done { + font-family: var(--font-mono), monospace; + font-size: 0.75em; + font-weight: bold; + letter-spacing: 1px; + padding: 2px 8px; + border-radius: 4px; + vertical-align: middle; + margin-right: 6px; +} + +.todo.TODO { + color: #5c3a21; + background-color: color-mix(in srgb, var(--accent) 30%, var(--bg-main)); + border: 1px solid var(--accent); +} + +.done.DONE { + color: #2a3b24; + background-color: #e4e7d3; + border: 1px solid #8f9e76; +} + +.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; } +.isa_warning { color: #9f6000; background-color: #feefb3; } +.isa_error { color: #d8000c; background-color: #ffd2d2; } + +.theorem, .proof { + display: block; + margin-left: 10px; + font-style: normal; + background: color-mix(in srgb, var(--accent) 8%, transparent); + border-left: 3px solid var(--accent); + padding: 1rem 1.3rem; + margin: 2rem 0; + &::before { float: left; font-weight: bold; } +} + +.theorem { margin-bottom: 20px; &::before { content: "Theorem.\00a0\00a0"; } } +.proof { margin-bottom: 30px; &::after { content: "\25FC"; float: right; } &::before { content: 'Proof.\00a0\00a0'; } } + +.links-page > ul { columns: 2; -webkit-columns: 2; -moz-columns: 2; } + +:not(pre) > code { + font-family: var(--font-mono), monospace; + background: var(--code-bg); + color: var(--code-text); + padding: 0.15em 0.4em; + border-radius: 4px; + font-size: 0.85em; + white-space: pre-wrap; + word-break: break-word; +} + +pre { + font-family: var(--font-mono), monospace; + &.src-stem::before { content: "Stem"; } +} + +.org-svg { width: 100%; max-width: none; } + +.src, .example { + @include hide-scrollbar; + @include horizontal-scroll; + + 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; + } +} + +.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; + overflow-x: auto; + padding: 1.5rem 1rem 1rem 1rem; + white-space: pre; + @include hide-scrollbar; + } + + &::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; + } + } +} + +.equation-container { + display: grid; + grid-template-columns: 1fr minmax(0, auto) 1fr; + align-items: center; + width: 100%; + box-sizing: border-box; + + margin: 2rem 0; + background: rgba(212, 163, 115, 0.05); + padding: 1.5rem; + border-left: 2px solid var(--accent); + + .equation { + grid-column: 2; + text-align: center; + + & math[display="block"] { margin: 0 !important; } + + @include horizontal-scroll; + @include hide-scrollbar; + } + + .equation-label { + grid-column: 3; + justify-self: end; + } +} + +.figure { + margin: 2rem auto; + text-align: center; + display: flex; + flex-direction: column; + align-items: center; +} + +.figure p:last-of-type { + font-size: 0.9rem; + color: color-mix(in srgb, var(--text-main) 80%, gray); + margin-top: 0.5rem; + max-width: 80%; /* Keeps long captions from stretching too far */ +} + +.figure-number { + font-weight: 700; + color: var(--text-main); +} + + +#preamble, #content, #postamble, main, header { + width: 100%; + max-width: 85ch; + padding: 1rem 20px; + display: block; +} + +#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; + + @include hide-scrollbar; + + &::before { + content: "NAVIGATION"; + display: block; + padding: 24px 16px 12px 19px; + font-family: var(--font-mono), monospace; + 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; + } + + ul { + list-style-type: none; + padding-left: 0; + margin: 0; + + a { + display: block; + width: 100%; + padding: 10px 16px 10px 32px; + font-size: 15px; + font-family: var(--font-mono), monospace; + 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; + opacity: 1; + + &, &: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); + } + } + ul { + a { + padding-left: 48px; + opacity: 0.85; + font-size: 13px; + &:hover { padding-left: 38px; opacity: 1; } + } + ul a { + padding-left: 64px; + opacity: 0.75; + &:hover { padding-left: 54px; } + } + } + } + + h2 { display: none !important; } +} + +#postamble { text-align: center; } + +@media (max-width: 1250px) { + body { + padding-left: 0; + font-size: 20px; + } + #table-of-contents { display: none !important; } + h1 { font-size: 1.8rem; } + h2 { font-size: 18px; } +} + +@media (max-width: 768px) { + h2 { font-size: 1.5rem; } + + blockquote, .src, .example { + max-width: 100%; + width: 100%; + box-sizing: border-box; + } + + img { + max-width: 100%; + width: auto; + } + + blockquote { padding: 1em 15px 1em 40px; } + .links-page > ul { columns: 1; -webkit-columns: 1; -moz-columns: 1; } +} |