c0ntroller/frontpage
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects 1 Activity

Even more styling

Browse Source
This commit is contained in:
Daniel Kluge 2022-10-16 00:05:44 +02:00
parent 6dd52770da
commit 37b723d3fb
5 changed files with 73 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/Blog/Layout.tsx
View File

@ -1,4 +1,5 @@
import type { NextPage } from "next"; import type { NextPage } from "next";
import { useEffect } from "react";
import Head from "next/head"; import Head from "next/head";
import Navigation from "./Navigation"; import Navigation from "./Navigation";
@ -9,6 +10,15 @@ interface ILayoutProps {
} }
const Layout: NextPage<ILayoutProps> = ({ title, children }) => { const Layout: NextPage<ILayoutProps> = ({ title, children }) => {
useEffect(() => {
if (typeof window !== "undefined") {
const theme = window.localStorage.getItem("theme");
if(!theme || !document) return;
document.documentElement.setAttribute("data-theme", theme);
}
}, []);
return <> return <>
<Head> <Head>
<title>{title ?? "c0ntroller.de"}</title> <title>{title ?? "c0ntroller.de"}</title>

24
components/Blog/Navigation.tsx
View File

@ -1,20 +1,38 @@
/* eslint-disable @next/next/no-img-element */ /* eslint-disable @next/next/no-img-element */
import type { NextPage } from "next"; import type { NextPage } from "next";
import Link from "next/link"; import Link from "next/link";
import { Terminal, Sun, Moon } from "phosphor-react";
import styles from "../../styles/Blog/Navigation.module.scss"; import styles from "../../styles/Blog/Navigation.module.scss";
const Navigation: NextPage<{}> = () => { const Navigation: NextPage<{}> = () => {
const switchTheme = () => {
if (typeof document === "undefined") return;
const current = document.documentElement.getAttribute("data-theme") || "dark";
const setTo = current === "dark" ? "light" : "dark";
document.documentElement.setAttribute("data-theme", setTo);
if (typeof window !== "undefined") window.localStorage.setItem("theme", setTo);
};
return <nav className={styles.navigation}> return <nav className={styles.navigation}>
<Link href={"/"}> <Link href={"/"}>
<a className="nostyle"> <a className={`nostyle ${styles.imgContainer}`}>
<picture> <picture>
<source srcSet="/icon.png" type="image/png" /> <source srcSet="/icon.png" type="image/png" />
<img src="/icon.png" alt={"Website icon, a red eye"} className={styles.logo} /> <img src="/icon.png" alt={"Website icon, a red eye"} className={styles.logo} />
</picture> </picture>
</a> </a>
</Link> </Link>
<div className={styles.navLink}>Projects</div> <div className={styles.navLink}><Link href={"/"}><a className="nostyle">Projects</a></Link></div>
<div className={styles.navLink}>About me</div> <div className={styles.navLink}><Link href={"/"}><a className="nostyle">About me</a></Link></div>
<div className={styles.spacer}></div>
<Terminal size={"1.5em"} />
<div className={styles.themeSwitch}>
<Sun className={styles.lightTheme} size={"1.5em"} onClick={switchTheme} />
<Moon className={styles.darkTheme} size={"1.5em"} onClick={switchTheme} />
</div>
</nav>; </nav>;
}; };

2
pages/index.tsx
View File

@ -1,10 +1,10 @@
import type { NextPage } from "next"; import type { NextPage } from "next";
import Layout from "../components/Blog/Layout";
import type { ContentList } from "../lib/content/types"; import type { ContentList } from "../lib/content/types";
import ProjectCard from "../components/Blog/Card"; import ProjectCard from "../components/Blog/Card";
import { getContentList } from "../lib/content/generateBackend"; import { getContentList } from "../lib/content/generateBackend";
import styles from "../styles/Blog/Front.module.scss"; import styles from "../styles/Blog/Front.module.scss";
import Layout from "../components/Blog/Layout";
const Blog: NextPage<{ content: ContentList }> = ({content}) => { const Blog: NextPage<{ content: ContentList }> = ({content}) => {
const generateCards = (type: string) => { const generateCards = (type: string) => {

47
styles/Blog/Navigation.module.scss
View File

@ -1,7 +1,10 @@
.navigation { .navigation {
display: block; display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
max-width: 1000px; max-width: 1000px;
min-width: 300px; /*min-width: 300px;*/
position: relative; position: relative;
height: calc(1em + 40px); height: calc(1em + 40px);
@ -16,26 +19,48 @@
backdrop-filter: blur(var(--blog_content-blur)); backdrop-filter: blur(var(--blog_content-blur));
box-shadow: 0px 2px 5px gray; box-shadow: 0px 2px 5px gray;
.logo { .imgContainer {
display: inline-block; align-self: flex-start;
margin-top: -10px; margin-top: -10px;
height: calc(1em + 40px - 20px);
position: absolute; position: absolute;
cursor: pointer; cursor: pointer;
display: none;
}
.logo {
height: calc(1em + 40px - 20px);
} }
.navLink { .navLink {
display: inline-block; transition: text-decoration 0.3s ease-in-out;
transition: text-decoration 0.2s ease-in-out; display: block;
margin: auto 5px; margin: auto 5px;
cursor: pointer; cursor: pointer;
&:nth-of-type(1) {
margin-left: calc((501 / 204) * (1em + 40px - 20px) + 15px);
}
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
} }
} }
@media screen and (min-width: 300px) {
.imgContainer {
display: block;
}
.navLink:nth-of-type(1) {
margin-left: calc((501 / 204) * (1em + 40px - 20px) + 15px);
}
}
.spacer {
flex-grow: 2;
}
.themeSwitch {
.lightTheme {
display: var(--blog_dark-el-display)
}
.darkTheme {
display: var(--blog_light-el-display)
}
}
} }

5
styles/globals.scss
View File

@ -22,6 +22,9 @@
--blog_content-blur: 10px; --blog_content-blur: 10px;
--blog_color: #ddd; --blog_color: #ddd;
--blog_light-el-display: none;
--blog_dark-el-display: initial;
&[data-theme="light"]{ &[data-theme="light"]{
--blog_nav-background: rgba(192, 192, 192, 0.3); --blog_nav-background: rgba(192, 192, 192, 0.3);
--blog_nav-border: #ccc; --blog_nav-border: #ccc;
@ -32,6 +35,8 @@
--blog_content-blur: 5px; --blog_content-blur: 5px;
--blog_color: #222; --blog_color: #222;
--blog_light-el-display: initial;
--blog_dark-el-display: none;
} }
} }