diff --git a/components/footer.tsx b/components/footer.tsx
index b7bada5..e21a360 100644
--- a/components/footer.tsx
+++ b/components/footer.tsx
@@ -2,13 +2,32 @@ import Link from "next/link"
import styled from 'styled-components'
const Footer = styled.footer`
- border-top: 1px dotted #aaa;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ border-top: var(--border-size) var(--border-type) var(--border-color);
+ margin-top: auto;
+ padding: 1.2rem;
+
+ color: var(--fg-faded);
+`
+
+const UList = styled.ul`
+ display: flex;
+ flex-direction: row;
+ list-style: none;
+ gap: 2rem;
`
export default () => {
return (
-
+
)
}
diff --git a/components/header.tsx b/components/header.tsx
index fe20c82..d1e64d1 100644
--- a/components/header.tsx
+++ b/components/header.tsx
@@ -1,12 +1,16 @@
-import Link from "next/link"
import styled from 'styled-components'
+import Nav from './nav'
const Header = styled.header`
display: flex;
align-items: center;
- max-width: 70rem;
- padding: 0 4rem;
- border-bottom: 1px dotted #aaa;
+ border-bottom: var(--border-size) var(--border-type) var(--border-color);
+ padding: var(--v-uni-padding) var(--h-uni-padding);
+
+ h1 {
+ font-size: 2rem;
+ font-weight: normal;
+ }
nav {
margin-left: auto;
@@ -14,29 +18,11 @@ const Header = styled.header`
}
`
-const Nav = styled(Header).attrs({as: "nav"})`
- gap: 1.5rem;
- font-size: 1.5rem;
- border: unset;
-
- a {
- transition: .2s opacity
- }
-
- a:hover {
- opacity: .4;
- }
-`
-
export default () => {
return (
wych.dev
-
+
yo
+ <> +I am a student with a passion for programming, physics/mathematics and *NIX (Linux, UNIX etc).
+ > ) } diff --git a/styles/globals.css b/styles/globals.css index 64801a4..9c43646 100755 --- a/styles/globals.css +++ b/styles/globals.css @@ -1,19 +1,47 @@ :root { font-size: 16px; - color: #222; + --border-type: dotted; + --border-size: 1px; + --border-color: #ddd; + --border-radius: 1rem; + + --content-max-width: 60rem; + --h-uni-padding: .8rem; + --v-uni-padding: .2rem; + + --fg: #222; + --fg-faded: #aaa; + --fg-button: #0a070a; + --fg-link: #abf; + + --bg: #fefeff; + color: var(--fg); +} + +* { + box-sizing: border-box; + font-family: "IBM Plex Mono", monospace; + padding: 0; + margin: 0; +} + +html { + background: var(--bg); } -html, body { - padding: 0; - margin: 0; - font-family: "IBM Plex Mono", monospace; +body { + display: flex; + flex-direction: column; + margin: 0 auto; + max-width: var(--content-max-width); } a { - color: inherit; - text-decoration: none; + color: var(--fg-link); + text-decoration: none; } -* { - box-sizing: border-box; +main { + min-height: 70vh; } +