thusfar

netherphp · Oct 3, 2024 · 0cae99a · 0cae99a
1 parent 7104b7d
commit 0cae99a
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 50 deletions.
diff --git a/app/www/themes/default/area/blog/widgets/blog-header.phtml b/app/www/themes/default/area/blog/widgets/blog-header.phtml
@@ -22,6 +22,7 @@ use Nether\User;
 $CacheBust ??= FALSE;
 $HeaderImageURL = $Blog->GetHeaderURL();
 $IconImageURL = $Blog->GetIconURL();
+$BlogURL = $Blog->GetURL();
 $Title = $Blog->Title;
 $Tagline = $Blog->Tagline;
 
@@ -36,8 +37,9 @@ if($CacheBust) {
 // these should be set in then pulled from the blog settings.
 
 $CSSVars = new Common\Datastore([
-	'--atl-blog-bg1' => 'var(--theme-orange)',
-	'--atl-blog-fg1' => 'var(--theme-black)'
+	'--atl-blog-bg0' => 'var(--theme-grey-lt)', // graphic wash tone
+	'--atl-blog-bg1' => 'var(--theme-orange)',  // titlebar bg
+	'--atl-blog-fg1' => 'var(--theme-black)'    // titlebar text
 ]);
 
 $CSSVars->RemapKeyValue(fn(string $K, string $V)=> "{$K}: {$V};")
@@ -47,34 +49,39 @@ $CSSVars->RemapKeyValue(fn(string $K, string $V)=> "{$K}: {$V};")
 
 ?>
 
-<div class="BlogHeader" style="<?php $Util->Print($CSSVars->Join(' ')) ?>">
+<header class="atl-blog-header" style="<?php $Util->Print($CSSVars->Join(' ')) ?>">
+
+	<!-- HEADER BACKGROUND WASHOUT -->
 	<aside style="background-image:url(<?php $Printer($HeaderImageURL) ?>);">
 	</aside>
 
 	<!-- HEADER TITLE BAR -->
 	<header>
 		<div class="container fs-smaller">
-			<div class="row align-items-center gx-2 gy-1 py-1">
+			<div class="row align-items-center gx-2 gy-0 py-1">
 				<div class="col-12 col-md-auto">
-					<span class="fw-bold">
+					<a class="atl-blog-header-title" href="<?php $Util->Print($BlogURL) ?>">
 						<?php $Util->Print($Title) ?>
-					</span>
+					</a>
 				</div>
 				<?php if($Tagline): ?>
 				<div class="col-12 col-md-auto">
-					<span class="o-50">
+					<a class="atl-blog-header-tagline" href="<?php $Util->Print($BlogURL) ?>">
 						<span class="d-none d-md-inline">// </span>
 						<?php $Util->Print($Tagline) ?>
-					</span>
+					</a>
 				</div>
 				<?php endif; ?>
 			</div>
 		</div>
 	</header>
 
 	<!-- HEADER WALLPAPER -->
-	<section class="container gx-0 gx-sm-4">
-		<div class="wallpapered bg-black p-4" style="background-image:url(<?php $Printer($HeaderImageURL) ?>);">
+	<section>
+		<div class="container gx-0 gx-sm-4">
+			<div class="wallpapered p-4" style="background-image:url(<?php $Printer($HeaderImageURL) ?>);">
+			</div>
 		</div>
 	</section>
-</div>
+
+</header>
diff --git a/app/www/themes/default/css/src/elements/blog.css b/app/www/themes/default/css/src/elements/blog.css
@@ -1,19 +1,10 @@
-
-.BlogHeader,
-.BlogHeader a:link,
-.BlogHeader a:visited {
-	color: var(--atl-blog-fg1) !important;
-	text-decoration: none;
-	border: 0px;
-}
-
-.BlogHeader {
+.atl-blog-header {
 	position: relative;
-	background: var(--atl-blog-bg1);
+	background: var(--atl-blog-bg0);
 	overflow: hidden;
 }
 
-.BlogHeader aside {
+.atl-blog-header aside {
 	position: absolute;
 	height: 100%;
 	width: 100%;
@@ -24,22 +15,48 @@
 	transform: scale(1.25);
 }
 
-.BlogHeader header {
+.atl-blog-header header {
 	background-color: var(--atl-blog-bg1);
-	color: var(--atl-blog-fg1);
 	position: relative;
 }
 
-.BlogHeader section {
+.atl-blog-header header,
+.atl-blog-header header a:link,
+.atl-blog-header header a:visited {
+	border: 0px;
+	color: var(--atl-blog-fg1);
+}
+
+.atl-blog-header section {
 	position: relative;
 }
 
-.BlogHeader section div {
-	background-position: center center; height: 200px;
+.atl-blog-header > section .wallpapered {
+	background-position: 50% 25%;
+	height: 250px;
+}
+
+.atl-blog-header-title {
+	font-weight: bold;
+}
+
+.atl-blog-header-tagline {
+	opacity: 0.64;
 }
 
 @media(max-width: 767.99px) {
-	.BlogHeaderGraphic {
-		background-position: center right;
+	.atl-blog-header-tagline {
+		opacity: 0.75;
+		font-size: 0.75em;
+	}
+
+	.atl-blog-header > section .wallpapered {
+		background-position: 75% 50%;
+		height: 200px;
 	}
-}
+}
+
+
+/***/
+
+
diff --git a/app/www/themes/default/css/styles.css b/app/www/themes/default/css/styles.css
@@ -1,5 +1,5 @@
 /*//
-@date 2024-10-03 17:48:06 UTC
+@date 2024-10-03 19:42:50 UTC
 @files 43 [
     "src\/imports.css",
     "src\/main.css",
@@ -2940,21 +2940,13 @@ is being used and then prefixing all these with that theme name, if i recall. */
 /*//////////////////////////////////////////////////////////////////////////////
 //// src/elements/blog.css ///////////////////////////////////////////////////*/
 
-.BlogHeader,
-.BlogHeader a:link,
-.BlogHeader a:visited {
-	color: var(--atl-blog-fg1) !important;
-	text-decoration: none;
-	border: 0px;
-}
-
-.BlogHeader {
+.atl-blog-header {
 	position: relative;
-	background: var(--atl-blog-bg1);
+	background: var(--atl-blog-bg0);
 	overflow: hidden;
 }
 
-.BlogHeader aside {
+.atl-blog-header aside {
 	position: absolute;
 	height: 100%;
 	width: 100%;
@@ -2965,26 +2957,50 @@ is being used and then prefixing all these with that theme name, if i recall. */
 	transform: scale(1.25);
 }
 
-.BlogHeader header {
+.atl-blog-header header {
 	background-color: var(--atl-blog-bg1);
-	color: var(--atl-blog-fg1);
 	position: relative;
 }
 
-.BlogHeader section {
+.atl-blog-header header,
+.atl-blog-header header a:link,
+.atl-blog-header header a:visited {
+	border: 0px;
+	color: var(--atl-blog-fg1);
+}
+
+.atl-blog-header section {
 	position: relative;
 }
 
-.BlogHeader section div {
-	background-position: center center; height: 200px;
+.atl-blog-header > section .wallpapered {
+	background-position: 50% 25%;
+	height: 250px;
+}
+
+.atl-blog-header-title {
+	font-weight: bold;
+}
+
+.atl-blog-header-tagline {
+	opacity: 0.64;
 }
 
 @media(max-width: 767.99px) {
-	.BlogHeaderGraphic {
-		background-position: center right;
+	.atl-blog-header-tagline {
+		opacity: 0.75;
+		font-size: 0.75em;
+	}
+
+	.atl-blog-header > section .wallpapered {
+		background-position: 75% 50%;
+		height: 200px;
 	}
 }
 
+
+/***/
+
 /*//////////////////////////////////////////////////////////////////////////////
 //// src/elements/collapser.css //////////////////////////////////////////////*/