From a44f29c44face6889b66fffb424de71f2276eabe Mon Sep 17 00:00:00 2001 From: senka Date: Wed, 27 Mar 2024 14:04:16 +0000 Subject: [PATCH] html css for prject quilt page --- quilt.css | 180 +++++++++++++++++++++++++++++++++++++++++++++++++++++ quilt.html | 40 ++++++++---- 2 files changed, 208 insertions(+), 12 deletions(-) create mode 100644 quilt.css diff --git a/quilt.css b/quilt.css new file mode 100644 index 0000000..5108b56 --- /dev/null +++ b/quilt.css @@ -0,0 +1,180 @@ +@font-face { + font-family: "DuctusRegular"; + font-weight: normal; + src: url("fonts/Ductus/DuctusRegular.otf") format("opentype"); +} + +@font-face { + font-family: "CascadiaCode VTT"; + font-weight: normal; + src: url("fonts/Cascadia/otf/CascadiaCode-Light.otf") format("opentype"); +} + +@font-face { + font-family: "CascadiaCode VTT"; + font-weight: bold; + src: url("fonts/Cascadia/otf/CascadiaCode-Bold.otf") format("opentype"); +} + +body, +html { + width: 100%; + height: 100%; +} + +body { + margin: 0 0; + padding: 0 0; + background-color: white; + grid-template-columns: min-content 1fr min-content; + grid-template-rows: min-content min-content 1fr min-content; + grid-gap: 1rem 1rem; + grid-template-areas: + "header header header" + ". s-top s-top" + "s-left main aside" + "s-left footer footer"; + max-width: 1200px; + width: calc(100% - 4rem); + margin: auto; + height: calc(100svh - 4rem); + margin: 2rem; +} + +h3, +h4{ + font-family: "DuctusRegular"; + font-weight: normal; + margin: 0 0; + color: black; +} +h3{ + font-size: 3rem; +} +h4{ + font-size: 2rem; +} +h1, +h2 { + font-family: "DuctusRegular"; + margin: 0 0; + font-size: 1.5rem; +} +mark{ + font-family: "DuctusRegular"; + padding: 5px 5px; + font-size: 0.95rem; + background-color: rgb(128,128,128); + color: white; +} +main { + grid-area: main; + overflow: hidden; + position: relative; +} + +article h1, +article h2 { + margin-top: 1rem; + margin-bottom: 1rem; +} + +article h3 { + margin-top: 1rem; + margin-bottom: 0.5rem; +} + +header { + grid-area: header; +} + +nav { + display: flex; + justify-content: center; + align-items: center; + position: relative; +} + +.slider--top { + grid-area: s-top; +} + +.slider--left { + grid-area: s-left; +} +.preface{ + top: 2rem; + right: 2rem; + position: sticky ; + max-width: 700px; + width: calc(100% - 2rem); + margin: 2rem auto; + overflow-x: hidden; + color: white; + font-family: "CascadiaCode VTT"; + background-color: rgb(128,128,128); + border: solid black 1px; + padding: 1rem; +} + +article { + max-width: 700px; + width: calc(100% - 2rem); + margin: 2rem auto; + overflow-x: hidden; + color: var(--text-color-light); + display: flex; + flex-direction: column; + font-family: "CascadiaCode VTT"; + background-color: white; + border: solid black 1px; + padding: 1rem; +} + +article p, +article pre, +article li { + margin: 0 0; + font-size: 14px; + line-height: 1.5; +} + +article ul, +article ol { + list-style-type: none; + padding: 0 0; + margin: 0 0; +} + +article li { + margin-bottom: 0.15rem; +} + +article p, +article li { + word-break: break-word; +} + +article .hostname { + color: green; + padding-right: 1ch; +} + +footer { + grid-area: footer; +} + +footer h3, +aside h3 { + line-height: 1; +} + +p{ + font-family:"CascadiaCode VTT"; + font-weight: normal; +} + +hr { + width: 100%; + margin: 2rem auto; +} diff --git a/quilt.html b/quilt.html index 44f3bd4..c268c59 100644 --- a/quilt.html +++ b/quilt.html @@ -18,31 +18,47 @@ - A log book - + TL;DR +
-

TL;DR

-

too log didn't read (on the webquilt)

+

TL;DR

+

too log didn't read

- +
+

Preface

+

+ TL;DR researches ways to make sense of the hidden labour that goes on in a feminist server through log files and unlogged activity. +

+

+ The unlogged activity of a server includes the physical labour, the decisions about shared spaces, the different knowledges that depend on each other for the network to exist. +

+

+ Activity that is logged, is often compiled in inaccessible log files that track the work a server performs as data. They're both hard to retrieve, hard to decipher, and have a bias towards the technological ecology, prioritizing the labour of machines. +

+

+ Chopchop is a a Raspberry Pi that is configured, maintained and used as a community server by XPUB1 . +

+

+ This EPUB is a generated compilation of logs with annotations that provide context to the situatedness of this technology. With one book a day, a diary of chopchop is kept, stored and shared. +

+

What happened today?

- 
tldr@chopchop:~ $sudo journalctl -S today -u kitchen-stove.service -u
-      kitchen-bin.service -u kitchen-fridge.service -r -n
+

tldr@chopchop:~ $sudo journalctl -S today -u kitchen-stove.service -u + kitchen-bin.service -u kitchen-fridge.service -r -n

- 
tldr@chopchop:~ $uptime -s
+

tldr@chopchop:~ $uptime -s

2024-03-18 07:51:34

- - This is common, the - fragility of these machines are more prominant than any cloud user expects. Partially because of scale, + + This is common, the fragility of these machines are more prominant than any cloud user expects. Partially because of scale, partially because a lot of labour that happen in datacenters just escapes us all when we want to just upload an image. - +