i18n updates + HP + components
This commit is contained in:
Nico
parent
1ab35db47d
commit
23c79e579c
67 changed files with 1355 additions and 542 deletions
112
src/components/CardEditorial.astro
Normal file
112
src/components/CardEditorial.astro
Normal file
|
|
@ -0,0 +1,112 @@
|
|||
---
|
||||
const { item, routeName } = Astro.props;
|
||||
---
|
||||
|
||||
<div class="card">
|
||||
<div>
|
||||
<h3>
|
||||
<a class="card__link" href={`${routeName}/${item.frontmatter.slug}`}
|
||||
>{item.frontmatter.title}</a
|
||||
>
|
||||
</h3>
|
||||
<h4>{item.frontmatter.subtitle}</h4>
|
||||
<!-- <tags-list list={item.tags}></tags-list> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style scoped>
|
||||
.card {
|
||||
padding: 2.4rem 1.6rem;
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
box-shadow: var(--shadow-elevation-medium);
|
||||
background-color: var(--white);
|
||||
}
|
||||
.card:hover {
|
||||
box-shadow: var(--shadow-elevation-high);
|
||||
}
|
||||
.card:focus-within {
|
||||
box-shadow: var(--shadow-elevation-high);
|
||||
}
|
||||
.card:hover h3::after,
|
||||
.card:focus-within h3::after {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
.card:hover h3,
|
||||
.card:focus-within h3 {
|
||||
color: var(--brique);
|
||||
}
|
||||
.card::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
width: 2px;
|
||||
transform: scaleY(0);
|
||||
transform-origin: bottom;
|
||||
background-color: var(--brique);
|
||||
}
|
||||
.card:hover::before,
|
||||
.card:focus-within::before {
|
||||
transform: scaleY(1);
|
||||
transform-origin: top;
|
||||
}
|
||||
|
||||
h3 {
|
||||
padding-right: 3rem;
|
||||
position: relative;
|
||||
font-size: clamp(2.4rem, 2.2222rem + 0.5556vw, 2.8rem);
|
||||
font-weight: bold;
|
||||
text-transform: none;
|
||||
}
|
||||
h3::after {
|
||||
content: url("~assets/svg/arrow-right.svg");
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
top: 0;
|
||||
right: 0;
|
||||
opacity: 0;
|
||||
transform: translateX(1rem);
|
||||
}
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.card {
|
||||
transition: box-shadow 0.2s ease;
|
||||
}
|
||||
.card::before {
|
||||
transition: transform 0.2s ease-in-out;
|
||||
}
|
||||
h3 {
|
||||
transition: color ease 0.2s;
|
||||
}
|
||||
h3::after {
|
||||
transition: opacity ease 0.2s, transform ease 0.2s;
|
||||
}
|
||||
}
|
||||
|
||||
.card h4 {
|
||||
margin-top: 0.8rem;
|
||||
font-size: 2rem;
|
||||
font-weight: 500;
|
||||
color: var(--darkBlue);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
.card {
|
||||
padding: 3.2rem 2.4rem;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 1060px) {
|
||||
.card {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -4,38 +4,36 @@ import { t, l } from "astro-i18n";
|
|||
import Navigation from "../components/Navigation.astro";
|
||||
---
|
||||
|
||||
<header class="" role="banner">
|
||||
<header role="banner">
|
||||
<a href="#skip-content" class="skip-link"> {t("header.skipLink")}</a>
|
||||
<p class="logo">
|
||||
<a href={l("/")} aria-label={t("header.homeLink")}>nardu.in</a>
|
||||
</p>
|
||||
<Navigation />
|
||||
<div class="container">
|
||||
<a href={l("/")} class="logo" aria-label={t("header.homeLink")}>nardu.in</a>
|
||||
<Navigation />
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<style>
|
||||
header {
|
||||
container-name: header;
|
||||
container-type: inline-size;
|
||||
}
|
||||
.container {
|
||||
padding: var(--space-xs-s) 0;
|
||||
margin: 0 auto var(--space-xs-s) 0;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: var(--space-xs-s);
|
||||
justify-content: space-between;
|
||||
justify-content: center;
|
||||
align-items: baseline;
|
||||
inline-size: 100%;
|
||||
}
|
||||
header > .logo {
|
||||
/* margin-inline-end: auto; */
|
||||
flex-grow: 1;
|
||||
/* flex-basis: 100%; */
|
||||
text-align: center;
|
||||
@container header (min-width: 31rem) {
|
||||
.container {
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
header > .logo a {
|
||||
text-align: center;
|
||||
}
|
||||
header > :global(:last-child) {
|
||||
flex-grow: 999;
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
a {
|
||||
:global(a) {
|
||||
color: var(--color-dark);
|
||||
font-weight: normal;
|
||||
text-decoration: none;
|
||||
}
|
||||
.skip-link {
|
||||
|
|
|
|||
21
src/components/LangSwitcher.astro
Normal file
21
src/components/LangSwitcher.astro
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
---
|
||||
import { l, astroI18n } from "astro-i18n";
|
||||
|
||||
// get all the locales available on the website and remove the one currently in use
|
||||
const availableLocales = astroI18n.langCodes.filter(
|
||||
(locale) => locale !== astroI18n.langCode
|
||||
);
|
||||
// current path
|
||||
const currentRoute = Astro.url.pathname;
|
||||
---
|
||||
|
||||
<ul role="list">
|
||||
{
|
||||
// create a list of available alternative locale
|
||||
availableLocales.map((locale) => (
|
||||
<li>
|
||||
<a href={l(currentRoute as any, {}, locale as any)}>{locale}</a>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
---
|
||||
import { l, astroI18n } from "astro-i18n";
|
||||
import { I18nProvider } from "astro-i18n/components";
|
||||
|
||||
// get the locale currently in use
|
||||
const currentLocale = astroI18n.langCode;
|
||||
// get all the locales available on the website and remove the one currently in use
|
||||
const availableLocales = astroI18n.langCodes.filter(
|
||||
(locale) => locale !== currentLocale
|
||||
);
|
||||
// current path
|
||||
const currentRoute = Astro.url.pathname;
|
||||
---
|
||||
|
||||
<I18nProvider>
|
||||
<ul role="list">
|
||||
{
|
||||
// create a list of available alternative locale
|
||||
availableLocales.map((locale) => (
|
||||
<li>
|
||||
<a href={l(currentRoute as any, {}, {}, locale as any)}>{locale}</a>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</I18nProvider>
|
||||
15
src/components/ListCards.astro
Normal file
15
src/components/ListCards.astro
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
---
|
||||
const { list, routeName } = Astro.props;
|
||||
|
||||
import CardEditorial from "./CardEditorial.astro";
|
||||
---
|
||||
|
||||
<ul role="list">
|
||||
{
|
||||
list.map((item) => (
|
||||
<li class="list__item">
|
||||
<CardEditorial item={item} routeName={routeName} />
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
|
|
@ -1,16 +1,16 @@
|
|||
---
|
||||
import { t, l } from "astro-i18n";
|
||||
import LanguageSwitcher from "./LanguageSwitcher.astro";
|
||||
import LanguageSwitcher from "./LangSwitcher.astro";
|
||||
---
|
||||
|
||||
<nav role="navigation" aria-label={t("header.mainNav")}>
|
||||
<ul class="main-nav" role="list">
|
||||
<li>
|
||||
<a href={l("/")}>{t("accueil")}</a>
|
||||
<a href={l("/articles")}>{t("article.titre")}</a>
|
||||
<span aria-hidden="true">·</span>
|
||||
</li>
|
||||
<li>
|
||||
<a href={l("/articles")}>{t("article.titre")}</a>
|
||||
<a href={l("/")}>{t("projet.titre")}</a>
|
||||
<span aria-hidden="true">·</span>
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -21,8 +21,8 @@ import LanguageSwitcher from "./LanguageSwitcher.astro";
|
|||
<a
|
||||
href="mailto:contact@nardu.in"
|
||||
class="nice-link"
|
||||
title={t("contactLien")}
|
||||
>{t("contact")}
|
||||
title={t("contact.email")}
|
||||
>{t("contact.title")}
|
||||
</a>
|
||||
<span aria-hidden="true">|</span>
|
||||
</li>
|
||||
|
|
|
|||
81
src/components/QuickAccessCard.astro
Normal file
81
src/components/QuickAccessCard.astro
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
---
|
||||
const { item } = Astro.props;
|
||||
---
|
||||
|
||||
<div class="card">
|
||||
<div class="card-container">
|
||||
<div class="card__illustration">
|
||||
<img
|
||||
src={item.quickImage}
|
||||
width="150"
|
||||
height="150"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
<a href={`#${item.id}`} class="card__link clean-link">{item.quickTitle}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.card {
|
||||
container-name: card;
|
||||
container-type: inline-size;
|
||||
inline-size: 100%;
|
||||
block-size: 100%;
|
||||
}
|
||||
.card-container {
|
||||
padding: var(--space-xs-s);
|
||||
position: relative;
|
||||
display: flex;
|
||||
block-size: 100%;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
gap: var(--space-xs);
|
||||
cursor: pointer;
|
||||
background-color: var(--color-light-blue);
|
||||
transform: translateY(0);
|
||||
}
|
||||
.card:focus-within {
|
||||
outline: dotted 3px var(--color-blue);
|
||||
}
|
||||
.card:focus-within .card__link:focus {
|
||||
outline: dotted 3px transparent;
|
||||
}
|
||||
.card__link {
|
||||
font-weight: normal;
|
||||
text-decoration: none;
|
||||
color: currentColor;
|
||||
}
|
||||
.card__link:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
.card__link::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.card {
|
||||
transition: all ease 0.2s;
|
||||
}
|
||||
.card:hover {
|
||||
transform: translateY(-10px);
|
||||
box-shadow: var(--shadow-elevation-high);
|
||||
}
|
||||
.card:focus-within {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
}
|
||||
|
||||
@container card (min-width: 20rem) {
|
||||
.card-container {
|
||||
flex-direction: row;
|
||||
text-align: left;
|
||||
}
|
||||
.card__illustration {
|
||||
max-inline-size: 100px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue