diff options
Diffstat (limited to 'static/style.css')
| -rw-r--r-- | static/style.css | 430 |
1 files changed, 5 insertions, 425 deletions
diff --git a/static/style.css b/static/style.css index 383ada6..c7468b8 100644 --- a/static/style.css +++ b/static/style.css @@ -121,7 +121,7 @@ html.theme-light .theme-button.-light { overflow-wrap: break-word; } -#left> :first-child { +#left > :first-child { margin-top: 0; } @@ -155,22 +155,22 @@ html.theme-light .theme-button.-light { right: 0; } - #right> :first-child { + #right > :first-child { height: 62%; } - #right> :last-child { + #right > :last-child { height: 38%; } } #left, -#output>*, +#output > *, #editor .codeflask__flatten { padding: var(--gap); } -#output>* { +#output > * { margin: 0; white-space: pre-wrap; } @@ -255,7 +255,6 @@ html.theme-light .theme-button.-light { text-decoration-color: var(--color-accent); } - .navbar .link:hover { background: var(--color-accent-light); text-decoration-color: var(--color-accent-hot); @@ -265,422 +264,3 @@ html.theme-light .theme-button.-light { .navbar .link { padding: calc(var(--gap-quarter) * 0.5) var(--gap-quarter) 0; } - - -/* - * /everything page - * inline chapters & lessons - */ - -body:has(#everything) { - /* max-height: 100%; */ - overflow: hidden; - min-height: 100vh; - /* mobile viewport bug fix */ - min-height: -webkit-fill-available; -} - -html:has(#everything) { - min-height: -webkit-fill-available; -} - - -/* set navbar to position: fixed */ -body:has(#everything) .navbar { - z-index: 100; - position: fixed; - inset: 0; - bottom: 0; -} - -/* everything wrapper, 2x2 responsive grid layout */ -main#everything { - display: grid; - max-height: 100%; - min-height: -webkit-fill-available; - /* height: -webkit-fill-available; */ - grid-template-columns: minmax(0, max-content) 1fr; - overflow: hidden; - padding-top: var(--navbar-height) -} - -#everything p, -#everything a { - margin: var(--gap) 0; - font-size: var(--font-size-normal); - line-height: var(--gap-double); - font-weight: 400; -} - -#everything code { - font-size: var(--font-size-small); -} - -#everything h1, -#everything h2, -#everything h3 { - margin: 0; -} - -#everything-contents, -#everything-lessons { - grid-column-end: span 1; - grid-row: 1 / span 1; - max-height: 100%; - padding: var(--gap); - padding-bottom: var(--gap-double); - overflow-y: auto; - display: flex; - background: var(--color-background); - flex-direction: column; - transition: background 150ms linear 0s; - position: relative; -} - -/* table of contents on the left, scrollable */ -#everything-contents { - grid-column-start: 1; - padding-bottom: var(--gap-quad); - gap: var(--gap-double); -} - -#everything-contents::before { - position: fixed; -} - -#everything-contents * { - margin: 0; -} - -#everything-contents .chapter { - display: flex; - flex-direction: column; - gap: var(--gap); -} - -#everything-contents .chapter h3 { - white-space: nowrap; -} - -#everything-contents .chapter ul, -#everything-contents .chapter li { - list-style: none; - padding: 0; - color: var(--color-text-secondary); - transition: color 150ms linear 0s; -} - -#everything-contents .chapter ul { - display: flex; - flex-direction: column; - gap: var(--gap-half); -} - -#everything-lessons { - grid-column-start: 2; - container-type: inline-size; - container-name: lessons-list; - padding-top: 0; - scroll-behavior: smooth; - scroll-snap-type: y proximity; - scroll-padding-block-start: calc(2 * var(--navbar-height)); - /* scroll-padding-block-start: var(--gap-double); */ -} - - -#everything-lessons .chapter-title { - margin: 0; - padding-top: var(--gap); - color: var(--color-text-accent); - position: sticky; - height: var(--gap-triple); - top: 0; - background: var(--color-background); - transition: background 150ms linear 0s, color 150ms linear 0s; - z-index: 3; -} - -#everything-lessons .chapter-title:first-child { - margin-top: 0; -} - -#everything-lessons .lesson { - margin: var(--gap) 0; - padding: var(--gap) 0; - padding-bottom: var(--gap-triple); - scroll-snap-align: center top; -} - -#everything-lessons .lesson * { - margin: 0; -} - -#everything-lessons .lesson-title { - position: sticky; - top: var(--gap-triple); - background: var(--color-background); - transition: background 150ms linear 0s, color 150ms ease-out 0s; - color: var(--color-link); - z-index: 2; - padding: var(--gap) 0; - margin-bottom: var(--gap-double); -} - -#everything-lessons .lesson:target { - animation: highlight-block 900ms ease-in-out 300ms 1; -} - -#everything-lessons .lesson:target .lesson-title { - animation: highlight-text 900ms ease-in-out 300ms 1; -} - -#everything-lessons .lesson-snippet { - padding: var(--gap); - margin-right: var(--gap); - margin-top: var(--gap-double); - position: relative; - background: var(--code-background); - transition: background 150ms linear 0s, box-shadow 150ms linear 0s; - box-shadow: var(--drop-shadow); -} - - -#everything-lessons .lesson-snippet code { - overflow-x: auto; - display: inline-block; - width: 100%; - padding: var(--gap); - padding-bottom: var(--gap-double); -} - -#everything-lessons .lesson-snippet-link { - background: var(--color-accent-muted); - position: absolute; - bottom: 0; - right: 0; - padding: var(--gap-half) var(--gap); - display: flex; - align-items: center; - justify-content: center; - gap: var(--gap); - font-size: var(--font-size-small); - color: var(--color-link); - border-radius: none; - text-decoration: none; - outline: 1px solid transparent; - outline-offset: -1px; - cursor: pointer; - transition: all 300ms ease-out 0s; -} - -#everything-lessons .lesson-snippet-link:hover { - color: var(--color-link); - background: var(--color-background); - transition: all 150ms ease-in 0s; - outline-color: var(--color-accent); -} - -#everything-lessons .snippet-link-icon { - color: var(--color-accent); - transition: color 150ms ease-in 0s; - font-weight: bold; - text-decoration: none; -} - -#everything-lessons .lesson-snippet-link:hover .snippet-link-icon { - color: var(--color-accent-hot); -} - -#everything-lessons hr { - width: 100%; - height: 1px; - border: 0; - padding: 0; - margin: 0; - display: block; - transition: border-top 150ms linear 0s; - -} - -#everything-lessons .lesson-separator { - border-top: 1px solid var(--color-accent-muted); -} - -#everything-lessons .chapter-separator { - border-top: 1px solid var(--color-accent); - position: sticky; - top: calc(var(--gap-triple) - 1px); - z-index: 3; -} - -@media only screen and (min-width: 1100px) { - #everything { - grid-template-columns: minmax(min-content, max-content) 1fr; - } - - #everything-contents { - padding: var(--gap) var(--gap-double) var(--gap-quad) var(--gap); - } - - #everything-contents .chapter ul { - padding-left: var(--gap); - } -} - -/* transform contents as to a side menu */ -@media only screen and (max-width: 768px) { - #everything-contents { - position: fixed; - inset: 0; - top: var(--navbar-height); - grid-column: 1 / span 2; - padding-left: calc(var(--gap) + var(--gap-quad) * 2); - transform: translateX(-100%); - transition: transform 300ms ease-in 0s, overflow-y 0s linear 600ms, background 150ms linear 0s; - z-index: 10; - overflow: unset; - box-shadow: 0 0 0 rgba(0, 0, 0, 0.4); - background: var(--color-background-dim); - padding-bottom: calc(2 * var(--gap-quad)) - } - - /* show / hide contents when touching on trigger */ - #everything-contents:hover:not(:has(a:hover)) { - transform: translateX(calc(-2 * var(--gap-quad))); - box-shadow: 0 var(--gap-double) var(--gap-quad) rgba(0, 0, 0, 0.4); - /* overflow-x: hidden; */ - animation: reveal 300ms ease-out 20ms forwards 1; - } - - #everything-contents::before { - display: none; - } - - #everything-contents::after { - content: "Table of contents"; - position: fixed; - padding: var(--gap-double) var(--gap); - inset: unset; - bottom: 0; - right: calc(-100%); - font-size: var(--font-size-small); - filter: none; - width: calc(100vw); - transform: translateX(0); - display: flex; - align-items: center; - justify-content: center; - color: var(--color-text); - font-weight: bold; - background: var(--color-background-dim); - z-index: 60; - opacity: 1; - transition: opacity 300ms ease-out 450ms, background 150ms linear, color 150ms linear 0s; - pointer-events: all; - box-sizing: border-box; - } - - .theme-light #everything-contents::after { - filter: contrast(1); - } - - - #everything-contents:hover:not(:has(a:hover))::after { - opacity: 0; - transition: opacity 150ms ease-in 0s; - } - - #everything-lessons { - grid-column: 1 / span 2; - padding-bottom: var(--gap-quad); - padding-left: 0; - padding-right: 0; - } - - #everything-lessons .lesson, - #everything-lessons .chapter-title, - #everything-lessons .chapter-separator { - padding-left: var(--gap); - padding-right: var(--gap); - } - - - - - #everything-lessons .lesson-snippet code { - padding: var(--gap); - } - -} - -@container lessons-list (min-width: 900px) { - - #everything-lessons .lesson, - #everything-lessons .chapter-title { - padding-right: var(--gap-quad); - padding-left: var(--gap-quad); - } - - #everything-lessons .chapter-separator { - margin-left: var(--gap-quad); - margin-right: var(--gap-quad); - width: calc(100% - var(--gap-quad) * 2); - } -} - -@media all and (orientation: portrait) { - /* adjust padding and sticky element positions when a link is clicked */ - - /* #everything:has(*:target) #everything-lessons { - padding-top: var(--navbar-height); - } - - #everything:has(*:target) #everything-contents { - padding-top: calc(var(--navbar-height) + var(--gap)); - } */ - - -} - -@keyframes highlight-text { - 0% { - text-decoration: underline; - text-decoration-color: transparent; - } - - 50% { - text-decoration: underline; - text-decoration-color: var(--color-accent); - color: var(--color-accent-text); - background: var(--color-accent-muted); - } - - 100% { - text-decoration: underline; - text-decoration-color: transparent; - } -} - -@keyframes highlight-block { - 0% {} - - 50% { - background: var(--color-accent-muted); - } - - 100% {} -} - -@keyframes reveal { - 0% { - overflow: unset; - } - - 99% { - overflow: unset; - } - - 100% { - overflow-y: auto; - } -}
\ No newline at end of file |