feat: hero image, divider, toggle move

aaronczichon · Mar 22, 2024 · fd74cee · fd74cee
1 parent 33be658
commit fd74cee
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 12 deletions.
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
@@ -7,7 +7,9 @@
 	"features": {
 		"ghcr.io/devcontainers-community/npm-features/prettier:1": {}
 	},
-	"mounts": [],
+	"mounts": [
+    "source=${localEnv:HOME}/sourcecode/devcontainer-sharing,target=/workspaces/shared,type=bind,consistency=cached"
+	],
 	"customizations": {
 		"vscode": {
 			"extensions": ["esbenp.prettier-vscode", "mutantdino.resourcemonitor", "astro-build.astro-vscode"]

diff --git a/design/src/index.html b/design/src/index.html
@@ -61,6 +61,7 @@ <h1>Hi I'm Aaron,</h1>
 			<br /><br />
 			Want to talk to me? Book a slot if you like. I would love to chat :)
 		</article>
+		<div class="divider"></div>
 		<h2>Newest entries</h2>
 		<div class="entry-grid">
 			<a href="blog-entry.html" class="entry">

diff --git a/design/src/styles/common/divider.css b/design/src/styles/common/divider.css
@@ -0,0 +1,5 @@
+.divider {
+  width: 100%;
+  border-top: 1px solid var(--primary-color-light);
+  margin: 16px 0 16px 0;
+}
diff --git a/design/src/styles/index.css b/design/src/styles/index.css
@@ -6,6 +6,7 @@
 @import './common/fun.css';
 @import './common/utils.css';
 @import './common/code.css';
+@import './common/divider.css';
 
 @import './layout/main.css';
 @import './layout/hero.css';

diff --git a/personal/src/components/ColorSchemeToggle.astro b/personal/src/components/ColorSchemeToggle.astro
@@ -9,9 +9,9 @@
   .theme-switch-container {
     position: fixed;
     right: 0;
-    top: 0;
+    bottom: 0;
     font-size: 0.8rem;
-    margin: 8px 8px 0 0;
+    margin: 8px 8px 8px 0;
   }
   /**
   * On smaller screens the toggle should be centered on top of the page

diff --git a/personal/src/components/Divider.astro b/personal/src/components/Divider.astro
@@ -0,0 +1,5 @@
+---
+const { margin } = Astro.props;
+---
+
+<div class="divider" style={"margin: " + margin}></div>
diff --git a/personal/src/layouts/StartPage.astro b/personal/src/layouts/StartPage.astro
@@ -2,24 +2,24 @@
 import Layout from "../layouts/Layout.astro";
 import Hero from "../components/Hero.astro";
 import BlogEntryList from "../components/BlogEntryList.astro";
+import Divider from "../components/Divider.astro";
+import HeroImage from "../resources/hero.jpeg";
 
 const { frontmatter } = Astro.props;
 ---
 
 <Layout title={"Aaron Czichon - " + frontmatter.title}>
-  {
-    frontmatter.image ? (
-      <Hero url={frontmatter.image.url} alt={frontmatter.image.alt} />
-    ) : (
-      ""
-    )
-  }
+  <Hero
+    image={HeroImage}
+    alt="Showing Aaron in the forebround on the right side in a dark green hoodie with a sunny landscape in the background"
+  />
   <main class="container">
     <article>
       <slot />
     </article>
-    <h2 style="padding-top: 32px">My latest blog entries</h2>
-    <BlogEntryList limit="5" />
+    <Divider margin="32px 0 32px 0" />
+    <h2>My latest blog entries</h2>
+    <BlogEntryList limit="4" />
     <a href="/blog" style="padding-bottom: 32px">read more...</a>
   </main>
 </Layout>
diff --git a/personal/src/resources/hero.jpeg b/personal/src/resources/hero.jpeg