remove redirects & fix rss + add rel=me links + en link
This commit is contained in:
parent
fa61a28160
commit
069baaf81c
15 changed files with 338 additions and 126 deletions
|
@ -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);
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
12
src/components/SocialRel.astro
Normal file
12
src/components/SocialRel.astro
Normal 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>
|
Loading…
Add table
Add a link
Reference in a new issue