simplify js

diff --git a/TODO.md b/TODO.md
index f52d664aec91ccd995ff63af17ee6d7fa7832c22..cd3075c092fe1e438698e7c6a995d738ecab1035 100644 (file)
--- a/TODO.md
+++ b/TODO.md
@@ -1,11 +1,12 @@
 - optimize text on examples page
-- simplify toggle-button js
+x simplify toggle-button js
 - links and buttons (shortcode) styling
 - readme: add from allmanritter-page
 - readme: add info about shortcodes
 - readme: add paragraph about basic and multilang-configuration
 - readme: add paragraph "flatmark as cms" to readme
 - more text, contact page, slick-slider-page as reference?
+- github: license?
 
 x rename shortcode langmenu to extras (to use it for other header-extras (phonenumber etc.))
 x fix codeblock for img-rounded on example page

diff --git a/pages-en/02-footer.md b/pages-en/02-footer.md
index d68c9f3c1e8c2b08d4c3f9797a42678c141a8e67..4edb01d2ce1880526cacc74b180814ba88903bb4 100644 (file)
--- a/pages-en/02-footer.md
+++ b/pages-en/02-footer.md
@@ -1,4 +1,4 @@
 © {year} flatMark  
 
 - [Legal notice](/en/legal-notice)
-- [PrivacyPolicy](/de/datenschutz)
\ No newline at end of file
+- [PrivacyPolicy](/en/privacy-policy)
\ No newline at end of file

diff --git a/theme/css/style.css b/theme/css/style.css
index 7ab5ca0a805d426139d2315777ecaac4cbc39da6..22b48b8e56ee005ada11b660a423789265a5b869 100644 (file)
--- a/theme/css/style.css
+++ b/theme/css/style.css
@@ -108,8 +108,6 @@
 :root {  --fontsize-l: 24px;} 
 :root {  --fontsize-xl: 34px;} 
 :root {  --fontsize-xxl: 64px;} 
-:root {  --lineheight-00: 1.4;} /* Line Height Default */
-:root {  --lineheight-01: 1.2;} 
 
 :root {  --space-below-00: 5px;} 
 :root {  --space-below-01: 15px;} 
@@ -123,7 +121,7 @@
 * {margin: 0;padding: 0;box-sizing: border-box;}
 header, footer, section, article, nav {display: block;}
 
-body {background: var(--website-background);color: var(--colordark);font-family: 'opensans', Arial, Helvetica, Sans-Serif;font-weight: 400;font-style: normal;font-size: var(--fontsize-m); line-height: var(--lineheight-00);}
+body {background: var(--website-background);color: var(--colordark);font-family: 'opensans', Arial, Helvetica, Sans-Serif;font-weight: 400;font-style: normal;font-size: var(--fontsize-m); line-height: 1.4;}
 
 #wrapper {max-width: var(--content-width);margin: 0 auto;padding: var(--space-below-02) var(--side-space-01);}
 header, main {background: var(--colorlight);}
@@ -142,13 +140,13 @@ strong {font-weight: 700;}
 hr {height: 1px;border: none;width: 100%;background: var(--color-01);margin-bottom: var(--space-below-00);}
 table {border-collapse: collapse;border-spacing: 0;}
 
-header ul {display: none;} /* prevent output of menu-lists before the are rendered in /theme/js/presets.js */
+header ul {display: none;} /* prevent output of menu-lists before they are rendered in /theme/js/presets.js */
 header {min-height: 143px; /* set min-height to prevent jump on first pageload */ display: flex;flex-wrap: wrap; position: relative;padding: var(--space-below-02) var(--side-space-02) var(--space-below-01) var(--side-space-02) ;}
 
 header p {margin-bottom: 0;color: var(--colorblack);width: calc(100% - 74px);}
 header p:has(img) {width: auto;}
 header p:has(img) img {width: 64px;display: block;margin-right: 10px;}
-header > p > a {color: var(--colorblack);display: block;text-decoration: none;font-size: var(--fontsize-xl);line-height: var(--lineheight-01);font-weight: 500;}
+header > p > a {color: var(--colorblack);display: block;text-decoration: none;font-size: var(--fontsize-xl);line-height: 1.2;font-weight: 500;}
 
 header .extras {position: absolute;top: var(--space-below-02);right: var(--side-space-02);}
 header .extras ul {display: block;text-align: right;}
@@ -180,9 +178,6 @@ main .columns.cols-33-66 {grid-template-columns: 1fr 2fr;}
 main .columns.cols-66-33 {grid-template-columns: 2fr 1fr;}
 main .columns.cols-33-33-33 {grid-template-columns: 1fr 1fr 1fr;}
 
-main .bg-color {padding: var(--space-below-01) var(--side-space-01);background:var(--color-02);margin-bottom: var(--space-below-01);}
-main .bg-color * {color:var(--colorlight);}
-
 main .background {padding: var(--space-below-01) var(--side-space-01);background:var(--color-gray-01);margin-bottom: var(--space-below-01);}
 main .background.bg-color-01 {background:var(--color-01);}
 main .background.bg-color-02 {background:var(--color-02);}
@@ -200,7 +195,6 @@ footer ul {display: flex;gap: var(--gap-01);}
 footer a {text-decoration: none;}
 footer a:is(:hover, :focus) {text-decoration: underline;}
 
-
 @media screen and (max-width: 781px) {
 
     #wrapper {padding: 0;}

diff --git a/theme/js/presets.js b/theme/js/presets.js
index 2e6d887f49a2df002f3678a325ee45eb3e866523..a3c46ac6d47f4d2417ffc9eb4e676b7b67f207c5 100644 (file)
--- a/theme/js/presets.js
+++ b/theme/js/presets.js
@@ -1,61 +1,29 @@
 document.addEventListener("DOMContentLoaded", function() {
     
-// generate toggle-button and nav-wrapper for main-menu
-    document.querySelector('header').insertAdjacentHTML('beforeend', '<button id="toggle-nav"><span></span><span></span><span></span></button>');
-    document.querySelector('header').insertAdjacentHTML('beforeend', '<nav id="main-nav"></nav>');
-
-// menu & toggle-button variables
+// HEADER: generate toggle-button, nav-wrapper and set variables
     const modHeader = document.querySelector("header");
+
+    modHeader.insertAdjacentHTML('beforeend', '<button id="toggle-nav"><span></span><span></span><span></span></button>');
     const toggleNav = document.querySelector("#toggle-nav");
-    const mainNav = document.querySelector("#main-nav");
 
-// move main-menu into nav-wrapper
-    mainNav.appendChild(document.querySelector('header > ul:not(.extras)'));
+    modHeader.insertAdjacentHTML('beforeend', '<nav id="main-nav"></nav>');
+    const mainNav = document.querySelector("#main-nav");
 
-// detect screensize
-    function updateARIA() {
-        if (window.matchMedia("(max-width: 781px)").matches) {
-            // small screens, close menu
-            toggleNav.removeAttribute("aria-hidden");
-            toggleNav.setAttribute("aria-controls", "main-nav");
-            toggleNav.setAttribute("aria-expanded", "false");
-            mainNav.setAttribute("aria-hidden", "true");
-            mainNav.setAttribute("inert", ""); // Disable interaction
-        } else {
-            // large screens, open menu
-            toggleNav.setAttribute("aria-hidden", "true");
-            toggleNav.removeAttribute("aria-controls");
-            toggleNav.removeAttribute("aria-expanded");
-            mainNav.removeAttribute("aria-hidden");
-            mainNav.removeAttribute("inert"); // Enable interaction
-        }
-    }
-    // Run once on page load
-    updateARIA();
-    // Run again on window resize (for responsiveness)
-    window.addEventListener("resize", updateARIA);
+// HEADER: move main-menu into nav-wrapper
+    mainNav.appendChild(document.querySelector('header > ul'));
 
-// toggle menu
+// HEADER: toggle button
     toggleNav.addEventListener("click", function() {
         if (modHeader.classList.contains("menu-active")) {
-            // close menu
             modHeader.classList.remove("menu-active");
-            toggleNav.setAttribute("aria-expanded", "false");
-            mainNav.setAttribute("aria-hidden", "true");
-            mainNav.setAttribute("inert", ""); // Disable interaction
         } else {
-            // open menu
             modHeader.classList.add("menu-active");
-            toggleNav.setAttribute("aria-expanded", "true");
-            mainNav.removeAttribute("aria-hidden", "true");
-            mainNav.removeAttribute("inert"); // Enable interaction
         }
     });
 
-// highlight active language in language-switch menu
-    const langSwitch = document.querySelectorAll('header .extras a');
+// HEADER (only multilanguage setup): highlight active language in header extras menu
+    const langSwitch = document.querySelectorAll('header .extras ul li a');
     const currentLang = document.documentElement.lang;  // Get the lang attribute from the <html> element
-
     langSwitch.forEach(link => {
         // Check if the href matches the current lang
         if (link.getAttribute('href').includes(currentLang)) {
@@ -63,10 +31,10 @@ document.addEventListener("DOMContentLoaded", function() {
         }
     });
     
-// highlight active page in menu
+// HEADER: highlight active page in main menu
     const currentUrl = window.location.href;
     const currentPath = window.location.pathname;
-    const menuLinks = document.querySelectorAll('header :not(#lang) ul a');
+    const menuLinks = document.querySelectorAll('header > ul a');
     menuLinks.forEach((link) => {
         // Check if the href matches the current URL or pathname
         if (link.href === currentUrl || link.pathname === currentPath) {
@@ -78,9 +46,9 @@ document.addEventListener("DOMContentLoaded", function() {
         }
     });
 
-// open all links inside main in a new window
-    document.querySelectorAll('#main a').forEach((link) => {
-        link.setAttribute('target', '_blank');
-    });
+// OPTIONAL: open all links inside main in a new window
+    // document.querySelectorAll('main a').forEach((link) => {
+    //     link.setAttribute('target', '_blank');
+    // });
 
 });
\ No newline at end of file