vitrinekast
/
tl-dr
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

html css for prject quilt page

Browse Source
main
senka 9 months ago
parent 45ea4d4f3a
commit a44f29c44f
2 changed files with 208 additions and 12 deletions
Show Stats Download Patch File Download Diff File

180
quilt.css
Unescape Escape View File

@ -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;
}

40
quilt.html
Unescape Escape View File

@ -18,31 +18,47 @@
<meta property="og:image" content="">
<meta property="og:description" content="">
<meta property="og:url" content="">
<title>A log book</title>
<title>TL;DR</title>
<link rel="stylesheet" href="quilt.css" />
</head>
<body>
<header>
<h1>TL;DR</h1>
<h2>too log didn't read (on the webquilt)</h2>
<h3>TL;DR</h3>
<h4>too log didn't read</h4>
</header>
<div class="preface">
<h2>Preface</h2>
<p>
TL;DR researches ways to make sense of the hidden labour that goes on in a feminist server through log files and unlogged activity.
</p>
<p>
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.
</p>
<p>
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.
</p>
<p>
Chopchop is a a Raspberry Pi that is configured, maintained and used as a community server by XPUB1 .
</p>
<p>
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.
</p>
</div>
<article>
<h2>What happened today?</h2>
<pre><em>tldr@chopchop:~ $</em>sudo journalctl -S today -u kitchen-stove.service -u
kitchen-bin.service -u kitchen-fridge.service -r -n</pre>
<p><em>tldr@chopchop:~ $</em>sudo journalctl -S today -u kitchen-stove.service -u
kitchen-bin.service -u kitchen-fridge.service -r -n</p>
<pre><em>tldr@chopchop:~ $</em>uptime -s</pre>
<p><em>tldr@chopchop:~ $</em>uptime -s</p>
<p>2024-03-18 07:51:34</p>
<span class="annotation fn-annotatation" level="1">
This is common, the
fragility of these machines are more prominant than any cloud user expects. Partially because of scale,
<mark>
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.
</span>
</mark>

Write Preview
Loading…
Cancel
Save