Layout wrapping, image sizes

keeffEoghan · Dec 7, 2023 · 61da4c9 · 61da4c9
1 parent 34769d3
commit 61da4c9
Show file tree

Hide file tree

Showing 57 changed files with 428 additions and 35 deletions.
diff --git a/.posthtmlrc b/.posthtmlrc
@@ -7,9 +7,7 @@
         "linkify": true,
         "typographer": true
       },
-      "plugins": [{
-        "plugin": "markdown-it-attrs"
-      }]
+      "plugins": [{ "plugin": "markdown-it-attrs" }]
     }
   }
 }
diff --git a/.yarn/cache/base64-js-npm-1.5.1-b2f7275641-669632eb37.zip b/.yarn/cache/base64-js-npm-1.5.1-b2f7275641-669632eb37.zip
diff --git a/.yarn/cache/bl-npm-4.1.0-7f94cdcf3f-9e8521fa7e.zip b/.yarn/cache/bl-npm-4.1.0-7f94cdcf3f-9e8521fa7e.zip
diff --git a/.yarn/cache/buffer-npm-5.7.1-513ef8259e-e2cf8429e1.zip b/.yarn/cache/buffer-npm-5.7.1-513ef8259e-e2cf8429e1.zip
diff --git a/.yarn/cache/chownr-npm-1.1.4-5bd400ab08-115648f8eb.zip b/.yarn/cache/chownr-npm-1.1.4-5bd400ab08-115648f8eb.zip
diff --git a/.yarn/cache/color-npm-4.2.3-4a23227581-0579629c02.zip b/.yarn/cache/color-npm-4.2.3-4a23227581-0579629c02.zip
diff --git a/.yarn/cache/color-string-npm-1.9.1-dc020e56be-c13fe7cff7.zip b/.yarn/cache/color-string-npm-1.9.1-dc020e56be-c13fe7cff7.zip
diff --git a/.yarn/cache/decompress-response-npm-6.0.0-359de2878c-d377cf47e0.zip b/.yarn/cache/decompress-response-npm-6.0.0-359de2878c-d377cf47e0.zip
diff --git a/.yarn/cache/deep-extend-npm-0.6.0-e182924219-7be7e5a8d4.zip b/.yarn/cache/deep-extend-npm-0.6.0-e182924219-7be7e5a8d4.zip
diff --git a/.yarn/cache/end-of-stream-npm-1.4.4-497fc6dee1-530a5a5a1e.zip b/.yarn/cache/end-of-stream-npm-1.4.4-497fc6dee1-530a5a5a1e.zip
diff --git a/.yarn/cache/expand-template-npm-2.0.3-80de959306-588c198472.zip b/.yarn/cache/expand-template-npm-2.0.3-80de959306-588c198472.zip
diff --git a/.yarn/cache/fs-constants-npm-1.0.0-59576b2177-18f5b71837.zip b/.yarn/cache/fs-constants-npm-1.0.0-59576b2177-18f5b71837.zip
diff --git a/.yarn/cache/github-from-package-npm-0.0.0-519f80c9a1-14e448192a.zip b/.yarn/cache/github-from-package-npm-0.0.0-519f80c9a1-14e448192a.zip
diff --git a/.yarn/cache/ieee754-npm-1.2.1-fb63b3caeb-5144c0c981.zip b/.yarn/cache/ieee754-npm-1.2.1-fb63b3caeb-5144c0c981.zip
diff --git a/.yarn/cache/inherits-npm-2.0.4-c66b3957a0-4a48a73384.zip b/.yarn/cache/inherits-npm-2.0.4-c66b3957a0-4a48a73384.zip
diff --git a/.yarn/cache/ini-npm-1.3.8-fb5040b4c0-dfd98b0ca3.zip b/.yarn/cache/ini-npm-1.3.8-fb5040b4c0-dfd98b0ca3.zip
diff --git a/.yarn/cache/is-arrayish-npm-0.3.2-f856180f79-977e64f54d.zip b/.yarn/cache/is-arrayish-npm-0.3.2-f856180f79-977e64f54d.zip
diff --git a/.yarn/cache/mimic-response-npm-3.1.0-a4a24b4e96-25739fee32.zip b/.yarn/cache/mimic-response-npm-3.1.0-a4a24b4e96-25739fee32.zip
diff --git a/.yarn/cache/minimist-npm-1.2.8-d7af7b1dce-75a6d645fb.zip b/.yarn/cache/minimist-npm-1.2.8-d7af7b1dce-75a6d645fb.zip
diff --git a/.yarn/cache/mkdirp-classic-npm-0.5.3-3b5c991910-3f4e088208.zip b/.yarn/cache/mkdirp-classic-npm-0.5.3-3b5c991910-3f4e088208.zip
diff --git a/.yarn/cache/napi-build-utils-npm-1.0.2-892e4bba56-06c14271ee.zip b/.yarn/cache/napi-build-utils-npm-1.0.2-892e4bba56-06c14271ee.zip
diff --git a/.yarn/cache/node-abi-npm-3.52.0-a32e767906-2ef47937d0.zip b/.yarn/cache/node-abi-npm-3.52.0-a32e767906-2ef47937d0.zip
diff --git a/.yarn/cache/node-addon-api-npm-5.1.0-b50d00f739-2508bd2d29.zip b/.yarn/cache/node-addon-api-npm-5.1.0-b50d00f739-2508bd2d29.zip
diff --git a/.yarn/cache/once-npm-1.4.0-ccf03ef07a-cd0a885013.zip b/.yarn/cache/once-npm-1.4.0-ccf03ef07a-cd0a885013.zip
diff --git a/.yarn/cache/prebuild-install-npm-7.1.1-cb9fc9d341-dbf96d0146.zip b/.yarn/cache/prebuild-install-npm-7.1.1-cb9fc9d341-dbf96d0146.zip
diff --git a/.yarn/cache/pump-npm-3.0.0-0080bf6a7a-e42e9229fb.zip b/.yarn/cache/pump-npm-3.0.0-0080bf6a7a-e42e9229fb.zip
diff --git a/.yarn/cache/rc-npm-1.2.8-d6768ac936-2e26e052f8.zip b/.yarn/cache/rc-npm-1.2.8-d6768ac936-2e26e052f8.zip
diff --git a/.yarn/cache/readable-stream-npm-3.6.2-d2a6069158-bdcbe6c22e.zip b/.yarn/cache/readable-stream-npm-3.6.2-d2a6069158-bdcbe6c22e.zip
diff --git a/.yarn/cache/sharp-npm-0.31.3-7533cf1669-29fd1dfbc6.zip b/.yarn/cache/sharp-npm-0.31.3-7533cf1669-29fd1dfbc6.zip
diff --git a/.yarn/cache/simple-concat-npm-1.0.1-48df70de29-4d211042cc.zip b/.yarn/cache/simple-concat-npm-1.0.1-48df70de29-4d211042cc.zip
diff --git a/.yarn/cache/simple-get-npm-4.0.1-fa2a97645d-e4132fd27c.zip b/.yarn/cache/simple-get-npm-4.0.1-fa2a97645d-e4132fd27c.zip
diff --git a/.yarn/cache/simple-swizzle-npm-0.2.2-8dee37fad1-a7f3f2ab5c.zip b/.yarn/cache/simple-swizzle-npm-0.2.2-8dee37fad1-a7f3f2ab5c.zip
diff --git a/.yarn/cache/string_decoder-npm-1.3.0-2422117fd0-8417646695.zip b/.yarn/cache/string_decoder-npm-1.3.0-2422117fd0-8417646695.zip
diff --git a/.yarn/cache/strip-json-comments-npm-2.0.1-e7883b2d04-1074ccb632.zip b/.yarn/cache/strip-json-comments-npm-2.0.1-e7883b2d04-1074ccb632.zip
diff --git a/.yarn/cache/tar-fs-npm-2.1.1-e374d3b7a2-f5b9a70059.zip b/.yarn/cache/tar-fs-npm-2.1.1-e374d3b7a2-f5b9a70059.zip
diff --git a/.yarn/cache/tar-stream-npm-2.2.0-884c79b510-699831a8b9.zip b/.yarn/cache/tar-stream-npm-2.2.0-884c79b510-699831a8b9.zip
diff --git a/.yarn/cache/tunnel-agent-npm-0.6.0-64345ab7eb-05f6510358.zip b/.yarn/cache/tunnel-agent-npm-0.6.0-64345ab7eb-05f6510358.zip
diff --git a/.yarn/cache/wrappy-npm-1.0.2-916de4d4b3-159da4805f.zip b/.yarn/cache/wrappy-npm-1.0.2-916de4d4b3-159da4805f.zip
diff --git a/docs/index.5e1af0d1.css b/docs/index.5e1af0d1.css
diff --git a/docs/index.656343c9.css b/docs/index.656343c9.css
diff --git a/docs/index.html b/docs/index.html
@@ -1 +1 @@
-<!doctype html><html><head><title>Locus @ epok.tech</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" type="text/css" href="index.5e1af0d1.css"></head><body> <header> <h1>Locus</h1> <h2>Upcoming artwork ~ crowdfunding @ <a href="https://artizen.fund/project/locus" target="_blank">Artizen</a></h2> </header> <main> <section class="intro"> <p>In a digital kinetic artwork evoking meditation, fluid particles trace layers in a translucent human form, as art and audience interact by natural motion.<br> Exhibited as interactive digital installation, online, and <code>NFT</code> series.</p> <p>By <a href="https://epok.tech" target="_blank">epok.tech</a></p> </section> </main> <script src="index.38d394c2.js" type="module"></script><script src="index.38d394c2.js" nomodule defer></script> </body></html>
+<!doctype html><html><head><title>Locus @ epok.tech</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" type="text/css" href="index.656343c9.css"></head><body> <main> <header> <section> <h1>Locus</h1> <h3>Upcoming artwork @ <a href="https://epok.tech" target="_blank">epok.tech</a> ~ crowdfunding @ <a href="https://artizen.fund/project/locus" target="_blank">Artizen</a></h3> <p>A digital kinetic artwork evoking meditation, fluid particles trace layers in a translucent human form, as art and audience interact by natural motion.</p> <p>Exhibited as interactive digital installation, online, and <code>NFT</code> series.</p> </section> <figure> <img class="intro-concept-art" alt="Locus concept art" title="Locus concept art" src="peel-artifact.906c29af.png" srcset="peel-artifact-hi.1c68b54b.png 2x, peel-artifact-hi.6ead9df1.png 3x, peel-artifact-hi.a4bb9948.png 4x"> </figure>  <article> </article> </header></main> <script src="index.38d394c2.js" type="module"></script><script src="index.38d394c2.js" nomodule defer></script> </body></html>
diff --git a/docs/peel-artifact-hi.1c68b54b.png b/docs/peel-artifact-hi.1c68b54b.png
diff --git a/docs/peel-artifact-hi.6ead9df1.png b/docs/peel-artifact-hi.6ead9df1.png
diff --git a/docs/peel-artifact-hi.a4bb9948.png b/docs/peel-artifact-hi.a4bb9948.png
diff --git a/docs/peel-artifact.906c29af.png b/docs/peel-artifact.906c29af.png
diff --git a/media/peel-artifact-hi.jpg b/media/peel-artifact-hi.jpg
diff --git a/media/peel-artifact.gif b/media/peel-artifact.gif
diff --git a/media/peel-artifact.mp4 b/media/peel-artifact.mp4
diff --git a/media/peel-artifact.png b/media/peel-artifact.png
diff --git a/media/peel-bust-flow-square.png b/media/peel-bust-flow-square.png
diff --git a/media/peel-bust-flow.png b/media/peel-bust-flow.png
diff --git a/media/peel.mp4 b/media/peel.mp4
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "locus",
   "version": "0.0.0",
-  "description": "In a digital kinetic artwork evoking meditation, fluid particles trace layers in a translucent human form, as art and audience interact by natural motion. Exhibited as interactive digital installation, online, and `NFT` series.",
+  "description": "A digital kinetic artwork evoking meditation, fluid particles trace layers in a translucent human form, as art and audience interact by natural motion. Exhibited as interactive digital installation, online, and `NFT` series.",
   "repository": "https://github.com/keeffEoghan/locus.git",
   "homepage": "https://epok.tech/locus",
   "author": "Eoghan O'Keeffe <[email protected]> (https://epok.tech)",
@@ -18,7 +18,8 @@
     "dist:fresh": "yarn clean && yarn build:fresh",
     "build": "parcel build --target app --no-source-maps",
     "build:fresh": "yarn build --no-cache",
-    "clean": "yarn clean:build & yarn clean:parcel & wait",
+    "clean": "yarn clean:dev & yarn clean:build & yarn clean:parcel & wait",
+    "clean:dev": "rm -rf ./dist/",
     "clean:build": "rm -rf ./docs/",
     "clean:parcel": "rm -rf ./.parcel-cache"
   },
@@ -31,6 +32,7 @@
     "postcss-nesting": "^12.0.1",
     "postcss-url": "^10.1.3",
     "posthtml-markdownit": "^1.3.1",
+    "sharp": "^0.31.1",
     "typescript": "^5.3.2"
   },
   "main": "docs/index.html",

diff --git a/readme.md b/readme.md
@@ -1,6 +1,6 @@
 # [Locus](https://epok.tech/locus)
 
-In a digital kinetic artwork evoking meditation, fluid particles trace layers in a translucent human form, as art and audience interact by natural motion.
+A digital kinetic artwork evoking meditation, fluid particles trace layers in a translucent human form, as art and audience interact by natural motion.
 
 Exhibited as interactive digital installation, online, and `NFT` series.
 

diff --git a/src/index.css b/src/index.css
@@ -19,6 +19,13 @@
   --c-hi: #fff;
   --c-lo: #333;
   --c-link: #2d9cdb;
+  --s-m0-x: 4rem;
+  --s-m0-y: 2rem;
+  --s-s0-x: 5px;
+  --s-s0-y: 3px;
+  --s-s0-r: 2px;
+  --s-s1-r: 3px;
+  --s-line: 33rem;
 }
 
 *,
@@ -42,21 +49,50 @@ body {
   min-height: 100%;
   margin: 0;
   font-size: 1em;
+  line-height: 1.5;
   animation: 500ms ease-out 700ms 1 backwards fadeIn;
   will-change: opacity;
 }
 
+main {
+  flex: 1 1 auto;
+  width: 100%;
+}
+
+header,
+article {
+  position: relative;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+section {
+  /* flex: 1 1 auto; */
+  flex: 1 1 var(--s-line);
+}
+
+figure {
+  flex: 1 1 50%;
+  display: flex;
+  margin: 0;
+  max-height: 75vh;
+}
+
 img,
 video,
 canvas {
+  flex: 1 1 auto;
   max-width: 100%;
   max-height: 100%;
+  object-fit: cover;
 }
 
 code {
   font-family: monospace, sans-serif;
-  border-radius: 3px;
-  padding: 3px 5px;
+  border-radius: var(--s-s1-r);
+  padding: var(--s-s0-y) var(--s-s0-x);
   background: var(--c-lo);
   color: var(--c-hi);
 }
@@ -68,20 +104,22 @@ a {
   font-weight: 900;
   cursor: pointer;
   text-decoration: none;
-  transition: color 800ms ease-out;
+  transition: color 900ms ease-out;
+
+  &[target="_blank"] { cursor: alias; }
 
   &::after {
     content: '';
     display: block;
     pointer-events: none;
     position: absolute;
-    left: -3px;
-    right: -3px;
+    left: calc(-1*var(--s-s0-r));
+    right: calc(-1*var(--s-s0-r));
     z-index: -1;
-    bottom: -3px;
-    height: 2px;
+    bottom: calc(-1*var(--s-s0-r));
+    height: var(--s-s0-r);
     background: currentColor;
-    transition: transform 800ms ease-out;
+    transition: transform 900ms ease-out;
   }
 
   &:hover,
@@ -91,7 +129,7 @@ a {
     transition: color 200ms ease-in;
 
     &::after {
-      transform: translateY(80%) scaleY(0.5);
+      transform: translateY(2px) scaleY(0.5);
       transition: transform 200ms ease-in;
     }
   }
@@ -104,8 +142,8 @@ h4,
 h5,
 h6 {
   color: var(--c-hi);
-  line-height: 1.5;
-  margin: 1rem 2rem;
+  margin: var(--s-m0-y) var(--s-m0-x);
+  max-width: var(--s-line);
 }
 
 h1 {
@@ -130,6 +168,6 @@ h5 {}
 h6 {}
 
 p {
-  margin: 1rem 2rem;
-  line-height: 1.5;
+  margin: var(--s-m0-y) var(--s-m0-x);
+  max-width: var(--s-line);
 }
diff --git a/src/index.html b/src/index.html
@@ -7,17 +7,29 @@
     <link rel="stylesheet" type="text/css" href="./index.css">
   </head>
   <body>
-    <header md>
-      # Locus
-      ## Upcoming artwork ~ crowdfunding @ [Artizen](https://artizen.fund/project/locus){target="_blank"}
-    </header>
     <main>
-      <section md class="intro">
-        In a digital kinetic artwork evoking meditation, fluid particles trace layers in a translucent human form, as art and audience interact by natural motion.
-        Exhibited as interactive digital installation, online, and `NFT` series.
+      <header>
+        <section md>
+          # Locus
+          ### Upcoming artwork @ [epok.tech](https://epok.tech){target="_blank"} ~ crowdfunding @ [Artizen](https://artizen.fund/project/locus){target="_blank"}
 
-        By [epok.tech](https://epok.tech){target="_blank"}
-      </section>
+          A digital kinetic artwork evoking meditation, fluid particles trace layers in a translucent human form, as art and audience interact by natural motion.
+
+          Exhibited as interactive digital installation, online, and `NFT` series.
+        </section>
+        <figure>
+          <img class="intro-concept-art"
+            alt="Locus concept art" title="Locus concept art"
+            src="../media/peel-artifact.png?width=1000"
+            srcset="../media/peel-artifact-hi.jpg?as=png&width=2000 2x,
+              ../media/peel-artifact-hi.jpg?as=png&width=3000 3x,
+              ../media/peel-artifact-hi.jpg?as=png&width=4000 4x"
+          />
+        </figure>
+        <!-- <figure md inline>![Locus concept art](../media/peel-artifact.png "Locus concept art"){srcset="../media/peel-artifact-2x.jpg?as=png&width=2000 2x, ../media/peel-artifact-2x.jpg?as=png&width=3000 3x, ../media/peel-artifact-2x.jpg?as=png&width=4000 4x"}</figure> -->
+      </article>
+      <article md>
+      </article>
     </main>
     <script src="./index.js" type="module"></script>
   </body>
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!doctype html><html><head><title>Locus @ epok.tech</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" type="text/css" href="index.5e1af0d1.css"></head><body> <header> <h1>Locus</h1> <h2>Upcoming artwork ~ crowdfunding @ <a href="https://artizen.fund/project/locus" target="_blank">Artizen</a></h2> </header> <main> <section class="intro"> <p>In a digital kinetic artwork evoking meditation, fluid particles trace layers in a translucent human form, as art and audience interact by natural motion.<br> Exhibited as interactive digital installation, online, and <code>NFT</code> series.</p> <p>By <a href="https://epok.tech" target="_blank">epok.tech</a></p> </section> </main> <script src="index.38d394c2.js" type="module"></script><script src="index.38d394c2.js" nomodule defer></script> </body></html>
		<!doctype html><html><head><title>Locus @ epok.tech</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" type="text/css" href="index.656343c9.css"></head><body> <main> <header> <section> <h1>Locus</h1> <h3>Upcoming artwork @ <a href="https://epok.tech" target="_blank">epok.tech</a> ~ crowdfunding @ <a href="https://artizen.fund/project/locus" target="_blank">Artizen</a></h3> <p>A digital kinetic artwork evoking meditation, fluid particles trace layers in a translucent human form, as art and audience interact by natural motion.</p> <p>Exhibited as interactive digital installation, online, and <code>NFT</code> series.</p> </section> <figure> <img class="intro-concept-art" alt="Locus concept art" title="Locus concept art" src="peel-artifact.906c29af.png" srcset="peel-artifact-hi.1c68b54b.png 2x, peel-artifact-hi.6ead9df1.png 3x, peel-artifact-hi.a4bb9948.png 4x"> </figure> <article> </article> </header></main> <script src="index.38d394c2.js" type="module"></script><script src="index.38d394c2.js" nomodule defer></script> </body></html>