restruct: updated sass version and rules

src/styles/_badge.scss

@@ -1,5 +1,4 @@
-@import 'variables.scss';
-@import 'responsive.scss';
+@use 'responsive';
 
 .badge {
   font-weight: 600;
@@ -23,7 +22,7 @@
 
     text-align: center;
 
-    @include smallScreen() {
+    @include responsive.smallScreen{
       font-size: 1em;
     }
   }
@@ -131,7 +130,7 @@
   color: white;
 
   & > span:first-child {
-    background-color: $accentCol;
+    background-color: var(--clr-primary);
     color: black;
   }
 }

src/styles/_card.scss

@@ -1,5 +1,4 @@
-@import './variables.scss';
-@import './responsive.scss';
+@use 'responsive';
 
 .card-dimmer {
   position: fixed;
@@ -46,7 +45,7 @@
   }
 }
 
-@include smallScreen {
+@include responsive.smallScreen{
   .card {
     max-height: 85vh;
   }

src/styles/_dropdown-filters.scss

@@ -1,6 +1,5 @@
-@import 'search_box.scss';
-@import 'responsive.scss';
-@import 'variables.scss';
+@use 'search-box';
+@use 'responsive';
 
 .actions-bar {
   display: flex;
@@ -51,7 +50,7 @@ h1.option-title {
 }
 
 .sort-option[data-selected='true'] {
-  color: $accentCol;
+  color: var(--clr-primary);
   font-weight: bold;
 }
 
@@ -95,7 +94,7 @@ h1.option-title {
   }
 }
 
-@include smallScreen() {
+@include responsive.smallScreen{
   h1 {
     text-align: center;
 

src/styles/_dropdown.scss

@@ -1,5 +1,4 @@
-@import 'responsive.scss';
-@import 'variables.scss';
+@use 'responsive';
 
 .dropdown-anim {
   &-enter-from,
@@ -29,9 +28,9 @@
   left: 0;
   top: calc(100% + 0.5em);
 
-  background-color: $bgCol;
+  background-color: var(--clr-bg3);
   // box-shadow: 0 5px 10px 2px #0f0f0f;
-  box-shadow: 0 0 5px 1px $accentCol;
+  box-shadow: 0 0 5px 1px var(--clr-primary);
 
   width: 100%;
   max-width: 550px;
@@ -40,7 +39,7 @@
   z-index: 100;
 }
 
-@include smallScreen {
+@include responsive.smallScreen{
   .dropdown_wrapper {
     font-size: 1.1em;
     max-width: 100%;

src/styles/_global.scss

@@ -1,6 +1,5 @@
-@import 'fonts';
-@import 'variables';
-@import 'responsive';
+@use 'fonts';
+@use 'responsive';
 
 :root {
   --clr-primary: #ffc014;
@@ -8,6 +7,7 @@
 
   --clr-bg: #4d4d4d;
   --clr-bg2: #1b1b1b;
+  --clr-bg3: #1d1d1d;
 
   --clr-accent: #1085b3;
   --clr-accent2: #ff3d5d;
@@ -18,7 +18,7 @@
   --clr-pn: #ffd000;
 
   --clr-error: #fa3636;
-  --clr-warning: #c59429;
+  --clr-warning: #ffe15b;
 
   --clr-donator: #f7a4ff;
 
@@ -60,11 +60,21 @@ body {
   overflow-x: hidden;
   position: relative;
 
+  font-size: 16px;
+
+  @include responsive.smallScreen {
+    font-size: calc(0.65rem + 0.85vw);
+  }
+
+  @include responsive.screenLandscape {
+    font-size: calc(0.45rem + 0.8vw);
+  }
+
   &.no-scroll {
     overflow-y: hidden;
     padding-right: var(--no-scroll-padding);
 
-    @include smallScreen() {
+    @include responsive.smallScreen {
       padding: 0;
     }
   }
@@ -108,11 +118,11 @@ input {
 }
 
 *:focus-visible {
-  outline: 1px solid $accentCol;
+  outline: 1px solid var(--clr-primary);
 }
 
 .title {
-  color: $accentCol;
+  color: var(--clr-primary);
   font-weight: 600;
 
   padding: 0.35em 0;
@@ -130,20 +140,14 @@ a {
   color: inherit;
 }
 
-a:not(.a-block):not(.a-button):not(.a-row) {
-  display: inline-block;
-
-  transition: color 0.3s;
-
-  &:hover,
-  &:focus {
-    color: $accentCol;
-    border: none;
-  }
+a:focus-visible {
+  outline: 1px solid var(--clr-primary);
 }
 
-a.a-block {
-  display: block;
+.route-active,
+.route[data-active='true'] {
+  color: #ffc014;
+  font-weight: 700;
 }
 
 a.a-row {
@@ -292,7 +296,7 @@ a.a-button {
     width: 1.3em;
   }
 
-  @include smallScreen() {
+  @include responsive.smallScreen {
     bottom: 1em;
     right: 0;
     left: 50%;
@@ -330,7 +334,7 @@ a.a-button {
   cursor: help;
 }
 
-@include smallScreen {
+@include responsive.smallScreen {
   ::-webkit-scrollbar {
     width: 0.5em;
     height: 0.5em;

src/styles/_journal-section.scss

@@ -1,5 +1,5 @@
-@import 'responsive.scss';
-@import 'animations.scss';
+@use 'responsive';
+@use 'animations';
 
 .journal-list {
   display: flex;
@@ -12,7 +12,7 @@
 .list_wrapper {
   overflow-y: auto;
   height: calc(100vh - 12.5em);
-  min-height: 500px;
+  min-height: 650px;
   margin-top: 0.5em;
   position: relative;
 
@@ -68,7 +68,7 @@
   font-size: 1.2em;
 }
 
-@include smallScreen() {
+@include responsive.smallScreen{
   .journal_top-bar {
     justify-content: center;
     flex-wrap: wrap;

src/styles/_journal-stats.scss

@@ -1,6 +1,5 @@
-@import 'variables.scss';
-@import 'responsive.scss';
-@import 'badge.scss';
+@use 'responsive';
+@use 'badge';
 
 .stats-tab {
   position: absolute;
@@ -11,7 +10,7 @@
   width: 100%;
 
   background-color: #1a1a1a;
-  box-shadow: 0 0 5px 1px $accentCol;
+  box-shadow: 0 0 5px 1px var(--clr-primary);
 
   padding: 1em;
   display: flex;
@@ -33,7 +32,7 @@ hr.section-separator {
   gap: 0.5em;
 }
 
-@include smallScreen {
+@include responsive.smallScreen{
   .journal-stats {
     text-align: center;
   }

src/styles/_search-box.scss

@@ -1,4 +1,4 @@
-@import 'responsive.scss';
+@use 'responsive';
 
 .search {
   label {
@@ -39,7 +39,7 @@
     max-width: 300px;
   }
 
-  @include smallScreen {
+  @include responsive.smallScreen{
     &-box,
     &-button {
       margin: 0.5em 0 0 0;

src/styles/variables.scss

@@ -1,11 +0,0 @@
-$primaryCol: #2c2c2c;
-$secondaryCol: #01e733;
-
-$bgCol: #1d1d1d;
-$bgLigtherCol: #5b5b5b;
-
-$errorCol: #ff1919;
-$warningCol: #ffe15b;
-
-$accentCol: #ffc014;
-$accent2Col: #ff3d5d;