diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..7fdf1d4 Binary files /dev/null and b/.DS_Store differ diff --git a/about.html b/about.html index d048bc6..401122c 100644 --- a/about.html +++ b/about.html @@ -16,14 +16,15 @@
+

About

diff --git a/descriptions.json b/descriptions.json new file mode 100644 index 0000000..9007acd --- /dev/null +++ b/descriptions.json @@ -0,0 +1,56 @@ +{ + "vlcsnap-2021-10-25-10h54m02s729.png": { + "description": "A lot of onigiry" + }, + "img.png": { + "description": "" + }, + "Conformal_grid_before_Mobius_transformation.svg.png": { + "description": "" + }, + "etre.png": { + "description": "" + }, + "pp.png": { + "description": "" + }, + "download.png": { + "description": "" + }, + "one_to_one_translation.jpg": { + "description": "* istruzioni per l'uso per traduzione_poesia_italiano_inglese\r\nBenvenuto in traduzione_poesia (1)!\r\n\r\nVorrei che traducessi questa poesia in inglese. Puoi utilizzare un traduttore per ottenere la traduzione di singole parole, ma spero che farai del tuo meglio per fare una scelta ponderata sulla parola che utilizzerai. Ogni parola ha il suo potere!\r\n\r\nQuesta raccolta di traduzioni far\u00e0 parte del materiale che mi servir\u00e0 per utilizzare la mia funzione mashup(), che pu\u00f2 essere utilizzata solo con testi con lo stesso numero di righe. Pertanto, ti chiedo gentilmente di creare gli spazi accanto al testo, in ordine, e creando uno spazio per riga. In questo modo il contenuto estratto sar\u00e0 pronto per essere elaborato.\r\n\r\nIn pratica:\r\n\r\n .a Fai clic e trascina per creare lo spazio in cui inserire la traduzione (riga per riga, in ordine, uno spazio per riga)\r\n .b Fai clic su '' inserisci '' o fai clic sulla '' x '' se non \u00e8 come volevi\r\n\r\nGrazie per la partecipazione!\r\nTorna presto sul nostro sito per vedere come \u00e8 stato utilizzato il tuo contributo :)" + }, + "free_fun_translation.jpg": { + "description": "*usage instructions for vernacular translation experiment\r\n\r\n''there is NOT a single way, a most correct way, or a best way to translate a poem.'' \r\n\r\nFollowing this quote, I would like you to translate this poem to the language you prefer/feel more comfortable with/your mother tongue. You can use a translator to obtain the translation of single words, but i hope you will do \r\n\r\nyour best to make a thoughtful choice on the word you will choose. Every word has its own power!\r\n\r\nInteract with this text as you prefer and translate it in the way you feel, word by word, using negative space, writing on the text, off the text, following the lines or not? \r\n\r\n .a Click and drag to create the space(s) where you want to insert your translation\r\n .b Click ''insert'' or click on the ''x'' if it's not as you wanted\r\n\r\nThank you! Come back to our website to see how your contribution has been used :)" + }, + "korean.jpg": { + "description": "\r\nWelcome to many to one translation!\r\n\r\nI would like you to translate this poem to english. You can use a translator to obtain the translation of single words, but i hope you will do your best to make a thoughtful choice on the word you will choose. Every word has its own power!\r\n\r\nThis collection of translations will be part of the material I will use to experiment with my mashup() function, that can be used only with texts with the same number of lines. Therefore, I kindly ask you to create a big box next to the text and then insert your translation in the box, in order, line by line. This is so that the content extracted will be ready to be processed!\r\n\r\nIn practice:\r\n\r\n.a Click and drag to create the space where to insert your translation (line by line, in order)\r\n.b Click ''insert'' or click on the ''x'' if it's not as you want\r\nc. Come back on our website soon to see how your contribution has been used.\r\n\r\nThank you for your participation!\r\n:)\r\n" + }, + "bulgarian.jpg": { + "description": "Welcome to many to one translation!\r\n\r\nI would like you to translate this poem to english. You can use a translator to obtain the translation of single words, but i hope you will do your best to make a thoughtful choice on the word you will choose. Every word has its own power!\r\n\r\nThis collection of translations will be part of the material I will use to experiment with my mashup() function, that can be used only with texts with the same number of lines. Therefore, I kindly ask you to create the spaces next to the text, in order, and one space per line. This is so that the content extracted will be ready to be processed.\r\n\r\n .b Click and drag to create the space where you want to insert your translation (line by line, in order, one space per line)\r\n .c Click ''insert'' or click on the ''x'' if it's not as you want\r\n\r\nThank you for your participation!\r\nGet back on our website soon to see how your contribution has been used." + }, + "dutch.jpg": { + "description": "Welcome to many to one translation!\r\n\r\nI would like you to translate this poem to english. You can use a translator to obtain the translation of single words, but i hope you will do your best to make a thoughtful choice on the word you will choose. Every word has its own power!\r\n\r\nThis collection of translations will be part of the material I will use to experiment with my mashup() function, that can be used only with texts with the same number of lines. Therefore, I kindly ask you to create the spaces next to the text, in order, and one space per line. This is so that the content extracted will be ready to be processed.\r\n\r\n .b Click and drag to create the space where you want to insert your translation (line by line, in order, one space per line)\r\n .c Click ''insert'' or click on the ''x'' if it's not as you want\r\n\r\nThank you for your participation!\r\nGet back on our website soon to see how your contribution has been used." + }, + "french.jpg": { + "description": "Welcome to many to one translation!\r\n\r\nI would like you to translate this poem to english. You can use a translator to obtain the translation of single words, but i hope you will do your best to make a thoughtful choice on the word you will choose. Every word has its own power!\r\n\r\nThis collection of translations will be part of the material I will use to experiment with my mashup() function, that can be used only with texts with the same number of lines. Therefore, I kindly ask you to create the spaces next to the text, in order, and one space per line. This is so that the content extracted will be ready to be processed.\r\n\r\n .b Click and drag to create the space where you want to insert your translation (line by line, in order, one space per line)\r\n .c Click ''insert'' or click on the ''x'' if it's not as you want\r\n\r\nThank you for your participation!\r\nGet back on our website soon to see how your contribution has been used." + }, + "greek.jpg": { + "description": "Welcome to many to one translation!\r\n\r\nI would like you to translate this poem to english. You can use a translator to obtain the translation of single words, but i hope you will do your best to make a thoughtful choice on the word you will choose. Every word has its own power!\r\n\r\nThis collection of translations will be part of the material I will use to experiment with my mashup() function, that can be used only with texts with the same number of lines. Therefore, I kindly ask you to create the spaces next to the text, in order, and one space per line. This is so that the content extracted will be ready to be processed.\r\n\r\n .b Click and drag to create the space where you want to insert your translation (line by line, in order, one space per line)\r\n .c Click ''insert'' or click on the ''x'' if it's not as you want\r\n\r\nThank you for your participation!\r\nGet back on our website soon to see how your contribution has been used." + }, + "german.jpg": { + "description": "Welcome to many to one translation!\r\n\r\nI would like you to translate this poem to english. You can use a translator to obtain the translation of single words, but i hope you will do your best to make a thoughtful choice on the word you will choose. Every word has its own power!\r\n\r\nThis collection of translations will be part of the material I will use to experiment with my mashup() function, that can be used only with texts with the same number of lines. Therefore, I kindly ask you to create the spaces next to the text, in order, and one space per line. This is so that the content extracted will be ready to be processed.\r\n\r\n .b Click and drag to create the space where you want to insert your translation (line by line, in order, one space per line)\r\n .c Click ''insert'' or click on the ''x'' if it's not as you want\r\n\r\nThank you for your participation!\r\nGet back on our website soon to see how your contribution has been used." + }, + "italian.jpg": { + "description": "Welcome to many to one translation!\r\n\r\nI would like you to translate this poem to english. You can use a translator to obtain the translation of single words, but i hope you will do your best to make a thoughtful choice on the word you will choose. Every word has its own power!\r\n\r\nThis collection of translations will be part of the material I will use to experiment with my mashup() function, that can be used only with texts with the same number of lines. Therefore, I kindly ask you to create the spaces next to the text, in order, and one space per line. This is so that the content extracted will be ready to be processed.\r\n\r\n .b Click and drag to create the space where you want to insert your translation (line by line, in order, one space per line)\r\n .c Click ''insert'' or click on the ''x'' if it's not as you want\r\n\r\nThank you for your participation!\r\nGet back on our website soon to see how your contribution has been used." + }, + "spanish.jpg": { + "description": "Welcome to many to one translation!\r\n\r\nI would like you to translate this poem to english. You can use a translator to obtain the translation of single words, but i hope you will do your best to make a thoughtful choice on the word you will choose. Every word has its own power!\r\n\r\nThis collection of translations will be part of the material I will use to experiment with my mashup() function, that can be used only with texts with the same number of lines. Therefore, I kindly ask you to create the spaces next to the text, in order, and one space per line. This is so that the content extracted will be ready to be processed.\r\n\r\n .b Click and drag to create the space where you want to insert your translation (line by line, in order, one space per line)\r\n .c Click ''insert'' or click on the ''x'' if it's not as you want\r\n\r\nThank you for your participation!\r\nGet back on our website soon to see how your contribution has been used." + }, + "thai.jpg": { + "description": "*usage instructions for many_to_one_poem_translation\r\n\r\nWelcome to many to one translation!\r\n\r\nI would like you to translate this poem to english. You can use a translator to obtain the translation of single words, but i hope you will do your best to make a thoughtful choice on the word you will choose. Every word has its own power!\r\n\r\nThis collection of translations will be part of the material I will use to experiment with my mashup() function, that can be used only with texts with the same number of lines. Therefore, I kindly ask you to create a big box next to the text and then insert your translation in the box, in order, line by line. This is so that the content extracted will be ready to be processed!\r\n\r\nIn practice:\r\n\r\n.a Click and drag to create the space where to insert your translation (line by line, in order)\r\n.b Click ''insert'' or click on the ''x'' if it's not as you want\r\nc. Come back on our website soon to see how your contribution has been used.\r\n\r\nThank you for your participation!\r\n:)\r\n" + }, + "rejection_map.jpg": { + "description": "Rejection Map\r\nA Situated Topography of Rejection\r\n\r\nYou are invited to share your experiences with rejection in the city of Rotterdam. Please be aware that your descriptions will be visible for others to read. Your contribution is voluntary and anonymous: You decide what moments and details you want to share and there is no data collected that traces back to you. As rejection is a sensitive topic, you should only share intimate things if you feel comfortable and safe. When sharing moments that involve other individuals, please be mindful that they might not want to be exposed.\r\n\r\n\r\n1. Open the link to the Annotation Compass. You can see the map of Rotterdam\r\n\r\n2. Look at the map and try to think of a moment of rejection you experienced in a certain area in Rotterdam\r\n\r\n3. Use your cursor to select this specific area of the map where you can insert your first experience. It can be a quite small area (if you want to select a building) or a bigger one (if your experience includes a whole neighborhood).\r\n\r\n4. Please choose your own way to describe your moment of rejection. It can be short or long; formal or informal; personal or distanced; poetic or pragmatic; cryptic or explicit; anecdotal or out of context; using vernacular or academic language, slang or mother tongue; using whole sentences, single words, single letters or punctuation only \u2026 Do whatever you feel most comfortable with.\r\n\r\n5. Click \u201dinsert\u201c to save your first description or \u201dx\u201c if you want to delete it.\r\n\r\n6. Follow the same steps to add more moments of rejection if you like. If several moments relate to the same space or area, they can overlap.\r\n\r\nThank you for sharing!\r\n\r\n\r\n[Map of Rotterdam \u00a9 OpenStreetMap contributors]" + } +} \ No newline at end of file diff --git a/function.html b/function.html new file mode 100644 index 0000000..fe76a03 --- /dev/null +++ b/function.html @@ -0,0 +1,68 @@ + + + + + + + SI16 - Learning how to walk while catwalking + + + + + + + + + + + +
+
+
+
+

Shout

+ +
+ +
+
+
+ Qui dolor voluptate nostrud laboris. Culpa laboris culpa velit ea. In commodo + eiusmod reprehenderit enim adipisicing. +
+
+
+

Input

+
    +
  • Text [str]
    • +
  • Volume [int]
    • +
+
+
+
+

Output

+
    +
  • Shouted Text [str]
    • +
+
+
+
+

Enpoints

+ + https://hub.xpub.nl/soupboat/si16-app/api/shout/?text=<text>&volume=<volume> + +
Example
+ https://hub.xpub.nl/soupboat/si16-app/api/shout/?text=Hello&volume=5 +
+
+
+
+ +
+
Special Issue 16—Learning How to Walk while Catwalking
+
+ + diff --git a/index.html b/home.html similarity index 100% rename from index.html rename to home.html diff --git a/manifesto.html b/manifesto.html index 8222947..a95811e 100644 --- a/manifesto.html +++ b/manifesto.html @@ -17,14 +17,15 @@
+

My friend came to try it

diff --git a/static/.DS_Store b/static/.DS_Store index e54f620..b6194bf 100644 Binary files a/static/.DS_Store and b/static/.DS_Store differ diff --git a/static/css/function.css b/static/css/function.css new file mode 100644 index 0000000..f85ecdb --- /dev/null +++ b/static/css/function.css @@ -0,0 +1,42 @@ +.description { + grid-column: 1 / span 2; +} + +.function-io { + margin: 60px 0; + grid-column: 1 / -1; + display: grid; + grid-template-columns: 1fr 1fr 1fr; + place-items: start; + grid-gap: 30px; +} + +.function-io > * { + width: 100%; + height: 100%; +} + +.function-io .input, +.function-io .output { + background-color: white; + aspect-ratio: 1; + border-radius: 50%; +} + +.function-io h3 { + margin: 0; +} + +.function-io ul { + font-family: "Necto"; + list-style: none; + padding: 0; +} + +.endpoints { + grid-column: 1 / -1; +} + +.endpoints code { + background-color: white; +} diff --git a/static/css/global.css b/static/css/global.css index 02ffeda..f13c1c8 100644 --- a/static/css/global.css +++ b/static/css/global.css @@ -7,6 +7,7 @@ body { font-family: var(--font); font-size: var(--text); line-height: 1.4; + overflow-x: hidden; } h1, @@ -29,13 +30,28 @@ a { color: currentColor; } -.sticker { - text-decoration: none; +code { + font-family: "Necto"; } /* STICKER CONTAINER */ #sticker-container { + position: absolute; + left: 0; + top: 0; + bottom: 0; + right: 0; + + pointer-events: none; + + z-index: 100; + + min-height: 100vh; + height: 100%; +} + +#sticker-fix-container { position: fixed; left: 0; top: 0; @@ -44,7 +60,10 @@ a { pointer-events: none; - z-index: 1000; + z-index: 300; + + min-height: 100vh; + height: 100%; } .sticker { @@ -57,6 +76,7 @@ a { font-size: 18px; padding: 0 6px; box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); + text-decoration: none; } *[data-sticker] { @@ -67,7 +87,7 @@ a { .page--header { position: fixed; - z-index: 100; + z-index: 200; top: 60px; left: 50%; @@ -93,24 +113,22 @@ header { border-radius: var(--radius); background-color: var(--background); box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25); - min-height: 64px; + height: 48px; /* comment this in page with multiple elements in the header */ + flex-basis: 48px; - padding: 0 12px; + padding: 0px 12px; } .page--header .title { + /* flex-grow: 0; */ + /* flex-shrink: 1; */ + /* line-height: 1; */ margin: 0; - /* padding: 0 12px; */ } .page--header .subtitle { - margin: 0; - margin-bottom: 6px; - /* padding: 0 12px; */ -} - -.title + .subtitle { - margin-top: -6px; + line-height: 1; + margin: 6px 0; } nav { @@ -119,8 +137,8 @@ nav { .page--header nav a { display: inline-block; - width: 64px; - height: 64px; + width: 48px; + height: 48px; border-radius: 50%; border: 1px solid currentColor; background-color: var(--background); diff --git a/static/css/home.css b/static/css/home.css index 8a0768a..fdea409 100644 --- a/static/css/home.css +++ b/static/css/home.css @@ -14,6 +14,7 @@ .negative { position: relative; visibility: hidden; + cursor: pointer; background-color: var(--background); border-radius: var(--radius); diff --git a/static/css/list.css b/static/css/list.css index 7921fb3..3297621 100644 --- a/static/css/list.css +++ b/static/css/list.css @@ -22,7 +22,7 @@ tr:last-of-type { } td { - padding: 24px 0;+++ + padding: 24px 0; } td.title { diff --git a/static/font/Necto-Mono.woff b/static/font/Necto-Mono.woff new file mode 100644 index 0000000..e9306c9 Binary files /dev/null and b/static/font/Necto-Mono.woff differ diff --git a/static/font/Necto-Mono.woff2 b/static/font/Necto-Mono.woff2 new file mode 100644 index 0000000..0b273ef Binary files /dev/null and b/static/font/Necto-Mono.woff2 differ diff --git a/static/font/font.css b/static/font/font.css index cac1d27..51d0545 100644 --- a/static/font/font.css +++ b/static/font/font.css @@ -32,3 +32,11 @@ font-style: normal; font-display: swap; } + +@font-face { + font-family: "Necto"; + src: url("./Necto-Mono.woff2") format("woff2"), url("./Necto-Mono.woff") format("woff"); + font-weight: normal; + font-style: normal; + font-display: swap; +} diff --git a/static/js/homeSticker.js b/static/js/homeSticker.js index 2b92860..66cb8e2 100644 --- a/static/js/homeSticker.js +++ b/static/js/homeSticker.js @@ -5,13 +5,12 @@ var throttleSpawn = _.throttle(spawnSticker, 400); Array.from(negativeStickers).forEach((spawner) => { spawner.addEventListener("click", (e) => spawnSticker(e)); - // spawner.addEventListener("mousemove", (e) => throttleSpawn(e)); }); function spawnSticker(e) { e.preventDefault(); e.stopPropagation(); - let position = { x: e.clientX, y: e.clientY }; + let position = { x: e.pageX, y: e.pageY }; getFromNegative(e.target, position); } diff --git a/static/js/spawnSticker.js b/static/js/spawnSticker.js index 945436a..e3b2c08 100644 --- a/static/js/spawnSticker.js +++ b/static/js/spawnSticker.js @@ -1,19 +1,41 @@ +// +// +// Container is positioned absolute and the stickers scroll const stickerSpawners = document.querySelectorAll("[data-sticker]"); const container = document.getElementById("sticker-container"); - var throttleSpawn = _.throttle(spawnSticker, 400); Array.from(stickerSpawners).forEach((spawner) => { spawner.addEventListener("mousemove", (e) => throttleSpawn(e)); }); -// spawnSticker(spawner, e); function spawnSticker(e) { - let position = { x: e.clientX, y: e.clientY }; + let position = { x: e.pageX, y: e.pageY }; let content = e.target.dataset.sticker; - createSticker(content, position); + container.appendChild(createSticker(content, position)); } +// +// Container is positioned fixed and the stickers remain in overlay +// (useful for the fixed header) +const fixedStickerSpawners = document.querySelectorAll("[data-sticker-fix]"); +const fixedContainer = document.getElementById("sticker-fix-container"); +var throttleFixedSpawn = _.throttle(spawnFixedSticker, 400); + +Array.from(fixedStickerSpawners).forEach((spawner) => { + spawner.addEventListener("mousemove", (e) => throttleFixedSpawn(e)); +}); + +function spawnFixedSticker(e) { + let position = { x: e.clientX, y: e.clientY }; + let content = e.target.dataset.stickerFix; + fixedContainer.appendChild(createSticker(content, position)); +} + +// +// +// the sticker element is the same for both function + function createSticker(content, position) { sticker = document.createElement("div"); sticker.classList.add("sticker"); @@ -26,5 +48,5 @@ function createSticker(content, position) { rotate(${Math.random() * 40 - 20}deg) `; - container.appendChild(sticker); + return sticker; }