Merge pull request #319 from threefoldfoundation/development

Add recent newsroom items
This commit is contained in:
Sam T
2024-01-05 14:17:31 +03:00
committed by GitHub
57 changed files with 957 additions and 619 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 MiB

View File

@@ -0,0 +1,23 @@
---
id: africa_regen_ii
title: 🌍 Africa Regenerative Futures Summit II
image_caption: Africa Regen Summit II
description: Learn about the second edition in our Africa Regen Futures Summit series and some of the key outcomes.
date: 2023-11-21
taxonomies:
people: [sam_taggart]
tags: [community,technology,update,event]
news-category: [foundation]
extra:
imgPath: africa_regen_ii.png
---
This past weekend, some of the team hosted a group of passionate entrepreneurs and actors working on innovative planet-first people-first projects in Africa, or interested in supporting Africa.
<br/>
One key outcome was collaborating on an action plan with friends from Dar Es Salaam and Kenya that includes the deployment of ThreeFold infrastructure locally and a series of co-hosted developer sessions and hackathons in 2024.
<br/>
Please take a look at the full event recap [here](https://forum.threefold.io/t/recap-africa-regenerative-futures-summit-volume-ii/4136).

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 MiB

View File

@@ -0,0 +1,23 @@
---
id: dec_2023_update
title: ⛄️ December 22 Update from the Team
image_caption: Dec 2023 updates
description: As the year-end nears, we'd like to touch upon key topics. Please review the latest updates since our last community call.
date: 2023-12-22
taxonomies:
people: [bernadette_amanda_caster]
tags: [technology,update,threefold_grid,community,news]
news-category: [foundation]
extra:
imgPath: dec_2023_update.png
---
Greetings, friends. Please take some time to read our hot-off-the-press [update](https://forum.threefold.io/t/december-22-2023-update-from-the-team/4170) from the team!
<br/>
There are some important topics, reminders, and calls to action inside including some updates since our last call. Please leave comments and questions as replies to the post. We'll follow up next week.
<br/>
*For those who are celebrating, have a wonderful holiday and a lovely weekend to all!* 🎄

Binary file not shown.

After

Width:  |  Height:  |  Size: 356 KiB

View File

@@ -0,0 +1,29 @@
---
id: depin_hub
title: 🌐 ThreeFold Listed on DePIN Hub
image_caption: Depin Hub listing
description: We are now listed on DePIN (Decentralized Physical Infrastructure Networks). Let us know what you think.
date: 2023-12-15
taxonomies:
people: [bernadette_amanda_caster]
tags: [technology,update,threefold_grid,community,news]
news-category: [foundation]
extra:
imgPath: depin_hub.png
---
DePIN Hub is "the ultimate resource to learn more about the DePIN ecosystem," created by the Hotspotty team and launched officially yesterday. (Congrats!)
<br/>
Take a look at the [ThreeFold project listing](https://depinhub.io/projects/threefold) and feel free to let us know if you have any feedback or share within your networks!
<br/>
---
*& thanks to Theo from the community for suggesting we be listed on DePIN Hub.*
<br/>
*DePIN stands for Decentralized Physical Infrastructure Networks, and covers projects ranging from connectivity to clean energy production to projects like ours.*

Binary file not shown.

After

Width:  |  Height:  |  Size: 922 KiB

View File

@@ -0,0 +1,23 @@
---
id: dunia_yetu
title: 🇹🇿 Introducing Dunia Yetu
image_caption: Introducing Dunia Yetu
description: We have kicked off an initiative to deliver a set of tools which will allow coders in East Africa to create their own digital sovereign Internet.
date: 2023-11-28
taxonomies:
people: [sam_taggart]
tags: [community,technology,update]
news-category: [foundation]
extra:
imgPath: dunia_yetu.png
---
Together with a group of tech community leaders and innovators from Dar Es Salaam, we have kicked off a project called Dunia Yetu (Our World, in Swahili).
<br/>
The primary goal of Dunia Yetu is to deliver a set of tools and a platform which will allow many thousands of coders in East Africa to create their own digital sovereign Internet. For now, it begins with the deployment of local ThreeFold infrastructure and a series of events and gatherings.
<br/>
Learn more about the project and the initial steps we've taken [here](https://forum.threefold.io/t/introducing-dunia-yetu/4147).

View File

@@ -6,7 +6,7 @@ description: Take a look as Scott takes us through how to set up the Farmerbot o
date: 2023-03-24
taxonomies:
people: [sam_taggart]
tags: [update, technology, news, community]
tags: [update, technology, news, community, farming]
news-category: [foundation]
extra:
imgPath: farmerbot_setup.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

View File

@@ -0,0 +1,23 @@
---
id: farmerbot_update_required
title: 📣️️️️️️ Farmerbot Update Required for Grid 3.11
image_caption: Farmerbot Update Required
description: All farmers running Farmerbot, please check this post for a required update on your part.
date: 2023-09-15
taxonomies:
people: [sam_taggart]
news-category: [foundation]
tags: [farming, update, community, technology]
extra:
imgPath: farmerbot_update_required.png
---
For all ThreeFold Farmers running farmerbot:
<br/>
If you havent done so yet, please update your farmerbot by applying the latest Docker Compose file using the commands shown in [this post](https://forum.threefold.io/t/farmerbot-update-required-for-grid-3-11/4076).
<br/>
*Thanks to all the farmers who let us know over on [the farmers chat](https://t.me/threefoldfarmers) when they saw an issue.*

Binary file not shown.

After

Width:  |  Height:  |  Size: 50 KiB

View File

@@ -0,0 +1,23 @@
---
id: future_of_tft
title: 🔮 What's Next & The Future of TFT
image_caption: The Future of TFT
description: As we gear towards commercialization and increased utilization in the next phase of ThreeFold, we have major updates starting 2024 right here.
date: 2023-12-28
taxonomies:
people: [bernadette_amanda_caster]
tags: [technology,update,threefold_grid,community,news]
news-category: [foundation]
extra:
imgPath: future_of_tft.png
---
There is a lot to look forward to as it pertains to our project. If you haven't had a chance, please take a look at [our recent team update](https://forum.threefold.io/t/december-22-2023-update-from-the-team/4170) which covers and reinforces some important topics.
<br/>
We have seen some questions and concerns come in about TFT, particularly since it was shared that in 2024 we will see the end of minting of new TFTs.
<br/>
So we are sharing a short update on [the future of our token](https://forum.threefold.io/t/the-future-of-tft/4177), which remains the commercial utility and a fundamental component of our project.

Binary file not shown.

After

Width:  |  Height:  |  Size: 223 KiB

View File

@@ -0,0 +1,15 @@
---
id: grid_status_dashboard
title: 💡 TF Grid Status Dashboard
image_caption: TF Grid Status Dashboard
description: A new monitoring dashboard is available for farmers and grid users working with various grid services.
date: 2023-10-16
taxonomies:
people: [sam_taggart]
news-category: [foundation]
tags: [farming, update, community, technology]
extra:
imgPath: grid_status_dashboard.png
---
For Farmers and Grid Users who are working with the Dashboard, Playground, and other Grid Services, you can now easily track the status of these tools through [a simple monitoring page](https://status.grid.tf/status/threefold) built by the team.

Binary file not shown.

After

Width:  |  Height:  |  Size: 967 KiB

View File

@@ -0,0 +1,23 @@
---
id: ict_tanzania_2023
title: 🇹🇿 ThreeFold @ Tanzania ICT Conference
image_caption: ThreeFold at Tanzania ICT
description: Some of the team recently attended the Tanzania Annual ICT Conference, where TF co-founder Kristof De Spiegeleer participated in two separate panels.
date: 2023-10-23
taxonomies:
people: [sam_taggart]
news-category: [foundation]
tags: [update, event]
extra:
imgPath: ict_tanzania_2023.png
---
Some of the team recently attended the Tanzania Annual ICT Conference where ThreeFold co-founder Kristof De Spiegeleer participated in two separate panels.
<br/>
He took the opportunity to underline the importance of a sovereign Internet and the incredible potential of an open source and decentralized ecosystem to build Tanzania's digital economy.
<br/>
Take a look at some clips from the talk [here](https://forum.threefold.io/t/threefold-tanzania-ict-conference-2023/4106).

View File

@@ -0,0 +1,19 @@
---
id: introducing_mycelium
title: 🍄 Introducing Mycelium
image_caption: Introducing Mycelium
description: Read about the team's efforts on building our own Ipv6 overlay network.
date: 2023-09-19
taxonomies:
people: [sam_taggart]
news-category: [foundation]
tags: [update, community, technology, threefold_grid]
extra:
imgPath: introducing_mycelium.png
---
As part of the grid, ThreeFold is also implementing a planetary network. To date, we were using yggdrasil as the core technology for this network. However, the team noticed some limitations and ultimately decided to work on our own Ipv6 overlay network to accomplish our specific needs.
<br/>
Take a look at this [interesting write-up](https://forum.threefold.io/t/introducing-mycelium/4082) by Lee who is also leading the efforts on this super exciting initiative. We'll share more developments and a demo when ready. Thanks Lee!

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 MiB

View File

@@ -0,0 +1,24 @@
---
id: manual_updates_dec_2023
title: 📚 New on the Manual
image_caption: Manual updates
description: More new updates on our Manual this month.
date: 2023-12-14
taxonomies:
people: [bernadette_amanda_caster]
tags: [technology,update,threefold_grid,community,news]
news-category: [foundation]
extra:
imgPath: manual_updates_dec_2023.png
---
Take a look at what's new in the always-evolving, ever-expanding ThreeFold Manual.
<br/>
Take a tour of the ownCloud weblet, check out the updated section on GPU support, read about adding domains to a VM on the playground, and more.
<br/>
Read about all that's new recently [here](https://forum.threefold.io/t/manual-updates-december-2023/4162).

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

View File

@@ -0,0 +1,29 @@
---
id: manual_updates_nov_2023
title: 📚 New in the ThreeFold Manual
image_caption: Manual updates Nov 2023
description: The TF Manual is always-expanding and is user friendly, dive in here to see whats new.
date: 2023-11-06
taxonomies:
people: [bernadette_amanda_caster]
tags: [update, technology, news, community]
news-category: [foundation]
extra:
imgPath: manual_updates_nov_2023.png
---
The always-expanding TF Manual is your go-to resource when it comes to comprehensive information about the grid and how to get started for different audiences.
<br/>
Take a look at what's new recently, including: GPU Farming, Nomad Clusters, the Pulumi Plugin, and some additions to the Q&A. There's been an update to the Terraform Installation Guide as well!
<br/>
- [Dig in for the details](https://forum.threefold.io/t/manual-updates-november-3-2023/4121)
- [Head straight to the manual](https://manual.grid.tf/intro/intro_readme.html)
- [Join the Grid Tester Community](https://t.me/threefoldtesting)
<br/>
*Thanks to those who contributed to these Manual updates!*

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

View File

@@ -0,0 +1,23 @@
---
id: manual_updates_oct_2023
title: 🛠 Manual Updates | October 10th 2023
image_caption: Manual Updates October 2023
description: There are new updates to the manual, including extensive GPU support tutorials, how to deploy the TF Playground locally, and more.
date: 2023-10-11
taxonomies:
people: [sam_taggart]
news-category: [foundation]
tags: [farming, update, community, technology, threefold_grid]
extra:
imgPath: manual_updates_oct_2023.png
---
Thanks to the dev and documentation teams for the most recent improvements to the always-evolving ThreeFold Manual.
<br/>
New updates include: extensive GPU support tutorials, how to deploy the TF Playground locally, and more.
<br/>
Take a look at [this post](https://forum.threefold.io/t/manual-updates-october-2023/4095) for the full summary of what's been updated lately. And here's a direct link to the [TF Manual](https://manual.grid.tf/).

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

View File

@@ -0,0 +1,23 @@
---
id: nov_2023_comm_call_recording
title: 📺 Watch the Recording of This Week's Call
image_caption: November 2023 Community Call Recording
description: Inside our November community call our plan to go commercial, upcoming roadmap, and more.
date: 2023-12-02
taxonomies:
people: [sam_taggart]
tags: [threefold_grid,technology,update,community,farming]
news-category: [foundation]
extra:
imgPath: nov_2023_comm_call_recording.png
---
For those who missed the community call on Thursday, and for those who want to give it a second watch, we're happy to share the recording and links to key documents.
<br/>
Inside this call: a reminder on why we exist and what sets us apart, ThreeFolds plan to go commercial, key happenings since our last call, upcoming roadmap, and community Q&A.
<br/>
Dive in [here](https://forum.threefold.io/t/november-30-2023-threefold-community-call-recording/4153).

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

View File

@@ -0,0 +1,23 @@
---
id: pulumi_plugin
title: 🔌 Pulumi Plugin for TF Grid
image_caption: Pulumi Plugin for TF Grid
description: ThreeFold now has a plugin for Pulumi, a popular cloud-native open source infrastructure as code (IaC) platform.
date: 2023-10-01
taxonomies:
people: [sam_taggart]
news-category: [foundation]
tags: [update, community, technology, threefold_grid]
extra:
imgPath: pulumi_plugin.png
---
ThreeFold now has a plugin for [Pulumi](https://www.pulumi.com/), a popular cloud-native open source infrastructure as code (IaC) platform.
<br/>
The plugin provides developers with a way to deploy and manage their ThreeFold Grid resources using Pulumi. This means that developers can benefit from all of the features and benefits that Pulumi offers, such as cross-cloud support, type safety, preview and diff, and parallel execution still in the works. This is a powerful tool that can be used to deploy and manage a wide range of ThreeFold Grid applications.
<br/>
Read more about the plugin and what it means [here](https://forum.threefold.io/t/pulumi-plugin-for-tfgrid/4089).

Binary file not shown.

After

Width:  |  Height:  |  Size: 447 KiB

View File

@@ -0,0 +1,23 @@
---
id: pulumi_plugin_2
title: 💡 Pulumi Plugin Follow-Up:Tutorials
image_caption: Pulumi Plugin follow-up
description: Looking for a follow-up on Pulumi plugin, click here for the tutorials.
date: 2023-11-01
taxonomies:
people: [bernadette_amanda_caster]
tags: [update, technology, news, community]
news-category: [foundation]
extra:
imgPath: pulumi_plugin_2.png
---
As [shared last month](https://forum.threefold.io/t/pulumi-plugin-for-tfgrid/4089), ThreeFold has introduced a plugin for Pulumi, a popular cloud-native open source IaC platform, which presents an alternative to Terraform. Take a look at the above post if you're curious for an introduction to Pulumi.
<br/>
Today, [we present you](https://forum.threefold.io/t/threefold-pulumi-plugin-examples/4115) the basic steps to test the various examples within the ThreeFold Pulumi plugin [repository](https://github.com/threefoldtech/pulumi-threefold).
<br/>
What is your experience with Pulumi? Share with us as a comment to the Pulimi Plugin Examples [forum post](https://forum.threefold.io/t/threefold-pulumi-plugin-examples/4115)!

Binary file not shown.

After

Width:  |  Height:  |  Size: 447 KiB

View File

@@ -0,0 +1,20 @@
---
id: review_2023_2024
title: ⏪ Looking Back at 2023 ⏩ Looking Ahead to 2024
image_caption: The Future of TFT
description: Proud of our achievements and motivated for the future, 2023 was challenging but productive. Take a look at the year's highlights.
date: 2023-12-29
taxonomies:
people: [bernadette_amanda_caster]
tags: [technology,update,threefold_grid,community,news]
news-category: [foundation]
extra:
imgPath: review_2023_2024.png
---
2023 was a year where we built. We came together. We solved problems. And we set the stage for the realization of something bigger yet to come.
<br/>
Read our end of the year update [here](https://forum.threefold.io/t/looking-back-at-2023-looking-ahead-to-2024/4179)!

Binary file not shown.

After

Width:  |  Height:  |  Size: 924 KiB

View File

@@ -0,0 +1,21 @@
---
id: stricter_minting_update
title: ✅️ Stricter Minting Rules Into Effect
image_caption: stricter minting rules
description: The stricter minting rules are in effect as of this month, for anyone that missed the updates please dive in to know more.
date: 2023-11-08
taxonomies:
people: [bernadette_amanda_caster]
tags: [technology,update,threefold_grid,community,news,farming]
news-category: [foundation]
extra:
imgPath: stricter_minting_update.png
---
Friends For those who missed it in the chats, "[the DAO proposal to enforce stricter minting rules](https://forum.threefold.io/t/gep-for-stricter-minting-rules/4107) has passed." This means that from this month forward, these rules will be implemented in the code.
<br/>
"Please read this [post](https://forum.threefold.io/t/stricter-minting-rules/4127) for more information and while we expect questions from the community, we request you to channel your questions and feedback to this post. Additionally you may also reach out to our Support team on our [live chats](https://threefoldfaq.crisp.help/en/)."

Binary file not shown.

After

Width:  |  Height:  |  Size: 50 KiB

View File

@@ -0,0 +1,15 @@
---
id: tf_grid_312_live_qanet
title: 🗞 TF Grid 3.12 Update
image_caption: TF grid 3.12
description: TF Grid 3.12 is now live on QANet
date: 2023-11-03
taxonomies:
people: [bernadette_amanda_caster]
tags: [technology,update,threefold_grid, community, news]
news-category: [foundation]
extra:
imgPath: tf_grid_312_live_qanet.png
---
Hi all, just to confirm that TF Grid 3.12 was successfully deployed to QANet this week. A testrun is ongoing and the team is on track to push to Testnet next week.

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

View File

@@ -0,0 +1,19 @@
---
id: tf_grid_312_live_testnet
title: ✅️ TF Grid 3.12 Now on Testnet
image_caption: tf grid 312 live on testnet
description: Looking to help us in testing TF Grid 3.12 on Testnet, know more here.
date: 2023-11-09
taxonomies:
people: [bernadette_amanda_caster]
tags: [technology,update,threefold_grid,community,news]
news-category: [foundation]
extra:
imgPath: tf_grid_312_live_testnet.png
---
We are pleased to share that TF Grid 3.12 is now live on Testnet. The team is now verifying the upgrade, all is passing fine.
<br/>
After a period of testing, we will create a proposal on bringing the new version live on Mainnet. To expedite this process and add more voices, we encourage the community to get involved in testing v3.12 and sharing your feedback in our [user / testing group](https://t.me/threefoldtesting).

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

View File

@@ -0,0 +1,31 @@
---
id: tf_grid_312_mainnet_gep
title: 🗳 Vote to Bring Grid 3.12 to Mainnet
image_caption: Grid 3.12 Mainnet GEP
description: Calling all farmers to vote on the GEP to bring grid version 3.12 to mainnet!
date: 2023-12-01
taxonomies:
people: [sam_taggart]
tags: [threefold_grid,technology,update,community,farming]
news-category: [foundation]
extra:
imgPath: tf_grid_312_mainnet_gep.png
---
After successful testing of TF Grid 3.12 on Testnet, we are ready to start the release process of this version on Mainnet.
<br/>
For this to pass, we will need enough farmers to vote affirmatively before Monday December 11th at 10AM CET on [the dashboard](https://dashboard.grid.tf/) under 'DAO.'
## New in this Release
The user interface has undergone a series of noteworthy improvements, resulting in an overall enhanced user experience. In addition, documentation has been updated to ensure clarity for users, such as Presearch, Nextcloud, and others.
<br/>
Take a look at the full details [here](https://forum.threefold.io/t/gep-for-3-12-on-mainnet/4151).
<br/>
*In the meantime, the team is also working hard on developing and testing the new features for [TFGrid 3.13](https://forum.threefold.io/t/3-13-upcoming-updates/4149).*

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

View File

@@ -0,0 +1,19 @@
---
id: whats_coming_tf_grid_312
title: 📰 Whats Coming in TF Grid 3.12!
image_caption: TF Grid 3.12 comes alive
description: Good news! TTF Grid 3.12 is heading to QANet. See what's inside.
date: 2023-10-30
taxonomies:
people: [bernadette_amanda_caster]
tags: [update, technology, news, community]
news-category: [foundation]
extra:
imgPath: whats_coming_tf_grid_312.png
---
TF Grid 3.12 which is expected to head to QANet today and begin the journey to mainnet contains a number of noteworthy improvements, particularly as it pertains to user experience and documentation. Take a look at the recap and offer your thoughts/feedback [here](https://forum.threefold.io/t/3-12-upcoming-updates/4109).
<br/>
Thanks to the team for their hard work! Well keep the community posted as TF Grid 3.12 comes alive.

Binary file not shown.

After

Width:  |  Height:  |  Size: 633 KiB

View File

@@ -0,0 +1,19 @@
---
id: whats_coming_tf_grid_313
title: 📰 What's Coming in TF Grid 3.13!
image_caption: Coming in TF Grid 3.13
description: The upcoming release contains a wide range of UI/UX improvements, making it easier than ever to use ThreeFold!
date: 2023-11-30
taxonomies:
people: [sam_taggart]
tags: [threefold_grid,technology,update]
news-category: [foundation]
extra:
imgPath: whats_coming_tf_grid_313.png
---
The upcoming release contains a wide range of UI/UX improvements, making it easier than ever to use ThreeFold!
<br/>
[Take a look](https://forum.threefold.io/t/3-13-upcoming-updates/4149) at some of what's inside.

Binary file not shown.

After

Width:  |  Height:  |  Size: 816 KiB

View File

@@ -0,0 +1,25 @@
---
id: whats_next_for_tf
title: 🔜 What's Next For ThreeFold
image_caption: What's next for TF
description: After more than five years of building and expanding the open-source ThreeFold Grid, its time to go commercial.
date: 2023-12-13
taxonomies:
people: [sam_taggart]
tags: [threefold_grid,technology,update,community,farming]
news-category: [foundation]
extra:
imgPath: whats_next_for_tf.png
---
After more than five years of building and expanding the open-source ThreeFold Grid, its time to go commercial. Read about [what's next](https://threefold.io/next/).
<br/>
Relevant Reading:
<br/>
- [Building Reliability](https://www.threefold.io/blog/reliability/)
- [Cooperative Model](https://www.threefold.io/blog/threefold-cooperative/)
- [Farming Pools](https://www.threefold.io/blog/farming-pools/)

Binary file not shown.

After

Width:  |  Height:  |  Size: 902 KiB

View File

@@ -11,12 +11,12 @@ else
if [[ "$OSTYPE" == "linux-gnu"* ]]; then
ASSET="$ASSET-linux"
elif [[ "$OSTYPE" == "darwin"* ]]; then
elif [[ "$OSTYPE" == "darwin"* ]]; then
ASSET="$ASSET-macos"
fi
if [[ "$(uname -m)" == "x86_64"* ]]; then
ASSET="$ASSET-x64"
elif [[ "$(uname -m)" == "arm64"* ]]; then
elif [[ "$(uname -m)" == "arm64"* ]]; then
ASSET="$ASSET-arm64"
fi
pushd /tmp

File diff suppressed because one or more lines are too long

View File

@@ -1,123 +1,162 @@
var displayedMenu = "";
var hamburgerShown = false;
let width = screen.width;
var isMobile = width < 1024;
function readingTime() {
let articles = document.querySelectorAll(".article");
let times = document.querySelectorAll(".time");
const wpm = 225;
let words;
for (var i = 0; i < articles.length; i++) {
words = articles[i].innerText.trim().split(/\s+/).length;
let time = Math.ceil(words / wpm);
times[i].innerText = `${time} minute read`
}
}
readingTime()
function toggleMenu(button) {
if (displayedMenu === button.id.split("-")[0]) {
button.className = button.className.replace(" text-gray-800 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.lastElementChild.className = button.lastElementChild.className.replace("-rotate-90", "rotate-0")
button.className = button.className.replace(" text-gray-900", " text-gray-800 bg-stone-200 sm:bg-transparent");
displayedMenu = button.id.split("-")[0]
if (displayedMenu === button.id.split("-")[0]) {
button.className = button.className.replace(
" text-gray-800 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.lastElementChild.className = button.lastElementChild.className.replace(
"-rotate-90",
"rotate-0"
);
button.className = button.className.replace(
" text-gray-900",
" text-gray-800 bg-stone-200 sm:bg-transparent"
);
displayedMenu = button.id.split("-")[0];
}
document.addEventListener("click", function (e) {
if (!button.contains(e.target)) {
hideMenu(button.id.split("-")[0]);
button.lastElementChild.className = button.lastElementChild.className.replace(
"rotate-0",
"-rotate-90"
);
displayedMenu = "";
}
});
}
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 === "hamburger-btn" || button.id === "close-hamburger-btn") {
toggleHamburger();
}
if (button.id.indexOf("menu") !== -1) {
toggleMenu(button);
}
}
function toggleHamburger() {
if (hamburgerShown) {
hideHamburger();
hamburgerShown = false;
} else {
showHamburger();
hamburgerShown = true;
}
if (hamburgerShown) {
hideHamburger();
hamburgerShown = false;
} else {
showHamburger();
hamburgerShown = true;
}
}
function showMenu(menuName) {
var menuId = menuName + (isMobile ? '-mobile-menu' : '-menu');
var menuBtnId = menuName + (isMobile ? '-mobile-menu' : '-menu');
var menuElement = document.getElementById(menuId)
menuElement.className = menuElement.className.replace(" hidden", "");
let children = document.querySelectorAll('.nav_menu')
for (let i = 0; i < children.length; i++) {
if (menuElement !== children[i]) {
let btnId = `${children[i].id}-btn`;
let btn = document.getElementById(btnId);
if (btn && !children[i].classList.contains('hidden')) {
children[i].classList.add('hidden')
btn.lastElementChild.classList.replace("rotate-0", "-rotate-90")
}
}
var menuId = menuName + (isMobile ? "-mobile-menu" : "-menu");
var menuBtnId = menuName + (isMobile ? "-mobile-menu" : "-menu");
var menuElement = document.getElementById(menuId);
menuElement.className = menuElement.className.replace(" hidden", "");
let children = document.querySelectorAll(".nav_menu");
for (let i = 0; i < children.length; i++) {
if (menuElement !== children[i]) {
let btnId = `${children[i].id}-btn`;
let btn = document.getElementById(btnId);
if (btn && !children[i].classList.contains("hidden")) {
children[i].classList.add("hidden");
btn.lastElementChild.classList.replace("rotate-0", "-rotate-90");
}
}
setTimeout(function () {
menuElement.className = menuElement.className.replace("duration-200 ease-in opacity-0 -translate-y-1", "duration-150 ease-out opacity-1 -translate-y-0");
}, 10);
}
setTimeout(function () {
menuElement.className = menuElement.className.replace(
"duration-200 ease-in opacity-0 -translate-y-1",
"duration-150 ease-out opacity-1 -translate-y-0"
);
}, 10);
}
function hideMenu(menuName) {
var menuId = menuName + (isMobile ? '-mobile-menu' : '-menu');
var menuElement = document.getElementById(menuId)
menuElement.className = menuElement.className.replace("duration-150 ease-out opacity-1 -translate-y-0", "duration-200 ease-in opacity-0 -translate-y-1");
setTimeout(function () {
menuElement.className = menuElement.className + " hidden"
}, 300);
var menuId = menuName + (isMobile ? "-mobile-menu" : "-menu");
var menuElement = document.getElementById(menuId);
var btnId = `${menuElement.id}-btn`;
let btn = document.getElementById(btnId);
menuElement.className = menuElement.className.replace(
"duration-150 ease-out opacity-1 -translate-y-0",
"duration-200 ease-in opacity-0 -translate-y-1"
);
btn.lastElementChild.className = btn.lastElementChild.className.replace(
"rotate-0",
"-rotate-90"
);
if (!menuElement.classList.contains("hidden")) {
menuElement.classList.add("hidden");
}
}
function showHamburger() {
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-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("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-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";
}
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 lg: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 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";
if (displayedMenu !== "") {
hideMenu(displayedMenu);
}
document.getElementById("header-container").className = "";
document.getElementById("hamburger").className =
"hidden absolute z-20 top-0 inset-x-0 transition transform origin-top-right lg: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 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";
if (displayedMenu !== "") {
hideMenu(displayedMenu);
}
}
function toggleFilter() {
var filterMenu = document.getElementById("filter-menu")
if (filterMenu.className.includes("hidden")) {
filterMenu.className = filterMenu.className.replace("hidden", " ")
} else {
filterMenu.className = filterMenu.className + " hidden"
}
var filterMenu = document.getElementById("filter-menu");
if (filterMenu.className.includes("hidden")) {
filterMenu.className = filterMenu.className.replace("hidden", " ");
} else {
filterMenu.className = filterMenu.className + " hidden";
}
}
window.onload = function () {
let elements = document.getElementsByTagName("button");
let buttons = [...elements]
let elements = document.getElementsByTagName("button");
let buttons = [...elements];
buttons.forEach((button) => {
button.addEventListener('click', function () {
handleClick(button)
});
})
document.getElementById("filter-btn").addEventListener('click', toggleFilter);
document.getElementById("mobile-learn-btn").addEventListener('click', toggleMenu);
}
buttons.forEach((button) => {
button.addEventListener("click", function () {
handleClick(button);
});
});
};
function openInNewTab(url) {
window.open(url, '_blank').focus()
window.open(url, "_blank").focus();
}
function readingTime() {
let articles = document.querySelectorAll(".article");
let times = document.querySelectorAll(".time");
const wpm = 225;
let words;
for (var i = 0; i < articles.length; i++) {
words = articles[i].innerText.trim().split(/\s+/).length;
let time = Math.ceil(words / wpm);
times[i].innerText = `${time} minute read`;
}
}
readingTime();
document.getElementById("year").innerHTML = new Date().getFullYear();

View File

@@ -1,225 +0,0 @@
<!--
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
Read the documentation to get started: https://tailwindui.com/documentation
--><!-- This example requires Tailwind CSS v1.4.0+ -->
<script type="text/javascript">
var displayedMenu = "";
var hamburgerShown = false;
let width = screen.width;
var isMobile = width < 1024;
function toggleMenu(button) {
if (displayedMenu === button.id.split("-")[0]) {
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.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)
}
}
function toggleHamburger() {
if (hamburgerShown) {
hideHamburger();
hamburgerShown = false;
}
else {
showHamburger();
hamburgerShown = true;
}
}
function showMenu(menuName) {
var menuId = menuName + (isMobile ? '-mobile-menu' : '-menu');
var menuBtnId = menuName + (isMobile ? '-mobile-menu' : '-menu');
var menuElement = document.getElementById(menuId)
menuElement.className = menuElement.className.replace(" hidden" , "");
setTimeout(function() { menuElement.className = menuElement.className.replace("duration-200 ease-in opacity-0 -translate-y-1", "duration-150 ease-out opacity-1 -translate-y-0"); }, 10);
}
function hideMenu(menuName) {
var menuId = menuName + (isMobile ? '-mobile-menu' : '-menu');
var menuElement = document.getElementById(menuId)
menuElement.className = menuElement.className.replace("duration-150 ease-out opacity-1 -translate-y-0", "duration-200 ease-in opacity-0 -translate-y-1");
setTimeout(function() { menuElement.className = menuElement.className + " hidden" }, 300);
}
function showHamburger() {
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-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 my-2";
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 my-2";
}
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 lg: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 my-2";
document.getElementById('close-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 my-2";
if (displayedMenu !== "") { hideMenu(displayedMenu); }
}
window.onload = function(){
let elements = document.getElementsByTagName("button");
let buttons = [...elements]
buttons.forEach((button) => {
button.addEventListener( 'click', function() { handleClick(button) });
})
document.getElementById("mobile-learn-btn").addEventListener( 'click', toggleMenu);
}
</script>
<!-- set variables used for header template -->
{% set section = get_section(path="_index.md") %}
{% set subsections_str = section.subsections | join(sep=" ") %}
{% set logo_path = get_url(path=section.extra.logo_path | default(value='')) %}
{% if "header/_index.md" in subsections_str %}
{% set section = get_section(path="header/_index.md") %}
{% set header_items = section.content | safe | split(pat="<li>") %}
{% include "partials/header_custom.html" %}
{% else %}
<header id="header-container">
{% set header_class = config.extra.header_class | default(value='') %}
<div class="{{'z-10 bg-white fixed w-screen ' ~ header_class}}">
<div class="relative z-50 shadow">
<div class="mx-auto flex z-50 shadow justify-between items-center pl-6 pr-2 md:pr-0 lg:py-5 md:px-12 py-2 lg:px-20 lg:justify-start lg:space-x-20">
<div>
<a href="/" class="flex">
<img class="w-48 h-auto sm:w-15" src="{{logo_path}}" alt="FreeFlow Logo" />
</a>
</div>
<div class="-mr-2 -my-2 lg:hidden">
<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 my-2">
<!-- 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 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 my-2">
<!-- 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 lg:flex-1 lg:flex lg:items-center lg:justify-end lg:space-x-12">
<nav class="flex space-x-10">
{% for page in section.pages %}
{% if page.relative_path == "home/index.md" %} {% 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">
{{page.title}}
</a>
<div class="relative">
</div>
{% endfor %}
{% for subsection in section.subsections %}
{% if subsection == "footer/_index.md" %} {% continue %} {% endif %}
{% set button_id = subsection ~ "-menu-btn" | slugify %}
<div class="relative">
<button type="button" id="{{button_id}}" class="nav_btn text-gray-900 group inline-flex items-center space-x-2 text-lg leading-6 hover:text-blue-300 focus:outline-none transition ease-in-out duration-150">
<span>{{ subsection }}</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>
</button>
</div>
{% endfor %}
</nav>
</div>
</div>
</div>
{% for subsection in section.subsections %}
{% if subsection == "footer/_index.md" %} {% continue %} {% endif %}
{% set submenu_id = subsection ~ "-menu" | slugify %}
<nav>
<div id="{{submenu_id}}" class="mt-16 sm:mt-0 md:mt-0 lg:mt-0 xl:mt-0 2xl:mt-0 z-30 absolute inset-x-0 transform shadow-lg lg:backdrop-blur xl:backdrop-blur transition duration-200 ease-in opacity-0 -translate-y-1 hidden">
<div class="bg-white lg:bg-semi-white md:bg-semi-white xl:bg-semi-white">
<div class="mx-8 lg:mx-20 xl:mx-20 px-6 py-4 sm:p-6 md:p-8 lg:p-12 xl:p-12">
{{subsection | safe }}
</div>
</div>
</div>
</nav>
{% endfor %}
<!--
Mobile menu, show/hide based on mobile menu state.
Entering: "duration-200 ease-out"
From: "opacity-0 scale-95"
To: "opacity-100 scale-100"
Leaving: "duration-100 ease-in"
From: "opacity-100 scale-100"
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>
<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">
<nav class="flex flex-col justify-around pb-12">
{% for page in section.pages %}
{% if page.relative_path == "home/index.md" %} {% continue %} {% endif %}
<a href="{{page.permalink}}" class="text-lg px-8 py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
{{page.title}}
</a>
<hr/>
{% endfor %}
{% for subsection in section.subsections %}
{% if subsection == "footer/_index.md" %} {% continue %} {% endif %}
{% set button_id = subsection ~ "-mobile-menu-btn" | slugify %}
{% set menu_id = subsection ~ "-mobile-menu" | 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">
<span>{{ subsection }}</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>
</button>
<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">
{{ subsection | safe }}
</div>
<hr/>
{% endfor %}
{% if "footer/_index.md" in subsections_str %}
{% set section = get_section(path="footer/_index.md")%}
<div class="mx-8 mt-8">
<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="{{logo_path}}" alt="Company name" />
<p class="text-gray-500 text-base leading-6 ">
{{section.description}}
</p>
</div>
{% endif %}
</nav>
</div>
</div>
</div>
</div>
</header>
{% endif %}

252
templates/oldheader.html Normal file
View File

@@ -0,0 +1,252 @@
<!--
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
Read the documentation to get started: https://tailwindui.com/documentation
-->
<!-- This example requires Tailwind CSS v1.4.0+ -->
<script type="text/javascript">
var displayedMenu = "";
var hamburgerShown = false;
let width = screen.width;
var isMobile = width < 1024;
function toggleMenu(button) {
if (displayedMenu === button.id.split("-")[0]) {
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.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)
}
}
function toggleHamburger() {
if (hamburgerShown) {
hideHamburger();
hamburgerShown = false;
}
else {
showHamburger();
hamburgerShown = true;
}
}
function showMenu(menuName) {
var menuId = menuName + (isMobile ? '-mobile-menu' : '-menu');
var menuBtnId = menuName + (isMobile ? '-mobile-menu' : '-menu');
var menuElement = document.getElementById(menuId)
menuElement.className = menuElement.className.replace(" hidden" , "");
setTimeout(function() { menuElement.className = menuElement.className.replace("duration-200 ease-in opacity-0 -translate-y-1", "duration-150 ease-out opacity-1 -translate-y-0"); }, 10);
}
function hideMenu(menuName) {
var menuId = menuName + (isMobile ? '-mobile-menu' : '-menu');
var menuElement = document.getElementById(menuId)
menuElement.className = menuElement.className.replace("duration-150 ease-out opacity-1 -translate-y-0", "duration-200 ease-in opacity-0 -translate-y-1");
setTimeout(function() { menuElement.className = menuElement.className + " hidden" }, 300);
}
function showHamburger() {
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-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 my-2";
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 my-2";
}
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 lg: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 my-2";
document.getElementById('close-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 my-2";
if (displayedMenu !== "") { hideMenu(displayedMenu); }
}
window.onload = function(){
let elements = document.getElementsByTagName("button");
let buttons = [...elements]
buttons.forEach((button) => {
button.addEventListener( 'click', function() { handleClick(button) });
})
document.getElementById("mobile-learn-btn").addEventListener( 'click', toggleMenu);
}
</script>
<!-- set variables used for header template -->
{% set section = get_section(path="_index.md") %}
{% set subsections_str = section.subsections | join(sep=" ") %}
{% set logo_path = get_url(path=section.extra.logo_path | default(value='')) %}
{% if "header/_index.md" in subsections_str %}
{% set section = get_section(path="header/_index.md") %}
{% set header_items = section.content | safe | split(pat="
<li>
") %}
{% include "partials/header_custom.html" %}
{% else %}
<header id="header-container">
{% set header_class = config.extra.header_class | default(value='') %}
<div class="{{'z-10 bg-white fixed w-screen ' ~ header_class}}">
<div class="relative z-50 shadow">
<div class="mx-auto flex z-50 shadow justify-between items-center pl-6 pr-2 md:pr-0 lg:py-5 md:px-12 py-2 lg:px-20 lg:justify-start lg:space-x-20">
<div>
<a href="/" class="flex">
<img class="w-48 h-auto sm:w-15" src="{{logo_path}}" alt="FreeFlow Logo">
</a>
</div>
<div class="-mr-2 -my-2 lg:hidden">
<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 my-2">
<!-- 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 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 my-2">
<!-- 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 lg:flex-1 lg:flex lg:items-center lg:justify-end lg:space-x-12">
<nav class="flex space-x-10">
{% for page in section.pages %}
{% if page.relative_path == "home/index.md" %} {% 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">
{{page.title}}
</a>
<div class="relative"></div>
{% endfor %}
{% for subsection in section.subsections %}
{% if subsection == "footer/_index.md" %} {% continue %} {% endif %}
{% set button_id = subsection ~ "-menu-btn" | slugify %}
<div class="relative">
<button type="button" id="{{button_id}}" class="nav_btn text-gray-900 group inline-flex items-center space-x-2 text-lg leading-6 hover:text-blue-300 focus:outline-none transition ease-in-out duration-150">
<span>{{ subsection }}</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>
</button>
</div>
{% endfor %}
</nav>
</div>
</div>
</div>
{% for subsection in section.subsections %}
{% if subsection == "footer/_index.md" %} {% continue %} {% endif %}
{% set submenu_id = subsection ~ "-menu" | slugify %}
<nav>
<div id="{{submenu_id}}" class="mt-16 sm:mt-0 md:mt-0 lg:mt-0 xl:mt-0 2xl:mt-0 z-30 absolute inset-x-0 transform shadow-lg lg:backdrop-blur xl:backdrop-blur transition duration-200 ease-in opacity-0 -translate-y-1 hidden">
<div class="bg-white lg:bg-semi-white md:bg-semi-white xl:bg-semi-white">
<div class="mx-8 lg:mx-20 xl:mx-20 px-6 py-4 sm:p-6 md:p-8 lg:p-12 xl:p-12">
{{subsection | safe }}
</div>
</div>
</div>
</nav>
{% endfor %}
<!--
Mobile menu, show/hide based on mobile menu state.
Entering: "duration-200 ease-out"
From: "opacity-0 scale-95"
To: "opacity-100 scale-100"
Leaving: "duration-100 ease-in"
From: "opacity-100 scale-100"
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>
<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">
<nav class="flex flex-col justify-around pb-12">
{% for page in section.pages %}
{% if page.relative_path == "home/index.md" %} {% continue %} {% endif %}
<a href="{{page.permalink}}" class="text-lg px-8 py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
{{page.title}}
</a>
<hr>
{% endfor %}
{% for subsection in section.subsections %}
{% if subsection == "footer/_index.md" %} {% continue %} {% endif %}
{% set button_id = subsection ~ "-mobile-menu-btn" | slugify %}
{% set menu_id = subsection ~ "-mobile-menu" | 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">
<span>{{ subsection }}</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>
</button>
<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">
{{ subsection | safe }}
</div>
<hr>
{% endfor %}
{% if "footer/_index.md" in subsections_str %}
{% set section = get_section(path="footer/_index.md")%}
<div class="mx-8 mt-8">
<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="{{logo_path}}" alt="Company name">
<p class="text-gray-500 text-base leading-6 ">
{{section.description}}
</p>
</div>
{% endif %}
</nav>
</div>
</div>
</div>
</div>
</header>
{% endif %}

View File

@@ -2,43 +2,36 @@
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
Read the documentation to get started: https://tailwindui.com/documentation
-->
{%- set section = get_section(path="footer/_index.md") %}
{%- set logoPath = section.extra.logoPath %}
<html>
<head /><body>
<head/>
<body>
<div class="mt-6 border-t border-gray-200 pt-2"></div>
<footer class="bg-white">
<div class="max-w-screen-2xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
<div class="xl:flex xl:gap-4">
<div class="space-y-8 lg:max-w-sm xl:max-w-sm lg:mr-8 lg:mb-8 xl:col-span-1">
<img class="w-16 h-auto sm:w-15" src="{{ get_url(path=logoPath)}}" alt="ThreeFold Logo" />
<p class="text-gray-500 text-base leading-6 ">
{{section.description}}
</p>
{% include "partials/socialLinks.html" %}
<div class="max-w-screen-2xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
<div class="xl:flex xl:gap-4">
<div class="space-y-8 lg:max-w-sm xl:max-w-sm lg:mr-8 lg:mb-8 xl:col-span-1">
<img class="w-16 h-auto sm:w-15" src="{{ get_url(path=logoPath)}}" alt="ThreeFold Logo">
<p class="text-gray-500 text-base leading-6 ">
{{section.description}}
</p>
{% include "partials/socialLinks.html" %}
</div>
<div class="mt-6 lg:mt-0 w-full px-8 sm:px-12 md:px-16 lg:px-20 footer-cust">
{{ section.content | safe }}
</div>
</div>
<div class="mt-12 mx-auto border-t border-gray-200 pt-8">
<p data-v-14efe4a7="" class="text-base leading-6 text-gray-400 text-center">
©
<span id="year"></span>
ThreeFold, All rights reserved.
<a target="_blank" href="https://library.threefold.me/info/legal/#/legal__terms_conditions_websites" class="leading-6 text-gray-500 hover:text-gray-900">Terms &amp; Conditions |</a>
<a target="_blank" href="https://library.threefold.me/info/legal/#/legal__privacypolicy" class="leading-6 text-gray-500 hover:text-gray-900">Privacy Policy</a>
</div>
</div>
</div>
<div class="mt-6 lg:mt-0 w-full px-8 sm:px-12 md:px-16 lg:px-20 footer-cust">
{{ section.content | safe }}
</div>
</div>
<div class="mt-12 mx-auto border-t border-gray-200 pt-8">
<p data-v-14efe4a7="" class="text-base leading-6 text-gray-400 text-center">
© 2023 ThreeFold, All rights reserved.
<a target="_blank" href="https://library.threefold.me/info/legal/#/legal__terms_conditions_websites" class="leading-6 text-gray-500 hover:text-gray-900">Terms &amp; Conditions |</a>
<a target="_blank" href="https://library.threefold.me/info/legal/#/legal__privacypolicy" class="leading-6 text-gray-500 hover:text-gray-900">Privacy Policy</a>
</div>
</div>
</div>
</footer>
</body>
</html>
</body>
</html>

View File

@@ -1,230 +0,0 @@
<!--
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
Read the documentation to get started: https://tailwindui.com/documentation
--><!-- This example requires Tailwind CSS v1.4.0+ -->
<script type="text/javascript">
var displayedMenu = "";
var hamburgerShown = false;
let width = screen.width;
var isMobile = width < 1024;
function toggleMenu(button) {
if (displayedMenu === button.id.split("-")[0]) {
button.className = button.className.replace("text-blue-500", " text-gray-900");
hideMenu(button.id.split("-")[0]);
displayedMenu = "";
}
else {
showMenu(button.id.split("-")[0]);
button.className = button.className.replace("text-gray-900", " text-blue-500");
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) }
}
function toggleHamburger() {
console.log("toggling hamburger", hamburgerShown)
if (hamburgerShown) {
hideHamburger();
hamburgerShown = false;
}
else {
showHamburger();
hamburgerShown = true;
}
}
function showMenu(menuName) {
var menuId = menuName + (isMobile ? '-mobile-menu' : '-menu');
var menuBtnId = menuName + (isMobile ? '-mobile-menu' : '-menu');
var menuElement = document.getElementById(menuId)
menuElement.className = menuElement.className.replace(" hidden" , "");
setTimeout(function() { menuElement.className = menuElement.className.replace("duration-200 ease-in opacity-0 -translate-y-1", "duration-150 ease-out opacity-1 -translate-y-0"); }, 10);
}
function hideMenu(menuName) {
var menuId = menuName + (isMobile ? '-mobile-menu' : '-menu');
var menuElement = document.getElementById(menuId)
menuElement.className = menuElement.className.replace("duration-150 ease-out opacity-1 -translate-y-0", "duration-200 ease-in opacity-0 -translate-y-1");
setTimeout(function() { menuElement.className = menuElement.className + " hidden" }, 300);
}
function showHamburger() {
document.getElementById('header-container').className = "overflow-hidden";
document.getElementById('hamburger').className = "fixed 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";
}
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 lg: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 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";
if (displayedMenu !== "") { hideMenu(displayedMenu); }
}
window.onload = function(){
let elements = document.getElementsByTagName("button");
let buttons = [...elements]
buttons.forEach((button) => {
button.addEventListener( 'click', function() { handleClick(button) });
})
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";
}
</script>
{%- set section = get_section(path="header/_index.md") %}
{% set header_items = section.content | safe | split(pat="<li>") %}
<header id="header-container">
<div class="z-10 bg-white fixed w-screen">
<div class="relative z-50 shadow">
<div class="mx-auto flex z-50 shadow justify-between items-center px-6 py-5 sm:px-8 md:px-12 sm:py-6 lg:px-20 lg:justify-start lg:space-x-20">
<div>
<a href="/" class="flex">
<img class="w-20 h-auto sm:w-32" src="{{section.extra.logoPath}}" alt="Ourworld Logo" />
</a>
</div>
<div class="-mr-2 -my-2 lg:hidden">
<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 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">
<!-- 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 lg:flex-1 lg:flex lg:items-center lg:justify-between lg:space-x-12">
<nav class="flex space-x-10">
{% 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-lg leading-6 font-medium 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">
{% set button_id = header_label ~ "-menu-btn" | slugify %}
<button type="button" id="{{button_id}}" class="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">
<span>{{ header_label }}</span>
<!--
Heroicon name: chevron-down
Item active: "text-gray-600", Item inactive: "text-gray-400"
-->
</button>
</div>
{% endif %}
{% endif %}
{% endfor %}
</nav>
</div>
</div>
</div>
{% for header_item in header_items %}
{% if not loop.first %}
{% set header_arr = header_item | split(pat="</li>") %}
{% set header_label = header_arr[0] %}
{% set header_menu = header_arr[1] %}
{% set menu_id = header_label ~ "-menu" | slugify %}
<nav>
<div id="{{menu_id}}" class="mt-0 sm:mt-0 md:mt-0 lg:mt-0 xl:mt-0 2xl:mt-0 z-30 absolute inset-x-0 transform shadow-lg lg:backdrop-blur xl:backdrop-blur transition duration-200 ease-in opacity-0 -translate-y-1 hidden">
<div class="bg-white lg:bg-semi-white md:bg-semi-white xl:bg-semi-white">
<div class="mx-8 lg:mx-20 xl:mx-20 px-6 py-4 sm:px-8 sm:py-6 lg:px-12 lg:py-8 xl:py-12">
{{header_menu | safe }}
</div>
</div>
</div>
</nav>
{% endif %}
{% endfor %}
<!--
Mobile menu, show/hide based on mobile menu state.
Entering: "duration-200 ease-out"
From: "opacity-0 scale-95"
To: "opacity-100 scale-100"
Leaving: "duration-100 ease-in"
From: "opacity-100 scale-100"
To: "opacity-0 scale-95"
-->
<div id="hamburger" class="hidden fixed mt-12 z-20 top-0 inset-x-0 transition transform origin-top-right lg:hidden">
<div>
<div class="shadow-xs bg-white divide-y-2 divide-gray-50">
<div class="pt-5 pb-6 px-8 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">
{% 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-3xl leading-6 font-normal text-gray-500 hover:text-gray-900 focus:outline-none focus:text-gray-900 my-8 transition ease-in-out duration-150 mt-0">
{{link_label}}
</a>
{% else %}
{% set button_id = header_label ~ "-mobile-menu-btn" | slugify %}
<!-- Item active: "text-gray-900", Item inactive: "text-gray-500" -->
<button type="button" id="{{button_id}}" class="flex flex-col items-start text-left text-gray-500 group inline-flex space-x-2 text-3xl my-8 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"
-->
{% set menu_id = header_label ~ "-mobile-menu" | slugify %}
<div id="{{menu_id}}" class="z-50 leading-3 mt-0 pl-12 inset-x-0 text-sm transform duration-200 ease-in opacity-0 -translate-y-1 hidden">
{{ header_arr[1] | safe }}
</div>
</button>
{% endif %}
{% if header_arr[1] %}
{% endif %}
{% endif %}
{% endfor %}
</nav>
</div>
</div>
</div>
</div>
</header>

View File

@@ -26,36 +26,34 @@
</div>
<div class="hidden lg:flex-1 lg:flex lg:items-center lg:justify-between lg:space-x-6">
<nav class="flex space-x-10">
{% 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%}
{% if header_label is containing("http") %}
{% if header_label is not containing("threefold") %}
<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}}
</a>
{% endif %}
{% else %}
<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">
{{link_label}}
</a>
{% endif %}
{% else %}
<div class="relative">
{% set button_id = header_label ~ "-menu-btn" | slugify %}
<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">
<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>
</button>
</div>
{% endif %}
{% endif %}
{% 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 %}
{% if header_label is containing("http") %}
{% if header_label is not containing("threefold") %}
<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}}
</a>
{% endif %}
{% else %}
<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">
{{link_label}}
</a>
{% endif %}
{% else %}
<div class="relative">
{% set button_id = header_label ~ "-menu-btn" | slugify %}
<button type="button" id="{{button_id}}" class="nav_btn 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">
{{ header_label }}
<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>
</div>
{% endif %}
{% endif %}
{% endfor %}
</nav>
@@ -126,7 +124,7 @@
{% set menu_id = header_label ~ "-menu" | slugify %}
<nav>
<div id="{{menu_id}}" class="nav_menu mt-0 sm:mt-0 md:mt-0 lg:mt-0 xl:mt-0 2xl:mt-0 z-30 absolute inset-x-0 transform shadow-lg lg:backdrop-blur xl:backdrop-blur transition duration-200 ease-in opacity-0 -translate-y-1 hidden">
<div id="{{menu_id}}" class="nav_menu mt-0 sm:mt-0 md:mt-0 lg:mt-0 xl:mt-0 2xl:mt-0 z-50 absolute inset-x-0 transform shadow-lg lg:backdrop-blur xl:backdrop-blur transition duration-200 ease-in opacity-0 -translate-y-1 hidden">
<div class="bg-white lg:bg-semi-white md:bg-semi-white xl:bg-semi-white">
<div id="menu" class="mx-8 lg:mx-10 xl:mx-10 px-6 sm:p-6 md:p-8">
{{header_menu | safe }}
@@ -178,7 +176,7 @@
{% else %}
{% 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">
<span>{{ header_label }}</span>
{{ header_label }}
<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>
{% set menu_id = header_label ~ "-mobile-menu" | slugify %}

View File