diff --git a/.eleventy.js b/.eleventy.js index 39caa7d..40ffabe 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -17,6 +17,12 @@ module.exports = eleventyConfig => { }); }); + // Add excerpts + eleventyConfig.setFrontMatterParsingOptions({ + excerpt: true, + excerpt_separator: "" + }); + // Minify CSS eleventyConfig.addFilter("cssmin", code => { return new CleanCSS({}).minify(code).styles; diff --git a/README.md b/README.md index ac4f24f..b7c8aa3 100644 --- a/README.md +++ b/README.md @@ -39,9 +39,13 @@ This tells Netlify that when some change happens on the `master` branch13 and then fire up your local server by running `npx @11ty/eleventy --serve`. Watch out for compilaton errors in your Terminal window while you are editing content. + +Before you edit your content, it is good practice to run `git fetch` to get remote updates and `git pull` if there are any updates. And of course, be sure to push your edits with `git push` when you are done and ready to publish them. -Within the Markdown files, you will find frontmatter at the top of the file delimited by `---`. This defines important structured data that is separate from the main page content found beneath the frontmatter. +The content is primarily written in Markdown, so please refer to their documentation for syntax tips. Keep an eye on your curly quotes and apostrophes. Within the Markdown files, you will find frontmatter at the top of the file delimited by `---`. This defines important structured data written in Yaml that is separate from the main page content found beneath the frontmatter. If you need to put `:` or `-` characters in any of your Yaml content, you should wrap it in quotations. + +All of the content files can be found in `/src`. As a general rule, you should feel confident editing Markdown files (files ending in `.md`). You can also edit template files (`.njk`), styles (`.css`), JavaScript (`.js`), or data (`.json`), but changes to these files may require more delicate consideration. The content that you will edit most frequently is: @@ -49,16 +53,10 @@ The content that you will edit most frequently is: - `/src/pages` – Includes your main pages (Home, Thinking, etc.) as well as default pages such as Privacy - `/src/posts` - Used to populate the Writing feed -Within these directories, you may find a `/_drafts` folder. Files within this folder will not be published, so you can safely keep WIP files within these folders. See the demo markdown files within these folders for examples of how to format content +Within each of these directories, you may find a `/_drafts` folder. Files within this folder will not be published, so you can safely keep WIP files within these folders. See the demo markdown files within these folders for examples of how to format content. You may also find a `.json` file within these folders. These data files set default values for their sibling `.md` files so that these values do not need to be rewritten again and again. -To edit content locally, open up your local site files in your preferred text editor13 and then fire up your local server by running `npx @11ty/eleventy --serve`. - -The content is primarily written in Markdown, so please refer to their documentation for syntax tips. Keep an eye on your curly quotes and apostrophes. - -Be sure to push your edits when you’re done! - ### Editing styles TODO Obvi it’s mostly CSS, but will include guidance about how to tweak colours easily, in particular. diff --git a/src/_data/arena.js b/src/_data/arena.js index 9556880..9338824 100644 --- a/src/_data/arena.js +++ b/src/_data/arena.js @@ -63,19 +63,6 @@ const getArenaChannels = async channelId => { .reverse() .slice(0, 10); - // Get a description from the text blocks if necessary - if (newChannel.description == null) { - let text = contents - .filter(b => { - return b.class == "Text"; - }) - .map(b => { - return b.content; - }) - .join(" ") - .slice(0, 140); - newChannel.description = text ? text + "…" : null; - } // Return the channel with the additional image and description content return newChannel; }); diff --git a/src/_data/global.json b/src/_data/global.json index f1a198b..baca761 100644 --- a/src/_data/global.json +++ b/src/_data/global.json @@ -1,4 +1,7 @@ { + "arrowsNext": "→, ↳, ↬, ➝, ➨, ⇢, ➺, ➽, ➯, ➔, ⤷, ⫸", + "arrowsPrevious": "←, ↵, ↫, ⬱, ⬸, ⬳, ⬿, ⤶, ⫷", + "arrowsTop": "↟, ⇑, ⬏, ↑, ⇡, ⟰, ⤴", "lang": "en", "schemaType": "Person", "siteTitle": "Gemma Copeland" diff --git a/src/_includes/assets/css/components.blocks.css b/src/_includes/assets/css/components.blocks.css index 45f6f80..97fcf70 100644 --- a/src/_includes/assets/css/components.blocks.css +++ b/src/_includes/assets/css/components.blocks.css @@ -42,6 +42,10 @@ line-height: var(--line-height-small); } +.block__desc a { + border-bottom: none; +} + .block__media { overflow: hidden; margin-bottom: 0.5rem; diff --git a/src/_includes/assets/css/components.css b/src/_includes/assets/css/components.css index 0e0401a..660d8e0 100644 --- a/src/_includes/assets/css/components.css +++ b/src/_includes/assets/css/components.css @@ -25,6 +25,10 @@ margin-right: 0.2rem; } +.tag:hover { + text-decoration: none; +} + .tag:last-child:after { content: none; } @@ -39,5 +43,8 @@ .article__time { display: inline-block; +} + +.header--article { margin-bottom: 0.875rem; } diff --git a/src/_includes/assets/css/components.footer.css b/src/_includes/assets/css/components.footer.css index 5ab6aca..e74d3b4 100644 --- a/src/_includes/assets/css/components.footer.css +++ b/src/_includes/assets/css/components.footer.css @@ -16,3 +16,7 @@ font-size: var(--font-small); line-height: var(--line-height-small); } + +.section--footer > * { + max-width: 25rem; +} diff --git a/src/_includes/assets/css/components.pagination.css b/src/_includes/assets/css/components.pagination.css new file mode 100644 index 0000000..98d3cae --- /dev/null +++ b/src/_includes/assets/css/components.pagination.css @@ -0,0 +1,49 @@ +.pagination { + margin-bottom: 1rem; + padding-left: 1rem; + padding-right: 1rem; + padding-top: 1rem; + position: relative; +} + +.pagination__simple { + display: flex; + font-size: 1.5rem; + justify-content: space-between; + max-width: 34rem; +} + +.pagination__list { + color: var(--color-1); + display: flex; + flex-wrap: wrap; + list-style: none; + max-width: 34rem; +} + +.pagination a { + border: none; + color: var(--color-1); +} + +.pagination a:hover, +.pagination a:focus { + color: var(--color-black); +} + +.pagination__list a { + color: var(--color-grey-dark); +} + +.pagination__list li:not(:last-child) .pagination__page:after { + content: ","; + margin-right: 0.3rem; +} + +.pagination__top { + bottom: 0; + font-size: 1.5rem; + padding: 0 1em; + position: absolute; + right: 0; +} diff --git a/src/_includes/assets/css/layout.css b/src/_includes/assets/css/layout.css index a698629..1f6edbd 100644 --- a/src/_includes/assets/css/layout.css +++ b/src/_includes/assets/css/layout.css @@ -7,3 +7,14 @@ .article .prose > * { max-width: 34rem; } + +.writing .main, +.post .main { + display: flex; + flex-direction: column; +} + +.writing .main section, +.post .main section { + flex-grow: 1; +} diff --git a/src/_includes/assets/css/media.screen-large.css b/src/_includes/assets/css/media.screen-large.css index 9ca27fd..1d45ed2 100644 --- a/src/_includes/assets/css/media.screen-large.css +++ b/src/_includes/assets/css/media.screen-large.css @@ -55,6 +55,10 @@ display: block; } + .panel--profile .section--footer { + width: 100%; + } + .home main, .thinking main { display: flex; @@ -72,18 +76,26 @@ } .activity { + align-items: baseline; display: flex; } .activity__time { - width: 5.125rem; + min-width: 5.125rem; } body > footer { display: flex; } - body > footer section { + body footer section { width: 50%; } } + +@media screen and (min-width: 55em) { + .home .panel--profile footer, + .thinking .panel--profile footer { + display: flex; + } +} diff --git a/src/_includes/assets/css/typography.css b/src/_includes/assets/css/typography.css index f6a95e9..703817f 100644 --- a/src/_includes/assets/css/typography.css +++ b/src/_includes/assets/css/typography.css @@ -11,14 +11,17 @@ margin-bottom: 0.625rem; } -.prose p ~ p img { - margin-top: 1rem; +.prose h1, +.prose h2, +.prose h3, +.prose h4, +.prose h5, +.prose h6 { + margin-top: 2rem; } -.prose p:last-child, -.prose ul:last-child, -.prose ol:last-child { - margin-bottom: 0; +.prose p ~ p img { + margin-top: 1rem; } .prose blockquote { @@ -37,6 +40,30 @@ margin-top: 1.25rem; } +.article .prose ul { + list-style: disc; + padding-left: 1rem; +} + +.article .prose ol { + padding-left: 1.5rem; +} + +.prose code, +.prose pre { + font-size: 16px; +} + +.prose p > code { + background: var(--color-2); + padding: 0.125rem; +} + +.prose pre { + background: var(--color-2); + padding: 0.5rem; +} + .section--contact p { margin-bottom: 0; } diff --git a/src/_includes/components/activity-item.njk b/src/_includes/components/activity-item.njk index e4f5ae3..163a383 100644 --- a/src/_includes/components/activity-item.njk +++ b/src/_includes/components/activity-item.njk @@ -38,5 +38,8 @@ {%- if a.data.location -%}
{{ a.data.location }} {%- endif -%} + {% if a.data.subtext %} +
{{ a.data.subtext | safe }} + {% endif %}

\ No newline at end of file diff --git a/src/_includes/components/blocks.njk b/src/_includes/components/blocks.njk index 61584a7..5a45c1b 100644 --- a/src/_includes/components/blocks.njk +++ b/src/_includes/components/blocks.njk @@ -10,9 +10,9 @@ {{ channel.title }}

{% if channel.description %} -

- {{ channel.description | safe }} -

+
+ {{ channel.description | markdownify | safe }} +
{% endif %} {% if channel.images %}
diff --git a/src/_includes/components/head.njk b/src/_includes/components/head.njk index 28a7fec..39d07b9 100644 --- a/src/_includes/components/head.njk +++ b/src/_includes/components/head.njk @@ -13,6 +13,7 @@ {% include "assets/css/components.header.css" %} {% include "assets/css/components.footer.css" %} {% include "assets/css/components.blocks.css" %} + {% include "assets/css/components.pagination.css" %} {% include "assets/css/components.panel.css" %} {% include "assets/css/typography.css" %} {% include "assets/css/helpers.css" %} diff --git a/src/_includes/components/header-writing.njk b/src/_includes/components/header-writing.njk index 565cb14..7160126 100644 --- a/src/_includes/components/header-writing.njk +++ b/src/_includes/components/header-writing.njk @@ -1,6 +1,6 @@ {% include "components/header.njk" %} -