Add tiny UI

src/style/fonts.scss

@@ -0,0 +1,23 @@
+/* comfortaa-regular - latin */
+@font-face {
+  font-family: 'Comfortaa';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local(''),
+    url('../../assets/fonts/comfortaa-v40-latin-regular.woff2') format('woff2'),
+    /* Chrome 26+, Opera 23+, Firefox 39+ */
+      url('../../assets/fonts/comfortaa-v40-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* open-sans-regular - latin */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local(''),
+    url('../../assets/fonts/open-sans-v34-latin-regular.woff2') format('woff2'),
+    /* Chrome 26+, Opera 23+, Firefox 39+ */
+      url('../../assets/fonts/open-sans-v34-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}

src/style/mixins.scss

@@ -0,0 +1,160 @@
+@use 'sass:math';
+
+$breakpoint-width: 700px !default;
+
+@mixin on-small-screen() {
+  @media (max-width: ($breakpoint-width - 1px)) {
+    @content;
+  }
+}
+
+@mixin on-large-screen() {
+  @media (min-width: $breakpoint-width) {
+    @content;
+  }
+}
+
+@mixin in-dark-mode() {
+  html[theme='dark'] {
+    @content;
+  }
+}
+
+@mixin title-fragment-link() {
+  position: relative;
+
+  &:before {
+    content: '#';
+    position: absolute;
+    left: -0.5ch;
+    top: 50%;
+    opacity: 0;
+    transform: translateX(-100%) translateY(-50%);
+    transition: opacity var(--transition-time);
+  }
+
+  &:hover:before {
+    opacity: 0.5;
+  }
+}
+
+@mixin image-button($background-image) {
+  @include square(var(--icon-size));
+  border: none;
+  cursor: pointer;
+
+  background-color: transparent;
+  background-image: $background-image;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+
+  transition: transform var(--transition-time);
+  &:hover {
+    transform: scale(1.15);
+  }
+}
+
+@mixin center-children() {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@mixin absolute-center() {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translateX(-50%) translateY(-50%);
+}
+
+@mixin blurred-background() {
+  backdrop-filter: blur(var(--blur-radius));
+  -webkit-backdrop-filter: blur(var(--blur-radius));
+
+  @supports not (
+    (backdrop-filter: blur(var(--blur-radius))) or
+      (-webkit-backdrop-filter: blur(var(--blur-radius)))
+  ) {
+    background-color: var(--card-color);
+  }
+}
+
+@mixin square($size) {
+  width: $size;
+  height: $size;
+}
+
+@mixin title-font() {
+  font: 400 3rem 'Comfortaa', sans-serif;
+  color: var(--normal-text-color);
+  line-height: 1;
+
+  @include on-small-screen {
+    font-size: 3rem;
+    line-height: 1.1;
+  }
+}
+
+@mixin sub-title-font() {
+  font: 400 1.75rem 'Comfortaa', sans-serif;
+  color: var(--normal-text-color);
+  hyphens: auto;
+}
+
+@mixin main-font() {
+  font: 400 1.1rem 'Open Sans', sans-serif;
+  color: var(--normal-text-color);
+  line-height: 1.8;
+  hyphens: auto;
+}
+
+@mixin special-text-font() {
+  font: 400 1rem 'Open Sans', sans-serif;
+  color: var(--special-text-color);
+  hyphens: auto;
+  font-style: italic;
+}
+
+@mixin link {
+  $border-shift: 10px;
+  $line-width: 2px;
+
+  @include special-text-font();
+  cursor: pointer;
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+
+  padding: 0 3px $line-width 0;
+
+  &:before,
+  &:after {
+    content: '';
+    display: block;
+    position: absolute;
+    bottom: 0;
+  }
+
+  &:before {
+    width: calc(100% + #{$border-shift});
+    border-bottom: $line-width dashed var(--accent-color);
+    transition: transform var(--transition-time);
+  }
+
+  &:after {
+    width: 100%;
+    height: $line-width;
+    background: linear-gradient(
+      90deg,
+      var(--card-color) 0,
+      transparent 4px,
+      transparent calc(100% - 4px),
+      var(--card-color) 100%
+    );
+  }
+
+  &:hover:before {
+    transform: translateX(-$border-shift);
+  }
+}

src/style/vars.scss

@@ -0,0 +1,44 @@
+@use 'mixins' as *;
+
+:root {
+  --transition-time: 200ms;
+  --transition-time-long: 350ms;
+  --line-width: 4px;
+  --line-height: 1.125rem;
+  --accent-color: #b7455e;
+  --sun-color: #f7f78c;
+  --very-light-text-color: #ffffff;
+  --background: #ffffff;
+  --normal-text-color: #31343f;
+  --card-color: #ffffff;
+  --blurred-card-color: transparent;
+  --blur-radius: 12px;
+  --special-text-color: var(--accent-color);
+  --inset-shadow: inset 0 0 4px 1px rgba(0, 0, 0, 0.05), inset 0 0 5px rgba(0, 0, 0, 0.2);
+  --border-radius: 0.85rem;
+
+  --large-margin: 4.6rem;
+  --normal-margin: 2rem;
+  --small-margin: 1rem;
+  --shadow: 0 0 5px 2px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.2);
+  --icon-size: 2.8rem;
+  --large-icon-size: 3.75rem;
+  --body-width: min(80%, 60rem);
+}
+
+@include on-small-screen {
+  :root {
+    --body-width: 90%;
+    --large-margin: 2.8rem;
+    --normal-margin: 2rem;
+  }
+}
+
+@include in-dark-mode {
+  --background: #242638;
+  --normal-text-color: #ffffff;
+  --card-color: #263551;
+  --blurred-card-color: #212f4a77;
+  --special-text-color: #ffffff;
+  --inset-shadow: inset 0 0 10px 2px rgba(0, 0, 0, 0.3), inset 0 0 4px rgba(0, 0, 0, 0.5);
+}