diff --git a/.eleventy.cjs b/.eleventy.cjs
index 7c48571..39f9778 100644
--- a/.eleventy.cjs
+++ b/.eleventy.cjs
@@ -22,8 +22,6 @@ module.exports = function(config) {
config.addPassthroughCopy({
'src/assets': '/',
'src/admin': 'admin',
- "./node_modules/@11ty/is-land/is-land.js": "js/is-land.js",
- "./node_modules/@11ty/is-land/is-land-autoinit.js": "js/is-land-autoinit.js"
})
config.setServerPassthroughCopyBehavior("passthrough")
diff --git a/package-lock.json b/package-lock.json
index ec386ae..a7e97ab 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,9 +11,7 @@
"dependencies": {
"@11ty/eleventy": "^2.0.1",
"@11ty/eleventy-plugin-webc": "^0.11.1",
- "@11ty/is-land": "^4.0.0",
"eslint": "^8.54.0",
- "lit": "^3.1.0",
"markdown-it": "^13.0.2",
"markdown-it-footnote": "^4.0.0"
}
@@ -152,15 +150,6 @@
"url": "https://opencollective.com/11ty"
}
},
- "node_modules/@11ty/is-land": {
- "version": "4.0.0",
- "resolved": "https://registry.npmjs.org/@11ty/is-land/-/is-land-4.0.0.tgz",
- "integrity": "sha512-RxbjF2+FzSu3rerHrWLRsvsPX2YM47RwXpdWCCzLhwRSsz5sJe9TnK7mphEld1gZnp2GeD5ByvhqjIc4CqidsQ==",
- "funding": {
- "type": "opencollective",
- "url": "https://opencollective.com/11ty"
- }
- },
"node_modules/@11ty/lodash-custom": {
"version": "4.17.21",
"resolved": "https://registry.npmjs.org/@11ty/lodash-custom/-/lodash-custom-4.17.21.tgz",
@@ -358,19 +347,6 @@
"resolved": "https://registry.npmjs.org/@iarna/toml/-/toml-2.2.5.tgz",
"integrity": "sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg=="
},
- "node_modules/@lit-labs/ssr-dom-shim": {
- "version": "1.1.2",
- "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.1.2.tgz",
- "integrity": "sha512-jnOD+/+dSrfTWYfSXBXlo5l5f0q1UuJo3tkbMDCYA2lKUYq79jaxqtGEvnRoh049nt1vdo1+45RinipU6FGY2g=="
- },
- "node_modules/@lit/reactive-element": {
- "version": "2.0.2",
- "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-2.0.2.tgz",
- "integrity": "sha512-SVOwLAWUQg3Ji1egtOt1UiFe4zdDpnWHyc5qctSceJ5XIu0Uc76YmGpIjZgx9YJ0XtdW0Jm507sDvjOu+HnB8w==",
- "dependencies": {
- "@lit-labs/ssr-dom-shim": "^1.1.2"
- }
- },
"node_modules/@nodelib/fs.scandir": {
"version": "2.1.5",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -446,11 +422,6 @@
"resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.5.tgz",
"integrity": "sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ=="
},
- "node_modules/@types/trusted-types": {
- "version": "2.0.7",
- "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
- "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw=="
- },
"node_modules/@ungap/structured-clone": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
@@ -1920,34 +1891,6 @@
"resolved": "https://registry.npmjs.org/list-to-array/-/list-to-array-1.1.0.tgz",
"integrity": "sha512-+dAZZ2mM+/m+vY9ezfoueVvrgnHIGi5FvgSymbIgJOFwiznWyA59mav95L+Mc6xPtL3s9gm5eNTlNtxJLbNM1g=="
},
- "node_modules/lit": {
- "version": "3.1.0",
- "resolved": "https://registry.npmjs.org/lit/-/lit-3.1.0.tgz",
- "integrity": "sha512-rzo/hmUqX8zmOdamDAeydfjsGXbbdtAFqMhmocnh2j9aDYqbu0fjXygjCa0T99Od9VQ/2itwaGrjZz/ZELVl7w==",
- "dependencies": {
- "@lit/reactive-element": "^2.0.0",
- "lit-element": "^4.0.0",
- "lit-html": "^3.1.0"
- }
- },
- "node_modules/lit-element": {
- "version": "4.0.2",
- "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-4.0.2.tgz",
- "integrity": "sha512-/W6WQZUa5VEXwC7H9tbtDMdSs9aWil3Ou8hU6z2cOKWbsm/tXPAcsoaHVEtrDo0zcOIE5GF6QgU55tlGL2Nihg==",
- "dependencies": {
- "@lit-labs/ssr-dom-shim": "^1.1.2",
- "@lit/reactive-element": "^2.0.0",
- "lit-html": "^3.1.0"
- }
- },
- "node_modules/lit-html": {
- "version": "3.1.0",
- "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.1.0.tgz",
- "integrity": "sha512-FwAjq3iNsaO6SOZXEIpeROlJLUlrbyMkn4iuv4f4u1H40Jw8wkeR/OUXZUHUoiYabGk8Y4Y0F/rgq+R4MrOLmA==",
- "dependencies": {
- "@types/trusted-types": "^2.0.2"
- }
- },
"node_modules/locate-path": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
diff --git a/package.json b/package.json
index 9189bfc..30b051a 100644
--- a/package.json
+++ b/package.json
@@ -14,9 +14,7 @@
"dependencies": {
"@11ty/eleventy": "^2.0.1",
"@11ty/eleventy-plugin-webc": "^0.11.1",
- "@11ty/is-land": "^4.0.0",
"eslint": "^8.54.0",
- "lit": "^3.1.0",
"markdown-it": "^13.0.2",
"markdown-it-footnote": "^4.0.0"
}
diff --git a/src/_content/work/chantal/index.md b/src/_content/work/chantal/index.md
index c3ef2c2..759f7ca 100644
--- a/src/_content/work/chantal/index.md
+++ b/src/_content/work/chantal/index.md
@@ -14,14 +14,14 @@ data:
value: 3mins 53secs
elements:
- title: Video
- type: mixed
+ type: rich-text
content: <div style="padding:58.06% 0 0 0;position:relative;"><iframe
src="https://player.vimeo.com/video/868279067?badge=0&autopause=0&quality_selector=1&player_id=0&app_id=58479"
frameborder="0" allow="autoplay; fullscreen; picture-in-picture"
style="position:absolute;top:0;left:0;width:100%;height:100%;"
title="Chantal"></iframe></div>
- title: Instructions
- type: text
+ type: long-form
content: >-
as OUTSIDE you are the primary vessel for this experience you will be
sensorially confused but you will be guided by the others your instruction
diff --git a/src/_content/work/varia/colonial_infrastructures_worksessions/index.md b/src/_content/work/varia/colonial_infrastructures_worksessions/index.md
index 98582d3..75a2605 100644
--- a/src/_content/work/varia/colonial_infrastructures_worksessions/index.md
+++ b/src/_content/work/varia/colonial_infrastructures_worksessions/index.md
@@ -9,7 +9,7 @@ data:
value: "[link](https://vvvvvvaria.org/)"
elements:
- title: Text
- type: mixed
+ type: rich-text
content: >-
Our worksessions intend to make tangible invisible colonial mechanisms of hierarchy and oppression that are prevalent in everyday communication technologies, yet often difficult to comprehend. We depart from knowledges and tools shared by invited guests, then learn about practices, and possibilities, of knowledge sharing that evade established colonial practices, and allow for different ways of access and dissemination.
diff --git a/src/_includes/base.webc b/src/_includes/base.webc
index 08129ec..0aae613 100644
--- a/src/_includes/base.webc
+++ b/src/_includes/base.webc
@@ -13,17 +13,11 @@
<!-- components -->
<style @raw="getBundle('css')" webc:keep></style>
<script type="module" @raw="getBundle('js')" webc:keep></script>
-
- <script type="module" webc:keep>
- import { Island } from "/js/is-land.js"
- import "/js/is-land-autoinit.js"
- </script>
-
</head>
<body :class="layout">
<!-- template content -->
- <template @html="content" webc:nokeep></template>
+ <template @raw="content" webc:nokeep></template>
</body>
</html>
diff --git a/src/_includes/cv.webc b/src/_includes/cv.webc
index dc394d2..5afbdfc 100644
--- a/src/_includes/cv.webc
+++ b/src/_includes/cv.webc
@@ -17,18 +17,20 @@ templateEngineOverride: webc,md
<div class="item" webc:for="(k,i) in c.jobs">
<header>
- <p class="detail" webc:if="i.year" @raw="i.year"></p>
+ <p class="year" webc:if="i.year" @raw="i.year"></p>
<template webc:type="11ty" 11ty:type="liquid,md">
#### <span class="title">{{ i.title }}</span> <span class="type">{{ i.type }}</span>
</template>
<p class="subtitle" webc:if="i.subtitle" @raw="i.subtitle"></p>
+ <p class="location" webc:if="i.location" @raw="i.location"></p>
</header>
- <article webc:if="i.description">
+ <details webc:if="i.description">
+ <summary>more details</summary>
<template webc:type="11ty" 11ty:type="liquid,md">
{{ i.description }}
</template>
- </article>
+ </details>
</div>
</section>
</main>
diff --git a/src/_includes/work.webc b/src/_includes/work.webc
index 43d3311..a154467 100644
--- a/src/_includes/work.webc
+++ b/src/_includes/work.webc
@@ -16,7 +16,7 @@ layout: base.webc
</script>
<aside>
- <a data-variant="back-button" href="/">
+ <a data-variant="back-button">
<span class="visibly-hidden">back</span>
</a>
@@ -42,13 +42,10 @@ layout: base.webc
</aside>
<main>
- <is-land on:visible import="/js/el-work.js">
- <el-work>
- <template webc:for="(k,d) in elements" webc:type="11ty" 11ty:type="webc,md" webc:nokeep>
- <div class="content" :data-index="k">
- <p @raw="d.content"></p>
- </div>
- </template>
- </el-work>
- </is-land>
+ <el-work>
+ <template webc:for="(k,d) in elements" webc:nokeep>
+ <long-form :@markdown="d.content" :data-index="k"></long-form>
+ <!-- <rich-text @content="d.content" :data-index="k"></rich-text> -->
+ </template>
+ </el-work>
</main>
diff --git a/src/admin/config.yml b/src/admin/config.yml
index 27d27e1..248e6ae 100644
--- a/src/admin/config.yml
+++ b/src/admin/config.yml
@@ -41,7 +41,7 @@ collections:
- {label: "Title", name: "title", widget: "string"}
- {label: "Sub-title", name: "subtitle", widget: "string", required: false }
- {label: "Data", name: "data", widget: "list", fields: [ { label: "Name", name: "name", widget: "string" }, { label: "Value", name: "value", modes: ["raw"], buttons: [], editor_components: [], minimal: true, widget: "markdown" }]}
- - {label: "Work Elements", name: "elements", widget: "list", fields: [ { label: "Title", name: "title", widget: "string" }, { label: "Type", name: "type", widget: "select", options: [ { label: "Mixed content", value: "mixed" }, {label: "Longform Text", value: "text" } ]}, { label: "Content", name: "content", widget: "markdown" }]}
+ - {label: "Work Elements", name: "elements", widget: "list", fields: [ { label: "Title", name: "title", widget: "string" }, { label: "Type", name: "type", widget: "select", options: [ { label: "Mixed content", value: "rich-text" }, {label: "Longform Text", value: "long-form" } ] }, { label: "Content", name: "content", widget: "markdown" }]}
- {label: "Body", name: "body", widget: "markdown"}
- {label: "Tags", name: "tags", widget: "list"}
meta: { path: { widget: string, label: 'Path', index_file: 'index', default: '/' } }
diff --git a/src/assets/js/el-work.js b/src/assets/js/el-work.js
deleted file mode 100644
index 7616dc4..0000000
--- a/src/assets/js/el-work.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import { LitElement, html, css } from "https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js";
-
-class ElWork extends LitElement {
- static properties = {
- selected: { type: Number }
- }
-
- constructor() {
- super()
- this.selected = 0
- }
-
- get slottedElements() {
- return this.shadowRoot.querySelector('slot').assignedElements()
- }
-
- attributeChangedCallback(name, ov, nv) {
- if (name == 'selected') {
- this.selected = nv
- this._updateVisible()
- }
- }
-
- firstUpdated() {
- this._updateVisible()
- }
-
- _updateVisible() {
- this.slottedElements.forEach(el => {
- if (el.dataset.index != this.selected) {
- el.setAttribute('hidden', '')
- } else {
- el.removeAttribute('hidden')
- }
- })
- }
-
- render() {
- return html`<slot></slot>`
- }
-
- static styles = css``
-}
-
-customElements.define('el-work', ElWork)
diff --git a/src/assets/styles/main.css b/src/assets/styles/main.css
index 6c6b6c3..565599a 100644
--- a/src/assets/styles/main.css
+++ b/src/assets/styles/main.css
@@ -14,8 +14,11 @@
--violet-400: #e43eda;
--violet-100: #e48ddf;
- --neutral-100: #fff;
- --neutral-900: #333;
+ --neutral-100: #d5e0de;
+ --neutral-200: #b4bebc;
+ --neutral-300: #809491;
+ --neutral-400: #516b66;
+ --neutral-900: #E8E9EA;
--ff-serif: 'Ortica Linear';
--ff-sans: 'Inter';
@@ -50,7 +53,7 @@ a, a:visited, a:active {
}
p:not(.cv p, .data p) {
- margin-block-end: 2em;
+ margin-block-end: var(--fs-500);
}
a[data-variant="back-button"] {
@@ -78,7 +81,7 @@ a[data-variant="back-button"]:hover {
text-align: right;
}
-h1, h2 {
+h1, h2, h3 {
font-family: var(--ff-serif, serif);
color: var(--cyan-400);
text-shadow: 2px 1px 8px var(--yellow-200);
@@ -95,6 +98,7 @@ h2 {
}
*[hidden] {
+ display: none !important;
visibility: hidden;
}
@@ -109,7 +113,7 @@ h2 {
/* ==> CV LAYOUT */
.cv .type {
font-family: var(--ff-sans);
- color: var(--neutral-300, grey);
+ color: var(--neutral-400, grey);
font-weight: 400;
font-size: var(--fs-300);
}
@@ -118,25 +122,47 @@ h2 {
min-height: 100vh;
columns: 3 auto;
column-fill: auto;
+ padding-block: var(--fs-500);
}
.cv main section {
display: grid;
grid-auto-flow: row;
gap: 1em;
- margin-block: 1em;
+}
+
+.cv main section:has(+ section) {
+ padding-block-end: 1em;
+ margin-block-end: 1em;
+ border-bottom: thin dotted var(--cyan-800);
+}
+
+.cv section h3 {
+ break-after: avoid-column;
}
.item {
display: grid;
grid-auto-flow: row;
grid-gap: 1em;
+ break-inside: avoid-column;
}
-.item article {
- padding-inline-start: var(--fs-500);
+.item .year {
+ color: var(--neutral-400);
+}
+
+.item details summary {
+ color: var(--neutral-400);
+ padding-block-end: calc(var(--fs-300) * 0.5);
+ translate: calc(var(--fs-300) * -1);
+}
+
+.item details {
+ padding-inline-start: var(--fs-300);
font-size: var(--fs-300);
- color: var(--violet-100);
+ color: var(--neutral-400);
+ max-width: 40ch;
}
/* ==> WORK LAYOUT */
@@ -150,6 +176,11 @@ body.cv {
grid-template-columns: 30ch 1fr;
}
+.work main {
+ padding-inline-start: calc(0.025 * var(--fs-300));
+ padding-block: var(--fs-500);
+}
+
:where(.work, .cv) aside {
display: grid;
grid-auto-flow: row;