From 7dfffe3406a8338661b65369747ffb7ea6084f75 Mon Sep 17 00:00:00 2001 From: timurgordon Date: Tue, 8 Mar 2022 05:08:13 +0300 Subject: [PATCH] new header mobile implemented --- content/header/_index.md | 2 - css/index.css | 20 +-- templates/partials/header copy.html | 230 ++++++++++++++++++++++++++++ templates/partials/header.html | 60 ++++---- templates/shortcodes/button.html | 2 +- templates/shortcodes/menu.html | 9 +- 6 files changed, 270 insertions(+), 53 deletions(-) create mode 100644 templates/partials/header copy.html diff --git a/content/header/_index.md b/content/header/_index.md index 5e8fe62..d267b64 100644 --- a/content/header/_index.md +++ b/content/header/_index.md @@ -20,8 +20,6 @@ extra: Whats wrong with the [internet](/apage) -
- {%% end %%} {% button() %} diff --git a/css/index.css b/css/index.css index f31f5ce..eb16bd2 100644 --- a/css/index.css +++ b/css/index.css @@ -48,19 +48,22 @@ img[src*="#large"] { @apply text-3xl lg:text-5xl font-light; } h2 { - @apply text-2xl lg:text-4xl font-light; + @apply text-2xl lg:text-4xl my-2 font-light; + } + h3 { + @apply text-xl lg:text-2xl font-normal; } h4 { - @apply text-md tracking-widest text-zinc-500 font-semibold; + @apply text-md my-1 tracking-widest text-zinc-500 font-semibold; } h5 { - @apply text-md not-italic font-normal leading-8; + @apply text-md not-italic font-normal my-1; } h6 { @apply text-sm lg:text-base font-normal; } - nav p { - @apply hidden sm:block md:block lg:block xl:block 2xl:block; + p { + @apply text-xs; } blockquote { @apply border-l-4 border-gray-400 mx-2 my-2 p-2; @@ -86,13 +89,6 @@ button a { color: black; } -h3 { - font-size: 1em; - font-style: normal; - font-weight: 600; - color: rgba(0, 0, 0, 0.5); -} - p { font-size: 15px; } diff --git a/templates/partials/header copy.html b/templates/partials/header copy.html new file mode 100644 index 0000000..044e167 --- /dev/null +++ b/templates/partials/header copy.html @@ -0,0 +1,230 @@ + + + + +{%- set section = get_section(path="header/_index.md") %} +{% set header_items = section.content | safe | split(pat="
  • ") %} + +
    +
    +
    +
    +
    + + Ourworld Logo + +
    +
    + + +
    +
    • ") %} + {% set header_label = header_arr[0] %} + {% if ' + {{link_label}} + + {% else %} +
    + {% set button_id = header_label ~ "-menu-btn" | slugify %} + +
    + + {% endif %} +{% endif %} +{% endfor %} + + + + + + +{% for header_item in header_items %} +{% if not loop.first %} + {% set header_arr = header_item | split(pat="") %} + {% set header_label = header_arr[0] %} + {% set header_menu = header_arr[1] %} + {% set menu_id = header_label ~ "-menu" | slugify %} + + + + +{% endif %} +{% endfor %} + + + + + + + diff --git a/templates/partials/header.html b/templates/partials/header.html index 64a418b..c1ed846 100644 --- a/templates/partials/header.html +++ b/templates/partials/header.html @@ -12,24 +12,27 @@ function toggleMenu(button) { if (displayedMenu === button.id.split("-")[0]) { - button.className = button.className.replace("text-blue-500", " text-gray-900"); + button.className = button.className.replace(" text-blue-500 bg-stone-200 sm:bg-transparent", " text-gray-900"); hideMenu(button.id.split("-")[0]); + button.lastElementChild.className = button.lastElementChild.className.replace("rotate-0", "-rotate-90") displayedMenu = ""; } else { showMenu(button.id.split("-")[0]); - button.className = button.className.replace("text-gray-900", " text-blue-500"); + button.lastElementChild.className = button.lastElementChild.className.replace("-rotate-90", "rotate-0") + button.className = button.className.replace(" text-gray-900", " text-blue-500 bg-stone-200 sm:bg-transparent"); displayedMenu = button.id.split("-")[0] } } function handleClick(button) { if (button.id === "hamburger-btn" || button.id === "close-hamburger-btn") { toggleHamburger() } - if (button.id.indexOf("menu") !== -1 ) { toggleMenu(button) } + if (button.id.indexOf("menu") !== -1 ) { + toggleMenu(button) + } } function toggleHamburger() { - console.log("toggling hamburger", hamburgerShown) if (hamburgerShown) { hideHamburger(); hamburgerShown = false; @@ -57,7 +60,7 @@ function showHamburger() { document.getElementById('header-container').className = "overflow-hidden"; - document.getElementById('hamburger').className = "fixed mt-12 z-20 top-0 inset-x-0 transition transform origin-top-right"; + document.getElementById('hamburger').className = "fixed mt-16 z-20 top-0 inset-x-0 transition transform origin-top-right"; document.getElementById('hamburger-btn').className = "hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out"; document.getElementById('close-hamburger-btn').className = "inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out"; } @@ -79,10 +82,6 @@ document.getElementById("mobile-learn-btn").addEventListener( 'click', toggleMenu); } - function showMobileNav() { - document.getElementById('learn').className = "absolute inset-x-0 transform shadow-lg backdrop-blur transition ease-out duration-150 opacity-1 -translate-y-0"; - } - {%- set section = get_section(path="header/_index.md") %} @@ -129,11 +128,7 @@ {% set button_id = header_label ~ "-menu-btn" | slugify %} @@ -156,7 +151,7 @@