Responsive design SCSS

.stylelintrc.json

@@ -1,5 +1,5 @@
 {
-  "extends": "stylelint-config-sass-guidelines",
+  "extends": ["stylelint-config-sass-guidelines", "stylelint-config-recess-order"],
   "rules": {
     "order/properties-alphabetical-order": null,
     "max-nesting-depth": 4,

package.json

@@ -62,6 +62,7 @@
     "sass": "^1.29.0",
     "sass-loader": "^10.1.0",
     "semver": "^6.3.0",
+    "swiper": "^8.2.2",
     "uniqid": "^5.3.0",
     "web-vitals": "^1.1.0"
   },
@@ -71,8 +72,10 @@
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^3.4.0",
     "prettier": "^2.5.1",
-    "stylelint": "^14.2.0",
-    "stylelint-config-sass-guidelines": "^9.0.1"
+    "stylelint": "^14.7.1",
+    "stylelint-config-recess-order": "^3.0.0",
+    "stylelint-config-sass-guidelines": "^9.0.1",
+    "stylelint-order": "^5.0.0"
   },
   "metadata": {}
 }

public/config.js

@@ -1 +1 @@
-window.VOCASCAN_CONFIG = JSON.parse(``);
+window.VOCASCAN_CONFIG = JSON.parse("{}");

public/index.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <title>Vocascan Web</title>
     <link rel="icon" href="%PUBLIC_URL%/logo.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#2a2e36" />
     <meta name="description" content="A highly configurable vocabulary trainer" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

src/Components/Button/Button.scss

@@ -2,60 +2,60 @@
 
 .btn {
   display: flex;
+  align-items: center;
+  justify-content: center;
   padding: 10px 14px;
   font-size: 16px;
-  text-transform: none;
   color: $color-white;
-  justify-content: center;
-  align-items: center;
-  border-radius: 15px;
+  text-transform: none;
   border: unset;
+  border-radius: 15px;
   transition: all 0.3s ease-in;
 
   &.btn-default {
     &.btn-primary {
       background-color: $color-primary;
 
       &:hover {
-        background-color: $color-primary-dark;
         cursor: pointer;
+        background-color: $color-primary-dark;
       }
     }
 
     &.btn-primary-light {
       background-color: $color-primary-light;
 
       &:hover {
-        background-color: $color-primary;
         color: $color-white;
         cursor: pointer;
+        background-color: $color-primary;
       }
     }
 
     &.btn-red {
       background-color: $color-red;
 
       &:hover {
-        background-color: $color-red-dark;
         cursor: pointer;
+        background-color: $color-red-dark;
       }
     }
 
     &.btn-green {
       background-color: $color-green;
 
       &:hover {
-        background-color: $color-green-dark;
         cursor: pointer;
+        background-color: $color-green-dark;
       }
     }
 
     &.btn-dark {
       background-color: $color-background-inverse;
 
       &:hover {
-        background-color: $color-alternative;
         cursor: pointer;
+        background-color: $color-alternative;
       }
     }
   }
@@ -68,9 +68,9 @@
       border: 1px solid $color-primary;
 
       &:hover {
-        background-color: $color-primary;
         color: $color-white;
         cursor: pointer;
+        background-color: $color-primary;
       }
     }
 
@@ -79,9 +79,9 @@
       border: 1px solid $color-primary-light;
 
       &:hover {
-        background-color: $color-primary-light;
         color: $color-white;
         cursor: pointer;
+        background-color: $color-primary-light;
       }
     }
 
@@ -90,9 +90,9 @@
       border: 1px solid $color-red;
 
       &:hover {
-        background-color: $color-red;
         color: $color-white;
         cursor: pointer;
+        background-color: $color-red;
       }
     }
 
@@ -101,9 +101,9 @@
       border: 1px solid $color-green;
 
       &:hover {
-        background-color: $color-green;
         color: $color-white;
         cursor: pointer;
+        background-color: $color-green;
       }
     }
   }
@@ -116,18 +116,18 @@
 
       &:hover {
         color: $color-primary-dark;
-        background-color: $color-background-muted;
         cursor: pointer;
+        background-color: $color-background-muted;
       }
     }
 
     &.btn-primary-light {
       color: $color-primary-light;
 
       &:hover {
-        background-color: $color-background-muted;
         color: $color-primary;
         cursor: pointer;
+        background-color: $color-background-muted;
       }
     }
 
@@ -136,8 +136,8 @@
 
       &:hover {
         color: $color-red-dark;
-        background-color: $color-background-muted;
         cursor: pointer;
+        background-color: $color-background-muted;
       }
     }
 
@@ -146,15 +146,15 @@
 
       &:hover {
         color: $color-green-dark;
-        background-color: $color-background-muted;
         cursor: pointer;
+        background-color: $color-background-muted;
       }
     }
   }
 
   &.btn-link {
-    background-color: transparent;
     padding: 0;
+    background-color: transparent;
 
     &.btn-primary {
       color: $color-primary;
@@ -202,8 +202,8 @@
   }
 
   &.btn-disabled {
-    opacity: 0.5;
     pointer-events: none;
+    opacity: 0.5;
   }
 
   &.btn-round {

src/Components/Charts/ProgressBar/ProgressBar.scss

@@ -2,39 +2,39 @@
 
 .progress-bar {
   position: relative;
-  height: 20px;
   width: 100%;
   max-width: 500px;
-  background-color: $color-background-muted;
+  height: 20px;
   margin: 50px 0;
+  background-color: $color-background-muted;
 
   .wrapper {
-    height: 100%;
+    display: flex;
+    width: 0%;
     max-width: 500px;
+    height: 100%;
     background-color: $color-green;
     transition: width 1s ease-in-out;
-    display: flex;
-    width: 0%;
 
     .percentage {
       position: absolute;
+      left: 50%;
+      align-self: center;
       font-size: 13px;
+      font-weight: bold;
       line-height: 13px;
       color: $color-main-text;
-      font-weight: bold;
-      left: 50%;
       transform: translateX(-50%);
-      align-self: center;
     }
   }
 
   .bottom-text {
-    font-size: 13px;
-    line-height: 13px;
-    color: $color-main-text;
     display: flex;
     justify-content: flex-end;
     padding: 5px 0;
+    font-size: 13px;
+    line-height: 13px;
+    color: $color-main-text;
     letter-spacing: 1px;
   }
 }

src/Components/ConfirmDialog/ConfirmDialog.scss

@@ -1,18 +1,18 @@
 @import "../../colors";
 
 .submit-dialog {
-  width: 80%;
-  max-width: 400px;
   display: flex;
   flex-direction: column;
+  width: 80%;
+  max-width: 400px;
 
   .description {
     padding: 20px 0;
   }
 
   .actions {
     display: flex;
-    justify-content: space-between;
     align-items: center;
+    justify-content: space-between;
   }
 }

src/Components/ContributorCard/ContributorCard.scss

@@ -1,40 +1,40 @@
 @import "../../colors";
 
 .card {
+  position: relative;
   display: inline-block;
   width: 130px;
   height: 170px;
   margin: 8px;
-  position: relative;
-  border-radius: 8px;
   overflow: hidden;
+  border-radius: 8px;
 
   img {
     width: 130px;
   }
 
   .backdrop {
-    transition: border-radius 0.125s ease-in-out, top 0.125s ease-in-out;
     position: absolute;
-    bottom: 0;
-    width: 100%;
     top: 130px;
-    background-color: $color-background-inverse;
-    color: #fff;
+    bottom: 0;
     display: flex;
-    justify-content: center;
-    align-items: center;
     flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    color: #fff;
+    background-color: $color-background-inverse;
+    transition: border-radius 0.125s ease-in-out, top 0.125s ease-in-out;
 
     .name {
       font-size: 14px;
     }
 
     .description {
       display: none;
-      color: #bbb;
-      font-size: 12px;
       margin-top: 5px;
+      font-size: 12px;
+      color: #bbb;
     }
   }
 

src/Components/CookieConsentBanner/CookieConsentBanner.scss

@@ -2,34 +2,34 @@
 
 /* stylelint-disable selector-class-pattern */
 .CookieConsent {
-  width: 40%;
-  background: $color-background-inverse;
+  position: absolute;
+  right: 0;
+  left: 0;
+  z-index: 999;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
-  color: $color-main-text-inverse;
-  position: absolute;
-  z-index: 999;
+  width: 40%;
   padding: 15px;
-  left: 0;
-  right: 0;
-  margin-left: auto;
   margin-right: auto;
+  margin-left: auto;
+  color: $color-main-text-inverse;
+  background: $color-background-inverse;
 
   div {
     margin: auto 0;
   }
 
   button {
+    flex: 0 0 auto;
+    padding: 5px 10px;
+    margin-left: 15px;
+    color: $color-main-text-inverse;
+    cursor: pointer;
     background: $color-primary;
     border: 0;
     border-radius: 0;
     box-shadow: none;
-    color: $color-main-text-inverse;
-    cursor: pointer;
-    flex: 0 0 auto;
-    padding: 5px 10px;
-    margin-left: 15px;
   }
 
   .cookie-consent-link {

src/Components/Counter/Counter.scss

@@ -2,12 +2,12 @@
 
 .counter {
   display: inline-block;
-  color: #fff;
   min-width: 7px;
   height: 18px;
   padding: 0 6px;
   font-size: 12px;
   line-height: 18px;
+  color: #fff;
   text-align: center;
   vertical-align: middle;
   border-radius: 9px;