From 262cd8b897fa40854f0efa5f1c80c4bab1b1fefa Mon Sep 17 00:00:00 2001
From: James Tombleson <luther38@gmail.com>
Date: Sat, 13 Jul 2024 10:35:36 -0700
Subject: [PATCH] added more layout components

---
 components/bulma/hero.templ             | 10 -------
 components/bulma/layout/container.templ |  7 +++++
 components/bulma/layout/hero.templ      | 37 +++++++++++++++++++++++++
 components/bulma/layout/section.templ   |  9 ++++++
 components/bulma/section.templ          | 11 --------
 5 files changed, 53 insertions(+), 21 deletions(-)
 delete mode 100644 components/bulma/hero.templ
 create mode 100644 components/bulma/layout/container.templ
 create mode 100644 components/bulma/layout/hero.templ
 create mode 100644 components/bulma/layout/section.templ
 delete mode 100644 components/bulma/section.templ

diff --git a/components/bulma/hero.templ b/components/bulma/hero.templ
deleted file mode 100644
index ce5dd39..0000000
--- a/components/bulma/hero.templ
+++ /dev/null
@@ -1,10 +0,0 @@
-package bulma
-
-templ Hero(title, subtitle string) {
-	<section class="hero">
-		<div class="hero-body">
-			<p class="title">{ title }</p>
-			<p class="subtitle">{ subtitle }</p>
-		</div>
-	</section>
-}
diff --git a/components/bulma/layout/container.templ b/components/bulma/layout/container.templ
new file mode 100644
index 0000000..88ab181
--- /dev/null
+++ b/components/bulma/layout/container.templ
@@ -0,0 +1,7 @@
+package layout
+
+templ Container(breakpoint string) {
+	<div class={ "container", breakpoint }>
+		{ children... }
+	</div>
+}
diff --git a/components/bulma/layout/hero.templ b/components/bulma/layout/hero.templ
new file mode 100644
index 0000000..1dfd6a3
--- /dev/null
+++ b/components/bulma/layout/hero.templ
@@ -0,0 +1,37 @@
+package layout
+
+templ Hero(title, subtitle string) {
+	<section class="hero">
+		<div class="hero-body">
+			<p class="title">{ title }</p>
+			<p class="subtitle">{ subtitle }</p>
+		</div>
+	</section>
+}
+
+templ HeroSize(title, subtitle, size string) {
+	<section class={ "hero", size }>
+		<div class="hero-body">
+			<p class="title">{ title }</p>
+			<p class="subtitle">{ subtitle }</p>
+		</div>
+	</section>
+} 
+
+templ HeroColor(title, subtitle, color string) {
+	<section class={ "hero", color }>
+		<div class="hero-body">
+			<p class="title">{ title }</p>
+			<p class="subtitle">{ subtitle }</p>
+		</div>
+	</section>
+}
+
+templ HeroColorSize(title, subtitle, color, size string) {
+	<section class={ "hero", color, size }>
+		<div class="hero-body">
+			<p class="title">{ title }</p>
+			<p class="subtitle">{ subtitle }</p>
+		</div>
+	</section>
+}
\ No newline at end of file
diff --git a/components/bulma/layout/section.templ b/components/bulma/layout/section.templ
new file mode 100644
index 0000000..4775db4
--- /dev/null
+++ b/components/bulma/layout/section.templ
@@ -0,0 +1,9 @@
+package bulma
+
+// Creates a <section> object thats good to break up a page of content.
+templ Section(title, subtitle string) {
+	<section class="section">
+		<h1 class="title">{ title }</h1>
+		<h2 class="subtitle">{ subtitle }</h2>
+	</section>
+}
diff --git a/components/bulma/section.templ b/components/bulma/section.templ
deleted file mode 100644
index 1726976..0000000
--- a/components/bulma/section.templ
+++ /dev/null
@@ -1,11 +0,0 @@
-package bulma
-
-templ Section(title, subtitle string) {
-	<section class="section">
-		<h1 class="title">Section</h1>
-		<h2 class="subtitle">
-			A simple container to divide your page into <strong>sections</strong>, like
-			the one you're currently reading.
-		</h2>
-	</section>
-}