From f3fcb163881d366bc72f5961f83074566395a6d9 Mon Sep 17 00:00:00 2001 From: Eryn Wells Date: Tue, 8 Nov 2022 17:47:42 -0800 Subject: [PATCH] Remove static/styles/root.css --- static/styles/root.css | 611 ----------------------------------------- 1 file changed, 611 deletions(-) delete mode 100644 static/styles/root.css diff --git a/static/styles/root.css b/static/styles/root.css deleted file mode 100644 index aab5009..0000000 --- a/static/styles/root.css +++ /dev/null @@ -1,611 +0,0 @@ -@layer reset, root, template, page; - -:root { - --black: 0, 0, 0; - --sub-dk-gray: 16, 16, 16; - --dk-gray: 32, 32, 32; - --super-dk-gray: 80, 80, 80; - --mid-gray: 128, 128, 128; - --sub-lt-gray: 175, 175, 175; - --lt-gray: 223, 223, 223; - --super-lt-gray: 240, 240, 240; - --white: 255, 255, 255; - - --lt-blue: 69, 212, 243; - --mid-blue: 26, 169, 239; - --dk-blue: 63, 46, 231; - --purple: 161, 49, 232; - --lilac: 187, 121, 245; - - --site-nav-link-color: rgb(var(--mid-blue)); - - --separator-color: rgb(var(--lt-gray)); - --header-border-color: var(--separator-color); - --footer-border-color: var(--separator-color); - - --box-shadow-color: rgba(var(--lt-gray), 0.8); - --header-box-shadow-color: var(--box-shadow-color); - - --font-family-body: Verdana, Helvetica, sans-serif; - --font-family-monospace: "Courier New", Courier, monospace; - --font-family-heading: Museo_Slab, Tahoma, sans-serif; - --font-family-site-heading: Museo_Slab, Tahoma, sans-serif; - --font-size-min: 6px; - --font-size-max: 8px; - - --body-font-size: 2rem; - --body-item-spacing: 1em; - --body-line-height: 1.5; - --body-header-line-height: 1.1; - --body-code-background-color: rgb(var(--super-lt-gray)); - - --heading-color: rgb(var(--black)); - --header-series-arrow-foreground-color: rgb(var(--sub-dk-gray)); - - --html-background-color: rgb(var(--white)); - --html-color: rgba(var(--black), 0.8); - - --platter-background-color: rgba(var(--white), var(--platter-background-opacity)); - --platter-background-opacity: 0.6; - --platter-backdrop-filter: blur(10px); - - --content-width: 80rem; - - --tag-foreground-color: rgb(var(--super-dk-gray)); - --tag-background-color: rgb(var(--super-lt-gray)); - --tag-spacer-foreground-color: rgb(var(--super-dk-gray)); - --tag-hover-background-color: rgb(var(--sub-lt-gray)); - - --transition-duration: 0.7s; - - --social-menu-padding: 1rem; - --menu-icon-size: 20px; - --twitter-icon: url(/icons/twitter.svg); - --github-icon: url(/icons/github.svg); - --instagram-icon: url(/icons/instagram.svg); - --feed-icon: url(/icons/rss.svg); -} -@media (prefers-color-scheme: dark) { - :root { - --separator-color: rgb(var(--dk-gray)); - --box-shadow-color: rgba(var(--dk-gray), 0.8); - --body-code-background-color: rgb(var(--dk-gray)); - - --heading-color: rgb(var(--white)); - --header-series-arrow-foreground-color: rgb(var(--super-dk-gray)); - - --html-background-color: rgb(var(--black)); - --html-color: rgba(var(--white), 0.8); - - --platter-background-color: rgba(var(--black), var(--platter-background-opacity)); - --platter-backdrop-filter: brightness(0.66) blur(10px); - - --tag-foreground-color: rgb(var(--sub-lt-gray)); - --tag-background-color: rgb(var(--dk-gray)); - --tag-spacer-foreground-color: rgb(var(--super-dk-gray)); - --tag-hover-background-color: rgb(var(--super-dk-gray)); - --tag-hover-foreground-color: rgb(var(--mid-gray)); - - --twitter-icon: url(/icons/twitter-dark.svg); - --github-icon: url(/icons/github-dark.svg); - --instagram-icon: url(/icons/instagram-dark.svg); - --feed-icon: url(/icons/rss-dark.svg); - } -} - -@layer reset { - body, button, h1, h2, h3, h4, h5, h6, input, ol, ul, p, pre, textarea { - padding: 0; margin: 0; - } -} - -a { - color: rgb(var(--mid-blue)); - text-decoration: none; -} -a:hover { - text-decoration: underline; - text-underline-offset: 0.12em; -} -a:visited { color: none; } - -blockquote { - border-inline-start: 4px solid var(--separator-color); - padding-inline-start: 2rem; - margin-inline-start: 2rem; -} - -body { - font-size: var(--body-font-size); - line-height: var(--body-line-height); -} - -code { - background-color: var(--body-code-background-color); - border-radius: 0.25rem; - font-family: var(--font-family-monospace); - display: inline-block; - padding-inline: 0.6rem; -} - -figcaption { - font-size: 75%; - line-height: var(--body-line-height); - margin-block-start: 0.2em; - text-align: center; -} - -figure { - border-radius: 6px; - display: inline-block; - line-height: 1; - margin: 0; - margin-block: 0 var(--body-item-spacing); - margin-inline: 0; - overflow: hidden; - max-width: var(--content-width); - width: 100%; -} - -figure.bordered { - padding: 0.5rem; - border: 2px solid #eee; -} - -figure a, -figure a:hover { - border: 0; -} - -figure img { - border-radius: 6px; - height: auto; - max-width: var(--content-width); - width: 100%; -} - -figure svg { - width: 100%; - height: auto; -} - -figure .youtube { - border-radius: 6px; - line-height: 1; - overflow: hidden; - max-width: var(--content-width); - width: 100%; -} - -footer.site { - align-items: center; - display: flex; - flex-direction: column; - font-size: 1.6rem; - margin-block: var(--body-item-spacing); - text-align: center; -} - -footer.site > ul { - align-items: center; - display: flex; - flex-wrap: wrap; - justify-content: center; - list-style: none; -} - -footer.site > .slogans > li { - margin-inline-start: 0.5em; -} - -footer.site > p { - margin: 0; -} - -footer.site p + p { - margin-top: 0.25rem; -} - -@media (max-width: 740px) { - footer.site .slogans span { - white-space: nowrap; - } -} - -h1 { font-size: 1.6em; } -h2 { font-size: 1.5em; } -h3 { font-size: 1.4em; } -h4 { font-size: 1.3em; } -h5 { font-size: 1.3em; } -h6 { font-size: var(--body-font-size); } -h5, h6 { font-family: var(--font-family-body); } - -h1, h2, h3, h4, h5, h6 { - color: var(--heading-color); - font-family: var(--font-family-heading); - font-weight: 600; - margin-block: 3.5rem 1rem; - letter-spacing: 0.08em; - line-height: var(--body-header-line-height); -} - -h1.site { - color: rgb(var(--mid-blue)); - font-size: 2.5em; -} -@supports (background-clip: text) { - h1.site { - background: - radial-gradient(circle at 20% 70%, rgb(var(--purple)), transparent 40%), - radial-gradient(circle at 30% 30%, rgb(var(--lt-blue)), rgb(var(--mid-blue)) 20%, transparent 80%), - radial-gradient(ellipse at 95% 20%, rgb(var(--dk-blue)), rgb(var(--mid-blue)) 70%, transparent 80%), - radial-gradient(circle at 100% 100%, rgb(var(--purple)), rgb(var(--lilac)) 100%), - radial-gradient(circle at 45% 100%, rgb(var(--lilac)), rgb(var(--purple)) 60%), - radial-gradient(ellipse at 50% 50%, rgb(var(--dk-blue)), transparent 80%); - -webkit-background-clip: text; - background-clip: text; - color: transparent; - } -} - -h1.site > a { color: inherit; } -h1.site > a:hover { text-decoration: none; } - -header.site { - display: flex; - left: 0; - position: fixed; - top: 0; - visibility: hidden; - width: 100%; - z-index: 10000; -} -header.site.visible { visibility: visible; } -header.site.sticky { position: sticky; } -header.site.animated { - animation: site-header-slide-in var(--transition-duration) ease-out; -} -@keyframes site-header-slide-in { - from { - top: -200px; - } - to { - top: 0; - } -} - -header.site > .grid > h1 { - font-family: var(--font-family-site-heading); - font-size: 2em; - margin: 0; - order: 1; - white-space: nowrap; -} - -header.site > .grid { - align-items: baseline; - display: flex; - flex-wrap: wrap; - gap: 0 0.5em; - margin: 0 auto; - max-width: var(--content-width); - padding: 1.5rem 3rem; - width: 100%; -} - -header.site > .grid > nav:first-of-type { - justify-content: start; - order: 2; -} - -header.site > .grid > nav:last-of-type { - justify-content: end; - order: 3; -} - -@media (max-width: 516px) { - header.site > .platter { - border-left: none; - border-radius: 0; - border-right: none; - border-top: none; - } - header.site > .grid { - max-width: none; - } -} - -@media (max-width: 435px) { - header.site > .grid > nav:first-of-type { - order: 5; - } -} - -html { - background-color: var(--html-background-color); - color: var(--html-color); - font-family: var(--font-family-body); - font-size: clamp(var(--font-size-min), 1vw, var(--font-size-max)); -} - -img { - height: auto; - max-width: 100%; -} - -img.circular { - shape-outside: circle(50%); - -webkit-clip-path: circle(50%); - clip-path: circle(50%); -} - -main { - box-sizing: border-box; - max-width: var(--content-width); - margin: var(--body-item-spacing) auto; - padding-inline: var(--body-item-spacing); - width: 100%; -} - -main > header { - margin-bottom: var(--body-item-spacing); -} - -main > :first-child { margin-block-start: 0; } -main > :last-child { margin-block-end: 0; } - -header.site > .grid > nav { - align-items: center; - display: flex; - font-size: max(1.5rem, 80%); - justify-content: start; - letter-spacing: 0.12em; - list-style: none; - text-transform: lowercase; -} - -header.site > .grid > nav > li { - color: var(--site-nav-link-color); - display: block; - margin-inline-end: 0.5em; -} - -header.site > .grid > nav > .active { font-weight: bold; } - -nav.bulleted > li:first-child::before { - color: var(--html-color); - content: ""; - margin-inline-end: 0; -} - -nav.bulleted > li::before { - color: var(--heading-color); - content: "•"; - font-size: 60%; - font-weight: normal; - opacity: 80%; - margin-inline-end: 0.5em; -} - -p { - letter-spacing: 0.025em; - line-height: var(--body-line-height); - margin-block-end: var(--body-item-spacing); -} - -ul ul, -ul ol, -ol ul, -ol ol { - margin-inline-start: var(--body-item-spacing); -} - -header > span.series { - font-size: 1.75rem; - letter-spacing: 1px; - margin-inline-start: 0.5em; -} - -header > span.series::before { - color: var(--header-series-arrow-foreground-color); - content: "↳"; - margin-inline-end: 0.25em; -} - -.post-list { - list-style: none; - margin: 0; - padding: 0; -} -@supports (display: subgrid) { - .post-list { - align-items: baseline; - display: grid; - gap: 1em; - grid-template-columns: - minmax(150px, max-content) minmax(20px, max-content) 3px auto; - grid-template-areas: "month day line title"; - } -} - -.post-list li { - align-items: baseline; - border-radius: 6px; - display: grid; - gap: 1em; - padding: 0.1em; -} - -.post-title { - align-items: baseline; - display: flex; - flex-wrap: wrap; - gap: 0 4rem; -} - -.post-title h1 { - flex-grow: 1; - font-size: 1.8em; - margin-block: 0; - padding-bottom: 0; -} - -.post-title > .post-date { - color: var(--light-dim); - display: inline-block; - font-size: 1.75rem; - inline-size: min-content; - letter-spacing: 1px; - margin-block-start: 0.5rem; - white-space: nowrap; -} - -.p5-sketch { - display: block; - position: relative; - width: 100%; -} - -.social { - display: block; - letter-spacing: 2px; - margin-left: auto; - order: 2; -} - -.social > li > a { - background-image: var(--url); - background-repeat: no-repeat; - background-size: var(--menu-icon-size); - display: block; - height: var(--menu-icon-size); - width: var(--menu-icon-size); -} - -.social > li > a > span { - display: none; -} - -.social > li + li:before { - color: var(--dark); - padding: 0 0.5rem; -} - -footer > .tags { - display: flex; - padding-inline-start: 0; -} - -footer > .tags > li { - background-color: var(--tag-background-color); - color: var(--tag-foreground-color); - border-radius: 4px; - display: inline-block; - font-size: 75%; - letter-spacing: 1px; -} - -footer > .tags > li:hover { - background-color: var(--tag-hover-background-color); -} - -footer > .tags > li > a { - color: inherit; - display: block; - height: 100%; - width: 100%; - padding: 0.6rem 1rem; -} - -footer > .tags > li > a:hover { - color: var(--tag-hover-foreground-color); - text-decoration: none; -} - -footer > .tags > li + li { margin-inline-start: 1rem; } -footer > .tags > li.chevron + li { margin-inline-start: 0 } - -footer > .tags > .chevron { - align-items: center; - border: 0; - border-radius: 0; - color: var(--tag-spacer-foreground-color); - background-color: inherit; - display: flex; - justify-content: center; - margin-inline-start: 0; - padding-inline-start: 1px; - width: 2rem; -} - -footer > .tags > .chevron:hover { - color: var(--tag-spacer-foreground-color); - background-color: inherit; -} - -table { - border: 1px solid var(--separator-color); - border-collapse: collapse; - margin-block-end: var(--body-item-spacing); - margin-inline: auto; - width: 50%; -} - -td, th { - border: 1px solid var(--separator-color); - padding-inline: 1rem; -} - -.youtube iframe { - aspect-ratio: 16 / 9; - margin-bottom: -3px; - width: 100%; -} - -/** SYNTAX HIGHLIGHTING **/ - -.highlight code { - background-color: inherit; - margin-block: 0.5em; -} - -.highlight .line { - display: grid; - grid-template-columns: max-content auto; -} - -.highlight .ln a { - -webkit-user-select: none; - -moz-use-select: none; - -ms-user-select: none; - user-select: none; -} - -.highlight .cl { - white-space: pre-wrap; -} - -/** HELPER CLASSES **/ - -.centered { text-align: center; } -.float-right { float: right; } - -.nobreak { white-space: nowrap; } -.noselect { - cursor: default; - -webkit-user-select: none; - -moz-use-select: none; - -ms-user-select: none; - user-select: none; -} - -.platter { - -webkit-backdrop-filter: var(--platter-backdrop-filter); - backdrop-filter: var(--platter-backdrop-filter); - background-color: var(--platter-background-color); - border: 1px solid var(--header-border-color); - border-radius: 12px; - box-shadow: 3px 4px 4px var(--header-box-shadow-color); -} - -.visible { visibility: visible; }