fix(sloths): about project and sloth card button text, add 320px adap…

…tive to main page (#2377)

* feat: update about project text

* feat: add 320px media query for home view

* feat: add small screen media query for memory

* fix(sloths): sloth card button text

* feat(sloths): add width to img in modal in memory gane

* fix(sloths): move inline style to css class

tools/sloths/src/assets/locales/en.json

@@ -15,7 +15,7 @@
     "title": "Home",
     "more": "Read more",
     "about": {
-      "project": "Our project is a depository of sloths. View all existing stickers, download the necessary ones or chill a bit - why not? Feel a sloth!",
+      "project": "Our project is a depository of sloths. View all existing stickers, download the necessary ones or chill a bit - why not? Feel like a sloth a bit!",
       "team": "We are a team of beginner frontend developers. We welcome you to our project, which we completed as part of the final task of the JS/FE2022Q1 Rolling Scopes School course!"
     }
   },
@@ -132,7 +132,7 @@
   "btn": {
     "close": "Close",
     "reset": "Reset filters",
-    "show": "Detail info",
+    "show": "Detailed info",
     "yes": "Yes",
     "no": "No",
     "copy": "Copy",

tools/sloths/src/components/home/HomeAbout.vue

@@ -147,4 +147,10 @@ export default defineComponent({
     grid-area: A;
   }
 }
+
+@media (max-width: 420px) {
+  .home__slider {
+    height: 14rem;
+  }
+}
 </style>

tools/sloths/src/components/home/HomeCatalog.vue

@@ -96,4 +96,11 @@ export default defineComponent({
     opacity: 1;
   }
 }
+
+@media (max-width: 420px) {
+  .home-catalog__wrapper {
+    width: 30rem;
+    height: 36rem;
+  }
+}
 </style>

tools/sloths/src/components/memory/GameField.vue

@@ -35,7 +35,7 @@
       <template v-slot:header> {{ $t('memory.congrats') }} </template>
 
       <template v-slot:body>
-        <img :src="cardWinner" alt="winner" />
+        <img :src="cardWinner" alt="winner" class="modal-body__img" />
         <p>{{ $t('memory.win') }}</p>
         <p>{{ steps }} {{ $t('memory.steps', steps) }}</p>
         <p>{{ gameTime / millisecondsInSecond }} {{ $t('memory.time') }}</p>
@@ -469,4 +469,8 @@ export default defineComponent({
     box-shadow: 0 0 5px 5px rgba(255, 0, 0, 0);
   }
 }
+
+.modal-body__img {
+  width: 100%;
+}
 </style>

tools/sloths/src/views/Home.vue

@@ -95,4 +95,16 @@ export default defineComponent({
     gap: 1.5rem;
   }
 }
+
+@media (max-width: 420px) {
+  .home {
+    grid-template-columns: 30rem;
+    gap: 1rem;
+  }
+
+  .home__menu {
+    grid-template-columns: repeat(2, 15rem);
+    gap: 1rem;
+  }
+}
 </style>

tools/sloths/src/views/Memory.vue

@@ -157,4 +157,15 @@ export default defineComponent({
     height: 10rem;
   }
 }
+
+@media (max-width: 360px) {
+  .memory__aside {
+    width: 10rem;
+  }
+
+  .memory__btn img {
+    width: 10rem;
+    height: 10rem;
+  }
+}
 </style>