From 4cbca021d4381d39cd89ff872d5c1488de41d050 Mon Sep 17 00:00:00 2001
From: Marie Birner <mb@studiomitte.com>
Date: Mon, 19 Feb 2024 15:05:57 +0100
Subject: [PATCH] [TASK] add btn-container & improve clickability of footer
 links

---
 output/style.css    | 31 ++++++++++++++++++++++---------
 templates/law.html  |  6 ++++--
 templates/style.css | 31 ++++++++++++++++++++++---------
 3 files changed, 48 insertions(+), 20 deletions(-)

diff --git a/output/style.css b/output/style.css
index 79890cb..2d30120 100644
--- a/output/style.css
+++ b/output/style.css
@@ -117,19 +117,34 @@ button {
   --pico-form-element-spacing-vertical: 0.25rem;
 }
 
+body > footer {
+  padding-block: calc(var(--pico-block-spacing-vertical) * 2);
+}
+
+/* approx 800px */
+.container {
+  max-width: 38rem;
+}
+
+.btn-container {
+  position: fixed;
+  bottom: 0rem;
+  right: 0rem;
+  padding: 1rem;
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+  background: linear-gradient(180deg, transparent, var(--pico-background-color), var(--pico-background-color));
+}
+
 .btn-open, 
 .btn-close {
-  position: fixed;
-  bottom: 1rem;
   font-size: .8rem;
+  display: inline-block;
 }
 
 .btn-open {
-  right: 9rem;
-}
-
-.btn-close {
-  right: 1rem;
+  margin-right: 1rem;
 }
 
 .par {
@@ -162,5 +177,3 @@ button {
   font-style: italic;
   padding: calc(var(--pico-spacing) / 3) 0;
 }
-
-
diff --git a/templates/law.html b/templates/law.html
index 179644b..f0fd4c6 100644
--- a/templates/law.html
+++ b/templates/law.html
@@ -15,8 +15,10 @@
 			</div>
 		</header>
 		<main class="container">
-			<button class="btn-open open-js">Alles öffnen</button>
-			<button class="btn-close close-js">Alles schließen</button>
+      <div class="btn-container">
+        <button class="btn-open open-js">Alles öffnen</button>
+        <button class="btn-close close-js">Alles schließen</button>
+      </div>
 			<h1><mark>{{title}}</mark></h1>
 			{{content}}
 		</main>
diff --git a/templates/style.css b/templates/style.css
index 79890cb..2d30120 100644
--- a/templates/style.css
+++ b/templates/style.css
@@ -117,19 +117,34 @@ button {
   --pico-form-element-spacing-vertical: 0.25rem;
 }
 
+body > footer {
+  padding-block: calc(var(--pico-block-spacing-vertical) * 2);
+}
+
+/* approx 800px */
+.container {
+  max-width: 38rem;
+}
+
+.btn-container {
+  position: fixed;
+  bottom: 0rem;
+  right: 0rem;
+  padding: 1rem;
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+  background: linear-gradient(180deg, transparent, var(--pico-background-color), var(--pico-background-color));
+}
+
 .btn-open, 
 .btn-close {
-  position: fixed;
-  bottom: 1rem;
   font-size: .8rem;
+  display: inline-block;
 }
 
 .btn-open {
-  right: 9rem;
-}
-
-.btn-close {
-  right: 1rem;
+  margin-right: 1rem;
 }
 
 .par {
@@ -162,5 +177,3 @@ button {
   font-style: italic;
   padding: calc(var(--pico-spacing) / 3) 0;
 }
-
-