Projects sizing

tungstun-ict · Dec 22, 2023 · 8d20155 · 8d20155
1 parent fda94a6
commit 8d20155
Showing 1 changed file with 33 additions and 55 deletions.
diff --git a/src/components/project/project.astro b/src/components/project/project.astro
@@ -16,18 +16,20 @@ const { title, link, picture, description } = Astro.props;
     <img class="picture" src={`/assets/project-icons/${picture}`} alt="hello" />
     <h3 class="title">{title}</h3>
     <p class="description">{description}</p>
-  <div>
-</a>
+    <div></div>
+  </div></a
+>
 
 <style lang="scss">
   .container {
     @media (max-width: 1200px) {
-      height: 150px;
+      height: 100px;
       margin: 20px 0 20px 0;
       padding: 0 20px;
       width: 100%;
       box-sizing: border-box;
     }
+
     display: flex;
     width: 100%;
     height: 200px;
@@ -37,12 +39,11 @@ const { title, link, picture, description } = Astro.props;
     border-radius: 11px;
   }
 
-  .container:hover > .content {
-    filter: invert(1);
-  }
-
-  .container:hover > .picture {
-    transform: scale(1.1);
+  .container:hover > .grid {
+    & > .title,
+    & > .description {
+      filter: invert(1);
+    }
   }
 
   .container:hover {
@@ -53,74 +54,51 @@ const { title, link, picture, description } = Astro.props;
 
   .grid {
     display: grid;
-  }
+    grid-template-rows: 0.5fr 1fr;
+    grid-template-columns: 200px 3fr;
+    width: 100%;
 
-  .content {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
+    @media (max-width: 1200px) {
+      grid-template-columns: 100px 3fr;
+    }
   }
 
   .picture {
     transition: 0.3s ease-in-out;
     height: 100%;
     aspect-ratio: 1;
-    margin-right: 20px;
     border-radius: 10px;
-
-    grid-column-start: 1;
-    grid-column-end: 1;
-
-    grid-row-start: 1;
-    grid-row-end: 2;
-
-    @media (max-width: 1200px) {
-      height: 80px;
-
-      grid-column-start: 1;
-      grid-column-end: 1;
-
-      grid-row-start: 1;
-      grid-row-end: 1;
-    }
+    grid-area: 1 / 1 / 3 / 2;
   }
 
   .title {
     font-size: 30px;
     text-align: left;
-    text-overflow: ellipsis ellipsis;
-
-    grid-column-start: 2;
-    grid-column-end: 2;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    padding: 10px;
+    margin: 0;
+    grid-area: 1 / 2 / 2 / 3;
 
-    grid-row-start: 1;
-    grid-row-end: 1;
-
     @media (max-width: 1200px) {
-      font-size: 20px;
-      margin: 0;
+      font-size: 15px;
     }
   }
 
   .description {
-    display: block;
+    display: -webkit-box;    
     overflow: hidden;
+    text-overflow: ellipsis;
     flex: 1;
-
-
-    grid-column-start: 2;
-    grid-column-end: 2;
-
-    grid-row-start: 2;
-    grid-row-end: 2;
+    margin: 0;
+    padding: 10px;
+    grid-area: 2 / 2 / 3 / 3;
+    -webkit-line-clamp: 4;
+    line-clamp: 4;
 
     @media (max-width: 1200px) {
-
-      grid-column-start: 1;
-      grid-column-end: 2;
-
-      grid-row-start: 2;
-      grid-row-end: 2;
+      font-size: 12px;
     }
-}
+  }
 </style>