use correct url

use different base url
Revert "update dependencies"
2023-07-15 13:33:29 +02:00 · 2023-07-15 13:33:29 +02:00 · 2023-07-15 13:33:28 +02:00 · 2023-07-15 13:33:28 +02:00 · 2023-07-15 13:33:28 +02:00 · 2023-07-15 13:33:28 +02:00
29 changed files with 5388 additions and 160 deletions
--- a/README.md
+++ b/README.md
@ -0,0 +1,26 @@
+# HertzSCHLAG Archiv
+
+## Ausgabe hinzufügen
+
+### (0. Vorraussetzungen)
+
+- Linux oder WSL mit Git, Git LFS, GhostScript und ImageMagick ([dieses](https://stackoverflow.com/a/59193253) Problem beachten)
+- Schreibzugriff auf dieses Repo
+
+### 1. `data.json` aktualisieren
+
+In `assets/data.json` die relevanten Daten der Ausgabe einfügen.
+
+### 2. PDF hinzufügen
+
+Um ein PDF hinzuzufügen, `scripts/add_pdf.sh` ausführen und bei Nachfrage gleich änderungen commiten. Beispiel:
+
+```
+scripts/add_pdf.sh ~/Downloads/hs_ausgabe81.pdf hertzschlag 81
+```
+
+(Ist nen Bash script, also nur auf Linux/OSX/WSL)
+
+### 3. Änderungen pushen
+
+Mit `git push` Änderungen pushen, die Website sollte über Vercel automatisch aktualisiert werden.
--- a/assets/data.json
+++ b/assets/data.json
@ -1,5 +1,5 @@
 {
-  "baseUrl": "https://files.hertzschlag.eu/",
+  "baseUrl": "https://assets.hsarch.polar.onl/",
  "hertzschlag": [
    {
      "Ausgabe": "1",
@ -9,8 +9,7 @@
      "Chefredakteur(-e)": "Steffen Micheel",
      "Umschlag/Innenteil": "SW/SW",
      "Preis": "0,50 DM",
-      "Auflage": null,
-      "yumpu": "BN8T6Zhi1GqOInvo"
+      "Auflage": null
    },
    {
      "Ausgabe": "2",
@ -20,8 +19,7 @@
      "Chefredakteur(-e)": "Steffen Micheel",
      "Umschlag/Innenteil": "SW/SW",
      "Preis": "0,50 DM",
-      "Auflage": null,
-      "yumpu": "2ZH4Djo8V3RsNBah"
+      "Auflage": null
    },
    {
      "Ausgabe": "3",
@ -857,8 +855,7 @@
      "Chefredakteur(-e)": "Richard Bendler",
      "Umschlag/Innenteil": "Farbe/Farbe",
      "Preis": "1,00 €",
-      "Auflage": 500,
-      "yumpu": "pea6oUMFXRNfg9jP"
+      "Auflage": 500
    },
    {
      "Ausgabe": "81",
@ -869,6 +866,16 @@
      "Umschlag/Innenteil": "Farbe/Farbe",
      "Preis": "2,00 €",
      "Auflage": 300
+    },
+    {
+      "Ausgabe": "82",
+      "Thema": "Nostalgie",
+      "Seitenzahl": "54",
+      "Erscheinungsdatum": "Dez.-22",
+      "Chefredakteur(-e)": "Philipp Mattke",
+      "Umschlag/Innenteil": "Farbe/Farbe",
+      "Preis": "2,00 €",
+      "Auflage": 300
    }
  ],
  "hertzblatt": [
@ -977,7 +984,25 @@
      "Name": "Corona edition No/1",
      "Erscheinungsdatum": "25. März 2021",
      "Ausgabe": "Corona-1",
-      "Web": "https://blatt.hertzschlag.eu/"
+      "Web": "https://hertzblatt.vercel.app"
+    },
+    {
+      "Name": "2022-1",
+      "Ausgabe": "2022-1",
+      "Erscheinungsdatum": "29. Juni 2022",
+      "Preis": "0,20 €"
+    },
+    {
+      "Name": "2022-2",
+      "Ausgabe": "2022-2",
+      "Erscheinungsdatum": "1. Juli 2022",
+      "Preis": "0,20 €"
+    },
+    {
+      "Name": "2022-3",
+      "Ausgabe": "2022-3",
+      "Erscheinungsdatum": "5. Juli 2022",
+      "Preis": "0,20 €"
    }
  ]
 }
--- a/assets/font-awesome.css
+++ b/assets/font-awesome.css
--- a/assets/fonts/adobe-garamond-pro.otf
+++ b/assets/fonts/adobe-garamond-pro.otf
--- a/assets/fonts/adobe-garamond-pro.woff
+++ b/assets/fonts/adobe-garamond-pro.woff
--- a/assets/fonts/adobe-garamond-pro.woff2
+++ b/assets/fonts/adobe-garamond-pro.woff2
--- a/assets/fonts/fontawesome-webfont.eot
+++ b/assets/fonts/fontawesome-webfont.eot
--- a/assets/fonts/fontawesome-webfont.svg
+++ b/assets/fonts/fontawesome-webfont.svg
--- a/assets/fonts/fontawesome-webfont.ttf
+++ b/assets/fonts/fontawesome-webfont.ttf
--- a/assets/fonts/fontawesome-webfont.woff
+++ b/assets/fonts/fontawesome-webfont.woff
--- a/assets/fonts/fontawesome-webfont.woff2
+++ b/assets/fonts/fontawesome-webfont.woff2
--- a/embedTest.html
+++ b/embedTest.html
@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <style>
+      body {
+        max-width: 1000px;
+        margin: auto;
+        padding: 50px;
+      }
+    </style>
+  </head>
+  <body>
+    <iframe
+      src="http://localhost:1234/embed.html"
+      height="250px"
+      width="100%"
+      frameborder="0"
+    />
+  </body>
+</html>
--- a/package.json
+++ b/package.json
@ -5,8 +5,8 @@
  "author": "maltejur <maltejur@web.de>",
  "license": "MIT",
  "scripts": {
-    "dev": "parcel serve src/index.html",
-    "build": "parcel build src/index.html"
+    "dev": "parcel serve src/*.html",
+    "build": "parcel build src/*.html"
  },
  "dependencies": {
    "nprogress": "^0.2.0"
--- a/src/embed.css
+++ b/src/embed.css
@ -0,0 +1,25 @@
+body {
+  height: unset;
+}
+
+#main {
+  position: block;
+  height: 100vh !important;
+  padding-top: 0 !important;
+  overflow-y: hidden !important;
+  overflow-x: scroll;
+}
+
+.grid {
+  height: 100% !important;
+  max-height: 100% !important;
+  padding-top: 0 !important;
+  display: flex;
+  justify-content: left;
+  width: fit-content !important;
+  overflow-y: hidden !important;
+}
+
+.module {
+  width: max-content !important;
+}
--- a/src/embed.html
+++ b/src/embed.html
@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./style.css" />
+    <link rel="stylesheet" href="./embed.css" />
+  </head>
+  <body>
+    <div id="main"></div>
+    <script src="./embed.ts" type="module"></script>
+  </body>
+</html>
--- a/src/embed.ts
+++ b/src/embed.ts
@ -0,0 +1,12 @@
+import Home from "./modules/home";
+import Router from "./modules/router";
+
+new Router(
+  document.querySelector("#main")!,
+  {
+    "": () => Home({ embed: "true" }),
+  },
+  {
+    newUrl: "https://hsarch.hhgym.de",
+  }
+);
--- a/src/index.html
+++ b/src/index.html
@ -1,26 +1,27 @@
 <!DOCTYPE html>
 <html>
-
  <head>
-  <meta name="viewport" content="min-width=400px, width=device-width, initial-scale = 1.0, maximum-scale=1.0"
-    charset="utf-8" />
+    <meta
+      name="viewport"
+      content="min-width=400px, width=device-width, initial-scale = 1.0, maximum-scale=1.0"
+      charset="utf-8"
+    />
    <link rel="stylesheet" href="./style.css" />
-  <script src="https://kit.fontawesome.com/c6918a20c8.js" crossorigin="anonymous"></script>
-  <link rel="stylesheet" href="https://use.typekit.net/iqo1nim.css">
+    <link rel="stylesheet" href="../assets/font-awesome.css" />
    <title>HertzSCHLAG Archiv</title>
-  <link rel="icon" type="image/png" href="../assets/favicon.png" />
+    <link rel="icon" type="image/png" href="/assets/favicon.png" />
  </head>

  <body>
    <div id="header">
-    <img src="../assets/hertzlinie_l.svg" class="welle-l" />
-    <img src="../assets/hertzlinie_r.svg" class="welle-r" />
+      <img src="/assets/hertzlinie_l.svg" class="welle-l" />
+      <img src="/assets/hertzlinie_r.svg" class="welle-r" />
      <div id="innerHeader">
-      <a href="#">
+        <a href="#hertzschlag">
          <h1>HertzSCHLAG Archiv</h1>
        </a>
        <nav>
-        <a href="#liste" style="margin-left: 25px">Alle Ausgaben</a>
+          <a href="#about">Impressum</a>
        </nav>
      </div>
    </div>
@ -33,5 +34,4 @@
    </div>
    <script src="./script.ts" type="module"></script>
  </body>
-
 </html>
--- a/src/modules/about.ts
+++ b/src/modules/about.ts
@ -1,7 +1,8 @@
+import { baseUrl } from "../../assets/data.json";
+
 export default function About() {
  const ret = document.createElement("div");
  ret.classList.add("pagewrapper");
-  ret.innerHTML =
-    "<div class='page'><img class='banner' src='https://files.hertzschlag.eu/hertzschlag/images/banner.jpg'></img><h1>Impressum</h1>Malte Jürgens<br>Bergmannstraße 70<br>10961 Berlin<h3>Kontakt:</h3><a href='mailto:hertzschlag@hhgym.de'>hertzschlag@hhgym.de</a><br><a href='mailto:maltejur@web.de'>maltejur@web.de</a></div>";
+  ret.innerHTML = `<div class='page'><img class='banner' src='${baseUrl}/hertzschlag/images/banner.jpg'></img><h1>Impressum</h1>Malte Jürgens<br>Kurfürstenstr. 12<br>52066 Aachen<h3>Kontakt:</h3><a href='mailto:hertzschlag@hhgym.de'>hertzschlag@hhgym.de</a><br><a href='mailto:maltejur@dismail.de'>maltejur@dismail.de</a></div>`;
  return ret;
 }
--- a/src/modules/ausgabeHertzblatt.ts
+++ b/src/modules/ausgabeHertzblatt.ts
@ -1,4 +1,3 @@
-import { checkFile } from "./utils";
 import json from "../../assets/data.json";
 import Page from "./page";

@ -7,7 +6,10 @@ export default function AusgabeHertzblatt(params) {

  const ausg = json.hertzblatt.find((i) => i["Ausgabe"] == params.id);

-  if (ausg) {
+  if (ausg === undefined) {
+    throw new Error(params.id + " not found");
+  }
+
  let pagehtml = `
    <img class="cover" src="${json.baseUrl}hertzblatt/images/${ausg.Ausgabe}.jpg"></img>
    <h1>HertzBLATT ${ausg["Name"]}</h1>
@ -17,36 +19,29 @@ export default function AusgabeHertzblatt(params) {
      pagehtml = pagehtml + "<p><b>" + i + ":</b> " + ausg[i] + "</p>";
    }
  }
+
  if (ausg.Web)
    pagehtml += `<a class="button" href="${ausg.Web}">
-    <i class="fas fa-link"></i>Link
+    <i class="fa fa-link"></i>Link
  </a>`;
-    checkFile(`${json.baseUrl}hertzblatt/pdf/${ausg.Ausgabe}.pdf`).then(
-      (exists) => {
-        if (exists) {
-          ret.innerHTML +=
-            // prettier-ignore
-            `
+
+  pagehtml += `
 <a class="button" href="#hertzblatt/${ausg.Ausgabe}/pdf">
-            <i class="fas fa-file-pdf"></i>PDF Anzeigen
+  <i class="fa fa-file-pdf-o"></i>PDF Anzeigen
 </a>
 <button>
-            <i class="fas fa-download"></i>Download
+  <i class="fa fa-download"></i>Download
  <div class="dropdown">
-              <a onclick="window.open('${json.baseUrl}hertzblatt/pdf/compressed/${ausg.Ausgabe}.pdf?download', '_self');">
-                <i class="fas fa-file-download"></i>Niedrige Qualität
+    <a onclick="window.open('${json.baseUrl}hertzblatt/pdf/compressed/${ausg.Ausgabe}.pdf', '_self');">
+      <i class="fa fa-file-download"></i>Niedrige Qualität
    </a>
-              <a onclick="window.open('${json.baseUrl}hertzblatt/pdf/${ausg.Ausgabe}.pdf?download', '_self');">
-                <i class="fas fa-file-download"></i>Hohe Qualität
+    <a onclick="window.open('${json.baseUrl}hertzblatt/pdf/${ausg.Ausgabe}.pdf', '_self');">
+      <i class="fa fa-file-download"></i>Hohe Qualität
    </a>
  </div>
-          </button>
-          `;
-        }
-      }
-    );
+</button>`;

  ret.innerHTML = pagehtml;
-  }
+
  return Page(ret);
 }
--- a/src/modules/ausgabeHertzschlag.ts
+++ b/src/modules/ausgabeHertzschlag.ts
@ -1,4 +1,3 @@
-import { checkFile } from "./utils";
 import json from "../../assets/data.json";
 import Page from "./page";

@ -7,6 +6,10 @@ export default function AusgabeHertzschlag(params) {

  const ausg = json.hertzschlag.find((i) => i["Ausgabe"] == params.id);

+  if (ausg === undefined) {
+    throw new Error(params.id + " not found");
+  }
+
  let pagehtml = `
  <img class="cover" src="${json.baseUrl}hertzschlag/images/${ausg["Ausgabe"]}.jpg"></img>
  <h2>HertzSCHLAG ${ausg["Ausgabe"]}</h2>
@ -23,31 +26,29 @@ export default function AusgabeHertzschlag(params) {
      pagehtml = pagehtml + "<p><b>" + i + ":</b> " + ausg[i] + "</p>";
    }
  }
-  checkFile(`${json.baseUrl}hertzschlag/pdf/${ausg["Ausgabe"]}.pdf`).then(
-    (exists) => {
-      if (exists) {
-        ret.innerHTML +=
-          // prettier-ignore
-          `
+
+  pagehtml += `
 <a class="button" href="#hertzschlag/${ausg["Ausgabe"]}/pdf">
-          <i class="fas fa-file-pdf"></i>PDF Anzeigen
+  <i class="fa fa-file-pdf-o"></i>PDF Anzeigen
 </a>
 <button>
-          <i class="fas fa-download"></i>Download
+  <i class="fa fa-download"></i>Download
  <div class="dropdown">
-            <a href="${json.baseUrl}hertzschlag/pdf/compressed/${ausg["Ausgabe"]}.pdf?download">
-              <i class="fas fa-file-download"></i>Niedrige Qualität
+    <a href="${json.downloadUrl || json.baseUrl}hertzschlag/pdf/compressed/${
+    ausg["Ausgabe"]
+  }.pdf">
+      <i class="fa fa-file"></i>Niedrige Qualität
    </a>
-            <a href="${json.baseUrl}hertzschlag/pdf/${ausg["Ausgabe"]}.pdf?download">
-              <i class="fas fa-file-download"></i>Hohe Qualität
+    <a href="${json.downloadUrl || json.baseUrl}hertzschlag/pdf/${
+    ausg["Ausgabe"]
+  }.pdf">
+      <i class="fa fa-file"></i>Hohe Qualität
    </a>
  </div>
 </button>
 `;
-      }
-    }
-  );

  ret.innerHTML = pagehtml;
+
  return Page(ret);
 }
--- a/src/modules/headerHertzblatt.ts
+++ b/src/modules/headerHertzblatt.ts
@ -5,9 +5,13 @@ export default function HeaderHertzschlag() {
  <a href="#hertzblatt">
    <h1>hertz heute / HertzBLATT Archiv</h1>
  </a>
+  <input type="checkbox" id="nav-toggle" name="nav-toggle" />
  <nav>
    <a href="#" style="margin-left: 25px">HertzSCHLAG Archiv</a>
+    <a href="#about" style="margin-left: 25px">Impressum</a>
+    <label for="nav-toggle">✕</label>
  </nav>
+  <label for="nav-toggle">☰</label>
  `;

  return el;
--- a/src/modules/headerHertzschlag.ts
+++ b/src/modules/headerHertzschlag.ts
@ -5,10 +5,14 @@ export default function HeaderHertzschlag() {
  <a href="#">
    <h1>HertzSCHLAG Archiv</h1>
  </a>
+  <input type="checkbox" id="nav-toggle" name="nav-toggle" />
  <nav>
    <a href="#hertzblatt" style="margin-left: 25px">HertzBLATT Archiv</a>
    <a href="#hertzschlag/liste" style="margin-left: 25px">Alle Ausgaben</a>
+    <a href="#about" style="margin-left: 25px">Impressum</a>
+    <label for="nav-toggle">✕</label>
  </nav>
+  <label for="nav-toggle">☰</label>
  `;

  return el;
--- a/src/modules/home.ts
+++ b/src/modules/home.ts
@ -1,13 +1,19 @@
 import json from "../../assets/data.json";
+import { Params } from "../models";

-export default function Home() {
+export default function Home(params: Params) {
  const ret = document.createElement("div");
  ret.classList.add("grid");
  let html = "";

-  json.hertzschlag.forEach((i) => {
+  let ausgaben = json.hertzschlag;
+  if (params.embed) {
+    ausgaben = ausgaben.reverse().slice(0, 10);
+  }
+
+  ausgaben.forEach((i) => {
    html += `
-      <a class="module" href="#hertzschlag/${i.Ausgabe}">
+      <a class="module" href="/#hertzschlag/${i.Ausgabe}" target="_top">
          <img src="${json.baseUrl}hertzschlag/images/${i.Ausgabe}.jpg" class="moduleImg"></img>
          <div class="moduleLabel">
              <h3>HS ${i.Ausgabe}</h3>
--- a/src/modules/page.ts
+++ b/src/modules/page.ts
@ -3,7 +3,7 @@ export default function Page(content: HTMLElement) {

  el.classList.add("page");
  el.innerHTML =
-    '<div class="back" onclick="window.history.back()"><i class="fas fa-arrow-left" aria-hidden="true"></i></div>';
+    '<div class="back" onclick="window.history.back()"><i class="fa fa-arrow-left" aria-hidden="true"></i></div>';
  el.appendChild(content);

  return el;
--- a/src/modules/pdf.ts
+++ b/src/modules/pdf.ts
@ -6,7 +6,7 @@ export default function Pdf(params: Params, type = "hertzschlag") {
  ret.classList.add("iframe");

  const iframe = document.createElement("iframe");
-  iframe.src = `${json.baseUrl}${type}/pdf/compressed/${params.id}.pdf`;
+  iframe.src = `https://mozilla.github.io/pdf.js/web/viewer.html?file=${json.baseUrl}${type}/pdf/compressed/${params.id}.pdf?view`;

  ret.appendChild(iframe);
  return ret;
--- a/src/modules/router.ts
+++ b/src/modules/router.ts
@ -9,13 +9,16 @@ export default class Router {
  constructor(
    element: HTMLElement,
    routes: Routes,
-    onpagechange: (route: string) => void,
-    lazy = false
+    options: {
+      onpagechange?: (route: string) => void;
+      lazy?: boolean;
+      newUrl?: string;
+    } = {}
  ) {
    this.routes = routes;
    this.el = element;
-    this.onpagechange = onpagechange;
-    this.lazy = lazy;
+    this.onpagechange = options.onpagechange || (() => {});
+    this.lazy = options.lazy || false;
    window.addEventListener("hashchange", this.onhashchange.bind(this));
    this.onhashchange();
  }
@ -58,6 +61,8 @@ export default class Router {
    if (!this.lazy && !didNavigate) {
      this.el.innerHTML = "";
    }
+    const navToggle = document.getElementById("nav-toggle") as HTMLInputElement;
+    if (navToggle && navToggle.checked) navToggle.checked = false;
    this.onpagechange(hash.slice(1));
  }
 }
--- a/src/modules/utils.ts
+++ b/src/modules/utils.ts
@ -1,13 +1,3 @@
-export function checkFile(url) {
-  return new Promise((resolve) => {
-    fetch(url, {
-      method: "HEAD",
-    })
-      .catch(() => resolve(false))
-      .then(() => resolve(true));
-  });
-}
-
 export function downloadFile(sUrl: string) {
  var link = document.createElement("a");
  link.href = sUrl;
--- a/src/script.ts
+++ b/src/script.ts
@ -11,21 +11,17 @@ import Pdf from "./modules/pdf";
 import NProgress from "nprogress/nprogress";
 import "nprogress/nprogress.css";

-new Router(
-  document.querySelector("#contentinner"),
-  {
+new Router(document.querySelector("#contentinner")!, {
  "hertzschlag/:id": AusgabeHertzschlag,
  "hertzschlag/:id/pdf": Pdf,
  "hertzschlag/liste": Liste,
  "hertzblatt/:id": AusgabeHertzblatt,
  "hertzblatt/:id/pdf": (params) => Pdf(params, "hertzblatt"),
  about: About,
-  },
-  () => {}
-);
+});

 new Router(
-  document.querySelector("#home"),
+  document.querySelector("#home")!,
  {
    "": Home,
    hertzschlag: Home,
@ -33,18 +29,20 @@ new Router(
    hertzblatt: HomeHertzblatt,
    "hertzblatt/::": HomeHertzblatt,
  },
-  (route) => {
+  {
+    onpagechange(route) {
      if (route == "" || route == "hertzschlag" || route == "hertzblatt") {
        document.body.classList.remove("open");
      } else {
        document.body.classList.add("open");
      }
    },
-  true
+    lazy: true,
+  }
 );

 new Router(
-  document.querySelector("#innerHeader"),
+  document.querySelector("#innerHeader")!,
  {
    "": HeaderHertzschlag,
    hertzschlag: HeaderHertzschlag,
@ -52,8 +50,9 @@ new Router(
    hertzblatt: HeaderHertzblatt,
    "hertzblatt/::": HeaderHertzblatt,
  },
-  () => {},
-  true
+  {
+    lazy: true,
+  }
 );

 // Entfert Ladebalken
@ -63,10 +62,10 @@ document.addEventListener("readystatechange", (event) => {
  }
 });

-document.getElementById("back").addEventListener("click", () => {
+document.getElementById("back")!.addEventListener("click", () => {
  window.location.hash = document
-    .getElementById("home")
-    .getAttribute("currentroute");
+    .getElementById("home")!
+    .getAttribute("currentroute")!;
 });

 // Startet Ladebalken
--- a/src/style.css
+++ b/src/style.css
@ -1,3 +1,14 @@
+@font-face {
+  font-family: "adobe-garamond-pro";
+  src: url("../assets/fonts/adobe-garamond-pro.woff2") format("woff2"),
+    url("../assets/fonts/adobe-garamond-pro.woff") format("woff"),
+    url("../assets/fonts/adobe-garamond-pro.otf") format("opentype");
+  font-display: auto;
+  font-style: normal;
+  font-weight: 400;
+  font-stretch: normal;
+}
+
 html {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
@ -93,6 +104,14 @@ body {
  color: rgba(255, 255, 255, 0.8);
 }

+#header input {
+  display: none;
+}
+
+#header label {
+  display: none;
+}
+
 .welle-l {
  position: fixed;
  height: 30px;
@ -123,7 +142,7 @@ body {
  overflow-x: hidden;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 0;
-  height: calc(100% - 5em);
+  max-height: calc(100% - 5em);
  padding-top: 5em;
 }

@ -161,24 +180,33 @@ body {
  transform: translateY(-4px);
 }

+.impressum {
+  margin: auto;
+  color: white;
+}
+
 button,
 .button {
-  background-color: rgb(201, 2, 2);
  border: none;
  border-radius: 8px;
-  color: white;
-  padding: 15px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
-  cursor: pointer;
  margin-right: 1em;
  margin-top: 1em;
-  transition: background-color 0.2s ease;
+  padding: 15px 20px;
  position: relative;
 }

+button,
+.button {
+  background-color: rgb(201, 2, 2);
+  color: white;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
 button:hover,
 .button:hover {
  background-color: darkred;
@ -224,6 +252,22 @@ button:focus .dropdown,
  transform: translateY(0);
 }

+@media only screen and (max-width: 40em) {
+  .dropdown,
+  button:focus .dropdown,
+  .button:focus .dropdown,
+  .dropdown:hover {
+    position: fixed !important;
+    height: fit-content;
+    top: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    margin: auto;
+    padding: 10px;
+  }
+}
+
 iframe {
  width: 100%;
  height: 100%;
@ -274,10 +318,45 @@ iframe {
  }
 }

-@media only screen and (max-width: 800px) {
+@media only screen and (max-width: 900px) {
  #header nav {
    display: none;
  }
+
+  #header label {
+    display: initial;
+    color: white;
+    position: fixed;
+    top: 33px;
+    right: 110px;
+    cursor: pointer;
+  }
+
+  #header input:checked + nav {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.8);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    z-index: 5;
+  }
+
+  #header nav label {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    color: white;
+    font-size: 2em;
+  }
+
+  #header nav a {
+    font-size: 1.6em !important;
+  }
 }

@media only screen and (max-width: 600px) {
@ -301,7 +380,7 @@ iframe {

  .grid,
  #main {
-    height: calc(100% - 4em) !important;
+    max-height: calc(100% - 4em) !important;
    padding-top: 4em !important;
  }

@ -316,6 +395,12 @@ iframe {
    top: 25px;
    right: 55px;
  }
+
+  #header label {
+    top: 25px;
+    right: 55px;
+  }
+
  #header nav a {
    font-size: 16px;
    margin-left: 15px;
Author	SHA1	Message	Date
Malte Jürgens	1c8f039586	use correct url	2023-07-15 13:33:29 +02:00
Malte Jürgens	889ca49117	use different base url	2023-07-15 13:33:29 +02:00
Malte Jürgens	bb56aa423d	Revert "update dependencies" This reverts commit `71ae67f164`.	2023-07-15 13:33:28 +02:00
Malte Jürgens	996188e5d6	improve mobile download dropdown	2023-07-15 13:33:28 +02:00
Malte Jürgens	0d31d77828	remove skeleton	2023-07-15 13:33:28 +02:00
Malte Jürgens	1ffe910847	update dependencies	2023-07-15 13:33:28 +02:00
Malte Jürgens	cfe24b2b6e	hertzschlag/82	2023-07-15 13:33:28 +02:00
Malte Jürgens	5a07f90565	update hertzblatt domain	2023-07-15 13:33:25 +02:00
Malte Jürgens	f3bbabe8e1	scrollbar	2023-07-15 13:32:55 +02:00
Malte Jürgens	f68551f3e2	embed	2023-07-15 13:32:55 +02:00
Malte Jürgens	8b1dc35104	fix	2023-07-15 13:32:55 +02:00
Malte Jürgens	3589cab69a	hamburger menu und impressum	2023-07-15 13:32:54 +02:00
Malte Jürgens	a3e1a3b152	use baseUrl if downloadUrl is not available	2023-07-15 13:31:39 +02:00
Malte Jürgens	ebde75ab81	remove external cdns	2023-07-15 13:31:12 +02:00
Malte Jürgens	e8c9019f96	download link fix	2023-07-15 13:31:12 +02:00
maltejur	b205e9ef59	Update README.md	2023-07-15 13:31:12 +02:00
Malte Jürgens	40b322a907	update baseurl	2023-07-15 13:31:12 +02:00
Malte Jürgens	9287ddd877	update baseurl	2023-07-15 13:31:11 +02:00
Malte Jürgens	92a5cd373c	update baseurl	2023-07-15 13:31:11 +02:00
Malte Jürgens	48defc85c8	update baseurl	2023-07-15 13:31:02 +02:00
Malte Jürgens	5f9e70ee95	use pdf.js	2023-07-15 13:30:24 +02:00
Malte Jürgens	06b4611dcc	button skeleton	2023-07-15 13:30:23 +02:00
Malte Jürgens	17aacdfae5	remove yumpu	2023-07-15 13:30:20 +02:00