Update entry header maintainability (fix)

skysarwer · Jan 24, 2023 · 6feded3 · 6feded3
1 parent e8d96ce
commit 6feded3
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 44 deletions.
diff --git a/sass/abstracts/_mixins.scss b/sass/abstracts/_mixins.scss
@@ -44,4 +44,30 @@
 		margin: 0 auto;
 		max-width: 150ch;
 	}
+}
+
+@mixin entry-header {
+	display: flex;
+	justify-content: center;
+	position: relative;
+	&::before {
+		content: '';
+		position: absolute;
+		width: 64%;
+		border-top: 1.5px solid $color__accent;
+		top: calc(50% - -2px);
+		height: 2em;
+		z-index: -1;
+	}
+
+	h1, h2 {
+		text-align: center;
+		font-family: $font__title;
+		font-size: 2.5em;
+		color: #000;
+		display: inline-block;
+		padding: 0 0.5em;
+		max-width: 15em;
+		background-color: $color__background-body;
+	}
 }
diff --git a/sass/css/editor/gutenberg.scss b/sass/css/editor/gutenberg.scss
@@ -55,27 +55,10 @@ body .edit-post-visual-editor__content-area{
 	background: $color__background-body; 
 
 	.edit-post-visual-editor__post-title-wrapper {
-		display: flex;
-		justify-content: center;
-		position: relative;
-		&::before {
-			content: '';
-			position: absolute;
-			width: 64%;
-			border-top: 1.5px solid $color__accent;
-			top: calc(50% - -2px);
-			height: 2em;
-
-		}
+		@include entry-header;
 
-		h1 {
-			text-align: center;
-			font-family: $font__title;
-			font-size: 2.5em;
-			color: #000;
-			display: inline-block;
-			padding: 0 0.5em;
-			background-color: $color__background-body;
+		&::before {
+			z-index: 0;
 		}
 	}
 

diff --git a/sass/structure/_content.scss b/sass/structure/_content.scss
@@ -19,30 +19,7 @@
 }
 
 .entry-header {
-	display: flex;
-	justify-content: center;
-	position: relative;
-	&::before {
-		content: '';
-		position: absolute;
-		width: 64%;
-		border-top: 1.5px solid $color__accent;
-		top: calc(50% - -2px);
-		height: 2em;
-		z-index: -1;
-	}
-}
-
-.entry-title,
-.page-title {
-	text-align: center;
-	font-family: $font__title;
-	font-size: 2.5em;
-	color: #000;
-	display: inline-block;
-	padding: 0 0.5em;
-	max-width: 15em;
-	background-color: $color__background-body;
+	@include entry-header;
 }
 
 .page-links {