icd/casper-modified-ghost-theme
icd/casper-modified-ghost-theme
2
0
Fork 0
Code Issues 3 Pull Requests Projects Releases Wiki Activity

Add support links

Browse Source
This commit is contained in:
Arkadiusz Wieczorek 2024-01-10 14:53:44 +01:00
parent 5a54d65355
commit 56684b90e9
7 changed files with 4921 additions and 4742 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/built/screen.css
View File

File diff suppressed because one or more lines are too long

2
assets/built/screen.css.map
View File

File diff suppressed because one or more lines are too long

160
assets/css/screen.css
View File

@ -23,6 +23,7 @@ production stylesheet in assets/built/screen.css
10. Subscribe Overlay
11. Site Footer
12. Dark Mode
13. Support links
*/
/* 1. Global - Set up the things
@ -498,10 +499,19 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
.social-link {
display: inline-block;
margin: 0;
padding: 10px;
padding-right: 1rem;
opacity: 0.8;
}
.social-link:nth-child(4),
.social-link:nth-child(5) {
padding-right: 2.667rem;
}
.social-link:last-child {
padding-right: 0;
}
.social-link:hover {
opacity: 1;
}
@ -525,7 +535,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
}
.social-link__large svg {
height: 2.75rem;
height: 2.333rem;
margin-left: 0.333rem;
fill: #fff;
}
@ -542,6 +552,14 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
opacity: 1;
}
.social-link__support:hover,
.social-link__support:hover svg,
.social-link__support:hover path {
fill: #b1adfe;
color: #fee7ff;
opacity: 1;
}
.subscribe-button {
display: block;
margin: 0 0 0 10px;
@ -578,6 +596,12 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0.05s;
}
@media (max-width: 670px) {
.site-nav-right {
display: none;
}
}
@media (max-width: 920px) {
.site-home-header .site-nav {
margin-left: -5vw;
@ -593,9 +617,14 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
padding-left: 5vw;
}
.site-nav-right {
.social-link:nth-child(n):not(:last-child) {
display: none;
}
.social-link:last-child {
padding-right: 1rem;
}
}
/* 6. Post Feed
@ -3162,3 +3191,128 @@ Usage (In Ghost editor):
color: color(var(--green) l(+5%) s(-5%));
}
}
/* 13. Support links
/* ---------------------------------------------------------- */
.support-container {
display: flex;
margin-bottom: 2rem;
width: 100%;
position: relative;
left: -.5rem;
top: -1.5rem;
}
.support-container--bottom {
top: 0;
}
.support-container .support-link {
color: #15171a !important;
box-shadow: none;
font-family: sans-serif;
font-size: .667rem;
transition: all 200ms !important;
text-decoration: none !important;
font-weight: 600;
font-size: 1.5rem;
box-sizing: border-box;
padding: 0.333rem 1.3333rem;
align-items: center;
border: 4px solid #fff;
outline: 4px solid #fff;
cursor: pointer;
display: flex;
align-items: center;
text-decoration-line: underline !important;
text-decoration-color: #fee7ff !important;
text-decoration-thickness: 4px !important;
text-underline-offset: 8px !important;
}
.support-container .support-link:hover {
color: #000 !important;
box-shadow: none;
border: 4px solid #fff;
outline: 4px solid #b1adfe;
background: #fee7ff;
border-radius: 8px;
text-decoration-color: transparent !important;
text-underline-offset: 24px !important
}
@media (prefers-color-scheme: dark) {
.support-container .support-link {
color: #fee7ff !important;
border: 4px solid #191b1f;
outline: 4px solid #191b1f;
}
.support-container .support-link:hover {
color: #000;
border: 4px solid #191b1f;
}
#outline {
fill: #191b1f;
transition: fill 0.3s ease;
}
}
@media screen and (max-width: 460px) {
.support-container .support-link {
text-underline-offset: 8px !important
}
.support-container {
top: 0rem;
}
}
#outline {
fill: #fff;
transition: fill 0.3s ease;
}
.support-link:hover #outline {
fill: #b1adfe;
}
.icon--heart {
width: 4rem;
margin-left: 1rem;
animation: heartbeat 2s infinite;
}
.social-link__support .icon--heart {
width: 2.667rem;
}
.social-link__support:hover .icon--heart #outline {
fill: #b1adfe;
}
@keyframes heartbeat {
0%,
100% {
transform: scale(1);
}
25% {
transform: scale(1.1);
}
35% {
transform: scale(1);
}
45% {
transform: scale(1.1);
}
55% {
transform: scale(1);
}
}

17
partials/icons/heart.hbs Normal file
View File

@ -0,0 +1,17 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
viewBox="0 0 24 24"
class="icon--heart"
alt="Wesprzyj Fundację „Internet. Czas działać!”"
>
<path
d="M 2,9.2446448 C 2,14.107544 6.01943,16.698944 8.96173,19.018444 10,19.836944 11,20.607544 12,20.607544 c 1,0 2,-0.7706 3.0383,-1.5891 C 17.9806,16.698944 22,14.107544 22,9.2446448 22,4.3817048 16.4998,0.93300884 12,5.6081748 7.50016,0.93300884 2,4.3817048 2,9.2446448 Z"
fill="#b1adfe"
id="fill"
/>
<path
d="M8.96173 18.9109L9.42605 18.3219L8.96173 18.9109ZM12 5.50063L11.4596 6.02073C11.601 6.16763 11.7961 6.25063 12 6.25063C12.2039 6.25063 12.399 6.16763 12.5404 6.02073L12 5.50063ZM15.0383 18.9109L15.5026 19.4999L15.0383 18.9109ZM9.42605 18.3219C7.91039 17.1271 6.25307 15.9603 4.93829 14.4798C3.64922 13.0282 2.75 11.3345 2.75 9.1371H1.25C1.25 11.8026 2.3605 13.8361 3.81672 15.4758C5.24723 17.0866 7.07077 18.3752 8.49742 19.4999L9.42605 18.3219ZM2.75 9.1371C2.75 6.98623 3.96537 5.18252 5.62436 4.42419C7.23607 3.68748 9.40166 3.88258 11.4596 6.02073L12.5404 4.98053C10.0985 2.44352 7.26409 2.02539 5.00076 3.05996C2.78471 4.07292 1.25 6.42503 1.25 9.1371H2.75ZM8.49742 19.4999C9.00965 19.9037 9.55954 20.3343 10.1168 20.6599C10.6739 20.9854 11.3096 21.25 12 21.25V19.75C11.6904 19.75 11.3261 19.6293 10.8736 19.3648C10.4213 19.1005 9.95208 18.7366 9.42605 18.3219L8.49742 19.4999ZM15.5026 19.4999C16.9292 18.3752 18.7528 17.0866 20.1833 15.4758C21.6395 13.8361 22.75 11.8026 22.75 9.1371H21.25C21.25 11.3345 20.3508 13.0282 19.0617 14.4798C17.7469 15.9603 16.0896 17.1271 14.574 18.3219L15.5026 19.4999ZM22.75 9.1371C22.75 6.42503 21.2153 4.07292 18.9992 3.05996C16.7359 2.02539 13.9015 2.44352 11.4596 4.98053L12.5404 6.02073C14.5983 3.88258 16.7639 3.68748 18.3756 4.42419C20.0346 5.18252 21.25 6.98623 21.25 9.1371H22.75ZM14.574 18.3219C14.0479 18.7366 13.5787 19.1005 13.1264 19.3648C12.6739 19.6293 12.3096 19.75 12 19.75V21.25C12.6904 21.25 13.3261 20.9854 13.8832 20.6599C14.4405 20.3343 14.9903 19.9037 15.5026 19.4999L14.574 18.3219Z"
fill="#15171a"
id="outline"
/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

54
partials/site-nav.hbs
View File

@ -43,54 +43,13 @@
title="Podcast „Internet. Czas działać!” na instancji Castopod"
rel="me"
>{{> "icons/castopod"}}</a>
<!-- {{#if @site.twitter}}
<a
class="social-link social-link-tw"
href="{{twitter_url @site.twitter}}"
title="Profil „Internet. Czas działać!” na Twitterze"
rel="noopener"
>{{> "icons/twitter"}}</a>
{{/if}}
{{#if @site.facebook}}
<a
class="social-link social-link-fb"
href="{{facebook_url @site.facebook}}"
title="Profil „Internet. Czas działać!” na Facebooku"
rel="noopener"
>{{> "icons/facebook"}}</a>
{{/if}}
<a
class="social-link social-link-telegram"
href="https://t.me/internet_czas_dzialac"
title="Kanał „Internet. Czas działać!” na Telegramie"
rel="me"
>{{> "icons/telegram"}}</a>
<a
class="social-link social-link-funkwhale"
href="https://podcast.midline.pl/channels/Midline/"
title="„Internet. Czas działać!” - podcast na naszej instancji Funkwhale'a"
rel="me"
>{{> "icons/funkwhale"}}</a> -->
<!-- <a
class="social-link social-link-spotify"
href="https://open.spotify.com/show/2BSREI0uQcADS8W0RHrkxB"
title="„Internet. Czas działać!” - podcast na Spotify"
rel="me"
>{{> "icons/spotify"}}</a> -->
<a
class="social-link social-link-peertube"
href="https://video.internet-czas-dzialac.pl/video-channels/internet_czas_dzialac/videos"
title="„Internet. Czas działać!” - kanał na Peertube"
rel="me"
>{{> "icons/peertube"}}</a>
<!-- <a
class="social-link social-link-youtube"
href="https://www.youtube.com/c/internetczasdzialac"
title="„Internet. Czas działać!” - kanał na YouTube"
rel="me"
>{{> "icons/youtube"}}</a> -->
<a
class="social-link social-link-liberapay"
href="https://liberapay.com/internet-czas-dzialac"
title="Wesprzyj nas na Liberapay"
@ -101,13 +60,7 @@
href="https://patronite.pl/internet-czas-dzialac"
title="Wesprzyj nas na Patronite"
rel="me"
>{{> "icons/patronite"}}</a>
<!-- <a
class="social-link social-link-feedly"
href="https://feedly.com/i/subscription/feed/{{@site.url}}/rss/"
title="Subskrybuj nas na Feedly"
rel="noopener"
>{{> "icons/feedly"}}</a> -->
>{{> "icons/patronite"}}</a> -->
<a
class="social-link social-link-rss"
href="{{@site.url}}/rss/"
@ -120,6 +73,11 @@
title="Pobierz naszą wtyczkę Rentgen"
rel="noopener"
><span>Rentgen</span> {{> "icons/rentgen"}}</a>
<a
class="social-link social-link__large social-link__support"
href="/wsparcie-fundacji/"
title="Wspieraj Fundację „Internet. Czas działać!”"
><span>Wspieraj ICD</span> {{> "icons/heart"}}</a>
</div>
{{/if}}
</div>

50
post.hbs
View File

@ -171,9 +171,59 @@
{{/if}}
<section class="post-full-content">
<div class="support-container">
<a
href="/wsparcie-fundacji"
class="support-link"
alt="Prosimy o darowiznę na wsparcie pracy Fundacji „Internet. Czas działać!”"
>
<span>Przekaż darowiznę na wsparcie naszej pracy</span>
<svg
viewBox="0 0 24 24"
class="icon--heart"
alt="Wesprzyj Fundację „Internet. Czas działać!”"
>
<path
d="M 2,9.2446448 C 2,14.107544 6.01943,16.698944 8.96173,19.018444 10,19.836944 11,20.607544 12,20.607544 c 1,0 2,-0.7706 3.0383,-1.5891 C 17.9806,16.698944 22,14.107544 22,9.2446448 22,4.3817048 16.4998,0.93300884 12,5.6081748 7.50016,0.93300884 2,4.3817048 2,9.2446448 Z"
fill="#b1adfe"
id="fill"
/>
<path
d="M8.96173 18.9109L9.42605 18.3219L8.96173 18.9109ZM12 5.50063L11.4596 6.02073C11.601 6.16763 11.7961 6.25063 12 6.25063C12.2039 6.25063 12.399 6.16763 12.5404 6.02073L12 5.50063ZM15.0383 18.9109L15.5026 19.4999L15.0383 18.9109ZM9.42605 18.3219C7.91039 17.1271 6.25307 15.9603 4.93829 14.4798C3.64922 13.0282 2.75 11.3345 2.75 9.1371H1.25C1.25 11.8026 2.3605 13.8361 3.81672 15.4758C5.24723 17.0866 7.07077 18.3752 8.49742 19.4999L9.42605 18.3219ZM2.75 9.1371C2.75 6.98623 3.96537 5.18252 5.62436 4.42419C7.23607 3.68748 9.40166 3.88258 11.4596 6.02073L12.5404 4.98053C10.0985 2.44352 7.26409 2.02539 5.00076 3.05996C2.78471 4.07292 1.25 6.42503 1.25 9.1371H2.75ZM8.49742 19.4999C9.00965 19.9037 9.55954 20.3343 10.1168 20.6599C10.6739 20.9854 11.3096 21.25 12 21.25V19.75C11.6904 19.75 11.3261 19.6293 10.8736 19.3648C10.4213 19.1005 9.95208 18.7366 9.42605 18.3219L8.49742 19.4999ZM15.5026 19.4999C16.9292 18.3752 18.7528 17.0866 20.1833 15.4758C21.6395 13.8361 22.75 11.8026 22.75 9.1371H21.25C21.25 11.3345 20.3508 13.0282 19.0617 14.4798C17.7469 15.9603 16.0896 17.1271 14.574 18.3219L15.5026 19.4999ZM22.75 9.1371C22.75 6.42503 21.2153 4.07292 18.9992 3.05996C16.7359 2.02539 13.9015 2.44352 11.4596 4.98053L12.5404 6.02073C14.5983 3.88258 16.7639 3.68748 18.3756 4.42419C20.0346 5.18252 21.25 6.98623 21.25 9.1371H22.75ZM14.574 18.3219C14.0479 18.7366 13.5787 19.1005 13.1264 19.3648C12.6739 19.6293 12.3096 19.75 12 19.75V21.25C12.6904 21.25 13.3261 20.9854 13.8832 20.6599C14.4405 20.3343 14.9903 19.9037 15.5026 19.4999L14.574 18.3219Z"
fill="#15171a"
id="outline"
/>
</svg>
</a>
</div>
<div class="post-content">
{{content}}
</div>
<div class="support-container support-container--bottom">
<a
href="/wsparcie-fundacji"
class="support-link"
alt="Prosimy o darowiznę na wsparcie pracy Fundacji „Internet. Czas działać!”"
>
<span>Przekaż darowiznę na wsparcie naszej pracy</span>
<svg
viewBox="0 0 24 24"
class="icon--heart"
alt="Wesprzyj Fundację „Internet. Czas działać!”"
>
<path
d="M 2,9.2446448 C 2,14.107544 6.01943,16.698944 8.96173,19.018444 10,19.836944 11,20.607544 12,20.607544 c 1,0 2,-0.7706 3.0383,-1.5891 C 17.9806,16.698944 22,14.107544 22,9.2446448 22,4.3817048 16.4998,0.93300884 12,5.6081748 7.50016,0.93300884 2,4.3817048 2,9.2446448 Z"
fill="#b1adfe"
id="fill"
/>
<path
d="M8.96173 18.9109L9.42605 18.3219L8.96173 18.9109ZM12 5.50063L11.4596 6.02073C11.601 6.16763 11.7961 6.25063 12 6.25063C12.2039 6.25063 12.399 6.16763 12.5404 6.02073L12 5.50063ZM15.0383 18.9109L15.5026 19.4999L15.0383 18.9109ZM9.42605 18.3219C7.91039 17.1271 6.25307 15.9603 4.93829 14.4798C3.64922 13.0282 2.75 11.3345 2.75 9.1371H1.25C1.25 11.8026 2.3605 13.8361 3.81672 15.4758C5.24723 17.0866 7.07077 18.3752 8.49742 19.4999L9.42605 18.3219ZM2.75 9.1371C2.75 6.98623 3.96537 5.18252 5.62436 4.42419C7.23607 3.68748 9.40166 3.88258 11.4596 6.02073L12.5404 4.98053C10.0985 2.44352 7.26409 2.02539 5.00076 3.05996C2.78471 4.07292 1.25 6.42503 1.25 9.1371H2.75ZM8.49742 19.4999C9.00965 19.9037 9.55954 20.3343 10.1168 20.6599C10.6739 20.9854 11.3096 21.25 12 21.25V19.75C11.6904 19.75 11.3261 19.6293 10.8736 19.3648C10.4213 19.1005 9.95208 18.7366 9.42605 18.3219L8.49742 19.4999ZM15.5026 19.4999C16.9292 18.3752 18.7528 17.0866 20.1833 15.4758C21.6395 13.8361 22.75 11.8026 22.75 9.1371H21.25C21.25 11.3345 20.3508 13.0282 19.0617 14.4798C17.7469 15.9603 16.0896 17.1271 14.574 18.3219L15.5026 19.4999ZM22.75 9.1371C22.75 6.42503 21.2153 4.07292 18.9992 3.05996C16.7359 2.02539 13.9015 2.44352 11.4596 4.98053L12.5404 6.02073C14.5983 3.88258 16.7639 3.68748 18.3756 4.42419C20.0346 5.18252 21.25 6.98623 21.25 9.1371H22.75ZM14.574 18.3219C14.0479 18.7366 13.5787 19.1005 13.1264 19.3648C12.6739 19.6293 12.3096 19.75 12 19.75V21.25C12.6904 21.25 13.3261 20.9854 13.8832 20.6599C14.4405 20.3343 14.9903 19.9037 15.5026 19.4999L14.574 18.3219Z"
fill="#15171a"
id="outline"
/>
</svg>
</a>
</div>
</section>
{{!-- Email subscribe form at the bottom of the page --}}

9378
yarn.lock
View File

File diff suppressed because it is too large Load Diff