From 19d1d8d9784be1bcd15fc03ef6a31ec4204b62ce Mon Sep 17 00:00:00 2001
From: Michael Murtaugh <mm@automatist.org>
Date: Wed, 17 Jul 2024 11:13:59 +0200
Subject: [PATCH] attempt to repair the css.

---
 web/index.html |  42 ++++----
 web/style.css  | 275 +++++++++++++++++++++++++------------------------
 2 files changed, 160 insertions(+), 157 deletions(-)

diff --git a/web/index.html b/web/index.html
index 7cd8b6e..760831c 100644
--- a/web/index.html
+++ b/web/index.html
@@ -5,7 +5,7 @@
     <meta name="viewport"
     content="width=device-width,
     initial-scale=1.0"/>
-    <title> SI22 Signal Lost: Archive Unzipped</title>
+    <title>SI22 Signal Lost: Archive Unzipped</title>
     <link rel="stylesheet" href="style.css" />
     <link rel="icon" href="favicon.ico">
 
@@ -18,31 +18,31 @@
     <h3>XPUB1</h3>
     <h4>September–December 2023</h4>
     <!-- Description of the project -->
-    <a href="https://git.xpub.nl/XPUB/SI22/raw/branch/main/web/si22.xml">Listen to our Broadcasts</a>
-    <p class="intro">– — Radio makers, listeners and electromagnetic wave enthusiasts, do you copy? — – – <br>
+    <div class="intro">
+      <p>– — Radio makers, listeners and electromagnetic wave enthusiasts, do you copy? — – – <br>
         In the middle of an on-going apocalypse what should be preserved, and what forgotten?
         In the efforts of scavenging and resurrecting a sonic archive. It is only a question of time until all will be lost. Lend an ear as we collectively explore, activate and transmit the archive of Worm community Radio. 
         We must listen closely, we must decide what remains and how we can rebuild upon a fractured past. Become absorbed by a re-imagined reality through an archival deep-dive!
-    </p>
+      </p>
+      <p><a href="https://git.xpub.nl/XPUB/SI22/raw/branch/main/web/si22.xml">Listen to our Broadcasts</a></p>
+    </div>
     <button class="down" onClick="document.getElementById('map1').scrollIntoView({behavior: 'smooth'});">🡣</button>
-     <!-- Map with projects -->
-    <div class="container">
-        
-          <div class="item1"><a href="pirate-radio.html">Pirate Radio—How to Set Up Your Own Broadcast</a><br>
-            
-
-        </div>
-          <div class="item2"><a href="manual-radio.html">Manual for Post-Αpocalyptic Radio Making</a></div>
-            <div class="item3"><a href="byte-noise.html">Byte Noise: <br>
-                Sound you see me?<br>
-                Sound you don't</a></div>
-            <div class="item4"><a href="unzipped.html">(Un)zipped</a></div>
-          <div class="item5"><a href="rain-receiver.html">Rain Receiver</a></div>
-          <div class="item6"><a href="echoes-wasteland.html">Echoes of the Wasteland</a></div>
-          <div class="item7"><a href="listen-closely.html">Listen closely</a></div>
+    <!-- Map with projects -->
+    <div id="map">
+      <div class="container">
         
+        <div class="item1"><a href="pirate-radio.html">Pirate Radio—How to Set Up Your Own Broadcast</a></div>
+        <div class="item2"><a href="manual-radio.html">Manual for Post-Αpocalyptic Radio Making</a></div>
+          <div class="item3"><a href="byte-noise.html">Byte Noise: <br>
+              Sound you see me?<br>
+              Sound you don't</a></div>
+          <div class="item4"><a href="unzipped.html">(Un)zipped</a></div>
+        <div class="item5"><a href="rain-receiver.html">Rain Receiver</a></div>
+        <div class="item6"><a href="echoes-wasteland.html">Echoes of the Wasteland</a></div>
+        <div class="item7"><a href="listen-closely.html">Listen closely</a></div>      
       </div>
-    <!-- Image with the map -->
-    <img id="map1" src="signal.png">
+      <!-- Image with the map -->
+      <img id="map1" src="signal.png">
+    </div>
 </body>
 </html>
diff --git a/web/style.css b/web/style.css
index 7bc304c..71ceabe 100755
--- a/web/style.css
+++ b/web/style.css
@@ -1,162 +1,165 @@
 @font-face {
-    font-family: WonderType Regular;
-    src: url("fonts/WonderType-Regular.otf") format("opentype"),
-  }
-  @font-face {
-    font-family: ApfelGrotezk Regular;
-    src:
-      url("fonts/ApfelGrotezk-Regular.otf") format("opentype"),
-      url("fonts/ApfelGrotezk-Regular.woff") format("woff");
-  }
+  font-family: WonderType Regular;
+  src: url("fonts/WonderType-Regular.otf") format("opentype"),
+}
+@font-face {
+  font-family: ApfelGrotezk Regular;
+  src:
+    url("fonts/ApfelGrotezk-Regular.otf") format("opentype"),
+    url("fonts/ApfelGrotezk-Regular.woff") format("woff");
+}
 body{
     background-color: #c5ff26;
 }
 h1{
-    font-family: WonderType Regular;
-    font-size: 4rem;
-    left: 0rem;
-    top: 0rem;
-    z-index: 2;
-    padding-top: 0.5rem;
-    padding-left: 2rem;
-    line-height: 3.8rem;
+  font-family: WonderType Regular;
+  font-size: 4rem;
+  left: 0rem;
+  top: 0rem;
+  z-index: 2;
+  padding-top: 0.5rem;
+  padding-left: 2rem;
+  line-height: 3.8rem;
 }
 h2{
-    font-family: ApfelGrotezk Regular;
-    font-size: 1.5rem;
-    top: 0rem;
-    left: 0rem;
-    position: fixed;
-    padding-top: 1rem;
-    padding-left: 2rem;
-    rotate: 90deg;
-    width: 99vw;
-    height: 95vw;
+  font-family: ApfelGrotezk Regular;
+  font-size: 1.5rem;
+  top: 0rem;
+  left: 0rem;
+  position: fixed;
+  padding-top: 1rem;
+  padding-left: 2rem;
+  rotate: 90deg;
+  width: 99vw;
+  height: 95vw;
 }
 h3{
-    font-family: ApfelGrotezk Regular;
-    font-size: 1.5rem;
-    position: fixed;
-    top: 90vh;
-    left: 0rem;
-    padding-left: 2rem;
+  font-family: ApfelGrotezk Regular;
+  font-size: 1.5rem;
+  position: fixed;
+  top: 90vh;
+  left: 0rem;
+  padding-left: 2rem;
 }
 h4{
-    font-family: ApfelGrotezk Regular;
-    font-size: 1.5rem;
-    position: fixed;
-    top: 90vh;
-    right: 0rem;
-    padding-right: 2rem;
+  font-family: ApfelGrotezk Regular;
+  font-size: 1.5rem;
+  position: fixed;
+  top: 90vh;
+  right: 0rem;
+  padding-right: 2rem;
 }
 .intro{
-    font-family: ApfelGrotezk Regular;
-    font-size: 1.5rem;
-    left: 0rem;
-    top: 0rem;
-    position: absolute;
-    padding-top: 15rem;
-    padding-left: 2rem;
-    width: 50%;
+  font-family: ApfelGrotezk Regular;
+  font-size: 1.5rem;
+  left: 0rem;
+  top: 0rem;
+  position: absolute;
+  padding-top: 15rem;
+  padding-left: 2rem;
+  width: 50%;
 }
 .down{
-    font-size: 2rem;
-    position: absolute;
-    top: 92vh;
-    left: 0rem;
-    padding-left: 50vw;
+  font-size: 2rem;
+  position: absolute;
+  top: 92vh;
+  left: 0rem;
+  padding-left: 50vw;
 }
 .down:hover{
-    color: whitesmoke;
-    transition-duration: 3s;
+  color: whitesmoke;
+  transition-duration: 3s;
 }
-.map{
-    top: 0rem;
-    left: 0rem;
-    width: 100%;
-    height: 100%;
-    opacity: 0%;
+#map {
+  position: absolute;
+  top: 150vh;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
 }
 #map1{
-    top: 110vh;
-    left: 0rem;
-    width: 100%;
-    height: 70%; 
+  position: absolute;
+  left: 0;
+  top: -100px;
+  /* top: 110vh; */
+  /* left: 0rem; */
+  width: 100%;
+  height: 70%; 
 }
 button{
-    text-decoration: none;
-    background-color: transparent;
-    border: none;
+  text-decoration: none;
+  background-color: transparent;
+  border: none;
 }
-
 .container{
-    position: absolute;
-    top: 190vh;
-    left: 5rem;
-    display: grid;
-    grid-template-columns: repeat(8, 1fr);
-    gap: 10px;
-    grid-auto-rows: 100px;
-    grid-template-areas:
-    "a a b b c c d d"
-    "a a b b c c d d"
-    "e e f f g g h h"
-    "e e f f g g h h";
-    /* display: flex;
-    justify-content: space-evenly; */
-    width: 89vw;
-    /* height: 90vh; */
-    /* align-items: stretch; */
-    /* background-color: blanchedalmond; */
-    /* opacity: 50%; */
-    font-family: WonderType Regular;
-    font-size: 2rem;
-    color: whitesmoke;
+  position: absolute;
+  z-index: 1;
+  /* top: 190vh; */
+  left: 5rem;
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  gap: 10px;
+  grid-auto-rows: 100px;
+  grid-template-areas:
+  "a a b b c c d d"
+  "a a b b c c d d"
+  "e e f f g g h h"
+  "e e f f g g h h";
+  /* display: flex;
+  justify-content: space-evenly; */
+  width: 89vw;
+  /* height: 90vh; */
+  /* align-items: stretch; */
+  /* background-color: blanchedalmond; */
+  /* opacity: 50%; */
+  font-family: WonderType Regular;
+  font-size: 2rem;
+  color: whitesmoke;
 }
 .item1 {
-    grid-area: a;
-    align-self: end;
-  }
-  .item2 {
-    grid-area: b;
-    align-self: start;
-  }
-  .item3 {
-    grid-area: f;
-    align-self: start;
-    justify-self: end;
-  }
-  .item4 {
-    grid-area: h;
-    align-self: start;
-  }
-  .item5 {
-    grid-area: g;
-    align-self: end;
-    justify-self: end;
-  }
-  .item6 {
-    grid-area: c;
-    align-self: end;
-    justify-self: end;
-  }
-  .item7 {
-    grid-area: h;
-    align-self: end;
-    justify-self: end;
-  }
-  a{
-    text-decoration: none;
-    color: white;
-  }
-  a:hover{
-    color: #c5ff26;
-    transition-duration: 2s;
-  }
-  .extra{
-    color: #c5ff26;
-    font-family: ApfelGrotezk Regular;
-    font-size: 1rem;
-    line-height: 1rem;
-    top: 0rem;
-  }
+  grid-area: a;
+  align-self: end;
+}
+.item2 {
+  grid-area: b;
+  align-self: start;
+}
+.item3 {
+  grid-area: f;
+  align-self: start;
+  justify-self: end;
+}
+.item4 {
+  grid-area: h;
+  align-self: start;
+}
+.item5 {
+  grid-area: g;
+  align-self: end;
+  justify-self: end;
+}
+.item6 {
+  grid-area: c;
+  align-self: end;
+  justify-self: end;
+}
+.item7 {
+  grid-area: h;
+  align-self: end;
+  justify-self: end;
+}
+a{
+  text-decoration: none;
+  color: white;
+}
+.container a:hover{
+  color: #c5ff26;
+  transition-duration: 2s;
+}
+.extra{
+  color: #c5ff26;
+  font-family: ApfelGrotezk Regular;
+  font-size: 1rem;
+  line-height: 1rem;
+  top: 0rem;
+}