fix: improve render performance (#176)

* fix: improve render performance * refactor: bake the blur into the SVG itself
sparkbox · Feb 22, 2024 · 84a3068 · 84a3068
1 parent 3a66bbd
commit 84a3068
Show file tree

Hide file tree

Showing 8 changed files with 5 additions and 36 deletions.
diff --git a/src/css/components/_answer.scss b/src/css/components/_answer.scss
@@ -1,12 +1,8 @@
-@use "../tools/text-outline" as text;
-
 .cmp-answer {
   margin-block: 1.5rem;
   font-size: clamp(1rem, 1rem + 1vw, 2rem);
 
   &__reveal {
-    @include text.outline;
-
     cursor: pointer;
     margin-block: 1rem;
     text-decoration: underline;

diff --git a/src/css/components/_categories.scss b/src/css/components/_categories.scss
@@ -1,5 +1,4 @@
 @use "../tools/svg" as *;
-@use "../tools/text-outline" as text;
 
 @keyframes categories-rotate {
   to {
@@ -13,8 +12,6 @@
   padding-inline: 2rem 0;
 
   &__link {
-    @include text.outline;
-
     position: relative;
     text-decoration: underline;
     text-underline-offset: 2px;
@@ -51,8 +48,6 @@
       height: 1.5rem;
       width: 1.5rem;
       transition: opacity 150ms ease-in-out;
-
-      @include text.outline;
     }
 
     &::before {

diff --git a/src/css/components/_header.scss b/src/css/components/_header.scss
@@ -1,5 +1,4 @@
 @use "../settings/breakpoints" as bp;
-@use "../tools/text-outline" as text;
 
 @keyframes pop {
 	10% {
@@ -90,8 +89,6 @@
 		height: var(--size);
 		width: var(--size);
 
-		@include text.outline;
-
 		@media (min-width: bp.$md) {
 			--size: 2.5rem;
 

diff --git a/src/css/components/_pagination.scss b/src/css/components/_pagination.scss
@@ -1,5 +1,3 @@
-@use "../tools/text-outline" as text;
-
 .cmp-pagination {
   display: flex;
   flex-flow: row-reverse wrap;
@@ -8,7 +6,5 @@
 }
 
 .cmp-pagination a {
-  @include text.outline;
-
   font-size: clamp(1rem, 1rem + 0.5vw, 1.5rem);
 }
diff --git a/src/css/elements/_heading.scss b/src/css/elements/_heading.scss
@@ -1,5 +1,3 @@
-@use "../tools/text-outline" as text;
-
 h1,
 h2,
 h3,
@@ -9,8 +7,6 @@ h6 {
   font-weight: 320;
   font-stretch: 125%;
   font-size: clamp(var(--size), var(--size) + 0.5vw, var(--size) * 2);
-
-  @include text.outline;
 }
 
 h1 {

diff --git a/src/css/elements/_p.scss b/src/css/elements/_p.scss
@@ -1,7 +1,3 @@
-@use "../tools/text-outline" as text;
-
 p {
   font-size: clamp(1rem, 1rem + 0.5vw, 1.5rem);
-
-  @include text.outline;
 }
diff --git a/src/css/tools/_text-outline.scss b/src/css/tools/_text-outline.scss
@@ -6,15 +6,5 @@
 	--b: 1px;
 	--color: var(--background-color);
 
-	filter:
-		drop-shadow(0 0 1px var(--color))
-		drop-shadow(0 0 0.5px var(--color))
-		drop-shadow(0 0 0.5px var(--color))
-		drop-shadow(0 0 0.5px var(--color))
-		drop-shadow(0 0 0.5px var(--color))
-		drop-shadow(0 0 0.5px var(--color))
-		drop-shadow(0 0 0.5px var(--color))
-		drop-shadow(0 0 0.5px var(--color))
-		drop-shadow(0 0 0.5px var(--color))
-		drop-shadow(0 0 0.5px var(--color));
+	// mask: linear-gradient(var(--color) 0 0) text;
 }
diff --git a/src/public/assets/90s-pattern.svg b/src/public/assets/90s-pattern.svg