Merge pull request #197 from reyansh8104/main

updated "quote" color.
JayShukla8 · Oct 19, 2024 · 4f69619 · 4f69619
2 parents 99c377c + 45eba6b
commit 4f69619
Showing 1 changed file with 61 additions and 65 deletions.
diff --git a/style.css b/style.css
@@ -1,12 +1,11 @@
 body {
   background: radial-gradient(circle at 20% 15%, rgba(223, 177, 131, 0.5), transparent 60%),
   radial-gradient(circle at 80% 30%, rgba(143, 117, 92, 0.4), transparent 70%),
-  linear-gradient(to bottom, #d2b891, #b7986d, #d0ae85),url(images/stains.png);
+  linear-gradient(to bottom, #d2b891, #b7986d, #d0ae85), url(images/stains.png);
   background-position: top;
   background-blend-mode: multiply;
   background-repeat: no-repeat;
   background-attachment: fixed;
-  /* background-size: 700px; */
   background-size: cover;
   padding: 20px;
   padding-bottom: 10svh;
@@ -42,8 +41,7 @@ body {
   transition: box-shadow 250ms ease-in-out, scale 250ms ease-in-out;
   animation: quote-reveal linear forwards;
   animation-timeline: view(block);
-  animation-range: entry-crossing calc(0% - 10svh) entry-crossing
-    calc(100% + 10svh);
+  animation-range: entry-crossing calc(0% - 10svh) entry-crossing calc(100% + 10svh);
 }
 
 .card-top {
@@ -82,31 +80,29 @@ body.dark .toggle-icon:hover {
 .quote-block:hover {
   box-shadow: 3px 3px #44423f;
   background-color: rgb(237, 229, 225);
+}
+
+body.dark .quote-block:hover {
+  box-shadow: 3px 3px #989796;
+}
+
+@keyframes quote-reveal {
+  0% {
+    transform: scale(0) translateX(-50%) translateY(-100%);
+    opacity: 0;
   }
 
-  body.dark .quote-block:hover {
-    box-shadow: 3px 3px #989796;
-   }
-
-  @keyframes quote-reveal {
-    0% {
-      /* clip-path: polygon(50% 100%, 50% 100%, 50% 100%, 50% 100%); */
-      transform: scale(0) translateX(-50%) translateY(-100%);
-      opacity: 0;
-    }
-
-    25% {
-      transform: scale(0.25) translateX(-50%) translateY(-100%);
-      opacity: 0;
-    }
-
-    100% {
-      transform: scale(1) translateX(0) translateY(0%);
-      /* clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); */
-      opacity: 1;
-    }
+  25% {
+    transform: scale(0.25) translateX(-50%) translateY(-100%);
+    opacity: 0;
   }
 
+  100% {
+    transform: scale(1) translateX(0) translateY(0%);
+    opacity: 1;
+  }
+}
+
 .quote-text {
   font-size: 1.2em;
   color: #333;
@@ -153,17 +149,17 @@ body.dark .toggle-icon:hover {
   display: flex;
   padding: 10px;
   background-color: rgb(237, 229, 225);
-  box-shadow: 10px 10px 81px 0px rgba(152,151,150,0.75);
--webkit-box-shadow: 10px 10px 81px 0px rgba(152,151,150,0.75);
--moz-box-shadow: 10px 10px 81px 0px rgba(152,151,150,0.75);
+  box-shadow: 10px 10px 81px 0px rgba(152, 151, 150, 0.75);
+  -webkit-box-shadow: 10px 10px 81px 0px rgba(152, 151, 150, 0.75);
+  -moz-box-shadow: 10px 10px 81px 0px rgba(152, 151, 150, 0.75);
   flex-direction: column;
   justify-content: flex-end;
   gap: 15px;
   border-radius: 10px;
   box-shadow: 1px 1px 4px;
 }
 
-body.dark .icons-wrapper{
+body.dark .icons-wrapper {
   background-color: #484e52;
 }
 
@@ -185,15 +181,19 @@ body.dark .icon:hover {
 }
 
 body.dark {
-  background: 
-    linear-gradient(to bottom, #000000, #1a1a4b, #4b0082, #000d33),
-    url('images/stars.png');
+  background: linear-gradient(to bottom, #000000, #1a1a4b, #4b0082, #000d33), url('images/stars.png');
   background-position: center;
   background-blend-mode: overlay;
 }
 
-body h2{
-  color: rgb(220, 215, 215)
+body h2 {
+  color: black; /* Light mode: Set h2 color to black */
+  padding-left: 10px;
+}
+
+body.dark h2 {
+  color: #ddd; /* Dark mode: Keep the existing color */
+  padding-left: 10px;
 }
 
 body.dark .quote-block {
@@ -209,30 +209,27 @@ body.dark .quote-source {
   color: #ebdfd1;
 }
 
-body.dark h2{
-    color: #ddd;
-}
-
 #back-to-top {
   display: none;
-	position: fixed;
-	bottom: 20px;
-	right: 30px;
-	z-index: 99;
-	border: none;
-	outline: none;
-	background-color: #fff;
-	box-shadow: #333 0px 0px 10px;
-	color: white;
-	cursor: pointer;
-	padding: 0.4rem;
-	border-radius: 4px;
-	font-size: 1.2rem;
-	transition: background-color 0.3s, transform 0.3s;
+  position: fixed;
+  bottom: 20px;
+  right: 30px;
+  z-index: 99;
+  border: none;
+  outline: none;
+  background-color: #fff;
+  box-shadow: #333 0px 0px 10px;
+  color: white;
+  cursor: pointer;
+  padding: 0.4rem;
+  border-radius: 4px;
+  font-size: 1.2rem;
+  transition: background-color 0.3s, transform 0.3s;
 }
+
 #back-to-top:hover {
-	background-color: #f1f1f1;
-	transform: translateY(-5px);
+  background-color: #f1f1f1;
+  transform: translateY(-5px);
 }
 
 .liked {
@@ -251,14 +248,13 @@ body.dark .liked:hover {
   color: red;
 }
 
-
 .bubble {
   position: absolute;
-  background-color: rgba(221, 236, 240, 0.3); /* Transparent bubble */
+  background-color: rgba(221, 236, 240, 0.3);
   border-radius: 50%;
   pointer-events: none;
   animation: moveUp 5s linear infinite;
-  z-index: -1; /* Ensure bubbles are behind all page content */
+  z-index: -1;
 }
 
 @keyframes moveUp {
@@ -271,7 +267,7 @@ body.dark .liked:hover {
 }
 
 footer {
-  background-color: #f8f8f79e ;
+  background-color: #f8f8f79e;
   padding: 20px 0;
   margin-top: 30px;
   text-size-adjust: bold;
@@ -303,7 +299,7 @@ footer {
 
 .footer-link:hover {
   color: #000000;
-  text-decoration:none;
+  text-decoration: none;
   transition: 0.1s ease;
   font-size: 18px;
 }
@@ -345,14 +341,15 @@ li {
     font-size: 0.8em;
   }
 }
+
 #tags {
   display: flex;
   flex-wrap: wrap;
-  gap: 10px; 
-  margin: 20px 0; 
-  padding: 10px; 
-  background-color: #f4f4f4; 
-  border-radius: 6px; 
+  gap: 10px;
+  margin: 20px 0;
+  padding: 10px;
+  background-color: #f4f4f4;
+  border-radius: 6px;
 }
 
 #tags .tag {
@@ -431,4 +428,3 @@ h2 {
     padding: 5px;
   }
 }
-