From 869697990e810a9ee82a3e0dd006e5bca2f3b195 Mon Sep 17 00:00:00 2001
From: zhetic <>
Date: Mon, 31 May 2021 22:27:08 +0300
Subject: [PATCH] added dropdown menu and about section

---
 about.html         | 37 ++++++++++++++++++++++++++++++-------
 catalog.html       | 10 +++++++++-
 css/stylesheet.css | 44 +++++++++++++++++++++++++++++++++++++++-----
 search.html        | 10 +++++++++-
 title.html         | 10 +++++++++-
 5 files changed, 96 insertions(+), 15 deletions(-)
diff --git a/about.html b/about.html
index 120be80..6192d0d 100644
--- a/about.html
+++ b/about.html
@@ -8,7 +8,15 @@
 </head>
 <body>
     <div id="header">
-        <a href="./catalog.html"><img id="home" src="img/home.png"/></a>
+	<div id="menu">
+	    <img id="menu-icon" src="img/home.png"/>
+	    <div id="menu-items">
+	        <a href="./catalog.html">Catalog</a>
+		<a href="./search.html">Search</a>
+		<a href="">Tags</a>
+		<a href="./about.html">About</a>
+	    </div>
+	</div>
  	<form action="/search.html">
                 <input id="search_bar" type="search" name="title" placeholder="Search">
                 <button id="search_button" type="submit">Search</button>
@@ -17,12 +25,27 @@
     </div>
 
     <div id="content">
-	<div style="position:relative;top:20px;">
-		<p>Instance address:</p>
-		<input style="width:500px" id="address" placeholder="test.cynic.moe"></input>
-		<button onclick="update_address()">Update</button>
-		<button onclick="clear_instance()">Default</button>
-		<p>Current: </p><p id="instance_addr"></p>
+	<div style="display:block">
+	    <h2>About</h2>	
+	    <p>
+	    This site is licensed under the MIT free software license, and is accessible through <a href="https://github.com/a-manga-thing"><u>our github</u></a>.
+	    </p>
+	    <p>
+	    Mangaloid operates as a network of instances, each serving a subset of manga. Our example interface pulls all it's metadata from the <a href="https://test.cynic.moe/info"><u>REST api</u></a> of one of these hosts. You are free to host your own instance or interface as you see fit.
+	    </p>
+	    <p>
+	    Images are stored and loaded in a distributed manner via a number of <a href="https://ipfs.io"><u>IPFS</u></a> nodes and gateways hosted by volunteers. The easiest way to improve loading times is to host your own node.
+	    </p>
+	    <p>
+	    Feel free to stop by our IRC channel if you have questions: irc.rizon.net #mangaloid
+	    </p>
+	</div>
+	<div style="display:block;position:relative;">
+	    <h2>Instance address:</h2>
+	    <input style="width:500px" id="address" placeholder="test.cynic.moe"></input>
+	    <button onclick="update_address()">Update</button>
+	    <button onclick="clear_instance()">Default</button>
+	    <p>Current: </p><p id="instance_addr"></p>
 	</div>
         <div id="footer">
         </div>
diff --git a/catalog.html b/catalog.html
index 8d737ac..44f2e73 100644
--- a/catalog.html
+++ b/catalog.html
@@ -9,7 +9,15 @@
 </head>
 <body>
     <div id="header">
-        <a href="./catalog.html"><img id="home" src="img/home.png"/></a>
+        <div id="menu">
+            <img id="menu-icon" src="img/home.png"/>
+            <div id="menu-items">
+                <a href="./catalog.html">Catalog</a>
+                <a href="./search.html">Search</a>
+                <a href="">Tags</a>
+                <a href="./about.html">About</a>
+            </div>
+        </div>
 	<form action="/search.html">
 		<input id="search_bar" type="search" name="title" placeholder="Search">
 		<button id="search_button" type="submit">Search</button>
diff --git a/css/stylesheet.css b/css/stylesheet.css
index 9d3440a..ebdbf59 100644
--- a/css/stylesheet.css
+++ b/css/stylesheet.css
@@ -61,11 +61,45 @@ a:visited {
     overflow: hidden;
 }
 
-#header #home {
-    position: relative;
-    height: 40%;
-    top: 30%;
-    left: 2em;
+#header #menu {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 5em;
+    height: 5em;
+}
+
+#header #menu #menu-icon {
+    position: fixed;
+    top: 1.5em;
+    left: 1.5em;
+    height: 2em;
+    width: 2em;
+}
+
+#header #menu #menu-items {
+    position: fixed;
+    display: none;
+    top: 5em;
+    width: 250px;
+    height: auto;
+    z-index: 1;
+}
+
+#header #menu #menu-items a {
+    display: block;
+    color: black;
+    background-color: var(--light-accent);
+    font-size: 15px;
+    padding: 15px;
+}
+
+#header #menu:hover #menu-items {
+    display: block;
+}
+
+#header #menu #menu-items a:hover {
+    background-color: var(--medium-grey);
 }
 
 #header #search_bar {
diff --git a/search.html b/search.html
index 152bb03..2a50fd6 100644
--- a/search.html
+++ b/search.html
@@ -10,7 +10,15 @@
 </head>
 <body>
     <div id="header">
-        <a href="./catalog.html"><img id="home" src="img/home.png"/></a>
+	<div id="menu">
+            <img id="menu-icon" src="img/home.png"/>
+            <div id="menu-items">
+                <a href="./catalog.html">Catalog</a>
+                <a href="./search.html">Search</a>
+                <a href="">Tags</a>
+                <a href="./about.html">About</a>
+            </div>
+        </div>
         <img  id="logo" src="img/logo.png"/>
     </div>
 
diff --git a/title.html b/title.html
index 5838c5d..f33458a 100644
--- a/title.html
+++ b/title.html
@@ -10,7 +10,15 @@
 <body>
 
     <div id="header">
-        <a href="./catalog.html"><img id="home" src="img/home.png"/></a>
+	<div id="menu">
+            <img id="menu-icon" src="img/home.png"/>
+            <div id="menu-items">
+                <a href="./catalog.html">Catalog</a>
+                <a href="./search.html">Search</a>
+                <a href="">Tags</a>
+                <a href="./about.html">About</a>
+            </div>
+        </div>
  	<form action="/search.html">
                 <input id="search_bar" type="search" name="title" placeholder="Search">
                 <button id="search_button" type="submit">Search</button>
