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 8 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:image" content="">
<meta property="og:description" content=""> <meta property="og:description" content="">
<meta property="og:url" content=""> <meta property="og:url" content="">
<title>A log book</title> <title>TL;DR</title>
<link rel="stylesheet" href="quilt.css" />
</head> </head>
<body> <body>
<header> <header>
<h1>TL;DR</h1> <h3>TL;DR</h3>
<h2>too log didn't read (on the webquilt)</h2> <h4>too log didn't read</h4>
</header> </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> <article>
<h2>What happened today?</h2> <h2>What happened today?</h2>
<pre><em>tldr@chopchop:~ $</em>sudo journalctl -S today -u kitchen-stove.service -u <p><em>tldr@chopchop:~ $</em>sudo journalctl -S today -u kitchen-stove.service -u
kitchen-bin.service -u kitchen-fridge.service -r -n</pre> 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> <p>2024-03-18 07:51:34</p>
<span class="annotation fn-annotatation" level="1"> <mark>
This is common, the This is common, the fragility of these machines are more prominant than any cloud user expects. Partially because of scale,
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 partially because a lot of labour that happen in datacenters just escapes us all when we want to just upload
an image. an image.
</span> </mark>

Write Preview
Loading…
Cancel
Save