Change the logo to center and transparent

layouts/partials/front.html

@@ -1,5 +1,6 @@
-<main class="front-screen" {{ if $.Params.background }}
-	style="background-image: url('{{ $.Site.BaseURL }}{{ print (index $.Params.background 0) }}');" {{ end }}>
+<main class="front-screen">
+	{{ if $.Params.background }}
+	<img class="front-screen_image" src="{{ $.Site.BaseURL }}{{ print (index $.Params.background 0) }}"/> {{ end }}
 	<div class="front-screen_caption">
 		{{ .Content }}
 	</div>

static/css/base.css

@@ -11,7 +11,7 @@
 
 	--footer-height-inline: 4em;
 	--footer-height-block: 8em;
-	
+
 	--navbar-height: 8vh;
 }
 
@@ -234,10 +234,16 @@ body {
 	margin: auto;
 	max-width: var(--max-width-full);
 }
+.front-screen_image {
+	opacity: 0.5;
+	width: 100%;
+}
 .front-screen_caption {
 	position: absolute;
 	top: 50%;
-	transform: translateY(-50%);
+	left: 50%;
+	transform: translateY(-50%) translateX(-50%);
+	text-align: center;
 }
 .front-screen_caption h1 {
 	font-weight: normal;