Improve layout of home page a little

Turns out, some people thought that there wasn't any content below the hero image!
ISSOtm · Jan 20, 2025 · 8b2dab0 · 8b2dab0
1 parent 925e6db
commit 8b2dab0
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 36 deletions.
diff --git a/content/_index.md b/content/_index.md
@@ -3,11 +3,23 @@ title = "Home"
 description = "Hi! I'm Eldred. I love programming, infosec, old game consoles, and researching them!"
 +++
 
+<section class="container">
+
+# Welcome to ISSOtm's warehouse!
+
 Hi!
 [I'm Eldred](@/about.md).
 I love programming, infosec, old game consoles, and researching them!
 
-I spend a lot of my free time programming, so [I have written a nice amount of free software](//github.com/ISSOtm).
+I spend a lot of my free time programming, so I have written a nice amount of free software, [on GitHub](//github.com/ISSOtm) and [on SourceHut](//sr.ht/~issotm).
+
+</section>
+
+<div id="hero"><div class="container">
 
 I've been tinkering with the old Game Boy for about 7 years now, so I have become a fairly active member of [GBDev](//gbdev.io).
-Which, speaking of, I am also making [a tutorial for programming your own Game Boy games](//gbdev.io/gb-asm-tutorial) (with [some help](//github.com/gbdev/gb-asm-tutorial/contributors)) that is getting some praise as of late.
+Which, speaking of, I am also making [a tutorial for programming your own Game Boy games](//gbdev.io/gb-asm-tutorial) (with [some help](//github.com/gbdev/gb-asm-tutorial/contributors)) that is getting some praise as of late.  
+And there's even more stuff!
+Keep scrolling for a list...
+
+</div></div>
diff --git a/sass/pico/themes/default/_dark.scss b/sass/pico/themes/default/_dark.scss
@@ -9,6 +9,7 @@
   $bg-color: mix($slate-950, $slate-900);
   #{$css-var-prefix}background-color: #{$bg-color};
   #{$css-var-prefix}background-color-transparent: #{rgba($bg-color, 0)};
+  #{$css-var-prefix}background-color-semitransparent: #{rgba($bg-color, 0.9)};
 
   // Text color
   #{$css-var-prefix}color: #{$zinc-200};

diff --git a/sass/pico/themes/default/_light.scss b/sass/pico/themes/default/_light.scss
@@ -9,6 +9,7 @@
 	$bg-color: $azure-200;
 	#{$css-var-prefix}background-color: #{$bg-color};
 	#{$css-var-prefix}background-color-transparent: #{rgba($bg-color, 0)};
+	#{$css-var-prefix}background-color-semitransparent: #{rgba($bg-color, 0.9)};
 
 	// Text color
 	#{$css-var-prefix}color: #{$zinc-900};

diff --git a/templates/index.html b/templates/index.html
@@ -1,4 +1,7 @@
-{% extends "section.html" %} {% import "macros.html" as macros %} {% block preload %}
+{% extends "section.html" %}
+{% import "macros.html" as macros %}
+
+{% block preload %}
 <link
 	media="(max-width: 478px)"
 	href="{{ get_url(path='assets/hero_quarter.png') }}"
@@ -20,42 +23,54 @@
 	type="image/png"
 	as="image"
 />
-{% endblock preload %} {% block h1 %} {% endblock %} {% block header %}
-<section class="container">
-	<h1>Welcome to ISSOtm's warehouse!</h1>
-
-	{{ section.content | safe }}
-</section>
+{% endblock preload %}
 
-{# Hero image #}
-<style>
-	#hero {
-		height: 30em;
-		box-shadow: var(--pico-background-color) 0 0 2em 2em inset;
-		background:
-			60% center/cover fixed,
-			#333;
-	}
-
-	@media (max-width: 478px) {
+{% block h1 %} {% endblock %}
+{% block header %}
+	{# For the hero image #} <style>
 		#hero {
-			background-image: url("{{ get_url(path='assets/hero_quarter.png') }}");
+			height: 40em;
+			box-shadow: var(--pico-background-color) 0 0 2em 2em inset;
+			background:
+				60% center/cover fixed,
+				#333;
+
+			display: flex;
+			flex-flow: column nowrap;
+			justify-content: center;
+			p {
+				max-width: 50em;
+				margin: 0 auto;
+				padding: var(--pico-spacing);
+
+				background-color: var(--pico-background-color-semitransparent);
+				box-shadow: 0 0 2em 2.5em var(--pico-background-color-semitransparent);
+				border-radius: 1em;
+			}
 		}
-	}
-	@media (min-width: 479px) and (max-width: 957px) {
-		#hero {
-			background-image: url("{{ get_url(path='assets/hero_half.png') }}");
+
+		@media (max-width: 478px) {
+			#hero {
+				background-image: url("{{ get_url(path='assets/hero_quarter.png') }}");
+			}
 		}
-	}
-	@media (min-width: 958px) {
-		#hero {
-			background-image: url("{{ get_url(path='assets/hero.png') }}");
+		@media (min-width: 479px) and (max-width: 957px) {
+			#hero {
+				background-image: url("{{ get_url(path='assets/hero_half.png') }}");
+			}
+		}
+		@media (min-width: 958px) {
+			#hero {
+				background-image: url("{{ get_url(path='assets/hero.png') }}");
+			}
 		}
-	}
-</style>
-<div id="hero"></div>
-{% endblock header %} {% block content %}
-<h2 id="projects">Projects</h2>
+	</style>
+
+	{{ section.content | safe }}
+{% endblock header %}
 
-{{ macros::section_list(path="projects", link_text="(Curious to read more?)",
-link_classes="secondary")}} {% endblock content %}
+{% block content %}
+	<h2 id="projects">Projects</h2>
+
+	{{ macros::section_list(path="projects", link_text="(Curious to read more?)", link_classes="secondary")}}
+{% endblock content %}