From 25ad8954eb37dd6d59702fe415f4023928a40d60 Mon Sep 17 00:00:00 2001 From: "kam (from the studio)" Date: Tue, 14 Dec 2021 18:26:18 +0100 Subject: [PATCH] content, home, list template --- about.html | 4 +-- index.html | 58 ++++++++++++++++++------------- list.html | 69 ++++++++++++++++++++++++++++++++++++ static/css/global.css | 20 +++++++++-- static/css/home.css | 41 +++++++++++++++++----- static/css/list.css | 73 +++++++++++++++++++++++++++++++++++++++ static/css/manifesto.css | 2 +- static/js/homeSticker.js | 32 +++++++++++++++++ static/js/spawnSticker.js | 6 ++-- 9 files changed, 265 insertions(+), 40 deletions(-) create mode 100644 list.html create mode 100644 static/css/list.css create mode 100644 static/js/homeSticker.js diff --git a/about.html b/about.html index 724eb14..d048bc6 100644 --- a/about.html +++ b/about.html @@ -60,7 +60,7 @@ Nostrud occaecat nostrud laborum non magna ea do dolore aliqua cillum quis. Id velit incididunt enim eu anim et nulla ullamco.

- lorem ipsum + lorem ipsum

Ex enim in nulla consequat dolore dolor mollit velit nostrud anim nisi sunt. Irure laborum aliquip reprehenderit reprehenderit reprehenderit nostrud mollit. @@ -73,7 +73,7 @@ velit aliquip id pariatur. Fugiat non anim eiusmod cupidatat ut mollit. Mollit laborum dolore eu proident quis.

-

+

Consectetur enim duis enim non ea sit reprehenderit aliquip sint eiusmod occaecat nostrud occaecat aute. Adipisicing eiusmod ut ipsum ipsum officia eu. Ea officia et eu consequat voluptate id voluptate. Id labore nisi mollit nisi anim eiusmod officia diff --git a/index.html b/index.html index a131075..925c188 100644 --- a/index.html +++ b/index.html @@ -13,35 +13,45 @@ - +

-
-

Learning how to walk while catwalking

-

Special Issue 16

-

Experimental Publishing

- eheh -

About & Manifesto

-

About

-

Manifesto

+
+
+

Learning how to walk while catwalking

+

Experimental Publishing

+

Special Issue 16

+
-

Projects

-

Etc

-

Map

-

Rep

+
+

Info

+ About +

Manifesto

+
-

Functions

-

Lorem ipsum

-

Replace

-

Shout

-

Repeat

+
+

Projects

+

Etc

+

Map

+

Rep

+
-

Corpora

-

Veniam id in aute

-

Officia esse venia

-

Velit laboris ipsu

-

Sint voluptate ali

-
+
+

Functions

+

Lorem ipsum

+

Replace

+

Shout

+

Repeat

+
+ +
+

Corpora

+

Veniam id in aute

+

Officia esse venia

+

Velit laboris ipsu

+

Sint voluptate ali

+
+ diff --git a/list.html b/list.html new file mode 100644 index 0000000..13e7cad --- /dev/null +++ b/list.html @@ -0,0 +1,69 @@ + + + + + + + SI16 - Learning how to walk while catwalking + + + + + + + + + + + +
+
+
+

List

+ +
+ +
+
+

+ Incididunt sint excepteur amet in officia laboris ex ex non ea. Pariatur consequat + culpa qui commodo ea. Consectetur pariatur esse non consequat laboris ea sit + pariatur fugiat mollit. Non pariatur consequat magna mollit amet sunt. Incididunt + aute eu aliqua exercitation velit. Sit ea commodo amet excepteur commodo aliquip + eiusmod esse do non sit ex fugiat quis. Pariatur cupidatat duis adipisicing enim + officia laborum do voluptate. Deserunt mollit amet minim dolore occaecat anim aute + sint sit. Exercitation sint mollit cillum eiusmod ad exercitation. +

+ + + + + + + + + + + + + + + + + +
Annotation CompassEt ea tempor ex minim ad laboris id enim cupidatat.link
"and i hope all your questions have been answered" + Eiusmod nostrud est sunt reprehenderit enim occaecat do enim dolore cillum + fugiat proident. + link
Title + Veniam laboris commodo et incididunt aliqua sint aute ut magna qui nulla + occaecat. + link
+
+
+ +
+ + diff --git a/static/css/global.css b/static/css/global.css index 3b88e59..02ffeda 100644 --- a/static/css/global.css +++ b/static/css/global.css @@ -10,7 +10,8 @@ body { } h1, -h2 { +h2, +h3 { font-family: var(--font); font-weight: bold; font-style: italic; @@ -19,10 +20,19 @@ h2 { h1 { font-size: var(--title); } -h2 { +h2, +h3 { font-size: var(--text); } +a { + color: currentColor; +} + +.sticker { + text-decoration: none; +} + /* STICKER CONTAINER */ #sticker-container { @@ -57,6 +67,7 @@ h2 { .page--header { position: fixed; + z-index: 100; top: 60px; left: 50%; @@ -124,6 +135,7 @@ nav { .page--footer { position: relative; + bottom: var(--app-margin); width: calc(100% - 2 * var(--app-margin)); max-width: var(--content-width); @@ -210,6 +222,10 @@ footer { top: 30px; } + header { + min-height: 42px; + } + .page--header .title { font-size: 24px; } diff --git a/static/css/home.css b/static/css/home.css index 3379fb1..8a0768a 100644 --- a/static/css/home.css +++ b/static/css/home.css @@ -1,4 +1,17 @@ -.negative > * { +.sticker { + font-size: var(--text); + pointer-events: all; +} + +.index { + margin: calc(var(--app-margin) * 2); +} + +.sheet + .sheet { + margin-top: var(--app-margin); +} + +.negative { position: relative; visibility: hidden; @@ -8,10 +21,10 @@ margin: 12px 0; } -.negative > *:after { +.negative:after { visibility: visible; content: ""; - background-color: rgba(0, 0, 0, 0.05); + background-color: rgba(0, 0, 0, 0.075); position: absolute; top: 0; left: 0; @@ -20,13 +33,25 @@ border-radius: var(--radius); } -.negative > p { +.sheet > p { display: inline-block; + margin: 6px 0; } -h1, -h2, -h3 { - visibility: visible; +h1.negative { display: table; } + +.meta > h2 { + display: inline-block; + margin: 6px 0; +} + +.sheet .section { + padding: 0; + margin: 0; + margin-bottom: 6px; + + font-size: var(--title); + color: rgba(0, 0, 0, 0.1); +} diff --git a/static/css/list.css b/static/css/list.css new file mode 100644 index 0000000..7921fb3 --- /dev/null +++ b/static/css/list.css @@ -0,0 +1,73 @@ +.list { + grid-column: 1 / -1; + width: 100%; + margin-top: 60px; +} + +table { + border-collapse: collapse; +} + +tr { + position: relative; + border-top: 1px solid currentColor; + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-gap: 30px; +} + +tr:last-of-type { + padding-bottom: 24px; + border-bottom: 1px solid currentColor; +} + +td { + padding: 24px 0;+++ +} + +td.title { + font-weight: bold; + font-style: italic; +} + +td.description { + grid-column: 2 / span 2; + padding-right: 90px; +} + +td.link { + position: absolute; + right: 0; + text-align: right; +} + +@media (max-width: 767.98px) { + table, + tr, + td { + display: block; + } + + tr + tr { + margin-top: 24px; + } + + td { + padding: 0; + } + + td.title { + padding-right: 30px; + margin-top: 18px; + margin-bottom: 6px; + } + + td.description { + padding-right: 0; + } + + td.link { + top: 18px; + right: 0; + } +} diff --git a/static/css/manifesto.css b/static/css/manifesto.css index ca6515d..adbf124 100644 --- a/static/css/manifesto.css +++ b/static/css/manifesto.css @@ -12,7 +12,7 @@ } .chat > p + p { - margin-top: 60px; + margin-top: 45px; } .chat > p:nth-child(2n + 2) { diff --git a/static/js/homeSticker.js b/static/js/homeSticker.js new file mode 100644 index 0000000..2b92860 --- /dev/null +++ b/static/js/homeSticker.js @@ -0,0 +1,32 @@ +const negativeStickers = document.querySelectorAll(".negative"); +const container = document.getElementById("sticker-container"); + +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 }; + getFromNegative(e.target, position); +} + +function getFromNegative(target, position) { + sticker = target.cloneNode(true); + sticker.classList.add("sticker"); + sticker.classList.remove("negative"); + + sticker.style.left = position.x + "px"; + sticker.style.top = position.y + "px"; + + sticker.style.transform = ` + rotate(${Math.random() * 20 - 10}deg) + translate(-50%, -100%) + `; + + container.appendChild(sticker); +} diff --git a/static/js/spawnSticker.js b/static/js/spawnSticker.js index c8a6661..945436a 100644 --- a/static/js/spawnSticker.js +++ b/static/js/spawnSticker.js @@ -4,13 +4,13 @@ const container = document.getElementById("sticker-container"); var throttleSpawn = _.throttle(spawnSticker, 400); Array.from(stickerSpawners).forEach((spawner) => { - spawner.addEventListener("mousemove", (e) => throttleSpawn(spawner, e)); + spawner.addEventListener("mousemove", (e) => throttleSpawn(e)); }); // spawnSticker(spawner, e); -function spawnSticker(spawner, e) { +function spawnSticker(e) { let position = { x: e.clientX, y: e.clientY }; - let content = spawner.dataset.sticker; + let content = e.target.dataset.sticker; createSticker(content, position); }