Release v0.7.2

.github/workflows/run-spec-on-push.yaml

@@ -1,11 +1,12 @@
-name: build
+name: Build and Test
+
 on: [push]
+
 jobs:
   build:
-    name: Run Specifications
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4    #see: https://github.com/actions/checkout/releases
+      - uses: actions/setup-node@v4  #see: https://github.com/actions/setup-node/releases
       - run: npm install
       - run: npm test

.vscode/settings.json

@@ -1,4 +1,5 @@
 {
+   "editor.rulers": [100],
    "editor.scrollBeyondLastLine": false,
    "editor.tabSize": 3,
    "files.insertFinalNewline": true,

README.md

@@ -6,7 +6,7 @@ _A simple and aesthetic image gallery to showcase your art portfolio_
 [![License:GPLv3](https://img.shields.io/badge/License-GPL%20v3-blue.svg)](https://github.com/center-key/paradise/blob/main/LICENSE.txt)
  
  
-[![Build](https://github.com/center-key/paradise/workflows/build/badge.svg)](https://github.com/center-key/paradise/actions/workflows/run-spec-on-push.yaml)
+[![Build](https://github.com/center-key/paradise/actions/workflows/run-spec-on-push.yaml/badge.svg)](https://github.com/center-key/paradise/actions/workflows/run-spec-on-push.yaml)
 
 Paradise is an open source software package for publishing a curated portfolio of photos on a website in a clean, professional style.
 Use Paradise to create an online exhibit for an artist or organization.

package.json

@@ -1,6 +1,6 @@
 {
    "name": "paradise",
-   "version": "0.7.1",
+   "version": "0.7.2",
    "description": "Paradise Photo Gallery",
    "license": "GPL-3.0",
    "type": "module",

src/gallery/js/gallery.js

@@ -19,7 +19,8 @@ const gallery = {
          gallery:  { enabled: true },
          };
       const figures = globalThis.document.querySelectorAll('.gallery-images figure');
-      globalThis.$(figures).magnificPopup(options);
+      if (figures.length)
+         globalThis.$(figures).magnificPopup(options);
       },
    };
 

src/gallery/style/gallery.less

@@ -1,10 +1,9 @@
-/*************************************************************/
-/* Paradise ~ centerkey.com/paradise                         */
-/* GPLv3 ~ Copyright (c) Individual contributors to Paradise */
-/************++++++++++++*************************************/
+///////////////////////////////////////////////////////////////
+// Paradise ~ centerkey.com/paradise                         //
+// GPLv3 ~ Copyright (c) Individual contributors to Paradise //
+///////////////////////////////////////////////////////////////
 
-/* Gallery */
-/* Do not add customizations to this file -- edit the CSS in: gallery/~data~/custom-style.css */
+@import "static/utility-box";
 
 /* Document */
 html { font-size: 100%; }
@@ -306,15 +305,15 @@ section[data-hash=artist] {
          }
       }
    }
-@media (max-width: 667px) {  /* selects iPhone 6/6s/7/8/SE2/SE3 landscape and anything narrower */
+.MobileMode({
    section[data-hash=artist] >article >section {
       display: flex;
       flex-direction: column;
       >figure >img {
          max-width: 240px;
          }
       }
-   }
+   });
 
 /* Style Modes */
 /* Dark mode, Show image border, CAPTION IN ALL CAPS, Caption in italics, and Show description */
@@ -472,8 +471,8 @@ body:not(.caption-italic) .image-description {
    cursor: auto;
    }
 
-/* Mobile */
-@media (max-width: 667px) {  //selects iPhone 6/6s/7/8/SE2/SE3 landscape and anything narrower
+/* Responsive design */
+.MobileMode({
    body >header {
       font-size: 0.8rem;
       }
@@ -490,4 +489,4 @@ body:not(.caption-italic) .image-description {
    body .one-image {
       padding: 30px 10px;
       }
-   }
+   });

src/gallery/style/static/utility-box.less

@@ -0,0 +1,36 @@
+///////////////////////////////////////////////////////////////
+// Paradise ~ centerkey.com/paradise                         //
+// GPLv3 ~ Copyright (c) Individual contributors to Paradise //
+///////////////////////////////////////////////////////////////
+
+// Constants and utilities -- Reusable values and mixins
+
+// Layers for z-index
+@layerDialogBox:     500;  //cream of the crop
+@layerModal:         400;  //screen overlays
+@layerFixedPosition: 300;  //sticky elements
+@layerNavigation:    200;  //notifications, menus, and drop-downs
+@layerHover:         100;  //tootips and other hover popups
+@layerBackground:   -100;  //bottom of the barrel
+
+// Character entities
+@symbolAngleRight:   "\276F";  //character: ❯
+@symbolArrowDown:    "\21E9";  //character: ⇩
+@symbolArrowUp:      "\21E7";  //character: ⇧
+@symbolBallotXMark:  "\2718";  //character: ✘
+@symbolCheckmark:    "\2714";  //character: ✔
+@symbolEmDash:       "\2014";  //character: —
+@symbolTriangleDown: "\25BC";  //character: ▼
+@symbolTriangleUp:   "\25B2";  //character: ▲
+
+// Tools
+
+.Bullseye() {
+   display: flex;
+   justify-content: center;
+   align-items: center;
+   }
+
+.MobileMode(@lessRules) {  //selects iPhone 6/6s/7/8/SE2/SE3 landscape and anything narrower
+   @media (max-width: 667px) { @lessRules(); }
+   }

website/getting-started.txt

@@ -8,7 +8,7 @@ Transcript:
 
 3) Move the "gallery" folder into the local folder that holds the rest of your website files.  Now launch your FTP client and upload the "gallery" folder to your host server.  Once the upload is complete, open your web browser and go to the Paradise Administrator Console.  Get to the Administrator Console by appending "gallery/console" to your website's URL in the location bar.
 
-4) The first time you visit the Administrator Console, you will be prompted to create a user account.  Enter your email address and password.  Then re-enter your password in the "Confirm" field, and click the "Sign in" button.
+4) The first time you visit the Administrator Console, you will be prompted to create a user account.  Enter your email address and password.  Then re-enter your password in the "Confirm" field, and click the "Sign In" button.
 
 5) At this point you can view the gallery, but of course, it will be empty.  So, go back to the Administrator Console and click the "Upload images" button.  The images you select will be processed and placed into the image portfolio.  For demonstration, let's upload some travel photos.
 

website/index.html

@@ -25,13 +25,13 @@
    <link rel=preconnect       href=https://fonts.googleapis.com>
    <link rel=preconnect       href=https://fonts.gstatic.com crossorigin>
    <link rel=stylesheet       href=https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5/css/all.min.css>
-   <link rel=stylesheet       href=https://cdn.jsdelivr.net/npm/dna-engine@3.1/dist/dna-engine.css>
-   <link rel=stylesheet       href=https://cdn.jsdelivr.net/npm/web-ignition@2.1/dist/reset.min.css>
-   <link rel=stylesheet       href=https://cdn.jsdelivr.net/npm/web-ignition@2.1/dist/layouts/color-blocks.css>
+   <link rel=stylesheet       href=https://cdn.jsdelivr.net/npm/dna-engine@3.2/dist/dna-engine.css>
+   <link rel=stylesheet       href=https://cdn.jsdelivr.net/npm/web-ignition@2.2/dist/reset.min.css>
+   <link rel=stylesheet       href=https://cdn.jsdelivr.net/npm/web-ignition@2.2/dist/layouts/color-blocks.css>
    <link rel=stylesheet       href=style.css>
    <script defer src=https://cdn.jsdelivr.net/npm/fetch-json@3.3/dist/fetch-json.min.js></script>
-   <script defer src=https://cdn.jsdelivr.net/npm/dna-engine@3.1/dist/dna-engine.min.js></script>
-   <script defer src=https://cdn.jsdelivr.net/npm/web-ignition@2.1/dist/lib-x.min.js></script>
+   <script defer src=https://cdn.jsdelivr.net/npm/dna-engine@3.2/dist/dna-engine.min.js></script>
+   <script defer src=https://cdn.jsdelivr.net/npm/web-ignition@2.2/dist/lib-x.min.js></script>
 </head>
 <body>
 

website/style.css

@@ -34,4 +34,4 @@ body >main figure.solid-background .popup-image-layer img { border-color: dimgra
 
 /* Flat button color */
 button { background-color: cornflowerblue; }
-button:hover:not(:disabled) { background-color: royalblue; }
+button:hover:not(:disabled), button:focus { background-color: royalblue; }