added 2 website ideas, unfinished even for prototypes
BIN
img/C21.jpg
Normal file
|
After Width: | Height: | Size: 1.2 MiB |
BIN
img/bg.png
Normal file
|
After Width: | Height: | Size: 190 KiB |
BIN
img/bpw.jpg
Normal file
|
After Width: | Height: | Size: 6.6 KiB |
BIN
img/distribusi.png
Normal file
|
After Width: | Height: | Size: 55 KiB |
BIN
img/distribusi02.png
Normal file
|
After Width: | Height: | Size: 17 KiB |
BIN
img/distribusi03.png
Normal file
|
After Width: | Height: | Size: 16 KiB |
BIN
img/distribusi04.png
Normal file
|
After Width: | Height: | Size: 19 KiB |
BIN
img/etherdump.png
Normal file
|
After Width: | Height: | Size: 40 KiB |
BIN
img/event01.jpg
Normal file
|
After Width: | Height: | Size: 22 KiB |
BIN
img/event02.jpg
Normal file
|
After Width: | Height: | Size: 806 KiB |
BIN
img/git01.png
Normal file
|
After Width: | Height: | Size: 12 KiB |
BIN
img/git02.png
Normal file
|
After Width: | Height: | Size: 8.3 KiB |
BIN
img/git03.png
Normal file
|
After Width: | Height: | Size: 7.9 KiB |
BIN
img/git04.png
Normal file
|
After Width: | Height: | Size: 13 KiB |
BIN
img/log01.png
Normal file
|
After Width: | Height: | Size: 208 KiB |
BIN
img/log02.png
Normal file
|
After Width: | Height: | Size: 178 KiB |
BIN
img/log03.png
Normal file
|
After Width: | Height: | Size: 246 KiB |
BIN
img/workgroup01.jpg
Normal file
|
After Width: | Height: | Size: 15 KiB |
BIN
memberstates/cmunssdc.ttf
Normal file
52
memberstates/index.html
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Varia Website build around what members are doing</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>United Member states of Varia</h1>
|
||||||
|
<h2>Not really clear in this prototype but base the index page on the member activity</h2>
|
||||||
|
<div class="container">
|
||||||
|
<div class="item-a">
|
||||||
|
<h3>Event 01</h3>
|
||||||
|
<p>Radio-active female monstrosity - Angeliki D</p>
|
||||||
|
<img src="../img/event01.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="item-a">
|
||||||
|
<h3>Streams of info</h3>
|
||||||
|
<img src="../img/git01.png" alt="">
|
||||||
|
<img src="../img/git02.png" alt="">
|
||||||
|
<img src="../img/git03.png" alt="">
|
||||||
|
<img src="../img/git04.png" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="item-a">
|
||||||
|
<h3>Article: Collective Infrastructures</h3>
|
||||||
|
<p>
|
||||||
|
Being considerate about the channels that we use to communicate,
|
||||||
|
we negotiate our on-line dependencies by self-hosting our digital infrastructure.
|
||||||
|
Varia members are involved in the use and development of federated networks
|
||||||
|
like XMPP group chats and Mastodon instances, RSS feeds, available in Dutch and English,
|
||||||
|
or the mailing list. Find more about our Online Hosting tools below.</p>
|
||||||
|
</div>
|
||||||
|
<div class="item-a">
|
||||||
|
<img src="../img/etherdump.png" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="item-b">
|
||||||
|
<h3>Event 02</h3>
|
||||||
|
<p>The event is comprised of the following elements:
|
||||||
|
Dion & The Magic Chords is the lovechild of casio freaks
|
||||||
|
Dion Woestenburg and Griffin Stuip and sounds like the toybox
|
||||||
|
equivalent to your favourite progressive acts, such as Jean Michelle Jarre
|
||||||
|
and Yes. With the help of stunning visuals and a wild arrangement of casio’s and
|
||||||
|
yamahama’s they will bring your mind towards the next level of levitation</p>
|
||||||
|
<img src="../img/event02.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="item-b">
|
||||||
|
<h3>A Log of stuff members are doing</h3>
|
||||||
|
<img src="../img/distribusi.png" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
48
memberstates/style.css
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
body {
|
||||||
|
background-image: url("../img/bg.png");
|
||||||
|
}
|
||||||
|
h1, h2{
|
||||||
|
font-family: "kop";
|
||||||
|
color: white;
|
||||||
|
text-shadow: #000 2px 2px 4px;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat( 2, minmax(250px, 1fr) );
|
||||||
|
/* grid-template-rows: 200px 200px 200px; */
|
||||||
|
grid-column-gap: 80px;
|
||||||
|
grid-row-gap: 50px;
|
||||||
|
justify-items: start;
|
||||||
|
/* grid-gap is shorthand for row+colum-gap*/
|
||||||
|
}
|
||||||
|
.item-a {
|
||||||
|
border: 5px solid black;
|
||||||
|
color: #ff00d1;
|
||||||
|
min-width: auto;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
.item-b {
|
||||||
|
border: 5px solid black;
|
||||||
|
color: #ff00d1;
|
||||||
|
min-width: auto;
|
||||||
|
max-width: 300px;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
.item-c {
|
||||||
|
border: 5px solid black;
|
||||||
|
color: #ff00d1;
|
||||||
|
min-width: auto;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face{
|
||||||
|
font-family: "kop";
|
||||||
|
src:url('cmunssdc.ttf');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
1
memberstates/variatext
Normal file
@ -0,0 +1 @@
|
|||||||
|
varia (Gouwstraat 3, Rotterdam) is een ruimte voor het ontwikkelen van collectieve benaderingen rondom alledaagse technologie. varia leden onderhouden en faciliteren een collectieve infrastructuur om vragen, meningen, aanpassingen, hulp en actie te genereren. We gebruiken vrije software, organiseren evenementen en werken samen in verschillende constellaties. varia leert gaandeweg, maakt notities, is meertalig en kan gecontacteerd worden via info[@]varia.zone.
|
||||||
86
streams_events_logs/index.html
Normal file
@ -0,0 +1,86 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Varia Zone</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Varia: Streams, Events, Logs</h1>
|
||||||
|
<p>Or in other words a website that works around the time that items take place</p>
|
||||||
|
<div class="tripleflex">
|
||||||
|
<h3>Streams:</h3>
|
||||||
|
<div class="container streams">
|
||||||
|
<div class="item">
|
||||||
|
<img src="../img/git01.png" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<img src="../img/etherdump.png" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<img src="../img/git03.png" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<img src="../img/git02.png" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h3>Events:</h3>
|
||||||
|
<div class="container events">
|
||||||
|
<div class="item">
|
||||||
|
<h3>Event 01</h3>
|
||||||
|
<p>Radio-active female monstrosity - Angeliki D</p>
|
||||||
|
<img src="../img/event01.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<h3>Event 02</h3>
|
||||||
|
<p>The event is comprised of the following elements:
|
||||||
|
Dion & The Magic Chords is the lovechild of casio freaks
|
||||||
|
Dion Woestenburg and Griffin Stuip and sounds like the toybox
|
||||||
|
equivalent to your favourite progressive acts, such as Jean Michelle Jarre
|
||||||
|
and Yes. With the help of stunning visuals and a wild arrangement of casio’s and
|
||||||
|
yamahama’s they will bring your mind towards the next level of levitation</p>
|
||||||
|
<img src="../img/event02.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<img src="../img/bpw.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<h3>Event 03</h3>
|
||||||
|
<p>Ever had a hard-drive crash? lost data?
|
||||||
|
cloud back did not really backup?
|
||||||
|
Time Machine did not have a past do go back to?
|
||||||
|
Many questions around backup and data storage exist
|
||||||
|
and many issues need to be resolved.
|
||||||
|
From large database to a small personal collection,
|
||||||
|
data storage affects everyone and many so-called
|
||||||
|
solutions exist but are they really solutions?
|
||||||
|
</p>
|
||||||
|
<img src="../img/workgroup01.jpg" alt="">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h3>Logs:</h3>
|
||||||
|
<div class="container logs">
|
||||||
|
<div class="item">
|
||||||
|
<img src="../img/distribusi02.png" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<img src="../img/log01.png" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<img src="../img/distribusi04.png" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<img src="../img/log02.png" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<img src="../img/distribusi03.png" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<img src="../img/log03.png" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
<!--Flex box is for one row or one column of material only -->
|
||||||
41
streams_events_logs/style.css
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
body {
|
||||||
|
padding: 0px;
|
||||||
|
margin: 0px;
|
||||||
|
background-color: rbg(244, 244, 244);
|
||||||
|
font-family: "Lucida Console", Monaco, monospace;
|
||||||
|
}
|
||||||
|
h1,h3 {
|
||||||
|
color: #444;
|
||||||
|
margin: 0px;
|
||||||
|
}
|
||||||
|
.tripleflex{
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
width: 100vw;
|
||||||
|
align-items: start;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
margin: 10px;
|
||||||
|
/*height: 100%;
|
||||||
|
height: 100vh; */
|
||||||
|
width: 30%;
|
||||||
|
width: 30vw;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: baseline;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
border: 3px solid white;
|
||||||
|
min-width: 200px;
|
||||||
|
min-height: 120px;
|
||||||
|
height: 25%;
|
||||||
|
background-color: gold;
|
||||||
|
margin: auto;
|
||||||
|
flex-grow: 1;
|
||||||
|
color: #444;
|
||||||
|
}
|
||||||
|
img {max-width:100%;}
|
||||||