Hotfix/block styles template

README.md

@@ -407,7 +407,7 @@ To use the responsive mixin, include it in your SCSS code and customize it accor
   }
 
   // Apply styles when the screen width is between 600px and 1200px
-  @include responsive-min(600px) and (max-width: 1200px) {
+  @include responsive-range(600px, 1200px) {
     /* Your responsive styles for a range of widths */
   }
 }

assets/js/global/header.js

@@ -14,8 +14,10 @@ function handleScroll() {
 
 		if (scrollTop > lastScrollTop) {
 			siteHeader.style.top = '-100%';
+			siteHeader.classList.add('scrolled');
 		} else {
 			siteHeader.style.top = '0';
+			siteHeader.classList.remove('scrolled');
 		}
 
 		lastScrollTop = scrollTop;

assets/scss/abstracts/responsive-mixins.scss

@@ -2,22 +2,22 @@
 
 /*
 .my-element {
-  width: 100%;
+	width: 100%;
 
-  // Apply styles when the screen width is 600px or more.
-  @include responsive-min(600px) {
-    // Your responsive styles for min-width: 600px.
-  }
+	// Apply styles when the screen width is 600px or more.
+	@include responsive-min(600px) {
+		// Your responsive styles for min-width: 600px.
+	}
 
-  // Apply styles when the screen width is up to 600px
-  @include responsive-max(600px) {
-    // Your responsive styles for max-width: 600px.
-  }
+	// Apply styles when the screen width is up to 600px
+	@include responsive-max(600px) {
+		// Your responsive styles for max-width: 600px.
+	}
 
-  // Apply styles when the screen width is between 600px and 1200px.
-  @include responsive-min(600px) and (max-width: 1200px) {
-    // Your responsive styles for a range of widths.
-  }
+	// Apply styles when the screen width is between 600px and 1200px.
+	@include responsive-range(600px, 1200px) {
+		// Your responsive styles for a range of widths.
+	}
 }
 */
 
@@ -34,3 +34,10 @@
 		@content;
 	}
 }
+
+// Define mixin for media queries with min and max width (range)
+@mixin responsive-range($min-width, $max-width) {
+	@media only screen and (min-width: $min-width) and (max-width: $max-width) {
+		@content;
+	}
+}

assets/scss/blocks/core/file.scss

@@ -20,20 +20,28 @@
 	}
 
 	.wp-block-file__button {
+		align-items: center;
+		display: inline-flex;
+		justify-content: center;
 		margin-left: 1.5rem;
+		position: relative;
+		z-index: 1;
 
 		&::after {
 			background-color: currentcolor;
 			content: '';
 			display: inline-block;
 			height: 1rem;
+			left: unset;
 			margin-left: 0.5rem;
-			margin-top: -0.125rem;
+			margin-right: unset;
 			mask-image: url(../../../images/icons/icon-download.svg);
 			mask-size: contain;
-			position: relative;
+			position: absolute;
+			right: 0.75rem;
 			vertical-align: middle;
 			width: 1rem;
+			z-index: 0;
 		}
 	}