diff options
| -rw-r--r-- | assets/lovely.svg | 3 | ||||
| -rw-r--r-- | index.html | 153 | ||||
| -rw-r--r-- | style.css | 96 |
3 files changed, 252 insertions, 0 deletions
diff --git a/assets/lovely.svg b/assets/lovely.svg new file mode 100644 index 0000000..789b98d --- /dev/null +++ b/assets/lovely.svg @@ -0,0 +1,3 @@ +<svg width="444" height="165" viewBox="0 0 444 165" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M2.5 91.3333C40.181 77.7175 56.2407 66.921 89.7778 45C96.4349 40.6487 119.631 25.0708 125.333 14.1111C125.944 12.9373 123.922 11.0434 122.611 11.2222C115.382 12.208 102.897 23.9096 99.4444 27.2222C89.0964 37.1514 81.8461 46.1667 74.2222 58.2778C71.762 62.1861 57.4043 84.0505 63.5556 91C67.4795 95.4331 82.8889 88.0805 83.3333 87.8889C99.4875 80.9249 114.556 71.4351 129.722 62.6111C134.628 59.7566 128.427 64.1201 126.667 65.7778C122.525 69.6778 117.699 74.248 115.5 79.7222C113.861 83.8017 113.906 87.3252 119.222 87.6667C127.813 88.2183 137.823 81.3961 143.222 75.3333C147.246 70.8147 148.348 64.0202 142.556 60.6667C138.782 58.4819 143.208 61.9764 144.778 62.6667C161.165 69.8724 182.305 79.2827 200 82.5C202.907 83.0286 188.841 72.8929 188 72C187.01 70.9486 179.218 66.7409 179 64.5C178.924 63.7222 196 54.2467 199.5 52.3333C212 45.5 219.492 40.8 234 38.5C237.702 37.9131 247 38.5 247.833 42.7222C249.028 48.7761 243.554 51.1204 240 53.5C235.5 56 231.38 56.758 225.556 59.2222C219.574 61.7529 223.169 61.263 228.167 62.5555C235.779 64.5243 258.608 72.2347 251.222 84.6667C248.815 88.7191 221.183 98.2441 220.722 91.3333C220.394 86.4044 233.492 81.3894 236.333 80C259.726 68.5615 281.069 56.1032 300.944 38.9444C312.002 29.3986 325.559 17.7447 331.833 3.99999C332.526 2.4822 332.807 1.85607 331 2.88888C324.285 6.72592 318.224 13.6692 313.556 19.5555C300.664 35.8096 289.999 55.3187 286 75.8333C283.206 90.1703 295.684 84.7776 304.667 80.6667C317.201 74.9301 327.055 65.9382 338.778 59.2222C340.109 58.4593 338.62 62.33 338.111 63.7778C336.445 68.517 329.745 82.2511 339.389 84.2222C355.578 87.5309 374.583 70.5925 386.667 62C387.864 61.1487 385.025 64.4363 384.222 65.6667C378.957 73.7399 373.851 81.8891 369.389 90.4444C360.746 107.017 354.469 124.681 345.778 141.222C343.489 145.578 336.876 160.448 330.667 162C329.349 162.329 330 158.109 331.5 155.5C343 135.5 354.064 118.488 373 106.5C391.936 94.5115 408 83.5 442 72" stroke="black" stroke-width="4" stroke-linecap="round"/> +</svg> diff --git a/index.html b/index.html new file mode 100644 index 0000000..110553b --- /dev/null +++ b/index.html @@ -0,0 +1,153 @@ +<!DOCTYPE html> +<html> + +<head> + <meta charset="utf-8"> + <meta http-equiv="x-ua-compatible" content="ie=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>lovely computer</title> + <!-- <link rel="icon" href="/assets/caw.png" /> --> + <link rel="stylesheet" href="/style.css" /> +</head> + +<body> + <div> + <header> + <br> + <img id="lovely" src="/assets/lovely.svg"> + <p> + <span id="computer-manifesto"> + computer manifesto + </span> + <span id="on-spiritual-computing"> + <span>-- </span><span class="text">on spiritual computing</span> + </span> + </p> + <br> + </header> + + <hr> + <main> + <ol class="parts"> + <li> + <p>IDEAS:</p> + <ol> + <li> + <p>the act of love</p> + <p>one must truly love computing to do good computing.</p> + </li> + </ol> + <ol start="2"> + <li> + <p>computing is art</p> + <p>Mierle Laderman Ukeles: "Everything I say is Art is Art. Everything I do is Art is Art." + further: + "We have no Art, we try to do everything well. (Balinese saying)."</p> + </li> + </ol> + <ol start="3"> + <li> + <p>grounded approach</p> + <p>computing is not an isolated act. one must keep in touch with humanities: art, history, culture, etc. + one + cannot build something good for the world, not knowing the world.</p> + </li> + </ol> + <ol start="4"> + <li> + <p>the living document</p> + <p>times change. people change. code changes. information is living. information should be allowed to die + and fade away. information comes from from everyone. + it's a + developing story.</p> + </li> + </ol> + <ol start="5"> + <li> + <p>camp in computing</p> + <p>there must be space for fun and quirkyness. for doing something that is superfluous. not everything + needs + to + have an end goal. the superfluous elevates the mundane and makes it joyous.</p> + </li> + </ol> + <ol start="6"> + <li> + <p>actualisation of humanist values</p> + <p>computing is for people. people use computers. people use computers to make more art. people use + computers + to + talk to one another. people use computers to cope. people use computers to write. people use computers + to + write + software. people use computers to design hardware. computing is for people.</p> + </li> + </ol> + + </li> + <li> + <p>BALANCES:</p> + <ol> + <li> + <p>getting things done/having fun</p> + <p>it is important to account for the scale of time. to do things well, but to also complete. there is + time + for + development (actualisation), and there is time for maintenance and repair (care). it is too easy to + discard + things, to move on to the next thing, but it is also bad to be stuck on one problem.</p> + </li> + </ol> + <ol start="2"> + <li> + <p>gift-giving/self-care</p> + <p>the only way to improve the world is by giving gifts with no strings attached. however, to be able to + give + gifts, one must take care of themselves and avoid burnout. social support and proper compensation is + paramount, + while still protecting oneself from greed.</p> + </li> + </ol> + <ol start="3"> + <li> + <p>doing/doing nothing</p> + <p>sometimes one has to do nothing to do something. truly nothing.</p> + </li> + </ol> + <ol start="4"> + <li> + <p>openness/resilience</p> + <p>open cultures and spaces/clubs and friend networks. the bazaar/the cathedral. in extending love to + others + outside, but still protecting and cultivating the microcultures, the small-scale social bonds.</p> + </li> + </ol> + <ol start="5"> + <li> + <p>the new/the old</p> + <p>architectures that are old are new again. architectures which are new become old. things which have + stuck + around may have stuck around for a reason. things that are new are not automatically good. things that + are + old + are not automatically good. things that are new may stick around for a reason.</p> + </li> + </ol> + </li> + </ol> + <p>--</p> + <p>required reading:</p> + <ul> + <li>manifesto! maintenance art -- proposal for an exhibition "CARE" - Mierle Laderman Ukeles</li> + <li>notes on "camp" - Susan Sontag</li> + <li>(an overview on) an overview on phenomenal nature - Cassandra Jenkins</li> + <li>how to do nothing - Jenny Odell</li> + <li>all about love - bell hooks</li> + <li>the telekommunist manifesto - Dmytri Kleiner</li> + </ul> + + </main> + </div> +</body> + +</html> diff --git a/style.css b/style.css new file mode 100644 index 0000000..ab42486 --- /dev/null +++ b/style.css @@ -0,0 +1,96 @@ +* { + word-break: break-word; + overflow-wrap: break-word; +} + +html { + background: #e3dfcd; + color: #44392e; + font-family: monospace; + padding: 0; + font-size: 20px; +} + +main { + padding: 0 calc(2.5vw + 2px); +} + +body { + max-width: 1000px; + margin: auto; +} + +header { + display: flex; + flex-direction: column; + align-items: center; +} + +header p { + display: flex; + justify-content: center; + flex-wrap: wrap; + text-align: center +} + +#computer-manifesto { + max-width: 100vw; + overflow: clip; +} + +#on-spiritual-computing { + display: flex; + justify-content: center; + flex-wrap: wrap; +} + +header br { + margin-top: 10vh; +} + +hr { + margin-left: 2.5vw; + margin-right: 2.5vw; + border-width: 1.5px; + border-style: solid; + border-color: #44392e; +} + +a { + color: #DCDCDC; + text-decoration: underline; + font-weight: 700; +} + +img { + max-width: 80vw; +} + +ol { + list-style-type: upper-alpha; +} + +.parts { + list-style-type: upper-roman; +} + +#lovely { + /* fill: #DCDCDC; */ + filter: brightness(0) saturate(100%) invert(19%) sepia(8%) saturate(1660%) hue-rotate(349deg) brightness(91%) contrast(84%); + height: 150px; + position: relative; + top: 3px; + left: 2px; +} + +h1 { + font-size: 64px; +} + +h2 { + font-size: 48px; +} + +h3 { + font-size: 32px; +} |
