fixes clickable area on tiles

klalicki · Mar 14, 2024 · cef9332 · cef9332
1 parent a1fcfd0
commit cef9332
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/theme/assets/css/main.css b/theme/assets/css/main.css
@@ -401,6 +401,7 @@ p.portfolio-card-desc-short {
 
 .portfolio-tile-click-area:focus {
   outline: none !important;
+  position: static;
 }
 
 .portfolio-tile-text-overlay:focus-within {
@@ -414,6 +415,7 @@ p.portfolio-card-desc-short {
   left: 0;
   right: 0;
   bottom: 0;
+  z-index: 10;
 }
 
 .portfolio-tile-image-link:focus {
@@ -422,7 +424,6 @@ p.portfolio-card-desc-short {
 
 .portfolio-tile:focus-within .portfolio-tile-text-overlay,
 .portfolio-tile:hover .portfolio-tile-text-overlay {
-  pointer-events: all;
   opacity: 1;
   transform: scale(1);
   transition: all 0.5s;

diff --git a/theme/assets/css/main.scss b/theme/assets/css/main.scss
@@ -371,17 +371,20 @@ p.portfolio-card-desc-short {
 }
 .portfolio-tile-click-area:focus {
   outline: none !important;
+  position: static;
 }
 .portfolio-tile-text-overlay:focus-within {
   outline: 3px solid $color-focus-ring;
 }
 .portfolio-tile-click-area::after {
   content: "";
+  // background-color: yellow;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
+  z-index: 10;
 }
 .portfolio-tile-click-area:focus::after {
   // outline: 3px solid $color-focus-ring;
@@ -391,7 +394,7 @@ p.portfolio-card-desc-short {
 }
 .portfolio-tile:focus-within .portfolio-tile-text-overlay,
 .portfolio-tile:hover .portfolio-tile-text-overlay {
-  pointer-events: all;
+  // pointer-events: all;
   opacity: $portfolio-tile-overlay-opacity;
   transform: scale(1);
   transition: all 0.5s;