Trim visual align by adding a margin into menu section

- add a 1 pixel left and right margin to .menu selector in header.css file
This commit is contained in:
YoungTaek 2022-01-15 11:29:00 +09:00
parent 71b2d5731d
commit df1fcb5b4e
9 changed files with 9 additions and 18 deletions

View File

@ -47,7 +47,7 @@
.menu { .menu {
--shadow-color: color-mod(var(--background) a(80%)); --shadow-color: color-mod(var(--background) a(80%));
--shadow: 0 10px var(--shadow-color), -10px 10px var(--shadow-color), 10px 10px var(--shadow-color); --shadow: 0 10px var(--shadow-color), -10px 10px var(--shadow-color), 10px 10px var(--shadow-color);
margin: 20px 0; margin: 20px 1px;
@media (--phone) { @media (--phone) {
@mixin menu; @mixin menu;

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,4 +1 @@
(function(){var __webpack_modules__={"./assets/js/languageSelector.js": !function(){var e=getComputedStyle(document.body).getPropertyValue("--phoneWidth"),t=function(){return window.matchMedia(e).matches},n=document.querySelector(".language-selector-current"),o=document.querySelector(".language-selector__more");document.body.addEventListener("click",(function(){t()||!o||o.classList.contains("hidden")||o.classList.add("hidden")})),n&&n.addEventListener("click",(function(e){t()||(e.stopPropagation(),o.classList.toggle("hidden"))}))}();
/*!***************************************!*\
!*** ./assets/js/languageSelector.js ***!
\***************************************/function(){eval('var mobileQuery = getComputedStyle(document.body).getPropertyValue("--phoneWidth");\n\nvar isMobile = function isMobile() {\n return window.matchMedia(mobileQuery).matches;\n};\n\nvar languageSelector = document.querySelector(".language-selector-current");\nvar moreLanguagesContainer = document.querySelector(".language-selector__more");\ndocument.body.addEventListener("click", function () {\n if (!isMobile() && moreLanguagesContainer && !moreLanguagesContainer.classList.contains("hidden")) {\n moreLanguagesContainer.classList.add("hidden");\n }\n});\nlanguageSelector && languageSelector.addEventListener("click", function (e) {\n if (!isMobile()) {\n e.stopPropagation();\n moreLanguagesContainer.classList.toggle("hidden");\n }\n});\n\n//# sourceURL=webpack://terminal/./assets/js/languageSelector.js?')}},__webpack_exports__={};__webpack_modules__["./assets/js/languageSelector.js"]()})();

View File

@ -1,4 +1 @@
(function(){var __webpack_modules__={"./assets/js/menu.js": !function(){var e=document.querySelector(".container"),t=document.querySelector(".menu"),n=document.querySelector(".menu-trigger"),i=(document.querySelector(".menu__inner--desktop"),document.querySelector(".menu__sub-inner-more-trigger")),o=document.querySelector(".menu__sub-inner-more"),d=getComputedStyle(document.body).getPropertyValue("--phoneWidth"),c=function(){return window.matchMedia(d).matches},s=function(){n&&n.classList.toggle("hidden",!c()),t&&t.classList.toggle("hidden",c()),o&&o.classList.toggle("hidden",!c())};t&&t.addEventListener("click",(function(e){return e.stopPropagation()})),o&&o.addEventListener("click",(function(e){return e.stopPropagation()})),s(),document.body.addEventListener("click",(function(){c()||!o||o.classList.contains("hidden")?c()&&!t.classList.contains("hidden")&&t.classList.add("hidden"):o.classList.add("hidden")})),window.addEventListener("resize",s),n&&n.addEventListener("click",(function(e){e.stopPropagation(),t&&t.classList.toggle("hidden")})),i&&i.addEventListener("click",(function(t){t.stopPropagation(),o&&o.classList.toggle("hidden"),o.getBoundingClientRect().right>e.getBoundingClientRect().right&&(o.style.left="auto",o.style.right=0)}))}();
/*!***************************!*\
!*** ./assets/js/menu.js ***!
\***************************/function(){eval('var container = document.querySelector(".container");\nvar menu = document.querySelector(".menu");\nvar mobileMenuTrigger = document.querySelector(".menu-trigger");\nvar desktopMenu = document.querySelector(".menu__inner--desktop");\nvar desktopMenuTrigger = document.querySelector(".menu__sub-inner-more-trigger");\nvar menuMore = document.querySelector(".menu__sub-inner-more");\nvar mobileQuery = getComputedStyle(document.body).getPropertyValue("--phoneWidth");\n\nvar isMobile = function isMobile() {\n return window.matchMedia(mobileQuery).matches;\n};\n\nvar handleMenuClasses = function handleMenuClasses() {\n mobileMenuTrigger && mobileMenuTrigger.classList.toggle("hidden", !isMobile());\n menu && menu.classList.toggle("hidden", isMobile());\n menuMore && menuMore.classList.toggle("hidden", !isMobile());\n}; // Common\n\n\nmenu && menu.addEventListener("click", function (e) {\n return e.stopPropagation();\n});\nmenuMore && menuMore.addEventListener("click", function (e) {\n return e.stopPropagation();\n});\nhandleMenuClasses();\ndocument.body.addEventListener("click", function () {\n if (!isMobile() && menuMore && !menuMore.classList.contains("hidden")) {\n menuMore.classList.add("hidden");\n } else if (isMobile() && !menu.classList.contains("hidden")) {\n menu.classList.add("hidden");\n }\n});\nwindow.addEventListener("resize", handleMenuClasses); // Mobile menu\n\nmobileMenuTrigger && mobileMenuTrigger.addEventListener("click", function (e) {\n e.stopPropagation();\n menu && menu.classList.toggle("hidden");\n}); // Desktop menu\n\ndesktopMenuTrigger && desktopMenuTrigger.addEventListener("click", function (e) {\n e.stopPropagation();\n menuMore && menuMore.classList.toggle("hidden");\n\n if (menuMore.getBoundingClientRect().right > container.getBoundingClientRect().right) {\n menuMore.style.left = "auto";\n menuMore.style.right = 0;\n }\n});\n\n//# sourceURL=webpack://terminal/./assets/js/menu.js?')}},__webpack_exports__={};__webpack_modules__["./assets/js/menu.js"]()})();

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long