clean website

This commit is contained in:
Ehab Hassan 2025-08-11 09:18:35 +03:00
parent 4a4e8bd33c
commit 45d9a1b00c
19 changed files with 154 additions and 449 deletions

View File

@ -1,81 +0,0 @@
:root {
--md-admonition-icon--note: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25z'/></svg>");
--md-admonition-icon--abstract: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M17 9H7V7h10m0 6H7v-2h10m-3 6H7v-2h7M12 3a1 1 0 0 1 1 1 1 1 0 0 1-1 1 1 1 0 0 1-1-1 1 1 0 0 1 1-1m7 0h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2z'/></svg>");
--md-admonition-icon--info: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13 9h-2V7h2m0 10h-2v-6h2m-1-9A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2z'/></svg>");
--md-admonition-icon--tip: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M17.66 11.2c-.23-.3-.51-.56-.77-.82-.67-.6-1.43-1.03-2.07-1.66C13.33 7.26 13 4.85 13.95 3c-.95.23-1.78.75-2.49 1.32-2.59 2.08-3.61 5.75-2.39 8.9.04.1.08.2.08.33 0 .22-.15.42-.35.5-.23.1-.47.04-.66-.12a.58.58 0 0 1-.14-.17c-1.13-1.43-1.31-3.48-.55-5.12C5.78 10 4.87 12.3 5 14.47c.06.5.12 1 .29 1.5.14.6.41 1.2.71 1.73 1.08 1.73 2.95 2.97 4.96 3.22 2.14.27 4.43-.12 6.07-1.6 1.83-1.66 2.47-4.32 1.53-6.6l-.13-.26c-.21-.46-.77-1.26-.77-1.26m-3.16 6.3c-.28.24-.74.5-1.1.6-1.12.4-2.24-.16-2.9-.82 1.19-.28 1.9-1.16 2.11-2.05.17-.8-.15-1.46-.28-2.23-.12-.74-.1-1.37.17-2.06.19.38.39.76.63 1.06.77 1 1.98 1.44 2.24 2.8.04.14.06.28.06.43.03.82-.33 1.72-.93 2.27z'/></svg>");
--md-admonition-icon--success: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m9 20.42-6.21-6.21 2.83-2.83L9 14.77l9.88-9.89 2.83 2.83L9 20.42z'/></svg>");
--md-admonition-icon--question: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m15.07 11.25-.9.92C13.45 12.89 13 13.5 13 15h-2v-.5c0-1.11.45-2.11 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41a2 2 0 0 0-2-2 2 2 0 0 0-2 2H8a4 4 0 0 1 4-4 4 4 0 0 1 4 4 3.2 3.2 0 0 1-.93 2.25M13 19h-2v-2h2M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10c0-5.53-4.5-10-10-10z'/></svg>");
--md-admonition-icon--warning: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13 14h-2v-2h2m0 6h-2v-4h2m-.29-11.71c.39-.39.39-1.02 0-1.41l-4.59-4.59c-.39-.39-1.02-.39-1.41 0L4.21 6.38c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0zM5.71 16.88l4.59-4.59c.39-.39.39-1.02 0-1.41l-4.59-4.59c-.39-.39-1.02-.39-1.41 0L3.29 10.47c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0z'/></svg>");
}
.md-typeset .admonition {
display: flex;
border-radius: 0.25rem;
margin: 1rem 0;
padding: 1rem;
position: relative;
}
.md-typeset .admonition.note {
background-color: var(--md-admonition-background-color--note, #f9fafb);
border: 1px solid var(--md-admonition-border-color--note, #e9ecef);
}
.md-typeset .admonition.abstract {
background-color: var(--md-admonition-background-color--abstract, #f9f9f9);
border: 1px solid var(--md-admonition-border-color--abstract, #e1e4e8);
}
.md-typeset .admonition.info {
background-color: var(--md-admonition-background-color--info, #e7f1fb);
border: 1px solid var(--md-admonition-border-color--info, #addbee);
}
.md-typeset .admonition.tip {
background-color: var(--md-admonition-background-color--tip, #e5f8ec);
border: 1px solid var(--md-admonition-border-color--tip, #a3e1b1);
}
.md-typeset .admonition.success {
background-color: var(--md-admonition-background-color--success, #d4edda);
border: 1px solid var(--md-admonition-border-color--success, #c3e6cb);
}
.md-typeset .admonition.question {
background-color: var(--md-admonition-background-color--question, #fefefe);
border: 1px solid var(--md-admonition-border-color--question, #dadada);
}
.md-typeset .admonition.warning {
background-color: var(--md-admonition-background-color--warning, #fff3cd);
border: 1px solid var(--md-admonition-border-color--warning, #ffeeba);
}
.md-typeset .admonition-title {
font-size: 1rem;
font-weight: 700;
margin: 0;
}
.md-typeset .admonition-content {
margin: 0;
padding: 0 1rem;
flex: 1;
}
.md-typeset .admonition-icon {
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
position: absolute;
top: 0;
left: 0;
}
.md-typeset .admonition-icon > svg {
fill: var(--md-admonition-icon-fill, #212529);
width: 1.5rem;
height: 1.5rem;
}

View File

@ -6,7 +6,6 @@
@import "tailwindcss/base";
@import "layout.css";
@import "tailwindcss/components";
@import "admonition.css";
@import "tailwindcss/utilities";
/* Google Fonts */

View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" zoomAndPan="magnify" viewBox="0 0 224.87999 225" height="300" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><clipPath id="ad0b04319c"><path d="M 9.570312 9.632812 L 214.960938 9.632812 L 214.960938 215.023438 L 9.570312 215.023438 Z M 9.570312 9.632812 " clip-rule="nonzero"></path></clipPath></defs><g clip-path="url(#ad0b04319c)"><path fill="#6266F1" d="M 215.300781 112.496094 C 215.300781 169.300781 169.238281 215.363281 112.4375 215.363281 C 55.636719 215.363281 9.570312 169.300781 9.570312 112.496094 C 9.570312 55.695312 55.636719 9.632812 112.4375 9.632812 C 169.238281 9.632812 215.300781 55.695312 215.300781 112.496094 Z M 215.300781 112.496094 " fill-opacity="1" fill-rule="nonzero"></path></g><path fill="#FFFFFF" d="M 143.296875 119.8125 C 143.296875 130.636719 140.828125 138.980469 135.902344 144.84375 C 130.972656 150.707031 124.050781 153.644531 115.089844 153.644531 C 106.070312 153.644531 99.082031 150.691406 94.136719 144.78125 C 89.195312 138.871094 86.722656 130.558594 86.722656 119.8125 L 86.722656 105.183594 C 86.722656 94.355469 89.175781 86.015625 94.117188 80.152344 C 99.039062 74.28125 105.988281 71.351562 114.988281 71.351562 C 123.96875 71.351562 130.941406 74.304688 135.886719 80.214844 C 140.828125 86.121094 143.296875 94.453125 143.296875 105.246094 Z M 124.511719 102.8125 C 124.511719 97.046875 123.753906 92.746094 122.226562 89.914062 C 120.71875 87.058594 118.285156 85.65625 114.992188 85.65625 C 111.757812 85.65625 109.40625 86.960938 107.941406 89.613281 C 106.476562 92.269531 105.671875 96.246094 105.570312 101.609375 L 105.570312 122.0625 C 105.570312 128.050781 106.332031 132.433594 107.839844 135.203125 C 109.367188 137.957031 111.777344 139.34375 115.089844 139.34375 C 118.285156 139.34375 120.65625 137.996094 122.164062 135.308594 C 123.691406 132.617188 124.472656 128.394531 124.511719 122.628906 Z M 124.511719 102.8125 " fill-opacity="1" fill-rule="nonzero"></path></svg>

Before

Width:  |  Height:  |  Size: 2.0 KiB

View File

@ -1,4 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" zoomAndPan="magnify" viewBox="0 0 224.87999 225" height="300" preserveAspectRatio="xMidYMid meet" version="1.0">
<path fill="#6266F1" d="M 219.625 112.46875 C 219.625 171.714844 171.597656 219.742188 112.351562 219.742188 C 53.105469 219.742188 5.074219 171.714844 5.074219 112.46875 C 5.074219 53.222656 53.105469 5.195312 112.351562 5.195312 C 171.597656 5.195312 219.625 53.222656 219.625 112.46875 Z M 219.625 112.46875 " fill-opacity="1" fill-rule="nonzero"></path>
<path fill="#FFFFFF" d="M 115.15625 57.453125 C 120.320312 57.453125 124.988281 60.449219 125.539062 66.117188 C 125.539062 66.117188 125.539062 158.9375 125.539062 158.9375 C 124.988281 164.4375 120.320312 166.933594 115.820312 166.933594 C 111.15625 166.933594 106.488281 164.4375 106.488281 158.9375 C 106.488281 158.9375 106.488281 91.613281 106.488281 91.613281 C 106.488281 91.613281 99.324219 101.113281 99.324219 101.113281 C 97.324219 103.945312 94.660156 105.109375 91.660156 105.109375 C 85.660156 105.109375 80.660156 97.277344 84.492188 91.28125 C 84.492188 91.28125 106.65625 61.117188 106.65625 61.117188 C 108.988281 58.617188 112.324219 57.453125 115.15625 57.453125 Z M 115.15625 57.453125 " fill-opacity="1" fill-rule="nonzero"></path>
</svg>

Before

Width:  |  Height:  |  Size: 1.4 KiB

View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" zoomAndPan="magnify" viewBox="0 0 224.87999 225" height="300" preserveAspectRatio="xMidYMid meet" version="1.0"><path fill="#6266F1" d="M 216.429688 112.570312 C 216.429688 170.003906 169.871094 216.5625 112.4375 216.5625 C 55.007812 216.5625 8.449219 170.003906 8.449219 112.570312 C 8.449219 55.136719 55.007812 8.582031 112.4375 8.582031 C 169.871094 8.582031 216.429688 55.136719 216.429688 112.570312 Z M 216.429688 112.570312 " fill-opacity="1" fill-rule="nonzero"></path><path fill="#FFFFFF" d="M 115.519531 148.421875 C 115.519531 148.421875 143.015625 148.421875 143.015625 148.421875 C 149.359375 148.421875 152.773438 152.652344 152.773438 156.722656 C 152.773438 160.789062 149.683594 164.859375 143.175781 164.859375 C 143.175781 164.859375 82.824219 164.859375 82.824219 164.859375 C 77.128906 164.371094 73.386719 160.300781 73.386719 155.746094 C 73.386719 153.46875 74.6875 150.863281 77.128906 148.910156 C 77.128906 148.910156 122.515625 113.273438 122.515625 113.273438 C 129.347656 108.394531 133.253906 100.09375 131.953125 91.957031 C 130.648438 81.054688 122.351562 75.847656 112.59375 75.847656 C 102.832031 75.847656 95.023438 81.542969 93.070312 90.980469 C 92.421875 96.027344 88.355469 98.464844 84.125 98.464844 C 79.242188 98.464844 74.199219 94.886719 74.851562 88.703125 C 77.453125 68.527344 93.070312 59.574219 112.59375 59.574219 C 131.136719 59.574219 148.21875 70.640625 150.171875 89.679688 C 151.960938 105.300781 144.964844 117.015625 134.066406 125.640625 C 134.066406 125.640625 104.132812 148.910156 104.132812 148.910156 C 104.132812 148.910156 115.519531 148.421875 115.519531 148.421875 Z M 115.519531 148.421875 " fill-opacity="1" fill-rule="nonzero"></path></svg>

Before

Width:  |  Height:  |  Size: 1.8 KiB

View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" zoomAndPan="magnify" viewBox="0 0 224.87999 225" height="300" preserveAspectRatio="xMidYMid meet" version="1.0"><path fill="#6266F1" d="M 212.707031 112.5 C 212.707031 168.308594 167.46875 213.546875 111.660156 213.546875 C 55.851562 213.546875 10.613281 168.308594 10.613281 112.5 C 10.613281 56.691406 55.851562 11.453125 111.660156 11.453125 C 167.46875 11.453125 212.707031 56.691406 212.707031 112.5 Z M 212.707031 112.5 " fill-opacity="1" fill-rule="nonzero"></path><path fill="#FFFFFF" d="M 90.917969 132.328125 C 92.492188 146.515625 102.894531 148.882812 112.191406 148.882812 C 123.695312 148.882812 131.417969 140.054688 131.417969 127.917969 C 131.417969 117.511719 124.640625 109.632812 115.660156 109.632812 C 113.296875 109.632812 111.878906 109.945312 109.988281 111.050781 C 103.054688 115.304688 95.960938 109.945312 95.960938 103.640625 C 95.960938 101.433594 96.90625 99.226562 98.957031 97.175781 C 98.957031 97.175781 119.601562 78.105469 119.601562 78.105469 C 119.601562 78.105469 85.246094 78.105469 85.246094 78.105469 C 79.414062 78.105469 76.734375 74.164062 76.734375 70.378906 C 76.734375 66.4375 79.414062 62.5 85.246094 62.5 C 85.246094 62.5 137.878906 62.5 137.878906 62.5 C 143.238281 62.5 147.652344 66.28125 147.652344 70.851562 C 147.652344 72.585938 145.917969 75.582031 143.867188 77.632812 C 137.09375 83.777344 129.84375 90.085938 122.75 96.230469 C 140.242188 97.808594 149.226562 112.46875 149.226562 127.757812 C 149.226562 149.355469 134.414062 164.488281 112.351562 164.488281 C 92.96875 164.488281 76.105469 156.761719 73.582031 134.535156 C 73.742188 129.335938 78.3125 125.550781 82.566406 125.550781 C 86.507812 125.550781 90.761719 128.074219 90.917969 132.328125 Z M 90.917969 132.328125 " fill-opacity="1" fill-rule="nonzero"></path></svg>

Before

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 256 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 327 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 266 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 102 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 280 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 299 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 208 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 272 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 226 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 182 KiB

View File

@ -3,139 +3,165 @@
Read the documentation to get started: https://tailwindui.com/documentation
--><!-- This example requires Tailwind CSS v1.4.0+ -->
{%- set section = get_section(path="header/_index.md") %}
{% set header_items = section.content | safe | split(pat="<li>") %}
<!-- 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-black fixed w-screen max-w-full ' ~ header_class}}">
<div class="relative z-50 shadow">
<div class="my-4 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="lg:w-20 h-auto sm:w-10" src="{{logo_path}}" alt="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.extra.menu %} {% continue %} {% endif %}
<a href="{{page.permalink}}" class="text-lg leading-6 text-white focus:outline-none focus:text-white 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-white 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 %}
<!-- Dark/Light mode toggle button -->
<button id="theme-toggle" aria-label="Toggle dark mode" class="ml-4 p-2 rounded focus:outline-none border border-white bg-gray-800 text-yellow-300 hover:bg-gray-700 transition duration-150 ease-in-out">
<span id="theme-toggle-icon">🌙</span>
</button>
</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 inset-x-0 transition transform origin-top-right lg:hidden">
<header id="header-container">
<div class="z-10 bg-black fixed w-screen">
<div class="relative z-50 shadow">
<div class="my-4 mx-auto flex z-50 shadow justify-between items-center pl-6 pr-2 md:pl-0 md:pr-0 lg:py-1 sm:px-8 md:px-12 py-2 lg:px-28 lg:justify-start lg:space-x-20">
<div>
<div class="shadow-xs h-screen bg-white divide-y-2 divide-gray-50">
<div class="pt-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 %}
{% if page.extra.menu %} {% continue %} {% endif %}
<a href="{{page.permalink}}" class="text-lg px-8 py-3 leading-6 font-normal text-white hover:text-white focus:outline-none focus:text-white 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-white group inline-flex space-x-2 text-lg leading-6 font-normal hover:text-white focus:outline-none focus:text-white 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>
{% endfor %}
<!-- Dark/Light mode toggle button for mobile -->
<button id="theme-toggle-mobile" aria-label="Toggle dark mode" class="mt-4 p-2 rounded focus:outline-none border border-white bg-gray-800 text-yellow-300 hover:bg-gray-700 transition duration-150 ease-in-out self-center">
<span id="theme-toggle-icon-mobile">🌙</span>
</button>
</nav>
</div>
<a href="/" class="flex">
<img class="w-24 h-auto sm:w-15" src="{{section.extra.logoPath}}" alt="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-50 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-50 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 items-center">
{% 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") %}
<a href="{{link_path[1]}}" target="_blank" class="text-md leading-6 font-medium text-white focus:outline-none focus:text-white transition ease-in-out duration-150 mt-0">
{{link_label}}
</a>
{% else %}
<a href="{{link_path[1]}}" class="text-md leading-6 font-medium text-white focus:outline-none focus:text-white 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-white 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>
<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 %}
<!-- Dark/Light mode toggle button -->
<button id="theme-toggle" aria-label="Toggle dark mode" class="ml-4 p-2 rounded focus:outline-none border border-white bg-gray-800 text-yellow-300 hover:bg-gray-700 transition duration-150 ease-in-out">
<span id="theme-toggle-icon">🌙</span>
</button>
</nav>
</div>
</div>
</header>
</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-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-black">
<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">
{{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-16 z-20 top-16 right-0 inset-x-0 transition transform origin-top-right lg:hidden">
<div>
<div class="shadow-xs h-screen bg-custom-dark-blue divide-y-2 divide-gray-500">
<div class="pb-6 px-6 lg:px-20 lg:space-y-6 max-h-screen overflow-y-auto">
<nav class="flex flex-col justify-around pb-12 pt-4">
{% 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") %}
<a href="{{link_path[1]}}" target="_blank" class="text-lg px-8 py-3 leading-6 font-normal text-white hover:text-white focus:outline-none focus:text-white transition ease-in-out duration-150">
{{link_label}}
</a>
{% else %}
<a href="{{link_path[1]}}" class="text-lg px-8 py-3 leading-6 font-normal text-white hover:text-white focus:outline-none focus:text-white transition ease-in-out duration-150">
{{link_label}}
</a>
{% endif %}
{% 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-white group inline-flex space-x-2 text-lg leading-6 font-normal hover:text-white focus:outline-none focus:text-white 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>
{% 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">
{{ header_arr[1] | safe }}
</div>
{% endif %}
{% endif %}
{% endfor %}
</nav>
</div>
</div>
</div>
</div>
</header>
<style>
#header-container .bg-custom-dark-blue {
background-color: #010a2d;
}
#hamburger .bg-custom-dark-blue {
background-color: #010a2d;
}
.bg-black {
color: #010a2d;
}
</style>

View File

@ -1,167 +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+ -->
{%- 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-black fixed w-screen">
<div class="relative z-50 shadow">
<div class="my-4 mx-auto flex z-50 shadow justify-between items-center pl-6 pr-2 md:pl-0 md:pr-0 lg:py-1 sm:px-8 md:px-12 py-2 lg:px-28 lg:justify-start lg:space-x-20">
<div>
<a href="/" class="flex">
<img class="w-24 h-auto sm:w-15" src="{{section.extra.logoPath}}" alt="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-50 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-50 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 items-center">
{% 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") %}
<a href="{{link_path[1]}}" target="_blank" class="text-md leading-6 font-medium text-white focus:outline-none focus:text-white transition ease-in-out duration-150 mt-0">
{{link_label}}
</a>
{% else %}
<a href="{{link_path[1]}}" class="text-md leading-6 font-medium text-white focus:outline-none focus:text-white 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-white 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>
<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 %}
<!-- Dark/Light mode toggle button -->
<button id="theme-toggle" aria-label="Toggle dark mode" class="ml-4 p-2 rounded focus:outline-none border border-white bg-gray-800 text-yellow-300 hover:bg-gray-700 transition duration-150 ease-in-out">
<span id="theme-toggle-icon">🌙</span>
</button>
</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-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-black">
<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">
{{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-16 z-20 top-16 right-0 inset-x-0 transition transform origin-top-right lg:hidden">
<div>
<div class="shadow-xs h-screen bg-custom-dark-blue divide-y-2 divide-gray-500">
<div class="pb-6 px-6 lg:px-20 lg:space-y-6 max-h-screen overflow-y-auto">
<nav class="flex flex-col justify-around pb-12 pt-4">
{% 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") %}
<a href="{{link_path[1]}}" target="_blank" class="text-lg px-8 py-3 leading-6 font-normal text-white hover:text-white focus:outline-none focus:text-white transition ease-in-out duration-150">
{{link_label}}
</a>
{% else %}
<a href="{{link_path[1]}}" class="text-lg px-8 py-3 leading-6 font-normal text-white hover:text-white focus:outline-none focus:text-white transition ease-in-out duration-150">
{{link_label}}
</a>
{% endif %}
{% 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-white group inline-flex space-x-2 text-lg leading-6 font-normal hover:text-white focus:outline-none focus:text-white 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>
{% 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">
{{ header_arr[1] | safe }}
</div>
{% endif %}
{% endif %}
{% endfor %}
</nav>
</div>
</div>
</div>
</div>
</header>
<style>
#header-container .bg-custom-dark-blue {
background-color: #010a2d;
}
#hamburger .bg-custom-dark-blue {
background-color: #010a2d;
}
.bg-black {
color: #010a2d;
}
</style>

View File

@ -1,65 +0,0 @@
<!-- admonition shortcode for adding admonition in md-->
{% set classes = "" %}
{% set first_line = body | split(pat="\n") | first %}
{% set parsed_first_line = first_line | split(pat=" ") %}
{% set admonition = parsed_first_line | first %}
{% set style = "" %}
{% set content = body | split(pat="\n") | slice(start=2) | join(sep="\n") %}
<!-- sets admonition type depending on qualifiers and modifiers
hides content if doesn't adhere to admonition formatting -->
{% if admonition == "!!!" %}
{% set classes = "admonition" %}
{% elif admonition == "???" %}
{% set style = "collapsible closed" %}
{% set classes = "admonition" %}
{% elif admonition == "???+" %}
{% set style = "collapsible open" %}
{% set classes = "admonition" %}
{% else %}
{% set classes = "hidden" %}
{% endif %}
{% if "inline end" in first_line %}
{% set classes = classes ~ " inline end" %}
{% set parsed_first_line = parsed_first_line | slice(end=-2)%}
{% elif "inline" in first_line %}
{% set classes = classes ~ " inline" %}
{% set parsed_first_line = parsed_first_line | slice(end=-1)%}
{% endif %}
{% if classes != "hidden"%}
{% if parsed_first_line[1] %}
{% set classes = classes ~ " " ~ parsed_first_line[1] %}
{% endif %}
{% if parsed_first_line[2] %}
{% if not parsed_first_line[2] == '""' %}
{% set title = parsed_first_line | slice(start=2) | join(sep=" ") %}
{% endif %}
{% else %}
{% if parsed_first_line[1] %}
{% set title = parsed_first_line[1] | title %}
{% endif %}
{% endif %}
{% endif %}
{% if "collapsible" in style %}
<details class="{{classes}}"
{% if "open" in style %} {{ "open='open'" }} {% endif %}>
{% if title %}
<summary class="admonition-title">{{ title | trim_start_matches(pat='"') | trim_end_matches(pat='"') }}</summary>
<p>{{ content }}</p>
{% endif %}
</details>
{% else %}
<div class="{{classes}}">
{% if title %}
<div class="admonition-title">{{ title | trim_start_matches(pat='"') | trim_end_matches(pat='"') }}</div>
{% endif %}
<p>{{ content }}</p>
</div>
{% endif %}