init
commit
3fd27c8a7e
@ -0,0 +1,3 @@
|
||||
{
|
||||
"liveServer.settings.port": 5501
|
||||
}
|
||||
@ -0,0 +1,35 @@
|
||||
let background = document.getElementById("background");
|
||||
let stanze = document.getElementsByClassName("stanza");
|
||||
let reset = document.getElementById("reset");
|
||||
|
||||
reset.addEventListener("click", (e) => {
|
||||
quotes = getQuotes();
|
||||
lifeboat = lifeboats();
|
||||
offset = Math.floor((Math.random() * background.innerHTML.length) / 2);
|
||||
});
|
||||
|
||||
let sea = background.innerHTML;
|
||||
let quotes = getQuotes();
|
||||
let lifeboat = lifeboats();
|
||||
let offset = 0;
|
||||
|
||||
setInterval(() => moveText(), 100);
|
||||
|
||||
function getQuotes() {
|
||||
let stanza = stanze[Math.floor(Math.random() * stanze.length)];
|
||||
return stanza.getElementsByClassName("quote");
|
||||
}
|
||||
|
||||
function lifeboats() {
|
||||
let boats = "";
|
||||
Array.from(quotes).forEach((quote) => {
|
||||
boats += quote.outerHTML;
|
||||
});
|
||||
return boats;
|
||||
}
|
||||
|
||||
function moveText() {
|
||||
let text = sea.slice(0, offset) + lifeboat + sea.slice(offset);
|
||||
background.innerHTML = text;
|
||||
offset++;
|
||||
}
|
||||
@ -0,0 +1,111 @@
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
margin-top: 32px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.meta {
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.contents {
|
||||
padding: 0 32px;
|
||||
}
|
||||
|
||||
.contents > * {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.intro {
|
||||
background-color: tomato;
|
||||
border-radius: 16px;
|
||||
padding: 16px;
|
||||
margin: 16px auto;
|
||||
}
|
||||
.intro h2 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 16px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.process h2,
|
||||
.process p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
li + li {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: tomato;
|
||||
}
|
||||
|
||||
a::after {
|
||||
content: "⤴";
|
||||
}
|
||||
|
||||
.process {
|
||||
margin: 32px auto;
|
||||
}
|
||||
|
||||
.demo {
|
||||
margin: 0 auto;
|
||||
max-width: 1200px;
|
||||
margin-top: 32px;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
#reset {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border: none;
|
||||
background: none;
|
||||
text-align: center;
|
||||
font-size: 1.125rem;
|
||||
color: tomato;
|
||||
text-decoration: underline wavy tomato 2px;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
transition: width 10s ease-out;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
#reset:hover {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.background {
|
||||
color: currentColor;
|
||||
margin: 32px;
|
||||
line-height: 1.6;
|
||||
text-align: justify;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.quote {
|
||||
background-color: white;
|
||||
color: tomato;
|
||||
padding: 0 0.3em;
|
||||
border-radius: 1em;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,21 @@
|
||||
html {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.text {
|
||||
text-align: justify;
|
||||
max-width: 60ch;
|
||||
margin: 50px auto;
|
||||
}
|
||||
|
||||
span::after {
|
||||
content: " ";
|
||||
}
|
||||
|
||||
.text1 {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.text2 {
|
||||
color: blue;
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
Violence lands. Hundreds of troops break into a city. At that moment the city starts recording its pain. Bodies are torn and punctured. Inhabitants memorise the assault in stutters and fragments refracted by trauma. Before the Internet is switched off, thousands of phone cameras light up. People risk their lives to record the hell surrounding them. As they frantically call and text each other, their communication erupts into hundreds of star-shaped networks. Others throw signals into the void of social media and encrypted messaging, hoping they will be picked up by someone. Meanwhile, the environment captures traces. Unpaved ground registers the tracks of long columns of armoured vehicles. Leaves on vegetation receive the soot of their exhaust while the soil absorbs and retains the identifying chemicals released by banned ammunition. The broken concrete of shattered homes records the hammering collision of projectiles. Pillars of smoke and debris are sucked up into the atmosphere, rising until they mix with the clouds, anchoring this strange weather at the places the bombs hit
|
||||
@ -0,0 +1,88 @@
|
||||
import nltk
|
||||
from nltk.tokenize import word_tokenize
|
||||
|
||||
# open two text files as text1 and text2
|
||||
with open('./rosas.txt', 'r') as result1:
|
||||
text1 = result1.read()
|
||||
|
||||
with open('./unthought.txt', 'r') as result2:
|
||||
text2 = result2.read()
|
||||
|
||||
|
||||
# HTML TOKENIZER (word + span)
|
||||
# return a list of tag from a text
|
||||
# each item in the list is transformed into a html <span> tag,
|
||||
# with the class defined by the text_class argument
|
||||
#
|
||||
# es: to_html('Lorem ipsum dolor', 'test')
|
||||
# return
|
||||
# [
|
||||
# "<span class='test'>Lorem</span>",
|
||||
# "<span class='test'>ipsum</span>",
|
||||
# "<span class='test'>dolor</span>"
|
||||
# ]
|
||||
|
||||
def to_html(text, text_class):
|
||||
text_html = []
|
||||
text_list = word_tokenize(text)
|
||||
for word in text_list:
|
||||
text_html += ['<span class="' + text_class + '">' + word + '</span>']
|
||||
return text_html
|
||||
|
||||
|
||||
# WEAVER
|
||||
# weave two texts following a pattern structured as a string of A and B
|
||||
# es: ABABAAAABBBB
|
||||
# the repetition argument specifies how many times the pattern is repeated
|
||||
# the start1 and start2 arguments specify the starting point in the texts' array
|
||||
# it returns a string
|
||||
|
||||
def weave(text1, text2, pattern, repetition, start1=0, start2=0):
|
||||
embroidery = ''
|
||||
text1_cursor = start1
|
||||
text2_cursor = start2
|
||||
repeated_pattern = pattern * repetition
|
||||
for choice in repeated_pattern:
|
||||
if choice == 'A':
|
||||
embroidery += text1[text1_cursor]
|
||||
text1_cursor += 1
|
||||
if choice == 'B':
|
||||
embroidery += text2[text2_cursor]
|
||||
text2_cursor += 1
|
||||
return embroidery
|
||||
|
||||
# DEMO
|
||||
|
||||
|
||||
text_a = to_html(text1, 'text1')
|
||||
text_b = to_html(text2, 'text2')
|
||||
text_embroidery = weave(text_a, text_b, 'AAAABBBBABABAAABBB', 16)
|
||||
|
||||
# BASIC HTML5 boilerplate
|
||||
html_boilerplate = '''
|
||||
<!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 > Document </title >
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head >
|
||||
<body >
|
||||
<div class= "text">
|
||||
|
||||
{{{contents}}}
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
'''
|
||||
|
||||
|
||||
# the {{{contents}}} line will be replaced with our text_embroidery
|
||||
html_out = html_boilerplate.replace('{{{contents}}}', text_embroidery)
|
||||
|
||||
# Write the results in the index.html file
|
||||
with open('result.html', 'w') as index:
|
||||
index.write(html_out)
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,21 @@
|
||||
html {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.text {
|
||||
text-align: justify;
|
||||
max-width: 60ch;
|
||||
margin: 50px auto;
|
||||
}
|
||||
|
||||
span::after {
|
||||
content: " ";
|
||||
}
|
||||
|
||||
.text1 {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.text2 {
|
||||
color: blue;
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
Violence lands. Hundreds of troops break into a city. At that moment the city starts recording its pain. Bodies are torn and punctured. Inhabitants memorise the assault in stutters and fragments refracted by trauma. Before the Internet is switched off, thousands of phone cameras light up. People risk their lives to record the hell surrounding them. As they frantically call and text each other, their communication erupts into hundreds of star-shaped networks. Others throw signals into the void of social media and encrypted messaging, hoping they will be picked up by someone. Meanwhile, the environment captures traces. Unpaved ground registers the tracks of long columns of armoured vehicles. Leaves on vegetation receive the soot of their exhaust while the soil absorbs and retains the identifying chemicals released by banned ammunition. The broken concrete of shattered homes records the hammering collision of projectiles. Pillars of smoke and debris are sucked up into the atmosphere, rising until they mix with the clouds, anchoring this strange weather at the places the bombs hit
|
||||
@ -0,0 +1,88 @@
|
||||
import nltk
|
||||
from nltk.tokenize import word_tokenize
|
||||
|
||||
# open two text files as text1 and text2
|
||||
with open('./rosas.txt', 'r') as result1:
|
||||
text1 = result1.read()
|
||||
|
||||
with open('./unthought.txt', 'r') as result2:
|
||||
text2 = result2.read()
|
||||
|
||||
|
||||
# HTML TOKENIZER (word + span)
|
||||
# return a list of tag from a text
|
||||
# each item in the list is transformed into a html <span> tag,
|
||||
# with the class defined by the text_class argument
|
||||
#
|
||||
# es: to_html('Lorem ipsum dolor', 'test')
|
||||
# return
|
||||
# [
|
||||
# "<span class='test'>Lorem</span>",
|
||||
# "<span class='test'>ipsum</span>",
|
||||
# "<span class='test'>dolor</span>"
|
||||
# ]
|
||||
|
||||
def to_html(text, text_class):
|
||||
text_html = []
|
||||
text_list = word_tokenize(text)
|
||||
for word in text_list:
|
||||
text_html += ['<span class="' + text_class + '">' + word + '</span>']
|
||||
return text_html
|
||||
|
||||
|
||||
# WEAVER
|
||||
# weave two texts following a pattern structured as a string of A and B
|
||||
# es: ABABAAAABBBB
|
||||
# the repetition argument specifies how many times the pattern is repeated
|
||||
# the start1 and start2 arguments specify the starting point in the texts' array
|
||||
# it returns a string
|
||||
|
||||
def weave(text1, text2, pattern, repetition, start1=0, start2=0):
|
||||
embroidery = ''
|
||||
text1_cursor = start1
|
||||
text2_cursor = start2
|
||||
repeated_pattern = pattern * repetition
|
||||
for choice in repeated_pattern:
|
||||
if choice == 'A':
|
||||
embroidery += text1[text1_cursor]
|
||||
text1_cursor += 1
|
||||
if choice == 'B':
|
||||
embroidery += text2[text2_cursor]
|
||||
text2_cursor += 1
|
||||
return embroidery
|
||||
|
||||
# DEMO
|
||||
|
||||
|
||||
text_a = to_html(text1, 'text1')
|
||||
text_b = to_html(text2, 'text2')
|
||||
text_embroidery = weave(text_a, text_b, 'AAAABBBBABABAAABBB', 16)
|
||||
|
||||
# BASIC HTML5 boilerplate
|
||||
html_boilerplate = '''
|
||||
<!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 > Document </title >
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head >
|
||||
<body >
|
||||
<div class= "text">
|
||||
|
||||
{{{contents}}}
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
'''
|
||||
|
||||
|
||||
# the {{{contents}}} line will be replaced with our text_embroidery
|
||||
html_out = html_boilerplate.replace('{{{contents}}}', text_embroidery)
|
||||
|
||||
# Write the results in the index.html file
|
||||
with open('result.html', 'w') as index:
|
||||
index.write(html_out)
|
||||
@ -0,0 +1,87 @@
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
margin-top: 32px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.meta {
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.contents {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 0 32px;
|
||||
}
|
||||
|
||||
.intro {
|
||||
background-color: tomato;
|
||||
border-radius: 16px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 16px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
li + li {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: tomato;
|
||||
}
|
||||
|
||||
a::after {
|
||||
content: "⤴";
|
||||
}
|
||||
|
||||
.process {
|
||||
margin: 32px auto;
|
||||
}
|
||||
|
||||
pre.prettyprint {
|
||||
padding: 8px !important;
|
||||
font-size: 14px;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.result {
|
||||
margin: 16px auto;
|
||||
width: 100%;
|
||||
text-align: justify;
|
||||
padding: 8px;
|
||||
border: 2px dotted currentColor;
|
||||
}
|
||||
|
||||
.text1 {
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.text2 {
|
||||
color: dodgerblue;
|
||||
}
|
||||
|
||||
.result span::after {
|
||||
content: " ";
|
||||
}
|
||||
|
||||
.demo {
|
||||
margin-top: 32px;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 229 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 83 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 588 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
@ -0,0 +1,172 @@
|
||||
html,
|
||||
body {
|
||||
font-size: 1.125rem;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.meta {
|
||||
margin: 16px;
|
||||
}
|
||||
|
||||
.meta .back {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.info {
|
||||
border: 1px solid tomato;
|
||||
border-radius: 16px;
|
||||
display: none;
|
||||
margin: 16px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.info.show {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#info-button {
|
||||
border: 1px solid tomato;
|
||||
border-radius: 16px;
|
||||
display: inline-block;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin: 16px;
|
||||
color: tomato;
|
||||
background-color: transparent;
|
||||
font-size: 1.125rem;
|
||||
cursor: pointer;
|
||||
transform: translate(0);
|
||||
transition: transform 0.4s ease-out;
|
||||
}
|
||||
|
||||
#info-button.active {
|
||||
background-color: tomato;
|
||||
color: white;
|
||||
}
|
||||
|
||||
input[type="file"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.info .file-upload,
|
||||
input[type="submit"] {
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
font-size: 16px;
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
border: none;
|
||||
border-bottom: 1px solid tomato;
|
||||
color: tomato;
|
||||
}
|
||||
|
||||
#categories {
|
||||
border-radius: 16px;
|
||||
display: block;
|
||||
margin: 16px;
|
||||
margin-top: 32px;
|
||||
margin-bottom: 64px;
|
||||
}
|
||||
|
||||
.tag {
|
||||
display: inline-block;
|
||||
border: 1px solid currentColor;
|
||||
padding: 0 0.5ch;
|
||||
border-radius: 1em;
|
||||
margin: 4px;
|
||||
transform: translate(0);
|
||||
transition: transform 0.4s ease-out;
|
||||
text-transform: capitalize;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.tag:hover,
|
||||
#show-info:hover {
|
||||
transition: transform 0.1s ease-in;
|
||||
transform: translateY(-4px);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tag.active {
|
||||
background-color: tomato;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.tag.all {
|
||||
background-color: transparent;
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.all-button {
|
||||
font-size: 1.125rem;
|
||||
display: inline-block;
|
||||
background-color: transparent;
|
||||
border: 1px solid currentColor;
|
||||
padding: 0 0.5ch;
|
||||
border-radius: 1em;
|
||||
margin: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.all-button.active {
|
||||
background-color: tomato;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#chat-container {
|
||||
padding: 0 8px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.baloon {
|
||||
display: none;
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
border-radius: 16px;
|
||||
padding: 16px;
|
||||
margin: 16px;
|
||||
max-width: 40ch;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.baloon.active {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.baloon .author {
|
||||
font-family: "Times New Roman", Times, serif;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
margin: 0;
|
||||
transform: translateY(-24px);
|
||||
color: tomato;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.baloon .contents {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.baloon .category {
|
||||
color: #fcc;
|
||||
}
|
||||
|
||||
.category::after {
|
||||
content: ", ";
|
||||
}
|
||||
|
||||
/* .category::before {
|
||||
content: "#";
|
||||
} */
|
||||
|
||||
.category:first-of-type::before {
|
||||
content: " ";
|
||||
}
|
||||
|
||||
.category:last-of-type::after {
|
||||
content: "";
|
||||
}
|
||||
@ -0,0 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
|
||||
<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>Chat a pad - WIP</title>
|
||||
<script src="./csv_to_chat.js" defer="defer"></script>
|
||||
<link rel="stylesheet" href="../global.css" />
|
||||
<link rel="stylesheet" href="./chat.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="meta">
|
||||
<a href="." class="back">back</a>
|
||||
<button id="info-button">?</button> <br />
|
||||
<div class="info" id="info">
|
||||
You can also upload a CSV file with the following headers:
|
||||
<em>text; author; image; tag;</em>
|
||||
<form id="myForm">
|
||||
<label for="csvFile" class="file-upload">
|
||||
<input type="file" id="csvFile" accept=".csv" />
|
||||
Select File
|
||||
</label>
|
||||
<br />
|
||||
<input type="submit" value="Upload" />
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="categories">
|
||||
<button class="all-button active" id="active-all">All Tags</button>
|
||||
</div>
|
||||
<div id="chat-container"></div>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
@ -0,0 +1,11 @@
|
||||
reference:
|
||||
https://pad.xpub.nl/p/mix_of_sauces
|
||||
|
||||
original text
|
||||
https://pad.xpub.nl/p/SP_16_0610
|
||||
|
||||
chat archive
|
||||
https://cryptpad.fr/sheet/#/3/sheet/edit/16a0948f1c482b711c81808a853ff566/
|
||||
|
||||
in order to make Generative Baloon.vl works you need to download vvvv gamma !
|
||||
https://visualprogramming.net/
|
||||
@ -0,0 +1,96 @@
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
margin-top: 32px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.meta {
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.contents {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 64px;
|
||||
padding: 0 32px;
|
||||
}
|
||||
|
||||
.intro {
|
||||
background-color: tomato;
|
||||
border-radius: 16px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 16px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 16px 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
li + li {
|
||||
margin-top: 0.25em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: tomato;
|
||||
}
|
||||
|
||||
a::after {
|
||||
content: "⤴";
|
||||
}
|
||||
|
||||
.process {
|
||||
margin: 32px auto;
|
||||
}
|
||||
|
||||
pre.prettyprint {
|
||||
padding: 8px !important;
|
||||
font-size: 14px;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.result {
|
||||
margin: 32px auto;
|
||||
width: 100%;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.text1 {
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.text2 {
|
||||
color: dodgerblue;
|
||||
}
|
||||
|
||||
.result span::after {
|
||||
content: " ";
|
||||
}
|
||||
|
||||
.demo {
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.video-demo {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
video {
|
||||
border: 1px solid tomato;
|
||||
margin: 0 auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
Can't render this file because it has a wrong number of fields in line 20.
|
Binary file not shown.
|
After Width: | Height: | Size: 170 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 264 KiB |
@ -0,0 +1,215 @@
|
||||
<!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>Insecam Transcript</title>
|
||||
<link rel="stylesheet" href="../global.css" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<img src="shoes.jpg" alt="still from a shoes shop in russia" />
|
||||
<div class="episode">
|
||||
<h2>#1</h2>
|
||||
<div class="container">
|
||||
<p>
|
||||
The smell of new cheap shoes <br />
|
||||
The sound of russian in the background <br />
|
||||
People leaving untidy items around holding other shops' bags while checking shoes
|
||||
with the other hand <br />
|
||||
wearing too many clothes but outside it's cold, not worth it to take off the
|
||||
jacket<br />
|
||||
and hold it an employee shows a customer some high leather boots assortment of
|
||||
waterproof padded jackets in different colors<br />
|
||||
long&just washed high quality russian girls' hair
|
||||
</p>
|
||||
<p>
|
||||
Red head woman, indecisive <br />
|
||||
Sales woman, nonchalantly wearing her face-mask right below nose <br />
|
||||
There is 50% sales on a selection of items<br />
|
||||
Small girl shopping for a new pair of shoes, school is starting in a few days<br />
|
||||
Young woman just entered, she is not planning to buy anything<br />
|
||||
But she seems like she will, easy target <br />
|
||||
Her friend is exhausted, she will wait sitted on the bench till she takes a
|
||||
decision<br />
|
||||
Red head is still in the store <br />
|
||||
Girl sitted on the bench is only checking pairs within her arm reach <br />
|
||||
Possible target audience of the shop: small girls, young girls, older women <br />
|
||||
Girl sitted on the bench received a text message
|
||||
</p>
|
||||
<p>
|
||||
The pattern on the floor tiles sets the stage for new sales offer: <br />
|
||||
-50% on some shiny new boots. <br />
|
||||
Yet kids are not intrested: <br/>
|
||||
they prefer to bounce from red tile to red tile <br/>
|
||||
in order to spin the speed of shoes shopping. <br />
|
||||
A woman is not shure of buy a pair of shoes. <br />
|
||||
She focuses on the materials and the quality of construction. <br />
|
||||
She weighs the price and how renowed the firm is. <br />
|
||||
Then she puts the pair back on the shelf. <br />
|
||||
An old lady picks it up again. <br />
|
||||
She feels observed. <br />
|
||||
She feels not confident about her opinions about these shoes. <br />
|
||||
She peeps other people choices, considering other pairs of shoes. <br />
|
||||
She strolls through the shop. <br />
|
||||
Then returns to the initial ones.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<img src="barber.jpg" alt="still from a barber shop in france" />
|
||||
<div class="episode">
|
||||
<h2>#2</h2>
|
||||
<div class="container">
|
||||
<p>
|
||||
Noisy space <br />
|
||||
Blow dryer is on <br />
|
||||
Face-mask seem required but the heat under is unbearable <br />
|
||||
A man doesn't seem to have much to do <br />
|
||||
He is chatty <br />
|
||||
Chatting to a girl sitting <br />
|
||||
He doesn't sit, I find it pretty annoying <br />
|
||||
Just sit if you are talking for so long!!! <br />
|
||||
The man crosses and un-crosses his legs, seem nervous <br />
|
||||
Is he nervous because of the sitted girl? <br />
|
||||
I would say so <br />
|
||||
WHY DON'T YOU SIT <br />
|
||||
I can't see the sitted girl's face at all <br />
|
||||
A standing man, turning his back to the camera is talking to a sitted pair of leg
|
||||
<br />
|
||||
I bet the hairdresser is also bothered by him <br />
|
||||
She is eying his reflection in the mirror <br />
|
||||
Her crossed legs on the armchair has not un-crossed, shows how tensed he makes her
|
||||
feel <br />
|
||||
Dude just sit!
|
||||
</p>
|
||||
<p>
|
||||
The smell of shampoo and cleanness <br />
|
||||
The mysterious crossed legs from a girl which we are not able to see more<br />
|
||||
Is the guy standing next to her bending over to kiss her? <br />
|
||||
The deafening sound of the hairdryer <br />
|
||||
The feel of hot air on your neck<br />
|
||||
THe reflection of the hairdresser in the mirror behind<br />
|
||||
The feel of expectation - how am I gonna look? - for sure it was worth the money.<br />
|
||||
The cold, slippery touch of these fake leather seats.<br />
|
||||
The standarization of clothing items such as the square pattern shirt, the denim
|
||||
jeans he wears or the black sneakers and black leggins she wears<br />
|
||||
AH! new customer, new hairdresser in frame.<br />
|
||||
He sits, she starts washing his hair.<br />
|
||||
I wonder when was the last time I went to the hairdresser.<br />
|
||||
Should I get a haircut myself
|
||||
</p>
|
||||
<p>
|
||||
Try to focus on the floor tiles, once again. <br />
|
||||
And think to the worker that has put them in place. <br />
|
||||
Hey, you did a great job under the seats in front of the mirrors, why you messed up
|
||||
everything on the other side of the room? <br />
|
||||
Now there is a guy standing on this feng-shui-wraking-four-tiles-inlays, trying to pickup a girl. <br />
|
||||
She's hidden from our point of view and we just see a pair of legs. <br />
|
||||
You can see how the barber is listening to their conversation, <br />
|
||||
Hidden among the noise of a red blowdrier. <br />
|
||||
She seems to focus on the blond hairs she's drying but that's just a cover. <br />
|
||||
The guy is insicure. <br />
|
||||
He relies more on the infrastructure of the barbershop than on his own body. <br />
|
||||
He tries to seem cool and steady, and then two other people enter the barbershop.<br />
|
||||
Or better: they were outside our field of view. <br />
|
||||
One is a barber, the other one a hair owner.<br />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<img src="cows.jpg" alt="still from a cow stable" />
|
||||
<div class="episode">
|
||||
<h2>#3</h2>
|
||||
<div class="container">
|
||||
<p>
|
||||
One cow seem to be full of milk<br />
|
||||
Her milk sack just lies on the hay like a full bag of marbles<br />
|
||||
She got up, wonder how<br />
|
||||
Are they slow or is the camera lagging?<br />
|
||||
Nodding left and right<br />
|
||||
They seem lost in a space that yet hosts them since months<br />
|
||||
Common just cheer up<br />
|
||||
A younger cow is approaching<br />
|
||||
She has more white than brown, makes her look even younger, as if her pattern wasn't
|
||||
yet finished<br />
|
||||
How would it feel to be inside a cow stomach?<br />
|
||||
Warm, dark, and silent<br />
|
||||
Agitation in the stable!<br />
|
||||
One seem especially lazy<br />
|
||||
Hay is wet<br />
|
||||
A farmer passed by<br />
|
||||
The lazy one got up<br />
|
||||
I feel your pressure sister<br />
|
||||
Like when a manager comes and checks you at work
|
||||
</p>
|
||||
<p>
|
||||
Unknown number of cows in an unknown-sized farm<br />
|
||||
Two cows in frame, three bits of cows coming out of the frame.<br />
|
||||
The realisation that whatever you might be doing or busy with, these cows are
|
||||
there.<br />
|
||||
The realisation that whatever you might be busy with is somehow more fun than being
|
||||
a cow?<br />
|
||||
|
||||
The cow has some hay on top. Who put it there? How could it fall there? did it get
|
||||
stuck somehow <br />
|
||||
|
||||
Two new pattern cows come in the frame.<br />
|
||||
New gang? did they know each other already? Do they care about being brown or
|
||||
patterned?<br />
|
||||
|
||||
What is out of the frame? Wondering about that and the sound we cannot hear.<br />
|
||||
Is it cold? well probably, its in Augsburg.<br />
|
||||
|
||||
The cows melt in the background, such a rich brown palette. <br />
|
||||
EH Human in frame. quickly, crossed the frame in diagonal and left through the upper
|
||||
right corner.
|
||||
</p>
|
||||
<p>
|
||||
How do you define a group of cows? <br />
|
||||
A flock of cows?<br />
|
||||
A storm of cows?<br />
|
||||
A crowd of cows?<br />
|
||||
A family of cows?<br />
|
||||
A team of cows?<br />
|
||||
A herd of cows?<br />
|
||||
A drove of cows?<br />
|
||||
|
||||
I will just call them by their name.<br />
|
||||
From this aerial point of view you can recognize flora, in the right bottom corner
|
||||
of the view<br />
|
||||
Luca, relaxed in the left corner, with a concern on her rear right leg,<br />
|
||||
Notalie enter the stage, followed by Sofia. <br />
|
||||
Natalie is mooing about the haircut the farmer did to her.<br />
|
||||
Her black&white pattern should have been taken more in consideration during the grooming.<br />
|
||||
Sofia agrees, but then turns away from Natalie.<br />
|
||||
(I see some not-so-hidden envy here)<br />
|
||||
It happens when you keep so many gracious gracing animals in a such small place.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="episode outro">
|
||||
<h1 class="title">Cam Transcript</h1>
|
||||
<div class="meta">
|
||||
Kimberley + Carmen + Kamo <br />
|
||||
<a href="https://pad.xpub.nl/p/SP16_1210"> SI16 - with Cristina and Manetta</a>
|
||||
<a href=".." class="back">back</a>
|
||||
</div>
|
||||
|
||||
<div class="intro">
|
||||
<h2> Video Transcribing</h2>
|
||||
<ul>
|
||||
<li>In groups of 2-3:</li>
|
||||
<li>1. Decide on a video to transcribe (max 10 min)</li>
|
||||
<li>
|
||||
2. If you can't decide on one, take 3-5 minutes to think about a subject of everyday
|
||||
knowledge that is particular to a location/group. Record yourself telling the story
|
||||
</li>
|
||||
<li>3. Transcribe individually either the video or your own recording</li>
|
||||
<li>4. Compare the transcriptions</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 240 KiB |
@ -0,0 +1,50 @@
|
||||
html, body{
|
||||
margin: 0;
|
||||
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.episode{
|
||||
margin: 0 16px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
flex: 1;
|
||||
flex-basis: 30%;
|
||||
}
|
||||
|
||||
.container > * + * {
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
.meta {
|
||||
text-align: center;
|
||||
margin-bottom: 64px;
|
||||
}
|
||||
|
||||
.outro {
|
||||
margin: 64px auto;
|
||||
padding: 0 16px;
|
||||
border-top: 1px dashed tomato;
|
||||
padding-top: 64px;
|
||||
max-width: 1440px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
@ -0,0 +1,65 @@
|
||||
const table = document.getElementById("table");
|
||||
|
||||
fetch("./cms.json")
|
||||
.then((response) => {
|
||||
return response.json();
|
||||
})
|
||||
.then((data) => populateContents(data));
|
||||
|
||||
function populateContents(data) {
|
||||
data.projects.reverse().forEach((project) => addRow(project));
|
||||
}
|
||||
|
||||
function addRow(project) {
|
||||
let row = document.createElement("tr");
|
||||
|
||||
let title = document.createElement("td");
|
||||
title.classList.add("title");
|
||||
row.appendChild(title);
|
||||
|
||||
let titleUrl = document.createElement("a");
|
||||
titleUrl.href = project.url;
|
||||
titleUrl.innerHTML = project.title;
|
||||
title.appendChild(titleUrl);
|
||||
|
||||
let links = document.createElement("td");
|
||||
links.classList.add("links");
|
||||
if (project.pad) {
|
||||
let padLink = document.createElement("a");
|
||||
padLink.href = project.pad;
|
||||
padLink.innerHTML = "pad";
|
||||
links.appendChild(padLink);
|
||||
}
|
||||
if (project.git) {
|
||||
let gitLink = document.createElement("a");
|
||||
gitLink.href = project.git;
|
||||
gitLink.innerHTML = "git";
|
||||
links.appendChild(gitLink);
|
||||
}
|
||||
if (project.links.length) {
|
||||
project.links.forEach((url) => {
|
||||
let link = document.createElement("a");
|
||||
link.href = url.url;
|
||||
link.innerHTML = url.title;
|
||||
links.appendChild(link);
|
||||
});
|
||||
}
|
||||
row.appendChild(links);
|
||||
|
||||
let categories = document.createElement("td");
|
||||
categories.classList.add("categories");
|
||||
project.categories.forEach((tag) => {
|
||||
let category = document.createElement("span");
|
||||
category.classList.add("tag");
|
||||
category.innerHTML = tag;
|
||||
categories.appendChild(category);
|
||||
});
|
||||
row.appendChild(categories);
|
||||
|
||||
let date = document.createElement("td");
|
||||
date.classList.add("date");
|
||||
date.innerHTML = project.date;
|
||||
row.appendChild(date);
|
||||
|
||||
table.appendChild(row);
|
||||
}
|
||||
@ -0,0 +1,102 @@
|
||||
{
|
||||
"projects": [
|
||||
{
|
||||
"title": "Text Lifeboats",
|
||||
"date": "Sep 28, 2021",
|
||||
"url": "09-28-2021-lifeboats/",
|
||||
"git": "",
|
||||
"pad": "https://pad.xpub.nl/p/collab_week3",
|
||||
"links": [],
|
||||
"categories": [
|
||||
"JS",
|
||||
"Text"
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Text Weaving",
|
||||
"date": "Oct 5, 2021",
|
||||
"url": "10-05-2021-weaving/",
|
||||
"git": "https://git.xpub.nl/kamo/text_weaving",
|
||||
"pad": "https://pad.xpub.nl/p/replacing_cats",
|
||||
"links": [],
|
||||
"categories": [
|
||||
"Python",
|
||||
"NLTK",
|
||||
"Text"
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Chat Reader",
|
||||
"date": "Oct 6, 2021",
|
||||
"url": "10-06-2021-chat_reader/",
|
||||
"git": "https://git.xpub.nl/kamo/chat-reader",
|
||||
"pad": "https://pad.xpub.nl/p/SP16_0510",
|
||||
"links": [],
|
||||
"categories": [
|
||||
"JS",
|
||||
"Chat",
|
||||
"Text"
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Cam Transcript",
|
||||
"date": "Oct 12, 2021",
|
||||
"url": "10-12-2021-cam-transcript/",
|
||||
"git": "",
|
||||
"pad": "https://pad.xpub.nl/p/cam-stranscript",
|
||||
"links": [],
|
||||
"categories": [
|
||||
"Text",
|
||||
"Video"
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Rejection 🧠⛈️",
|
||||
"date": "Oct 19, 2021",
|
||||
"url": "../rejection/",
|
||||
"git": "",
|
||||
"pad": "https://pad.xpub.nl/p/GroupMeeting_18102021",
|
||||
"links": [
|
||||
{
|
||||
"url": "https://pad.xpub.nl/p/Rejection_Glossary",
|
||||
"title": "Glossary"
|
||||
},
|
||||
{
|
||||
"url": "https://pzwiki.wdka.nl/mediadesign/Rejection",
|
||||
"title": "Wiki"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"SI16",
|
||||
"Process"
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "🥣 Soup-gen",
|
||||
"date": "Oct 19, 2021",
|
||||
"url": "../soup-gen/",
|
||||
"git": "https://git.xpub.nl/grgr/soup-gen",
|
||||
"pad": "",
|
||||
"links": [],
|
||||
"categories": [
|
||||
"Web",
|
||||
"CMS",
|
||||
"Long Term"
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "🎵 K-PUB",
|
||||
"date": "Oct 21, 2021",
|
||||
"url": "../k-pub/",
|
||||
"git": "https://git.xpub.nl/grgr/k-pub",
|
||||
"pad": "",
|
||||
"links": [],
|
||||
"categories": [
|
||||
"Event",
|
||||
"vvvv",
|
||||
"Text",
|
||||
"Long Term"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,11 @@
|
||||
@font-face {
|
||||
font-family: "Ortica";
|
||||
font-weight: bold;
|
||||
src: url("./Ortica-Bold.woff2") format("woff2"), url("./Ortica-Bold.woff") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Ortica";
|
||||
font-weight: normal;
|
||||
src: url("./Ortica-Light.woff2") format("woff2"), url("./Ortica-Light.woff") format("woff");
|
||||
}
|
||||
@ -0,0 +1,76 @@
|
||||
@import url("./font/font.css");
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
background-color: #fdd;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.4;
|
||||
font-family: "Ortica", serif;
|
||||
}
|
||||
|
||||
/* LINKS */
|
||||
|
||||
a {
|
||||
color: currentColor;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a::after {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
display: inline-block;
|
||||
content: "⤴";
|
||||
color: tomato;
|
||||
transform: translate(0);
|
||||
transition: transform 0.6s ease-in;
|
||||
}
|
||||
|
||||
a:hover::after {
|
||||
transform: translateY(-4px);
|
||||
transition: transform 0.1s ease-out;
|
||||
}
|
||||
|
||||
/* RETURN */
|
||||
|
||||
.back {
|
||||
display: block;
|
||||
color: tomato;
|
||||
}
|
||||
|
||||
.back::before {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
display: inline-block;
|
||||
color: tomato;
|
||||
content: "← ";
|
||||
transform: translateX(0);
|
||||
transition: transform 0.6s ease-in;
|
||||
}
|
||||
|
||||
.back:hover::before {
|
||||
transform: translateX(-4px);
|
||||
transition: transform 0.1s ease-out;
|
||||
}
|
||||
|
||||
.back::after {
|
||||
content: "";
|
||||
}
|
||||
|
||||
/* INTRO BOX */
|
||||
|
||||
.intro {
|
||||
background-color: tomato;
|
||||
border-radius: 16px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
/* LISTS */
|
||||
|
||||
ul {
|
||||
margin: 16px 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
li + li {
|
||||
margin-top: 0.25em;
|
||||
}
|
||||
@ -0,0 +1,36 @@
|
||||
<!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>Kamo</title>
|
||||
<link rel="stylesheet" href="global.css" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<script src="name.js" defer></script>
|
||||
<script src="cms.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="title">probably hungry</h1>
|
||||
<div class="info">
|
||||
hello this is a log of francesco also and only known as
|
||||
<span id="name-space">kamo</span>
|
||||
<a href=".." class="back">back to the soupboat</a>
|
||||
</div>
|
||||
|
||||
<table id="table">
|
||||
<!-- <tr>
|
||||
<td class="title"><a href="05-10-2021-weaving/">Text Weaving</a></td>
|
||||
<td class="links">
|
||||
<a href="https://git.xpub.nl/kamo/text_weaving">git</a>
|
||||
</td>
|
||||
<td class="categories">
|
||||
<span class="tag">Python</span>
|
||||
<span class="tag">NLTK</span>
|
||||
<span class="tag">Text</span>
|
||||
</td>
|
||||
<td class="date">10-05-2021</td>
|
||||
</tr> -->
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,36 @@
|
||||
const nameSpace = document.getElementById("name-space");
|
||||
|
||||
const list = [
|
||||
"kamo",
|
||||
"sumo",
|
||||
"camo",
|
||||
"gamo",
|
||||
"fra",
|
||||
"salamino",
|
||||
"zuppetta",
|
||||
"soup eater",
|
||||
"soul eater",
|
||||
"sound eater",
|
||||
"k",
|
||||
"eheheh",
|
||||
"🗿",
|
||||
"🐡",
|
||||
"fridge haunter",
|
||||
"fridge hunter",
|
||||
"fridge terror",
|
||||
"niiiice",
|
||||
"slice",
|
||||
"BUT",
|
||||
];
|
||||
|
||||
function randomName() {
|
||||
return list[Math.floor(Math.random() * list.length)];
|
||||
}
|
||||
|
||||
setInterval(() => {
|
||||
nameSpace.innerHTML = randomName();
|
||||
nameSpace.classList.add("rotate");
|
||||
setTimeout(() => {
|
||||
nameSpace.classList.remove("rotate");
|
||||
}, 5000);
|
||||
}, 5000);
|
||||
@ -0,0 +1,107 @@
|
||||
.title {
|
||||
margin: 32px;
|
||||
}
|
||||
|
||||
.info {
|
||||
margin: 32px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
table {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
tr:nth-child(odd) {
|
||||
background-color: #ffd0d0;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 24px 16px;
|
||||
text-align: left;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
td:first-of-type {
|
||||
padding-left: 32px;
|
||||
}
|
||||
|
||||
td:last-of-type {
|
||||
text-align: right;
|
||||
padding-right: 32px;
|
||||
}
|
||||
|
||||
.tag {
|
||||
color: tomato;
|
||||
border: 1px solid tomato;
|
||||
display: inline-block;
|
||||
padding: 4px 16px;
|
||||
line-height: 1;
|
||||
border-radius: 1em;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.tag + .tag {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
#name-space {
|
||||
display: inline-block;
|
||||
transform: rotate(0);
|
||||
transition: all 0.5s ease-out;
|
||||
}
|
||||
|
||||
#name-space.rotate {
|
||||
transform: rotate(-1turn);
|
||||
transition: all 0s linear;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
table {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
tr {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
td,
|
||||
td:first-of-type,
|
||||
td:last-of-type {
|
||||
margin: 0;
|
||||
padding: 0 32px;
|
||||
width: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
td.title {
|
||||
margin: 16px 0;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
td.links {
|
||||
display: none;
|
||||
}
|
||||
|
||||
td.categories {
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
td.date {
|
||||
position: absolute;
|
||||
font-size: 18px;
|
||||
top: 16px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.tag {
|
||||
font-size: 18px;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue