ourworld_web/www_threefold_io
23
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix banner

Browse Source
This commit is contained in:
Ehab Hassan
2025-09-09 12:48:23 +03:00
parent 436c5663c2 f19c4a92d2
commit 2a97868712
4 changed files with 46 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
content/home/index.md
View File

@@ -7,6 +7,9 @@ extra:
imgPath: home/tf.png
---
<!-- section 1 (header) -->
{{ hero_text_center(

15
templates/_default/base.html
View File

@@ -42,11 +42,22 @@
<!-- End Twitter universal website tag code -->
{% include "partials/header.html" %}
<div id="content" class="px-4 lg:px-0 pt-12 mt-4 overflow-hidden">
{% include "partials/banner.html" %}
<div id="content" class="px-4 lg:px-0 pt-12 mt-4 overflow-hidden">
{# Show banner on all pages except /newsroom paths #}
{% set show_banner = true %}
{% if current_path is defined and current_path is starting_with("/newsroom") %}
{% set show_banner = false %}
{% endif %}
{% if show_banner %}
{% include "partials/banner.html" %}
{% endif %}
{% block content %}{% endblock %}
</div>
<div class="px-4 md:px-8 overflow-hidden">
{% include "partials/footer.html" %}
</div>

16
templates/partials/banner.html
View File

@@ -9,14 +9,14 @@
</style>
<div id="banner" class="relative isolate flex items-center gap-x-6 overflow-hidden mt-4 bg-gray-50 px-6 py-2 sm:before:flex-1 dark:bg-gray-800/50 dark:after:pointer-events-none dark:after:absolute dark:after:inset-x-0 dark:after:bottom-0 dark:after:h-px dark:after:bg-white/10" style="background: #E6F5EC; background: radial-gradient(circle, rgba(204, 232, 217, 1) 0%, rgba(172, 193, 232, 1) 100%);">
<p class="text-sm/6 text-gray-900 dark:text-gray-100 blink">
ThreeFold is going commercial! Read our <a href="https://www.threefold.io/newsroom/summer-2025-roundup/" target="_blank" rel="noopener" class="underline font-semibold whitespace-nowrap text-gray-900 hover:text-gray-700 dark:text-white dark:hover:text-gray-300" style="text-decoration: underline;">2025 Summer Round Up</a> <span aria-hidden="true">&rarr;</span>
ThreeFold is going commercial! Read our <a href="/newsroom/summer-2025-roundup/" rel="noopener" class="underline font-semibold whitespace-nowrap text-gray-900 hover:text-gray-700 dark:text-white dark:hover:text-gray-300" style="text-decoration: underline;">2025 Summer Round Up</a> <span aria-hidden="true">&rarr;</span>
</p>
<div class="flex flex-1 justify-end">
<button type="button" onclick="document.getElementById('banner').style.display = 'none';" class="-m-3 p-3 focus-visible:-outline-offset-4" style="border: none; outline: none; box-shadow: none;">
<span class="sr-only">Dismiss</span>
<svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true" class="size-5 text-gray-900 dark:text-gray-100">
<path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" />
</svg>
</button>
<button type="button" onclick="this.closest('#banner').remove()" class="-m-3 p-3 focus-visible:-outline-offset-4" style="border: none; outline: none; box-shadow: none;">
<span class="sr-only">Dismiss</span>
<svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true" class="size-5 text-gray-900 dark:text-gray-100">
<path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" />
</svg>
</button>
</div>
</div>
</div>

22
templates/shortcodes/banner.html Normal file
View File

@@ -0,0 +1,22 @@
<style>
@keyframes blink {
from { opacity: 1; }
to { opacity: 0.8; }
}
.blink {
animation: blink 2s infinite alternate;
}
</style>
<div id="banner" class="relative isolate flex items-center gap-x-6 overflow-hidden mt-4 bg-gray-50 px-6 py-2 sm:before:flex-1 dark:bg-gray-800/50 dark:after:pointer-events-none dark:after:absolute dark:after:inset-x-0 dark:after:bottom-0 dark:after:h-px dark:after:bg-white/10" style="background: #E6F5EC; background: radial-gradient(circle, rgba(204, 232, 217, 1) 0%, rgba(172, 193, 232, 1) 100%);">
<p class="text-sm/6 text-gray-900 dark:text-gray-100 blink">
ThreeFold is going commercial! Read our <a href="/newsroom/summer-2025-roundup/" rel="noopener" class="underline font-semibold whitespace-nowrap text-gray-900 hover:text-gray-700 dark:text-white dark:hover:text-gray-300" style="text-decoration: underline;">2025 Summer Round Up</a> <span aria-hidden="true">&rarr;</span>
</p>
<div class="flex flex-1 justify-end">
<button type="button" onclick="this.closest('#banner').remove()" class="-m-3 p-3 focus-visible:-outline-offset-4" style="border: none; outline: none; box-shadow: none;">
<span class="sr-only">Dismiss</span>
<svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true" class="size-5 text-gray-900 dark:text-gray-100">
<path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" />
</svg>
</button>
</div>
</div>