diff --git a/components/iconlink.tsx b/components/iconlink.tsx index 33c32be..d5a0726 100644 --- a/components/iconlink.tsx +++ b/components/iconlink.tsx @@ -3,7 +3,7 @@ import {FontAwesomeIcon} from "@fortawesome/react-fontawesome" import styled from "styled-components" const ILink = styled.a` - font-size: 24px; + font-size: 1.5rem; margin: 0 .4rem; ` diff --git a/pages/index.tsx b/pages/index.tsx index c6e6d99..100d843 100755 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -27,7 +27,7 @@ export const Section = styled.section` } .topmargin { - margin-top: 2rem; + margin-top: 1rem; } ul li { @@ -50,7 +50,9 @@ export const Section = styled.section` ` export const Code = styled.code` - background-color: var(--bg-dark); + font-family: monospace; + font-size: .9rem; + background-color: var(--bg-emph); color: var(--fg-code); border-radius: .4rem; padding: .1rem .4rem; diff --git a/styles/globals.css b/styles/globals.css index 231167a..4f65ae9 100755 --- a/styles/globals.css +++ b/styles/globals.css @@ -1,3 +1,5 @@ +@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap'); + :root { font-size: 16px; --border-type: solid; @@ -5,14 +7,14 @@ --border-color: var(--fg-faded); --border-radius: 1rem; - --content-max-width: 60rem; + --content-max-width: 850px; --h-uni-padding: .8rem; --v-uni-padding: .2rem; - --fg: #EFE8D7; + --fg: #E1DCCE; color: var(--fg); /* --fg-emph: #fbebe2; */ - --fg-emph: var(--fg); + --fg-emph: #EFE8D7; --fg-faded: #928373; --fg-button: var(--fg-faded); --fg-link: #8398AC; @@ -21,12 +23,13 @@ --emph-shadow: 0 0 2px; --bg: #181818; + --bg-emph: #242424; --trans-time: 200ms; } * { box-sizing: border-box; - font-family: "Open Sans"; + font-family: "Open Sans", sans-serif; padding: 0; margin: 0; } @@ -60,6 +63,7 @@ a:hover { } h1, h2, h3, h4, h5, em { + font-weight: normal; color: var(--fg-emph); }