diff --git a/static/styles/app.css b/static/styles/app.css deleted file mode 100644 index edb0e47..0000000 --- a/static/styles/app.css +++ /dev/null @@ -1,662 +0,0 @@ -/* app.css - * - * Paper - * Designed by 南小北 (https://lee.so/) - * Updated in 2021.8.24 - * - * Modified by Eryn Wells - */ - -/* Theme - -------------------------------------------------- */ -:root { - --gap: 3.5rem; - --y-gap: 8rem; - --wide: 140rem; - --narrow: 80rem; - --side: calc((var(--wide) - var(--narrow)) / 2); - --header: 8rem; - --footer: calc(8rem + var(--safe-bottom)); - --link-color: #3486ff; - - --light: 255, 255, 255; - --dark: 22, 22, 22; - --hljs-bg: #111; - - --safe-bottom: 0; -} - -@supports (bottom: constant(safe-area-inset-bottom)) { - :root { - --safe-bottom: constant(safe-area-inset-bottom); - } -} - -@supports (bottom: env(safe-area-inset-bottom)) { - :root { - --safe-bottom: env(safe-area-inset-bottom); - } -} - -.dark { - --light: 22, 22, 22; - --dark: 255, 255, 255; - --hljs-bg: #282828; - --link-color: #56a8ff; -} - -*, -*::before, -*::after { - box-sizing: border-box; -} - -html, -body { - height: 100%; -} - -html { - -webkit-tap-highlight-color: transparent; - font-size: 8px; -} - -body { - --white: rgba(var(--light), 1); - --black: rgba(var(--dark), 1); - - --pro: rgba(var(--dark), 1); - --lit: rgba(var(--dark), 0.64); - --air: rgba(var(--dark), 0.48); - --fog: rgba(var(--dark), 0.12); - - display: flex; - flex-direction: column; - padding-right: var(--gap); - padding-left: var(--gap); - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, - 'Open Sans', 'Helvetica Neue', sans-serif; - font-size: 2rem; - line-height: 1.8; - color: var(--pro); - word-break: break-word; - background: var(--white); - transition: background 0.4s ease-out; -} - -body > * { - flex-shrink: 0; - width: 100%; - margin-inline: auto; -} - -.not-ready, -.not-ready * { - transition: none !important; -} - -@media (max-width: 1199px) { - html { - font-size: 7px; - } -} - -/* Header - -------------------------------------------------- */ -.header { - margin-top: 2rem; - display: flex; - max-width: var(--wide); - height: var(--header); - align-items: baseline; -} - -.header a { - display: flex; - flex-shrink: 0; - align-items: center; -} - -.logo { - display: flex; - min-width: var(--side); - padding-right: var(--gap); -} - -.site-name { - padding-bottom: 0.3rem; - overflow: auto; - font-size: 3.4rem; - font-weight: 700; - white-space: nowrap; -} - -.btn-dark { - width: 3rem; - margin-left: 2rem; - cursor: pointer; - background: url(./theme.png) left / auto 3rem no-repeat; - transition: background-position 0.4s steps(5); -} - -.dark .btn-dark { - background-position: right; -} - -.menu { - display: flex; - overflow: auto; -} - -.menu a + a { - margin-left: var(--gap); -} - -.menu a.active { - opacity: 0.44; -} - -.social { - display: flex; - margin-left: auto; -} - -.social a { - width: 3rem; - margin-left: 3rem; - background: var(--url) center center no-repeat; -} - -.social a span { - visibility: hidden; -} - -.dark .social a { - filter: invert(1); -} - -@media (max-width: 1199px) { - .logo { - min-width: auto; - } - - [data-menu='true'] { - --header: 16rem; - } - - [data-menu='true'] .header { - position: relative; - } - - [data-menu='true'] .header > * { - height: calc(var(--header) / 2); - } - - [data-menu='true'] .menu { - position: absolute; - inset: auto 0 0; - border-bottom: 1px solid var(--fog); - } -} - -/* Main - -------------------------------------------------- */ -.main { - max-width: var(--narrow); - min-height: calc(100% - var(--header) - var(--footer)); - padding-top: var(--y-gap); - padding-bottom: var(--y-gap); -} - -.main-title { - margin-bottom: calc(var(--y-gap) + 1rem); - font-size: 3rem; - font-weight: 400; - color: var(--lit); -} - -.main-nav { - display: flex; - margin-top: 5rem; -} - -.main-nav a { - font-size: 1.8rem; - line-height: 5.5rem; - color: var(--white); - background: var(--black); - border-radius: 0.5rem; - padding-inline: 3rem; -} - -.main-nav .next { - margin-left: auto; -} - -/* Post entry - -------------------------------------------------- */ -.post-entry { - position: relative; - padding-block: 2rem; - transition: transform 0.1s; -} - -.post-entry:first-of-type { - margin-top: -2rem; -} - -.post-entry:active { - transform: scale(0.99); -} - -.post-entry h2 { - margin-bottom: 0.2rem; - font-size: 3rem; -} - -.post-entry time { - flex-shrink: 0; - font-size: 1.7rem; - color: var(--air); -} - -.post-entry a { - position: absolute; - inset: 0; -} - -/* Post single - -------------------------------------------------- */ -.post-title { - margin-bottom: calc(var(--y-gap) + 1rem); -} - -.post-title p { - display: flex; - margin-bottom: 1.5rem; - font-size: 1.6rem; - color: var(--air); - transform: translateY(0.4rem); -} - -.post-title p span::before { - content: '·'; - margin-inline: 0.8rem; -} - -.post-title h1 { - font-size: 5rem; - transform: translateX(-0.3rem); -} - -.post-tags { - margin-top: 7rem; -} - -.post-tags a { - display: inline-block; - font-weight: 500; - line-height: 5rem; - color: var(--lit); - background: rgba(var(--dark), 0.05); - border-radius: 0.5rem; - padding-inline: 2rem; -} - -.post-tags a + a { - margin-left: 0.5rem; -} - -.post-nav { - display: flex; - justify-content: space-between; - margin-top: var(--y-gap); - background: rgba(var(--dark), 0.05); - border-radius: 0.5rem; -} - -.post-nav a { - display: flex; - align-items: center; - width: 50%; - padding: var(--gap); - font-size: 2.4rem; - font-weight: 700; - line-height: 1.2; -} - -.post-nav a span + span { - margin-left: 1rem; -} - -.post-nav .prev { - padding-right: 1rem; -} - -.post-nav .next { - justify-content: flex-end; - padding-left: 1rem; - margin-left: auto; -} - -.post-comments { - margin-top: var(--y-gap); -} - -@media (max-width: 1199px) { - .post-title { - display: block; - } - - .post-title aside { - flex-direction: row; - width: auto; - padding-right: 0; - margin-bottom: 0.5rem; - margin-left: 0; - transform: none; - } - - .post-title aside span::before { - content: '·'; - margin-inline: 0.5rem; - } -} - -/* Post content - -------------------------------------------------- */ -.post-content { - font-size: 2.2rem; -} - -.post-content h1, -.post-content h2, -.post-content h3, -.post-content h4, -.post-content h5, -.post-content h6 { - margin-block: 2rem; -} - -.post-content h1 { - margin-top: var(--y-gap); - font-size: 4.5rem; -} - -.post-content h2 { - margin-top: 6rem; - font-size: 3.5rem; -} - -.post-content h3 { - font-size: 2.5rem; -} - -.post-content h4 { - font-size: 2.2rem; -} - -.post-content h5 { - font-size: 1.8rem; -} - -.post-content h6 { - font-size: 1.5rem; -} - -.post-content img { - margin-inline: auto; -} - -.post-content a { - color: var(--link-color); - padding-bottom: 0.2rem; -} - -.post-content a:hover { - border-bottom: 2px solid var(--link-color); -} - -.post-content a code { - margin-inline: 0; - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; -} - -.post-content del { - text-decoration: none; - background: linear-gradient(to right, var(--pro) 100%, transparent 0) 0 50% / 1px 1px repeat-x; -} - -.post-content p, -.post-content ul, -.post-content ol, -.post-content dl, -.post-content details { - margin-bottom: 3rem; -} - -.post-content ul, -.post-content ol { - padding-left: 2.5rem; -} - -.post-content li { - margin-top: 0.6rem; -} - -.post-content li p { - margin-bottom: 0; -} - -.post-content dl { - display: flex; - flex-wrap: wrap; - margin: 0; -} - -.post-content dt { - width: 25%; - font-weight: 500; -} - -.post-content dd { - width: 75%; - padding-left: 1.3rem; - margin-left: 0; -} - -.post-content dt ~ dt, -.post-content dd ~ dd { - margin-top: 1.3rem; -} - -.post-content table { - margin-bottom: 4rem; -} - -.post-content table th, -.post-content table:not(.highlighttable) td { - min-width: 10rem; - padding: 1.5rem 1rem; - line-height: 1.5; - border-bottom: 1px solid var(--fog); -} - -.post-content table th { - font-size: 1.6rem; - text-align: left; -} - -.post-content table:not(.highlighttable) td code:only-of-type { - margin-inline: 0; -} - -.post-content .highlight, -.post-content pre { - margin: 0 calc(var(--gap) * -1) 4rem; - overflow-x: auto; - background: var(--hljs-bg) !important; - border-radius: 0.5rem; -} - -.post-content ul pre { - margin-left: calc(var(--gap) * -2); -} - -.post-content .highlight pre { - margin-inline: 0; - margin-bottom: 0; -} - -/* table */ -.post-content .highlighttable { - table-layout: fixed; -} - -.post-content .highlighttable td:first-of-type { - width: 5rem; -} - -.post-content .highlighttable td .linenodiv { - padding-right: 0 !important; -} - -.post-content .highlighttable td .linenodiv pre, -.post-content .highlighttable td .highlight { - margin-bottom: 0; -} - -.post-content .highlighttable td .highlight pre code::-webkit-scrollbar { - display: none; -} - -/* inline */ -.post-content .highlight span { - background: transparent !important; -} - -.post-content code { - padding: 0.5rem 1rem; - margin-inline: 0.5rem; - font-family: Menlo, Monaco, 'Courier New', Courier, monospace; - font-size: 0.8em; - line-height: 1.5; - background: rgba(var(--dark), 0.06); - border-radius: 0.3rem; -} - -.post-content pre code { - display: block; - padding: var(--gap); - margin-inline: 0; - color: rgba(255, 255, 255, 0.8); - background: transparent; - border-radius: 0; -} - -.post-content blockquote { - padding: 0 0 0 calc(var(--gap) - 0.4rem); - margin: 0 0 0 calc(var(--gap) * -1); - border-left: 0.4rem solid var(--pro); -} - -.post-content hr { - height: 1px; - background: var(--fog); - border: 0; - margin-block: 12rem; -} - -.post-content iframe { - width: 100%; - background: var(--black); -} - -/* Footer - -------------------------------------------------- */ -.footer { - display: flex; - align-items: center; - justify-content: center; - max-width: var(--narrow); - height: var(--footer); - padding-bottom: var(--safe-bottom); - margin-top: auto; - font-size: 1.6rem; - color: var(--lit); - border-top: 1px solid var(--fog); -} - -.footer p + p::before { - content: '·'; - margin-inline: 0.6rem; -} - -.footer a:hover { - color: var(--pro); - border-bottom: 1px solid var(--pro); -} - -.flex-date { - display: flex; - align-items: baseline; -} - -.flex-date .date { - margin-left: auto; - font-size: 80%; - font-style: italic; -} - -.draft { - text-transform: uppercase; - font-size: 80%; - color: white; - font-weight: 800; - /*border: 2px solid #aaa;*/ - border-radius: 4px; - padding: 0.2rem 0.8rem; - margin-left: 0.5rem; - background-color: #aaa; -} - -figure { - padding: 6px; - border: 1px solid var(--fog); - border-radius: 4px; -} - -.post-content figcaption > h4 { - margin: 0; - margin-block: 0; - margin-top: 6px; - font-size: 2rem; -} - -img { - border-radius: 4px; - display: block; - max-width: 100%; -} - -div.twitter-tweet { - text-align: center; -} - -.twitter-tweet + p, -.twitter-tweet + script + p { - margin-top: 3rem; -} - -/* 404 - -------------------------------------------------- */ -.title-404 { - display: flex; - align-items: center; - justify-content: center; - height: 100%; - padding-bottom: 8rem; - font-size: 16rem; -} diff --git a/static/styles/home.css b/static/styles/home.css deleted file mode 100644 index e858d6b..0000000 --- a/static/styles/home.css +++ /dev/null @@ -1,43 +0,0 @@ -/* home.css - * Eryn Wells - */ - -.main h1, -.main h2, -.main h3 { - margin-top: 5rem; - margin-bottom: 0.7rem; -} - -.main h1:first-child { - margin-top: 0; -} - -.main a { - color: var(--link-color); -} - -.main a:hover { - border-bottom: 2px solid var(--link-color); -} - -.main h1 { - font-size: 5rem; -} - -.main h2 { - font-size: 3rem; -} - -#homepage-content { - margin-bottom: 2em; -} - -.main p:first-child { - margin-top: 0; -} - -.main p, -.main ul { - margin-top: 1.5rem; -}