Add structure for revised website

11 months ago · b2157bd587
parent 076eb7c363
commit b2157bd587
6 changed files with 238 additions and 0 deletions
--- a/develeopement/.DS_Store
+++ b/develeopement/.DS_Store
--- a/develeopement/SI
+++ b/develeopement/SI
@ -0,0 +1,160 @@
+@font-face {
+    font-family: WonderType Regular;
+    src: url(Fonts/WonderType-Regular.otf);
+  }
+  @font-face {
+    font-family: ApfelGrotezk Regular;
+    src: url(Fonts/ApfelGrotezk-Regular.otf);
+  }
+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;
+}
+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;
+}
+h3{
+    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;
+}
+.intro{
+    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;
+}
+.down:hover{
+    color: whitesmoke;
+    transition-duration: 3s;
+}
+.map{
+    top: 0rem;
+    left: 0rem;
+    width: 100%;
+    height: 100%;
+    opacity: 0%;
+}
+#map1{
+    top: 110vh;
+    left: 0rem;
+    width: 100%;
+    height: 70%; 
+}
+button{
+    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;
+}
+.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;
+  }
--- a/develeopement/SI22
+++ b/develeopement/SI22
@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8"/>
+    <meta name="viewport"
+    content="width=device-width,
+    initial-scale=1.0"/>
+    <title> SI22 Signal Lost: Archive Unzipped</title>
+    <link rel="stylesheet" href="SI style.css" />
+</head>
+<body>
+  <!-- This is the main title of the webpage -->
+    <h1>Signal Lost: <br> Archive Unzipped</h1>
+    <!-- Floating elements on the edges -->
+    <h2>Special Issue #22</h2>
+    <h3>XPUB1</h3>
+    <h4>September–December 2023</h4>
+    <!-- Description of the project -->
+    <p class="intro">– — 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>
+    <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>
+            <span class="extra"><br>More text?</span> 
+        </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">
+</body>
+</html>
--- a/develeopement/SI22
+++ b/develeopement/SI22
--- a/develeopement/signal.png
+++ b/develeopement/signal.png
--- a/develeopement/signal.svg
+++ b/develeopement/signal.svg
@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.8.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1126.55 566.89" style="enable-background:new 0 0 1126.55 566.89;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#221F1F;}
+	.st1{opacity:0.5;}
+</style>
+<path class="st0" d="M1090.87,215.34v323.9c0,1.49-1.21,2.71-2.71,2.71H786.47c-1.49,0-2.71-1.21-2.71-2.71v-5.51
+	c0-1.49-1.21-2.71-2.71-2.71h-26.11c-1.49,0-2.71,1.21-2.71,2.71v5.51c0,1.49-1.21,2.71-2.71,2.71H324.65
+	c-1.49,0-2.71-1.21-2.71-2.71v-3.93c0-1.49,1.21-2.71,2.71-2.71s2.71-1.21,2.71-2.71v-26.13c0-1.91,0-3.82,0-5.73v-26.11
+	c0-1.49-1.21-2.71-2.71-2.71h-12.67c-0.13-9.53-0.27-19.06-0.4-28.58c0-1.49-1.21-2.71-2.71-2.71h-12.67v0.17h-0.86v-0.17h-15.37
+	v0.17h-0.38v-0.17h-15.37v0.17h-0.86v-0.17h-30.19v0.17h-0.86v-0.17h-15.37v0.17h-0.4v-0.17h-15.37v0.17h-0.86v-30.23
+	c0-1.49-1.21-2.71-2.71-2.71h-9.41c-1.49,0-2.71-1.21-2.71-2.71v-27.54c0-1.49-1.21-2.71-2.71-2.71h-9.96
+	c-1.49,0-2.71,1.21-2.71,2.71v33.02h-0.85v-0.07c0-1.49-1.21-2.71-2.71-2.71h-9.96c-1.49,0-2.71,1.21-2.71,2.71v30.23h-0.4v-0.17
+	h-12.67c-1.49,0-2.71,1.21-2.71,2.71v28.83h0.7v1.41h-0.7v27.47c0,1.49-1.21,2.71-2.71,2.71h-10.27c-1.49,0-2.71-1.21-2.71-2.71
+	v-24.77c0-1.49-1.21-2.71-2.71-2.71h-12.67v0.15h-0.86v-0.15h-1.01v-1.41h1.01v-28.83c0-1.49-1.21-2.71-2.71-2.71h-9.96
+	c-1.49,0-2.71,1.21-2.71,2.71v0.53h-0.38v-3.24h-1.1v-1.25h1.1v-28.82c0-1.49-1.21-2.71-2.71-2.71H66.72
+	c-1.49,0-2.71-1.21-2.71-2.71V280.08h-0.15V267.1c0-1.49-1.21-2.71-2.71-2.71H50.88c-1.49,0-2.71-1.21-2.71-2.71v-9.1
+	c0-1.49-1.21-2.71-2.71-2.71h-9.01c-1.49,0-2.71-1.21-2.71-2.71V42.76c0-1.49,1.21-2.71,2.71-2.71h8.7c1.49,0,2.71,1.21,2.71,2.71
+	v3.73c0,1.49,1.21,2.71,2.71,2.71h26.11c1.49,0,2.71-1.21,2.71-2.71v-3.73c0-1.49,1.21-2.71,2.71-2.71h317.84
+	c1.49,0,2.71-1.21,2.71-2.71v-3.97c0-1.49,1.21-2.71,2.71-2.71h267.03c1.49,0,2.71,1.21,2.71,2.71v6.67h0.46V66.5
+	c0,1.49,1.21,2.71,2.71,2.71h10.44c1.49,0,2.71-1.21,2.71-2.71v-9.88c0-1.49,1.21-2.71,2.71-2.71h10.26c1.49,0,2.71-1.21,2.71-2.71
+	v-8.45c0-1.49,1.21-2.71,2.71-2.71h31.99c1.49,0,2.71,1.21,2.71,2.71v52.92c0,1.49,1.21,2.71,2.71,2.71h12.02
+	c1.49,0,2.71,1.21,2.71,2.71v25.88c0,1.49,1.21,2.71,2.71,2.71h12.67v-0.17h0.86v0.17h15.37v-0.17h0.38v0.17h15.37v-0.17h0.86v0.17
+	h30.19v-0.17h0.86v0.17h15.37v-0.17h0.4v0.17h15.37v-0.17h0.86v30.23c0,1.49,1.21,2.71,2.71,2.71h9.41c1.49,0,2.71,1.21,2.71,2.71
+	v27.54c0,1.49,1.21,2.71,2.71,2.71h9.96c1.49,0,2.71-1.21,2.71-2.71v-27.54c0-1.49,1.21-2.71,2.71-2.71h10.82
+	c1.49,0,2.71-1.21,2.71-2.71v-30.23h0.38v0.17h12.67c1.49,0,2.71-1.21,2.71-2.71V98.13h-0.7v-1.41h0.7V69.25
+	c0-1.49,1.21-2.71,2.71-2.71h10.27c1.49,0,2.71,1.21,2.71,2.71v24.77c0,1.49,1.21,2.71,2.71,2.71h12.67v-0.15h0.86v30.48
+	c0,1.49,1.21,2.71,2.71,2.71h10.36c1.49,0,2.71,1.21,2.71,2.71v27.27c0,1.49,1.21,2.71,2.71,2.71h26.19c1.49,0,2.71-1.21,2.71-2.71
+	v-27.27c0-1.49,1.21-2.71,2.71-2.71h13.76v-0.08h0.46V98.13h-0.46v-1.41h12.58c1.49,0,2.71-1.21,2.71-2.71V69.25
+	c0-1.49,1.21-2.71,2.71-2.71h8.78c1.49,0,2.71,1.21,2.71,2.71v140.68c0,1.49,1.21,2.71,2.71,2.71h24.87
+	C1089.66,212.63,1090.87,213.85,1090.87,215.34z"/>
+</svg>