fix hamburger menu
@ -133,11 +133,11 @@ header .freeflow {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
#info-menu button {
|
#info-menu button, #info-mobile-menu button {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
#info-menu button a {
|
#info-menu button a, #info-mobile-menu button a {
|
||||||
color: #1a1a1a;
|
color: #1a1a1a;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -154,12 +154,12 @@ footer .freeflow img {
|
|||||||
width: 200px;
|
width: 200px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
#info-menu > div.freeflow {
|
#info-menu > div.freeflow , #info-mobile-menu{
|
||||||
padding-top: 0px !important;
|
padding-top: 0px !important;
|
||||||
padding-bottom: 0px !important;
|
padding-bottom: 0px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
header .freeflow div, #info-menu div {
|
header .freeflow div, #info-menu div, #info-mobile-menu div {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
font-weight: 700 !important;
|
font-weight: 700 !important;
|
||||||
@ -358,7 +358,7 @@ a:hover{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
header #menu button, #info-menu button{
|
header #menu button, #info-menu button, #info-mobile-menu button{
|
||||||
@apply
|
@apply
|
||||||
lg:text-lg
|
lg:text-lg
|
||||||
px-6
|
px-6
|
||||||
|
@ -82,7 +82,7 @@ function hideMenu(menuName) {
|
|||||||
|
|
||||||
function showHamburger() {
|
function showHamburger() {
|
||||||
document.getElementById('header-container').className = "overflow-hidden";
|
document.getElementById('header-container').className = "overflow-hidden";
|
||||||
document.getElementById('hamburger').className = "fixed mt-16 z-20 top-0 inset-x-0 transition transform origin-top-right";
|
document.getElementById('hamburger').className = "fixed mt-28 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('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";
|
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";
|
||||||
}
|
}
|
||||||
@ -129,7 +129,6 @@ window.onload = function () {
|
|||||||
}
|
}
|
||||||
|
|
||||||
document.getElementById("filter-btn").addEventListener('click', toggleFilter);
|
document.getElementById("filter-btn").addEventListener('click', toggleFilter);
|
||||||
document.getElementById("mobile-learn-btn").addEventListener('click', toggleMenu);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function openInNewTab(url) {
|
function openInNewTab(url) {
|
||||||
|
@ -1,10 +1,10 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en" charset="utf-8">
|
<html lang="en" charset="utf-8">
|
||||||
{% include "partials/head.html" %}
|
{% include "partials/head.html" %}
|
||||||
|
{% include "partials/header.html" %}
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
{% include "partials/header.html" %}
|
|
||||||
<div id="content" class="py-4 sm:py-12 md:py-16 lg:py-18 overflow-hidden">
|
<div id="content" class="py-4 sm:py-12 md:py-16 lg:py-18 overflow-hidden">
|
||||||
{% block content %}{% endblock %}
|
{% block content %}{% endblock %}
|
||||||
</div>
|
</div>
|
||||||
|
@ -37,7 +37,7 @@
|
|||||||
{% for page in section.pages %}
|
{% for page in section.pages %}
|
||||||
{% if page.extra.menu %} {% continue %} {% endif %}
|
{% if page.extra.menu %} {% continue %} {% endif %}
|
||||||
<a href="{{page.permalink}}" class="text-lg leading-6 text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
|
<a href="{{page.permalink}}" class="text-lg leading-6 text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
|
||||||
{{page.title}}
|
{{page.title}}test
|
||||||
</a>
|
</a>
|
||||||
<div class="relative">
|
<div class="relative">
|
||||||
</div>
|
</div>
|
||||||
|
@ -30,41 +30,36 @@
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="hidden lg:flex-1 lg:flex lg:items-center lg:justify-end lg:space-x-12">
|
<div class="hidden lg:flex-1 lg:flex lg:items-center lg:justify-end lg:space-x-12">
|
||||||
<nav class="flex space-x-10">
|
<nav class="flex space-x-10">
|
||||||
{% for header_item in header_items %}
|
|
||||||
{% if not loop.first %}
|
{% for header_item in header_items %}
|
||||||
{% set header_arr = header_item | split(pat="</li>") %}
|
{% if not loop.first %}
|
||||||
{% set header_label = header_arr[0] %}
|
{% set header_arr = header_item | split(pat="</li>") %}
|
||||||
{% if '<a' in header_label %}
|
{% set header_label = header_arr[0] %}
|
||||||
{% set link_label = header_label | striptags %}
|
{% if '<a' in header_label %}
|
||||||
{% set link_path = header_label | split(pat="%22") | safe%}
|
{% set link_label = header_label | striptags %}
|
||||||
{% if header_label is containing("http") %}
|
{% set link_path = header_label | split(pat="%22") | safe%}
|
||||||
{% if header_label is not containing("ourworld.tf") %}
|
<a href="{{link_path[1]}}" class="text-lg leading-6 font-medium text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
|
||||||
<a href="{{link_path[1]}}" target="_blank" class="text-lg leading-6 font-medium text-gray-900 hover:text-gray-500 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
|
{{link_label}}
|
||||||
{{link_label}}
|
</a>
|
||||||
</a>
|
{% else %}
|
||||||
{% endif %}
|
<div class="relative">
|
||||||
{% else %}
|
{% set button_id = header_label ~ "-menu-btn" | slugify %}
|
||||||
<a href="{{ get_url(path=link_path[1])}}" class="text-lg leading-6 font-medium text-gray-900 hover:text-gray-500 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
|
<button type="button" id="{{button_id}}" class="nav_btn font-medium text-gray-900 group inline-flex items-center space-x-2 text-lg leading-6 font-normal hover:text-blue-300 focus:outline-none transition ease-in-out duration-150">
|
||||||
{{link_label}}
|
<span>{{ header_label }}</span>
|
||||||
</a>
|
<div class="-rotate-90 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
|
||||||
{% endif %}
|
</button>
|
||||||
{% else %}
|
</div>
|
||||||
<div class="relative">
|
|
||||||
{% set button_id = header_label ~ "-menu-btn" | slugify %}
|
{% endif %}
|
||||||
<button type="button" id="{{button_id}}" class="nav_btn font-medium text-gray-900 hover:text-gray-500 group inline-flex items-center space-x-2 text-lg leading-6 font-normal hover:text-gray-500 focus:outline-none transition ease-in-out duration-150">
|
{% endif %}
|
||||||
<span>{{ header_label }}</span>
|
{% endfor %}
|
||||||
<div class="-rotate-90 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
|
<a href="mailto:info@ourworld.tf" target="_blank" class="text-lg leading-6 font-medium text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
|
||||||
</button>
|
Contact
|
||||||
</div>
|
</a>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
{% endif %}
|
|
||||||
{% endif %}
|
|
||||||
{% endfor %}
|
|
||||||
<a href="mailto:info@ourworld.tf" target="_blank" class="text-lg leading-6 font-medium text-gray-900 hover:text-gray-500 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
|
|
||||||
Contact
|
|
||||||
</a>
|
|
||||||
</nav>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -100,14 +95,11 @@
|
|||||||
From: "opacity-100 scale-100"
|
From: "opacity-100 scale-100"
|
||||||
To: "opacity-0 scale-95"
|
To: "opacity-0 scale-95"
|
||||||
-->
|
-->
|
||||||
<div id="hamburger" class="hidden fixed mt-16 z-20 top-0 inset-x-0 transition transform origin-top-right lg:hidden">
|
<div id="hamburger" class="hidden fixed mt-28 z-20 top-0 inset-x-0 transition transform origin-top-right lg:hidden">
|
||||||
<div>
|
|
||||||
<div class="shadow-xs h-screen bg-white divide-y-2 divide-gray-50">
|
<div class="shadow-xs h-screen bg-white divide-y-2 divide-gray-50">
|
||||||
<div class="pb-6 sm:px-12 md:px-16 lg:px-20 space-y-6 sm:space-y-8 sm:pb-8 max-h-screen overflow-y-auto">
|
<div class="pb-6 sm:px-12 md:px-16 lg:px-20 space-y-6 sm:space-y-8 sm:pb-8 max-h-screen overflow-y-auto">
|
||||||
|
<nav class="flex flex-col justify-around pb-12 pt-2">
|
||||||
<nav class="flex flex-col justify-around pb-12">
|
|
||||||
{% for header_item in header_items %}
|
{% for header_item in header_items %}
|
||||||
|
|
||||||
{% if not loop.first %}
|
{% if not loop.first %}
|
||||||
{% set header_arr = header_item | split(pat="</li>") %}
|
{% set header_arr = header_item | split(pat="</li>") %}
|
||||||
{% set header_label = header_arr[0] %}
|
{% set header_label = header_arr[0] %}
|
||||||
@ -119,12 +111,12 @@
|
|||||||
</a>
|
</a>
|
||||||
{% else %}
|
{% else %}
|
||||||
{% set button_id = header_label ~ "-mobile-menu-btn" | slugify %}
|
{% set button_id = header_label ~ "-mobile-menu-btn" | slugify %}
|
||||||
<button type="button" id="{{button_id}}" class="flex flex px-8 py-3 items-start text-left text-gray-900 group inline-flex space-x-2 text-lg leading-6 font-normal hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
|
<button type="button" id="{{button_id}}" class="my-0 px-8 py-3 items-start text-left text-gray-900 group inline-flex space-x-2 text-lg leading-6 font-normal hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
|
||||||
<span>{{ header_label }}</span>
|
<span>{{ header_label }}</span>
|
||||||
<div class="-rotate-90 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
|
<div class="-rotate-90 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
|
||||||
</button>
|
</button>
|
||||||
{% set menu_id = header_label ~ "-mobile-menu" | slugify %}
|
{% set menu_id = header_label ~ "-mobile-menu" | slugify %}
|
||||||
<div id="{{menu_id}}" class="z-50 leading-3 pl-12 pt-6 pb-4 inset-x-0 text-sm transform duration-200 ease-in opacity-0 -translate-y-1 hidden">
|
<div id="{{menu_id}}" class="z-50 leading-3 pl-9 pt-6 pb-4 inset-x-0 text-sm transform duration-200 ease-in opacity-0 -translate-y-1 hidden">
|
||||||
{{ header_arr[1] | safe }}
|
{{ header_arr[1] | safe }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -135,7 +127,7 @@
|
|||||||
{% if "footer/_index.md" in subsections_str %}
|
{% if "footer/_index.md" in subsections_str %}
|
||||||
{% set section = get_section(path="footer/_index.md")%}
|
{% set section = get_section(path="footer/_index.md")%}
|
||||||
{% set logoPath = section.extra.logoPath %}
|
{% set logoPath = section.extra.logoPath %}
|
||||||
<div class="mx-8 mt-8">
|
<div class="mx-8 my-2">
|
||||||
{# <div class="space-y-8 lg:max-w-lg xl:max-w-lg lg:mr-8 lg:mb-8 xl:col-span-1">
|
{# <div class="space-y-8 lg:max-w-lg xl:max-w-lg lg:mr-8 lg:mb-8 xl:col-span-1">
|
||||||
<img class="w-48 h-auto" src="{{logoPath}}" alt="Company name" />
|
<img class="w-48 h-auto" src="{{logoPath}}" alt="Company name" />
|
||||||
<p class="text-gray-500 text-base leading-6 ">
|
<p class="text-gray-500 text-base leading-6 ">
|
||||||
@ -143,7 +135,7 @@
|
|||||||
</p>
|
</p>
|
||||||
</div> #}
|
</div> #}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<a href="mailto:info@ourworld.tf" target="_blank" class="text-lg uppercase leading-6 font-medium text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
|
<a href="mailto:info@ourworld.tf" target="_blank" class="my-0 text-lg leading-6 font-medium text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
|
||||||
Contact
|
Contact
|
||||||
</a>
|
</a>
|
||||||
</nav>
|
</nav>
|
||||||
@ -151,7 +143,6 @@
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
Before Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 16 KiB |
Before Width: | Height: | Size: 80 KiB |
Before Width: | Height: | Size: 131 KiB |
Before Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 159 KiB |
Before Width: | Height: | Size: 128 KiB |
Before Width: | Height: | Size: 490 KiB |
Before Width: | Height: | Size: 481 KiB |
Before Width: | Height: | Size: 5.5 KiB |
Before Width: | Height: | Size: 30 KiB |
Before Width: | Height: | Size: 124 KiB |
Before Width: | Height: | Size: 2.3 KiB |
Before Width: | Height: | Size: 44 KiB |
Before Width: | Height: | Size: 90 KiB |
Before Width: | Height: | Size: 598 KiB |
Before Width: | Height: | Size: 7.8 KiB |
Before Width: | Height: | Size: 47 KiB |
Before Width: | Height: | Size: 125 KiB |
Before Width: | Height: | Size: 652 KiB |
Before Width: | Height: | Size: 80 KiB |
Before Width: | Height: | Size: 27 KiB |
Before Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 226 KiB |
Before Width: | Height: | Size: 140 KiB |
Before Width: | Height: | Size: 9.5 KiB |
Before Width: | Height: | Size: 72 KiB |
Before Width: | Height: | Size: 32 KiB |
Before Width: | Height: | Size: 59 KiB |
Before Width: | Height: | Size: 164 KiB |
Before Width: | Height: | Size: 62 KiB |
Before Width: | Height: | Size: 137 KiB |
Before Width: | Height: | Size: 62 KiB |
Before Width: | Height: | Size: 8.1 KiB |
Before Width: | Height: | Size: 214 KiB |
Before Width: | Height: | Size: 63 KiB |
Before Width: | Height: | Size: 14 KiB |
Before Width: | Height: | Size: 19 KiB |
Before Width: | Height: | Size: 138 KiB |
Before Width: | Height: | Size: 6.1 KiB |
Before Width: | Height: | Size: 129 KiB |
Before Width: | Height: | Size: 119 KiB |
Before Width: | Height: | Size: 56 KiB |
Before Width: | Height: | Size: 111 KiB |
Before Width: | Height: | Size: 3.6 KiB |
Before Width: | Height: | Size: 120 KiB |
Before Width: | Height: | Size: 2.1 KiB |
Before Width: | Height: | Size: 2.5 KiB |
Before Width: | Height: | Size: 28 KiB |
Before Width: | Height: | Size: 98 KiB |
Before Width: | Height: | Size: 25 KiB |
Before Width: | Height: | Size: 63 KiB |
Before Width: | Height: | Size: 8.6 KiB |
Before Width: | Height: | Size: 129 KiB |
Before Width: | Height: | Size: 135 KiB |
Before Width: | Height: | Size: 195 KiB |
Before Width: | Height: | Size: 16 KiB |
Before Width: | Height: | Size: 3.3 KiB |
Before Width: | Height: | Size: 4.6 KiB |
Before Width: | Height: | Size: 5.3 KiB |
Before Width: | Height: | Size: 302 KiB |
Before Width: | Height: | Size: 104 KiB |
Before Width: | Height: | Size: 121 KiB |
Before Width: | Height: | Size: 145 KiB |
Before Width: | Height: | Size: 126 KiB |
Before Width: | Height: | Size: 87 KiB |
Before Width: | Height: | Size: 124 KiB |
Before Width: | Height: | Size: 78 KiB |
Before Width: | Height: | Size: 1.9 KiB |
Before Width: | Height: | Size: 140 KiB |
Before Width: | Height: | Size: 125 KiB |
Before Width: | Height: | Size: 6.2 KiB |
Before Width: | Height: | Size: 115 KiB |
Before Width: | Height: | Size: 42 KiB |
Before Width: | Height: | Size: 35 KiB |
Before Width: | Height: | Size: 26 KiB |
Before Width: | Height: | Size: 194 KiB |
Before Width: | Height: | Size: 7.6 KiB |
Before Width: | Height: | Size: 129 KiB |
Before Width: | Height: | Size: 136 KiB |
Before Width: | Height: | Size: 52 KiB |
Before Width: | Height: | Size: 33 KiB |
Before Width: | Height: | Size: 1.9 KiB |
Before Width: | Height: | Size: 4.3 KiB |
Before Width: | Height: | Size: 14 KiB |
Before Width: | Height: | Size: 243 KiB |
Before Width: | Height: | Size: 169 KiB |
Before Width: | Height: | Size: 69 KiB |
Before Width: | Height: | Size: 136 KiB |
Before Width: | Height: | Size: 30 KiB |
Before Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 9.9 KiB |
Before Width: | Height: | Size: 36 KiB |
Before Width: | Height: | Size: 26 KiB |