diff options
Diffstat (limited to 'style.scss')
| -rw-r--r-- | style.scss | 757 |
1 files changed, 341 insertions, 416 deletions
@@ -2,42 +2,48 @@ font-family: 'Lora'; font-style: normal; font-weight: 500; - src: url('./fonts/Lora-Medium.ttf') format('truetype'); + 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.ttf') format('truetype'); + 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.ttf') format('truetype'); + 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.ttf') format('truetype'); + 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.ttf') format('truetype'); -} - -@font-face { - font-family: 'STIX Two Math'; - font-style: normal; - font-weight: 400; - src: url('./fonts/STIXTwoMath-Regular.ttf') format('truetype'); + src: url('/fonts/CormorantGaramond-MediumItalic.woff2') format('woff2'); + font-display: swap; } @mixin hide-scrollbar { @@ -73,103 +79,35 @@ background: #ff4081; } -: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; - box-decoration-break: clone; - - -webkit-box-decoration-break: clone; -} +*, *::before, *::after { box-sizing: border-box; } 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; - font-size: 16px; + margin: 0; + padding: 0; + padding-left: 250px; + color: var(--text-main); - padding: 0 10px; - - /* fonts */ + font-family: var(--font-serif), serif; font-size: 18px; - font-family: var(--font-serif); + line-height: 1.75; font-weight: 500; font-variant-ligatures: common-ligatures; -webkit-font-smoothing: antialiased; - @media (max-width: 1250px) { - margin: 20px auto; - font-size: 20px; - } - - @media (max-width: 768px) { - max-width: 100%; - padding: 0 15px; - box-sizing: border-box; - } -} - -input { - padding: 10px 16px; - margin: 2px 0; - box-sizing: border-box; - border: 2px solid #dabebe; - border-radius: 6px; - background: var(--bg-main); - color: var(--text-main); - font-size: 16px; - -webkit-transition: 0.5s; - transition: 0.5s; - outline: none; - - &:focus { border: 2px solid var(--text-main); } + display: flex; + flex-direction: column; + align-items: center; + min-height: 100vh; } -figure { - margin: 2rem auto; - text-align: center; -} - -p, li, blockquote, figcaption { - overflow-wrap: break-word; - word-wrap: break-word; - word-break: break-word; -} - -p, ul, ol { - margin-top: 1rem; - margin-bottom: 1rem; -} - -figcaption { - font-size: 0.9rem; - color: color-mix(in srgb, var(--text-main) 80%, gray); - margin-top: 0.5rem; -} - -h1, h2, h3 { - line-height: 1.2; - font-family: var(--font-header), serif; -} - -h4, h5, h6 { - font-family: var(--font-mono); - line-height: 1.3; - margin-top: 1.5rem; - margin-bottom: 0.5rem; -} +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 { - border-bottom: 1px solid var(--border-color); padding-bottom: 8px; margin-top: 2.5rem; letter-spacing: -0.01em; @@ -183,63 +121,50 @@ h1 { 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; +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); } - @media (max-width: 1250px) { font-size: 18px; } - @media (max-width: 768px) { font-size: 1.5rem; } -} - -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); -} +p, ul, ol { margin-top: 1rem; margin-bottom: 1rem; } +p { margin: 1.2rem 0; } +li { margin: 0.3rem 0; } -h5 { - font-size: 1rem; - font-weight: 700; +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; + } } -h6 { - font-size: 0.85rem; - font-weight: 400; - text-transform: uppercase; - letter-spacing: 1px; - color: color-mix(in srgb, var(--text-main) 60%, transparent); +figure { + margin: 2rem auto; + text-align: center; } -img, blockquote { - @media (max-width: 768px) { - max-width: 100%; - width: 100%; - box-sizing: border-box; - } +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; - text-align: center; - margin-left: auto; - margin-right: auto; - width: 50%; display: block; + margin: 2rem auto; + max-width: 50%; + width: auto; + height: auto; } blockquote { @@ -264,47 +189,25 @@ blockquote { top: -20px; opacity: 0.5; } - - &::after { content: ''; } - - @media (max-width: 768px) { - padding: 1em 15px 1em 40px; - width: 100%; - } -} - -pre { - font-family: var(--font-mono), monospace; - &.src-stem::before { content: "Stem"; } } -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; - } -} - -table { - display: block; - width: 100%; - overflow-x: auto; - border-collapse: collapse; - margin: 2rem 0; - - @include hide-scrollbar; +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; @@ -323,186 +226,84 @@ math { } } -p { margin: 1.2rem 0; } - -li { margin: 0.3rem 0; } - -.org-svg { - width: 100%; - max-width: none; +.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; } } -.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; - } - } +header, .title + p, .subtitle + p { + margin-bottom: 3rem; + padding-bottom: 1rem; } -.content { - margin-left: 280px; - padding: 0px 10px; - - @media (max-width: 1250px) { margin-left: 0; } +#preamble { + padding-bottom: 0 !important; } -.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; - } +#preamble hr { + margin-bottom: 0 !important; } -.src, .example { - position: relative; - background: var(--code-bg); - color: var(--code-text); - padding: 1rem; - border-radius: 6px; - font-size: 0.9rem; - box-shadow: none; - overflow-x: auto; - - @media (max-width: 768px) { - max-width: 100%; - box-sizing: border-box; - width: 100%; - } - - &::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; - } - - @include hide-scrollbar; +#content { + padding-top: 0 !important; } -.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"; } +h1.title { + padding-top: 1.5rem !important; } -.proof { - margin-bottom:30px; - - &::after { - content: "\25FC"; - float: right; - } - - &::before { content:'Proof.\00a0\00a0'; } +#preamble + hr, header + hr { + display: none !important; } -.links-page > ul { - columns: 2; - -webkit-columns: 2; - -moz-columns: 2; - - @media (max-width: 768px) { - columns: 1; - -webkit-columns: 1; - -moz-columns: 1; - } +#preamble, header { + padding-bottom: 0 !important; } -header, .title + p, .subtitle + p { - margin-bottom: 3rem; - border-bottom: 1px double var(--accent); - padding-bottom: 1rem; +h1.title { + margin-top: 0.5rem; /* Reduced from 3rem */ } .title { font-size: 2.6rem; margin-bottom: 0.5rem; + text-align: center; } .subtitle { - font-size: 1.2rem; - color: color-mix(in srgb, var(--text-main) 70%, gray); + 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); + font-family: var(--font-serif), serif; font-style: italic; font-size: 1.1rem; color: color-mix(in srgb, var(--text-main) 70%, gray); @@ -511,85 +312,26 @@ header, .title + p, .subtitle + p { .author { &::before { content: "by "; - font-family: var(--font-mono); + 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; - } -} - -.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; -} - -.isa_warning { - color: #9f6000; - background-color: #feefb3; -} - -.isa_error { - color: #d8000c; - background-color: #ffd2d2; -} - -.title + .subtitle { - text-align: center; - font-style: italic; - padding-bottom: 30px; - margin-top: -10px; - color: #555; - display: block; + &:not(:last-child)::after { content: ", "; font-style: normal; } } .preamble { - font-family: var(--font-mono); + 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; @@ -606,13 +348,16 @@ header, .title + p, .subtitle + p { border: none; height: 1px; background: linear-gradient(to right, var(--accent), transparent); - margin-bottom: 2.5rem; + margin-bottom: 0rem; opacity: 0.5; + + width: 100%; + max-width: 85ch; } } -.todo { - font-family: var(--font-mono); +.todo, .done { + font-family: var(--font-mono), monospace; font-size: 0.75em; font-weight: bold; letter-spacing: 1px; @@ -622,16 +367,179 @@ header, .title + p, .subtitle + p { margin-right: 6px; } -.todo.TODO { - color: var(--link-color); - background-color: color-mix(in srgb, var(--accent) 20%, transparent); - border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); +.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"; } } -.done.DONE { - color: #4f8a10; - background-color: color-mix(in srgb, var(--accent) 20%, transparent); - border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); +.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 { @@ -646,12 +554,14 @@ header, .title + p, .subtitle + p { 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); + font-family: var(--font-mono), monospace; font-size: 11px; font-weight: bold; letter-spacing: 2px; @@ -669,15 +579,14 @@ header, .title + p, .subtitle + p { display: block; width: 100%; padding: 10px 16px 10px 32px; - box-sizing: border-box; font-size: 15px; - font-family: var(--font-mono); + 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: 0.8; + opacity: 1; &, &:visited { color: var(--text-main); @@ -694,31 +603,47 @@ header, .title + p, .subtitle + p { ul { a { padding-left: 48px; - opacity: 0.55; + opacity: 0.85; font-size: 13px; - - &:hover { - padding-left: 38px; - opacity: 1; - } + &:hover { padding-left: 38px; opacity: 1; } } - ul a { padding-left: 64px; - opacity: 0.4; - - &:hover { - padding-left: 54px; - } + opacity: 0.75; + &:hover { padding-left: 54px; } } - } } h2 { display: none !important; } - - @media (max-width: 1250px) { display: none; } - @include hide-scrollbar; } #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; } +} |