ourworld_web/www_ourworld_tf
20
0
Fork 0
Code Issues 1 Pull Requests 2 Actions Packages Projects Releases 1 Wiki Activity

mobile header functional

Browse Source
This commit is contained in:
timurgordon 2022-02-23 07:16:14 +03:00
parent 228c93b9c1
commit 7ec4b085e5
4 changed files with 114 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
content/header/_index.md
View File

@ -78,4 +78,7 @@ Projects in OurWorld
Be a part of the new internet
- [Careers]("/careers")
- [Blog]("/blog")
{% end %}

15
css/index.css
View File

@ -44,13 +44,14 @@ img[src*="#large"] {
h2 {
@apply text-2xl lg:text-4xl font-light;
}
h4 {
@apply text-lg lg:text-xl font-light;
}
h5 {
@apply text-base lg:text-base font-light leading-8 my-2;
}
h5 {
@apply text-base lg:text-base leading-8 my-2;
nav p {
@apply hidden sm:block md:block lg:block xl:block 2xl:block;
}
}
@ -59,11 +60,7 @@ h3 {
font-style: normal;
font-weight: 600;
color: rgba(0, 0, 0, 0.5);
}
h4 {
font-size: 1.3em;
font-weight: 400;
margin: 10px 0px;
}
p {

4
templates/blog/blog.html
View File

@ -25,4 +25,6 @@ and a side nav for category and featured post navigation
{% include "partials/blogPosts.html" %}
{% include "partials/blogSidebar.html" %}
</div>
</main> {% endblock content %}
</main>
{% endblock content %}

206
templates/partials/header.html
View File

@ -4,6 +4,7 @@
--><!-- This example requires Tailwind CSS v1.4.0+ -->
<script type="text/javascript">
var inDisplay = "";
var hamburgerShown = false;
function toggleMenu() {
if (inDisplay === "learn") {
@ -16,16 +17,49 @@
}
}
function toggleHamburger() {
if (hamburgerShown) {
hideHamburger();
hamburgerShown = false;
}
else {
showHamburger();
hamburgerShown = true;
}
}
function showMenu() {
document.getElementById('learn').className = "absolute inset-x-0 transform shadow-lg backdrop-blur transition ease-out duration-150 opacity-1 -translate-y-0";
document.getElementById('learn').className = "mt-16 sm:mt-0 md:mt-0 lg:mt-0 xl:mt-0 2xl:mt-0 z-50 absolute inset-x-0 transform shadow-lg backdrop-blur transition ease-out duration-150 opacity-1 -translate-y-0";
}
function hideMenu() {
document.getElementById('learn').className = "hidden absolute inset-x-0 transform shadow-lg backdrop-blur transition ease-in duration-150 opacity-0 -translate-y-1";
}
function showHamburger() {
document.getElementById('header-container').className = "overflow-hidden";
document.getElementById('hamburger').className = "absolute mt-16 z-20 top-0 inset-x-0 transition transform origin-top-right";
document.getElementById('hamburger-btn').className = "hidden md: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";
}
function hideHamburger() {
document.getElementById('header-container').className = "";
document.getElementById('hamburger').className = "hidden absolute z-20 top-0 inset-x-0 transition transform origin-top-right md:hidden";
document.getElementById('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 = "hidden md: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";
hideMenu();
}
window.onload = function(){
document.getElementById("learn-btn").addEventListener( 'click', toggleMenu);
document.getElementById("mobile-learn-btn").addEventListener( 'click', toggleMenu);
document.getElementById("hamburger-btn").addEventListener( 'click', toggleHamburger);
document.getElementById("close-hamburger-btn").addEventListener( 'click', toggleHamburger);
}
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";
}
</script>
@ -33,7 +67,7 @@
{%- set section = get_section(path="header/_index.md") %}
{% set header_items = section.content | safe | split(pat="<li>") %}
<body>
<body id="header-container">
<div class="z-10 bg-white fixed w-screen">
<div class="relative z-10 shadow">
<div class="max-w-7xl mx-auto flex justify-between items-center px-4 py-5 sm:px-6 sm:py-4 lg:px-8 md:justify-start md:space-x-10">
@ -43,12 +77,18 @@
</a>
</div>
<div class="-mr-2 -my-2 md:hidden">
<button type="button" class="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">
<button id="hamburger-btn" type="button" class="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">
<!-- Heroicon name: menu -->
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
<button id="close-hamburger-btn" type="button" class="hidden md: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">
<!-- Heroicon name: x -->
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div class="hidden md:flex-1 md:flex md:items-center md:justify-between md:space-x-12">
<nav class="flex space-x-10">
@ -57,6 +97,13 @@
{% if not loop.first %}
{% set header_arr = header_item | split(pat="</li>") %}
{% set header_label = header_arr[0] %}
{% if '<a' in header_label %}
{% set link_label = header_label | striptags %}
{% set link_path = header_label | split(pat="%22") | safe%}
<a href="{{link_path[1]}}" class="text-sm leading-6 font-normal text-gray-500 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
{{link_label}}
</a>
{% else %}
<div class="relative">
<!-- Item active: "text-gray-900", Item inactive: "text-gray-500" -->
<button type="button" id="learn-btn" class="text-gray-500 group inline-flex items-center space-x-2 text-sm leading-6 font-normal hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
@ -68,15 +115,10 @@
-->
</button>
</div>
<a href="/careers" class="text-sm leading-6 font-normal text-gray-500 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
Careers
</a>
<a href="/blog" class="text-sm leading-6 font-normal text-gray-500 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
Blog
</a>
{% endif %}
{% endfor %}
{% endif %}
{% endfor %}
</nav>
@ -89,15 +131,15 @@
{% set header_label = header_arr[0] %}
{% set header_menu = header_arr[1] %}
<div>
<div id="learn" class="hidden opacity-0 -translate-y-1 absolute inset-x-0 transform shadow-lg backdrop-blur">
<div class="bg-semi-white">
<nav>
<div id="learn" class="z-50 mt-16 sm:mt-0 md:mt-0 lg:mt-0 xl:mt-0 2xl:mt-0 hidden opacity-0 -translate-y-1 absolute inset-x-0 transform shadow-lg md:backdrop-blur lg:backdrop-blur xl:backdrop-blur">
<div class="bg-white lg:bg-semi-white md:bg-semi-white xl:bg-semi-white">
<div class="mx-8 px-4 py-4 sm:px-6 sm:py-6 lg:px-8 lg:py-8 xl:py-12">
{{header_menu | safe}}
</div>
{{header_menu | replace(from="<br>", to="") | safe }}
</div>
</div>
</div>
</nav>
{% endif %}
@ -114,116 +156,42 @@
From: "opacity-100 scale-100"
To: "opacity-0 scale-95"
-->
<div class="hidden absolute z-20 top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden">
<div class="rounded-lg shadow-lg">
<div class="rounded-lg shadow-xs bg-white divide-y-2 divide-gray-50">
<div class="pt-5 pb-6 px-5 space-y-6 sm:space-y-8 sm:pb-8">
<div class="flex items-center justify-between">
<div id="hamburger" class="hidden absolute mt-16 z-20 top-0 inset-x-0 transition transform origin-top-right md:hidden">
<div>
<img class="h-8 w-auto" src="/https://tailwindui.com/img/logos/v1/workflow-mark-on-white.svg" alt="Workflow" />
</div>
<div class="-mr-2">
<button type="button" class="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">
<!-- Heroicon name: x -->
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
<div class="shadow-xs bg-white divide-y-2 divide-gray-50">
<div class="pt-5 pb-6 px-5 space-y-6 sm:space-y-8 sm:pb-8">
<nav class="flex justify-around">
{% for header_item in header_items %}
{% if not loop.first %}
{% set header_arr = header_item | split(pat="</li>") %}
{% set header_label = header_arr[0] %}
{% if '<a' in header_label %}
{% set link_label = header_label | striptags %}
{% set link_path = header_label | split(pat="%22") | safe%}
<a href="{{link_path[1]}}" class="text-sm leading-6 font-normal text-gray-500 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
{{link_label}}
</a>
{% else %}
<div class="relative">
<!-- Item active: "text-gray-900", Item inactive: "text-gray-500" -->
<button type="button" id="mobile-learn-btn" class="text-gray-500 group inline-flex items-center space-x-2 text-sm 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>
<!--
Heroicon name: chevron-down
Item active: "text-gray-600", Item inactive: "text-gray-400"
-->
</button>
</div>
</div>
<div>
<nav class="space-y-8">
<div class="grid gap-7 sm:grid-cols-2 sm:gap-y-8 sm:gap-x-4">
<a href="#" class="-m-3 space-x-4 flex items-center p-3 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
<!-- Heroicon name: chart-bar -->
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
</svg>
</div>
<div class="text-sm leading-6 font-normal text-gray-900">
Analytics
</div>
</a>
<a href="#" class="-m-3 space-x-4 flex items-center p-3 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
<!-- Heroicon name: cursor-click -->
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122" />
</svg>
</div>
<div class="text-sm leading-6 font-normal text-gray-900">
Engagement
</div>
</a>
<a href="#" class="-m-3 space-x-4 flex items-center p-3 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
<!-- Heroicon name: shield-check -->
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
</svg>
</div>
<div class="text-sm leading-6 font-normal text-gray-900">
Security
</div>
</a>
<a href="#" class="-m-3 space-x-4 flex items-center p-3 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
<!-- Heroicon name: view-grid -->
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
</svg>
</div>
<div class="text-sm leading-6 font-normal text-gray-900">
Integrations
</div>
</a>
</div>
<div class="text-sm leading-6">
<a href="#" class="font-normal text-indigo-600 hover:text-indigo-500 transition ease-in-out duration-150">
View all products &#x2192;
</a>
</div>
{% endif %}
{% endif %}
{% endfor %}
</nav>
</div>
</div>
<div class="py-6 px-5 space-y-6">
<div class="grid grid-cols-2 gap-4">
<a href="#" class="rounded-md text-sm leading-6 font-normal text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
Pricing
</a>
<a href="#" class="rounded-md text-sm leading-6 font-normal text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
Docs
</a>
<a href="#" class="rounded-md text-sm leading-6 font-normal text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
Company
</a>
<a href="#" class="rounded-md text-sm leading-6 font-normal text-gray-900 hover:text-gray-600 transition ease-in-out duration-150">
Resources
</a>
<a href="#" class="rounded-md text-sm leading-6 font-normal text-gray-900 hover:text-gray-600 transition ease-in-out duration-150">
Blog
</a>
<a href="#" class="rounded-md text-sm leading-6 font-normal text-gray-900 hover:text-gray-600 transition ease-in-out duration-150">
Contact Sales
</a>
</div>
<div class="space-y-6">
<span class="w-full flex rounded-md shadow-sm">
<a href="#" class="w-full flex items-center justify-center px-4 py-2 border border-transparent text-sm leading-6 font-normal rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition ease-in-out duration-150">
Sign up
</a>
</span>
<p class="text-center text-sm leading-6 font-normal text-gray-500">
Existing customer?
<a href="#" class="text-indigo-600 hover:text-indigo-500 transition ease-in-out duration-150">
Sign in
</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>