initial commit

styles/style.css

@@ -0,0 +1,113 @@
+:root {
+  --light-text: #181715;
+  --light-bg: #ffffff;
+  --light-border: #181715;
+  /* --dark-text: #ffffff;
+  --dark-bg: #181715;
+  --dark-border: #ffffff; */
+  --light-hightlight: #72dec2;
+}
+
+@font-face {
+  font-family: "Iosevka";
+  src: url('/font/iosevka-regular.woff') format('woff');
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+  color: var(--light-text);
+  background: var(--light-bg);
+}
+
+body {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 5rem 1fr 5rem;
+  grid-column-gap: 0px;
+  grid-row-gap: 0px;
+  font-family: 'Iosevka';
+}
+
+header,
+footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 3rem;
+}
+
+header {
+  grid-area: 1 / 1 / 2 / 2;
+  border-bottom: 2px solid var(--light-border);
+}
+
+footer {
+  grid-area: 3 / 1 / 4 / 2;
+  border-top: 2px solid var(--light-border);
+}
+
+.main {
+  grid-area: 2 / 1 / 3 / 2;
+  padding: 3rem 3rem 3rem 3rem;
+  font-size: 1.3rem;
+  line-height: 2rem;
+  max-width: 120ch;
+}
+
+a,
+a:visited {
+  text-decoration: none;
+  color: var(--light-text);
+}
+
+.main a {
+  /* link offset */
+  position: relative;
+  top: 0.2rem;
+}
+
+a:hover,
+a:focus {
+  background-color: var(--light-hightlight);
+  text-decoration: line-through var(--light-text);
+}
+
+.logo {
+  font-size: 3rem;
+  font-weight: bold;
+}
+
+.account,
+.sections {
+  font-size: 2rem
+}
+
+.main img {
+  position: absolute;
+  bottom: 5rem;
+  right: 0;
+}
+
+.copyleft a,
+.sections a {
+  margin: 0 1rem 0 0;
+}
+
+.copyleft a:hover,
+.copyleft a:focus {
+  background-color: var(--light-bg);
+}
+
+.copyleft {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}