daudix/duckquill
1
2
Fork 0
Code Issues Pull requests Releases Activity

feat: Improved tags; get rid of bootstrap icons and scanlines
All checks were successful
ci/woodpecker/manual/woodpecker Pipeline was successful
Details

Browse source 
- Tags now use horizontal unordered list and have dope hover effect (shoutout to https://libreivan.com)
- Get rid of Bootstrap Icons and Scanlines scss files, the former added extra ~90kb to the stylesheet which I think is bloat, one can use emojis for this, and the scanlines were replaced by much simpler code from https://aroace.space
- Replace fg09 with fg10; it just makes more sense
- Simplify anchor styling
- Update woodpecker.yml to work with Woodpecker 2.0
This commit is contained in:
David Lapshin 2023-11-26 05:00:38 +03:00
parent 9202b7fe92
commit 2e70914d51
16 changed files with 114 additions and 2314 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
.woodpecker.yml
View file

@ -1,18 +1,5 @@
clone:
git:
image: fish
commands:
- cd ~/.exoci
- if test -d duckquill
- cd duckquill
- git pull
- else
- git clone https://git.exozy.me/daudix/duckquill.git
- end
pipeline:
steps:
build:
image: fish
commands:
- cd ~/.exoci/duckquill
- zola build --output-dir /srv/http/pages/duckquill --force

5
README.md
View file

@ -25,9 +25,6 @@ The main repo is https://git.exozy.me/daudix/duckquill, but since only exozy.me
- [Jakub Steiner](https://jimmac.eu) for the [OS Component Website](https://jimmac.github.io/os-component-website), on top of which this whole thing is built
- [Cassidy James](https://cassidyjames.com) for the [Mastodon-powered Comments](https://cassidyjames.com/blog/fediverse-blog-comments-mastodon)
- [Mehdi Merah](https://mehdi.cc) for the [CSS Scanlines](https://codepen.io/meduzen/pen/zxbwRV)
- [Bootstrap team](https://getbootstrap.com/docs/5.3/about/team/) for the [Bootstrap Icons](https://icons.getbootstrap.com)
- [Adobe Fonts](https://github.com/adobe-fonts) for the [Source Code Pro](https://github.com/adobe-fonts/source-code-pro) font
- [Adobe Fonts](https://github.com/adobe-fonts) for the [Source Code Pro](https://adobe-fonts.github.io/source-code-pro/) font
- [Rasmus](https://rsms.me) for the [Inter](https://rsms.me/inter/) font
- dwb, ejm and jgs for the ASCII art
- Everyone who supported me and said good stuff <3

13
config.toml
View file

@ -43,16 +43,13 @@ source_url = "https://git.exozy.me/daudix/duckquill"
# ]
[extra.nav]
# Display RSS/Atom feed button in the nav
# Display Atom/RSS feed button in the nav
show_feed = true
# Show icons next to links in the nav
icons = true
# Links used in the nav; any icon from https://icons.getbootstrap.com
# can be used as the icon. The bi- prefix should not be added.
# Links used in the nav
links = [
{url = "https://git.exozy.me/daudix/duckquill", name = "Repo", icon = "git"},
{url = "/demo", name = "Demo", icon = "car-front-fill"},
{url = "/blog", name = "Blog", icon = "journal-bookmark-fill"},
{url = "https://git.exozy.me/daudix/duckquill", name = "Repo"},
{url = "/demo", name = "Demo"},
{url = "/blog", name = "Blog"},
]
[extra.footer]

6
content/_index.md
View file

@ -1,5 +1,4 @@
+++
insert_anchor_links = "right"
+++
{% crt() %}
@ -21,7 +20,7 @@ Edit a bit of metadata and tweak some of the included graphics and have a blog u
- For a very pleasant look, the colors are tinted with the primary color.
- Proper favicon for modern browsers and Apple device icons.
- Mastodon, Lemmy and other social media meta cards for easy sharing. Try [Share Preview](https://apps.gnome.org/SharePreview/) to test.
- Local copy of the amazing [Inter](https://rsms.me/inter/) and [Source Code Pro](https://adobe-fonts.github.io/source-code-pro/) fonts, plus [Bootstrap Icons](https://icons.getbootstrap.com). No slowdowns pulling from external hosting.
- Local copy of the amazing [Inter](https://rsms.me/inter/) and [Source Code Pro](https://adobe-fonts.github.io/source-code-pro/) fonts. No slowdowns pulling from external hosting.
- Mobile friendly, with proper dark variant.
- [Mastodon-powered comments](https://cassidyjames.com/blog/fediverse-blog-comments-mastodon). Comment using any ActivityPub service by replying to Mastodon post.
@ -159,9 +158,6 @@ The main repo is [git.exozy.me/daudix/duckquill](https://git.exozy.me/daudix/duc
- [Jakub Steiner](https://jimmac.eu) for the [OS Component Website](https://jimmac.github.io/os-component-website), on top of which this whole thing is built
- [Cassidy James](https://cassidyjames.com) for the [Mastodon-powered Comments](https://cassidyjames.com/blog/fediverse-blog-comments-mastodon)
- [Mehdi Merah](https://mehdi.cc) for the [CSS Scanlines](https://codepen.io/meduzen/pen/zxbwRV)
- [Bootstrap team](https://getbootstrap.com/docs/5.3/about/team/) for the [Bootstrap Icons](https://icons.getbootstrap.com)
- [Adobe Fonts](https://github.com/adobe-fonts) for the [Source Code Pro](https://adobe-fonts.github.io/source-code-pro/) font
- [Rasmus](https://rsms.me) for the [Inter](https://rsms.me/inter/) font
- dwb, ejm and jgs for the ASCII art
- Everyone who supported me and said good stuff <3

2090
sass/_bootstrap-icons.scss
View file

File diff suppressed because it is too large Load diff

1
sass/_gnome-hig.scss
View file

@ -1,3 +1,4 @@
/* GNOME HIG Colors */
:root {
--blue1: rgb(153, 193, 241);
--blue2: rgb(98, 160, 234);

99
sass/_main.scss
View file

@ -82,17 +82,13 @@ h6 {
line-height: 1.25;
.zola-anchor {
color: inherit;
.bi {
display: none;
visibility: hidden;
color: var(--fg50);
}
display: none;
visibility: hidden;
}
&:hover .zola-anchor .bi {
&:hover .zola-anchor {
display: inline-block;
text-decoration: none;
visibility: visible;
}
}
@ -138,10 +134,9 @@ a {
cursor: pointer;
font-weight: 600;
text-decoration: none;
text-decoration: underline;
&:hover {
text-decoration: underline wavy;
text-decoration: underline;
}
}
@ -255,18 +250,19 @@ pre {
}
kbd {
background-color: var(--fg05);
border-radius: var(--rounded-corner-small);
box-shadow: inset 0 -2px 0 var(--fg10), 0 -1px 0 var(--fg10);
cursor: pointer;
display: inline-block;
font-size: 0.8rem;
line-height: normal;
padding: 2px 6px;
border-radius: var(--rounded-corner-small);
background-color: var(--fg05);
box-shadow: inset 0 -2px 0 var(--fg09), 0 -1px 0 var(--fg09);
cursor: pointer;
// small nice thingy, keys can be pressed!
&:active {
background-color: var(--fg09);
box-shadow: inset 0 1px 0 var(--fg09);
background-color: var(--fg10);
box-shadow: inset 0 1px 0 var(--fg10);
transform: translateY(2px);
}
}
@ -401,11 +397,11 @@ img {
background-color: transparent;
color: var(--fg50);
transition: var(--transition);
text-decoration: none;
&:hover {
background-color: var(--fg05);
color: var(--primary-color);
text-decoration: none;
}
}
@ -474,12 +470,11 @@ img {
display: inline-block;
font-size: 0.9rem;
padding: 0.4rem 1rem;
text-decoration: none;
transition: var(--transition);
}
.inline-button:hover {
background-color: var(--fg09);
background-color: var(--fg10);
text-decoration: none;
}
@ -491,18 +486,38 @@ img {
background: var(--crt-bg);
pre {
text-shadow: var(--primary-color) 0 0 12px;
color: var(--primary-color);
padding: 1rem 1rem;
text-shadow: var(--primary-color-alpha) 0 0 4px, var(--primary-color) 0 0 12px;
// unset some <pre> stuff
margin: unset;
background-color: unset;
box-shadow: unset;
margin: unset;
}
}
a {
text-decoration: underline;
}
.scanlines {
position: relative;
overflow: hidden;
}
.scanlines::after {
display: block;
pointer-events: none;
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
background: repeating-linear-gradient(
0deg,
rgba(0, 0, 0, 0.25),
rgba(0, 0, 0, 0.25) 1px,
transparent 3px,
transparent 4px
);
}
.cursor {
@ -566,17 +581,43 @@ img {
border: none;
}
.pill {
background-color: var(--fg05);
.tags {
list-style: none;
padding: 0;
display: inline-block;
li {
display: inline-block;
margin: 0 0.2rem 0.4rem 0;
}
}
.tag {
border-radius: 9999px;
color: var(--fg-color);
padding: 0.25rem 0.75rem;
text-decoration: none;
transition: var(--transition);
background-color: var(--fg05);
&:hover {
background-color: var(--fg09);
color: var(--primary-color);
color: rgb(255, 255, 255);
background-color: var(--purple3);
background-image: radial-gradient(at 0 0, var(--blue3) 0, transparent 50%),
radial-gradient(at 100% 100%, var(--red2) 0, transparent 50%);
text-decoration: none;
}
&::before {
content: "#";
}
@media (prefers-color-scheme: dark) {
&:hover {
color: rgba(0, 0, 0, 0.8);
background-color: var(--purple2);
background-image: radial-gradient(at 0 0, var(--blue2) 0, transparent 50%),
radial-gradient(at 100% 100%, var(--red1) 0, transparent 50%);
text-decoration: none;
}
}
}

107
sass/_scanlines.scss
View file

@ -1,107 +0,0 @@
/*! scanlines.scss | MIT License | https://codepen.io/meduzen/pen/zxbwRV */
// REGULAR SCANLINES SETTINGS
// width of 1 scanline (min.: 1px)
$scan-width: 2px;
// emulates a damage-your-eyes bad pre-2000 CRT screen ♥ (true, false)
$scan-crt: true;
// frames-per-second (should be > 1), only applies if $scan-crt: true;
$scan-fps: 60;
// scanline-color (rgba)
$scan-color: rgba(black, 0.2);
// set z-index on 8, like in ♥ 8-bits ♥, or…
// set z-index on 2147483648 or more to enable scanlines on Chrome fullscreen (doesn't work in Firefox or IE);
// $scan-z-index: 2147483648;
// MOVING SCANLINE SETTINGS
// moving scanline (true, false)
$scan-moving-line: true;
// opacity of the moving scanline
$scan-opacity: 0.75;
// MIXINS
// apply CRT animation: @include scan-crt($scan-crt);
@mixin scan-crt($scan-crt) {
@if $scan-crt == true {
animation: scanlines 1s steps($scan-fps) infinite;
} @else {
animation: none;
}
@media (prefers-reduced-motion) {
animation: none;
}
}
// apply CRT animation: @include scan-crt($scan-crt);
@mixin scan-moving($scan-moving-line) {
@if $scan-moving-line == true {
animation: scanline 6s linear infinite;
} @else {
animation: none;
}
@media (prefers-reduced-motion) {
animation: none;
}
}
// CSS .scanlines CLASS
.scanlines {
position: relative;
overflow: hidden; // only to animate the unique scanline
&:before,
&:after {
display: block;
pointer-events: none;
content: "";
position: absolute;
}
// unique scanline travelling on the screen
&:before {
// position: absolute;
// bottom: 100%;
width: 100%;
height: $scan-width * 1;
// z-index: $scan-z-index + 1;
background: $scan-color;
opacity: $scan-opacity;
// animation: scanline 6s linear infinite;
@include scan-moving($scan-moving-line);
}
// the scanlines, so!
&:after {
top: 0;
right: 0;
bottom: 0;
left: 0;
// z-index: $scan-z-index;
background: linear-gradient(to bottom, transparent 50%, $scan-color 51%);
background-size: 100% $scan-width * 2;
@include scan-crt($scan-crt);
}
}
// ANIMATE UNIQUE SCANLINE
@keyframes scanline {
0% {
transform: translate3d(0, 200000%, 0);
// bottom: 0%; // to have a continuous scanline move, use this line (here in 0% step) instead of transform and write, in &:before, { position: absolute; bottom: 100%; }
}
}
@keyframes scanlines {
0% {
background-position: 0 50%;
// bottom: 0%; // to have a continuous scanline move, use this line (here in 0% step) instead of transform and write, in &:before, { position: absolute; bottom: 100%; }
}
}

4
sass/_variables.scss
View file

@ -32,7 +32,7 @@ $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
// CUSTOM COLOR PALETTE
--fg05: rgba(0, 0, 0, 0.05);
--fg09: rgba(0, 0, 0, 0.09);
--fg10: rgba(0, 0, 0, 0.1);
--fg50: rgba(0, 0, 0, 0.5);
--nav-bg: #{$nav-bg-l};
@ -70,7 +70,7 @@ $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
// CUSTOM COLOR PALETTE
--fg05: rgba(255, 255, 255, 0.05);
--fg09: rgba(255, 255, 255, 0.09);
--fg10: rgba(255, 255, 255, 0.1);
--fg50: rgba(255, 255, 255, 0.5);
--nav-bg: #{$nav-bg-d};

3
sass/style.scss
View file

@ -9,14 +9,11 @@
*/
@use "normalize";
@use "variables";
@use "gnome-hig";
@use "fonts";
@use "main";
@use "comments";
@use "scanlines";
@use "bootstrap-icons";
@import url("syntax-theme-dark.css") (prefers-color-scheme: dark);
@import url("syntax-theme-light.css") (prefers-color-scheme: light);

1
templates/anchor-link.html
View file

@ -1 +0,0 @@
<a class="zola-anchor" href="#{{ id }}" aria-label="Anchor link for: {{ id }}"><i class="bi bi-link-45deg"></i></a>

14
templates/blog.html
View file

@ -8,16 +8,16 @@
<time datetime='{{ page.date | date(format='%+') }}' pubdate>
{{- page.date | date(format=config.extra.date_format) -}}
</time>
{%- if page.taxonomies %}
{%- for name, taxon in page.taxonomies %}
•
{%- for item in taxon %}
<a class="pill" href="{{ get_taxonomy_url(kind=name, name=item) }}">
<i class="bi bi-tag-fill"></i>
{{ item }}
</a>&nbsp;
<ul class="tags">
<span>•&nbsp;</span>
{%-for item in taxon %}
<li>
<a class="tag" href="{{ get_taxonomy_url(kind=name, name=item) }}">{{ item }}</a>
</li>
{%- endfor %}
</ul>
{%- endfor %}
{%- endif %}
</small>

11
templates/blog_list.html
View file

@ -26,13 +26,14 @@
</time>
{%- if page.taxonomies %}
{%- for name, taxon in page.taxonomies %}
•
<ul class="tags">
<span>•&nbsp;</span>
{%-for item in taxon %}
<a class="pill" href="{{ get_taxonomy_url(kind=name, name=item) }}">
<i class="bi bi-tag-fill"></i>
{{ item }}
</a>&nbsp;
<li>
<a class="tag" href="{{ get_taxonomy_url(kind=name, name=item) }}">{{ item }}</a>
</li>
{%- endfor %}
</ul>
{%- endfor %}
{%- endif %}
</small>

23
templates/includes/nav.html
View file

@ -1,32 +1,15 @@
<nav class="nav">
<div class="nav-container">
<a href="{{ config.base_url }}">
{% if config.extra.nav.icons %}
<i class="bi bi-house-fill"></i>
{% endif %}
{{ config.title }}
</a>
<a href="{{ config.base_url }}">{{ config.title }}</a>
<ul>
{% for link in config.extra.nav.links %}
<li>
<a href="{{ link.url }}">
{% if config.extra.nav.icons %}
{% if link.icon %}
<i class="bi bi-{{ link.icon }}"></i>
{% endif %}
{% endif %}
{{ link.name }}
</a>
<a href="{{ link.url }}">{{ link.name }}</a>
</li>
{% endfor %}
{% if config.extra.nav.show_feed %}
<li>
<a href="{{ config.base_url }}/atom.xml">
{% if config.extra.nav.icons %}
<i class="bi bi-rss-fill"></i>
{% endif %}
Feed
</a>
<a href="{{ config.base_url }}/atom.xml">Feed</a>
</li>
{% endif %}
</ul>

23
templates/taxonomy_list.html
View file

@ -3,17 +3,14 @@
{% block content %}
<h1>Tags</h1>
<small> {{ terms | length }} tags in total </small>
<article>
<br />
<br />
{% for tag in terms %}
<small>
<a class="pill" href="{{ get_taxonomy_url(kind='tags', name=tag.name) }}">
<i class="bi bi-tag-fill"></i>
{{ tag.name }}
</a>
<br />
</small>
{% endfor %}
</article>
<br />
<small>
<ul class="tags">
{% for tag in terms %}
<li>
<a class="tag" href="{{ get_taxonomy_url(kind='tags', name=tag.name) }}">{{ tag.name }}</a>
</li>
{% endfor %}
</ul>
</small>
{% endblock content %}

13
templates/taxonomy_single.html
View file

@ -20,13 +20,14 @@
</time>
{%- if page.taxonomies %}
{%- for name, taxon in page.taxonomies %}
•
{%- for item in taxon %}
<a class="pill" href="{{ get_taxonomy_url(kind=name, name=item) }}">
<i class="bi bi-tag-fill"></i>
{{ item }}
</a>&nbsp;
<ul class="tags">
<span>•&nbsp;</span>
{%-for item in taxon %}
<li>
<a class="tag" href="{{ get_taxonomy_url(kind=name, name=item) }}">{{ item }}</a>
</li>
{%- endfor %}
</ul>
{%- endfor %}
{%- endif %}
</small>