diff options
| -rw-r--r-- | pages/_app.tsx | 2 | ||||
| -rw-r--r-- | readme.md | 16 | ||||
| -rw-r--r-- | styles/button.css | 6 | ||||
| -rw-r--r-- | styles/card.css | 8 | ||||
| -rw-r--r-- | styles/code.css | 2 | ||||
| -rw-r--r-- | styles/colors.css | 30 | ||||
| -rw-r--r-- | styles/globals.css | 50 | ||||
| -rw-r--r-- | styles/layout.css | 37 | ||||
| -rw-r--r-- | styles/navbar.css | 16 | ||||
| -rw-r--r-- | styles/search.css | 11 | ||||
| -rw-r--r-- | styles/theme.css | 110 |
11 files changed, 146 insertions, 142 deletions
diff --git a/pages/_app.tsx b/pages/_app.tsx index 119d817..a6c53d3 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -4,7 +4,6 @@ import { useEffect, useState } from 'react'; import '../styles/button.css'; import '../styles/card.css'; import '../styles/code.css'; -import '../styles/colors.css'; import '../styles/globals.css'; import '../styles/image.css'; import '../styles/layout.css'; @@ -12,6 +11,7 @@ import '../styles/navbar.css'; import '../styles/print.css'; import '../styles/search.css'; import '../styles/tags.css'; +import '../styles/theme.css'; export default function Blog({ Component, pageProps }) { var [dark, setDark] = useState(false); @@ -4,13 +4,13 @@ this is the source of my blog website ## important locations for stuff -|**what** | **location** | -|----------------------|---------------------| -|**home page content** | `posts/index.md` | -|**posts** | `posts/*.md` | -|**pinned posts** | `pages/index.tsx` | -|**images** | `public/img/*` | -|**rss feed info** | `rss/base.xml` | -|**theme stuff** | `styles/colors.css` | +|**what** | **location** | +|----------------------|--------------------| +|**home page content** | `posts/index.md` | +|**posts** | `posts/*.md` | +|**pinned posts** | `pages/index.tsx` | +|**images** | `public/img/*` | +|**rss feed info** | `rss/base.xml` | +|**theme stuff** | `styles/theme.css` | it's mit licensed so you can basically shamelessly copy it and i won't cry diff --git a/styles/button.css b/styles/button.css index d3a44e3..9efe41f 100644 --- a/styles/button.css +++ b/styles/button.css @@ -1,7 +1,4 @@ .button { - background-color: var(--fire-opal); - color: var(--fg) !important; - padding: 12px; min-width: 200px; text-align: center; @@ -23,6 +20,3 @@ a.button { min-width: calc(200px - 2 * 12px); } a.button::after { display: none; } -@media (prefers-color-scheme: light) { - .button { color: var(--bg) !important; } -} diff --git a/styles/card.css b/styles/card.css index 0b3a20c..f49b40e 100644 --- a/styles/card.css +++ b/styles/card.css @@ -1,5 +1,5 @@ .postCard { - background-color: var(--oxford-blue); + background-color: var(--bg-alt); padding: 12px; border-radius: 8px; @@ -27,9 +27,3 @@ font-weight: 500; } -@media (prefers-color-scheme: light) { - .postCard { - background-color: var(--heliotrope-gray); - } -} - diff --git a/styles/code.css b/styles/code.css index f43381d..dde7bdb 100644 --- a/styles/code.css +++ b/styles/code.css @@ -1,5 +1,5 @@ pre { - background-color: var(--oxford-blue); + background-color: var(--bg-alt); border-radius: 6px; padding: 6px; } diff --git a/styles/colors.css b/styles/colors.css deleted file mode 100644 index 3cb13d5..0000000 --- a/styles/colors.css +++ /dev/null @@ -1,30 +0,0 @@ -:root { - --almond: #F4DEC9; - --heliotrope-gray: #A69CAC; - --purple-navy: #474973; - --oxford-blue: #161B33; - --xiketic: #0D0C1A; - --magnolia: #EFE9F4; - - --fire-opal: #EE6352; - --cyan-process: #08B2E3; - --forest-green-crayola: #57A773; - - --bg: var(--xiketic); - --fg: var(--almond); -} - -@media (prefers-color-scheme: light) { - :root { - --heliotrope-gray: #dbdbe6; - --purple-navy: #989abb; - - --fire-opal: #ba3321; - --cyan-process: #397889; - --forest-green-crayola: #376848; - - --bg: var(--magnolia); - --fg: var(--xiketic); - } -} - diff --git a/styles/globals.css b/styles/globals.css index a1a58c5..5ccd71f 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -5,33 +5,11 @@ html, body { background-color: var(--bg); color: var(--fg); - font-family: "Inter", sans-serif; hyphens: auto; } -code { font-family: "JetBrainsMono", monospace; } - -::selection { - background-color: var(--fire-opal); -} - -h1, h2, h3 { - font-weight: 700; - margin: 0; -} - -h1 { font-size: 64px; } -h2 { font-size: 48px; } -h3 { font-size: 32px; } - -.subtile { - font-style: italic; - opacity: .75; - color: var(--heliotrope-gray); -} - .contentWrapper a { - color: var(--fire-opal); + color: var(--links); text-decoration: none; position: relative; display: inline-block; @@ -41,10 +19,16 @@ h3 { font-size: 32px; } content: ''; position: absolute; left: 0; - right: 0; bottom: 0; height: 1px; - background-color: var(--fire-opal); + width: 0%; + transition: width; + transition-duration: 150ms; + background-color: var(--links); +} + +.contentWrapper a:hover::after { + width: 100%; } ::-webkit-scrollbar { @@ -52,30 +36,14 @@ h3 { font-size: 32px; } height: 12px; } -::-webkit-scrollbar-track { - background-color: var(--bg); -} - ::-webkit-scrollbar-thumb { - background-color: var(--purple-navy); border-radius: 6px; border: 4px solid var(--bg); } -::-webkit-scrollbar-thumb:hover { - background-color: var(--fg); -} - :focus { outline: none; } li { margin-bottom: 6px; } -@media (prefers-color-scheme: light) { - .subtile { - opacity: .6; - color: var(--fg); - } -} - diff --git a/styles/layout.css b/styles/layout.css index aac9da4..706f5c9 100644 --- a/styles/layout.css +++ b/styles/layout.css @@ -80,34 +80,6 @@ display: none; } -blockquote { - position: relative; - padding-left: 12px; - font-style: italic; - color: var(--heliotrope-gray); -} - -blockquote:before { - position: absolute; - content: ''; - top: 0; - bottom: 0; - left: 0; - width: 3px; - background-color: var(--cyan-process); -} - -@media (prefers-color-scheme: light) { - blockquote { - color: var(--oxford-blue); - opacity: .8; - } -} - -@media screen and (max-device-width: 550px) and (prefers-color-scheme: light) { - .navAreaWrapper { background-color: #dbdbe688 !important; } -} - @media screen and (max-device-width: 550px) { .centeredPage { grid-template-columns: 0 1fr; @@ -132,8 +104,15 @@ blockquote:before { opacity: 0; pointer-events: none; backdrop-filter: blur(50px); + } + + .navAreaWrapper:before { + content: ''; + position: absolute; + inset: 0px 0px 0px 0px; - background-color: #161B33a0; + background-color: var(--bg-alt); + opacity: .7; } .navAreaWrapper.navVisible { diff --git a/styles/navbar.css b/styles/navbar.css index 9c697da..26d0b1d 100644 --- a/styles/navbar.css +++ b/styles/navbar.css @@ -1,5 +1,5 @@ .navbarItem .inner { - background-color: var(--oxford-blue); + background-color: var(--bg-alt); color: var(--fg); padding: 8px; @@ -36,8 +36,8 @@ .navbarItem.active .inner, .navbarItem.link:hover .inner { - background-color: var(--heliotrope-gray); - color: var(--oxford-blue); + background-color: var(--fg-alt); + color: var(--bg-alt); } .navbarItem.chapter .inner, @@ -53,7 +53,7 @@ margin: 0; font-style: italic; opacity: .8; - color: var(--heliotrope-gray) + color: var(--fg-alt) } .navbarItem.pinned * { cursor: default !important; } @@ -88,18 +88,14 @@ .navbarItem > div > svg { vertical-align: super; } @media (prefers-color-scheme: light) { - .navbarItem .inner { background-color: var(--heliotrope-gray); } - .mobileNav .button.small { background-color: var(--cyan-process) !important; } - .navbarItem.active .inner, .navbarItem.link:hover .inner { - color: var(--bg); background-color: var(--fg); } .navbarItem.pinned .inner .title { opacity: .6; - color: var(--oxford-blue) + color: var(--fg-alt); } } @@ -115,7 +111,6 @@ .mobileNav .button { padding: 12px; - background-color: var(--fire-opal); display: inline-block !important; min-width: 0; border-radius: 24px; @@ -137,7 +132,6 @@ .mobileNav .button.small { padding: 6px; - background-color: var(--purple-navy); margin-bottom: 12px; opacity: 0; diff --git a/styles/search.css b/styles/search.css index 270f2f6..e424b6b 100644 --- a/styles/search.css +++ b/styles/search.css @@ -1,5 +1,5 @@ .searchBar { - background-color: var(--heliotrope-gray); + background-color: var(--fg-alt); border-radius: 8px; padding: 12px; margin-bottom: 24px; @@ -16,9 +16,6 @@ padding: 14px 0; vertical-align: top; - - font-family: "Inter", sans-serif; - font-size: 16px; } .searchBar .input::placeholder { @@ -34,7 +31,7 @@ line-height: 0; min-width: unset; background-color: var(--bg); - color: var(--heliotrope-gray) !important; + color: var(--fg-alt) !important; } .searchResults .post::after { @@ -47,7 +44,7 @@ padding: 12px; margin-bottom: 12px; - background-color: var(--oxford-blue); + background-color: var(--bg-alt); color: var(--fg); } @@ -66,7 +63,5 @@ @media (prefers-color-scheme: light) { .searchBar { background-color: var(--fg); } .searchBar .button { color: var(--fg) !important; } - - .searchResults .post { background-color: var(--heliotrope-gray); } } diff --git a/styles/theme.css b/styles/theme.css new file mode 100644 index 0000000..c3a8dee --- /dev/null +++ b/styles/theme.css @@ -0,0 +1,110 @@ +:root { + --almond: #F4DEC9; + --heliotrope-gray: #A69CAC; + --purple-navy: #474973; + --oxford-blue: #161B33; + --xiketic: #0D0C1A; + --magnolia: #EFE9F4; + + --fire-opal: #EE6352; + --cyan-process: #08B2E3; + --forest-green-crayola: #57A773; + + --bg: var(--xiketic); + --fg: var(--almond); + + --bg-alt: var(--oxford-blue); + --fg-alt: var(--heliotrope-gray); + --links: var(--fire-opal); +} + +html, +.searchBar .input { + font-family: "Inter", sans-serif; + font-size: 16px; +} + +code, pre { + font-family: "JetBrainsMono", monospace; + font-size: 12px; +} + +.subtile { + font-style: italic; + opacity: .75; + color: var(--heliotrope-gray); +} + +h1, h2, h3 { + font-weight: 700; + margin: 0; +} + +h1 { font-size: 64px; } +h2 { font-size: 48px; } +h3 { font-size: 32px; } + +::-webkit-scrollbar-track { background-color: var(--bg); } +::-webkit-scrollbar-thumb { background-color: var(--purple-navy); } +::-webkit-scrollbar-thumb:hover { background-color: var(--fg); } + +.button { + background-color: var(--fire-opal); + color: var(--fg) !important; +} + +::selection { + background-color: var(--fire-opal); +} + +blockquote { + position: relative; + padding-left: 12px; + font-style: italic; + color: var(--fg-alt); +} + +blockquote:before { + position: absolute; + content: ''; + top: 0; + bottom: 0; + left: 0; + width: 3px; + background-color: var(--cyan-process); +} + +.mobileNav .button { + background-color: var(--fire-opal); + color: var(--fg); +} + +.mobileNav .button.small { + background-color: var(--fg-alt); + color: var(--bg) !important; +} + +@media (prefers-color-scheme: light) { + :root { + --heliotrope-gray: #dbdbe6; + --purple-navy: #989abb; + + --fire-opal: #ba3321; + --cyan-process: #397889; + --forest-green-crayola: #376848; + + --bg: var(--magnolia); + --fg: var(--xiketic); + --bg-alt: var(--heliotrope-gray); + --fg-alt: var(--oxford-blue); + } + + .subtile { + opacity: .6; + color: var(--fg); + } + + blockquote { opacity: .8; } + .button { color: var(--bg) !important; } +} + |