diff options
Diffstat (limited to 'style.scss')
| -rw-r--r-- | style.scss | 724 |
1 files changed, 724 insertions, 0 deletions
diff --git a/style.scss b/style.scss new file mode 100644 index 0000000..7c5e872 --- /dev/null +++ b/style.scss @@ -0,0 +1,724 @@ +@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'); +} + +@font-face { + font-family: 'CormorantGaramond'; + font-style: normal; + font-weight: 600; + src: url('./fonts/CormorantGaramond-Medium.ttf') format('truetype'); +} + +@font-face { + font-family: 'CormorantGaramond'; + font-style: normal; + font-weight: 700; + src: url('./fonts/CormorantGaramond-Bold.ttf') format('truetype'); +} + +@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'); +} + +@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; +} + +: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; +} + +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; + color: var(--text-main); + padding: 0 10px; + + /* fonts */ + font-size: 18px; + font-family: var(--font-serif); + 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); } +} + +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 { + border-bottom: 1px solid var(--border-color); + 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; + -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 { + 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); +} + +img, blockquote { + @media (max-width: 768px) { + max-width: 100%; + width: 100%; + box-sizing: border-box; + } +} + +img { + border-radius: 10px; + text-align: center; + margin-left: auto; + margin-right: auto; + width: 50%; + display: block; +} + +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; + } + + &::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; +} + +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; + } +} + +p { margin: 1.2rem 0; } + +li { margin: 0.3rem 0; } + + +.org-svg { + width: 100%; + max-width: none; +} + +.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; + } + } +} + +.content { + margin-left: 280px; + padding: 0px 10px; + + @media (max-width: 1250px) { margin-left: 0; } +} + +.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; + } +} + +.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; +} + +.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; + + @media (max-width: 768px) { + columns: 1; + -webkit-columns: 1; + -moz-columns: 1; + } +} + +header, .title + p, .subtitle + p { + margin-bottom: 3rem; + border-bottom: 1px double var(--accent); + padding-bottom: 1rem; +} + +.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; + font-family: var(--font-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); + 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; + } +} + +.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; +} + +.preamble { + font-family: var(--font-mono); + 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: 2.5rem; + opacity: 0.5; + } +} + +.todo { + font-family: var(--font-mono); + 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: var(--link-color); + background-color: color-mix(in srgb, var(--accent) 20%, transparent); + border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); +} + +.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); +} + +#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; + + &::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; + } + + ul { + list-style-type: none; + padding-left: 0; + margin: 0; + + a { + display: block; + width: 100%; + padding: 10px 16px 10px 32px; + box-sizing: border-box; + font-size: 15px; + 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; + 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); + } + } + ul { + a { + padding-left: 48px; + opacity: 0.55; + font-size: 13px; + + &:hover { + padding-left: 38px; + opacity: 1; + } + } + + ul a { + padding-left: 64px; + opacity: 0.4; + + &:hover { + padding-left: 54px; + } + } + + } + } + + h2 { display: none !important; } + + @media (max-width: 1250px) { display: none; } + @include hide-scrollbar; +} + +#postamble { text-align: center; } |