aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorlonkaars <loek@pipeframe.xyz>2021-07-20 17:41:40 +0200
committerlonkaars <loek@pipeframe.xyz>2021-07-20 17:41:40 +0200
commite7742563d4737b087faa0cc11e4e93adfeca7650 (patch)
tree610e9a178a93ee85285d61715aacb17a63ef4d67
parentff2cb35e8a238b94e4be59154207590adc81fa8c (diff)
new theme.css
-rw-r--r--pages/_app.tsx2
-rw-r--r--readme.md16
-rw-r--r--styles/button.css6
-rw-r--r--styles/card.css8
-rw-r--r--styles/code.css2
-rw-r--r--styles/colors.css30
-rw-r--r--styles/globals.css50
-rw-r--r--styles/layout.css37
-rw-r--r--styles/navbar.css16
-rw-r--r--styles/search.css11
-rw-r--r--styles/theme.css110
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);
diff --git a/readme.md b/readme.md
index 49caab0..4daca90 100644
--- a/readme.md
+++ b/readme.md
@@ -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; }
+}
+