Merge pull request #57 from markteekman/develop

Small refactor of `Feature` component due to bug in Safari
markteekman · Mar 27, 2023 · d4376b6 · d4376b6
2 parents 7216dcb + cc48a9f
commit d4376b6
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "accessible-astro-starter",
   "description": "An Accessible Starter Theme for Astro including several accessiblity features and tools to help you build faster.",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "author": "Mark Teekman",
   "homepage": "https://accessible-astro.dev",
   "scripts": {

diff --git a/src/components/Feature.astro b/src/components/Feature.astro
@@ -19,24 +19,38 @@ const { icon = 'mdi:rocket', title = 'Title' } = Astro.props
 
   .feature {
     position: relative;
-    padding: 2rem;
     width: calc(100% - 0.5rem);
-    background-color: var(--neutral-100);
-    border: 3px solid var(--neutral-700);
-    border-radius: 1rem;
-    box-shadow: 0 0 0 6px var(--neutral-100);
+    padding: 2rem;
+
+    > * {
+      position: relative;
+      z-index: 2;
+    }
 
     @include breakpoint(large) {
       width: 100%;
     }
 
+    &::before,
     &::after {
       content: '';
       position: absolute;
-      z-index: -1;
+    }
+
+    &::before {
+      inset: 0;
+      background-color: var(--neutral-100);
+      border: 3px solid var(--neutral-700);
+      border-radius: 1rem;
+      box-shadow: 0 0 0 6px var(--neutral-100);
+      z-index: 1;
+    }
+
+    &::after {
       background-color: var(--action-color);
-      inset: 1rem -1rem -1rem 1rem;
+      inset: 1rem -0.85rem -0.85rem 1rem;
       border-radius: 1rem;
+      z-index: 0;
     }
   }
 
@@ -45,7 +59,7 @@ const { icon = 'mdi:rocket', title = 'Title' } = Astro.props
     color: var(--action-color);
   }
 
-  :global(.darkmode .feature) {
+  :global(.darkmode .feature::before) {
     background-color: var(--dark-100);
     box-shadow: 0 0 0 6px var(--dark-100);
   }