remove redirects & fix rss + add rel=me links + en link

This commit is contained in:
nico 2025-01-02 14:52:11 +01:00
parent fa61a28160
commit 069baaf81c
Signed by: Nicolas
SSH key fingerprint: SHA256:ELi8eDeNLl5PTn64G+o2Kx5+XVDfHF5um2tZigfwWkM
15 changed files with 338 additions and 126 deletions

View file

@ -7,7 +7,7 @@ const { item, routeName } = Astro.props
const isReference = routeName === 'references'
---
<div class:list={['card', { 'card--link': !isReference }]}>
<div class='card'>
<h3>
{
!isReference ? (
@ -44,58 +44,73 @@ const isReference = routeName === 'references'
box-shadow: var(--shadow-elevation-medium);
background-color: white;
}
/*
* to be replaced with .card:has(a)
* when firefox supports it
*/
.card--link:hover {
box-shadow: var(--shadow-elevation-high);
}
.card--link:focus-within {
box-shadow: var(--shadow-elevation-high);
}
.card--link::after {
content: '';
position: absolute;
inline-size: 30px;
block-size: 30px;
top: var(--space-m);
right: var(--space-s);
opacity: 0;
background-image: url('/assets/svg/arrow-right.svg');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
transform: translateX(1rem);
}
.card--link:hover::after,
.card--link:focus-within::after {
transform: translateX(0);
opacity: 1;
}
.card--link:hover h3 a {
text-decoration: underline;
}
.card--link:hover h3 a,
.card--link:focus-within h3 a {
color: var(--color-brique);
}
.card--link::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
block-size: 100%;
inline-size: 2px;
transform: scaleY(0);
transform-origin: bottom;
background-color: var(--color-brique);
}
.card--link:hover::before,
.card--link:focus-within::before {
transform: scaleY(1);
transform-origin: top;
/* selects card that do not have an external link */
.card:not(:has([rel='noopener noreferer'])) {
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
block-size: 100%;
inline-size: 2px;
transform: scaleY(0);
transform-origin: bottom;
background-color: var(--color-brique);
}
&::after {
content: '';
position: absolute;
inline-size: 30px;
block-size: 30px;
top: var(--space-m);
right: var(--space-s);
opacity: 0;
background-image: url('/assets/svg/arrow-right.svg');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
transform: translateX(1rem);
}
&:hover,
&:focus-within {
box-shadow: var(--shadow-elevation-high);
&::before {
transform: scaleY(1);
transform-origin: top;
}
&::after {
transform: translateX(0);
opacity: 1;
}
h3 a {
text-decoration: underline;
color: var(--color-brique);
}
}
@media (prefers-reduced-motion: no-preference) {
& {
transition: box-shadow 0.2s ease;
}
&::before {
transition: transform 0.2s ease-in-out;
}
&::after {
transition:
opacity ease 0.2s,
transform ease 0.2s;
}
h3 a {
transition: color ease 0.2s;
}
}
}
h3 {
@ -112,25 +127,6 @@ const isReference = routeName === 'references'
position: absolute;
inset: 0;
}
@media (prefers-reduced-motion: no-preference) {
.card {
transition: box-shadow 0.2s ease;
}
.card::before {
transition: transform 0.2s ease-in-out;
}
.card::after {
transition:
opacity ease 0.2s,
transform ease 0.2s;
}
.card--link {
view-transition-name: var(--slug);
}
h3 a {
transition: color ease 0.2s;
}
}
.card h4 {
margin-block-start: var(--space-2xs);

View file

@ -1,26 +1,19 @@
<footer class='footer' role='contentinfo'>
<section class='flow'>
<p>Nicolas Arduin</p>
<p>Développeur web spécialisé en accessibilité.</p>
---
import SocialRel from '../components/SocialRel.astro'
---
<footer class='footer wrapper' role='contentinfo'>
<section class='info'>
<div>
<p class='h4'>Nicolas Arduin</p>
<p>Développeur web spécialisé en accessibilité.</p>
</div>
<ul class='flow' role='list'>
<li>
<a
href='mailto:contact@nardu.in'
title='Envoyez-moi un mail (ouverture du logiciel automatique).'
>contact@nardu.in</a
>
</li>
<li>
<a
href='tel:+33749464239'
title='Contactez-moi par téléphone (ouverture du logiciel automatique)'
>+337 49 46 42 39</a
>
</li>
<li><a href='/veille'>Veille</a></li>
<li><a href='/plan-du-site'>Plan du site</a></li>
<li><a href='/"rss.xml'>RSS</a></li>
<li><a href='/rss.xml'>RSS</a></li>
</ul>
<SocialRel />
</section>
</footer>
@ -39,4 +32,12 @@
font-weight: 500;
color: var(--color-blue);
}
.info {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
gap: var(--space-s);
text-align: left;
}
</style>

View file

@ -5,9 +5,15 @@ const { pageTitle } = Astro.props
<head>
<meta charset='utf-8' />
<link rel='icon' type='image/svg+xml' href='/favicon.svg' />
<link
rel='alternate'
type='application/rss+xml'
title='Nicolas Arduin'
href={new URL('rss.xml', Astro.site)}
/>
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
<title>{pageTitle} - Nicolas Arduin</title>
<title>{pageTitle} | Nicolas Arduin</title>
<meta
name='description'
content='Développeur web spécialisé en accessibilité numérique et éco-conception à Toulouse. Création de sites web sur mesure, mise en conformité RGAA, maintenance, etc.'
@ -15,5 +21,5 @@ const { pageTitle } = Astro.props
<meta name='robots' content='index,follow.' />
<meta name='author' content='Nicolas Arduin' />
<meta name='subject' content='Développement de sites web, accessibilité.' />
<meta name='view-transition' content='same-origin' />
<meta name='fediverse:creator' content='@narduin@mastodon.tetaneutral.net' />
</head>

View file

@ -0,0 +1,12 @@
<ul class='flow' role='list'>
<li><a href='mailto:contact@nardu.in' rel='me'>contact@nardu.in</a></li>
<li>
<a href='tel:+33749464239' rel='me'>+337 49 46 42 39</a>
</li>
<li><a href='https://github.com/narduin' rel='me'>@narduin sur Github</a></li>
<li>
<a rel='me' href='https://mastodon.tetaneutral.net/@narduin'
>@narduin sur Mastodon</a
>
</li>
</ul>