From d3268b50c23c9d341de16870a948f6df9afba13a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thea=20Sch=C3=B6bl?= <dev@theaninova.de>
Date: Tue, 18 Jul 2023 15:24:15 +0200
Subject: [PATCH] feat: add stylelint

---
 frontend/app/.eslintrc.json                   |   1 +
 frontend/app/.stylelintrc                     |  17 +
 frontend/app/package.json                     |  13 +-
 .../modules/about/about-license-modal.scss    |   2 +-
 .../src/app/modules/about/about-licenses.scss |   4 +-
 .../modules/about/about-page/about-page.scss  |  93 ++--
 .../assessments/page/assessments-page.scss    |   3 +-
 .../types/assessment/assessment-detail.scss   |   2 +-
 .../page/auth-callback-page.component.html    |   2 +-
 .../calendar/add-event-review-modal.scss      |  13 +-
 .../dashboard/dashboard.component.scss        |  83 +--
 .../favorites-section.component.scss          |   2 +-
 .../mensa-section-content.component.scss      |   2 +-
 .../mensa-section.component.scss              |   2 +-
 .../news-section/news-section.component.scss  |  16 +-
 .../search-section.component.scss             |   3 +-
 .../data/chips/edit-event-selection.scss      |  11 +-
 .../data/detail/data-detail-content.scss      |  47 +-
 .../app/modules/data/detail/data-detail.html  |   4 +-
 .../app/modules/data/detail/data-detail.scss  |   4 +-
 .../app/modules/data/detail/data-path.scss    |   6 +-
 .../modules/data/elements/external-link.scss  |   5 +-
 .../elements/favorite-button.component.scss   |  13 +-
 .../src/app/modules/data/elements/rating.scss |  98 ++--
 .../data/elements/title-card.component.html   |   2 +-
 .../data/elements/title-card.component.scss   |  13 +-
 .../app/modules/data/list/data-list-item.scss |  34 +-
 .../src/app/modules/data/list/data-list.html  |   2 +-
 .../app/modules/data/list/search-page.html    |   2 +-
 .../app/modules/data/list/search-page.scss    |  14 +-
 .../modules/data/list/simple-data-list.scss   |   6 +-
 .../app/modules/data/list/skeleton-list.scss  |   6 +-
 .../modules/data/list/tree-list-fragment.scss |  22 +-
 .../date-series/date-series-list-item.scss    |   5 +-
 .../data/types/dish/dish-characteristics.scss |  13 +-
 .../types/message/message-detail-content.scss |  14 +-
 .../types/place/place-detail-content.scss     |   2 +-
 .../data/types/place/place-list-item.scss     |   5 +-
 .../place/special/mensa/place-mensa.scss      |   4 +-
 .../app/modules/feedback/feedback-page.scss   |  47 +-
 .../daia-availability/daia-availability.scss  |   7 +-
 .../hebis/daia-availability/daia-holding.scss |  11 +-
 .../hebis-detail/hebis-detail-content.scss    |  23 +-
 .../hebis/hebis-detail/hebis-detail.html      |   4 +-
 .../modules/hebis/list/hebis-search-page.html |   2 +-
 .../account/checked-out/checked-out-page.html |   2 +-
 .../library/account/holds/holds-page.html     |   2 +-
 .../modules/map/item/map-item.component.scss  |  15 +-
 .../src/app/modules/map/page/map-page.scss    |  51 +-
 .../app/modules/map/widget/map-widget.scss    |   8 +-
 .../modules/menu/navigation/navigation.scss   |  28 +-
 .../menu/navigation/offline-notice.scss       |  41 +-
 .../menu/navigation/tabs.component.scss       |  35 +-
 .../src/app/modules/news/item/news-item.scss  |  13 +-
 .../src/app/modules/news/page/news-page.html  |   2 +-
 .../src/app/modules/news/page/news-page.scss  |   6 +-
 .../profile/page/profile-page-section.scss    |  72 +--
 .../modules/profile/page/profile-page.scss    |  86 ++--
 .../page/components/calendar-component.scss   |  75 +--
 .../schedule/page/grid/infinite-swiper.scss   |   2 +-
 .../schedule/page/grid/schedule-card.scss     |  85 ++--
 .../schedule/page/grid/schedule-cursor.scss   |  28 +-
 .../schedule/page/grid/schedule-day.scss      |  25 +-
 .../schedule/page/schedule-single-events.scss |   5 +-
 .../modules/settings/page/settings-page.scss  |  45 +-
 frontend/app/src/app/util/ion-icon/icon.scss  |   6 +-
 .../app/src/app/util/section.component.scss   |  20 +-
 frontend/app/src/app/util/simple-swiper.scss  |  27 +-
 frontend/app/src/global.scss                  |  74 ++-
 frontend/app/src/theme/_fonts.scss            |  22 +-
 frontend/app/src/theme/color-processing.scss  |   2 -
 frontend/app/src/theme/colors.scss            |  10 +-
 frontend/app/src/theme/common/_helper.scss    |   6 +-
 .../app/src/theme/common/_ion-button.scss     |  54 +-
 .../theme/common/_ion-content-parallax.scss   |  18 +-
 .../app/src/theme/common/_ion-header.scss     |   2 +-
 frontend/app/src/theme/common/_ion-input.scss |  18 +-
 .../app/src/theme/common/_ion-refresher.scss  |   5 +-
 .../app/src/theme/common/_ion-toolbar.scss    |  11 +-
 frontend/app/src/theme/common/_swiper.scss    |  10 +-
 frontend/app/src/theme/common/_typo.scss      |   3 +
 frontend/app/src/theme/components/_card.scss  |  14 +-
 .../app/src/theme/components/_section.scss    |  13 +-
 frontend/app/src/theme/material-symbols.scss  |  19 +-
 .../app/src/theme/util/_color-system.scss     |  29 +-
 frontend/app/src/theme/util/_dark.scss        |   1 +
 frontend/app/src/theme/util/_mixins.scss      |  26 +-
 frontend/app/src/theme/variables.scss         |  60 +--
 pnpm-lock.yaml                                | 477 +++++++++++++++++-
 89 files changed, 1436 insertions(+), 801 deletions(-)
 create mode 100644 frontend/app/.stylelintrc

diff --git a/frontend/app/.eslintrc.json b/frontend/app/.eslintrc.json
index 41805564..8993d0b0 100644
--- a/frontend/app/.eslintrc.json
+++ b/frontend/app/.eslintrc.json
@@ -53,6 +53,7 @@
         "jsdoc/require-param-type": "off",
         "jsdoc/require-returns-type": "off",
         "@typescript-eslint/explicit-module-boundary-types": "off",
+        "@typescript-eslint/no-non-null-assertion": "off",
         "@typescript-eslint/no-unused-vars": [
           "error",
           {
diff --git a/frontend/app/.stylelintrc b/frontend/app/.stylelintrc
new file mode 100644
index 00000000..53977dae
--- /dev/null
+++ b/frontend/app/.stylelintrc
@@ -0,0 +1,17 @@
+{
+  "extends": [
+    "stylelint-config-standard-scss",
+    "stylelint-config-recommended-scss",
+    "stylelint-config-clean-order",
+    "stylelint-config-prettier-scss"
+  ],
+  "rules": {
+    "no-empty-source": null,
+    "selector-pseudo-element-no-unknown": [
+      true,
+      {
+        "ignorePseudoElements": ["ng-deep"]
+      }
+    ]
+  }
+}
diff --git a/frontend/app/package.json b/frontend/app/package.json
index b8c389d3..6ab40ece 100644
--- a/frontend/app/package.json
+++ b/frontend/app/package.json
@@ -34,8 +34,8 @@
     "format": "prettier . -c --ignore-path ../../.gitignore",
     "format:fix": "prettier --write . --ignore-path ../../.gitignore",
     "licenses": "license-checker --json > src/assets/about/licenses.json && ts-node ./scripts/accumulate-licenses.ts && git add src/assets/about/licenses.json",
-    "lint": "ng lint",
-    "lint:fix": "eslint --fix -c .eslintrc.json --ignore-path .eslintignore --ext .ts,.html src/",
+    "lint": "ng lint && stylelint \"**/*.scss\"",
+    "lint:fix": "eslint --fix -c .eslintrc.json --ignore-path .eslintignore --ext .ts,.html src/ && stylelint --fix \"**/*.scss\"",
     "minify-icons": "ts-node-esm scripts/minify-icon-font.ts",
     "ng": "ng",
     "postinstall": "(jetify && node ngcc-postinstall.mjs) || echo \"skipping jetify in production mode\"",
@@ -158,12 +158,17 @@
     "junit-report-merger": "6.0.2",
     "karma": "6.4.1",
     "karma-chrome-launcher": "3.1.1",
-    "karma-junit-reporter": "2.0.1",
     "karma-coverage": "2.2.1",
-    "karma-mocha-reporter": "2.2.5",
     "karma-jasmine": "5.1.0",
+    "karma-junit-reporter": "2.0.1",
+    "karma-mocha-reporter": "2.2.5",
     "license-checker": "25.0.1",
     "protractor": "7.0.0",
+    "stylelint": "15.10.1",
+    "stylelint-config-clean-order": "5.0.1",
+    "stylelint-config-prettier-scss": "1.0.0",
+    "stylelint-config-recommended-scss": "12.0.0",
+    "stylelint-config-standard-scss": "10.0.0",
     "surge": "0.23.1",
     "ts-node": "10.9.1",
     "typescript": "4.6.4",
diff --git a/frontend/app/src/app/modules/about/about-license-modal.scss b/frontend/app/src/app/modules/about/about-license-modal.scss
index 4c67eafa..cc422eca 100644
--- a/frontend/app/src/app/modules/about/about-license-modal.scss
+++ b/frontend/app/src/app/modules/about/about-license-modal.scss
@@ -16,8 +16,8 @@
 ion-card-header {
   ion-button {
     position: absolute;
-    right: 0;
     top: 0;
+    right: 0;
   }
 }
 
diff --git a/frontend/app/src/app/modules/about/about-licenses.scss b/frontend/app/src/app/modules/about/about-licenses.scss
index ed32cecd..acb212bd 100644
--- a/frontend/app/src/app/modules/about/about-licenses.scss
+++ b/frontend/app/src/app/modules/about/about-licenses.scss
@@ -17,8 +17,8 @@ ion-content > div {
 }
 
 cdk-virtual-scroll-viewport {
-  height: 100%;
   width: 100%;
+  height: 100%;
 }
 
 :host ::ng-deep {
@@ -32,6 +32,6 @@ cdk-virtual-scroll-viewport {
 }
 
 .supertext-icon {
-  vertical-align: text-top;
   height: 14px;
+  vertical-align: text-top;
 }
diff --git a/frontend/app/src/app/modules/about/about-page/about-page.scss b/frontend/app/src/app/modules/about/about-page/about-page.scss
index 71292680..5452dd06 100644
--- a/frontend/app/src/app/modules/about/about-page/about-page.scss
+++ b/frontend/app/src/app/modules/about/about-page/about-page.scss
@@ -12,42 +12,14 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-@import 'src/theme/util/_mixins.scss';
+@import '~src/theme/util/mixins';
 
 ion-text {
   margin-inline: var(--spacing-md);
+  color: var(--ion-color-primary-contrast);
 }
 
 :host ::ng-deep {
-  ion-card {
-    margin: 0;
-    box-shadow: none;
-    ion-card-content {
-      h1 {
-        margin: 0;
-      }
-      padding-bottom: 8px;
-    }
-    ion-card-header {
-      color: var(--ion-color-dark);
-      padding-top: 8px;
-      padding-bottom: 4px;
-      font-weight: bold;
-    }
-    ion-grid,
-    ion-col {
-      padding-inline-start: 0;
-      padding-top: 0;
-      padding-bottom: 0;
-    }
-  }
-  ion-grid,
-  ion-col {
-    padding-inline-start: 0;
-    padding-top: 0;
-    padding-bottom: 0;
-  }
-
   p,
   h3,
   h2,
@@ -55,37 +27,70 @@ ion-text {
     margin-inline: var(--spacing-md);
   }
 
+  ion-grid,
+  ion-col {
+    padding-top: 0;
+    padding-bottom: 0;
+    padding-inline-start: 0;
+  }
+
+  ion-card {
+    margin: 0;
+    box-shadow: none;
+
+    ion-card-content {
+      padding-bottom: 8px;
+
+      h1 {
+        margin: 0;
+      }
+    }
+
+    ion-card-header {
+      padding-top: 8px;
+      padding-bottom: 4px;
+      font-weight: bold;
+      color: var(--ion-color-dark);
+    }
+
+    ion-grid,
+    ion-col {
+      padding-top: 0;
+      padding-bottom: 0;
+      padding-inline-start: 0;
+    }
+  }
+
   .about-changelog,
   .licenses-content,
   .page-content {
-    margin: var(--spacing-md);
+    @include border-radius-in-parallax(var(--border-radius-default));
+
     display: flex;
     flex-direction: column;
     gap: var(--spacing-sm);
+
+    margin: var(--spacing-md);
+    padding-block-end: var(--spacing-md);
+
     background: var(--ion-item-background);
 
-    padding-block-end: var(--spacing-md);
-    @include border-radius-in-parallax(var(--border-radius-default));
-
     & > * {
+      @include border-radius-in-parallax(var(--border-radius-default));
+
+      position: relative;
+      overflow: hidden;
+      display: block;
+      margin: 0;
+
       ion-card-subtitle {
         font-size: var(--font-size-lg);
         color: var(--ion-color-light-contrast);
       }
 
-      display: block;
-      @include border-radius-in-parallax(var(--border-radius-default));
-      overflow: hidden;
-      position: relative;
-      margin: 0;
-
       & > ion-thumbnail {
         background: var(--ion-color-primary);
       }
     }
   }
 }
-
-ion-text {
-  color: var(--ion-color-primary-contrast);
-}
diff --git a/frontend/app/src/app/modules/assessments/page/assessments-page.scss b/frontend/app/src/app/modules/assessments/page/assessments-page.scss
index 60c13fc7..fc8bae54 100644
--- a/frontend/app/src/app/modules/assessments/page/assessments-page.scss
+++ b/frontend/app/src/app/modules/assessments/page/assessments-page.scss
@@ -14,7 +14,8 @@
  */
 
 .content {
+  --ion-item-background: var(--ion-background-color);
+
   height: 100%;
   padding-inline: 8px;
-  --ion-item-background: var(--ion-background-color);
 }
diff --git a/frontend/app/src/app/modules/assessments/types/assessment/assessment-detail.scss b/frontend/app/src/app/modules/assessments/types/assessment/assessment-detail.scss
index ba814612..3b43179c 100644
--- a/frontend/app/src/app/modules/assessments/types/assessment/assessment-detail.scss
+++ b/frontend/app/src/app/modules/assessments/types/assessment/assessment-detail.scss
@@ -1,4 +1,4 @@
 stapps-data-list {
-  height: 100px;
   width: 100%;
+  height: 100px;
 }
diff --git a/frontend/app/src/app/modules/auth/auth-callback/page/auth-callback-page.component.html b/frontend/app/src/app/modules/auth/auth-callback/page/auth-callback-page.component.html
index 9b63420a..e55be4e4 100644
--- a/frontend/app/src/app/modules/auth/auth-callback/page/auth-callback-page.component.html
+++ b/frontend/app/src/app/modules/auth/auth-callback/page/auth-callback-page.component.html
@@ -13,7 +13,7 @@
   ~ this program. If not, see <https://www.gnu.org/licenses/>.
   -->
 
-<div class="centeredMessageContainer">
+<div class="centered-message-container">
   <p>
     {{ 'auth.messages' + '.' + PROVIDER_TYPE + '.' + 'authorizing' | translate }}
   </p>
diff --git a/frontend/app/src/app/modules/calendar/add-event-review-modal.scss b/frontend/app/src/app/modules/calendar/add-event-review-modal.scss
index 1209405b..7b2b153b 100644
--- a/frontend/app/src/app/modules/calendar/add-event-review-modal.scss
+++ b/frontend/app/src/app/modules/calendar/add-event-review-modal.scss
@@ -1,29 +1,30 @@
 div {
-  height: 100%;
   display: flex;
   flex-direction: column;
   align-items: stretch;
+  height: 100%;
 
   ion-card-header {
     ion-button {
       position: absolute;
-      right: 0;
       top: 0;
+      right: 0;
     }
   }
 
   ion-card-content {
-    height: 100%;
     overflow: scroll;
-    padding-left: 0;
+    height: 100%;
     padding-right: 0;
+    padding-left: 0;
   }
 }
 
 .horizontal-flex {
-  height: fit-content;
   display: flex;
   flex-direction: row;
-  justify-content: flex-end;
   align-items: center;
+  justify-content: flex-end;
+
+  height: fit-content;
 }
diff --git a/frontend/app/src/app/modules/dashboard/dashboard.component.scss b/frontend/app/src/app/modules/dashboard/dashboard.component.scss
index 03622fe9..d960f399 100644
--- a/frontend/app/src/app/modules/dashboard/dashboard.component.scss
+++ b/frontend/app/src/app/modules/dashboard/dashboard.component.scss
@@ -22,12 +22,13 @@
 :host ion-toolbar:last-of-type {
   --padding-top: var(--spacing-md);
   --padding-bottom: var(--spacing-md);
+
   z-index: -1;
 
   ion-icon {
-    margin-right: var(--spacing-sm);
     width: var(--font-size-xl);
     height: var(--font-size-xl);
+    margin-right: var(--spacing-sm);
   }
 
   ion-label {
@@ -37,71 +38,81 @@
   }
 
   .logo {
+    aspect-ratio: 1/1;
     width: 27vw;
     max-width: 150px;
     max-height: 80px;
-    aspect-ratio: 1/1;
-    object-position: right;
-    margin-left: auto;
     margin-right: 0;
+    margin-left: auto;
+
+    object-position: right;
   }
 }
 
 ion-content {
   --background: var(--ion-background-color);
   --padding-bottom: var(--spacing-xl);
+
   &::part(inner-scroll) {
     scrollbar-gutter: stable;
   }
 }
 
 .schedule {
-  width: 100%;
-  z-index: 3;
-  background: var(--ion-color-primary);
-  color: var(--ion-color-primary-contrast);
-  display: flex;
-  justify-content: space-between;
-  gap: var(--spacing-md);
-  padding: var(--spacing-sm);
-  padding-top: 0;
-
   @include ion-md-up {
     position: unset;
+
     width: unset;
     height: calc(var(--tablet-top-bar-height) + (2 * var(--spacing-xl)));
     margin: 0;
     padding: var(--spacing-xl);
   }
 
+  z-index: 3;
+
+  display: flex;
+  gap: var(--spacing-md);
+  justify-content: space-between;
+
+  width: 100%;
+  padding: var(--spacing-sm);
+  padding-top: 0;
+
+  color: var(--ion-color-primary-contrast);
+
+  background: var(--ion-color-primary);
+
   a {
     display: flex;
     flex-direction: column;
-    color: var(--ion-color-primary-contrast);
-    text-decoration: none;
+
     height: auto;
     padding: var(--spacing-lg);
+
+    color: var(--ion-color-primary-contrast);
+    text-decoration: none;
+
     border-radius: var(--border-radius-default);
   }
 
   a:first-child {
-    text-align: center;
-    flex: 0 0 auto;
-    aspect-ratio: 1;
-    box-sizing: content-box;
-    max-height: 60px;
-    overflow: hidden;
-    border: 2px solid var(--ion-color-primary-tint);
-
-    @include phoneLandscape {
+    @include phone-landscape {
       height: auto;
     }
-  }
 
-  a:first-child {
-    justify-content: space-around;
-    align-items: center;
+    overflow: hidden;
+    flex: 0 0 auto;
     gap: var(--spacing-sm);
+    align-items: center;
+    justify-content: space-around;
+
+    box-sizing: content-box;
+    aspect-ratio: 1;
+    max-height: 60px;
+
+    text-align: center;
+
+    border: 2px solid var(--ion-color-primary-tint);
 
     ion-label {
       font-size: var(--font-size-xxs);
@@ -114,19 +125,19 @@ ion-content {
   }
 
   a:last-child {
-    flex: 1 1 65%;
-    background: var(--linear-gradient);
-    justify-content: center;
-    z-index: 1;
-
     @include ion-md-up {
       flex: 1 1 100%;
     }
 
-    @include phoneLandscape {
+    @include phone-landscape {
       flex: 1 1 85%;
     }
 
+    z-index: 1;
+    flex: 1 1 65%;
+    justify-content: center;
+    background: var(--linear-gradient);
+
     ion-label {
       font-size: var(--font-size-xxs);
       font-weight: var(--font-weight-bold);
@@ -134,8 +145,8 @@ ion-content {
     }
 
     ion-label:first-child {
-      text-transform: uppercase;
       color: var(--ion-color-secondary);
+      text-transform: uppercase;
     }
 
     ion-label:nth-child(2n) {
diff --git a/frontend/app/src/app/modules/dashboard/sections/favorites-section/favorites-section.component.scss b/frontend/app/src/app/modules/dashboard/sections/favorites-section/favorites-section.component.scss
index 050ea60e..88039cb7 100644
--- a/frontend/app/src/app/modules/dashboard/sections/favorites-section/favorites-section.component.scss
+++ b/frontend/app/src/app/modules/dashboard/sections/favorites-section/favorites-section.component.scss
@@ -14,8 +14,8 @@
  */
 
 .nothing-selected::part(native) {
-  background: none;
   color: var(--ion-color-medium-shade);
+  background: none;
 }
 
 simple-swiper {
diff --git a/frontend/app/src/app/modules/dashboard/sections/mensa-section/mensa-section-content.component.scss b/frontend/app/src/app/modules/dashboard/sections/mensa-section/mensa-section-content.component.scss
index df17c82c..305d4256 100644
--- a/frontend/app/src/app/modules/dashboard/sections/mensa-section/mensa-section-content.component.scss
+++ b/frontend/app/src/app/modules/dashboard/sections/mensa-section/mensa-section-content.component.scss
@@ -14,8 +14,8 @@
  */
 
 .no-dishes::part(native) {
-  background: none;
   color: var(--ion-color-medium-shade);
+  background: none;
 }
 
 simple-swiper {
diff --git a/frontend/app/src/app/modules/dashboard/sections/mensa-section/mensa-section.component.scss b/frontend/app/src/app/modules/dashboard/sections/mensa-section/mensa-section.component.scss
index d52401dc..80a0a2a8 100644
--- a/frontend/app/src/app/modules/dashboard/sections/mensa-section/mensa-section.component.scss
+++ b/frontend/app/src/app/modules/dashboard/sections/mensa-section/mensa-section.component.scss
@@ -19,8 +19,8 @@ stapps-mensa-section-content {
 }
 
 .nothing-selected::part(native) {
-  background: none;
   color: var(--ion-color-medium-shade);
+  background: none;
 }
 
 :host {
diff --git a/frontend/app/src/app/modules/dashboard/sections/news-section/news-section.component.scss b/frontend/app/src/app/modules/dashboard/sections/news-section/news-section.component.scss
index 48409a33..a432f013 100644
--- a/frontend/app/src/app/modules/dashboard/sections/news-section/news-section.component.scss
+++ b/frontend/app/src/app/modules/dashboard/sections/news-section/news-section.component.scss
@@ -17,9 +17,10 @@ simple-swiper {
 }
 
 .more-news {
-  font-size: var(--font-size-xl);
   --color: var(--ion-color-medium-tint);
 
+  font-size: var(--font-size-xl);
+
   &::part(native) {
     height: 100%;
     background: none;
@@ -34,11 +35,12 @@ simple-swiper {
 
   ion-thumbnail {
     position: absolute;
+    z-index: 100;
     bottom: 0;
     left: 0;
-    z-index: 100;
-    height: 200px;
+
     width: 200px;
+    height: 200px;
   }
 }
 
@@ -54,16 +56,18 @@ simple-swiper {
   }
 
   ion-col {
-    flex-grow: 0;
     flex-basis: min-content;
+    flex-grow: 0;
   }
 
   .title {
+    overflow: hidden;
     display: -webkit-box;
+
     white-space: break-spaces;
+
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 3;
-    overflow: hidden;
   }
 
   .title-sub {
@@ -73,8 +77,8 @@ simple-swiper {
   // fix for Safari
   stapps-offers-in-list {
     position: absolute;
-    bottom: 0;
     right: 0;
+    bottom: 0;
   }
 
   stapps-offers-in-list .place {
diff --git a/frontend/app/src/app/modules/dashboard/sections/search-section/search-section.component.scss b/frontend/app/src/app/modules/dashboard/sections/search-section/search-section.component.scss
index 4af0e644..5102c484 100644
--- a/frontend/app/src/app/modules/dashboard/sections/search-section/search-section.component.scss
+++ b/frontend/app/src/app/modules/dashboard/sections/search-section/search-section.component.scss
@@ -27,11 +27,12 @@ ion-searchbar ::ng-deep .searchbar-input-container {
 }
 
 ion-searchbar.ios {
+  transition: opacity 150ms ease;
+
   ion-ripple-effect {
     display: none;
   }
 
-  transition: opacity 150ms ease;
   &:active {
     opacity: 0.6;
   }
diff --git a/frontend/app/src/app/modules/data/chips/edit-event-selection.scss b/frontend/app/src/app/modules/data/chips/edit-event-selection.scss
index 56e868e9..7d7e6257 100644
--- a/frontend/app/src/app/modules/data/chips/edit-event-selection.scss
+++ b/frontend/app/src/app/modules/data/chips/edit-event-selection.scss
@@ -12,11 +12,6 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-
-ion-item-divider.ios > ion-checkbox {
-  margin-right: 8px;
-}
-
 .list-header {
   --padding-start: 0;
   --background: var(--ion-color-primary-shade);
@@ -28,13 +23,17 @@ ion-item-divider.ios > ion-checkbox {
 
   > ion-checkbox {
     --background: none;
-    --border-color: rgba(var(--ion-color-primary-contrast-rgb), 0.77);
+    --border-color: rgb(var(--ion-color-primary-contrast-rgb) 0.77);
     --background-checked: var(--ion-color-primary-contrast);
     --border-color-checked: var(--ion-color-primary-contrast);
     --checkmark-color: var(--ion-color-primary);
   }
 }
 
+ion-item-divider.ios > ion-checkbox {
+  margin-right: 8px;
+}
+
 :host > .list-header {
   --background: none;
 }
diff --git a/frontend/app/src/app/modules/data/detail/data-detail-content.scss b/frontend/app/src/app/modules/data/detail/data-detail-content.scss
index 115e1e8d..68906e6f 100644
--- a/frontend/app/src/app/modules/data/detail/data-detail-content.scss
+++ b/frontend/app/src/app/modules/data/detail/data-detail-content.scss
@@ -12,7 +12,7 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-@import 'src/theme/util/_mixins.scss';
+@import '~src/theme/util/mixins';
 
 stapps-origin-detail {
   // css hack to make the element stick to the bottom of the scroll container even
@@ -22,24 +22,29 @@ stapps-origin-detail {
 }
 
 .content-switch {
+  display: flex;
+  flex: 1;
+
   // prevent a scrollbar from appearing in some cases
   margin-block-start: -1px !important;
-  flex: 1;
-  display: flex;
   padding: 0 var(--spacing-md);
 
   ::ng-deep > * {
-    display: flex;
-    height: fit-content;
-    width: 100%;
-    flex-direction: column;
     @include border-radius-in-parallax(var(--border-radius-default));
-    overflow: hidden;
+    @include content-padding;
+
     position: relative;
+
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+
+    width: 100%;
+    height: fit-content;
     margin-block-start: calc((var(--header-spacing-bottom) - var(--spacing-xl)) * -1);
     margin-block-end: var(--spacing-xl);
+
     background-color: var(--ion-card-background);
-    @include content-padding();
 
     & > ion-thumbnail {
       background: var(--ion-color-primary);
@@ -49,45 +54,51 @@ stapps-origin-detail {
     @supports selector(:has(*)) {
       & > .expand-when-space,
       &:has(> .expand-when-space) {
-        height: unset;
         flex: 1;
+        height: unset;
       }
     }
   }
 }
 
 :host ::ng-deep {
+  ion-grid,
+  ion-col {
+    padding-top: 0;
+    padding-bottom: 0;
+    padding-inline-start: 0;
+  }
+
   ion-slides.work-locations {
     ion-slide {
       display: block;
       text-align: left;
     }
   }
+
   ion-card {
     margin: 0;
     box-shadow: none;
+
     ion-card-content {
+      padding-bottom: 8px;
+
       h1 {
         margin: 0;
       }
-      padding-bottom: 8px;
     }
+
     ion-card-header {
       padding-top: 8px;
       padding-bottom: 4px;
       font-weight: bold;
     }
+
     ion-grid,
     ion-col {
-      padding-inline-start: 0;
       padding-top: 0;
       padding-bottom: 0;
+      padding-inline-start: 0;
     }
   }
-  ion-grid,
-  ion-col {
-    padding-inline-start: 0;
-    padding-top: 0;
-    padding-bottom: 0;
-  }
 }
diff --git a/frontend/app/src/app/modules/data/detail/data-detail.html b/frontend/app/src/app/modules/data/detail/data-detail.html
index dc5eb02e..e1e77127 100644
--- a/frontend/app/src/app/modules/data/detail/data-detail.html
+++ b/frontend/app/src/app/modules/data/detail/data-detail.html
@@ -33,13 +33,13 @@
 <ion-content parallax class="ion-no-padding">
   <ng-container [ngSwitch]="true">
     <ng-container *ngSwitchCase="!item && (isDisconnected | async)">
-      <div class="centeredMessageContainer">
+      <div class="centered-message-container">
         <ion-icon name="signal_disconnected"></ion-icon>
         <ion-label> {{ 'data.detail.COULD_NOT_CONNECT' | translate }} </ion-label>
       </div>
     </ng-container>
     <ng-container *ngSwitchCase="item === null">
-      <div class="centeredMessageContainer">
+      <div class="centered-message-container">
         <ion-icon name="link_off"></ion-icon>
         <ion-label> {{ 'data.detail.NOT_FOUND' | translate }} </ion-label>
       </div>
diff --git a/frontend/app/src/app/modules/data/detail/data-detail.scss b/frontend/app/src/app/modules/data/detail/data-detail.scss
index 375f31d2..66464f5b 100644
--- a/frontend/app/src/app/modules/data/detail/data-detail.scss
+++ b/frontend/app/src/app/modules/data/detail/data-detail.scss
@@ -14,8 +14,8 @@
  */
 ion-content > div > stapps-data-detail-content,
 ion-content > div {
-  min-height: 100%;
   display: flex;
-  flex-direction: column;
   flex: 1;
+  flex-direction: column;
+  min-height: 100%;
 }
diff --git a/frontend/app/src/app/modules/data/detail/data-path.scss b/frontend/app/src/app/modules/data/detail/data-path.scss
index 8ccd2c3a..468a2e61 100644
--- a/frontend/app/src/app/modules/data/detail/data-path.scss
+++ b/frontend/app/src/app/modules/data/detail/data-path.scss
@@ -13,10 +13,10 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 .crumb-label {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
   cursor: pointer;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 ion-breadcrumb {
diff --git a/frontend/app/src/app/modules/data/elements/external-link.scss b/frontend/app/src/app/modules/data/elements/external-link.scss
index b2f61708..0aba5bcf 100644
--- a/frontend/app/src/app/modules/data/elements/external-link.scss
+++ b/frontend/app/src/app/modules/data/elements/external-link.scss
@@ -1,8 +1,9 @@
 :host a {
   cursor: pointer;
+
   ion-icon {
-    vertical-align: text-top;
-    font-size: 80%;
     padding-left: 2px;
+    font-size: 80%;
+    vertical-align: text-top;
   }
 }
diff --git a/frontend/app/src/app/modules/data/elements/favorite-button.component.scss b/frontend/app/src/app/modules/data/elements/favorite-button.component.scss
index 4810f30a..8c64fa07 100644
--- a/frontend/app/src/app/modules/data/elements/favorite-button.component.scss
+++ b/frontend/app/src/app/modules/data/elements/favorite-button.component.scss
@@ -15,9 +15,15 @@
 
 :host {
   ion-button {
+    --border-radius: 50%;
+
     width: 50px;
     height: 50px;
-    --border-radius: 50%;
+  }
+
+  .selected {
+    // TODO
+    color: #fbc02d;
   }
 
   @media (hover: hover) {
@@ -25,9 +31,4 @@
       --fill: 1;
     }
   }
-
-  .selected {
-    // TODO
-    color: #fbc02d;
-  }
 }
diff --git a/frontend/app/src/app/modules/data/elements/rating.scss b/frontend/app/src/app/modules/data/elements/rating.scss
index 3671225f..e83bcf41 100644
--- a/frontend/app/src/app/modules/data/elements/rating.scss
+++ b/frontend/app/src/app/modules/data/elements/rating.scss
@@ -12,51 +12,6 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-.rating-stars {
-  display: flex;
-  contain: content;
-  flex-direction: row-reverse;
-  justify-content: start;
-  align-items: center;
-  position: absolute;
-  background: var(--ion-color-light);
-  bottom: 0;
-  right: 0;
-  top: 0;
-  gap: var(--spacing-md);
-  padding-inline: var(--spacing-xl);
-  border-radius: var(--border-radius-default);
-
-  > ion-icon {
-    @media (hover: hover) {
-      &:hover ~ *::ng-deep stapps-icon,
-      &:hover::ng-deep stapps-icon {
-        --fill: 1;
-      }
-    }
-    &:has(:checked)::ng-deep ~ *::ng-deep stapps-icon,
-    &:has(:checked)::ng-deep stapps-icon,
-    &:active::ng-deep ~ *::ng-deep stapps-icon,
-    &:active::ng-deep stapps-icon {
-      --fill: 1;
-      color: var(--ion-color-dark);
-    }
-  }
-
-  > .thank-you {
-    opacity: 0;
-    pointer-events: none;
-    position: absolute;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    padding: var(--spacing-md);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-}
-
 ion-button {
   margin: 0;
 
@@ -64,3 +19,56 @@ ion-button {
     --fill: 1;
   }
 }
+
+.rating-stars {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+
+  contain: content;
+  display: flex;
+  flex-direction: row-reverse;
+  gap: var(--spacing-md);
+  align-items: center;
+  justify-content: flex-start;
+
+  padding-inline: var(--spacing-xl);
+
+  background: var(--ion-color-light);
+  border-radius: var(--border-radius-default);
+
+  > ion-icon {
+    &:active::ng-deep stapps-icon,
+    &:has(:checked)::ng-deep stapps-icon,
+    &:has(:checked)::ng-deep ~ *::ng-deep stapps-icon,
+    &:active::ng-deep ~ *::ng-deep stapps-icon {
+      --fill: 1;
+
+      color: var(--ion-color-dark);
+    }
+    @media (hover: hover) {
+      &:hover ~ *::ng-deep stapps-icon,
+      &:hover::ng-deep stapps-icon {
+        --fill: 1;
+      }
+    }
+  }
+
+  > .thank-you {
+    pointer-events: none;
+
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    padding: var(--spacing-md);
+
+    opacity: 0;
+  }
+}
diff --git a/frontend/app/src/app/modules/data/elements/title-card.component.html b/frontend/app/src/app/modules/data/elements/title-card.component.html
index ec72c934..9e4701d9 100644
--- a/frontend/app/src/app/modules/data/elements/title-card.component.html
+++ b/frontend/app/src/app/modules/data/elements/title-card.component.html
@@ -27,7 +27,7 @@
     </ion-card-title>
   </ion-card-header>
   <ion-card-content>
-    <div *ngIf="$any(item).openingHours" class="openingHours">
+    <div *ngIf="$any(item).openingHours" class="opening-hours">
       <stapps-opening-hours [openingHours]="item.openingHours"></stapps-opening-hours>
     </div>
     <div *ngIf="item.description" class="description">
diff --git a/frontend/app/src/app/modules/data/elements/title-card.component.scss b/frontend/app/src/app/modules/data/elements/title-card.component.scss
index 348beb30..bef81d40 100644
--- a/frontend/app/src/app/modules/data/elements/title-card.component.scss
+++ b/frontend/app/src/app/modules/data/elements/title-card.component.scss
@@ -15,23 +15,25 @@
 
 .text-accordion {
   overflow: hidden;
-  text-overflow: ellipsis;
   display: -webkit-box;
+  text-overflow: ellipsis;
+
   -webkit-box-orient: vertical;
 }
 
 ion-card {
-  border-radius: 0;
   --background: var(--ion-color-primary);
+
   padding: 0 var(--spacing-md);
+  border-radius: 0;
 
   ion-card-header {
     padding: 0;
 
     h1 {
-      color: var(--ion-color-primary-contrast);
-      font-weight: var(--font-weight-bold);
       margin: var(--spacing-sm) 0 var(--spacing-sm) 0;
+      font-weight: var(--font-weight-bold);
+      color: var(--ion-color-primary-contrast);
     }
   }
 
@@ -41,7 +43,8 @@ ion-card {
     .description * {
       color: var(--ion-color-primary-contrast);
     }
-    .openingHours {
+
+    .opening-hours {
       color: var(--ion-color-primary-contrast);
     }
   }
diff --git a/frontend/app/src/app/modules/data/list/data-list-item.scss b/frontend/app/src/app/modules/data/list/data-list-item.scss
index 7649eea0..7f54bf16 100644
--- a/frontend/app/src/app/modules/data/list/data-list-item.scss
+++ b/frontend/app/src/app/modules/data/list/data-list-item.scss
@@ -12,7 +12,7 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-@import 'src/theme/util/_mixins.scss';
+@import '~src/theme/util/mixins';
 
 :host {
   display: block;
@@ -22,19 +22,13 @@ ion-item::part(native) {
   height: 100%;
 }
 
-.ion-text-wrap ::ng-deep ion-label {
-  white-space: normal !important;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 3;
-}
-
 ion-item {
   --border-color: transparent;
-  @include border-radius-in-parallax(var(--border-radius-default));
-  overflow: hidden;
   --inner-padding-end: 0;
   --padding-start: 0;
+  @include border-radius-in-parallax(var(--border-radius-default));
+
+  overflow: hidden;
   margin: var(--spacing-sm);
 
   ion-thumbnail {
@@ -53,6 +47,14 @@ ion-item {
   }
 }
 
+.ion-text-wrap ::ng-deep ion-label {
+  display: -webkit-box;
+  white-space: normal !important;
+
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+}
+
 :host.square ::ng-deep {
   ion-item {
     margin: 0;
@@ -65,17 +67,19 @@ ion-item {
   }
 
   ion-col {
-    flex-grow: 0;
     flex-basis: min-content;
+    flex-grow: 0;
   }
 
   stapps-long-inline-text,
   .title {
+    overflow: hidden;
     display: -webkit-box;
+
     white-space: break-spaces;
+
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
-    overflow: hidden;
   }
 
   .title-sub {
@@ -85,8 +89,8 @@ ion-item {
   stapps-rating,
   stapps-favorite-button {
     position: absolute;
-    bottom: 0;
     right: 0;
+    bottom: 0;
   }
 
   stapps-rating {
@@ -97,9 +101,9 @@ ion-item {
     }
 
     .rating-stars {
-      width: 100%;
-      justify-content: center;
       gap: var(--spacing-xs);
+      justify-content: center;
+      width: 100%;
       padding-inline: 0;
     }
   }
diff --git a/frontend/app/src/app/modules/data/list/data-list.html b/frontend/app/src/app/modules/data/list/data-list.html
index a0f8c0ea..2b120840 100644
--- a/frontend/app/src/app/modules/data/list/data-list.html
+++ b/frontend/app/src/app/modules/data/list/data-list.html
@@ -27,7 +27,7 @@
   </ion-list>
 </ng-container>
 <div [style.display]="!loading && items && items.length === 0 ? 'block' : 'none'">
-  <ion-label class="centeredMessageContainer">
+  <ion-label class="centered-message-container">
     {{ 'search.nothing_found' | translate | titlecase }}
   </ion-label>
 </div>
diff --git a/frontend/app/src/app/modules/data/list/search-page.html b/frontend/app/src/app/modules/data/list/search-page.html
index 12793d4f..b145724e 100644
--- a/frontend/app/src/app/modules/data/list/search-page.html
+++ b/frontend/app/src/app/modules/data/list/search-page.html
@@ -60,7 +60,7 @@
     [class.no-results]="!showDefaultData && !items && !loading"
     [style.display]="!showDefaultData && !items && !loading ? 'block' : 'none'"
   >
-    <ion-label class="centeredMessageContainer"> {{ searchInstruction | translate }} </ion-label>
+    <ion-label class="centered-message-container"> {{ searchInstruction | translate }} </ion-label>
   </div>
   <stapps-data-list
     id="data-list"
diff --git a/frontend/app/src/app/modules/data/list/search-page.scss b/frontend/app/src/app/modules/data/list/search-page.scss
index 66dee134..ce72eed3 100644
--- a/frontend/app/src/app/modules/data/list/search-page.scss
+++ b/frontend/app/src/app/modules/data/list/search-page.scss
@@ -15,11 +15,15 @@
 
 :host {
   display: flex;
-  flex-direction: column;
   flex: 1 1 100%;
+  flex-direction: column;
   height: 100%;
 }
 
+ion-toolbar {
+  --ion-color-base: none !important;
+}
+
 ion-toolbar:first-of-type {
   padding: 0 var(--spacing-md) var(--spacing-xs);
 }
@@ -43,9 +47,9 @@ ion-content {
 .content > div {
   height: 100%;
 
-  ion-label.centeredMessageContainer {
-    min-height: unset;
+  ion-label.centered-message-container {
     height: 100%;
+    min-height: unset;
     margin-top: 0;
     margin-bottom: 0;
   }
@@ -54,7 +58,3 @@ ion-content {
 ion-header {
   background: var(--ion-color-primary);
 }
-
-ion-toolbar {
-  --ion-color-base: none !important;
-}
diff --git a/frontend/app/src/app/modules/data/list/simple-data-list.scss b/frontend/app/src/app/modules/data/list/simple-data-list.scss
index 8fb8b57f..8c8dc04e 100644
--- a/frontend/app/src/app/modules/data/list/simple-data-list.scss
+++ b/frontend/app/src/app/modules/data/list/simple-data-list.scss
@@ -15,8 +15,10 @@
 
 .empty-list-message {
   display: flex;
-  justify-content: center;
   align-items: center;
-  color: var(--ion-color-medium);
+  justify-content: center;
+
   min-height: 300px;
+
+  color: var(--ion-color-medium);
 }
diff --git a/frontend/app/src/app/modules/data/list/skeleton-list.scss b/frontend/app/src/app/modules/data/list/skeleton-list.scss
index 6b525fd6..5f877b20 100644
--- a/frontend/app/src/app/modules/data/list/skeleton-list.scss
+++ b/frontend/app/src/app/modules/data/list/skeleton-list.scss
@@ -21,14 +21,16 @@ $item-height: 92;
 $gap: 4;
 
 .label {
-  fill: var(--ion-color-medium);
   opacity: 0.1;
+  fill: var(--ion-color-medium);
 }
 
 .item {
+  width: calc(100% - var(--spacing-sm) * 2);
+
   rx: var(--border-radius-default);
   fill: var(--ion-item-background, var(--ion-background-color, #fff));
+
   x: var(--spacing-sm);
   y: var(--spacing-sm);
-  width: calc(100% - var(--spacing-sm) * 2);
 }
diff --git a/frontend/app/src/app/modules/data/list/tree-list-fragment.scss b/frontend/app/src/app/modules/data/list/tree-list-fragment.scss
index aa0b7694..e663dc3e 100644
--- a/frontend/app/src/app/modules/data/list/tree-list-fragment.scss
+++ b/frontend/app/src/app/modules/data/list/tree-list-fragment.scss
@@ -22,37 +22,36 @@ ion-list {
 }
 
 .tree-indicator {
-  overflow: hidden;
   position: relative;
+  overflow: hidden;
 }
 
 ion-accordion::before,
 .tree-indicator::before,
 .tree-indicator::after {
   content: '';
+
+  position: absolute;
+  z-index: 1000;
+  left: 0;
+
   display: block;
 
   background-color: grey;
-
-  z-index: 1000;
-  position: absolute;
-  left: 0;
 }
 
 ion-accordion::before,
 .tree-indicator::before {
-  height: 100%;
-  width: 1px;
-
   top: 0;
+  width: 1px;
+  height: 100%;
 }
 
 .tree-indicator::after {
+  top: 50%;
+  transform: translateX(calc(-50% - 8px));
   width: 40px;
   height: 1px;
-
-  transform: translateX(calc(-50% - 8px));
-  top: 50%;
 }
 
 ion-accordion::after {
@@ -62,6 +61,7 @@ ion-accordion::after {
 ion-accordion:last-of-type::before {
   height: 24px;
 }
+
 .tree-indicator:last-of-type::before {
   height: 50%;
 }
diff --git a/frontend/app/src/app/modules/data/types/date-series/date-series-list-item.scss b/frontend/app/src/app/modules/data/types/date-series/date-series-list-item.scss
index a3b23d95..d50ba5fc 100644
--- a/frontend/app/src/app/modules/data/types/date-series/date-series-list-item.scss
+++ b/frontend/app/src/app/modules/data/types/date-series/date-series-list-item.scss
@@ -1,8 +1,9 @@
 .remove-button {
+  --color: var(--ion-color-success);
+  --border-color: var(--ion-color-success);
+
   &:hover {
     --color-hover: var(--ion-color-danger);
     --border-color: var(--ion-color-danger);
   }
-  --color: var(--ion-color-success);
-  --border-color: var(--ion-color-success);
 }
diff --git a/frontend/app/src/app/modules/data/types/dish/dish-characteristics.scss b/frontend/app/src/app/modules/data/types/dish/dish-characteristics.scss
index fcf41a2b..0b3c4557 100644
--- a/frontend/app/src/app/modules/data/types/dish/dish-characteristics.scss
+++ b/frontend/app/src/app/modules/data/types/dish/dish-characteristics.scss
@@ -15,11 +15,12 @@
 $size: 16px;
 
 ion-note {
-  list-style: none;
   display: flex;
   flex-direction: row-reverse;
   align-items: center;
-  justify-content: flex-start;
+  justify-content: flex-end;
+
+  list-style: none;
 }
 
 abbr {
@@ -27,16 +28,16 @@ abbr {
 }
 
 .mask-image {
-  width: $size;
   aspect-ratio: 1;
+  width: $size;
 
   background: var(--ion-color-medium);
 
   mask-image: var(--background-url);
-  mask-repeat: no-repeat;
-  mask-position: center;
-  mask-size: contain;
   mask-mode: alpha;
+  mask-position: center;
+  mask-repeat: no-repeat;
+  mask-size: contain;
 }
 
 img {
diff --git a/frontend/app/src/app/modules/data/types/message/message-detail-content.scss b/frontend/app/src/app/modules/data/types/message/message-detail-content.scss
index 3d8e0a63..5e58af0f 100644
--- a/frontend/app/src/app/modules/data/types/message/message-detail-content.scss
+++ b/frontend/app/src/app/modules/data/types/message/message-detail-content.scss
@@ -16,13 +16,16 @@
 :host {
   ion-thumbnail {
     position: relative;
+    transform: scaleX(-1);
+
+    overflow: hidden;
+
     width: 100%;
     height: auto;
     margin-inline: auto;
-    overflow: hidden;
-    background-size: contain;
+
     background-position: center;
-    transform: scaleX(-1);
+    background-size: contain;
 
     ion-img {
       backdrop-filter: blur(32px);
@@ -30,15 +33,16 @@
       &::part(image) {
         transform: scaleX(-1);
         max-width: 16cm;
-        object-fit: contain;
         margin-inline: auto;
+        object-fit: contain;
       }
     }
   }
 
   .date-published {
     --ion-card-color: var(--ion-color-medium-shade);
-    text-transform: uppercase;
+
     font-weight: var(--font-weight-semi-bold);
+    text-transform: uppercase;
   }
 }
diff --git a/frontend/app/src/app/modules/data/types/place/place-detail-content.scss b/frontend/app/src/app/modules/data/types/place/place-detail-content.scss
index 15281020..e817313f 100644
--- a/frontend/app/src/app/modules/data/types/place/place-detail-content.scss
+++ b/frontend/app/src/app/modules/data/types/place/place-detail-content.scss
@@ -15,7 +15,7 @@
 
 .map-widget {
   position: relative;
+  width: auto;
   height: 300px;
   min-height: 300px;
-  width: auto;
 }
diff --git a/frontend/app/src/app/modules/data/types/place/place-list-item.scss b/frontend/app/src/app/modules/data/types/place/place-list-item.scss
index 395cc6be..027b92cf 100644
--- a/frontend/app/src/app/modules/data/types/place/place-list-item.scss
+++ b/frontend/app/src/app/modules/data/types/place/place-list-item.scss
@@ -18,8 +18,8 @@ ion-note {
 
   > ion-label {
     display: inline-flex;
-    justify-content: center;
     align-items: center;
+    justify-content: center;
   }
 }
 
@@ -30,7 +30,6 @@ ion-label + ion-label.distance::before {
 
 .in-place {
   display: flex;
-
-  justify-content: flex-end;
   align-items: center;
+  justify-content: flex-end;
 }
diff --git a/frontend/app/src/app/modules/data/types/place/special/mensa/place-mensa.scss b/frontend/app/src/app/modules/data/types/place/special/mensa/place-mensa.scss
index 95f4a6c3..cc6143df 100644
--- a/frontend/app/src/app/modules/data/types/place/special/mensa/place-mensa.scss
+++ b/frontend/app/src/app/modules/data/types/place/special/mensa/place-mensa.scss
@@ -18,14 +18,14 @@ ion-segment-button {
 }
 
 ion-segment {
-  justify-content: space-between;
   overflow: auto;
+  justify-content: space-between;
   height: 50px;
 
   &::-webkit-scrollbar {
+    display: none;
     width: 0;
     height: 0;
-    display: none;
   }
 
   ion-segment-button.segment-button {
diff --git a/frontend/app/src/app/modules/feedback/feedback-page.scss b/frontend/app/src/app/modules/feedback/feedback-page.scss
index e0c0e190..661dc74b 100644
--- a/frontend/app/src/app/modules/feedback/feedback-page.scss
+++ b/frontend/app/src/app/modules/feedback/feedback-page.scss
@@ -12,66 +12,75 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
+@import '~src/theme/util/mixins';
 
 pre {
   white-space: pre-wrap;
 }
+
 ion-button {
   margin: 10px;
 }
 
-@import 'src/theme/util/_mixins.scss';
-
 :host ::ng-deep {
+  ion-grid,
+  ion-col {
+    padding-top: 0;
+    padding-bottom: 0;
+    padding-inline-start: 0;
+  }
+
   ion-card {
     margin: 0;
     box-shadow: none;
+
     ion-card-content {
+      padding-bottom: 8px;
+
       h1 {
         margin: 0;
       }
-      padding-bottom: 8px;
     }
+
     ion-card-header {
-      color: var(--ion-color-dark);
       padding-top: 8px;
       padding-bottom: 4px;
       font-weight: bold;
+      color: var(--ion-color-dark);
     }
+
     ion-grid,
     ion-col {
-      padding-inline-start: 0;
       padding-top: 0;
       padding-bottom: 0;
+      padding-inline-start: 0;
     }
   }
-  ion-grid,
-  ion-col {
-    padding-inline-start: 0;
-    padding-top: 0;
-    padding-bottom: 0;
-  }
 
   .feedback-content {
-    margin: var(--spacing-md);
+    @include border-radius-in-parallax(var(--border-radius-default));
+
     display: flex;
     flex-direction: column;
     gap: var(--spacing-sm);
+
+    margin: var(--spacing-md);
+
     background: var(--ion-item-background);
-    @include border-radius-in-parallax(var(--border-radius-default));
 
     & > * {
+      @include border-radius-in-parallax(var(--border-radius-default));
+
+      position: relative;
+      overflow: hidden;
+      display: block;
+      margin: 0;
+
       ion-card-subtitle {
         font-size: var(--font-size-lg);
         color: var(--ion-color-light-contrast);
       }
 
-      display: block;
-      @include border-radius-in-parallax(var(--border-radius-default));
-      overflow: hidden;
-      position: relative;
-      margin: 0;
-
       & > ion-thumbnail {
         background: var(--ion-color-primary);
       }
diff --git a/frontend/app/src/app/modules/hebis/daia-availability/daia-availability.scss b/frontend/app/src/app/modules/hebis/daia-availability/daia-availability.scss
index 636eece5..f2c7a719 100644
--- a/frontend/app/src/app/modules/hebis/daia-availability/daia-availability.scss
+++ b/frontend/app/src/app/modules/hebis/daia-availability/daia-availability.scss
@@ -16,16 +16,19 @@
 :host ion-card {
   margin: 0;
   box-shadow: none;
+
   ion-card-content {
+    padding-bottom: 8px;
+
     h1 {
       margin: 0;
     }
-    padding-bottom: 8px;
   }
+
   ion-card-header {
-    color: var(--ion-color-dark);
     padding-top: 8px;
     padding-bottom: 4px;
     font-weight: bold;
+    color: var(--ion-color-dark);
   }
 }
diff --git a/frontend/app/src/app/modules/hebis/daia-availability/daia-holding.scss b/frontend/app/src/app/modules/hebis/daia-availability/daia-holding.scss
index f0b92375..c8c8ed5a 100644
--- a/frontend/app/src/app/modules/hebis/daia-availability/daia-holding.scss
+++ b/frontend/app/src/app/modules/hebis/daia-availability/daia-holding.scss
@@ -14,18 +14,21 @@
  */
 ion-label a {
   display: block;
-  text-decoration: none;
+
+  margin: 20px 0 5px;
+
   font-weight: 700;
   color: var(--ion-color-primary);
-  margin: 20px 0 5px;
+  text-decoration: none;
 }
+
 ion-grid {
+  margin: 5px;
   padding: 0;
-  margin: 5px 5px;
 
   ion-row {
-    background-color: var(--ion-color-light);
     color: var(--ion-color-light-contrast);
+    background-color: var(--ion-color-light);
     border-bottom: 1px solid #fff;
 
     ion-col:first-child {
diff --git a/frontend/app/src/app/modules/hebis/hebis-detail/hebis-detail-content.scss b/frontend/app/src/app/modules/hebis/hebis-detail/hebis-detail-content.scss
index 5f00ff95..a436d38f 100644
--- a/frontend/app/src/app/modules/hebis/hebis-detail/hebis-detail-content.scss
+++ b/frontend/app/src/app/modules/hebis/hebis-detail/hebis-detail-content.scss
@@ -14,32 +14,37 @@
  */
 
 :host ::ng-deep {
+  ion-grid,
+  ion-col {
+    padding-top: 0;
+    padding-bottom: 0;
+    padding-inline-start: 0;
+  }
+
   ion-card {
     margin: 0;
     box-shadow: none;
+
     ion-card-content {
+      padding-bottom: 8px;
+
       h1 {
         margin: 0;
       }
-      padding-bottom: 8px;
     }
+
     ion-card-header {
-      color: var(--ion-color-dark);
       padding-top: 8px;
       padding-bottom: 4px;
       font-weight: bold;
+      color: var(--ion-color-dark);
     }
+
     ion-grid,
     ion-col {
-      padding-inline-start: 0;
       padding-top: 0;
       padding-bottom: 0;
+      padding-inline-start: 0;
     }
   }
-  ion-grid,
-  ion-col {
-    padding-inline-start: 0;
-    padding-top: 0;
-    padding-bottom: 0;
-  }
 }
diff --git a/frontend/app/src/app/modules/hebis/hebis-detail/hebis-detail.html b/frontend/app/src/app/modules/hebis/hebis-detail/hebis-detail.html
index b5d69c65..d0476a5e 100644
--- a/frontend/app/src/app/modules/hebis/hebis-detail/hebis-detail.html
+++ b/frontend/app/src/app/modules/hebis/hebis-detail/hebis-detail.html
@@ -27,13 +27,13 @@
 <ion-content class="ion-no-padding">
   <div [ngSwitch]="true">
     <ng-container *ngSwitchCase="!item && (isDisconnected | async)">
-      <div class="centeredMessageContainer">
+      <div class="centered-message-container">
         <ion-icon name="signal_disconnected"></ion-icon>
         <ion-label> {{ 'data.detail.COULD_NOT_CONNECT' | translate }} </ion-label>
       </div>
     </ng-container>
     <ng-container *ngSwitchCase="item === null">
-      <div class="centeredMessageContainer">
+      <div class="centered-message-container">
         <ion-icon name="link_off"></ion-icon>
         <ion-label> {{ 'data.detail.NOT_FOUND' | translate }} </ion-label>
       </div>
diff --git a/frontend/app/src/app/modules/hebis/list/hebis-search-page.html b/frontend/app/src/app/modules/hebis/list/hebis-search-page.html
index 3f474d43..2f63166c 100644
--- a/frontend/app/src/app/modules/hebis/list/hebis-search-page.html
+++ b/frontend/app/src/app/modules/hebis/list/hebis-search-page.html
@@ -51,7 +51,7 @@
 
 <ion-content>
   <div [style.display]="!showDefaultData && !items && !loading ? 'block' : 'none'">
-    <ion-label class="centeredMessageContainer"> {{ 'hebisSearch.instruction' | translate }} </ion-label>
+    <ion-label class="centered-message-container"> {{ 'hebisSearch.instruction' | translate }} </ion-label>
   </div>
   <stapps-data-list
     id="data-list"
diff --git a/frontend/app/src/app/modules/library/account/checked-out/checked-out-page.html b/frontend/app/src/app/modules/library/account/checked-out/checked-out-page.html
index 5281d107..707f12cd 100644
--- a/frontend/app/src/app/modules/library/account/checked-out/checked-out-page.html
+++ b/frontend/app/src/app/modules/library/account/checked-out/checked-out-page.html
@@ -39,7 +39,7 @@
       *ngIf="!checkedOutItems; else nothingFound"
     ></stapps-skeleton-list-item>
     <ng-template #nothingFound>
-      <ion-label *ngIf="checkedOutItems && checkedOutItems.length === 0" class="centeredMessageContainer">
+      <ion-label *ngIf="checkedOutItems && checkedOutItems.length === 0" class="centered-message-container">
         {{ 'search.nothing_found' | translate | titlecase }}
       </ion-label>
     </ng-template>
diff --git a/frontend/app/src/app/modules/library/account/holds/holds-page.html b/frontend/app/src/app/modules/library/account/holds/holds-page.html
index f61a8599..c08ba734 100644
--- a/frontend/app/src/app/modules/library/account/holds/holds-page.html
+++ b/frontend/app/src/app/modules/library/account/holds/holds-page.html
@@ -71,7 +71,7 @@
       *ngIf="!paiaDocuments; else nothingFound"
     ></stapps-skeleton-list-item>
     <ng-template #nothingFound>
-      <ion-label *ngIf="paiaDocuments && paiaDocuments.length === 0" class="centeredMessageContainer">
+      <ion-label *ngIf="paiaDocuments && paiaDocuments.length === 0" class="centered-message-container">
         {{ 'search.nothing_found' | translate | titlecase }}
       </ion-label>
     </ng-template>
diff --git a/frontend/app/src/app/modules/map/item/map-item.component.scss b/frontend/app/src/app/modules/map/item/map-item.component.scss
index 84083b77..b33ba8e3 100644
--- a/frontend/app/src/app/modules/map/item/map-item.component.scss
+++ b/frontend/app/src/app/modules/map/item/map-item.component.scss
@@ -20,8 +20,8 @@
   max-width: 100%;
 
   ion-card {
-    padding: 0;
     overflow: visible;
+    padding: 0;
 
     ion-card-header {
       padding: 0;
@@ -41,15 +41,16 @@
       }
 
       .close {
-        position: absolute;
-        top: -15px;
-        right: -15px;
-        z-index: 1;
         --padding-top: 0;
         --padding-bottom: 0;
         --padding-start: 0;
         --padding-end: 0;
 
+        position: absolute;
+        z-index: 1;
+        top: -15px;
+        right: -15px;
+
         ion-icon {
           width: 30px;
           height: 30px;
@@ -58,13 +59,13 @@
     }
 
     ion-card-content {
-      padding: var(--spacing-md);
       display: flex;
       flex-direction: row;
+      padding: var(--spacing-md);
 
       .show-more-button {
-        text-transform: uppercase;
         margin-left: auto;
+        text-transform: uppercase;
       }
     }
   }
diff --git a/frontend/app/src/app/modules/map/page/map-page.scss b/frontend/app/src/app/modules/map/page/map-page.scss
index 2bdb3878..01563e90 100644
--- a/frontend/app/src/app/modules/map/page/map-page.scss
+++ b/frontend/app/src/app/modules/map/page/map-page.scss
@@ -16,11 +16,13 @@
 ion-content {
   // fixes the unexpected issue that the content is not fullscreen (behind the header)
   position: absolute;
+
   div.map-container {
+    position: fixed;
     width: 100%;
     height: 100%;
-    position: fixed;
   }
+
   & > div {
     overflow: hidden;
   }
@@ -30,33 +32,46 @@ ion-toolbar:first-of-type {
   padding: 0 var(--spacing-md) var(--spacing-xs);
 }
 
+div.map-buttons {
+  ion-button {
+    // important for iOS
+    // TODO: find an option that is better suited for the iOS theme
+    --box-shadow: var(--map-box-shadow);
+
+    align-self: flex-end;
+    margin: 4px;
+  }
+}
+
 ::ng-deep {
   .stapps-location {
     ion-icon {
-      color: #fd435c;
       width: 100%;
       height: 100%;
+      color: #fd435c;
     }
   }
 
   .stapps-device-location {
     ion-icon {
-      color: #4387fd;
       width: 100%;
       height: 100%;
+      color: #4387fd;
     }
   }
 
   div.floating-content {
-    display: block;
     position: fixed;
-    left: 0;
+    z-index: 1000;
     right: 0;
     bottom: 0;
-    z-index: 1000;
+    left: 0;
+
+    display: block;
+    justify-content: center;
+
     width: 100%;
     padding: 0 var(--spacing-md) 8vh;
-    justify-content: center;
 
     ion-card {
       margin: 0;
@@ -68,43 +83,35 @@ ion-toolbar:first-of-type {
     }
 
     stapps-map-item {
-      width: 550px;
       position: center;
       justify-self: center;
+      width: 550px;
       margin: var(--spacing-sm) auto;
     }
   }
 }
 
 div.floating-buttons {
-  z-index: 1000;
   position: absolute;
-  bottom: 15px;
+  z-index: 1000;
   right: 10px;
-}
-
-div.map-buttons {
-  ion-button {
-    margin: 4px;
-    // important for iOS
-    // TODO: find an option that is better suited for the iOS theme
-    --box-shadow: var(--map-box-shadow);
-    align-self: flex-end;
-  }
+  bottom: 15px;
 }
 
 div.map-buttons.above {
-  min-width: 70%;
   display: none;
+  min-width: 70%;
 }
 
-@media (max-width: 667px) {
+@media (width <= 667px) {
   div.map-buttons.above {
     display: flex;
   }
+
   div.floating-content {
     justify-content: normal;
     padding: 0 var(--spacing-md) var(--spacing-lg);
+
     stapps-map-item {
       display: grid;
       width: 100%;
diff --git a/frontend/app/src/app/modules/map/widget/map-widget.scss b/frontend/app/src/app/modules/map/widget/map-widget.scss
index 9842de2a..abd4ae60 100644
--- a/frontend/app/src/app/modules/map/widget/map-widget.scss
+++ b/frontend/app/src/app/modules/map/widget/map-widget.scss
@@ -14,15 +14,15 @@
  */
 
 div.map-container {
-  height: 100%;
-  width: 100%;
-  display: block;
   pointer-events: none;
+  display: block;
+  width: 100%;
+  height: 100%;
 }
 
 div.map-buttons {
   position: absolute;
+  z-index: 10000;
   top: 10px;
   right: 10px;
-  z-index: 10000;
 }
diff --git a/frontend/app/src/app/modules/menu/navigation/navigation.scss b/frontend/app/src/app/modules/menu/navigation/navigation.scss
index 2b62e80a..492d2b0e 100644
--- a/frontend/app/src/app/modules/menu/navigation/navigation.scss
+++ b/frontend/app/src/app/modules/menu/navigation/navigation.scss
@@ -12,8 +12,7 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-
-@import '../../../../theme/util/mixins';
+@import '~src/theme/util/mixins';
 
 stapps-navigation-tabs {
   @include ion-xl-up {
@@ -21,18 +20,11 @@ stapps-navigation-tabs {
   }
 }
 
-stapps-offline-notice.has-error ~ ion-split-pane,
-stapps-offline-notice.is-offline ~ ion-split-pane {
-  margin-top: calc(var(--font-size-md) + 2 * var(--spacing-sm));
-}
-
 :host {
   ion-split-pane {
-    transition: margin-top 150ms ease;
     --side-max-width: 256px;
-    margin-bottom: calc(var(--ion-tabbar-height) + env(safe-area-inset-bottom));
 
-    @include phoneLandscape {
+    @include phone-landscape {
       margin-bottom: 0;
     }
 
@@ -44,6 +36,9 @@ stapps-offline-notice.is-offline ~ ion-split-pane {
     @include ion-xl-up {
       margin-left: 0;
     }
+
+    margin-bottom: calc(var(--ion-tabbar-height) + env(safe-area-inset-bottom));
+    transition: margin-top 150ms ease;
   }
 
   ion-toolbar.in-toolbar {
@@ -54,25 +49,30 @@ stapps-offline-notice.is-offline ~ ion-split-pane {
       padding: var(--spacing-xl) var(--spacing-md);
 
       .logo {
-        object-position: left;
-        height: 80px;
-
         @include ion-md-up {
           height: var(--tablet-top-bar-height);
         }
+
+        height: 80px;
+        object-position: left;
       }
     }
   }
 }
 
+stapps-offline-notice.has-error ~ ion-split-pane,
+stapps-offline-notice.is-offline ~ ion-split-pane {
+  margin-top: calc(var(--font-size-md) + 2 * var(--spacing-sm));
+}
+
 ion-router-outlet {
   background: var(--ion-background-color);
 }
 
 .menu-category {
   ion-label {
-    font-weight: bold;
     font-size: 115%;
+    font-weight: bold;
   }
 }
 
diff --git a/frontend/app/src/app/modules/menu/navigation/offline-notice.scss b/frontend/app/src/app/modules/menu/navigation/offline-notice.scss
index 952651bd..8bcb267f 100644
--- a/frontend/app/src/app/modules/menu/navigation/offline-notice.scss
+++ b/frontend/app/src/app/modules/menu/navigation/offline-notice.scss
@@ -13,45 +13,53 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 :host {
-  display: grid;
   $height: calc(var(--font-size-md) + 2 * var(--spacing-sm));
 
-  height: $height;
-  width: 100%;
+  transform: translateY(calc(-1 * $height));
+
+  display: grid;
+
+  width: 100%;
+  height: $height;
 
-  line-height: var(--font-size-md);
   font-size: var(--font-size-md);
   font-weight: bold;
-
-  transform: translateY(calc(-1 * $height));
+  line-height: var(--font-size-md);
 
   transition: all 150ms ease;
 
   &.is-offline,
   &.has-error {
-    transform: translateY(0px);
+    transform: translateY(0);
   }
 
   > ion-button {
-    grid-row: 1;
-    grid-column: 1;
-    margin: 0;
     --border-radius: 0;
-    opacity: 0;
     --padding-top: 0;
     --padding-bottom: 0;
-    transition: all 150ms ease;
+
     z-index: 0;
 
+    grid-column: 1;
+    grid-row: 1;
+
+    margin: 0;
+
+    opacity: 0;
+
+    transition: all 150ms ease;
+
     &.close {
-      height: 100%;
-      margin: 0;
       position: absolute;
-      right: 0;
+      z-index: 1;
       top: 50%;
+      right: 0;
       bottom: 0;
       transform: translateY(-50%);
-      z-index: 1;
+
+      height: 100%;
+      margin: 0;
+
       color: var(--ion-color-danger-contrast);
     }
   }
@@ -71,6 +79,7 @@
   from {
     transform: rotate(0deg);
   }
+
   to {
     transform: rotate(360deg);
   }
diff --git a/frontend/app/src/app/modules/menu/navigation/tabs.component.scss b/frontend/app/src/app/modules/menu/navigation/tabs.component.scss
index d6664e02..5969ce18 100644
--- a/frontend/app/src/app/modules/menu/navigation/tabs.component.scss
+++ b/frontend/app/src/app/modules/menu/navigation/tabs.component.scss
@@ -15,37 +15,32 @@
 @import '../../../../theme/util/mixins';
 
 :host {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: 100;
-
-  .menu-button {
-    display: none;
-  }
-
   @include ion-md-up {
-    right: unset;
     top: 0;
+    right: unset;
 
     .menu-button {
-      display: revert;
       position: absolute;
       top: 0;
-      left: 0;
       right: 0;
+      left: 0;
+
+      display: revert;
+
       margin-top: var(--spacing-xxl);
     }
 
     ion-tab-bar {
-      border-top: unset;
       position: relative;
-      border-right: var(--border);
+
       flex-direction: column;
       gap: var(--spacing-md);
+
       width: var(--navigation-rail-width);
       height: 100vh;
+
+      border-top: unset;
+      border-right: var(--border);
     }
 
     ion-tab-button {
@@ -53,6 +48,16 @@
       height: var(--navigation-rail-item-height);
     }
   }
+
+  position: absolute;
+  z-index: 100;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  .menu-button {
+    display: none;
+  }
 }
 
 .tab-selected ::ng-deep stapps-icon {
diff --git a/frontend/app/src/app/modules/news/item/news-item.scss b/frontend/app/src/app/modules/news/item/news-item.scss
index f1c2309a..7d7f7e9c 100644
--- a/frontend/app/src/app/modules/news/item/news-item.scss
+++ b/frontend/app/src/app/modules/news/item/news-item.scss
@@ -33,12 +33,15 @@ ion-card::part(native) {
 }
 
 ion-card-title {
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  font-size: var(--font-size-xl);
   --color: var(--ion-text-color-dark, white);
+
+  overflow: hidden;
+  display: -webkit-box;
+
+  font-size: var(--font-size-xl);
+
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
   max-lines: 3;
 }
 
diff --git a/frontend/app/src/app/modules/news/page/news-page.html b/frontend/app/src/app/modules/news/page/news-page.html
index 86f2f903..bf4766fc 100644
--- a/frontend/app/src/app/modules/news/page/news-page.html
+++ b/frontend/app/src/app/modules/news/page/news-page.html
@@ -51,7 +51,7 @@
       <stapps-news-item *ngFor="let item of news" [item]="item"></stapps-news-item>
     </ng-container>
   </div>
-  <ion-label *ngIf="news.length === 0" class="centeredMessageContainer">
+  <ion-label *ngIf="news.length === 0" class="centered-message-container">
     {{ 'search.nothing_found' | translate | titlecase }}
   </ion-label>
   <ion-infinite-scroll id="infinite-scroll" threshold="20%" (ionInfinite)="loadMore($event.target)">
diff --git a/frontend/app/src/app/modules/news/page/news-page.scss b/frontend/app/src/app/modules/news/page/news-page.scss
index 6e55f07a..cfe9a606 100644
--- a/frontend/app/src/app/modules/news/page/news-page.scss
+++ b/frontend/app/src/app/modules/news/page/news-page.scss
@@ -15,10 +15,11 @@
 @import 'src/theme/util/mixins';
 
 .news-grid {
+  @include auto-grid(300px);
+
   display: grid;
   gap: var(--spacing-sm);
   margin: var(--spacing-sm);
-  @include auto-grid(300px);
 
   > * {
     height: 100%;
@@ -26,7 +27,8 @@
 }
 
 ion-content.ios > div > .news-grid {
+  @include auto-grid(350px);
+
   gap: var(--spacing-lg);
   margin: var(--spacing-lg);
-  @include auto-grid(350px);
 }
diff --git a/frontend/app/src/app/modules/profile/page/profile-page-section.scss b/frontend/app/src/app/modules/profile/page/profile-page-section.scss
index 18c14b48..bde1c548 100644
--- a/frontend/app/src/app/modules/profile/page/profile-page-section.scss
+++ b/frontend/app/src/app/modules/profile/page/profile-page-section.scss
@@ -16,10 +16,45 @@
 
 $width: 108px;
 
+ion-item {
+  --border-radius: var(--border-radius-default);
+  --inner-padding-start: unset;
+  --inner-padding-end: unset;
+  --padding-start: unset;
+  --padding-end: unset;
+
+  height: 96px;
+
+  &::part(native) {
+    width: 100%;
+    height: 100%;
+  }
+
+  > div {
+    width: 100%;
+    height: 100%;
+  }
+
+  div,
+  ion-label {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    padding: 0 var(--spacing-xs) 0 var(--spacing-xs);
+
+    font-size: var(--font-size-sm);
+    text-align: center;
+    white-space: normal;
+  }
+}
+
 simple-swiper {
-  container-type: inline-size;
   --swiper-slide-width: #{$width};
 
+  container-type: inline-size;
+
   ion-item {
     @each $i in 7, 6, 5, 4, 3, 2, 1 {
       $max: #{($width + 8px) * $i};
@@ -30,40 +65,9 @@ simple-swiper {
   }
 }
 
-ion-item {
-  height: 96px;
-  --border-radius: var(--border-radius-default);
-  --inner-padding-start: unset;
-  --inner-padding-end: unset;
-  --padding-start: unset;
-  --padding-end: unset;
-
-  > div {
-    width: 100%;
-    height: 100%;
-  }
-
-  div,
-  ion-label {
-    white-space: normal;
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    font-size: var(--font-size-sm);
-    padding: 0 var(--spacing-xs) 0 var(--spacing-xs);
-  }
-
-  &::part(native) {
-    height: 100%;
-    width: 100%;
-  }
-}
-
 .log-in-hint {
-  padding: var(--spacing-xl);
   height: 100%;
-  box-shadow: none;
+  padding: var(--spacing-xl);
   background: var(--ion-color-light-tint);
+  box-shadow: none;
 }
diff --git a/frontend/app/src/app/modules/profile/page/profile-page.scss b/frontend/app/src/app/modules/profile/page/profile-page.scss
index 05052972..8a250e45 100644
--- a/frontend/app/src/app/modules/profile/page/profile-page.scss
+++ b/frontend/app/src/app/modules/profile/page/profile-page.scss
@@ -21,20 +21,26 @@
       margin-bottom: 0;
     }
   }
+
   .section-headline {
     margin-bottom: var(--spacing-md);
   }
+
   .user-card-wrapper {
     margin-bottom: 0;
+
     .user-card {
-      border-radius: var(--border-radius-default);
       position: relative;
-      margin: 0;
-      box-shadow: var(--shadow-profile-card);
+
       max-width: 400px;
+      margin: 0;
+
+      border-radius: var(--border-radius-default);
+      box-shadow: var(--shadow-profile-card);
 
       ion-card-header {
         --background: var(--ion-color-tertiary);
+
         display: flex;
         align-items: center;
         padding-top: var(--spacing-sm);
@@ -43,16 +49,17 @@
         ion-img {
           display: block;
           height: 36px;
-          object-position: left 50%;
           margin-right: auto;
+          object-position: left 50%;
         }
 
         span {
-          color: var(--ion-color-light);
+          padding-top: 3px;
+
           font-size: var(--font-size-lg);
           font-weight: var(--font-weight-bold);
           line-height: 1;
-          padding-top: 3px;
+          color: var(--ion-color-light);
         }
       }
 
@@ -61,10 +68,12 @@
 
         .profile-card-img {
           position: absolute;
-          opacity: 0.13;
-          height: 100%;
+
           width: 50%;
+          height: 100%;
           margin-left: calc(var(--spacing-md) * -4);
+
+          opacity: 0.13;
           object-position: left bottom;
         }
 
@@ -76,25 +85,27 @@
             'email email';
 
           ion-label {
+            display: block;
             font-size: var(--font-size-sm);
             font-weight: var(--font-weight-bold);
             color: var(--ion-color-medium-shade);
-            display: block;
           }
 
           ion-text {
+            display: block;
             font-size: var(--font-size-md);
             font-weight: var(--font-weight-bold);
             color: var(--ion-color-text);
-            display: block;
           }
 
           .full-name {
-            grid-area: fullName;
             display: block;
+            grid-area: fullName;
+
+            margin-bottom: var(--spacing-sm);
+
             font-size: var(--font-size-lg);
             font-weight: var(--font-weight-bold);
-            margin-bottom: var(--spacing-sm);
           }
 
           .matriculation-number {
@@ -114,75 +125,86 @@
 
         .log-in-prompt {
           margin: auto 0;
-          color: var(--ion-color-text);
           font-size: var(--font-size-lg);
           font-weight: var(--font-weight-semi-bold);
+          color: var(--ion-color-text);
         }
       }
     }
   }
 
   ion-thumbnail {
-    background: var(--placeholder-gray);
-    height: 80%;
-    width: 80%;
     align-items: center;
-    padding: 10px;
+
+    width: 80%;
+    height: 80%;
     margin: 0;
+    padding: 10px;
+
+    background: var(--placeholder-gray);
     border-radius: var(--border-radius-default);
+
     ion-icon {
+      display: block;
       width: 100%;
       height: 100%;
       color: white;
-      display: block;
     }
   }
+
   ion-row.main-info {
-    font-weight: bold;
     margin-bottom: 2px;
+    font-weight: bold;
   }
 
   .courses {
     .courses-card {
-      margin: 0;
-      box-shadow: none;
-      border-radius: var(--border-radius-default) var(--border-radius-default) 0 0;
-      background-color: unset;
       max-width: 800px;
+      margin: 0;
+
+      background-color: unset;
+      border-radius: var(--border-radius-default) var(--border-radius-default) 0 0;
+      box-shadow: none;
 
       ion-card-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
         background-color: var(--ion-item-background);
         border-radius: var(--border-radius-default) var(--border-radius-default) 0 0;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
 
         span {
-          color: var(--ion-item-background-color-contrast);
           font-size: var(--font-size-lg);
           font-weight: var(--font-weight-bold);
+          color: var(--ion-item-background-color-contrast);
         }
+
         ion-icon {
-          color: var(--ion-color-light);
           cursor: pointer;
+          color: var(--ion-color-light);
         }
       }
 
       ion-card-content {
+        overflow: hidden;
+
+        max-height: 0;
         margin: 0;
         padding: 0;
+
         background-color: var(--ion-item-background);
         border-radius: var(--border-radius-default);
-        max-height: 0;
-        overflow: hidden;
+
         transition: max-height 250ms ease-in-out, padding 250ms ease-in-out, margin 250ms ease-in-out;
 
         &.show-card {
-          height: 100%;
           display: block;
+
+          height: 100%;
+          max-height: var(--max-height);
           margin: var(--spacing-xxl);
           padding: var(--spacing-md);
-          max-height: var(--max-height);
         }
 
         div {
diff --git a/frontend/app/src/app/modules/schedule/page/components/calendar-component.scss b/frontend/app/src/app/modules/schedule/page/components/calendar-component.scss
index dc7cc4c8..f4eebfdb 100644
--- a/frontend/app/src/app/modules/schedule/page/components/calendar-component.scss
+++ b/frontend/app/src/app/modules/schedule/page/components/calendar-component.scss
@@ -16,25 +16,49 @@
 $header-height: 50px;
 $hours-width: 40px;
 
+.day-labels {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
+  height: 100%;
+
+  ion-button {
+    width: 100%;
+    height: 100%;
+    text-transform: none;
+
+    ion-label {
+      overflow: visible !important;
+    }
+  }
+}
+
 .header {
+  position: relative;
   height: $header-height;
   background-color: var(--ion-color-light);
-  position: relative;
 
   .left-button,
   .right-button {
-    color: var(--ion-color-medium-shade);
-    position: absolute;
-    z-index: 99;
-    height: 100%;
-    margin: 0;
     --padding-start: 0;
     --padding-end: 0;
+
+    position: absolute;
+    z-index: 99;
+
+    height: 100%;
+    margin: 0;
+
+    color: var(--ion-color-medium-shade);
   }
+
   .left-button {
     left: 0;
     padding: 0 var(--spacing-sm);
   }
+
   .right-button {
     right: 0;
     padding: 0 var(--spacing-sm);
@@ -42,9 +66,9 @@ $hours-width: 40px;
 
   .day-labels {
     ion-button {
+      overflow: visible !important;
       width: unset;
       color: var(--ion-color-light-contrast);
-      overflow: visible !important;
     }
   }
 
@@ -57,24 +81,6 @@ $hours-width: 40px;
   height: 100%;
 }
 
-.day-labels {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  ion-button {
-    width: 100%;
-    height: 100%;
-
-    text-transform: none;
-    ion-label {
-      overflow: visible !important;
-    }
-  }
-}
-
 ion-content {
   overflow-y: auto;
 }
@@ -89,14 +95,17 @@ ion-content {
     background-color: var(--ion-background-color);
 
     .hour-lines {
+      position: absolute;
+      top: 0;
+
       width: 40px;
       height: 70px;
-      border-right: 1px solid var(--ion-item-border-color);
-      text-align: center;
-      top: 0;
-      position: absolute;
+
       font-weight: var(--font-weight-bold);
+      text-align: center;
+
       background-color: var(--ion-background-color);
+      border-right: 1px solid var(--ion-item-border-color);
     }
   }
 
@@ -106,12 +115,14 @@ ion-content {
 }
 
 .date-header {
-  border-bottom: 1px solid var(--ion-item-border-color);
-  padding: var(--spacing-sm) auto;
   height: fit-content;
+  padding: var(--spacing-sm) auto;
+
   font-weight: var(--font-weight-bold);
-  text-transform: uppercase;
   text-align: center;
+  text-transform: uppercase;
+
+  border-bottom: 1px solid var(--ion-item-border-color);
 }
 
 .day-labels > ion-button[disabled] {
diff --git a/frontend/app/src/app/modules/schedule/page/grid/infinite-swiper.scss b/frontend/app/src/app/modules/schedule/page/grid/infinite-swiper.scss
index 17dd76c0..20e84d58 100644
--- a/frontend/app/src/app/modules/schedule/page/grid/infinite-swiper.scss
+++ b/frontend/app/src/app/modules/schedule/page/grid/infinite-swiper.scss
@@ -14,8 +14,8 @@
  */
 
 .swiper {
-  height: 100%;
   width: 100%;
+  height: 100%;
 }
 
 .swiper,
diff --git a/frontend/app/src/app/modules/schedule/page/grid/schedule-card.scss b/frontend/app/src/app/modules/schedule/page/grid/schedule-card.scss
index e99fe9c4..2e9a8dbf 100644
--- a/frontend/app/src/app/modules/schedule/page/grid/schedule-card.scss
+++ b/frontend/app/src/app/modules/schedule/page/grid/schedule-card.scss
@@ -14,38 +14,32 @@
  */
 
 ion-card {
-  width: inherit;
   z-index: 2;
-  margin-left: 0;
+
+  width: inherit;
   margin-right: 0;
+  margin-left: 0;
+
   border-radius: 0;
 
-  @each $name in lecture, exercise, default {
-    &.#{$name}Card {
-      --background: var(--calender-#{$name}-card);
-
-      ion-card-title,
-      ion-card-subtitle span,
-      ion-card-content ion-note,
-      ion-card-content ion-text {
-        color: var(--calender-#{$name}-card-contrast);
-      }
-
-      &:after {
-        background: linear-gradient(
-          rgba(var(--calender-#{$name}-card-rgb), 0%),
-          rgba(var(--calender-#{$name}-card-rgb), 100%)
-        );
-      }
-    }
-  }
-
-  &:after {
+  &::after {
     content: '';
+
     position: absolute;
     bottom: 0;
-    height: 33%;
+
     width: 100%;
+    height: 33%;
+  }
+
+  ion-card-header,
+  ion-card-title,
+  ion-card-subtitle span,
+  ion-card-content ion-note {
+    font-family: var(--headline-font-family);
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-bold);
+    text-overflow: ellipsis;
   }
 
   ion-card-header {
@@ -58,37 +52,46 @@ ion-card {
 
     ion-card-subtitle {
       display: flex;
+
       ion-icon.icon-white {
-        color: var(--ion-color-primary-contrast);
         margin-right: var(--spacing-xs);
+        color: var(--ion-color-primary-contrast);
       }
     }
   }
 
-  ion-card-header,
-  ion-card-title,
-  ion-card-subtitle span,
-  ion-card-content ion-note {
-    font-size: var(--font-size-sm);
-    font-weight: var(--font-weight-bold);
-    font-family: var(--headline-font-family);
-    text-overflow: ellipsis;
-  }
-
   ion-card-content .place-name {
     display: block;
     font-family: var(--headline-font-family);
   }
 
-  ion-card-content .place-name {
-    display: block;
-  }
-
   div {
     position: absolute;
     bottom: 0;
-    height: 20px;
+
     width: 100%;
-    background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 255) 100%);
+    height: 20px;
+
+    background: linear-gradient(rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 25500%) 100%);
+  }
+
+  @each $name in lecture, exercise, default {
+    &.#{$name}Card {
+      --background: var(--calender-#{$name}-card);
+
+      &::after {
+        background: linear-gradient(
+          rgb(var(--calender-#{$name}-card-rgb) 0%),
+          rgb(var(--calender-#{$name}-card-rgb) 100%)
+        );
+      }
+
+      ion-card-title,
+      ion-card-subtitle span,
+      ion-card-content ion-note,
+      ion-card-content ion-text {
+        color: var(--calender-#{$name}-card-contrast);
+      }
+    }
   }
 }
diff --git a/frontend/app/src/app/modules/schedule/page/grid/schedule-cursor.scss b/frontend/app/src/app/modules/schedule/page/grid/schedule-cursor.scss
index 6e016687..a1ee0240 100644
--- a/frontend/app/src/app/modules/schedule/page/grid/schedule-cursor.scss
+++ b/frontend/app/src/app/modules/schedule/page/grid/schedule-cursor.scss
@@ -14,38 +14,44 @@
  */
 
 div {
-  padding: 0;
-  margin: 0;
   position: absolute;
+  z-index: 2;
+  top: 4px;
+
   display: flex;
   flex-direction: row;
+
   width: 100%;
-  top: 4px;
-  z-index: 2;
+  margin: 0;
+  padding: 0;
 
   div {
     width: 100%;
     height: fit-content;
 
     hr {
-      width: 100%;
       position: absolute;
-      margin-right: 16px;
-      margin-top: 8px;
+
+      width: 100%;
       height: 2px;
-      border-top: 2px solid var(--ion-color-danger);
+      margin-top: 8px;
+      margin-right: 16px;
       margin-block-start: 0;
       margin-block-end: 0;
+
+      border-top: 2px solid var(--ion-color-danger);
     }
 
     div {
-      width: 8px;
-      height: 8px;
       position: absolute;
       top: -3px;
-      border-radius: 50% 0 50% 50%;
       transform: rotateZ(45deg);
+
+      width: 8px;
+      height: 8px;
+
       background-color: var(--ion-color-danger);
+      border-radius: 50% 0 50% 50%;
     }
   }
 }
diff --git a/frontend/app/src/app/modules/schedule/page/grid/schedule-day.scss b/frontend/app/src/app/modules/schedule/page/grid/schedule-day.scss
index 046714d6..9d65030c 100644
--- a/frontend/app/src/app/modules/schedule/page/grid/schedule-day.scss
+++ b/frontend/app/src/app/modules/schedule/page/grid/schedule-day.scss
@@ -15,8 +15,8 @@
 
 :host {
   .day-wrapper {
-    border-left: 1px solid var(--ion-item-border-color);
     border-right: 1px solid var(--ion-item-border-color);
+    border-left: 1px solid var(--ion-item-border-color);
 
     &.leftmost {
       border-left: unset;
@@ -24,16 +24,19 @@
 
     .day-header {
       position: sticky;
+      z-index: 3;
       top: 0;
       left: 0;
+
       height: fit-content;
       padding: var(--spacing-md);
-      border-bottom: 2px solid var(--ion-item-border-color);
+
       font-size: var(--font-size-md);
       font-weight: var(--font-weight-bold);
       text-align: center;
+
       background-color: var(--ion-background-color);
-      z-index: 3;
+      border-bottom: 2px solid var(--ion-item-border-color);
 
       &.leftmost {
         border-left: 1px solid var(--ion-item-border-color);
@@ -46,32 +49,34 @@
   }
 
   div {
-    height: 100%;
     width: 100%;
+    height: 100%;
   }
 
   .horizontal-group {
     position: absolute;
     top: 10px;
     left: 0;
-    grid-column: 1;
-    grid-row: 1;
-    width: 100%;
-
-    box-sizing: border-box;
-    max-width: inherit;
 
     display: flex;
+    grid-column: 1;
+    grid-row: 1;
     flex-direction: row;
     align-items: flex-start;
+
+    box-sizing: border-box;
+    width: 100%;
+    max-width: inherit;
   }
 
   .vertical-line {
     position: absolute;
     top: 0;
     left: 0;
+
     width: 1px;
     height: 100%;
+
     background-color: var(--calender-date-line-gray);
   }
 }
diff --git a/frontend/app/src/app/modules/schedule/page/schedule-single-events.scss b/frontend/app/src/app/modules/schedule/page/schedule-single-events.scss
index 4172f74c..9feb2b1d 100644
--- a/frontend/app/src/app/modules/schedule/page/schedule-single-events.scss
+++ b/frontend/app/src/app/modules/schedule/page/schedule-single-events.scss
@@ -10,15 +10,16 @@
     margin-right: var(--spacing-md);
 
     .hour-label {
-      width: fit-content;
       display: inline-block;
+      width: fit-content;
       text-align: center;
     }
+
     .hour-line {
       width: 1px;
       height: 20px;
-      border-left: 1px solid var(--ion-color-primary);
       margin: var(--spacing-xs) 0;
+      border-left: 1px solid var(--ion-color-primary);
     }
   }
 
diff --git a/frontend/app/src/app/modules/settings/page/settings-page.scss b/frontend/app/src/app/modules/settings/page/settings-page.scss
index 3467c553..636341ec 100644
--- a/frontend/app/src/app/modules/settings/page/settings-page.scss
+++ b/frontend/app/src/app/modules/settings/page/settings-page.scss
@@ -12,58 +12,67 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-@import 'src/theme/util/_mixins.scss';
+@import '~src/theme/util/mixins';
 
 :host ::ng-deep {
+  ion-grid,
+  ion-col {
+    padding-top: 0;
+    padding-bottom: 0;
+    padding-inline-start: 0;
+  }
+
   ion-card {
     margin: 0;
     box-shadow: none;
+
     ion-card-content {
+      padding-bottom: 8px;
+
       h1 {
         margin: 0;
       }
-      padding-bottom: 8px;
     }
+
     ion-card-header {
-      color: var(--ion-color-dark);
       padding-top: 8px;
       padding-bottom: 4px;
       font-weight: bold;
+      color: var(--ion-color-dark);
     }
+
     ion-grid,
     ion-col {
-      padding-inline-start: 0;
       padding-top: 0;
       padding-bottom: 0;
+      padding-inline-start: 0;
     }
   }
-  ion-grid,
-  ion-col {
-    padding-inline-start: 0;
-    padding-top: 0;
-    padding-bottom: 0;
-  }
 
   .settings-content {
-    margin: var(--spacing-md);
+    @include border-radius-in-parallax(var(--border-radius-default));
+
     display: flex;
     flex-direction: column;
     gap: var(--spacing-sm);
+
+    margin: var(--spacing-md);
+
     background: var(--ion-item-background);
-    @include border-radius-in-parallax(var(--border-radius-default));
 
     & > * {
+      @include border-radius-in-parallax(var(--border-radius-default));
+
+      position: relative;
+      overflow: hidden;
+      display: block;
+      margin: 0;
+
       ion-card-subtitle {
         font-size: var(--font-size-lg);
         color: var(--ion-color-light-contrast);
       }
 
-      display: block;
-      @include border-radius-in-parallax(var(--border-radius-default));
-      overflow: hidden;
-      position: relative;
-      margin: 0;
-
       & > ion-thumbnail {
         background: var(--ion-color-primary);
       }
diff --git a/frontend/app/src/app/util/ion-icon/icon.scss b/frontend/app/src/app/util/ion-icon/icon.scss
index ae362086..9ac563b7 100644
--- a/frontend/app/src/app/util/ion-icon/icon.scss
+++ b/frontend/app/src/app/util/ion-icon/icon.scss
@@ -14,13 +14,15 @@
  */
 
 :host {
-  font-variation-settings: 'wght' var(--weight), 'GRAD' var(--grade), 'FILL' var(--fill);
-
   display: flex;
   align-items: center;
   justify-content: center;
+
   width: 100%;
   height: 100%;
+
   font-size: inherit;
+  font-variation-settings: 'wght' var(--weight), 'GRAD' var(--grade), 'FILL' var(--fill);
+
   transition: all 0.2s ease-in-out;
 }
diff --git a/frontend/app/src/app/util/section.component.scss b/frontend/app/src/app/util/section.component.scss
index 982fc2b6..601951d9 100644
--- a/frontend/app/src/app/util/section.component.scss
+++ b/frontend/app/src/app/util/section.component.scss
@@ -12,8 +12,7 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-
-@import 'src/theme/util/mixins';
+@import '~src/theme/util/mixins';
 
 a {
   display: contents;
@@ -23,6 +22,7 @@ a {
 
 ion-grid {
   width: 100%;
+  padding: 0;
 }
 
 ion-label {
@@ -30,16 +30,12 @@ ion-label {
   font-weight: var(--font-weight-bold);
 
   &:only-child {
-    height: 100%;
     display: flex;
     align-items: center;
+    height: 100%;
   }
 }
 
-ion-grid {
-  padding: 0;
-}
-
 ion-col {
   padding: 0;
 }
@@ -55,14 +51,16 @@ ion-col {
 }
 
 :host {
-  transition: height 250ms ease;
-  display: block;
-  padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm);
   --swiper-scroll-padding: var(--spacing-md);
   --swiper-gap: var(--spacing-sm);
 
   @include ion-md-up {
-    padding: var(--spacing-lg) var(--spacing-xxl) var(--spacing-sm);
     --swiper-scroll-padding: var(--spacing-xxl);
+
+    padding: var(--spacing-lg) var(--spacing-xxl) var(--spacing-sm);
   }
+
+  display: block;
+  padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm);
+  transition: height 250ms ease;
 }
diff --git a/frontend/app/src/app/util/simple-swiper.scss b/frontend/app/src/app/util/simple-swiper.scss
index d335b406..95709d7a 100644
--- a/frontend/app/src/app/util/simple-swiper.scss
+++ b/frontend/app/src/app/util/simple-swiper.scss
@@ -14,36 +14,36 @@
  */
 
 :host {
-  position: relative;
-  display: grid;
-  grid-auto-flow: column;
-
-  justify-content: start;
-
+  scrollbar-width: none;
   scroll-snap-type: x mandatory;
+
+  position: relative;
+
+  contain: layout;
   overflow-x: auto;
   overflow-y: hidden;
-  contain: layout;
+  display: grid;
+  grid-auto-flow: column;
+  gap: var(--swiper-gap, 0);
+  justify-content: start;
 
   margin-inline: calc(-1 * var(--swiper-scroll-padding));
 
-  gap: var(--swiper-gap, 0);
-
   &::ng-deep > * {
-    contain: layout;
-    scroll-snap-align: start;
     scroll-margin-inline: var(--swiper-scroll-padding, 0);
+    scroll-snap-align: start;
+    contain: layout;
     width: var(--swiper-slide-width);
 
     &:first-child {
-      padding-inline-start: var(--swiper-scroll-padding);
       width: calc(var(--swiper-slide-width) + var(--swiper-scroll-padding));
+      padding-inline-start: var(--swiper-scroll-padding);
     }
 
     &:last-child {
       scroll-snap-align: end;
-      padding-inline-end: var(--swiper-scroll-padding);
       width: calc(var(--swiper-slide-width) + var(--swiper-scroll-padding));
+      padding-inline-end: var(--swiper-scroll-padding);
     }
 
     &:only-child {
@@ -54,5 +54,4 @@
   &::-webkit-scrollbar {
     display: none;
   }
-  scrollbar-width: none;
 }
diff --git a/frontend/app/src/global.scss b/frontend/app/src/global.scss
index b22f1e40..437e7b3e 100644
--- a/frontend/app/src/global.scss
+++ b/frontend/app/src/global.scss
@@ -31,8 +31,8 @@
 @import 'swiper/scss/controller';
 
 // @import 'material-symbols/rounded.scss';
-@import './theme/material-symbols.scss';
-@import './theme/common/_ion-content-parallax.scss';
+@import './theme/material-symbols';
+@import './theme/common/ion-content-parallax';
 
 /* StApps */
 
@@ -49,12 +49,14 @@ stapps-icon {
 
   &::before {
     content: attr(name);
+
     position: absolute;
+    z-index: -1;
     top: 0;
     left: 0;
+
     font-variation-settings: 'FILL' 0;
     color: white;
-    z-index: -1;
   }
 }
 
@@ -62,18 +64,23 @@ ion-item {
   h2.name {
     font-weight: bold;
   }
+
   ion-thumbnail {
-    background: transparent;
     --size: 36px;
+
     display: flex;
     align-items: center;
-    padding: 10px;
+
     margin: 0;
+    padding: 10px;
+
+    background: transparent;
+
     ion-icon {
+      display: block;
       width: 100%;
       height: 100%;
       color: white;
-      display: block;
     }
   }
 }
@@ -82,21 +89,39 @@ ion-item,
 ion-card.compact {
   ion-grid,
   ion-col {
-    padding-inline-start: 0;
     padding-top: 0;
     padding-bottom: 0;
+    padding-inline-start: 0;
   }
 }
 
-.centeredMessageContainer {
+ion-header stapps-favorite-button ion-icon {
+  color: var(--ion-color-primary-contrast);
+}
+
+ion-alert {
+  button.alert-button.preferred {
+    color: var(--ion-color-primary-contrast);
+    background-color: var(--ion-color-primary);
+  }
+
+  button.alert-button.default {
+    color: var(--ion-color-primary);
+    background-color: transparent;
+  }
+}
+
+.centered-message-container {
   display: flex;
   flex-direction: column;
-  justify-content: center;
   align-items: center;
-  text-align: center;
+  justify-content: center;
+
   min-height: 50vh;
   margin: 20px;
 
+  text-align: center;
+
   ion-icon {
     font-size: 64px;
   }
@@ -116,32 +141,3 @@ ion-card.bold-header {
     font-weight: bold;
   }
 }
-ion-header {
-  stapps-favorite-button {
-    ion-icon {
-      color: var(--ion-color-primary-contrast);
-    }
-  }
-}
-
-ion-alert {
-  button.alert-button.preferred {
-    background-color: var(--ion-color-primary);
-    color: var(--ion-color-primary-contrast);
-  }
-  button.alert-button.default {
-    background-color: transparent;
-    color: var(--ion-color-primary);
-  }
-}
-
-ion-alert {
-  button.alert-button.preferred {
-    background-color: var(--ion-color-primary);
-    color: var(--ion-color-primary-contrast);
-  }
-  button.alert-button.default {
-    background-color: transparent;
-    color: var(--ion-color-primary);
-  }
-}
diff --git a/frontend/app/src/theme/_fonts.scss b/frontend/app/src/theme/_fonts.scss
index 2ab69531..0d7f2734 100644
--- a/frontend/app/src/theme/_fonts.scss
+++ b/frontend/app/src/theme/_fonts.scss
@@ -14,38 +14,38 @@
  */
 
 @font-face {
-  font-family: 'Barlow';
+  font-family: Barlow;
+  font-weight: 400;
+  font-style: normal;
   src: url('../assets/fonts/barlow/Barlow-Regular.ttf');
-  font-weight: 400;
-  font-style: normal;
 }
 @font-face {
-  font-family: 'Barlow';
+  font-family: Barlow;
+  font-weight: 700;
+  font-style: normal;
   src: url('../assets/fonts/barlow/Barlow-SemiBold.ttf');
-  font-weight: 700;
-  font-style: normal;
 }
 @font-face {
-  font-family: 'Barlow';
-  src: url('../assets/fonts/barlow/Barlow-Bold.ttf');
+  font-family: Barlow;
   font-weight: 800;
   font-style: normal;
+  src: url('../assets/fonts/barlow/Barlow-Bold.ttf');
 }
 @font-face {
   font-family: 'Barlow Condensed';
-  src: url('../assets/fonts/barlow_condensed/BarlowCondensed-Regular.ttf');
   font-weight: 400;
   font-style: normal;
+  src: url('../assets/fonts/barlow_condensed/BarlowCondensed-Regular.ttf');
 }
 @font-face {
   font-family: 'Barlow Condensed';
-  src: url('../assets/fonts/barlow_condensed/BarlowCondensed-SemiBold.ttf');
   font-weight: 700;
   font-style: normal;
+  src: url('../assets/fonts/barlow_condensed/BarlowCondensed-SemiBold.ttf');
 }
 @font-face {
   font-family: 'Barlow Condensed';
-  src: url('../assets/fonts/barlow_condensed/BarlowCondensed-Bold.ttf');
   font-weight: 800;
   font-style: normal;
+  src: url('../assets/fonts/barlow_condensed/BarlowCondensed-Bold.ttf');
 }
diff --git a/frontend/app/src/theme/color-processing.scss b/frontend/app/src/theme/color-processing.scss
index 1aa7a21d..8d89858b 100644
--- a/frontend/app/src/theme/color-processing.scss
+++ b/frontend/app/src/theme/color-processing.scss
@@ -17,7 +17,6 @@
 // being generated, but omits colors with -dark and -light suffixes, making
 // it impossible to access dark theme colors while in light theme and vice versa
 $include-theme-independent-colors: true;
-
 $tint-amount: 10%;
 $shade-amount: 12%;
 $placeholder-fade-amount: 20%;
@@ -28,7 +27,6 @@ $item-border-color-fade-amount: 15%;
 $contrast-threshold: 128;
 $contrast-light-color: #fff;
 $contrast-dark-color: #000;
-
 $fade-threshold: 50%;
 
 // https://ionicframework.com/docs/theming/themes#stepped-colors
diff --git a/frontend/app/src/theme/colors.scss b/frontend/app/src/theme/colors.scss
index 4aa61ad1..9e497fa5 100644
--- a/frontend/app/src/theme/colors.scss
+++ b/frontend/app/src/theme/colors.scss
@@ -37,16 +37,14 @@
   --calender-default-card: var(--ion-color-light);
   --calender-default-card-rgb: var(--ion-color-light-rgb);
   --calender-default-card-contrast: var(--ion-color-light-contrast);
-
-  --map-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
-    0 1px 5px 0 rgba(0, 0, 0, 0.12);
-
+  --map-box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%),
+    0 1px 5px 0 rgb(0 0 0 / 12%);
   --linear-gradient: linear-gradient(135deg, var(--ion-color-primary-shade), var(--ion-color-tertiary));
 
   // Shadows
   --shadow-default: 0px 0px 10px 4px var(--ion-box-shadow-color);
   --shadow-cards: 0 0 8px 1px var(--ion-box-shadow-color);
   --shadow-cards-hover: 5px 5px 8px 4px var(--ion-box-shadow-color);
-  --shadow-profile-card: 0 2px 6px 6px rgba(0, 0, 0, 0.06), 0 4px 5px 12px rgba(0, 0, 0, 0.04),
-    0 5px 6px 20px rgba(0, 0, 0, 0.02);
+  --shadow-profile-card: 0 2px 6px 6px rgb(0 0 0 / 6%), 0 4px 5px 12px rgb(0 0 0 / 4%),
+    0 5px 6px 20px rgb(0 0 0 / 2%);
 }
diff --git a/frontend/app/src/theme/common/_helper.scss b/frontend/app/src/theme/common/_helper.scss
index 64fcd35e..20732a78 100644
--- a/frontend/app/src/theme/common/_helper.scss
+++ b/frontend/app/src/theme/common/_helper.scss
@@ -41,6 +41,7 @@
     li img {
       max-height: 1.25rem;
       vertical-align: text-bottom;
+
       // filter: invert(45%) sepia(0%) saturate(0%) hue-rotate(227deg) brightness(97%) contrast(82%);
     }
   }
@@ -48,11 +49,13 @@
 
 %horizontal-list {
   @extend %vertical-list;
+
   ul {
     li {
       display: inline;
     }
-    li:not(:first-child):before {
+
+    li:not(:first-child)::before {
       content: ' • ';
     }
   }
@@ -64,6 +67,7 @@
 
 .horizontal-list {
   @extend %vertical-list;
+
   li {
     display: inline;
   }
diff --git a/frontend/app/src/theme/common/_ion-button.scss b/frontend/app/src/theme/common/_ion-button.scss
index 63094009..2878b460 100644
--- a/frontend/app/src/theme/common/_ion-button.scss
+++ b/frontend/app/src/theme/common/_ion-button.scss
@@ -14,6 +14,34 @@
  */
 
 app-root {
+  .button {
+    --padding-top: var(--spacing-sm);
+    --padding-bottom: var(--spacing-sm);
+
+    height: auto;
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-semi-bold);
+
+    // Add default border, so buttons have the same size
+    &:not([fill='outline'])::part(native) {
+      border: var(--border-width-default) solid transparent;
+    }
+
+    &[fill='outline']::part(native) {
+      border: var(--border-width-default) solid rgb(var(--ion-color-primary-contrast-rgb) 0.2);
+    }
+
+    &.button-active {
+      --background: var(--ion-color-tertiary);
+
+      font-weight: var(--font-weight-bold);
+
+      ion-icon {
+        color: var(--ion-color-secondary);
+      }
+    }
+  }
+
   // Change default border radius
   ion-buttons ion-button.button,
   .button {
@@ -22,32 +50,6 @@ app-root {
     }
   }
 
-  .button {
-    font-size: var(--font-size-sm);
-    font-weight: var(--font-weight-semi-bold);
-    --padding-top: var(--spacing-sm);
-    --padding-bottom: var(--spacing-sm);
-    height: auto;
-
-    // Add default border, so buttons have the same size
-    &:not([fill='outline'])::part(native) {
-      border: var(--border-width-default) solid transparent;
-    }
-
-    &[fill='outline']::part(native) {
-      border: var(--border-width-default) solid rgba(var(--ion-color-primary-contrast-rgb), 0.2);
-    }
-
-    &.button-active {
-      font-weight: var(--font-weight-bold);
-      --background: var(--ion-color-tertiary);
-
-      ion-icon {
-        color: var(--ion-color-secondary);
-      }
-    }
-  }
-
   ion-menu-button.button {
     font-size: var(--font-size-lg);
   }
diff --git a/frontend/app/src/theme/common/_ion-content-parallax.scss b/frontend/app/src/theme/common/_ion-content-parallax.scss
index c3599b8c..3b0aff70 100644
--- a/frontend/app/src/theme/common/_ion-content-parallax.scss
+++ b/frontend/app/src/theme/common/_ion-content-parallax.scss
@@ -22,24 +22,24 @@ ion-content::part(parallax-scroll) {
 }
 
 ion-content::part(parallax-parent) {
-  transform-style: preserve-3d;
   position: relative;
+  transform-style: preserve-3d;
 }
 
 ion-content::part(parallax) {
+  $translate-y: calc($overscroll-padding * $parallax-strength);
+  $translate-z: calc(-1px * $parallax-strength);
+  $transform-origin: calc($parallax-strength * $parallax-strength * $overscroll-padding);
+
   position: absolute;
   top: 0;
   right: 0;
   left: 0;
-
-  $translateY: calc($overscroll-padding * $parallax-strength);
-  $translateZ: calc(-1px * $parallax-strength);
-  $transform-origin: calc($parallax-strength * $parallax-strength * $overscroll-padding);
-
-  height: calc(var(--parallax-content-size, $default-parallax-content-size) + $overscroll-padding);
-  width: 150%;
   transform-origin: 50% $transform-origin;
-  transform: translate3d(0px, $translateY, $translateZ) scale($parallax-strength);
+  transform: translate3d(0, $translate-y, $translate-z) scale($parallax-strength);
+
+  width: 150%;
+  height: calc(var(--parallax-content-size, $default-parallax-content-size) + $overscroll-padding);
 
   background: var(--parallax-background, var(--ion-color-primary));
 }
diff --git a/frontend/app/src/theme/common/_ion-header.scss b/frontend/app/src/theme/common/_ion-header.scss
index b08d3731..4c61ead2 100644
--- a/frontend/app/src/theme/common/_ion-header.scss
+++ b/frontend/app/src/theme/common/_ion-header.scss
@@ -1,5 +1,5 @@
 app-root ion-header[class*='header-'] {
-  &:after {
+  &::after {
     background-image: unset;
   }
 }
diff --git a/frontend/app/src/theme/common/_ion-input.scss b/frontend/app/src/theme/common/_ion-input.scss
index 2838c006..08d51324 100644
--- a/frontend/app/src/theme/common/_ion-input.scss
+++ b/frontend/app/src/theme/common/_ion-input.scss
@@ -2,20 +2,22 @@ $icon-size: 23px;
 
 app-root ion-searchbar[class*='sc-ion-searchbar-'] {
   --border-radius: var(--border-radius-default);
+
+  height: 38px;
   padding-top: 0;
   padding-bottom: 0;
-  height: 38px;
 
   &.filterable {
-    padding-left: 0;
-    padding-right: 0;
     --box-shadow: none;
+
     position: relative;
+    padding-right: 0;
+    padding-left: 0;
 
     ion-menu-button {
       position: absolute;
-      right: 5px;
       z-index: 1;
+      right: 5px;
     }
 
     .searchbar-clear-button {
@@ -24,11 +26,13 @@ app-root ion-searchbar[class*='sc-ion-searchbar-'] {
   }
 
   ion-icon.searchbar-search-icon {
+    top: 50%;
+    left: var(--spacing-sm);
+    transform: translateY(-50%);
+
     width: $icon-size;
     height: $icon-size;
-    top: 50%;
-    transform: translateY(-50%);
-    left: var(--spacing-sm);
+
     color: var(--ion-color-medium-shade);
   }
 
diff --git a/frontend/app/src/theme/common/_ion-refresher.scss b/frontend/app/src/theme/common/_ion-refresher.scss
index 115d32cf..edf0ebad 100644
--- a/frontend/app/src/theme/common/_ion-refresher.scss
+++ b/frontend/app/src/theme/common/_ion-refresher.scss
@@ -14,14 +14,15 @@
  */
 
 ion-refresher {
-  background-color: var(--ion-color-primary);
   text-transform: uppercase;
+  background-color: var(--ion-color-primary);
 
   .refresher-pulling-icon,
   .refresher-pulling-text,
   .refresher-refreshing-text {
+    --ion-text-color: var(--ion-color-primary-contrast);
+
     font-size: var(--font-size-xs);
     font-weight: var(--font-weight-semi-bold);
-    --ion-text-color: var(--ion-color-primary-contrast);
   }
 }
diff --git a/frontend/app/src/theme/common/_ion-toolbar.scss b/frontend/app/src/theme/common/_ion-toolbar.scss
index ade500e4..d981d7d8 100644
--- a/frontend/app/src/theme/common/_ion-toolbar.scss
+++ b/frontend/app/src/theme/common/_ion-toolbar.scss
@@ -24,11 +24,13 @@ app-root ion-toolbar.in-toolbar {
   --padding-top: 0;
   --padding-bottom: 0;
   --opacity: 1;
+
   padding: 0 var(--spacing-md) var(--spacing-md);
 
   &:first-of-type {
     --padding-top: 0;
     --padding-bottom: 0;
+
     padding-bottom: 0;
   }
 
@@ -40,6 +42,7 @@ app-root ion-toolbar.in-toolbar {
   ion-segment {
     &:last-of-type {
       --padding-bottom: 0;
+
       padding-bottom: 0;
     }
   }
@@ -55,8 +58,8 @@ app-root ion-toolbar.in-toolbar {
   }
 
   ion-title {
-    font-weight: var(--font-weight-black);
     font-size: var(--font-size-lg);
+    font-weight: var(--font-weight-black);
   }
 
   ion-menu-button {
@@ -65,13 +68,15 @@ app-root ion-toolbar.in-toolbar {
 
   ion-back-button {
     --icon-margin-end: var(--spacing-xs);
+
     height: 42px; // this prevents the back button to become a .x px value
   }
 }
 
 app-root ion-toolbar.in-toolbar ion-searchbar,
 .stapps-searchbar {
-  padding-left: 0;
-  padding-right: 0;
   --box-shadow: none;
+
+  padding-right: 0;
+  padding-left: 0;
 }
diff --git a/frontend/app/src/theme/common/_swiper.scss b/frontend/app/src/theme/common/_swiper.scss
index 20f7f3ea..d1f67cfc 100644
--- a/frontend/app/src/theme/common/_swiper.scss
+++ b/frontend/app/src/theme/common/_swiper.scss
@@ -29,17 +29,19 @@
       text-decoration: none;
     }
   }
+
   .swiper-button-prev,
   .swiper-button-next {
     --swiper-navigation-size: 20px;
-    top: calc(-1 * var(--spacing-lg));
-    transform: translateY(0%);
-    font-weight: var(--font-weight-black);
-    color: var(--ion-color-dark);
 
     @include ion-md-down {
       display: none;
     }
+
+    top: calc(-1 * var(--spacing-lg));
+    transform: translateY(0%);
+    font-weight: var(--font-weight-black);
+    color: var(--ion-color-dark);
   }
 
   .swiper-button-prev {
diff --git a/frontend/app/src/theme/common/_typo.scss b/frontend/app/src/theme/common/_typo.scss
index 0e0d7711..83e9cfe4 100644
--- a/frontend/app/src/theme/common/_typo.scss
+++ b/frontend/app/src/theme/common/_typo.scss
@@ -18,12 +18,15 @@ body app-root {
   .title[class*='sc-ion-label'] {
     font-size: var(--font-size-md);
     font-weight: var(--font-weight-semi-bold);
+
     // TODO Condensed Font
   }
+
   .title-sub,
   .title-sub[class*='sc-ion-label'] {
     font-size: var(--font-size-md);
     font-weight: var(--font-weight-regular);
+
     // TODO Condensed Font
   }
 
diff --git a/frontend/app/src/theme/components/_card.scss b/frontend/app/src/theme/components/_card.scss
index 4cf8ab92..e33fb7cb 100644
--- a/frontend/app/src/theme/components/_card.scss
+++ b/frontend/app/src/theme/components/_card.scss
@@ -14,15 +14,19 @@
  */
 
 .card {
-  box-shadow: var(--shadow-cards);
-  // background-color: var(--ion-item-color);
-  border-radius: var(--border-radius-default);
+  display: block;
+
+  height: 100%;
   padding: var(--spacing-md);
+
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-bold);
   text-align: left;
-  display: block;
-  height: 100%;
+
+  // background-color: var(--ion-item-color);
+  border-radius: var(--border-radius-default);
+  box-shadow: var(--shadow-cards);
+
   transition: transform 250ms ease-in-out, box-shadow 250ms ease-in-out;
 }
 
diff --git a/frontend/app/src/theme/components/_section.scss b/frontend/app/src/theme/components/_section.scss
index d3814393..472d830d 100644
--- a/frontend/app/src/theme/components/_section.scss
+++ b/frontend/app/src/theme/components/_section.scss
@@ -1,12 +1,13 @@
 .section-headline {
+  display: flex;
+  flex-direction: revert;
+  justify-content: space-between;
+
+  width: 100%;
+  margin-bottom: var(--spacing-sm);
+
   font-size: var(--font-size-lg);
   font-weight: var(--font-weight-black);
   font-stretch: condensed;
   text-transform: uppercase;
-  margin-bottom: var(--spacing-sm);
-
-  width: 100%;
-  display: flex;
-  flex-direction: revert;
-  justify-content: space-between;
 }
diff --git a/frontend/app/src/theme/material-symbols.scss b/frontend/app/src/theme/material-symbols.scss
index 67582cce..3317ec6c 100644
--- a/frontend/app/src/theme/material-symbols.scss
+++ b/frontend/app/src/theme/material-symbols.scss
@@ -14,27 +14,28 @@
  */
 @font-face {
   font-family: 'Material Symbols Rounded';
-  font-style: normal;
   font-weight: 100 700;
+  font-style: normal;
   font-display: block;
   src: url('../assets/icons.min.woff2') format('woff2');
 }
 
 .material-symbols-rounded {
-  //noinspection CssNoGenericFontName
+  direction: ltr;
+  display: inline-block;
+  // stylelint-disable-next-line
   font-family: 'Material Symbols Rounded';
+  font-size: 24px;
+  font-feature-settings: 'liga'; // Support for IE
   font-weight: normal;
   font-style: normal;
-  font-size: 24px;
   line-height: 1;
-  letter-spacing: normal;
   text-transform: none;
-  display: inline-block;
-  white-space: nowrap;
+  text-rendering: optimizelegibility; // Support for Safari and Chrome
+  letter-spacing: normal;
   word-wrap: normal;
-  direction: ltr;
+  white-space: nowrap;
+
   -webkit-font-smoothing: antialiased; // Support for all WebKit browsers
   -moz-osx-font-smoothing: grayscale; // Support for Firefox
-  text-rendering: optimizeLegibility; // Support for Safari and Chrome
-  font-feature-settings: 'liga'; // Support for IE
 }
diff --git a/frontend/app/src/theme/util/_color-system.scss b/frontend/app/src/theme/util/_color-system.scss
index 01cec55b..52f42be6 100644
--- a/frontend/app/src/theme/util/_color-system.scss
+++ b/frontend/app/src/theme/util/_color-system.scss
@@ -17,20 +17,20 @@
 @import '../color-processing';
 @import './dark';
 
-@function toRGB($color) {
+@function to-rgb($color) {
   @return red($color) + ',' + green($color) + ',' + blue($color);
 }
 
-@function toShade($color) {
+@function to-shade($color) {
   @return darken($color, $shade-amount);
 }
 
-@function toTint($color) {
+@function to-tint($color) {
   @return lighten($color, $tint-amount);
 }
 
-@function toContrast($color) {
-  $yiq: toYiq($color);
+@function to-contrast($color) {
+  $yiq: to-yiq($color);
   @return if($yiq >= $contrast-threshold, $contrast-dark-color, $contrast-light-color);
 }
 
@@ -53,7 +53,7 @@
 /**
  * Converts a color to the YIQ color system
  */
-@function toYiq($color) {
+@function to-yiq($color) {
   @return math.div(
     (color.red($color) * 299) + (color.green($color) * 587) + (color.blue($color) * 114),
     1000
@@ -62,19 +62,19 @@
 
 @mixin color-rgb($name, $color) {
   #{$name}: #{$color};
-  #{$name}-rgb: #{toRGB($color)};
+  #{$name}-rgb: #{to-rgb($color)};
 }
 
 @mixin light-dark-scheme($light, $dark) {
   :root,
   .light {
-    @if ($include-theme-independent-colors == true) {
+    @if $include-theme-independent-colors == true {
       @content ($light, -light);
       @content (if($dark == none, $light, $dark), -dark);
     }
     @content ($light, "");
   }
-  @if ($dark != none) {
+  @if $dark != none {
     @include dark-only {
       @content ($dark, "");
     }
@@ -84,6 +84,7 @@
 @mixin ion-color-step($name, $from, $to) {
   @for $i from calc($steps-start / $steps-step) through calc($steps-end / $steps-step) {
     $value: $i * $steps-step;
+
     #{$name}-#{$value}: #{interpolate-colors($from, $to, $value, $steps-range-start, $steps-range-end)};
   }
 }
@@ -91,15 +92,15 @@
 @mixin ion-color($name, $light, $dark: none) {
   @include light-dark-scheme($light, $dark) using($color, $suffix) {
     @include color-rgb(--ion-color-#{$name}#{$suffix}, $color);
-    @include color-rgb(--ion-color-#{$name}-shade#{$suffix}, toShade($color));
-    @include color-rgb(--ion-color-#{$name}-tint#{$suffix}, toTint($color));
-    @include color-rgb(--ion-color-#{$name}-contrast#{$suffix}, toContrast($color));
+    @include color-rgb(--ion-color-#{$name}-shade#{$suffix}, to-shade($color));
+    @include color-rgb(--ion-color-#{$name}-tint#{$suffix}, to-tint($color));
+    @include color-rgb(--ion-color-#{$name}-contrast#{$suffix}, to-contrast($color));
   }
 }
 
 @mixin ion-background-color($light, $dark: none) {
   @include light-dark-scheme($light, $dark) using($color, $suffix) {
-    $text-color: toContrast($color);
+    $text-color: to-contrast($color);
     @include color-rgb(--ion-background-color#{$suffix}, $color);
     @include color-rgb(--ion-text-color#{$suffix}, $text-color);
     @include color-rgb(--ion-box-shadow-color#{$suffix}, fade($color, $box-shadow-fade-amount));
@@ -115,6 +116,6 @@
     @include color-rgb(--ion-card-background#{$suffix}, $color);
     @include color-rgb(--ion-item-border-color#{$suffix}, fade($color, $item-border-color-fade-amount));
     @include color-rgb(--ion-border-color#{$suffix}, fade($color, $item-border-color-fade-amount));
-    @include color-rgb(--ion-item-color#{$suffix}, toContrast($color));
+    @include color-rgb(--ion-item-color#{$suffix}, to-contrast($color));
   }
 }
diff --git a/frontend/app/src/theme/util/_dark.scss b/frontend/app/src/theme/util/_dark.scss
index 12ac4a37..7fde5619 100644
--- a/frontend/app/src/theme/util/_dark.scss
+++ b/frontend/app/src/theme/util/_dark.scss
@@ -18,6 +18,7 @@
       @content();
     }
   }
+
   .dark {
     @content();
   }
diff --git a/frontend/app/src/theme/util/_mixins.scss b/frontend/app/src/theme/util/_mixins.scss
index d7e2b6b7..74ab31f9 100644
--- a/frontend/app/src/theme/util/_mixins.scss
+++ b/frontend/app/src/theme/util/_mixins.scss
@@ -18,61 +18,61 @@
  */
 
 @mixin ion-sm-up {
-  @media (min-width: 576px) {
+  @media (width >= 576px) {
     @content;
   }
 }
 
 @mixin ion-sm-down {
-  @media (max-width: 575.98px) {
+  @media (width <= 575.98px) {
     @content;
   }
 }
 
 @mixin ion-md-up {
-  @media (min-width: 768px) {
+  @media (width >= 768px) {
     @content;
   }
 }
 
 @mixin ion-md-down {
-  @media (max-width: 767.98px) {
+  @media (width <= 767.98px) {
     @content;
   }
 }
 
 @mixin ion-lg-up {
-  @media (min-width: 992px) {
+  @media (width >= 992px) {
     @content;
   }
 }
 
 @mixin ion-lg-down {
-  @media (max-width: 991.98px) {
+  @media (width <= 991.98px) {
     @content;
   }
 }
 
 @mixin ion-xl-up {
-  @media (min-width: 1200px) {
+  @media (width >= 1200px) {
     @content;
   }
 }
 
 @mixin ion-xl-down {
-  @media (max-width: 1199.98px) {
+  @media (width <= 1199.98px) {
     @content;
   }
 }
 
-@mixin phoneLandscape {
-  @media (max-height: 500px) and (orientation: landscape) {
+@mixin phone-landscape {
+  @media (height <= 500px) and (orientation: landscape) {
     @content;
   }
 }
 
-@mixin phonePortraitSmall {
-  @media (max-height: 700px) and (orientation: portrait) {
+@mixin phone-portrait-small {
+  @media (height <= 700px) and (orientation: portrait) {
     @content;
   }
 }
@@ -84,11 +84,11 @@
 }
 
 @mixin border-radius-in-parallax($border-radius) {
-  border-radius: $border-radius;
   // explicitly place element in 3D space
   // Safari seems to sometimes get confused
   // and disregard border radius in some cases
   transform: translateZ(0);
+  border-radius: $border-radius;
 }
 
 @mixin content-padding {
diff --git a/frontend/app/src/theme/variables.scss b/frontend/app/src/theme/variables.scss
index 412cf50f..87cec188 100644
--- a/frontend/app/src/theme/variables.scss
+++ b/frontend/app/src/theme/variables.scss
@@ -12,24 +12,44 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-
 // Ionic Variables and Theming. For more info, please see:
 // http://ionicframework.com/docs/theming/
-@import 'colors';
+@import './colors';
+
+@import '~swiper/css/navigation';
+
+// Import all other styles
+@import './fonts';
+@import './common/typo';
+@import './common/helper';
+@import './common/ion-button';
+@import './common/ion-header';
+@import './common/ion-input';
+@import './common/ion-modal';
+@import './common/ion-popover';
+@import './common/ion-refresher';
+@import './common/ion-toolbar';
+@import './common/ion-menu';
+@import './common/swiper';
+@import './common/typography';
+@import './common/leaflet-tile';
+@import './common/ion-searchbar';
+@import './components/image-dark';
+
+@import './components/card';
+@import './components/section';
 
 /** Ionic CSS Variables **/
 :root {
   // Fonts
-  --ion-font-family: 'Barlow', Helvetica, Arial, sans-serif;
-  --headline-font-family: 'Barlow Condensed', Helvetica, Arial, sans-serif;
-
+  --ion-font-family: 'Barlow', helvetica, arial, sans-serif;
+  --headline-font-family: 'Barlow Condensed', helvetica, arial, sans-serif;
   --font-size-xxs: 10px;
   --font-size-xs: 12px;
   --font-size-sm: 14px;
   --font-size-md: 16px;
   --font-size-lg: 20px;
   --font-size-xl: 24px;
-
   --font-weight-thin: 200;
   --font-weight-regular: 400;
   --font-weight-semi-bold: 700;
@@ -43,18 +63,13 @@
   --spacing-lg: 16px;
   --spacing-xl: 20px;
   --spacing-xxl: 24px;
-
   --border-width-default: 1px;
   --border-radius-default: 8px;
-
   --header-spacing-bottom: 70px;
   --navigation-rail-width: 80px;
   --navigation-rail-item-height: 56px;
-
   --icon-stroke-width: 1.2;
-
   --tablet-top-bar-height: 96px;
-
   --ion-tabbar-height: 50px;
 }
 
@@ -63,26 +78,3 @@ body {
   font-family: var(--ion-font-family);
   background-color: var(--ion-color-primary);
 }
-
-@import '~swiper/css/navigation';
-
-// Import all other styles
-@import 'fonts';
-@import 'common/typo';
-@import 'common/helper';
-@import 'common/ion-button';
-@import 'common/ion-header';
-@import 'common/ion-input';
-@import 'common/ion-modal';
-@import 'common/ion-popover';
-@import 'common/ion-refresher';
-@import 'common/ion-toolbar';
-@import 'common/ion-menu';
-@import 'common/swiper';
-@import 'common/typography';
-@import 'common/leaflet-tile';
-@import 'common/ion-searchbar';
-@import 'components/image-dark';
-
-@import 'components/card';
-@import 'components/section';
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index da6323e2..97e249dd 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1050,6 +1050,21 @@ importers:
       protractor:
         specifier: 7.0.0
         version: 7.0.0
+      stylelint:
+        specifier: 15.10.1
+        version: 15.10.1
+      stylelint-config-clean-order:
+        specifier: 5.0.1
+        version: 5.0.1(stylelint@15.10.1)
+      stylelint-config-prettier-scss:
+        specifier: 1.0.0
+        version: 1.0.0(stylelint@15.10.1)
+      stylelint-config-recommended-scss:
+        specifier: 12.0.0
+        version: 12.0.0(postcss@8.4.26)(stylelint@15.10.1)
+      stylelint-config-standard-scss:
+        specifier: 10.0.0
+        version: 10.0.0(postcss@8.4.26)(stylelint@15.10.1)
       surge:
         specifier: 0.23.1
         version: 0.23.1
@@ -5172,6 +5187,31 @@ packages:
     dependencies:
       '@jridgewell/trace-mapping': 0.3.9
 
+  /@csstools/css-parser-algorithms@2.3.0(@csstools/css-tokenizer@2.1.1):
+    resolution: {integrity: sha512-dTKSIHHWc0zPvcS5cqGP+/TPFUJB0ekJ9dGKvMAFoNuBFhDPBt9OMGNZiIA5vTiNdGHHBeScYPXIGBMnVOahsA==}
+    engines: {node: ^14 || ^16 || >=18}
+    peerDependencies:
+      '@csstools/css-tokenizer': ^2.1.1
+    dependencies:
+      '@csstools/css-tokenizer': 2.1.1
+    dev: true
+
+  /@csstools/css-tokenizer@2.1.1:
+    resolution: {integrity: sha512-GbrTj2Z8MCTUv+52GE0RbFGM527xuXZ0Xa5g0Z+YN573uveS4G0qi6WNOMyz3yrFM/jaILTTwJ0+umx81EzqfA==}
+    engines: {node: ^14 || ^16 || >=18}
+    dev: true
+
+  /@csstools/media-query-list-parser@2.1.2(@csstools/css-parser-algorithms@2.3.0)(@csstools/css-tokenizer@2.1.1):
+    resolution: {integrity: sha512-M8cFGGwl866o6++vIY7j1AKuq9v57cf+dGepScwCcbut9ypJNr4Cj+LLTWligYUZ0uyhEoJDKt5lvyBfh2L3ZQ==}
+    engines: {node: ^14 || ^16 || >=18}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^2.3.0
+      '@csstools/css-tokenizer': ^2.1.1
+    dependencies:
+      '@csstools/css-parser-algorithms': 2.3.0(@csstools/css-tokenizer@2.1.1)
+      '@csstools/css-tokenizer': 2.1.1
+    dev: true
+
   /@csstools/postcss-progressive-custom-properties@1.3.0(postcss@8.4.5):
     resolution: {integrity: sha512-ASA9W1aIy5ygskZYuWams4BzafD12ULvSypmaLJT2jvQ8G0M3I8PRQhC0h7mG0Z3LI05+agZjqSR9+K9yaQQjA==}
     engines: {node: ^12 || ^14 || >=16}
@@ -5191,6 +5231,15 @@ packages:
       postcss-selector-parser: 6.0.13
     dev: true
 
+  /@csstools/selector-specificity@3.0.0(postcss-selector-parser@6.0.13):
+    resolution: {integrity: sha512-hBI9tfBtuPIi885ZsZ32IMEU/5nlZH/KOVYJCOh7gyMxaVLGmLedYqFN6Ui1LXkI8JlC8IsuC0rF0btcRZKd5g==}
+    engines: {node: ^14 || ^16 || >=18}
+    peerDependencies:
+      postcss-selector-parser: ^6.0.13
+    dependencies:
+      postcss-selector-parser: 6.0.13
+    dev: true
+
   /@cypress/request@2.88.11:
     resolution: {integrity: sha512-M83/wfQ1EkspjkE2lNWNV5ui2Cv7UCv1swW1DqljahbzLVWltcsexQh8jYtuS/vzFXP+HySntGM83ZXA9fn17w==}
     engines: {node: '>= 6'}
@@ -8280,6 +8329,10 @@ packages:
   /balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
+  /balanced-match@2.0.0:
+    resolution: {integrity: sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==}
+    dev: true
+
   /base64-js@1.3.1:
     resolution: {integrity: sha512-mLQ4i2QO1ytvGWFWmcngKO//JXAQueZvwEKtjgQFM4jIK0kU+ytMfplL8j+n5mspOfjHwoAg+9yhb7BwAHm36g==}
     dev: true
@@ -8724,6 +8777,16 @@ packages:
       quick-lru: 4.0.1
     dev: true
 
+  /camelcase-keys@7.0.2:
+    resolution: {integrity: sha512-Rjs1H+A9R+Ig+4E/9oyB66UC5Mj9Xq3N//vcLf2WzgdTi/3gUu3Z9KoqmlrEG4VuuLK8wJHofxzdQXz/knhiYg==}
+    engines: {node: '>=12'}
+    dependencies:
+      camelcase: 6.3.0
+      map-obj: 4.3.0
+      quick-lru: 5.1.1
+      type-fest: 1.4.0
+    dev: true
+
   /camelcase@5.3.1:
     resolution: {integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==}
     engines: {node: '>=6'}
@@ -9077,6 +9140,10 @@ packages:
       color-string: 1.9.1
     dev: true
 
+  /colord@2.9.3:
+    resolution: {integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==}
+    dev: true
+
   /colorette@2.0.20:
     resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
     dev: true
@@ -9505,6 +9572,16 @@ packages:
       parse-json: 5.2.0
       path-type: 4.0.0
 
+  /cosmiconfig@8.2.0:
+    resolution: {integrity: sha512-3rTMnFJA1tCOPwRxtgF4wd7Ab2qvDbL8jX+3smjIbS4HlZBagTlpERbdN7iAbWlrfxE3M8c27kTwTawQ7st+OQ==}
+    engines: {node: '>=14'}
+    dependencies:
+      import-fresh: 3.3.0
+      js-yaml: 4.1.0
+      parse-json: 5.2.0
+      path-type: 4.0.0
+    dev: true
+
   /cpu-features@0.0.8:
     resolution: {integrity: sha512-BbHBvtYhUhksqTjr6bhNOjGgMnhwhGTQmOoZGD+K7BCaQDCuZl/Ve1ZxUSMRwVC4D/rkCPQ2MAIeYzrWyK7eEg==}
     engines: {node: '>=10.0.0'}
@@ -9525,7 +9602,7 @@ packages:
       css-select: 4.3.0
       parse5: 6.0.1
       parse5-htmlparser2-tree-adapter: 6.0.1
-      postcss: 8.4.5
+      postcss: 8.4.26
       pretty-bytes: 5.6.0
     dev: true
 
@@ -9572,6 +9649,11 @@ packages:
       postcss-selector-parser: 6.0.13
     dev: true
 
+  /css-functions-list@3.2.0:
+    resolution: {integrity: sha512-d/jBMPyYybkkLVypgtGv12R+pIFw4/f/IHtCTxWpZc8ofTYOPigIgmA6vu5rMHartZC+WuXhBUHfnyNUIQSYrg==}
+    engines: {node: '>=12.22'}
+    dev: true
+
   /css-has-pseudo@3.0.4(postcss@8.4.5):
     resolution: {integrity: sha512-Vse0xpR1K9MNlp2j5w1pgWIJtm1a8qS0JwS9goFYcImjlHEmywP9VUF05aGBXzGpDJF86QXk4L0ypBmwPhGArw==}
     engines: {node: ^12 || ^14 || >=16}
@@ -9589,12 +9671,12 @@ packages:
     peerDependencies:
       webpack: ^5.0.0
     dependencies:
-      icss-utils: 5.1.0(postcss@8.4.5)
-      postcss: 8.4.5
-      postcss-modules-extract-imports: 3.0.0(postcss@8.4.5)
-      postcss-modules-local-by-default: 4.0.3(postcss@8.4.5)
-      postcss-modules-scope: 3.0.0(postcss@8.4.5)
-      postcss-modules-values: 4.0.0(postcss@8.4.5)
+      icss-utils: 5.1.0(postcss@8.4.26)
+      postcss: 8.4.26
+      postcss-modules-extract-imports: 3.0.0(postcss@8.4.26)
+      postcss-modules-local-by-default: 4.0.3(postcss@8.4.26)
+      postcss-modules-scope: 3.0.0(postcss@8.4.26)
+      postcss-modules-values: 4.0.0(postcss@8.4.26)
       postcss-value-parser: 4.2.0
       semver: 7.3.8
       webpack: 5.76.1(esbuild@0.14.22)
@@ -9630,6 +9712,14 @@ packages:
       nth-check: 2.1.1
     dev: true
 
+  /css-tree@2.3.1:
+    resolution: {integrity: sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
+    dependencies:
+      mdn-data: 2.0.30
+      source-map-js: 1.0.2
+    dev: true
+
   /css-what@6.1.0:
     resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==}
     engines: {node: '>= 6'}
@@ -9868,6 +9958,11 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
+  /decamelize@5.0.1:
+    resolution: {integrity: sha512-VfxadyCECXgQlkoEAjeghAr5gY3Hf+IKjKb+X8tGVDtveCjN+USwprd2q3QXBR9T1+x2DG0XZF5/w+7HAtSaXA==}
+    engines: {node: '>=10'}
+    dev: true
+
   /decamelize@6.0.0:
     resolution: {integrity: sha512-Fv96DCsdOgB6mdGl67MT5JaTNKRzrzill5OH5s8bjYJXVlcXyPYGyPsUkWyGV5p1TXI5esYIYMMeDJL0hEIwaA==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -11331,6 +11426,11 @@ packages:
     resolution: {integrity: sha512-W+KJc2dmILlPplD/H4K9l9LcAHAfPtP6BY84uVLXQ6Evcz9Lcg33Y2z1IVblT6xdY54PXYVHEv+0Wpq8Io6zkA==}
     dev: true
 
+  /fastest-levenshtein@1.0.16:
+    resolution: {integrity: sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==}
+    engines: {node: '>= 4.9.1'}
+    dev: true
+
   /fastq@1.15.0:
     resolution: {integrity: sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==}
     dependencies:
@@ -11952,6 +12052,22 @@ packages:
       ini: 2.0.0
     dev: true
 
+  /global-modules@2.0.0:
+    resolution: {integrity: sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==}
+    engines: {node: '>=6'}
+    dependencies:
+      global-prefix: 3.0.0
+    dev: true
+
+  /global-prefix@3.0.0:
+    resolution: {integrity: sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==}
+    engines: {node: '>=6'}
+    dependencies:
+      ini: 1.3.8
+      kind-of: 6.0.3
+      which: 1.3.1
+    dev: true
+
   /globals@11.12.0:
     resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
     engines: {node: '>=4'}
@@ -12005,6 +12121,10 @@ packages:
       pinkie-promise: 2.0.1
     dev: true
 
+  /globjoin@0.1.4:
+    resolution: {integrity: sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==}
+    dev: true
+
   /gopd@1.0.1:
     resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==}
     dependencies:
@@ -12214,6 +12334,11 @@ packages:
     resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}
     dev: true
 
+  /html-tags@3.3.1:
+    resolution: {integrity: sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==}
+    engines: {node: '>=8'}
+    dev: true
+
   /htmlparser2@8.0.2:
     resolution: {integrity: sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==}
     dependencies:
@@ -12450,13 +12575,13 @@ packages:
     dependencies:
       safer-buffer: 2.1.2
 
-  /icss-utils@5.1.0(postcss@8.4.5):
+  /icss-utils@5.1.0(postcss@8.4.26):
     resolution: {integrity: sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==}
     engines: {node: ^10 || ^12 || >= 14}
     peerDependencies:
       postcss: ^8.1.0
     dependencies:
-      postcss: 8.4.5
+      postcss: 8.4.26
     dev: true
 
   /ieee754@1.2.1:
@@ -12500,6 +12625,11 @@ packages:
       parent-module: 1.0.1
       resolve-from: 4.0.0
 
+  /import-lazy@4.0.0:
+    resolution: {integrity: sha512-rKtvo6a868b5Hu3heneU+L4yEQ4jYKLtjpnPeUdK7h0yzXGmyBTypknlkCvHFBqfX9YlorEiMM6Dnq/5atfHkw==}
+    engines: {node: '>=8'}
+    dev: true
+
   /imurmurhash@0.1.4:
     resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
     engines: {node: '>=0.8.19'}
@@ -12508,6 +12638,11 @@ packages:
     resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
     engines: {node: '>=8'}
 
+  /indent-string@5.0.0:
+    resolution: {integrity: sha512-m6FAo/spmsW2Ab2fU35JTYwtOKa2yAwXSwgjSv1TJzh4Mh7mC3lzAOVLBprb72XsTrgkEIsl7YrFNAiDiRhIGg==}
+    engines: {node: '>=12'}
+    dev: true
+
   /infer-owner@1.0.4:
     resolution: {integrity: sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A==}
     dev: true
@@ -12876,6 +13011,11 @@ packages:
       isobject: 3.0.1
     dev: true
 
+  /is-plain-object@5.0.0:
+    resolution: {integrity: sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
   /is-promise@4.0.0:
     resolution: {integrity: sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==}
     dev: false
@@ -13437,6 +13577,10 @@ packages:
     engines: {node: '>= 8'}
     dev: true
 
+  /known-css-properties@0.27.0:
+    resolution: {integrity: sha512-uMCj6+hZYDoffuvAJjFAPz56E9uoowFHmTkqRtRq5WyC5Q6Cu/fTZKNQpX/RbzChBYLLl3lo8CjFZBAZXq9qFg==}
+    dev: true
+
   /lazy-ass@1.6.0:
     resolution: {integrity: sha512-cc8oEVoctTvsFZ/Oje/kGnHbpWHYBe8IAJe4C0QNc3t8uM/0Y8+erSz/7Y1ALuXTEZTMvxXwO6YbX1ey3ujiZw==}
     engines: {node: '> 0.8'}
@@ -13753,6 +13897,10 @@ packages:
     resolution: {integrity: sha512-+WKqsK294HMSc2jEbNgpHpd0JfIBhp7rEV4aqXWqFr6AlXov+SlcgB1Fv01y2kGe3Gc8nMW7VA0SrGuSkRfIEg==}
     dev: true
 
+  /lodash.truncate@4.4.2:
+    resolution: {integrity: sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==}
+    dev: true
+
   /lodash@4.17.21:
     resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
 
@@ -13989,6 +14137,10 @@ packages:
     resolution: {integrity: sha512-/C4LI/s8o1lz1M4AUA0qVQ3zqYGe3eF30ftRrtT48OY3pGOmScJFZo0TX0CGhoRNF2D59PNrpoccAyBBmtXoig==}
     dev: false
 
+  /mathml-tag-names@2.1.3:
+    resolution: {integrity: sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==}
+    dev: true
+
   /md5@2.3.0:
     resolution: {integrity: sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==}
     dependencies:
@@ -13997,6 +14149,10 @@ packages:
       is-buffer: 1.1.6
     dev: true
 
+  /mdn-data@2.0.30:
+    resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
+    dev: true
+
   /media-typer@0.3.0:
     resolution: {integrity: sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==}
     engines: {node: '>= 0.6'}
@@ -14008,6 +14164,24 @@ packages:
       fs-monkey: 1.0.4
     dev: true
 
+  /meow@10.1.5:
+    resolution: {integrity: sha512-/d+PQ4GKmGvM9Bee/DPa8z3mXs/pkvJE2KEThngVNOqtmljC6K7NMPxtc2JeZYTmpWb9k/TmxjeL18ez3h7vCw==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    dependencies:
+      '@types/minimist': 1.2.2
+      camelcase-keys: 7.0.2
+      decamelize: 5.0.1
+      decamelize-keys: 1.1.1
+      hard-rejection: 2.1.0
+      minimist-options: 4.1.0
+      normalize-package-data: 3.0.3
+      read-pkg-up: 8.0.0
+      redent: 4.0.0
+      trim-newlines: 4.1.1
+      type-fest: 1.4.0
+      yargs-parser: 20.2.9
+    dev: true
+
   /meow@6.1.1:
     resolution: {integrity: sha512-3YffViIt2QWgTy6Pale5QpopX/IvU3LPL03jOTqp6pGj3VjesdO/U8CuHMKpnQr4shCNCM5fd5XFFvIIl6JBHg==}
     engines: {node: '>=8'}
@@ -14830,7 +15004,7 @@ packages:
       '@yarnpkg/parsers': 3.0.0-rc.48.1
       '@zkochan/js-yaml': 0.0.6
       axios: 1.4.0
-      chalk: 4.1.0
+      chalk: 4.1.2
       cli-cursor: 3.1.0
       cli-spinners: 2.6.1
       cliui: 7.0.4
@@ -15710,45 +15884,49 @@ packages:
       postcss: 8.4.5
     dev: true
 
-  /postcss-modules-extract-imports@3.0.0(postcss@8.4.5):
+  /postcss-media-query-parser@0.2.3:
+    resolution: {integrity: sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==}
+    dev: true
+
+  /postcss-modules-extract-imports@3.0.0(postcss@8.4.26):
     resolution: {integrity: sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==}
     engines: {node: ^10 || ^12 || >= 14}
     peerDependencies:
       postcss: ^8.1.0
     dependencies:
-      postcss: 8.4.5
+      postcss: 8.4.26
     dev: true
 
-  /postcss-modules-local-by-default@4.0.3(postcss@8.4.5):
+  /postcss-modules-local-by-default@4.0.3(postcss@8.4.26):
     resolution: {integrity: sha512-2/u2zraspoACtrbFRnTijMiQtb4GW4BvatjaG/bCjYQo8kLTdevCUlwuBHx2sCnSyrI3x3qj4ZK1j5LQBgzmwA==}
     engines: {node: ^10 || ^12 || >= 14}
     peerDependencies:
       postcss: ^8.1.0
     dependencies:
-      icss-utils: 5.1.0(postcss@8.4.5)
-      postcss: 8.4.5
+      icss-utils: 5.1.0(postcss@8.4.26)
+      postcss: 8.4.26
       postcss-selector-parser: 6.0.13
       postcss-value-parser: 4.2.0
     dev: true
 
-  /postcss-modules-scope@3.0.0(postcss@8.4.5):
+  /postcss-modules-scope@3.0.0(postcss@8.4.26):
     resolution: {integrity: sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==}
     engines: {node: ^10 || ^12 || >= 14}
     peerDependencies:
       postcss: ^8.1.0
     dependencies:
-      postcss: 8.4.5
+      postcss: 8.4.26
       postcss-selector-parser: 6.0.13
     dev: true
 
-  /postcss-modules-values@4.0.0(postcss@8.4.5):
+  /postcss-modules-values@4.0.0(postcss@8.4.26):
     resolution: {integrity: sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==}
     engines: {node: ^10 || ^12 || >= 14}
     peerDependencies:
       postcss: ^8.1.0
     dependencies:
-      icss-utils: 5.1.0(postcss@8.4.5)
-      postcss: 8.4.5
+      icss-utils: 5.1.0(postcss@8.4.26)
+      postcss: 8.4.26
     dev: true
 
   /postcss-nesting@10.2.0(postcss@8.4.5):
@@ -15850,6 +16028,28 @@ packages:
       postcss: 8.4.5
     dev: true
 
+  /postcss-resolve-nested-selector@0.1.1:
+    resolution: {integrity: sha512-HvExULSwLqHLgUy1rl3ANIqCsvMS0WHss2UOsXhXnQaZ9VCc2oBvIpXrl00IUFT5ZDITME0o6oiXeiHr2SAIfw==}
+    dev: true
+
+  /postcss-safe-parser@6.0.0(postcss@8.4.26):
+    resolution: {integrity: sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==}
+    engines: {node: '>=12.0'}
+    peerDependencies:
+      postcss: ^8.3.3
+    dependencies:
+      postcss: 8.4.26
+    dev: true
+
+  /postcss-scss@4.0.6(postcss@8.4.26):
+    resolution: {integrity: sha512-rLDPhJY4z/i4nVFZ27j9GqLxj1pwxE80eAzUNRMXtcpipFYIeowerzBgG3yJhMtObGEXidtIgbUpQ3eLDsf5OQ==}
+    engines: {node: '>=12.0'}
+    peerDependencies:
+      postcss: ^8.4.19
+    dependencies:
+      postcss: 8.4.26
+    dev: true
+
   /postcss-selector-not@5.0.0(postcss@8.4.5):
     resolution: {integrity: sha512-/2K3A4TCP9orP4TNS7u3tGdRFVKqz/E6pX3aGnriPG0jU78of8wsUcqE4QAhWEU0d+WnMSF93Ah3F//vUtK+iQ==}
     peerDependencies:
@@ -15867,10 +16067,27 @@ packages:
       util-deprecate: 1.0.2
     dev: true
 
+  /postcss-sorting@8.0.2(postcss@8.4.26):
+    resolution: {integrity: sha512-M9dkSrmU00t/jK7rF6BZSZauA5MAaBW4i5EnJXspMwt4iqTh/L9j6fgMnbElEOfyRyfLfVbIHj/R52zHzAPe1Q==}
+    peerDependencies:
+      postcss: ^8.4.20
+    dependencies:
+      postcss: 8.4.26
+    dev: true
+
   /postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
     dev: true
 
+  /postcss@8.4.26:
+    resolution: {integrity: sha512-jrXHFF8iTloAenySjM/ob3gSj7pCu0Ji49hnjqzsgSRa50hkWCKD0HQ+gMNJkW38jBI68MpAAg7ZWwHwX8NMMw==}
+    engines: {node: ^10 || ^12 || >=14}
+    dependencies:
+      nanoid: 3.3.6
+      picocolors: 1.0.0
+      source-map-js: 1.0.2
+    dev: true
+
   /postcss@8.4.5:
     resolution: {integrity: sha512-jBDboWM8qpaqwkMwItqTQTiFikhs/67OYVvblFFTM7MrZjt6yMKd6r2kgXizEbTTljacm4NldIlZnhbjr84QYg==}
     engines: {node: ^10 || ^12 || >=14}
@@ -16128,7 +16345,6 @@ packages:
   /quick-lru@5.1.1:
     resolution: {integrity: sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==}
     engines: {node: '>=10'}
-    dev: false
 
   /quote-stream@1.0.2:
     resolution: {integrity: sha512-kKr2uQ2AokadPjvTyKJQad9xELbZwYzWlNfI3Uz2j/ib5u6H9lDP7fUUR//rMycd0gv4Z5P1qXMfXR8YpIxrjQ==}
@@ -16244,6 +16460,15 @@ packages:
       read-pkg: 5.2.0
       type-fest: 0.8.1
 
+  /read-pkg-up@8.0.0:
+    resolution: {integrity: sha512-snVCqPczksT0HS2EC+SxUndvSzn6LRCwpfSvLrIfR5BKDQQZMaI6jPRC9dYvYFDRAuFEAnkwww8kBBNE/3VvzQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      find-up: 5.0.0
+      read-pkg: 6.0.0
+      type-fest: 1.4.0
+    dev: true
+
   /read-pkg@3.0.0:
     resolution: {integrity: sha512-BLq/cCO9two+lBgiTYNqD6GdtK8s4NpaWrl6/rCO9w0TUS8oJl7cmToOZfRYllKTISY6nt1U7jQ53brmKqY6BA==}
     engines: {node: '>=4'}
@@ -16262,6 +16487,16 @@ packages:
       parse-json: 5.2.0
       type-fest: 0.6.0
 
+  /read-pkg@6.0.0:
+    resolution: {integrity: sha512-X1Fu3dPuk/8ZLsMhEj5f4wFAF0DWoK7qhGJvgaijocXxBmSToKfbFtqbxMO7bVjNA1dmE5huAzjXj/ey86iw9Q==}
+    engines: {node: '>=12'}
+    dependencies:
+      '@types/normalize-package-data': 2.4.1
+      normalize-package-data: 3.0.3
+      parse-json: 5.2.0
+      type-fest: 1.4.0
+    dev: true
+
   /read-yaml-file@1.1.0:
     resolution: {integrity: sha512-VIMnQi/Z4HT2Fxuwg5KrY174U1VdUIASQVWXXyqtNRtxSr9IYkn1rsI6Tb6HsrHCmB7gVpNwX6JxPTHcH6IoTA==}
     engines: {node: '>=6'}
@@ -16348,6 +16583,14 @@ packages:
       strip-indent: 3.0.0
     dev: true
 
+  /redent@4.0.0:
+    resolution: {integrity: sha512-tYkDkVVtYkSVhuQ4zBgfvciymHaeuel+zFKXShfDnFP5SyVEP7qo70Rf1jTOTCx3vGNAbnEi/xFkcfQVMIBWag==}
+    engines: {node: '>=12'}
+    dependencies:
+      indent-string: 5.0.0
+      strip-indent: 4.0.0
+    dev: true
+
   /reflect-metadata@0.1.13:
     resolution: {integrity: sha512-Ts1Y/anZELhSsjMcU605fU9RE4Oi3p5ORujwbIKXfWa+0Zxs510Qrmrce5/Jowq3cHSZSJqBjypxmHarc+vEWg==}
     dev: true
@@ -16493,7 +16736,7 @@ packages:
       adjust-sourcemap-loader: 4.0.0
       convert-source-map: 1.9.0
       loader-utils: 2.0.4
-      postcss: 8.4.5
+      postcss: 8.4.26
       source-map: 0.6.1
     dev: true
 
@@ -17582,6 +17825,13 @@ packages:
     dependencies:
       min-indent: 1.0.1
 
+  /strip-indent@4.0.0:
+    resolution: {integrity: sha512-mnVSV2l+Zv6BLpSD/8V87CW/y9EmmbYzGCIavsnsI6/nwn26DwffM/yztm30Z/I2DY9wdS3vXVCMnHDgZaVNoA==}
+    engines: {node: '>=12'}
+    dependencies:
+      min-indent: 1.0.1
+    dev: true
+
   /strip-json-comments@2.0.1:
     resolution: {integrity: sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==}
     engines: {node: '>=0.10.0'}
@@ -17601,6 +17851,148 @@ packages:
       through: 2.3.8
     dev: true
 
+  /style-search@0.1.0:
+    resolution: {integrity: sha512-Dj1Okke1C3uKKwQcetra4jSuk0DqbzbYtXipzFlFMZtowbF1x7BKJwB9AayVMyFARvU8EDrZdcax4At/452cAg==}
+    dev: true
+
+  /stylelint-config-clean-order@5.0.1(stylelint@15.10.1):
+    resolution: {integrity: sha512-zKLXjTgrkZqiml0VXv7Syl11XLpzRErW+1/qSEjIQ+aHAFjGuRq6Uwal9OzxtDHvpoIhlc4wCYjougWDuLN5aA==}
+    peerDependencies:
+      stylelint: '>=14'
+    dependencies:
+      stylelint: 15.10.1
+      stylelint-order: 6.0.3(stylelint@15.10.1)
+    dev: true
+
+  /stylelint-config-prettier-scss@1.0.0(stylelint@15.10.1):
+    resolution: {integrity: sha512-Gr2qLiyvJGKeDk0E/+awNTrZB/UtNVPLqCDOr07na/sLekZwm26Br6yYIeBYz3ulsEcQgs5j+2IIMXCC+wsaQA==}
+    engines: {node: 14.* || 16.* || >= 18}
+    hasBin: true
+    peerDependencies:
+      stylelint: '>=15.0.0'
+    dependencies:
+      stylelint: 15.10.1
+    dev: true
+
+  /stylelint-config-recommended-scss@12.0.0(postcss@8.4.26)(stylelint@15.10.1):
+    resolution: {integrity: sha512-5Bb2mlGy6WLa30oNeKpZvavv2lowJUsUJO25+OA68GFTemlwd1zbFsL7q0bReKipOSU3sG47hKneZ6Nd+ctrFA==}
+    peerDependencies:
+      postcss: ^8.3.3
+      stylelint: ^15.5.0
+    peerDependenciesMeta:
+      postcss:
+        optional: true
+    dependencies:
+      postcss: 8.4.26
+      postcss-scss: 4.0.6(postcss@8.4.26)
+      stylelint: 15.10.1
+      stylelint-config-recommended: 12.0.0(stylelint@15.10.1)
+      stylelint-scss: 5.0.1(stylelint@15.10.1)
+    dev: true
+
+  /stylelint-config-recommended@12.0.0(stylelint@15.10.1):
+    resolution: {integrity: sha512-x6x8QNARrGO2sG6iURkzqL+Dp+4bJorPMMRNPScdvaUK8PsynriOcMW7AFDKqkWAS5wbue/u8fUT/4ynzcmqdQ==}
+    peerDependencies:
+      stylelint: ^15.5.0
+    dependencies:
+      stylelint: 15.10.1
+    dev: true
+
+  /stylelint-config-standard-scss@10.0.0(postcss@8.4.26)(stylelint@15.10.1):
+    resolution: {integrity: sha512-bChBEo1p3xUVWh/wenJI+josoMk21f2yuLDGzGjmKYcALfl2u3DFltY+n4UHswYiXghqXaA8mRh+bFy/q1hQlg==}
+    peerDependencies:
+      postcss: ^8.3.3
+      stylelint: ^15.5.0
+    peerDependenciesMeta:
+      postcss:
+        optional: true
+    dependencies:
+      postcss: 8.4.26
+      stylelint: 15.10.1
+      stylelint-config-recommended-scss: 12.0.0(postcss@8.4.26)(stylelint@15.10.1)
+      stylelint-config-standard: 33.0.0(stylelint@15.10.1)
+    dev: true
+
+  /stylelint-config-standard@33.0.0(stylelint@15.10.1):
+    resolution: {integrity: sha512-eyxnLWoXImUn77+ODIuW9qXBDNM+ALN68L3wT1lN2oNspZ7D9NVGlNHb2QCUn4xDug6VZLsh0tF8NyoYzkgTzg==}
+    peerDependencies:
+      stylelint: ^15.5.0
+    dependencies:
+      stylelint: 15.10.1
+      stylelint-config-recommended: 12.0.0(stylelint@15.10.1)
+    dev: true
+
+  /stylelint-order@6.0.3(stylelint@15.10.1):
+    resolution: {integrity: sha512-1j1lOb4EU/6w49qZeT2SQVJXm0Ht+Qnq9GMfUa3pMwoyojIWfuA+JUDmoR97Bht1RLn4ei0xtLGy87M7d29B1w==}
+    peerDependencies:
+      stylelint: ^14.0.0 || ^15.0.0
+    dependencies:
+      postcss: 8.4.26
+      postcss-sorting: 8.0.2(postcss@8.4.26)
+      stylelint: 15.10.1
+    dev: true
+
+  /stylelint-scss@5.0.1(stylelint@15.10.1):
+    resolution: {integrity: sha512-n87iCRZrr2J7//I/QFsDXxFLnHKw633U4qvWZ+mOW6KDAp/HLj06H+6+f9zOuTYy+MdGdTuCSDROCpQIhw5fvQ==}
+    peerDependencies:
+      stylelint: ^14.5.1 || ^15.0.0
+    dependencies:
+      postcss-media-query-parser: 0.2.3
+      postcss-resolve-nested-selector: 0.1.1
+      postcss-selector-parser: 6.0.13
+      postcss-value-parser: 4.2.0
+      stylelint: 15.10.1
+    dev: true
+
+  /stylelint@15.10.1:
+    resolution: {integrity: sha512-CYkzYrCFfA/gnOR+u9kJ1PpzwG10WLVnoxHDuBA/JiwGqdM9+yx9+ou6SE/y9YHtfv1mcLo06fdadHTOx4gBZQ==}
+    engines: {node: ^14.13.1 || >=16.0.0}
+    hasBin: true
+    dependencies:
+      '@csstools/css-parser-algorithms': 2.3.0(@csstools/css-tokenizer@2.1.1)
+      '@csstools/css-tokenizer': 2.1.1
+      '@csstools/media-query-list-parser': 2.1.2(@csstools/css-parser-algorithms@2.3.0)(@csstools/css-tokenizer@2.1.1)
+      '@csstools/selector-specificity': 3.0.0(postcss-selector-parser@6.0.13)
+      balanced-match: 2.0.0
+      colord: 2.9.3
+      cosmiconfig: 8.2.0
+      css-functions-list: 3.2.0
+      css-tree: 2.3.1
+      debug: 4.3.4(supports-color@8.1.1)
+      fast-glob: 3.3.0
+      fastest-levenshtein: 1.0.16
+      file-entry-cache: 6.0.1
+      global-modules: 2.0.0
+      globby: 11.1.0
+      globjoin: 0.1.4
+      html-tags: 3.3.1
+      ignore: 5.2.4
+      import-lazy: 4.0.0
+      imurmurhash: 0.1.4
+      is-plain-object: 5.0.0
+      known-css-properties: 0.27.0
+      mathml-tag-names: 2.1.3
+      meow: 10.1.5
+      micromatch: 4.0.5
+      normalize-path: 3.0.0
+      picocolors: 1.0.0
+      postcss: 8.4.26
+      postcss-resolve-nested-selector: 0.1.1
+      postcss-safe-parser: 6.0.0(postcss@8.4.26)
+      postcss-selector-parser: 6.0.13
+      postcss-value-parser: 4.2.0
+      resolve-from: 5.0.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      style-search: 0.1.0
+      supports-hyperlinks: 3.0.0
+      svg-tags: 1.0.0
+      table: 6.8.1
+      write-file-atomic: 5.0.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /stylus-loader@6.2.0(stylus@0.56.0)(webpack@5.76.1):
     resolution: {integrity: sha512-5dsDc7qVQGRoc6pvCL20eYgRUxepZ9FpeK28XhdXaIPP6kXr6nI1zAAKFQgP5OBkOfKaURp4WUpJzspg1f01Gg==}
     engines: {node: '>= 12.13.0'}
@@ -17731,6 +18123,14 @@ packages:
     dependencies:
       has-flag: 4.0.0
 
+  /supports-hyperlinks@3.0.0:
+    resolution: {integrity: sha512-QBDPHyPQDRTy9ku4URNGY5Lah8PAaXs6tAAwp55sL5WCsSW7GIfdf6W5ixfziW+t7wh3GVvHyHHyQ1ESsoRvaA==}
+    engines: {node: '>=14.18'}
+    dependencies:
+      has-flag: 4.0.0
+      supports-color: 7.2.0
+    dev: true
+
   /supports-preserve-symlinks-flag@1.0.0:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
@@ -17768,6 +18168,10 @@ packages:
       url-parse-as-address: 1.0.0
     dev: true
 
+  /svg-tags@1.0.0:
+    resolution: {integrity: sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==}
+    dev: true
+
   /swiper@8.4.5:
     resolution: {integrity: sha512-zveyEFBBv4q1sVkbJHnuH4xCtarKieavJ4SxP0QEHvdpPLJRuD7j/Xg38IVVLbp7Db6qrPsLUePvxohYx39Agw==}
     engines: {node: '>= 4.7.0'}
@@ -17800,6 +18204,17 @@ packages:
       ts-toolbelt: 9.6.0
     dev: true
 
+  /table@6.8.1:
+    resolution: {integrity: sha512-Y4X9zqrCftUhMeH2EptSSERdVKt/nEdijTOacGD/97EKjhQ/Qs8RTlEGABSJNNN8lac9kheH+af7yAkEWlgneA==}
+    engines: {node: '>=10.0.0'}
+    dependencies:
+      ajv: 8.12.0
+      lodash.truncate: 4.4.2
+      slice-ansi: 4.0.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+    dev: true
+
   /tapable@2.2.1:
     resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
     engines: {node: '>=6'}
@@ -18072,6 +18487,11 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /trim-newlines@4.1.1:
+    resolution: {integrity: sha512-jRKj0n0jXWo6kh62nA5TEh3+4igKDXLvzBJcPpiizP7oOolUrYIxmVBG9TOtHYFHoddUk6YvAkGeGoSVTXfQXQ==}
+    engines: {node: '>=12'}
+    dev: true
+
   /ts-interface-checker@0.1.13:
     resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
     dev: true
@@ -18411,6 +18831,11 @@ packages:
     resolution: {integrity: sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==}
     engines: {node: '>=8'}
 
+  /type-fest@1.4.0:
+    resolution: {integrity: sha512-yGSza74xk0UG8k+pLh5oeoYirvIiWo5t0/o3zHHAO2tRDiZcxWP7fywNlXhqb6/r6sWvwi+RsyQMWhVLe4BVuA==}
+    engines: {node: '>=10'}
+    dev: true
+
   /type-is@1.6.18:
     resolution: {integrity: sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==}
     engines: {node: '>= 0.6'}
@@ -19132,6 +19557,14 @@ packages:
       typedarray-to-buffer: 3.1.5
     dev: true
 
+  /write-file-atomic@5.0.1:
+    resolution: {integrity: sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+    dependencies:
+      imurmurhash: 0.1.4
+      signal-exit: 4.0.2
+    dev: true
+
   /ws@7.5.9:
     resolution: {integrity: sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==}
     engines: {node: '>=8.3.0'}