diff options
| -rw-r--r-- | components/tag.tsx | 24 | ||||
| -rw-r--r-- | pages/_app.tsx | 1 | ||||
| -rw-r--r-- | pages/index.tsx | 2 | ||||
| -rw-r--r-- | styles/button.css | 3 | ||||
| -rw-r--r-- | styles/colors.css | 11 | ||||
| -rw-r--r-- | styles/globals.css | 7 | ||||
| -rw-r--r-- | styles/navbar.css | 14 | ||||
| -rw-r--r-- | styles/tags.css | 40 |
8 files changed, 100 insertions, 2 deletions
diff --git a/components/tag.tsx b/components/tag.tsx new file mode 100644 index 0000000..6cacb89 --- /dev/null +++ b/components/tag.tsx @@ -0,0 +1,24 @@ +import { CSSProperties } from 'react'; + +export default function Tags(props: { + tags: Array<string>; +}) { + return <div className="tags"> + <span>Tags:</span> + {props.tags.map(tag => <Tag name={tag}/>)} + </div> +} + +export function Tag(props: { + name: string; +}) { + return <a className="tag" href={"/search?tag=" + props.name} style={{ + "--tag-hue": props.name + .split("") + .map(char => char.charCodeAt(0)) + .reduce((a, b) => a + b) + % 360 + } as CSSProperties}> + {props.name} + </a> +} diff --git a/pages/_app.tsx b/pages/_app.tsx index 435fa0e..bc96369 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -6,6 +6,7 @@ import '../styles/globals.css'; import '../styles/navbar.css'; import '../styles/button.css'; import '../styles/image.css'; +import '../styles/tags.css'; export default function Blog({ Component, pageProps }) { return <div> diff --git a/pages/index.tsx b/pages/index.tsx index 675d159..a08825a 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -3,6 +3,7 @@ import Navbar from '../components/navbar'; import Button from '../components/button'; import Image from '../components/image'; import Chapters from '../components/chapters'; +import Tags from '../components/tag'; import ReactMarkdown from 'react-markdown'; @@ -12,6 +13,7 @@ export default function Home() { <div className="titleWrapper"> <h1>Loek’s excruciatingly interesting blog</h1> <p className="subtile">Loek heeft dit geschreven</p> + <Tags tags={[ "gert", "banaan", "komkommer" ]}/> </div> <div className="navAreaWrapper"> <div className="sticky"> diff --git a/styles/button.css b/styles/button.css index ff5ecec..d3a44e3 100644 --- a/styles/button.css +++ b/styles/button.css @@ -23,3 +23,6 @@ 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/colors.css b/styles/colors.css index afe051f..5cce897 100644 --- a/styles/colors.css +++ b/styles/colors.css @@ -11,3 +11,14 @@ --fg: var(--almond); } +@media (prefers-color-scheme: light) { + :root { + --heliotrope-gray: #c9c9dd; + --purple-navy: #989abb; + --fire-opal: #ba3321; + + --bg: var(--magnolia); + --fg: var(--xiketic); + } +} + diff --git a/styles/globals.css b/styles/globals.css index c1c4658..d0e0e4b 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -64,3 +64,10 @@ h3 { font-size: 32px; } background-color: var(--fg); } +@media (prefers-color-scheme: light) { + .subtile { + opacity: .6; + color: var(--fg); + } +} + diff --git a/styles/navbar.css b/styles/navbar.css index bfd48c5..7e66aa3 100644 --- a/styles/navbar.css +++ b/styles/navbar.css @@ -1,6 +1,6 @@ .navbarItem .inner { background-color: var(--oxford-blue); - color: var(--almond); + color: var(--fg); padding: 8px; border-radius: 8px; @@ -35,7 +35,7 @@ .navbarItem.indentLevel0 { margin-bottom: 12px; } .navbarItem.active .inner, -.navbarItem:hover .inner { +.navbarItem:not(.chapter):hover .inner { background-color: var(--heliotrope-gray); color: var(--oxford-blue); } @@ -79,3 +79,13 @@ .navbarItem > div > svg { vertical-align: super; } + +@media (prefers-color-scheme: light) { + .navbarItem .inner { background-color: var(--heliotrope-gray); } + + .navbarItem.active .inner, + .navbarItem:not(.chapter):hover .inner { + color: var(--bg); + background-color: var(--fg); + } +} diff --git a/styles/tags.css b/styles/tags.css new file mode 100644 index 0000000..95ce012 --- /dev/null +++ b/styles/tags.css @@ -0,0 +1,40 @@ +.titleWrapper .tags { + margin-top: 12px; +} + +.titleWrapper .tags .tag { + --tag-color: hsl(var(--tag-hue), 75%, 70%); + + padding: 4px 12px; + border-radius: 999px; + + text-decoration: none; + color: var(--fg); + + box-shadow: inset 0 0 0 2px var(--tag-color); + + position: relative; + z-index: 1; +} + +@media (prefers-color-scheme: light) { + .titleWrapper .tags .tag { + --tag-color: hsl(var(--tag-hue), 50%, 40%); + } +} + +.titleWrapper .tags .tag::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: -1; + + border-radius: 999px; + background-color: var(--tag-color); + opacity: .25; +} + +.titleWrapper .tags > * { margin-right: 6px; } |