maltejur/hsarch
maltejur/hsarch
1
0
Fork 0
Code Activity

Neuer header

Browse source
This commit is contained in:
maltejur 2020-10-28 21:10:26 +01:00
parent 01e65734ce
commit 0e3365b49e
6 changed files with 89 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
hertzlinie_l.svg Normal file
View file

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Ebene_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="374.128px" height="21.311px" viewBox="0 0 374.128 21.311" enable-background="new 0 0 374.128 21.311" xml:space="preserve" preserveAspectRatio="none">
<g>
<line fill="none" stroke="#FFFFFF" stroke-width="0.75" x1="0" y1="13.944" x2="374.128" y2="13.944"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 643 B

14
hertzlinie_r.svg Normal file
View file

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Ebene_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="65.707px" height="21.311px" viewBox="0 0 65.707 21.311" enable-background="new 0 0 65.707 21.311" xml:space="preserve" preserveAspectRatio="none">
<g>
<path fill="none" stroke="#FFFFFF" stroke-width="0.75" d="M0,13.944h11.123l0.378-0.631l0.393-0.619l0.437,0.757l0.468,0.104
l0.833,0.798l0.351-2.933l0.201-2.481l0.172-3.02L14.448,4.5l0.059-1.515l0.51-1.543l0.473,2.27l0.193,1.274l0.17,4.235
l0.185,3.646l0.043,1.995l0.212,2.88l0.334,1.382l0.243,0.796l0.483-1.895l0.141-1.228l0.111-1.431l0.035-1.886
c0,0,0.211-1.558,0.486-1.182c0.282,0.384,0.902,1.485,0.902,1.485l0.342-1.469l0.486-1.644l0.48-1.106l0.667,1.086l0.529,2.779
l0.805,0.506h43.368"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

4
index.html
View file

@ -17,11 +17,13 @@
<body>
<div id="header">
<img src="./hertzlinie_l.svg" alt="" srcset="" class="welle-l" />
<img src="./hertzlinie_r.svg" alt="" srcset="" class="welle-r" />
<a href="#">
<h1>HertzSCHLAG Archiv</h1>
</a>
<nav>
<a href="#liste"><i class="fas fa-bars fa-lg"></i></a>
<a href="#liste" style="margin-left: 25px">Alle Ausgaben</a>
</nav>
</div>
<div id="main">

2
modules/ausgabe.js
View file

@ -10,7 +10,7 @@ export default async function Ausgabe(params) {
ausg["Cover"] = ausg["Ausgabe"] + ".jpg";
let pagehtml = `
<a class="back" href="#" onclick="window.history.back()">
<a class="back" onclick="window.history.back()">
<i class="fas fa-arrow-left"></i>
</a><br><br>
<img class="cover" src="${json.baseUrl}hs/images/${ausg["Cover"]}"></img>

6
modules/liste.js
View file

@ -2,12 +2,12 @@ export default async function Liste() {
const ret = document.createElement("div");
ret.classList.add("page");
const response = await fetch("ausgaben.json");
const response = await fetch("data.json");
const json = await response.json();
let listehtml =
"<a class='back' href='#' onclick='window.history.back()'><i class='fas fa-arrow-left'></i></a><h1>Artikelliste</h1><table><tr><th>Ausgabe</th><th>Thema</th></tr>";
json.forEach((i) => {
"<a class='back' onclick='window.history.back()'><i class='fas fa-arrow-left'></i></a><h1>Artikelliste</h1><table><tr><th>Ausgabe</th><th>Thema</th></tr>";
json.hs.forEach((i) => {
listehtml =
listehtml +
"<tr onclick='window.location=\"#ausgabe/" +

64
style.css
View file

@ -1,4 +1,4 @@
@import url("https://fonts.googleapis.com/css?family=Lato&display=swap");
@import url("https://use.typekit.net/iqo1nim.css");
html {
font-family: "Lato", sans-serif;
@ -43,9 +43,65 @@ body {
justify-content: space-between;
align-items: center;
padding: 1.5em;
padding-left: 3em;
transition: background-color 0.3s ease-in-out;
}
#header h1 {
font-family: "adobe-garamond-pro";
font-weight: 400 !important;
position: fixed;
left: 50px;
top: 9px;
}
#header nav {
position: fixed;
top: 33px;
right: 110px;
display: flex;
transition: filter 0.4s ease, opacity 0.4s ease;
}
#header nav .home {
transition: filter 0.4s ease, opacity 0.4s ease;
}
.open #header nav .home {
opacity: 0.6;
filter: blur(5px);
pointer-events: none;
}
#header nav a {
font-family: "adobe-garamond-pro";
font-weight: 400 !important;
font-size: 20px;
margin-left: 15px;
transition: transform 0.2s ease;
transform: translateY(0);
}
#header nav a:hover {
transform: translateY(-2px);
}
.welle-l {
position: fixed;
height: 30px;
width: calc(100vw - 120px);
top: 40px;
left: 0;
}
.welle-r {
position: fixed;
height: 30px;
width: 120px;
top: 40px;
right: 0;
}
.open #header {
background-color: rgba(0, 0, 0, 0);
}
@ -53,11 +109,6 @@ body {
#header a {
color: white;
text-decoration: none;
transition: color 0.2s ease;
}
#header nav a:hover {
color: gainsboro;
}
.grid {
@ -355,6 +406,7 @@ i {
}
.page .back {
cursor: pointer;
color: #969696;
}