XPUB
/
SI22
19
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

attempt to repair the css.

Browse Source
main
Michael Murtaugh 2 months ago
parent 8580bf171b
commit 19d1d8d978
2 changed files with 160 additions and 157 deletions
Show Stats Download Patch File Download Diff File

42
web/index.html
Unescape Escape View File

@ -5,7 +5,7 @@
<meta name="viewport" <meta name="viewport"
content="width=device-width, content="width=device-width,
initial-scale=1.0"/> 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="stylesheet" href="style.css" />
<link rel="icon" href="favicon.ico"> <link rel="icon" href="favicon.ico">
@ -18,31 +18,31 @@
<h3>XPUB1</h3> <h3>XPUB1</h3>
<h4>September–December 2023</h4> <h4>September–December 2023</h4>
<!-- Description of the project --> <!-- Description of the project -->
<a href="https://git.xpub.nl/XPUB/SI22/raw/branch/main/web/si22.xml">Listen to our Broadcasts</a> <div class="intro">
<p class="intro">– — Radio makers, listeners and electromagnetic wave enthusiasts, do you copy? — – – <br> <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 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. 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! 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> <button class="down" onClick="document.getElementById('map1').scrollIntoView({behavior: 'smooth'});">🡣</button>
<!-- Map with projects --> <!-- Map with projects -->
<div class="container"> <div id="map">
<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>
<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> </div>
<!-- Image with the map --> <!-- Image with the map -->
<img id="map1" src="signal.png"> <img id="map1" src="signal.png">
</div>
</body> </body>
</html> </html>

275
web/style.css
Unescape Escape View File

@ -1,162 +1,165 @@
@font-face { @font-face {
font-family: WonderType Regular; font-family: WonderType Regular;
src: url("fonts/WonderType-Regular.otf") format("opentype"), src: url("fonts/WonderType-Regular.otf") format("opentype"),
} }
@font-face { @font-face {
font-family: ApfelGrotezk Regular; font-family: ApfelGrotezk Regular;
src: src:
url("fonts/ApfelGrotezk-Regular.otf") format("opentype"), url("fonts/ApfelGrotezk-Regular.otf") format("opentype"),
url("fonts/ApfelGrotezk-Regular.woff") format("woff"); url("fonts/ApfelGrotezk-Regular.woff") format("woff");
} }
body{ body{
background-color: #c5ff26; background-color: #c5ff26;
} }
h1{ h1{
font-family: WonderType Regular; font-family: WonderType Regular;
font-size: 4rem; font-size: 4rem;
left: 0rem; left: 0rem;
top: 0rem; top: 0rem;
z-index: 2; z-index: 2;
padding-top: 0.5rem; padding-top: 0.5rem;
padding-left: 2rem; padding-left: 2rem;
line-height: 3.8rem; line-height: 3.8rem;
} }
h2{ h2{
font-family: ApfelGrotezk Regular; font-family: ApfelGrotezk Regular;
font-size: 1.5rem; font-size: 1.5rem;
top: 0rem; top: 0rem;
left: 0rem; left: 0rem;
position: fixed; position: fixed;
padding-top: 1rem; padding-top: 1rem;
padding-left: 2rem; padding-left: 2rem;
rotate: 90deg; rotate: 90deg;
width: 99vw; width: 99vw;
height: 95vw; height: 95vw;
} }
h3{ h3{
font-family: ApfelGrotezk Regular; font-family: ApfelGrotezk Regular;
font-size: 1.5rem; font-size: 1.5rem;
position: fixed; position: fixed;
top: 90vh; top: 90vh;
left: 0rem; left: 0rem;
padding-left: 2rem; padding-left: 2rem;
} }
h4{ h4{
font-family: ApfelGrotezk Regular; font-family: ApfelGrotezk Regular;
font-size: 1.5rem; font-size: 1.5rem;
position: fixed; position: fixed;
top: 90vh; top: 90vh;
right: 0rem; right: 0rem;
padding-right: 2rem; padding-right: 2rem;
} }
.intro{ .intro{
font-family: ApfelGrotezk Regular; font-family: ApfelGrotezk Regular;
font-size: 1.5rem; font-size: 1.5rem;
left: 0rem; left: 0rem;
top: 0rem; top: 0rem;
position: absolute; position: absolute;
padding-top: 15rem; padding-top: 15rem;
padding-left: 2rem; padding-left: 2rem;
width: 50%; width: 50%;
} }
.down{ .down{
font-size: 2rem; font-size: 2rem;
position: absolute; position: absolute;
top: 92vh; top: 92vh;
left: 0rem; left: 0rem;
padding-left: 50vw; padding-left: 50vw;
} }
.down:hover{ .down:hover{
color: whitesmoke; color: whitesmoke;
transition-duration: 3s; transition-duration: 3s;
} }
.map{ #map {
top: 0rem; position: absolute;
left: 0rem; top: 150vh;
width: 100%; left: 0;
height: 100%; width: 100vw;
opacity: 0%; height: 100vh;
} }
#map1{ #map1{
top: 110vh; position: absolute;
left: 0rem; left: 0;
width: 100%; top: -100px;
height: 70%; /* top: 110vh; */
/* left: 0rem; */
width: 100%;
height: 70%;
} }
button{ button{
text-decoration: none; text-decoration: none;
background-color: transparent; background-color: transparent;
border: none; border: none;
} }
.container{ .container{
position: absolute; position: absolute;
top: 190vh; z-index: 1;
left: 5rem; /* top: 190vh; */
display: grid; left: 5rem;
grid-template-columns: repeat(8, 1fr); display: grid;
gap: 10px; grid-template-columns: repeat(8, 1fr);
grid-auto-rows: 100px; gap: 10px;
grid-template-areas: grid-auto-rows: 100px;
"a a b b c c d d" 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" "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; "e e f f g g h h";
justify-content: space-evenly; */ /* display: flex;
width: 89vw; justify-content: space-evenly; */
/* height: 90vh; */ width: 89vw;
/* align-items: stretch; */ /* height: 90vh; */
/* background-color: blanchedalmond; */ /* align-items: stretch; */
/* opacity: 50%; */ /* background-color: blanchedalmond; */
font-family: WonderType Regular; /* opacity: 50%; */
font-size: 2rem; font-family: WonderType Regular;
color: whitesmoke; font-size: 2rem;
color: whitesmoke;
} }
.item1 { .item1 {
grid-area: a; grid-area: a;
align-self: end; align-self: end;
} }
.item2 { .item2 {
grid-area: b; grid-area: b;
align-self: start; align-self: start;
} }
.item3 { .item3 {
grid-area: f; grid-area: f;
align-self: start; align-self: start;
justify-self: end; justify-self: end;
} }
.item4 { .item4 {
grid-area: h; grid-area: h;
align-self: start; align-self: start;
} }
.item5 { .item5 {
grid-area: g; grid-area: g;
align-self: end; align-self: end;
justify-self: end; justify-self: end;
} }
.item6 { .item6 {
grid-area: c; grid-area: c;
align-self: end; align-self: end;
justify-self: end; justify-self: end;
} }
.item7 { .item7 {
grid-area: h; grid-area: h;
align-self: end; align-self: end;
justify-self: end; justify-self: end;
} }
a{ a{
text-decoration: none; text-decoration: none;
color: white; color: white;
} }
a:hover{ .container a:hover{
color: #c5ff26; color: #c5ff26;
transition-duration: 2s; transition-duration: 2s;
} }
.extra{ .extra{
color: #c5ff26; color: #c5ff26;
font-family: ApfelGrotezk Regular; font-family: ApfelGrotezk Regular;
font-size: 1rem; font-size: 1rem;
line-height: 1rem; line-height: 1rem;
top: 0rem; top: 0rem;
} }

Write Preview
Loading…
Cancel
Save