add landing page
parent
ec7cb82f18
commit
3bb445471a
Binary file not shown.
Binary file not shown.
@ -0,0 +1,9 @@
|
||||
@font-face {
|
||||
font-family: 'Unilegant';
|
||||
src: url('Unilegant.woff2') format('woff2'),
|
||||
url('Unilegant.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 385 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 147 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 214 KiB |
@ -0,0 +1,132 @@
|
||||
<!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>Documentation Sessions</title>
|
||||
<link rel="stylesheet" href="font/style.css" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>2 hours of head space to write some <em>code documentation</em></h1>
|
||||
|
||||
<div class="session">
|
||||
<div class="number">First session</div>
|
||||
<div class="when">
|
||||
March 15th <br />
|
||||
16:00—18:00
|
||||
</div>
|
||||
<div class="where">
|
||||
around XPUB Studio <br />
|
||||
4th floor Wijnhaven
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="session">
|
||||
<div class="number">Second Session</div>
|
||||
<div class="when">
|
||||
March 23rd <br />
|
||||
19:00—21:00
|
||||
</div>
|
||||
<div class="where">
|
||||
Varia <br />
|
||||
Gouwstraat 3, Rotterdam
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
For your new coding project, for the cryptic library you downloaded recently, for a
|
||||
script that you want to share with others!
|
||||
</p>
|
||||
<p>
|
||||
Too many pieces of code are left alone out there: without an entry point, forgotten,
|
||||
while outside is raining. Wouldn't it be nice to take care of them?
|
||||
</p>
|
||||
<p>
|
||||
Enter the documentation sessions. Two hours where to sit with source code and write
|
||||
something about it. From simple instructions to in-depth explanations, or maybe some
|
||||
drawings to illustrate the overall process. You name it.
|
||||
</p>
|
||||
<p>
|
||||
Writing documentation can be tricky! But let's face this together: prompts and
|
||||
suggestions will be offered for inspiration, and coffee and snacks for restoration.
|
||||
If you want there will be space to share your work and exchange feedback, if not no
|
||||
prob: just enjoy the cozy music and write some docs.
|
||||
</p>
|
||||
|
||||
<figure>
|
||||
<img
|
||||
src="img/trolley.png"
|
||||
alt="would you rather develop tools for yourself or for other; but is the trolley problem"
|
||||
/>
|
||||
<figcaption>As the famous trolley problem goes: sharing is caring.</figcaption>
|
||||
</figure>
|
||||
|
||||
<div class="example">
|
||||
<a href="https://git.xpub.nl/kamo/pad-bis"
|
||||
>Padliography - A bookmarking tool for pad (and link in general)</a
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<a href="https://git.xpub.nl/kamo/drw"
|
||||
>DRW - A multi surface multi player real time drawing app</a
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<a href="https://git.xpub.nl/kamo/kiwiboat"
|
||||
>Kiwiboat - How to connect and play around with the media wiki api</a
|
||||
>
|
||||
</div>
|
||||
<figure>
|
||||
<img
|
||||
src="img/goat.png"
|
||||
alt="the famous riddle of goat wolf and cabbage, but now is with coding"
|
||||
/>
|
||||
<figcaption>Code documentation = the boat in this puzzle</figcaption>
|
||||
</figure>
|
||||
|
||||
<p>
|
||||
These sessions are part of a research focused on code documentation intended not
|
||||
just a technical list of procedures, but also a way to provide context and orientate
|
||||
code in the world. A texture where to weave together multiple voices and diverse
|
||||
registry, in order to re-enchant the making of software.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Documentation as a way to produce narrations around software. To create a world for
|
||||
the code to inhabit, to stretch what is possible to do or to think with it.
|
||||
</p>
|
||||
<p>
|
||||
Documentation as a space for the political in the software. A surface that could
|
||||
host ideas in close contact with code, letting them entangle and shape each other.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<em> Read more:</em>
|
||||
<a href="https://hub.xpub.nl/soupboat/wlist/situated_doc"
|
||||
>Situated Documentation - a small brainstorming in the format of a list
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<figure>
|
||||
<img
|
||||
src="img/discord_rant.png"
|
||||
alt="person complaining in discord about software and documentation"
|
||||
/>
|
||||
</figure>
|
||||
|
||||
<p>
|
||||
This project grows out of the contradiction of being frustrated in having to deal
|
||||
with undocumented pieces of code, and at the same time never documenting anything.
|
||||
</p>
|
||||
<p>
|
||||
Developed in the context of the Experimental Publishing master. A really nice place
|
||||
to be.
|
||||
</p>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,103 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: sans-serif;
|
||||
font-size: 32px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
main {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
|
||||
}
|
||||
|
||||
main > * {
|
||||
padding: 16px;
|
||||
margin: 0;
|
||||
|
||||
min-height: 33vw;
|
||||
|
||||
background-color: rgba(255, 200, 255, 0.3);
|
||||
}
|
||||
|
||||
main > *:nth-child(even) {
|
||||
background: none;
|
||||
}
|
||||
|
||||
h1 {
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
figure {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: currentColor;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
a:after {
|
||||
display: inline-block;
|
||||
content: "↗";
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
translate: 10px 0;
|
||||
}
|
||||
|
||||
a:hover:after {
|
||||
translate: 5px -5px;
|
||||
}
|
||||
|
||||
em {
|
||||
font-family: "Unilegant";
|
||||
font-style: normal;
|
||||
font-size: 1.25em;
|
||||
text-shadow: 1px 0 0 currentColor, 1px 0 0 currentColor;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.example:before {
|
||||
content: "Example:";
|
||||
|
||||
text-shadow: 1px 0 0 currentColor, 1px 0 0 currentColor;
|
||||
font-family: "Unilegant";
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.session .number {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.where:before,
|
||||
.when:before {
|
||||
content: "When";
|
||||
display: block;
|
||||
|
||||
text-shadow: 1px 0 0 currentColor, 1px 0 0 currentColor;
|
||||
font-family: "Unilegant";
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.where {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.where:before {
|
||||
content: "Where";
|
||||
}
|
||||
Loading…
Reference in New Issue