From 1de1b84cf02aa3efc8a1aae8a05476b24426105e Mon Sep 17 00:00:00 2001
From: varunkasyap <77223408+varunkasyap@users.noreply.github.com>
Date: Tue, 23 Jan 2024 10:04:01 +0530
Subject: [PATCH 1/2] added new card css

added new css style to handle small size screen
---
 src/styles/App.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/styles/App.css b/src/styles/App.css
index dfbcf07..e5c88dd 100644
--- a/src/styles/App.css
+++ b/src/styles/App.css
@@ -857,6 +857,12 @@ canvas {
   color: #db3b60;
 }
 /* card 2020 */
+@media screen and (max-width: 600px) {
+  .card2020 {
+    width: 100%;
+  }
+}
+
 h1.tenpx {
   margin-bottom: 0px;
 }

From f8a34fe7a3289fd43aca2cf85a97001601ccfb01 Mon Sep 17 00:00:00 2001
From: varunkasyap <77223408+varunkasyap@users.noreply.github.com>
Date: Wed, 24 Jan 2024 10:53:38 +0530
Subject: [PATCH 2/2] Update App.css

---
 src/styles/App.css | 48 ++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 42 insertions(+), 6 deletions(-)

diff --git a/src/styles/App.css b/src/styles/App.css
index e5c88dd..6a3f5d5 100644
--- a/src/styles/App.css
+++ b/src/styles/App.css
@@ -307,6 +307,11 @@ h3 a:hover {
   padding-left: 1.5vw;
   font-family: "Montserrat Bold";
 }
+@media (max-width: 768px) {
+  .card-title{
+    font-size: 2.5vh;
+  }
+}
 
 .card-author {
   font-size: 0.9vw;
@@ -315,6 +320,11 @@ h3 a:hover {
   padding-left: 1.5vw;
   font-family: "Montserrat Bold";
 }
+@media (max-width: 768px) {
+  .card-author{
+    font-size: 1.7vh;
+  }
+}
 /* clamp styles */
 .clamp-lines {
   border-radius: 0.25em;
@@ -325,6 +335,11 @@ h3 a:hover {
   padding-top: 1vh;
   font-size: 0.8vw;
 }
+@media (max-width: 768px) {
+  .clamp-lines{
+    width: 1.1vw;
+  }
+}
 
 .clamp-lines > span {
   display: block;
@@ -349,6 +364,11 @@ h3 a:hover {
   height: 22vh;
   /* filter: blur(3px); */
 }
+@media (max-width: 768px) {
+  .cardimage img{
+    width: 35vh;
+  }
+}
 .cardimage:hover {
   filter: none;
 }
@@ -358,12 +378,18 @@ h3 a:hover {
   height: 22vh;
   overflow: hidden;
 }
+
 .bigcard {
   width: 20vw;
   margin-bottom: 25px;
   margin-right: 8px;
   margin-left: 8px;
 }
+@media (max-width: 768px) {
+  .bigcard{
+    width: 35vh;
+  }
+}
 .row {
   width: 100%;
   display: flex;
@@ -603,6 +629,11 @@ h3 a:hover {
   text-align: center;
   height: 6vh;
 }
+@media (max-width: 768px) {
+  .img-description-text{
+    width: 1vh;
+  }
+}
 /* ARCHIVE PAGE */
 
 #intro2019 h1 {
@@ -857,12 +888,6 @@ canvas {
   color: #db3b60;
 }
 /* card 2020 */
-@media screen and (max-width: 600px) {
-  .card2020 {
-    width: 100%;
-  }
-}
-
 h1.tenpx {
   margin-bottom: 0px;
 }
@@ -908,6 +933,12 @@ h1.tenpx {
   width: 10vw;
   font-size: 1vw;
 }
+@media (max-width: 768px) {
+  .box{
+    width: 17.5vh;
+    font-size: 1.8vh;
+  }
+}
 .links a:first-child {
   border: #ff2457;
 
@@ -932,6 +963,11 @@ h1.tenpx {
   white-space: nowrap;
   width: 20vw;
 }
+@media (max-width: 768px) {
+  .tags{
+    width: 35vh;
+  }
+}
 .tags ul {
   list-style: none;
   display: inline-block;