astro-accelerator 5.10.14 → 5.10.16

package/package.json

@@ -1,5 +1,5 @@
 {
-    "version": "5.10.14",
+    "version": "5.10.16",
     "author": "Steve Fenton",
     "name": "astro-accelerator",
     "description": "A super-lightweight, accessible, SEO-friendly starter project for Astro",

package/public/css/main.css

@@ -94,10 +94,10 @@ textarea {
 button {
     background-color: var(--icon-block);
     border-radius: var(--block-radius);
-    color: var(--fore);
+    color: var(--aft);
     cursor: pointer;
     font-size: 1.3rem;
-    padding: 0.6rem;
+    padding: 0.5rem;
 }
 
 summary {
@@ -127,26 +127,28 @@ blockquote {
     background-color: var(--aft-block);
     font-size: 1.3rem;
     font-style: italic;
-    padding: 0.1px 1.2em;
+    padding: var(--paragraph-margin);
     position: relative;
     box-shadow: var(--box-shadow);
     margin: var(--paragraph-margin) 0;
     border-radius: var(--block-radius);
 }
 
-blockquote::after {
+blockquote > *:first-child:before {
     content: '“';
     color: var(--icon-block);
-    font-size: 5em;
-    position: absolute;
+    display: inline;
     font-family: var(--heading-font);
-    transform: translate(-50%, -50%);
-    top: 3.4rem;
+    font-size: 5em;
+    line-height: 1rem;
+    position: relative;
+    top: 0.4em;
+    right: 0.2em;
 }
 
 blockquote > *,
 blockquote > p {
-    margin-inline-start: 2em;
+    margin-inline: var(--paragraph-margin);
 }
 
 blockquote cite {
@@ -390,7 +392,7 @@ nav.skip-links a:focus {
     padding-block: 2rem;
     width: var(--content-width);
     margin-inline: auto;
-    max-width: calc(100vw - 1rem);
+    max-width: calc(100vw - 2rem);
     stroke: var(--fore);
 }
 
@@ -514,7 +516,7 @@ details.sub-nav details {
 /* Main content group */
 
 .content-group {
-    margin-inline: 0.5rem;
+    margin-inline: 1rem;
     display: grid;
     gap: var(--grid-gap);
     justify-content: center;
@@ -553,6 +555,12 @@ details.sub-nav details {
     hyphens: auto;
 }
 
+.page-content {
+    h2, h3, h4, h5, h6 {
+        text-align: left;
+    }
+}
+
 .page-content > h2:nth-child(1) {
     margin-top: 0;
 }
@@ -1141,6 +1149,8 @@ pre.astro-code code {
     text-align: right;
     position: relative;
     z-index: 1;
+    top: 0.6rem;
+    left: 0.4rem;
 }
 
 .copy-button {
@@ -1160,48 +1170,34 @@ pre.astro-code code {
     max-height: 0px;
     margin: 0;
     width: 100%;
-    text-align: end;
-    z-index: 1;
+    text-align: right;
     position: relative;
-    top: -1rem;
+    z-index: 1;
+    top: -1.3rem;
+    left: 1.1rem;
 }
 
-.magnify-icon {
-    opacity: 0;
+.magnify-button {
     border-radius: 0.2rem;
-    border: 1px solid var(--fore-link);
-    color: var(--fore-link);
-    line-height: 1;
-    width: 2rem;
-    height: 2rem;
-    overflow: hidden;
-    display: inline-block;
-    cursor: pointer;
+    fill: var(--aft);
+    stroke: var(--fore-link-alt);
+    background-color: transparent;
+    opacity: 0;
 }
 
-.input-touch .magnify-icon {
+.magnify-button:hover,
+.magnify-button:focus {
+    stroke: var(--fore-link);
+    transform: rotate(4deg);
     opacity: 1;
 }
 
-.magnify-icon:before {
-    content: '↗';
-    font-family: var(--unicode-font);
-    font-size: 2rem;
-    line-height: 2rem;
-    top: 0.04em;
-    position: relative;
-}
-
-figure:hover .magnify-icon,
-figure:focus .magnify-icon {
+.input-touch .magnify-button {
     opacity: 1;
 }
 
-.magnify-icon:hover,
-.magnify-icon:focus,
-.magnify-icon:focus-within {
-    stroke: var(--fore-link);
-    transform: rotate(4deg);
+figure:hover .magnify-button,
+figure:focus .magnify-button {
     opacity: 1;
 }
 

package/public/js/modules/figures.js

@@ -11,15 +11,19 @@ import { qs, qsa } from './query.js';
 
 const activeClass = 'magnify-icon';
 
+const icon = `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"> <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path> <path d="M21 21l-6 -6"></path> </svg>`;
+
 /**
  * Enables opening image in new tab
  */
 function enhanceFigures() {
-    qsa(`figure > p > img, [data-image] > .image__img`).forEach((node) => {
+    qsa(`figure > p > img, [data-image] > .image__img`).forEach(node => {
         const src = node.src;
 
         const magnify = document.createElement('button');
-        magnify.classList.add(activeClass);
+        //magnify.classList.add(activeClass);
+        magnify.innerHTML = icon;
+        magnify.classList.add('magnify-button');
         magnify.title = 'Enlarge';
 
         const magnifyContainer = document.createElement('div');