Restyle the app interface

src/style/mixins.scss

@@ -1,6 +1,3 @@
-@use 'sass:math';
-@use 'sass:color';
-
 $breakpoint-width: 600px !default;
 
 @mixin on-small-screen() {
@@ -9,131 +6,8 @@ $breakpoint-width: 600px !default;
   }
 }
 
-@mixin on-large-screen() {
-  @media (min-width: $breakpoint-width) {
+@mixin on-mobile-input() {
+  @media (max-width: ($breakpoint-width - 1px)), (hover: none) and (pointer: coarse) {
     @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 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($color: transparent) {
-  background-color: color.adjust($color, $alpha: -0.66);
-  backdrop-filter: blur(var(--blur-radius));
-}
-
-@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);
-  }
-}