From e3882ef4e232b669b7bcef55f6982b50549c4a64 Mon Sep 17 00:00:00 2001
From: Formen <83844571+JollyJolli@users.noreply.github.com>
Date: Tue, 26 Nov 2024 10:25:37 -0600
Subject: [PATCH] Better CSS

---
 css/index-style.css | 276 +++++++++++++++++++++++---------------------
 1 file changed, 146 insertions(+), 130 deletions(-)

diff --git a/css/index-style.css b/css/index-style.css
index 6ff759b..d2b7f13 100644
--- a/css/index-style.css
+++ b/css/index-style.css
@@ -1,150 +1,166 @@
-/* * {
-  padding: 0;
-  margin: 0;
-} */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
 body {
-  background-color: whitesmoke;
-  font-family: outfit, rubik;
+    font-family: 'Outfit', sans-serif;
+    line-height: 1.6;
+    background-color: #f4f4f4;
+    color: #333;
+}
+
+nav {
+    background-color: #ffffff;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+}
+
+nav > div {
+    display: flex;
+    flex-direction: column;
+}
+
+nav > div > div {
+    display: flex; 
+    align-items: center; 
+    padding: 1.5rem;
+}
+
+nav a {
+    display: block;
+    text-align: center;
+    padding: 1rem;
+    text-decoration: none;
+    color: #4a4a4a;
+    font-weight: 600;
+    transition: background-color 0.3s ease;
+}
+
+nav a:hover {
+    background-color: #f0f0f0;
 }
+
 .container {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  min-height: 80vh;
+    max-width: 1200px;
+    margin: 2rem auto;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    gap: 2rem;
+    padding: 0 1rem;
 }
+
 .container-item {
-  background-color: white;
-  border-radius: 5px;
-  margin: 1rem;
-  padding: 1rem;
-  height: min-content;
-}
-.container-item > .img-wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 13rem;
-  overflow: hidden;
-  border-radius: 5px;
-}
-.container-item > .img-wrapper > img {
-  object-fit: contain;
-  width: 100%;
-  border-radius: 5px;
-}
-.container-item > .img-wrapper > img:hover {
-  cursor: pointer;
-}
-
-.container-item > h3 {
-  transition: all 200ms;
-  cursor: pointer;
-  margin: 0rem;
-  margin-top: 0.5rem;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 1;
-  overflow: hidden;
-  text-decoration: none; /* Remove underline */
-
-  /* text-decoration: solid; */
-}
-
-.container-item > h3:hover {
-  transform: translateY(-5px); /* Move up on hover */
-}
-.container-item > p {
-  font-size: 10px;
-  color: gray;
-  line-clamp: 2;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  overflow: hidden;
-  padding: 0;
-}
-.container-item > div > button > h3 {
-  margin: 0;
-  padding: 0;
-  font-family: rubik;
-  font-weight: 100;
-}
-.container-item > div > button {
-  border: 1px solid gainsboro;
-  border-radius: 3px;
-  padding-left: 10px;
-  padding-right: 10px;
-  padding-top: 5px;
-  padding-bottom: 5px;
-  margin-top: 0.9rem;
-  background: none;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 10px;
-  transition: all;
-  transition-duration: 300ms;
-  background: transparent;
-}
-.container-item > div > button:hover {
-  border: 1px solid rgb(187, 187, 187);
-  background: rgba(0, 0, 0, 0.01);
-}
-
-@media only screen and (max-width: 600px) {
-  .container {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-  .container-item > h3 {
-    font-size: 13px;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-  }
-  .container-item {
-    background-color: white;
-    border-radius: 5px;
-    margin: 0.3rem;
-    padding: 0.8rem;
-  }
-  .container-item > .img-wrapper {
+    background-color: #ffffff;
+    border-radius: 10px;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+    overflow: hidden;
+    transition: transform 0.3s ease;
+}
+
+.container-item:hover {
+    transform: scale(1.03);
+}
+
+.container-item .img-wrapper {
+    height: 250px;
+    overflow: hidden;
+}
+
+.container-item .img-wrapper img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    cursor: pointer;
+    transition: transform 0.3s ease;
+}
+
+.container-item .img-wrapper img:hover {
+    transform: scale(1.1);
+}
+
+.container-item h3 {
+    padding: 1rem;
+    cursor: pointer;
+    transition: color 0.3s ease;
+}
+
+.container-item h3:hover {
+    color: #4a90e2;
+}
+
+.container-item p {
+    padding: 0 1rem 1rem;
+    color: #666;
+}
+
+.container-item > div {
     display: flex;
+    justify-content: space-between;
     align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 8rem;
-  }
+    padding: 1rem;
+    border-top: 1px solid #f0f0f0;
 }
-.container-item {
-  margin: 1rem;
-  padding: 1rem;
-  border: 1px solid #ddd;
-  border-radius: 8px;
-  transition: box-shadow 0.3s;
+
+.container-item button {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    background: none;
+    border: none;
+    cursor: pointer;
+    transition: color 0.3s ease;
 }
 
-.container-item:hover {
-  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
+.container-item button:hover {
+    color: #4a90e2;
 }
 
 .bookmark-btn {
-  background: none;
-  border: none;
-  cursor: pointer;
-  font-size: 1.2rem;
-  transition: color 0.3s;
+    color: #666;
+}
+
+.bookmark-btn i {
+    font-size: 1.2rem;
+    transition: color 0.3s ease;
 }
 
-.bookmark-btn .fa-bookmark {
-  color: #aaa;
+.bookmark-btn i:hover {
+    color: #4a90e2;
 }
 
-.bookmark-btn .fa-solid {
-  color: #ff5733;
+footer {
+    background-color: #ffffff;
+    padding: 1rem;
+    text-align: center;
+    box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
 }
 
-.bookmark-btn:hover .fa-bookmark {
-  color: #ff5733;
+footer a {
+    color: #4a90e2;
+    text-decoration: none;
+    margin-left: 0.3rem;
+}
+
+/* Responsive Design */
+@media screen and (max-width: 768px) {
+    .container {
+        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+        gap: 1rem;
+    }
+
+    .container-item .img-wrapper {
+        height: 200px;
+    }
+}
+
+@media screen and (max-width: 480px) {
+    .container {
+        grid-template-columns: 1fr;
+    }
+
+    nav > div > div {
+        flex-direction: column;
+        text-align: center;
+    }
 }