fix conflicts

awalkaday · Jan 8, 2024 · 74b9ef7 · 74b9ef7
1 parent 2b70211
commit 74b9ef7
Show file tree

Hide file tree

Showing 2 changed files with 123 additions and 8 deletions.
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -1237,6 +1237,10 @@
 	}
 
 		#main .thumb {
+			width: calc(33.333% - 10px); /* 3 columns with 10px gap on each side */
+			margin: 5px; /* Adjust as needed for visual separation */
+			display: inline-block;
+			box-sizing: border-box;
 			-moz-transition: opacity 1.25s ease-in-out;
 			-webkit-transition: opacity 1.25s ease-in-out;
 			-ms-transition: opacity 1.25s ease-in-out;
@@ -1265,6 +1269,9 @@
 				position: absolute;
 				top: 0;
 				width: 100%;
+				/* Additional styling for visual separation */
+				background-color: rgba(0, 0, 0, 0.1); /* Adjust as needed for visual separation */
+
 			}
 
 			#main .thumb > .image {
@@ -1441,11 +1448,10 @@
 				transition-delay: 2.3s;
 			}
 
-
-		/* Media rules for screens up to 480px (Mobile) */
-		@media screen and (max-width: 480px) {
+		@media screen and (max-width: 1680px) {
 
 			#main .thumb {
+<<<<<<< HEAD
 			-moz-transition-delay: 0.3s; /* Adjust transition delay as needed */
 			-webkit-transition-delay: 0.3s;
 			-ms-transition-delay: 0.3s;
@@ -1607,13 +1613,118 @@
 				-webkit-transition-delay: 1.825s;
 				-ms-transition-delay: 1.825s;
 				transition-delay: 1.825s;
+=======
+				-moz-transition-delay: 1.625s;
+				-webkit-transition-delay: 1.625s;
+				-ms-transition-delay: 1.625s;
+				transition-delay: 1.625s;
+>>>>>>> parent of c7f0870 (media rules for mobile-first styles (480, 768, 1024) and TVs (2560))
 				height: calc(28.57143vh - 1.33333em);
-				min-height: 25em;
+				min-height: 18em;
 				width: 20%;
+			}
+
+				#main .thumb:nth-child(1) {
+					-moz-transition-delay: 0.65s;
+					-webkit-transition-delay: 0.65s;
+					-ms-transition-delay: 0.65s;
+					transition-delay: 0.65s;
 				}
-
-		}
-
+
+				#main .thumb:nth-child(2) {
+					-moz-transition-delay: 0.8s;
+					-webkit-transition-delay: 0.8s;
+					-ms-transition-delay: 0.8s;
+					transition-delay: 0.8s;
+				}
+
+				#main .thumb:nth-child(3) {
+					-moz-transition-delay: 0.95s;
+					-webkit-transition-delay: 0.95s;
+					-ms-transition-delay: 0.95s;
+					transition-delay: 0.95s;
+				}
+
+				#main .thumb:nth-child(4) {
+					-moz-transition-delay: 1.1s;
+					-webkit-transition-delay: 1.1s;
+					-ms-transition-delay: 1.1s;
+					transition-delay: 1.1s;
+				}
+
+				#main .thumb:nth-child(5) {
+					-moz-transition-delay: 1.25s;
+					-webkit-transition-delay: 1.25s;
+					-ms-transition-delay: 1.25s;
+					transition-delay: 1.25s;
+				}
+
+				#main .thumb:nth-child(6) {
+					-moz-transition-delay: 1.4s;
+					-webkit-transition-delay: 1.4s;
+					-ms-transition-delay: 1.4s;
+					transition-delay: 1.4s;
+				}
+
+				#main .thumb:nth-child(7) {
+					-moz-transition-delay: 1.55s;
+					-webkit-transition-delay: 1.55s;
+					-ms-transition-delay: 1.55s;
+					transition-delay: 1.55s;
+				}
+
+				#main .thumb:nth-child(8) {
+					-moz-transition-delay: 1.7s;
+					-webkit-transition-delay: 1.7s;
+					-ms-transition-delay: 1.7s;
+					transition-delay: 1.7s;
+				}
+
+				#main .thumb:nth-child(9) {
+					-moz-transition-delay: 1.85s;
+					-webkit-transition-delay: 1.85s;
+					-ms-transition-delay: 1.85s;
+					transition-delay: 1.85s;
+				}
+			}
+			@media screen and (max-width: 980px) {
+
+				/* Adjustments for thumbnails on small screens (smartphones) */
+				#main .thumb {
+				  -moz-transition-delay: 0.3s; /* Adjust transition delay as needed */
+				  -webkit-transition-delay: 0.3s;
+				  -ms-transition-delay: 0.3s;
+				  transition-delay: 0.3s;
+				  height: 10em; /* Adjust height as needed */
+				  min-height: 10em; /* Adjust min-height as needed */
+				  width: 100%;
+				  margin: 5px 0; /* Add margin for visual separation */
+				}
+
+				/* Additional adjustments for specific thumbnails */
+				#main .thumb:nth-child(1) {
+				  -moz-transition-delay: 0.2s;
+				  -webkit-transition-delay: 0.2s;
+				  -ms-transition-delay: 0.2s;
+				  transition-delay: 0.2s;
+				}
+
+				#main .thumb:nth-child(2) {
+				  -moz-transition-delay: 0.4s;
+				  -webkit-transition-delay: 0.4s;
+				  -ms-transition-delay: 0.4s;
+				  transition-delay: 0.4s;
+				}
+
+				#main .thumb:nth-child(3) {
+				  -moz-transition-delay: 0.6s;
+				  -webkit-transition-delay: 0.6s;
+				  -ms-transition-delay: 0.6s;
+				  transition-delay: 0.6s;
+				}
+
+			  }
+
 
 /* Footer */