From: elektrischerwalfisch Date: Thu, 10 Apr 2025 19:36:49 +0000 (+0200) Subject: simplify js X-Git-Url: https://skyeroc.xyz/gitweb/?a=commitdiff_plain;h=be9bc9a032b39750ac22d2abbc3272cb145244c1;p=flatmark simplify js --- diff --git a/TODO.md b/TODO.md index f52d664..cd3075c 100644 --- 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 d68c9f3..4edb01d 100644 --- 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 7ab5ca0..22b48b8 100644 --- 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 2e6d887..a3c46ac 100644 --- 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', ''); - document.querySelector('header').insertAdjacentHTML('beforeend', ''); - -// menu & toggle-button variables +// HEADER: generate toggle-button, nav-wrapper and set variables const modHeader = document.querySelector("header"); + + modHeader.insertAdjacentHTML('beforeend', ''); 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', ''); + 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 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