Add class to make avatar responsive

center-key · Jul 27, 2024 · b4f7080 · b4f7080
1 parent f1494aa
commit b4f7080
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 12 deletions.
diff --git a/package.json b/package.json
@@ -102,7 +102,7 @@
       "hljs-enhance": "~2.0"
    },
    "devDependencies": {
-      "@eslint/js": "~9.7",
+      "@eslint/js": "~9.8",
       "@fortawesome/fontawesome-free": "~6.6",
       "@types/node": "~20.14",
       "add-dist-header": "~1.4",
@@ -114,12 +114,12 @@
       "esm-to-plain-js": "~1.1",
       "jshint": "~2.13",
       "less": "~4.2",
-      "mocha": "~10.6",
+      "mocha": "~10.7",
       "replacer-util": "~1.3",
       "rimraf": "~6.0",
       "run-scripts-util": "~1.3",
       "typescript": "~5.5",
-      "typescript-eslint": "~7.16",
+      "typescript-eslint": "~7.17",
       "uglify-js": "~3.19",
       "w3c-html-validator": "~1.8"
    }

diff --git a/src/css/layouts/zebra-sections.css b/src/css/layouts/zebra-sections.css
@@ -6,11 +6,11 @@ Usage:
    <style>
       body >header nav a { color: white; text-shadow: 0px 0px 0.6em black; }
       body >header nav a.current, body >header nav a:hover { color: white; border-color: gold; }
-      body >header { background-image: url(bkgnd.jpg); }
+      body >header { background-image: url(background-banner.jpg); }
       body main >section[data-background=cat] { background-image: url(cat.jpg); }
    </style>
 HTML (<body>):
-   header
+   header.responsive-avatar
       nav
          a.current
       h1, h2, h4, img[alt=avatar]
@@ -224,12 +224,14 @@ body >footer i[data-brand] {
 
 /* Mobile devices */
 @media (max-width: 667px) {  /* selects iPhone 6/6s/7/8/SE2/SE3 landscape and anything narrower */
-   body >header img {
-      bottom: -50px;
-      width: 100px;
-      }
-   main >section:first-child {
-      padding-top: 80px;
+   body >header.responsive-avatar {
+      img {
+         bottom: -50px;
+         width: 100px;
+         }
+      &+main >section:first-child {
+         padding-top: 80px;
+         }
       }
    }
 /******************************************************************************/

diff --git a/src/css/layouts/zebra-sections.html b/src/css/layouts/zebra-sections.html
@@ -30,7 +30,7 @@
 </head>
 <body>
 
-<header>
+<header class=responsive-avatar>
    <nav id=link-menu>
       <a href=. class=current>Home</a>
       <a href=tutorial>Tutorial</a>