feat: change font

Author: tuxy-streamer

assets/sass/layouts/common.scss

@@ -0,0 +1,226 @@
+@use "sass:math";
+
+@import url('https://fonts.googleapis.com/css2?family=Fira+Code:[email protected]&display=swap');
+@import "../vars";
+
+// global
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-family: "Fira Code" !important;
+}
+
+body {
+  background-color: var(--bg);
+  color: var(--fg);
+}
+
+a {
+  text-decoration: none;
+
+  &:link {
+    color: var(--blue);
+  }
+
+  &:hover,
+  &:visited {
+    color: var(--blue-dim);
+  }
+}
+
+::selection {
+  background-color: var(--blue);
+  color: white;
+}
+
+time {
+  color: var(--fg4);
+  margin-left: 1rem;
+  min-width: 5rem;
+}
+
+hr {
+  background-color: var(--fg4);
+  margin-top: $margin;
+  margin-bottom: $margin;
+  border: 0;
+  height: $border;
+}
+
+#wrapper {
+  background-color: var(--bg);
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  overflow-wrap: break-word;
+  padding: 1rem $padding;
+
+  @media screen and (max-width: $mobile-breakpoint) {
+    padding-left: math.div($padding, 3);
+    padding-right: math.div($padding, 3);
+  }
+}
+
+.paginator {
+  align-items: flex-end;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-top: 2rem;
+}
+
+::-webkit-scrollbar {
+  background-color: var(--bg);
+  height: 8px;
+  width: 8px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--fg4);
+
+  &:hover {
+    background-color: var(--fg1);
+  }
+}
+
+// header
+#header {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+
+  &>h1 {
+    text-align: center;
+
+    @media screen and (min-width: $mobile-breakpoint) {
+      font-size: 2.8rem;
+    }
+  }
+
+  &>nav {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    flex-wrap: wrap;
+    max-width: $mobile-breakpoint;
+    margin-top: 10px;
+    width: 100%;
+
+    &>span>a {
+      font-size: 1.2rem;
+      color: var(--fg1);
+      text-decoration: none;
+      display: inline-block;
+      position: relative;
+
+      &:after {
+        background-color: var(--fg1);
+        content: "";
+        position: absolute;
+        width: 100%;
+        transform: scaleX(0);
+        height: $border;
+        bottom: 0;
+        left: 0;
+        transform-origin: bottom right;
+        transition: transform 0.25s ease-out;
+      }
+
+      &:hover:after {
+        transform: scaleX(1);
+        transform-origin: bottom left;
+      }
+    }
+  }
+
+  a,
+  a:hover,
+  a:visited {
+    color: var(--fg1);
+  }
+}
+
+// main
+main {
+  margin: 0 $margin;
+}
+
+#main {
+  align-self: center;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  max-width: 100%;
+  padding: 0;
+  width: calc(100% - 2rem); // TODO
+
+  @media screen and (max-width: $mobile-breakpoint) {
+    width: 100%;
+  }
+}
+
+// footer
+#footer {
+  color: var(--fg4);
+  align-items: center;
+  display: flex;
+  font-size: 0.9rem;
+  flex-direction: column;
+  margin-top: $margin;
+
+  &>.footnote {
+    text-align: center;
+  }
+}
+
+// misc
+#sharingbuttons {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-top: 1rem;
+  flex-wrap: wrap;
+}
+
+.dark-mode-toggle {
+  background-color: var(--bg);
+  color: var(--fg);
+  position: absolute;
+  top: calc(((4px + $margin) / 2) + 12.55px);
+  right: $padding;
+  border: none;
+  padding: 0.5rem;
+  border-radius: $radius;
+  cursor: pointer;
+  transition: opacity 0.3s;
+
+  &:hover {
+    color: var(--fg1);
+  }
+
+  @media screen {
+    @media screen and (max-width: $mobile-breakpoint) {
+      right: calc((4px + $margin) / 2);
+    }
+  }
+}
+
+.icon {
+  svg {
+    fill: var(--fg);
+    margin-right: 0.3em;
+    margin-left: 0.3em;
+  }
+}
+
+.taxonomy-svg {
+  padding: 0;
+  top: 0.125em;
+  position: relative;
+}
+
+.row {
+  margin-left: 2rem;
+}