Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget mollis odio, ac facilisis lorem. Sed elit ipsum, rhoncus quis tortor ut, gravida aliquam neque. Proin ex nisl, cursus auctor consequat ac, molestie - quis nunc. Proin lectus neque, rhoncus eget tincidunt sit amet, + quis nunc. Proin lectus neque, rhoncus eget tincidunt sit amet, + sollicitudin in justo. Fusce lacinia augue odio, et accumsan purus pulvinar + ac. Sed sagittis urna in ipsum faucibus congue. Maecenas gravida massa non + lacinia facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Sed sollicitudin lacus sit amet tempus feugiat. Nullam at ipsum sit amet + risus ornare interdum vel sed ligula.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget + mollis odio, ac facilisis lorem. Sed elit ipsum, rhoncus quis tortor ut, + gravida aliquam neque. Proin ex nisl, cursus auctor consequat ac, molestie + quis nunc. Proin lectus neque, rhoncus eget tincidunt sit amet, + sollicitudin in justo. Fusce lacinia augue odio, et accumsan purus pulvinar + ac. Sed sagittis urna in ipsum faucibus congue. Maecenas gravida massa non + lacinia facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Sed sollicitudin lacus sit amet tempus feugiat. Nullam at ipsum sit amet + risus ornare interdum vel sed ligula.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget + mollis odio, ac facilisis lorem. Sed elit ipsum, rhoncus quis tortor ut, + gravida aliquam neque. Proin ex nisl, cursus auctor consequat ac, molestie + quis nunc. Proin lectus neque, rhoncus eget tincidunt sit amet, + sollicitudin in justo. Fusce lacinia augue odio, et accumsan purus pulvinar + ac. Sed sagittis urna in ipsum faucibus congue. Maecenas gravida massa non + lacinia facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Sed sollicitudin lacus sit amet tempus feugiat. Nullam at ipsum sit amet + risus ornare interdum vel sed ligula.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget + mollis odio, ac facilisis lorem. Sed elit ipsum, rhoncus quis tortor ut, + gravida aliquam neque. Proin ex nisl, cursus auctor consequat ac, molestie + quis nunc. Proin lectus neque, rhoncus eget tincidunt sit amet, + sollicitudin in justo. Fusce lacinia augue odio, et accumsan purus pulvinar + ac. Sed sagittis urna in ipsum faucibus congue. Maecenas gravida massa non + lacinia facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Sed sollicitudin lacus sit amet tempus feugiat. Nullam at ipsum sit amet + risus ornare interdum vel sed ligula.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget + mollis odio, ac facilisis lorem. Sed elit ipsum, rhoncus quis tortor ut, + gravida aliquam neque. Proin ex nisl, cursus auctor consequat ac, molestie + quis nunc. Proin lectus neque, rhoncus eget tincidunt sit amet, + sollicitudin in justo. Fusce lacinia augue odio, et accumsan purus pulvinar + ac. Sed sagittis urna in ipsum faucibus congue. Maecenas gravida massa non + lacinia facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Sed sollicitudin lacus sit amet tempus feugiat. Nullam at ipsum sit amet + risus ornare interdum vel sed ligula.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget + mollis odio, ac facilisis lorem. Sed elit ipsum, rhoncus quis tortor ut, + gravida aliquam neque. Proin ex nisl, cursus auctor consequat ac, molestie + quis nunc. Proin lectus neque, rhoncus eget tincidunt sit amet, sollicitudin in justo. Fusce lacinia augue odio, et accumsan purus pulvinar ac. Sed sagittis urna in ipsum faucibus congue. Maecenas gravida massa non lacinia facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. diff --git a/src/static/css/main.css b/src/static/css/main.css index cebbf1b..efaaf9d 100644 --- a/src/static/css/main.css +++ b/src/static/css/main.css @@ -1,18 +1,24 @@ @import "../fonts/inter/inter.css"; *, *::before, *::after { - box-sizing: content-box; + box-sizing: border-box; } :root { --brand: #66cc00; --text: #000000de; + --text-00: #ffffffde; + + --bg-00: #000000; + + --link: #0066ffde; } body { font-family: "Inter var", "Inter", sans-serif; color: var(--text); + margin: 0; } h1, h2, h3 {font-weight: 250} @@ -28,3 +34,39 @@ h5 {font-size: 1rem} h6 {font-size: .8rem} p {font-weight: 350} +a { + color: var(--link); + text-decoration: none; +} +a:hover {text-decoration: underline;} + +.logo { + border-radius: 50%; +} + +nav { + position: sticky; + top: 0; + height: 4rem; + line-height: 2rem; + padding: 1rem; + width: 100%; + background: var(--bg-00); + color: var(--text-00); +} +nav > * { + margin-right: 1rem; + height: 2rem; + display: inline-block; + vertical-align: middle; +} +nav a { + color: inherit; +} +nav a.active { + font-weight: 550; +} +nav .logo { + height: 2rem; + border: .1rem solid white; +} diff --git a/src/static/svg/logo.svg b/src/static/svg/logo.svg new file mode 100644 index 0000000..ede5c1d --- /dev/null +++ b/src/static/svg/logo.svg @@ -0,0 +1,15 @@ +