fix: accessibility issues with footer links, update theme guide

This commit is contained in:
radishzzz 2025-05-17 10:43:40 +01:00
parent bd4db06709
commit 1c374367fd
11 changed files with 22 additions and 22 deletions

View file

@ -22,11 +22,11 @@ const links = socialLinks.map((link) => {
return link return link
}) })
const footerLinkClass = 'highlight-hover footer-highlight-position-fix transition-colors after:bottom-0 hover:c-primary' const footerLinkClass = 'highlight-hover footer-highlight-position-fix py-0.8 transition-colors after:bottom-0.1 hover:c-primary'
--- ---
<footer <footer
class="text-3 leading-4.75 font-navbar lg:text-3.5" class="text-3 leading-0.9em font-navbar lg:text-3.5"
lg="uno-desktop-column bottom-20" lg="uno-desktop-column bottom-20"
> >
<p> <p>
@ -44,7 +44,7 @@ const footerLinkClass = 'highlight-hover footer-highlight-position-fix transitio
Powered by <a class={footerLinkClass} href="https://astro.build/" target="_blank" rel="noopener noreferrer">Astro</a> and <a class={footerLinkClass} href="https://github.com/radishzzz/astro-theme-retypeset" target="_blank" rel="noopener noreferrer">Retypeset</a> Powered by <a class={footerLinkClass} href="https://astro.build/" target="_blank" rel="noopener noreferrer">Astro</a> and <a class={footerLinkClass} href="https://github.com/radishzzz/astro-theme-retypeset" target="_blank" rel="noopener noreferrer">Retypeset</a>
</p> </p>
<p> <p class="py-0.8">
© {year} {author} © {year} {author}
</p> </p>
</footer> </footer>

View file

@ -38,8 +38,8 @@ const navItems = [
aria-label="Site Navigation" aria-label="Site Navigation"
class:list={[ class:list={[
isPost ? 'hidden lg:block' : '', isPost ? 'hidden lg:block' : '',
'mb-10.5 text-3.6 font-semibold leading-8.75 font-navbar', 'mb-10.5 text-3.6 font-semibold leading-2.45em font-navbar',
'lg:(uno-desktop-column text-4 leading-9.72 bottom-50) cjk:tracking-0.02em', 'lg:(uno-desktop-column text-4 bottom-50) cjk:tracking-0.02em',
]} ]}
> >
<ul> <ul>

View file

@ -60,7 +60,7 @@ function getPostPath(post: Post) {
{/* mobile post time */} {/* mobile post time */}
<div <div
class="text-3.5 leading-6.875 font-time lg:hidden" class="py-0.8 text-3.5 font-time lg:hidden"
transition:name={`time-${post.data.abbrlink || post.id}-${lang}`} transition:name={`time-${post.data.abbrlink || post.id}-${lang}`}
data-disable-transition-on-theme data-disable-transition-on-theme
> >
@ -71,7 +71,7 @@ function getPostPath(post: Post) {
</div> </div>
{/* desktop post time */} {/* desktop post time */}
<div class="hidden text-3.65 leading-6.875 font-time lg:(ml-2.5 inline)"> <div class="hidden text-3.65 font-time lg:(ml-2.5 inline)">
<PostDate <PostDate
date={post.data.published} date={post.data.published}
minutes={post.remarkPluginFrontmatter.minutes} minutes={post.remarkPluginFrontmatter.minutes}

View file

@ -234,7 +234,7 @@ const EXCERPT_LENGTHS: Record<ExcerptScene, {
### Open Graph ### Open Graph
Open Graph social image styles. [Open Graph social card](https://orcascan.com/tools/open-graph-validator?url=https%3A%2F%2Fretypeset.radishzz.cc%2Fen%2Fposts%2Ftheme-guide%2F) styles.
```ts ```ts
// src/pages/og/[...image].ts // src/pages/og/[...image].ts
@ -263,7 +263,7 @@ getImageOptions: (_path, page) => ({
### RSS Feed ### RSS Feed
RSS feed page styles. [RSS feed page](https://retypeset.radishzz.cc/en/rss.xml) styles.
```html ```html
<!-- public/rss/rss-style.xsl --> <!-- public/rss/rss-style.xsl -->

View file

@ -234,7 +234,7 @@ const EXCERPT_LENGTHS: Record<ExcerptScene, {
### Open Graph ### Open Graph
Estilos de imágenes sociales Open Graph. Estilos de [tarjetas sociales Open Graph](https://orcascan.com/tools/open-graph-validator?url=https%3A%2F%2Fretypeset.radishzz.cc%2Fes%2Fposts%2Ftheme-guide%2F).
```ts ```ts
// src/pages/og/[...image].ts // src/pages/og/[...image].ts
@ -263,7 +263,7 @@ getImageOptions: (_path, page) => ({
### Canal RSS ### Canal RSS
Estilos de página del feed RSS. Estilos de [página del feed RSS](https://retypeset.radishzz.cc/es/rss.xml).
```html ```html
<!-- public/rss/rss-style.xsl --> <!-- public/rss/rss-style.xsl -->

View file

@ -234,7 +234,7 @@ const EXCERPT_LENGTHS: Record<ExcerptScene, {
### Open Graph ### Open Graph
Open Graphソーシャル画像スタイル。 [Open Graphソーシャルカード](https://orcascan.com/tools/open-graph-validator?url=https%3A%2F%2Fretypeset.radishzz.cc%2Fja%2Fposts%2Ftheme-guide%2F)スタイル。
```ts ```ts
// src/pages/og/[...image].ts // src/pages/og/[...image].ts
@ -263,7 +263,7 @@ getImageOptions: (_path, page) => ({
### RSSフィード ### RSSフィード
RSSフィードページスタイル。 [RSSフィードページ](https://retypeset.radishzz.cc/ja/rss.xml)スタイル。
```html ```html
<!-- public/rss/rss-style.xsl --> <!-- public/rss/rss-style.xsl -->

View file

@ -234,7 +234,7 @@ const EXCERPT_LENGTHS: Record<ExcerptScene, {
### Open Graph ### Open Graph
Стили изображений Open Graph для социальных сетей. Стили [карточек Open Graph для социальных сетей](https://orcascan.com/tools/open-graph-validator?url=https%3A%2F%2Fretypeset.radishzz.cc%2Fru%2Fposts%2Ftheme-guide%2F).
```ts ```ts
// src/pages/og/[...image].ts // src/pages/og/[...image].ts
@ -263,7 +263,7 @@ getImageOptions: (_path, page) => ({
### RSS-лента ### RSS-лента
Стили страницы RSS-ленты. Стили [страницы RSS-ленты](https://retypeset.radishzz.cc/ru/rss.xml).
```html ```html
<!-- public/rss/rss-style.xsl --> <!-- public/rss/rss-style.xsl -->

View file

@ -234,7 +234,7 @@ const EXCERPT_LENGTHS: Record<ExcerptScene, {
### Open Graph ### Open Graph
Open Graph 社交圖片樣式。 [Open Graph 社交卡片](https://orcascan.com/tools/open-graph-validator?url=https%3A%2F%2Fretypeset.radishzz.cc%2Fzh-tw%2Fposts%2Ftheme-guide%2F) 樣式。
```ts ```ts
// src/pages/og/[...image].ts // src/pages/og/[...image].ts
@ -263,7 +263,7 @@ getImageOptions: (_path, page) => ({
### RSS 訂閱 ### RSS 訂閱
RSS 訂閱頁配色。 [RSS 訂閱頁](https://retypeset.radishzz.cc/zh-tw/rss.xml) 配色。
```html ```html
<!-- public/rss/rss-style.xsl --> <!-- public/rss/rss-style.xsl -->

View file

@ -234,7 +234,7 @@ const EXCERPT_LENGTHS: Record<ExcerptScene, {
### Open Graph ### Open Graph
Open Graph 社交图片样式。 [Open Graph 社交卡片](https://orcascan.com/tools/open-graph-validator?url=https%3A%2F%2Fretypeset.radishzz.cc%2Fposts%2Ftheme-guide%2F) 样式。
```ts ```ts
// src/pages/og/[...image].ts // src/pages/og/[...image].ts
@ -263,7 +263,7 @@ getImageOptions: (_path, page) => ({
### RSS 订阅 ### RSS 订阅
RSS 订阅页配色。 [RSS 订阅页](https://retypeset.radishzz.cc/rss.xml) 配色。
```html ```html
<!-- public/rss/rss-style.xsl --> <!-- public/rss/rss-style.xsl -->

View file

@ -61,7 +61,7 @@ h4:hover .heading-anchor-link svg:hover {
--at-apply: 'after:bottom-0.68em'; --at-apply: 'after:bottom-0.68em';
} }
.footer-highlight-position-fix { .footer-highlight-position-fix {
--at-apply: 'after:bottom-0.24em'; --at-apply: 'after:bottom-0.34em';
} }
} }

View file

@ -7,7 +7,7 @@
/* Global Styles */ /* Global Styles */
.heti { .heti {
--at-apply: 'break-words leading-1.5em hyphens-auto cjk:tracking-0.02em'; --at-apply: 'break-words leading-normal hyphens-auto cjk:tracking-0.02em';
} }
/* Customized Post Title */ /* Customized Post Title */
@ -194,7 +194,7 @@ html.dark .heti pre :where(span) {
/* Superscript and Subscript >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */ /* Superscript and Subscript >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
.heti :where(sub), .heti :where(sub),
.heti :where(sup) { .heti :where(sup) {
--at-apply: 'relative mx-0.1em align-baseline text-0.75em leading-1'; --at-apply: 'relative mx-0.1em align-baseline text-0.75em';
} }
.heti :where(sub) { .heti :where(sub) {
--at-apply: 'bottom--0.25em'; --at-apply: 'bottom--0.25em';