added dropdown menu and about section

master
zhetic 4 years ago
parent ce546e1adf
commit 869697990e
  1. 29
      about.html
  2. 10
      catalog.html
  3. 44
      css/stylesheet.css
  4. 10
      search.html
  5. 10
      title.html

@ -8,7 +8,15 @@
</head> </head>
<body> <body>
<div id="header"> <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"> <form action="/search.html">
<input id="search_bar" type="search" name="title" placeholder="Search"> <input id="search_bar" type="search" name="title" placeholder="Search">
<button id="search_button" type="submit">Search</button> <button id="search_button" type="submit">Search</button>
@ -17,8 +25,23 @@
</div> </div>
<div id="content"> <div id="content">
<div style="position:relative;top:20px;"> <div style="display:block">
<p>Instance address:</p> <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> <input style="width:500px" id="address" placeholder="test.cynic.moe"></input>
<button onclick="update_address()">Update</button> <button onclick="update_address()">Update</button>
<button onclick="clear_instance()">Default</button> <button onclick="clear_instance()">Default</button>

@ -9,7 +9,15 @@
</head> </head>
<body> <body>
<div id="header"> <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"> <form action="/search.html">
<input id="search_bar" type="search" name="title" placeholder="Search"> <input id="search_bar" type="search" name="title" placeholder="Search">
<button id="search_button" type="submit">Search</button> <button id="search_button" type="submit">Search</button>

@ -61,11 +61,45 @@ a:visited {
overflow: hidden; overflow: hidden;
} }
#header #home { #header #menu {
position: relative; position: fixed;
height: 40%; top: 0;
top: 30%; left: 0;
left: 2em; 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 { #header #search_bar {

@ -10,7 +10,15 @@
</head> </head>
<body> <body>
<div id="header"> <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"/> <img id="logo" src="img/logo.png"/>
</div> </div>

@ -10,7 +10,15 @@
<body> <body>
<div id="header"> <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"> <form action="/search.html">
<input id="search_bar" type="search" name="title" placeholder="Search"> <input id="search_bar" type="search" name="title" placeholder="Search">
<button id="search_button" type="submit">Search</button> <button id="search_button" type="submit">Search</button>

Loading…
Cancel
Save