fix flex grid design

wikitongues · Nov 8, 2024 · 98080dd · 98080dd
1 parent 5b52009
commit 98080dd
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 13 deletions.
diff --git a/wp-content/themes/blankslate-child/includes/events-filter.php b/wp-content/themes/blankslate-child/includes/events-filter.php
@@ -67,13 +67,11 @@ function ajax_filter_events() {
 
 	if ($posts) {
 			ob_start();
-			echo '<ul class="event-list">';
 			foreach ($posts as $post) {
 					setup_postdata($post);
 					echo render_event($post->ID);
 			}
 			wp_reset_postdata();
-			echo '</ul>';
 			$response = ob_get_clean();
 			wp_send_json_success($response);
 	} else {

diff --git a/wp-content/themes/blankslate-child/stylus/main.css b/wp-content/themes/blankslate-child/stylus/main.css
@@ -2929,7 +2929,7 @@ text
   width: 100%;
   display: flex;
   flex-wrap: wrap;
-  justify-content: center;
+  justify-content: flex-start;
   margin: 0 auto;
 }
 .page-template-events-page .event-list .empty-events {
@@ -2945,10 +2945,12 @@ text
   padding: 6.4rem 1.6rem;
   border-radius: 16px;
   color: #101010;
-  flex: 0 1 calc(50% - 1rem);
+  flex: 2;
 }
 .page-template-events-page .event-list .event-entry {
   width: 100%;
+  max-width: 50%;
+  margin-bottom: 32px;
   font-family: 'Graphik Web';
   font-weight: 400;
   font-style: normal;
@@ -2990,6 +2992,16 @@ text
   font-weight: bold;
   color: #3814a5;
 }
+.page-template-events-page .event-list .event-entry:hover {
+  background: #d4cce0;
+  color: #3814a5;
+}
+.page-template-events-page .event-list .event-entry:hover h3 {
+  color: #3814a5;
+}
+.page-template-events-page .event-list .event-entry:hover a {
+  color: #3814a5;
+}
 @media (max-width: 768px) {
   .page-template-events-page .event-list .event-entry {
     flex: 1 1 100%;

diff --git a/wp-content/themes/blankslate-child/stylus/require/template-events-page.styl b/wp-content/themes/blankslate-child/stylus/require/template-events-page.styl
@@ -22,7 +22,7 @@
 		width 100%
 		display flex
 		flex-wrap wrap
-		justify-content center
+		justify-content flex-start
 		margin 0 auto
 
 		.empty-events
@@ -32,10 +32,12 @@
 			padding 6.4rem 1.6rem
 			border-radius 16px
 			color $black
-			flex 0 1 calc(50% - 1rem)
+			flex 2
 
 		.event-entry
 			width 100%
+			max-width 50%
+			margin-bottom 32px
 			text--body($black)
 			padding 1.6rem
 			border-radius 16px
@@ -64,15 +66,15 @@
 				font-weight bold
 				color $blue
 
-			// &:hover
-			// 	background $blue
-			// 	color $parchment
+			&:hover
+				background $lightPurple
+				color $blue
 
-			// 	h3
-			// 		color $parchment
+				h3
+					color $blue
 
-			// 	a
-			// 		color $yellow
+				a
+					color $blue
 
 @media (max-width: $mobile)
 	.page-template-events-page