assets/css/screen.css

@@ -2285,6 +2285,12 @@ html.dark-mode .footer-cta-title {
     color: #fff;
 }
 
+@media (max-width: 767px) {
+    html.dark-mode .gh-head-open #gh-head .gh-head-actions {
+        background-color: var(--color-darkmode);
+    }
+}
+
 @media (prefers-color-scheme: dark) {
     html.auto-color body {
         color: rgba(255, 255, 255, 0.75);
@@ -2469,6 +2475,12 @@ html.dark-mode .footer-cta-title {
     html.auto-color .footer-cta-title {
         color: #fff;
     }
+
+    @media (max-width: 767px) {
+        html.auto-color .gh-head-open #gh-head .gh-head-actions {
+            background-color: var(--color-darkmode);
+        }
+    }
 }
 
 /*

assets/js/dropdown.js

@@ -1,85 +1,82 @@
-(function () {
+(function () {
-    const mediaQuery = window.matchMedia('(max-width: 767px)');
+    const mediaQuery = window.matchMedia('(max-width: 767px)');
-
+
-    const head = document.querySelector('.gh-head');
+    const head = document.querySelector('.gh-head');
-    const menu = head.querySelector('.gh-head-menu');
+    const menu = head.querySelector('.gh-head-menu');
-    const nav = menu.querySelector('.nav');
+    const nav = menu.querySelector('.nav');
-    if (!nav) return;
+    if (!nav) return;
-
+
-    const logo = document.querySelector('.gh-head-logo');
+    const logo = document.querySelector('.gh-head-logo');
-    const navHTML = nav.innerHTML;
+    const navHTML = nav.innerHTML;
-
+
-    if (mediaQuery.matches) {
+    if (mediaQuery.matches) {
-        const items = nav.querySelectorAll('li');
+        const items = nav.querySelectorAll('li');
-        items.forEach(function (item, index) {
+        items.forEach(function (item, index) {
-            item.style.transitionDelay = 0.03 * (index + 1) + 's';
+            item.style.transitionDelay = 0.03 * (index + 1) + 's';
-        });
+        });
-    }
+    }
-
+
-    var windowClickListener;
+    const makeDropdown = function () {
-    const makeDropdown = function () {
+        if (mediaQuery.matches) return;
-        if (mediaQuery.matches) return;
+        const submenuItems = [];
-        const submenuItems = [];
+
-
+        while ((nav.offsetWidth + 64) > menu.offsetWidth) {
-        while ((nav.offsetWidth + 64) > menu.offsetWidth) {
+            if (nav.lastElementChild) {
-            if (nav.lastElementChild) {
+                submenuItems.unshift(nav.lastElementChild);
-                submenuItems.unshift(nav.lastElementChild);
+                nav.lastElementChild.remove();
-                nav.lastElementChild.remove();
+            } else {
-            } else {
+                return;
-                return;
+            }
-            }
+        }
-        }
+
-
+        if (!submenuItems.length) {
-        if (!submenuItems.length) {
+            document.body.classList.add('is-dropdown-loaded');
-            document.body.classList.add('is-dropdown-loaded');
+            return;
-            return;
+        }
-        }
+
-
+        const toggle = document.createElement('button');
-        const toggle = document.createElement('button');
+        toggle.setAttribute('class', 'nav-more-toggle');
-        toggle.setAttribute('class', 'nav-more-toggle');
+        toggle.setAttribute('aria-label', 'More');
-        toggle.setAttribute('aria-label', 'More');
+        toggle.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor"><path d="M21.333 16c0-1.473 1.194-2.667 2.667-2.667v0c1.473 0 2.667 1.194 2.667 2.667v0c0 1.473-1.194 2.667-2.667 2.667v0c-1.473 0-2.667-1.194-2.667-2.667v0zM13.333 16c0-1.473 1.194-2.667 2.667-2.667v0c1.473 0 2.667 1.194 2.667 2.667v0c0 1.473-1.194 2.667-2.667 2.667v0c-1.473 0-2.667-1.194-2.667-2.667v0zM5.333 16c0-1.473 1.194-2.667 2.667-2.667v0c1.473 0 2.667 1.194 2.667 2.667v0c0 1.473-1.194 2.667-2.667 2.667v0c-1.473 0-2.667-1.194-2.667-2.667v0z"></path></svg>';
-        toggle.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor"><path d="M21.333 16c0-1.473 1.194-2.667 2.667-2.667v0c1.473 0 2.667 1.194 2.667 2.667v0c0 1.473-1.194 2.667-2.667 2.667v0c-1.473 0-2.667-1.194-2.667-2.667v0zM13.333 16c0-1.473 1.194-2.667 2.667-2.667v0c1.473 0 2.667 1.194 2.667 2.667v0c0 1.473-1.194 2.667-2.667 2.667v0c-1.473 0-2.667-1.194-2.667-2.667v0zM5.333 16c0-1.473 1.194-2.667 2.667-2.667v0c1.473 0 2.667 1.194 2.667 2.667v0c0 1.473-1.194 2.667-2.667 2.667v0c-1.473 0-2.667-1.194-2.667-2.667v0z"></path></svg>';
+
-
+        const wrapper = document.createElement('div');
-        const wrapper = document.createElement('div');
+        wrapper.setAttribute('class', 'gh-dropdown');
-        wrapper.setAttribute('class', 'gh-dropdown');
+
-
+        if (submenuItems.length >= 10) {
-        if (submenuItems.length >= 10) {
+            document.body.classList.add('is-dropdown-mega');
-            document.body.classList.add('is-dropdown-mega');
+            wrapper.style.gridTemplateRows = 'repeat(' + Math.ceil(submenuItems.length / 2) + ', 1fr)';
-            wrapper.style.gridTemplateRows = 'repeat(' + Math.ceil(submenuItems.length / 2) + ', 1fr)';
+        } else {
-        } else {
+            document.body.classList.remove('is-dropdown-mega');
-            document.body.classList.remove('is-dropdown-mega');
+        }
-        }
+
-
+        submenuItems.forEach(function (child) {
-        submenuItems.forEach(function (child) {
+            wrapper.appendChild(child);
-            wrapper.appendChild(child);
+        });
-        });
+
-
+        toggle.appendChild(wrapper);
-        toggle.appendChild(wrapper);
+        nav.appendChild(toggle);
-        nav.appendChild(toggle);
+
-
+        document.body.classList.add('is-dropdown-loaded');
-        document.body.classList.add('is-dropdown-loaded');
+
-
+        toggle.addEventListener('click', function () {
-        toggle.addEventListener('click', function () {
+            document.body.classList.toggle('is-dropdown-open');
-            document.body.classList.toggle('is-dropdown-open');
+        });
-        });
+
-
+        window.addEventListener('click', function (e) {
-        windowClickListener = function (e) {
+            if (!toggle.contains(e.target) && document.body.classList.contains('is-dropdown-open')) {
-            if (!toggle.contains(e.target) && document.body.classList.contains('is-dropdown-open')) {
+                document.body.classList.remove('is-dropdown-open');
-                document.body.classList.remove('is-dropdown-open');
+            }
-            }
+        });
-        };
+    }
-        window.addEventListener('click', windowClickListener);
+
-    }
+    imagesLoaded(head, function () {
-
+        makeDropdown();
-    imagesLoaded(head, function () {
+    });
-        makeDropdown();
+
-    });
+    window.addEventListener('resize', function () {
-
+        setTimeout(function () {
-    window.addEventListener('resize', function () {
+            nav.innerHTML = navHTML;
-        setTimeout(function () {
+            makeDropdown();
-            window.removeEventListener('click', windowClickListener);
+        }, 1);
-            nav.innerHTML = navHTML;
+    });
-            makeDropdown();
+})();
-        }, 1);
-    });
-})();

package.json

@@ -2,7 +2,7 @@
     "name": "casper-aytac",
     "description": "A clean, minimal default theme for the Ghost publishing platform with little modifications by Aytac",
     "demo": "https://aytac.kirmizi.online",
-    "version": "5.4.9",
+    "version": "5.4.8",
     "engines": {
         "ghost": ">=5.0.0"
     },