Update: subscribe button dropdown

This commit is contained in:
hyzen
2026-06-05 15:55:20 +05:30
parent b76cab52dd
commit c1b2006efb
76 changed files with 816 additions and 525 deletions

View File

@@ -68,28 +68,28 @@
<a href="/signup/" class="auth-link auth-link--signup">Sign Up</a>
</div>
</div>
{{- $rssURL := "/index.xml" -}} {{- with .OutputFormats.Get "rss" -}} {{-
$rssURL = .RelPermalink -}} {{- end -}}
<!-- Subscribe button: visible on all screen sizes -->
<a
href="{{ $rssURL }}"
class="rss-subscribe__link"
title="Subscribe via RSS"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="10"
height="10"
fill="currentColor"
aria-hidden="true"
>
<path
d="M6.18 15.64a2.18 2.18 0 0 1 2.18 2.18C8.36 19.01 7.38 20 6.18 20C4.98 20 4 19.01 4 17.82a2.18 2.18 0 0 1 2.18-2.18M4 4.44A15.56 15.56 0 0 1 19.56 20h-2.83A12.73 12.73 0 0 0 4 7.27V4.44m0 5.66a9.9 9.9 0 0 1 9.9 9.9h-2.83A7.07 7.07 0 0 0 4 12.93V10.1z"
/>
</svg>
<span>Subscribe</span>
</a>
<!-- Subscribe dropdown -->
<div class="rss-subscribe">
<button class="rss-subscribe__btn" aria-label="Subscribe via RSS" title="Subscribe via RSS">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="10"
height="10"
fill="currentColor"
aria-hidden="true"
>
<path
d="M6.18 15.64a2.18 2.18 0 0 1 2.18 2.18C8.36 19.01 7.38 20 6.18 20C4.98 20 4 19.01 4 17.82a2.18 2.18 0 0 1 2.18-2.18M4 4.44A15.56 15.56 0 0 1 19.56 20h-2.83A12.73 12.73 0 0 0 4 7.27V4.44m0 5.66a9.9 9.9 0 0 1 9.9 9.9h-2.83A7.07 7.07 0 0 0 4 12.93V10.1z"
/>
</svg>
<span>Subscribe</span>
</button>
<div class="rss-subscribe__dropdown">
<button class="rss-subscribe__item" data-rss-url="https://freedoms4.org/index.xml">All updates</button>
<button class="rss-subscribe__item" data-rss-url="https://freedoms4.org/blog/index.xml">Blog posts</button>
</div>
</div>
</div>
</div>
{{ partial "header.html" . }}

View File

@@ -119,12 +119,56 @@
</script>
<script>
(function () {
var check = document.getElementById('mobile-menu-check');
if (!check) return;
var sub = document.querySelector('.rss-subscribe');
if (!sub) return;
var btn = sub.querySelector('.rss-subscribe__btn');
// Toggle dropdown
btn.addEventListener('click', function (e) {
e.stopPropagation();
sub.classList.toggle('is-open');
});
// Close on outside click
document.addEventListener('click', function (e) {
if (!check.checked) return;
var menu = check.closest('.brand__mobile-menu');
if (menu && !menu.contains(e.target)) check.checked = false;
if (!sub.contains(e.target)) sub.classList.remove('is-open');
});
// Copy URL on item click
sub.querySelectorAll('.rss-subscribe__item').forEach(function (item) {
item.addEventListener('click', function (e) {
e.stopPropagation();
var url = item.getAttribute('data-rss-url');
var orig = item.textContent;
function showCopied() {
item.textContent = 'Copied!';
setTimeout(function () {
item.textContent = orig;
sub.classList.remove('is-open');
}, 1200);
}
// Synchronous fallback works on mobile within the click handler
try {
var ta = document.createElement('textarea');
ta.value = url;
ta.style.cssText = 'position:fixed;top:0;left:0;opacity:0;pointer-events:none;';
document.body.appendChild(ta);
ta.focus();
ta.select();
document.execCommand('copy');
document.body.removeChild(ta);
showCopied();
} catch (err) {
// Try async clipboard as last resort
if (navigator.clipboard) {
navigator.clipboard.writeText(url).then(showCopied).catch(function() {
item.textContent = url;
});
}
}
});
});
})();
</script>

View File

@@ -42,8 +42,8 @@
<path d="M21 12.79A9 9 0 1 1 11.21 3a7 7 0 0 0 9.79 9.79z" />
</svg>
</button>
<!-- Desktop: account + subscribe -->
<div class="brand__auth brand__auth--desktop">
<!-- Account button: visible on all screen sizes -->
<div class="brand__auth">
<input type="checkbox" id="auth-dropdown" class="brand__auth-check" />
<label
class="brand__auth-toggle"
@@ -68,63 +68,26 @@
<a href="/signup/" class="auth-link auth-link--signup">Sign Up</a>
</div>
</div>
{{- $rssURL := "/index.xml" -}} {{- with .OutputFormats.Get "rss" -}} {{-
$rssURL = .RelPermalink -}} {{- end -}}
<a
href="{{ $rssURL }}"
class="rss-subscribe__link rss-subscribe__link--desktop"
title="Subscribe via RSS"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="10"
height="10"
fill="currentColor"
aria-hidden="true"
>
<path
d="M6.18 15.64a2.18 2.18 0 0 1 2.18 2.18C8.36 19.01 7.38 20 6.18 20C4.98 20 4 19.01 4 17.82a2.18 2.18 0 0 1 2.18-2.18M4 4.44A15.56 15.56 0 0 1 19.56 20h-2.83A12.73 12.73 0 0 0 4 7.27V4.44m0 5.66a9.9 9.9 0 0 1 9.9 9.9h-2.83A7.07 7.07 0 0 0 4 12.93V10.1z"
/>
</svg>
<span>Subscribe</span>
</a>
<!-- Mobile: combined dropdown -->
<div class="brand__mobile-menu">
<input type="checkbox" id="mobile-menu-check" class="brand__mobile-check" />
<label
class="brand__mobile-toggle"
for="mobile-menu-check"
aria-label="Menu"
>
<!-- Subscribe dropdown -->
<div class="rss-subscribe">
<button class="rss-subscribe__btn" aria-label="Subscribe via RSS" title="Subscribe via RSS">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="17.46"
height="17.46"
width="10"
height="10"
fill="currentColor"
aria-hidden="true"
>
<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />
<path
d="M6.18 15.64a2.18 2.18 0 0 1 2.18 2.18C8.36 19.01 7.38 20 6.18 20C4.98 20 4 19.01 4 17.82a2.18 2.18 0 0 1 2.18-2.18M4 4.44A15.56 15.56 0 0 1 19.56 20h-2.83A12.73 12.73 0 0 0 4 7.27V4.44m0 5.66a9.9 9.9 0 0 1 9.9 9.9h-2.83A7.07 7.07 0 0 0 4 12.93V10.1z"
/>
</svg>
</label>
<div class="brand__mobile-links">
<a href="/login/" class="mobile-link">Login</a>
<a href="/signup/" class="mobile-link">Sign Up</a>
<a href="{{ $rssURL }}" class="mobile-link mobile-link--subscribe">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="12"
height="12"
fill="currentColor"
aria-hidden="true"
>
<path
d="M6.18 15.64a2.18 2.18 0 0 1 2.18 2.18C8.36 19.01 7.38 20 6.18 20C4.98 20 4 19.01 4 17.82a2.18 2.18 0 0 1 2.18-2.18M4 4.44A15.56 15.56 0 0 1 19.56 20h-2.83A12.73 12.73 0 0 0 4 7.27V4.44m0 5.66a9.9 9.9 0 0 1 9.9 9.9h-2.83A7.07 7.07 0 0 0 4 12.93V10.1z"
/>
</svg>
Subscribe
</a>
<span>Subscribe</span>
</button>
<div class="rss-subscribe__dropdown">
<button class="rss-subscribe__item" data-rss-url="https://freedoms4.org/index.xml">All updates</button>
<button class="rss-subscribe__item" data-rss-url="https://freedoms4.org/blog/index.xml">Blog posts</button>
</div>
</div>
</div>

View File

@@ -68,28 +68,28 @@
<a href="/signup/" class="auth-link auth-link--signup">Sign Up</a>
</div>
</div>
{{- $rssURL := "/index.xml" -}} {{- with .OutputFormats.Get "rss" -}} {{-
$rssURL = .RelPermalink -}} {{- end -}}
<!-- Subscribe button: visible on all screen sizes -->
<a
href="{{ $rssURL }}"
class="rss-subscribe__link"
title="Subscribe via RSS"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="10"
height="10"
fill="currentColor"
aria-hidden="true"
>
<path
d="M6.18 15.64a2.18 2.18 0 0 1 2.18 2.18C8.36 19.01 7.38 20 6.18 20C4.98 20 4 19.01 4 17.82a2.18 2.18 0 0 1 2.18-2.18M4 4.44A15.56 15.56 0 0 1 19.56 20h-2.83A12.73 12.73 0 0 0 4 7.27V4.44m0 5.66a9.9 9.9 0 0 1 9.9 9.9h-2.83A7.07 7.07 0 0 0 4 12.93V10.1z"
/>
</svg>
<span>Subscribe</span>
</a>
<!-- Subscribe dropdown -->
<div class="rss-subscribe">
<button class="rss-subscribe__btn" aria-label="Subscribe via RSS" title="Subscribe via RSS">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="10"
height="10"
fill="currentColor"
aria-hidden="true"
>
<path
d="M6.18 15.64a2.18 2.18 0 0 1 2.18 2.18C8.36 19.01 7.38 20 6.18 20C4.98 20 4 19.01 4 17.82a2.18 2.18 0 0 1 2.18-2.18M4 4.44A15.56 15.56 0 0 1 19.56 20h-2.83A12.73 12.73 0 0 0 4 7.27V4.44m0 5.66a9.9 9.9 0 0 1 9.9 9.9h-2.83A7.07 7.07 0 0 0 4 12.93V10.1z"
/>
</svg>
<span>Subscribe</span>
</button>
<div class="rss-subscribe__dropdown">
<button class="rss-subscribe__item" data-rss-url="https://freedoms4.org/index.xml">All updates</button>
<button class="rss-subscribe__item" data-rss-url="https://freedoms4.org/blog/index.xml">Blog posts</button>
</div>
</div>
</div>
</div>
{{ partial "header.html" . }}

View File

@@ -68,28 +68,28 @@
<a href="/signup/" class="auth-link auth-link--signup">Sign Up</a>
</div>
</div>
{{- $rssURL := "/index.xml" -}} {{- with .OutputFormats.Get "rss" -}} {{-
$rssURL = .RelPermalink -}} {{- end -}}
<!-- Subscribe button: visible on all screen sizes -->
<a
href="{{ $rssURL }}"
class="rss-subscribe__link"
title="Subscribe via RSS"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="10"
height="10"
fill="currentColor"
aria-hidden="true"
>
<path
d="M6.18 15.64a2.18 2.18 0 0 1 2.18 2.18C8.36 19.01 7.38 20 6.18 20C4.98 20 4 19.01 4 17.82a2.18 2.18 0 0 1 2.18-2.18M4 4.44A15.56 15.56 0 0 1 19.56 20h-2.83A12.73 12.73 0 0 0 4 7.27V4.44m0 5.66a9.9 9.9 0 0 1 9.9 9.9h-2.83A7.07 7.07 0 0 0 4 12.93V10.1z"
/>
</svg>
<span>Subscribe</span>
</a>
<!-- Subscribe dropdown -->
<div class="rss-subscribe">
<button class="rss-subscribe__btn" aria-label="Subscribe via RSS" title="Subscribe via RSS">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="10"
height="10"
fill="currentColor"
aria-hidden="true"
>
<path
d="M6.18 15.64a2.18 2.18 0 0 1 2.18 2.18C8.36 19.01 7.38 20 6.18 20C4.98 20 4 19.01 4 17.82a2.18 2.18 0 0 1 2.18-2.18M4 4.44A15.56 15.56 0 0 1 19.56 20h-2.83A12.73 12.73 0 0 0 4 7.27V4.44m0 5.66a9.9 9.9 0 0 1 9.9 9.9h-2.83A7.07 7.07 0 0 0 4 12.93V10.1z"
/>
</svg>
<span>Subscribe</span>
</button>
<div class="rss-subscribe__dropdown">
<button class="rss-subscribe__item" data-rss-url="https://freedoms4.org/index.xml">All updates</button>
<button class="rss-subscribe__item" data-rss-url="https://freedoms4.org/blog/index.xml">Blog posts</button>
</div>
</div>
</div>
</div>
{{ partial "header.html" . }}

View File

@@ -68,28 +68,28 @@
<a href="/signup/" class="auth-link auth-link--signup">Sign Up</a>
</div>
</div>
{{- $rssURL := "/index.xml" -}} {{- with .OutputFormats.Get "rss" -}} {{-
$rssURL = .RelPermalink -}} {{- end -}}
<!-- Subscribe button: visible on all screen sizes -->
<a
href="{{ $rssURL }}"
class="rss-subscribe__link"
title="Subscribe via RSS"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="10"
height="10"
fill="currentColor"
aria-hidden="true"
>
<path
d="M6.18 15.64a2.18 2.18 0 0 1 2.18 2.18C8.36 19.01 7.38 20 6.18 20C4.98 20 4 19.01 4 17.82a2.18 2.18 0 0 1 2.18-2.18M4 4.44A15.56 15.56 0 0 1 19.56 20h-2.83A12.73 12.73 0 0 0 4 7.27V4.44m0 5.66a9.9 9.9 0 0 1 9.9 9.9h-2.83A7.07 7.07 0 0 0 4 12.93V10.1z"
/>
</svg>
<span>Subscribe</span>
</a>
<!-- Subscribe dropdown -->
<div class="rss-subscribe">
<button class="rss-subscribe__btn" aria-label="Subscribe via RSS" title="Subscribe via RSS">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="10"
height="10"
fill="currentColor"
aria-hidden="true"
>
<path
d="M6.18 15.64a2.18 2.18 0 0 1 2.18 2.18C8.36 19.01 7.38 20 6.18 20C4.98 20 4 19.01 4 17.82a2.18 2.18 0 0 1 2.18-2.18M4 4.44A15.56 15.56 0 0 1 19.56 20h-2.83A12.73 12.73 0 0 0 4 7.27V4.44m0 5.66a9.9 9.9 0 0 1 9.9 9.9h-2.83A7.07 7.07 0 0 0 4 12.93V10.1z"
/>
</svg>
<span>Subscribe</span>
</button>
<div class="rss-subscribe__dropdown">
<button class="rss-subscribe__item" data-rss-url="https://freedoms4.org/index.xml">All updates</button>
<button class="rss-subscribe__item" data-rss-url="https://freedoms4.org/blog/index.xml">Blog posts</button>
</div>
</div>
</div>
</div>
{{ partial "header.html" . }}

View File

@@ -68,28 +68,28 @@
<a href="/signup/" class="auth-link auth-link--signup">Sign Up</a>
</div>
</div>
{{- $rssURL := "/index.xml" -}} {{- with .OutputFormats.Get "rss" -}} {{-
$rssURL = .RelPermalink -}} {{- end -}}
<!-- Subscribe button: visible on all screen sizes -->
<a
href="{{ $rssURL }}"
class="rss-subscribe__link"
title="Subscribe via RSS"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="10"
height="10"
fill="currentColor"
aria-hidden="true"
>
<path
d="M6.18 15.64a2.18 2.18 0 0 1 2.18 2.18C8.36 19.01 7.38 20 6.18 20C4.98 20 4 19.01 4 17.82a2.18 2.18 0 0 1 2.18-2.18M4 4.44A15.56 15.56 0 0 1 19.56 20h-2.83A12.73 12.73 0 0 0 4 7.27V4.44m0 5.66a9.9 9.9 0 0 1 9.9 9.9h-2.83A7.07 7.07 0 0 0 4 12.93V10.1z"
/>
</svg>
<span>Subscribe</span>
</a>
<!-- Subscribe dropdown -->
<div class="rss-subscribe">
<button class="rss-subscribe__btn" aria-label="Subscribe via RSS" title="Subscribe via RSS">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="10"
height="10"
fill="currentColor"
aria-hidden="true"
>
<path
d="M6.18 15.64a2.18 2.18 0 0 1 2.18 2.18C8.36 19.01 7.38 20 6.18 20C4.98 20 4 19.01 4 17.82a2.18 2.18 0 0 1 2.18-2.18M4 4.44A15.56 15.56 0 0 1 19.56 20h-2.83A12.73 12.73 0 0 0 4 7.27V4.44m0 5.66a9.9 9.9 0 0 1 9.9 9.9h-2.83A7.07 7.07 0 0 0 4 12.93V10.1z"
/>
</svg>
<span>Subscribe</span>
</button>
<div class="rss-subscribe__dropdown">
<button class="rss-subscribe__item" data-rss-url="https://freedoms4.org/index.xml">All updates</button>
<button class="rss-subscribe__item" data-rss-url="https://freedoms4.org/blog/index.xml">Blog posts</button>
</div>
</div>
</div>
</div>
{{ partial "header.html" . }}

View File

@@ -68,28 +68,28 @@
<a href="/signup/" class="auth-link auth-link--signup">Sign Up</a>
</div>
</div>
{{- $rssURL := "/index.xml" -}} {{- with .OutputFormats.Get "rss" -}} {{-
$rssURL = .RelPermalink -}} {{- end -}}
<!-- Subscribe button: visible on all screen sizes -->
<a
href="{{ $rssURL }}"
class="rss-subscribe__link"
title="Subscribe via RSS"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="10"
height="10"
fill="currentColor"
aria-hidden="true"
>
<path
d="M6.18 15.64a2.18 2.18 0 0 1 2.18 2.18C8.36 19.01 7.38 20 6.18 20C4.98 20 4 19.01 4 17.82a2.18 2.18 0 0 1 2.18-2.18M4 4.44A15.56 15.56 0 0 1 19.56 20h-2.83A12.73 12.73 0 0 0 4 7.27V4.44m0 5.66a9.9 9.9 0 0 1 9.9 9.9h-2.83A7.07 7.07 0 0 0 4 12.93V10.1z"
/>
</svg>
<span>Subscribe</span>
</a>
<!-- Subscribe dropdown -->
<div class="rss-subscribe">
<button class="rss-subscribe__btn" aria-label="Subscribe via RSS" title="Subscribe via RSS">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="10"
height="10"
fill="currentColor"
aria-hidden="true"
>
<path
d="M6.18 15.64a2.18 2.18 0 0 1 2.18 2.18C8.36 19.01 7.38 20 6.18 20C4.98 20 4 19.01 4 17.82a2.18 2.18 0 0 1 2.18-2.18M4 4.44A15.56 15.56 0 0 1 19.56 20h-2.83A12.73 12.73 0 0 0 4 7.27V4.44m0 5.66a9.9 9.9 0 0 1 9.9 9.9h-2.83A7.07 7.07 0 0 0 4 12.93V10.1z"
/>
</svg>
<span>Subscribe</span>
</button>
<div class="rss-subscribe__dropdown">
<button class="rss-subscribe__item" data-rss-url="https://freedoms4.org/index.xml">All updates</button>
<button class="rss-subscribe__item" data-rss-url="https://freedoms4.org/blog/index.xml">Blog posts</button>
</div>
</div>
</div>
</div>
{{ partial "header.html" . }}

View File

@@ -68,28 +68,28 @@
<a href="/signup/" class="auth-link auth-link--signup">Sign Up</a>
</div>
</div>
{{- $rssURL := "/index.xml" -}} {{- with .OutputFormats.Get "rss" -}} {{-
$rssURL = .RelPermalink -}} {{- end -}}
<!-- Subscribe button: visible on all screen sizes -->
<a
href="{{ $rssURL }}"
class="rss-subscribe__link"
title="Subscribe via RSS"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="10"
height="10"
fill="currentColor"
aria-hidden="true"
>
<path
d="M6.18 15.64a2.18 2.18 0 0 1 2.18 2.18C8.36 19.01 7.38 20 6.18 20C4.98 20 4 19.01 4 17.82a2.18 2.18 0 0 1 2.18-2.18M4 4.44A15.56 15.56 0 0 1 19.56 20h-2.83A12.73 12.73 0 0 0 4 7.27V4.44m0 5.66a9.9 9.9 0 0 1 9.9 9.9h-2.83A7.07 7.07 0 0 0 4 12.93V10.1z"
/>
</svg>
<span>Subscribe</span>
</a>
<!-- Subscribe dropdown -->
<div class="rss-subscribe">
<button class="rss-subscribe__btn" aria-label="Subscribe via RSS" title="Subscribe via RSS">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="10"
height="10"
fill="currentColor"
aria-hidden="true"
>
<path
d="M6.18 15.64a2.18 2.18 0 0 1 2.18 2.18C8.36 19.01 7.38 20 6.18 20C4.98 20 4 19.01 4 17.82a2.18 2.18 0 0 1 2.18-2.18M4 4.44A15.56 15.56 0 0 1 19.56 20h-2.83A12.73 12.73 0 0 0 4 7.27V4.44m0 5.66a9.9 9.9 0 0 1 9.9 9.9h-2.83A7.07 7.07 0 0 0 4 12.93V10.1z"
/>
</svg>
<span>Subscribe</span>
</button>
<div class="rss-subscribe__dropdown">
<button class="rss-subscribe__item" data-rss-url="https://freedoms4.org/index.xml">All updates</button>
<button class="rss-subscribe__item" data-rss-url="https://freedoms4.org/blog/index.xml">Blog posts</button>
</div>
</div>
</div>
</div>
{{ partial "header.html" . }}