marcel
/
congo
mirror of https://github.com/jpanther/congo.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

💫 Add transitions to author/article nav links

pull/361/head
James Panther 2022-11-10 12:36:05 +11:00
parent 8a1dbe4777
commit 023678f628
No known key found for this signature in database
GPG Key ID: D36F789E45745D17
4 changed files with 34 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -17,6 +17,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
- External links in article content will now open in a new browser tab ([#312](https://github.com/jpanther/congo/pull/312))
- Independent control over the display of taxonomy listings on article and list pages ([#326](https://github.com/jpanther/congo/pull/326))
- Button shortcode now supports an optional `download` parameter to instruct browsers to directly download resources rather than navigate to a URL ([#349](https://github.com/jpanther/congo/pull/349))
- Minor style and layout improvements
### Changed

38
assets/css/compiled/main.css
View File

@ -1807,12 +1807,12 @@ body:has(#menu-controller:checked) {
margin-top: -1rem;
}
.mr-3 {
margin-right: 0.75rem;
.mr-2 {
margin-right: 0.5rem;
}
.ml-3 {
margin-left: 0.75rem;
.ml-2 {
margin-left: 0.5rem;
}
.mt-\[0\.1rem\] {
@ -1831,10 +1831,6 @@ body:has(#menu-controller:checked) {
margin-bottom: 0.25rem;
}
.mr-2 {
margin-right: 0.5rem;
}
.mb-2 {
margin-bottom: 0.5rem;
}
@ -1843,10 +1839,6 @@ body:has(#menu-controller:checked) {
margin-bottom: -0.25rem;
}
.ml-2 {
margin-left: 0.5rem;
}
.\!mb-9 {
margin-bottom: 2.25rem !important;
}
@ -2447,6 +2439,12 @@ body:has(#menu-controller:checked) {
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition-transform {
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-opacity {
transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@ -2457,6 +2455,12 @@ body:has(#menu-controller:checked) {
margin-top: 2rem;
}
.hover\:scale-125:hover {
--tw-scale-x: 1.25;
--tw-scale-y: 1.25;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:border-primary-300:hover {
--tw-border-opacity: 1;
border-color: rgba(var(--color-primary-300), var(--tw-border-opacity));
@ -2540,6 +2544,16 @@ body:has(#menu-controller:checked) {
outline-color: transparent;
}
.group:hover .group-hover\:-translate-x-\[2px\] {
--tw-translate-x: -2px;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:translate-x-\[2px\] {
--tw-translate-x: 2px;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:text-primary-600 {
--tw-text-opacity: 1;
color: rgba(var(--color-primary-600), var(--tw-text-opacity));

12
layouts/partials/article-pagination.html
View File

@ -11,13 +11,13 @@
<div class="flex justify-between pt-3">
<span>
{{ if $prev }}
<a class="flex group" href="{{ $prev.RelPermalink }}">
<a class="group flex" href="{{ $prev.RelPermalink }}">
<span
class="mr-3 text-neutral-700 group-hover:text-primary-600 ltr:inline rtl:hidden dark:text-neutral dark:group-hover:text-primary-400"
class="mr-2 text-neutral-700 transition-transform group-hover:-translate-x-[2px] group-hover:text-primary-600 ltr:inline rtl:hidden dark:text-neutral dark:group-hover:text-primary-400"
>&larr;</span
>
<span
class="ml-3 text-neutral-700 group-hover:text-primary-600 ltr:hidden rtl:inline dark:text-neutral dark:group-hover:text-primary-400"
class="ml-2 text-neutral-700 transition-transform group-hover:translate-x-[2px] group-hover:text-primary-600 ltr:hidden rtl:inline dark:text-neutral dark:group-hover:text-primary-400"
>&rarr;</span
>
<span class="flex flex-col">
@ -36,7 +36,7 @@
</span>
<span>
{{ if $next }}
<a class="flex text-right group" href="{{ $next.RelPermalink }}">
<a class="group flex text-right" href="{{ $next.RelPermalink }}">
<span class="flex flex-col">
<span
class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500"
@ -49,11 +49,11 @@
</span>
</span>
<span
class="ml-3 text-neutral-700 group-hover:text-primary-600 ltr:inline rtl:hidden dark:text-neutral dark:group-hover:text-primary-400"
class="ml-2 text-neutral-700 transition-transform group-hover:translate-x-[2px] group-hover:text-primary-600 ltr:inline rtl:hidden dark:text-neutral dark:group-hover:text-primary-400"
>&rarr;</span
>
<span
class="mr-3 text-neutral-700 group-hover:text-primary-600 ltr:hidden rtl:inline dark:text-neutral dark:group-hover:text-primary-400"
class="mr-2 text-neutral-700 transition-transform group-hover:-translate-x-[2px] group-hover:text-primary-600 ltr:hidden rtl:inline dark:text-neutral dark:group-hover:text-primary-400"
>&larr;</span
>
</a>

2
layouts/partials/author-links.html
View File

@ -3,7 +3,7 @@
{{ range $links := . }}
{{ range $name, $url := $links }}
<a
class="px-1 hover:text-primary-700 dark:hover:text-primary-400"
class="px-1 transition-transform hover:scale-125 hover:text-primary-700 dark:hover:text-primary-400"
href="{{ $url }}"
target="_blank"
aria-label="{{ $name | title }}"