Skip to content

Commit 2d5a268

Browse files
dreulavelledreulavelle
committed
fix: add sponsor button
1 parent 9abaab5 commit 2d5a268

File tree

2 files changed

+165
-2
lines changed

2 files changed

+165
-2
lines changed

‎overrides/partials/header.html‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
<!--
2+
Copyright (c) 2016-2024 Martin Donath <martin.donath@squidfunk.com>
3+
4+
Permission is hereby granted, free of charge, to any person obtaining a copy
5+
of this software and associated documentation files (the "Software"), to
6+
deal in the Software without restriction, including without limitation the
7+
rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
8+
sell copies of the Software, and to permit persons to whom the Software is
9+
furnished to do so, subject to the following conditions:
10+
11+
The above copyright notice and this permission notice shall be included in
12+
all copies or substantial portions of the Software.
13+
14+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16+
FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
17+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
19+
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
20+
IN THE SOFTWARE.
21+
-->
22+
23+
<!-- Determine classes -->
24+
{% set class = "md-header" %}
25+
{% if "navigation.tabs.sticky" in features %}
26+
{% set class = class ~ " md-header--shadow md-header--lifted" %}
27+
{% elif "navigation.tabs" not in features %}
28+
{% set class = class ~ " md-header--shadow" %}
29+
{% endif %}
30+
31+
<!-- Header -->
32+
<header class="{{ class }}" data-md-component="header">
33+
<nav
34+
class="md-header__inner md-grid"
35+
aria-label="{{ lang.t('header') }}"
36+
>
37+
38+
<!-- Link to home -->
39+
<a
40+
href="{{ config.extra.homepage | d(nav.homepage.url, true) | url }}"
41+
title="{{ config.site_name | e }}"
42+
class="md-header__button md-logo"
43+
aria-label="{{ config.site_name }}"
44+
data-md-component="logo"
45+
>
46+
{% include "partials/logo.html" %}
47+
</a>
48+
49+
<!-- Button to open drawer -->
50+
<label class="md-header__button md-icon" for="__drawer">
51+
{% set icon = config.theme.icon.menu or "material/menu" %}
52+
{% include ".icons/" ~ icon ~ ".svg" %}
53+
</label>
54+
55+
<!-- Header title -->
56+
<div class="md-header__title" data-md-component="header-title">
57+
<div class="md-header__ellipsis">
58+
<div class="md-header__topic">
59+
<span class="md-ellipsis">
60+
{{ config.site_name }}
61+
</span>
62+
</div>
63+
<div class="md-header__topic" data-md-component="header-topic">
64+
<span class="md-ellipsis">
65+
{% if page.meta and page.meta.title %}
66+
{{ page.meta.title }}
67+
{% else %}
68+
{{ page.title }}
69+
{% endif %}
70+
</span>
71+
</div>
72+
</div>
73+
</div>
74+
75+
<!-- Color palette toggle -->
76+
{% if config.theme.palette %}
77+
{% if not config.theme.palette is mapping %}
78+
{% include "partials/palette.html" %}
79+
{% endif %}
80+
{% endif %}
81+
82+
<!-- User preference: color palette -->
83+
{% if not config.theme.palette is mapping %}
84+
{% include "partials/javascripts/palette.html" %}
85+
{% endif %}
86+
87+
<!-- Site language selector -->
88+
{% if config.extra.alternate %}
89+
{% include "partials/alternate.html" %}
90+
{% endif %}
91+
92+
<!-- Button to open search modal -->
93+
{% if "material/search" in config.plugins %}
94+
95+
<div class="donate-button">
96+
<a href="https://www.github.com/sponsors/dreulavelle" target="_blank">
97+
<img src="https://img.icons8.com/?size=100&id=91339&format=png&color=000000" alt="Become a Patron" />
98+
<span class="donate-message">Sponsor us on GitHub!</span>
99+
</a>
100+
</div>
101+
102+
<style>
103+
.donate-button {
104+
position: sticky;
105+
}
106+
.donate-button img {
107+
width: 50%; /* Shrink the image */
108+
margin-right: -20px; /* Add spacing between the image and the search bar */
109+
animation: beat-fade 1.3s infinite;
110+
}
111+
.donate-button .donate-message {
112+
display: none;
113+
position: absolute;
114+
right: 100%;
115+
top: 50%;
116+
transform: translateY(-50%);
117+
color: white;
118+
font-weight: bold;
119+
padding: 5px 10px;
120+
border-radius: 5px;
121+
white-space: nowrap;
122+
}
123+
.donate-button:hover .donate-message {
124+
display: block;
125+
animation: slide-in 0.3s forwards;
126+
}
127+
</style>
128+
129+
<label class="md-header__button md-icon" for="__search">
130+
{% set icon = config.theme.icon.search or "material/magnify" %}
131+
{% include ".icons/" ~ icon ~ ".svg" %}
132+
</label>
133+
134+
<!-- Search interface -->
135+
{% include "partials/search.html" %}
136+
{% endif %}
137+
138+
<!-- Repository information -->
139+
{% if config.repo_url %}
140+
<div class="md-header__source">
141+
{% include "partials/source.html" %}
142+
</div>
143+
{% endif %}
144+
</nav>
145+
146+
<!-- Navigation tabs (sticky) -->
147+
{% if "navigation.tabs.sticky" in features %}
148+
{% if "navigation.tabs" in features %}
149+
{% include "partials/tabs.html" %}
150+
{% endif %}
151+
{% endif %}
152+
</header>

‎overrides/stylesheets/extra.css‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,17 @@
99
}
1010
}
1111

12+
@keyframes slide-in {
13+
from {
14+
opacity: 0;
15+
transform: translateX(10px);
16+
}
17+
to {
18+
opacity: 1;
19+
transform: translateX(0);
20+
}
21+
}
22+
1223
/* body {
1324
background-color: #2B2D42;
1425
} */
@@ -21,7 +32,7 @@
2132
.md-header__button.md-logo {
2233
/* color: #2B2D42; */
2334
font-size: 1.125em;
24-
animation: beat-fade 1s infinite;
35+
/* animation: beat-fade 1s infinite; */
2536
}
2637

2738

@@ -80,7 +91,7 @@ h1, h2, h3, h4, h5, h6 {
8091
}
8192

8293
:root {
83-
--md-admonition-icon--riven: url('../images/icon.png');
94+
--md-admonition-icon--riven: url('/wiki/images/icon.png');
8495
}
8596
.md-typeset .admonition.riven,
8697
.md-typeset details.riven {

0 commit comments

Comments
 (0)