From 81be1414ef9269dcfed14eb8c47d0f8baa0cd075 Mon Sep 17 00:00:00 2001
From: Daniel Bulant <danbulant@gmail.com>
Date: Mon, 12 Dec 2022 17:01:14 +0100
Subject: [PATCH] improved about page styles

---
 src/routes/about/+page.svelte  |  8 +++--
 src/routes/about/navbar.svelte | 57 ++++++++++++++++++++++++++++++++++
 2 files changed, 63 insertions(+), 2 deletions(-)
 create mode 100644 src/routes/about/navbar.svelte

diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index 062f2b5..ba3f482 100644
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -1,10 +1,14 @@
+<script>
+    import Navbar from "./navbar.svelte";
+</script>
 <svelte:head>
 	<title>Mangadex search & downloader - About</title>
 	<meta name="description" content="About page. Read manga from Mangadex online, or download it as EPUB or CBZ file to read it on your e-reader." />
 </svelte:head>
 
-<main>
-    <h1>Manga reader</h1>
+<Navbar title="About" />
+
+<main style="padding-top: 6rem;">
     <a href="https://discord.gg/XKPbz5xRuK">Made by TechmandanCZ#3372</a>
 	
 	<hr>
diff --git a/src/routes/about/navbar.svelte b/src/routes/about/navbar.svelte
new file mode 100644
index 0000000..1dc1f2b
--- /dev/null
+++ b/src/routes/about/navbar.svelte
@@ -0,0 +1,57 @@
+<script lang="ts">
+    export var transparent: boolean = false;
+    export var title: string;
+</script>
+
+<div class="navbar" class:transparent>
+    <a href="/">←</a>
+    <span class="title">{title}</span>
+</div>
+
+<style>
+    .navbar {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 5rem;
+        background: rgb(0,0,0,0.9);
+        backdrop-filter: blur(25px);
+        z-index: 100;
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+        padding: 0 1rem;
+        transition: background 0.3s ease;
+        user-select: none;
+    }
+    .transparent.navbar {
+        background: none;
+        backdrop-filter: none;
+    }
+    .navbar a {
+        color: white;
+        font-size: 2rem;
+        transform: translateX(0);
+        transition: transform 0.2s ease;
+    }
+    .navbar a:hover, .navbar a:active, .navbar a:focus {
+        text-decoration: none;
+        transform: translateX(-0.5rem);
+        padding-right: 0.5rem;
+    }
+    .transparent .title {
+        opacity: 0;
+        user-select: none;
+    }
+    .title {
+        user-select: inherit;
+        opacity: 1;
+        transition: opacity 0.3s ease;
+        font-size: 1.5rem;
+        color: white;
+        font-weight: bold;
+        flex-grow: 1;
+        text-align: center;
+    }
+</style>
\ No newline at end of file