From 8ea7f7b4a3deba1cd8e30c9445fb4c7f2c298217 Mon Sep 17 00:00:00 2001
From: thiloho <123883702+thiloho@users.noreply.github.com>
Date: Sun, 25 Aug 2024 18:47:20 +0200
Subject: [PATCH] Make nav sticky for blog template

---
 .../20240825133549_adjust_upload_function.sql |  6 +++---
 web-app/template-styles/blog-styles.css       | 21 +++++++++++++++++++
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/rest-api/db/migrations/20240825133549_adjust_upload_function.sql b/rest-api/db/migrations/20240825133549_adjust_upload_function.sql
index b15e618..1723a01 100644
--- a/rest-api/db/migrations/20240825133549_adjust_upload_function.sql
+++ b/rest-api/db/migrations/20240825133549_adjust_upload_function.sql
@@ -35,8 +35,7 @@ SECURITY DEFINER;
 GRANT EXECUTE ON FUNCTION api.upload_file (BYTEA) TO authenticated_user;
 
 -- migrate:down
-
-DROP FUNCTION api.upload_file(BYTEA);
+DROP FUNCTION api.upload_file (BYTEA);
 
 CREATE FUNCTION api.upload_file (BYTEA, OUT file_id UUID)
 AS $$
@@ -71,4 +70,5 @@ $$
 LANGUAGE plpgsql
 SECURITY DEFINER;
 
-GRANT EXECUTE ON FUNCTION api.upload_file (BYTEA) TO authenticated_user;
\ No newline at end of file
+GRANT EXECUTE ON FUNCTION api.upload_file (BYTEA) TO authenticated_user;
+
diff --git a/web-app/template-styles/blog-styles.css b/web-app/template-styles/blog-styles.css
index 60c0ea1..dc12fd0 100644
--- a/web-app/template-styles/blog-styles.css
+++ b/web-app/template-styles/blog-styles.css
@@ -3,12 +3,29 @@
   inline-size: min(100% - var(--space-m), 75ch);
 }
 
+nav {
+  position: sticky;
+  block-size: var(--space-xl);
+  display: flex;
+  align-items: center;
+  inset-block-start: 0;
+  background-color: var(--bg-primary);
+  border-block-end: var(--border-primary);
+}
+
 header > .container {
   display: flex;
   flex-direction: column;
   gap: var(--space-s);
 }
 
+header img {
+  inline-size: 100%;
+  block-size: 300px;
+  object-fit: cover;
+  object-position: center;
+}
+
 nav,
 header,
 main,
@@ -34,3 +51,7 @@ footer {
 .table-of-contents {
   margin-block-end: var(--space-s);
 }
+
+section {
+  scroll-margin-block-start: var(--space-xl);
+}