v9.2.4-alpha.5: button css + header button (#15)

# v9.2.4-alpha.5 fix: - button css: rm [href] from a, causing inheritance/cascade issues - emoji descriptions feat: add header button - yay [11ty conf](https://conf.11ty.dev/) feat: enhance chromagen readout ```diff --- a/_includes/layouts/base.njk +++ b/_includes/layouts/base.njk - <summary>🎨 + <summary><span role="img" aria-label="palette">🎨</span> - <span title="lighter">L+ ${colorScheme.lighter} </span> + <span title="lighter">LR ${colorScheme.lighter} </span> - <span title="darker">D+ ${colorScheme.darker} </span> + <span title="darker">DR ${colorScheme.darker} </span> ``` docs: mono link and backgrouund
rdela · Apr 2, 2024 · 61ee887 · 61ee887
1 parent 2e8fbb0
commit 61ee887
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 37 deletions.
diff --git a/README.md b/README.md
@@ -10,17 +10,18 @@ Eleventy Base Blog is:
 
 > A starter repository showing how to build a blog with the [Eleventy](https://www.11ty.dev/) site generator (using the [v2.0 release](https://www.11ty.dev/blog/eleventy-v2/)).
 
-In addition to Base Blog’s killer features and Eleventy 3’s bundler-free [ESM](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) support, eleventeen sports a novel new visual experience we call [Rainbow Mode™](https://github.com/rdela/eleventeen/pull/1), powered by [Chromagen](https://github.com/famebot/chromagen), the color scheme generator we publish under the [famebot](https://github.com/famebot) organization. Our homegrown Rainbow Mode is wholly distinct from and not to be confused with Emacs [rainbow-mode](https://elpa.gnu.org/packages/rainbow-mode.html), which “sets background color to strings that match color
+In addition to Base Blog’s killer features and Eleventy 3’s bundler-free [ESM](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) support, eleventeen sports a novel new visual experience we call [Rainbow Mode™](https://github.com/rdela/eleventeen/pull/1), powered by [Chromagen](https://github.com/famebot/chromagen), the color scheme generator we publish under the [Famebot](https://github.com/famebot) organization. Our homegrown Rainbow Mode is wholly distinct from and not to be confused with Emacs [rainbow-mode](https://elpa.gnu.org/packages/rainbow-mode.html), which “sets background color to strings that match color
 names.” We posit a third color scheme preference in addition to light and dark “modes,” rainbow.
 
 Here in the world of eleventeen, rainbow is the default. But we acknowledge not all sites are a match for Rainbow Mode, and still want those sites to enjoy the rest of what eleventeen has to offer, so [v9.2.3-alpha.5](https://github.com/rdela/eleventeen/releases/tag/v9.2.3-alpha.5), adds a `mono` option to [`_data/metadata.js`](_data/metadata.js) in [PR #13](https://github.com/rdela/eleventeen/pull/13) that will disable Rainbow Mode if you set it to `true`. `mono` is `false` by default, on purpose, because it beats making people set an option called `rainbow` to `false` and might make the current `{%- if not metadata.mono %}` template logic in [`_includes/layouts/base.njk`](_includes/layouts/base.njk) a little more resilient.
 
-<figure role="img" aria-label="">fig. 1<br />
-🎈📓 ➕ 🎨💥 🟰 🌈💥</figure>
+You can see mono enabled at [mono.eleventeen.blog](https://mono.eleventeen.blog). Try toggling light and dark mode using devtools, there are links to how at the bottom to [chromagen.io](https://chromagen.io/). The rainbow eleventeen demo still lives at [eleventeen.blog](https://eleventeen.blog) <span role="img" aria-label="">🌈📓</span>
 
+<figure role="img" aria-label="">fig. 1<br />
+🎈📓 ➕ 🎨💥 🟰 🌈💥</figure><br />
 
 Rejoicing and rainbows aside, eleventeen also adds post images in [PR #10](https://github.com/rdela/eleventeen/pull/10) / [v9.2.1-alpha.5 ](https://github.com/rdela/eleventeen/releases/tag/v9.2.1-alpha.5), refines them further in 🎈[PR #11](https://github.com/rdela/eleventeen/pull/10) / [v9.2.2-alpha.5 ](https://github.com/rdela/eleventeen/releases/tag/v9.2.2-alpha.5), and makes some more subtle adjustments to Eleventy Base Blog. There are various changes in `public/css/index.css`, and in `_includes/postslist.njk`:
- 
+
 ```njk
 <ol reversed class="postlist" style="counter-reset: start-from {{ (postslistCounter or postslist.length) + 1 }}">
 ```
@@ -35,8 +36,6 @@ The eleventeen name is an homage to the [Daisy Chainsaw album](https://en.wikipe
 
 Please remember to star [eleventeen on GitHub](https://github.com/rdela/eleventeen) <span role="img" aria-label="">⭐️🐙</span>
 
-Visit the [live eleventeen demo](https://eleventeen.blog) on <https://eleventeen.blog> <span role="img" aria-label="">🌈📓</span>
-
 [![Netlify Status](https://api.netlify.com/api/v1/badges/bd16afdb-d0a5-4de2-aa5c-19529038ed78/deploy-status)](https://app.netlify.com/sites/eleventeen/deploys)
 
 ## Getting Started

diff --git a/_data/metadata.js b/_data/metadata.js
@@ -1,5 +1,5 @@
 let data = {
-	title: "eleventeen v9.2.3-alpha.5",
+	title: "eleventeen v9.2.4-alpha.5",
 	url: "https://eleventeen.blog",
 	language: "en",
 	description: "Rainbow Eleventy blog",
@@ -9,7 +9,7 @@ let data = {
 		url: "https://example.org",
 	},
 	mono: false,
-	eleventeen: "v9.2.3-alpha.5",
+	eleventeen: "v9.2.4-alpha.5",
 };
 
 export default data;
diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk
@@ -55,6 +55,8 @@
 					{%- endfor %}
 					</ul>
 				</nav>
+
+				<a class="button" href="https://conf.11ty.dev/">Attend 11ty Conf <span role="img" aria-label="">🎫</span></a>
 			</header>
 
 			<main id="skip">
@@ -114,19 +116,19 @@ activateColorScheme();
 
 document.querySelector('#rainbutton').innerHTML = `<button title="wish upon a star" onclick="rainbow()">🌈 Rainbow Me</button>`;
 document.querySelector('#chromagen').innerHTML = `<details>
-	<summary>🎨
+	<summary><span role="img" aria-label="palette">🎨</span>
 		<span title="hue"> H&nbsp;${colorScheme.hue} </span> 
 		<span title="complement">C&nbsp;${colorScheme.complement} </span> 
 		<span title="analogous">A&nbsp;${colorScheme.analogous}</span>
 	</summary>
 	<span title="saturation">S&nbsp;${colorScheme.saturation} </span>
 	<span title="xlight">XL&nbsp;${colorScheme.xlight} </span>
-	<span title="lighter">L+&nbsp;${colorScheme.lighter} </span>
+	<span title="lighter">LR&nbsp;${colorScheme.lighter} </span>
 	<span title="lightness">L&nbsp;${colorScheme.lightness} </span>
 	<span title="midrange">M&nbsp;${colorScheme.midrange} </span>
 	<span title="lowmid">LM&nbsp;${colorScheme.lowmid} </span>
 	<span title="darkness">D&nbsp;${colorScheme.darkness} </span>
-	<span title="darker">D+&nbsp;${colorScheme.darker} </span>
+	<span title="darker">DR&nbsp;${colorScheme.darker} </span>
 	<a href="https://chromagen.io">Chromagen</a>
 </details>`;
 }

diff --git a/_includes/layouts/home.njk b/_includes/layouts/home.njk
@@ -12,6 +12,10 @@ layout: layouts/base.njk
 		<li>(Optional) Review <code>eleventy.config.js</code> build <a href="https://www.11ty.dev/docs/config/">configuration</a>.</li>
 		<li>Delete this message from <code>_includes/layouts/home.njk</code>.</li>
 	</ol>
-	<p><em>This is an <a href="https://www.11ty.dev/">Eleventy project</a> created from <a href="https://github.com/rdela/eleventeen">eleventeen</a>, a variation of <a href="https://github.com/11ty/eleventy-base-blog">Eleventy Base Blog</a></em> <span role="img" aria-label="">👉</span> Find out more <a href="/about/">about eleventeen</a> <span role="img" aria-label="">📖✨</span></p>
+	<p><em>This is an <a href="https://www.11ty.dev/">Eleventy project</a> 
+	created from <a href="https://github.com/rdela/eleventeen">eleventeen</a>, 
+	a variation of <a href="https://github.com/11ty/eleventy-base-blog">Eleventy Base Blog</a></em> 
+	<span role="img" aria-label="">👉</span> Find out more <a href="/about/">about eleventeen</a> 
+	<span role="img" aria-label="">📖✨</span></p>
 </div>
 <!-- Stop deleting -->
diff --git a/content/about/index.md b/content/about/index.md
@@ -4,12 +4,20 @@ eleventyNavigation:
   key: About
   order: 3
 ---
+
 # About
 
 Eleventeen is a work in progress variation of [Eleventy Base Blog](https://github.com/11ty/eleventy-base-blog), an [Eleventy](https://www.11ty.dev) blog starter. The name is an homage to the [Daisy Chainsaw album](https://en.wikipedia.org/wiki/Eleventeen_(album)) <span role="img" aria-label="">👩🏻‍🎤🎶</span>
 
-The eleventeen demo lives at <https://eleventeen.blog> <span role="img" aria-label="">🌈📓</span>
+Eleventy Base Blog is:
+
+> A starter repository showing how to build a blog with the [Eleventy](https://www.11ty.dev/) site generator (using the [v2.0 release](https://www.11ty.dev/blog/eleventy-v2/)).
+
+In addition to Base Blog’s killer features and Eleventy 3’s bundler-free [ESM](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) support, eleventeen sports a novel new visual experience we call [Rainbow Mode™](https://github.com/rdela/eleventeen/pull/1), powered by [Chromagen](https://github.com/famebot/chromagen), the color scheme generator we publish under the [Famebot](https://github.com/famebot) organization. Our homegrown Rainbow Mode is wholly distinct from and not to be confused with Emacs [rainbow-mode](https://elpa.gnu.org/packages/rainbow-mode.html), which “sets background color to strings that match color
+names.” We posit a third color scheme preference in addition to light and dark “modes,” rainbow.
+
+Here in the world of eleventeen, rainbow is the default. But we acknowledge not all sites are a match for Rainbow Mode, and still want those sites to enjoy the rest of what eleventeen has to offer, so [v9.2.3-alpha.5](https://github.com/rdela/eleventeen/releases/tag/v9.2.3-alpha.5), adds a `mono` option to [`_data/metadata.js`](_data/metadata.js) in [PR #13](https://github.com/rdela/eleventeen/pull/13) that will disable Rainbow Mode if you set it to `true`. `mono` is `false` by default, on purpose, because it beats making people set an option called `rainbow` to `false` and might make the current  {% raw %}`{%- if not metadata.mono %}`{% endraw %} template logic in [`_includes/layouts/base.njk`](_includes/layouts/base.njk) a little more resilient.
 
-Please remember to star [eleventeen on GitHub](https://github.com/rdela/eleventeen) <span role="img" aria-label="">⭐️🐙</span>
+You can see mono enabled at [mono.eleventeen.blog](https://mono.eleventeen.blog). Try toggling light and dark mode using devtools, there are links to how at the bottom to [chromagen.io](https://chromagen.io/). The rainbow eleventeen demo still lives at [eleventeen.blog](https://eleventeen.blog) <span role="img" aria-label="">🌈📓</span>
 
-<br /><a class="button" href="https://eleventeen.blog">👾 Be a Star ⭐️</a>
+Please remember to star [eleventeen on GitHub](https://github.com/rdela/eleventeen) <span role="img" aria-label="">⭐️🐙</span>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "eleventeen",
-	"version": "9.2.3-alpha.5",
+	"version": "9.2.4-alpha.5",
 	"description": "A starter repository for a blog web site using the Eleventy site generator.",
 	"type": "module",
 	"scripts": {

diff --git a/public/css/index.css b/public/css/index.css
@@ -102,17 +102,17 @@ li {
 	line-height: 1.5;
 }
 
-a[href] {
+a {
 	color: var(--text-color-link);
 }
-a[href]:visited {
+a:visited {
 	color: var(--text-color-link-visited);
 }
-a[href]:focus,
-a[href]:hover {
+a:focus,
+a:hover {
 	color: var(--text-color-link-highlight);
 }
-a[href]:active {
+a:active {
 	color: var(--text-color-link-active);
 }
 
@@ -140,10 +140,10 @@ button:active,
 .button {
 	text-decoration: none;
 }
-.button[href]:focus,
-.button[href]:hover
-.button[href]:active,
-.button[href]:visited {
+.button:focus,
+.button:hover,
+.button:active,
+.button:visited {
 	color: var(--text-color-light);
 }
 
@@ -165,12 +165,12 @@ figure {
 
 /* header {
 	border-bottom: 1px dashed #e0e0e0;
-} */
+} 
 header:after {
 	content: "";
 	display: table;
 	clear: both;
-}
+} */
 
 .links-nextprev {
 	list-style: none;
@@ -239,10 +239,11 @@ footer {
 
 /* Header */
 header {
+	align-items: center;
 	display: flex;
-	gap: 1em 0.5em;
 	flex-wrap: wrap;
-	align-items: center;
+	gap: 1em 0.5em;
+	justify-content: space-between;
 }
 .home-link {
 	font-size: 1em; /* 16px /16 */
@@ -264,10 +265,10 @@ header {
 	display: inline-block;
 	margin-right: 1em;
 }
-.nav-item a[href]:not(:hover) {
+.nav-item a:not(:hover) {
 	text-decoration: none;
 }
-.nav a[href][aria-current="page"] {
+.nav a[aria-current="page"] {
 	text-decoration: underline;
 }
 
@@ -384,16 +385,16 @@ header {
 	font-size: 1em;
 	margin-left: 0.1em;
 }
-a[href].header-anchor,
-a[href].header-anchor:visited {
+a.header-anchor,
+a.header-anchor:visited {
 	color: transparent;
 }
-a[href].header-anchor:focus,
-a[href].header-anchor:hover {
+a.header-anchor:focus,
+a.header-anchor:hover {
 	text-decoration: underline;
 }
-a[href].header-anchor:focus,
-:hover > a[href].header-anchor {
+a.header-anchor:focus,
+:hover > a.header-anchor {
 	color: #aaa;
 }