Merge pull request #18 from mudmykola/feature/CRJ_optimization

style(Home): changing the size of the container and the fixtures of …
mudmykola · Aug 31, 2024 · 167043e · 167043e
2 parents 69a83d3 + 713a112
commit 167043e
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 85 deletions.
diff --git a/.firebase/hosting.ZGlzdA.cache b/.firebase/hosting.ZGlzdA.cache
@@ -1,13 +1,13 @@
-index.html,1725095498631,481aa9bd7965d9fdb36605e7d32d92782281aaa219b2eb4c3d89aa5cf7cbd32f
-assets/fa-v4compatibility-BX8XWJtE.woff2,1725095498631,8945f97a3a1bbd891397f2f7900844dbf1808e9e3924900a31d4acafb11a9db2
-data/cartoons.json,1725095498252,f9e2b8b20dfdbe644aff3fb12576a11a60c8d965775117503f85d2c4957a2d78
-assets/fa-v4compatibility-B9MWI-E6.ttf,1725095498631,d5040b176e185deb1562d78b306cffe3336502f43ad77337eb9b8e464e1ab757
-assets/FavoriteComponent-BVsrdbGi.js,1725095498632,dec1dac6ddbe9fbb08d452234ca4b17341403610df764c9ba4716227e184b984
-assets/fa-regular-400-DgEfZSYE.woff2,1725095498632,fb31b3f693b818441c452f39a682d8ad81967e3474b6a2266ddb885177cd98d1
-assets/fa-regular-400-Bf3rG5Nx.ttf,1725095498631,61e9221981e1ad8a27ea29b9aed2d9d1615450c3f99b3a6175c2ef238fa67eb4
-assets/fa-brands-400-O7nZalfM.woff2,1725095498631,5446f4c298ee6694ba92500f91741668e1ff9c8c08cb018a4f414fb663acae9e
-assets/fa-solid-900-DOQJEhcS.woff2,1725095498631,7a9c4ef0dd299dfd976428e4cb9c86fc13ebd4eed7604f035476e69af3f56b9d
-assets/fa-brands-400-Dur5g48u.ttf,1725095498631,8a036bca81921a2f3fc90c860fde21f0e8066cdf3507cf9999dd2a47cac380b1
-assets/index-D_hPrJbN.css,1725095498632,4efbe42b9c83b77958b4abad7a0eebb3585b3daf19651e6720c0c208599e02ff
-assets/index-C67CMuiw.js,1725095498631,ef29291cf900364b94bc316461645e9bbde2a28e0733ac2d3992e832dfdcb2e3
-assets/fa-solid-900-BV3CbEM2.ttf,1725095498632,af1fb4d30a49d562da382fdc49f386e2c8075bbbe26a5ecbbcdcf8994aaa423d
+index.html,1725110070055,3ab58a68d4c191343e3748d41b9172f7f021e8864831db863d46e0f275195a06
+assets/fa-v4compatibility-BX8XWJtE.woff2,1725110070055,8945f97a3a1bbd891397f2f7900844dbf1808e9e3924900a31d4acafb11a9db2
+data/cartoons.json,1725110069659,b9f903eecd7798157ee566eedeb5a61575ebd0994b9806ee71c3722ab445ad75
+assets/fa-v4compatibility-B9MWI-E6.ttf,1725110070055,d5040b176e185deb1562d78b306cffe3336502f43ad77337eb9b8e464e1ab757
+assets/FavoriteComponent-CJ-eKD1Y.js,1725110070055,3e96c612503a146361f5218f530f903f4a65ac738bbd64c0b64d5329a2041b9a
+assets/fa-regular-400-DgEfZSYE.woff2,1725110070051,fb31b3f693b818441c452f39a682d8ad81967e3474b6a2266ddb885177cd98d1
+assets/fa-regular-400-Bf3rG5Nx.ttf,1725110070055,61e9221981e1ad8a27ea29b9aed2d9d1615450c3f99b3a6175c2ef238fa67eb4
+assets/fa-brands-400-O7nZalfM.woff2,1725110070055,5446f4c298ee6694ba92500f91741668e1ff9c8c08cb018a4f414fb663acae9e
+assets/fa-solid-900-DOQJEhcS.woff2,1725110070054,7a9c4ef0dd299dfd976428e4cb9c86fc13ebd4eed7604f035476e69af3f56b9d
+assets/fa-brands-400-Dur5g48u.ttf,1725110070055,8a036bca81921a2f3fc90c860fde21f0e8066cdf3507cf9999dd2a47cac380b1
+assets/index-D6Rxm1Wx.css,1725110070055,231259e987f3196b7f4cdf320040e2e5032d5c852563cb01dcb633cf6b76ed22
+assets/index-CSUj9lpF.js,1725110070055,d022291046c9e42a0a88f30c99a4d3d1329556b5fc3227bced39b28b0dbce015
+assets/fa-solid-900-BV3CbEM2.ttf,1725110070055,af1fb4d30a49d562da382fdc49f386e2c8075bbbe26a5ecbbcdcf8994aaa423d
diff --git a/src/components/home/HomeComponent.vue b/src/components/home/HomeComponent.vue
@@ -90,7 +90,7 @@ const navigateToMovie = (id) => {
         />
         <button
           @click="searchQuery = ''"
-          class="absolute inset-y-0 right-0 px-4 py-2 text-sm bg-gray-800 text-white rounded-r-lg flex items-center justify-center hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500"
+          class="absolute inset-y-0 right-0 px-4 py-2 text-sm bg-white text-black rounded-r-lg flex items-center justify-center hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500"
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -110,7 +110,7 @@ const navigateToMovie = (id) => {
       </div>
       <select
         v-model="sortOption"
-        class="border rounded-lg p-2 bg-white shadow-sm text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+        class="border rounded-lg p-2 bg-white shadow-sm text-black text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
       >
         <option value="newest">{{ newestOption }}</option>
         <option value="oldest">{{ oldestOption }}</option>
@@ -129,7 +129,7 @@ const navigateToMovie = (id) => {
           class="relative bg-white p-4 border rounded-lg shadow-md cursor-pointer hover:shadow-lg transition-shadow flex flex-col"
           @click="navigateToMovie(movie.id)"
         >
-          <div class="relative h-48 mb-2 overflow-hidden rounded-lg">
+          <div class="relative h-65 mb-2 overflow-hidden rounded-lg">
             <img
               :src="movie.posterUrl"
               :alt="`Poster for ${movie.title}`"

diff --git a/src/main.js b/src/main.js
@@ -3,6 +3,7 @@ import App from './App.vue';
 import router from './router';
 import { createPinia } from 'pinia';
 import './assets/tailwindcss/index.css';
+import '@/style.css';
 import '@fortawesome/fontawesome-free/css/all.min.css';
 
 const app = createApp(App);

diff --git a/src/style.css b/src/style.css
@@ -5,75 +5,17 @@
 
   color-scheme: light dark;
   color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
 }
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
+* {
+  box-sizing: border-box;
 }
-a:hover {
-  color: #535bf2;
+h3 {
+  color: #000000;
 }
-
-body {
+body,
+html {
   margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-.card {
-  padding: 2em;
-}
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
+  padding: 0;
+  max-width: 100%;
+  overflow-x: hidden;
 }
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -7,8 +7,8 @@ export default {
         center: true,
         padding: '1rem',
       },
-      screen: {
-        lg: '1171px',
+      screens: {
+        '2xl': '1440px',
       },
       colors: {
         primary: '#19453F',