Skip to content

Commit

Permalink
feat: better alignment of titles and centering
Browse files Browse the repository at this point in the history
  • Loading branch information
@marc-bouvier
marc-bouvier committed Nov 18, 2024
1 parent 4d0a51b commit 14b7ab0
Show file tree
Hide file tree
Showing 8 changed files with 337 additions and 283 deletions.
80 changes: 44 additions & 36 deletions src/lib/Footer.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,38 +7,40 @@
</script>

<footer>
<nav aria-label="Liens de contact">
<ul>
<li>
<a href="{base}/#" class="menu_icon">
<Icon label="mail" data={envelope} scale={1.7} />
</a>
</li>
<li>
<a href="https://github.com/iroco-co/rezofora" class="menu_icon">
<Icon label="github" data={github} scale={1.7} />
</a>
</li>
<li>
<a href="https://www.linkedin.com/company/rezofora/posts/?feedView=all" class="menu_icon">
<Icon label="linkedin" data={linkedin} scale={1.7} />
</a>
</li>
<li>
<a href="{base}/#" class="menu_icon">
<Icon label="mastodon" data={mastodon} scale={1.7} />
</a>
</li>
</ul>
</nav>
<nav aria-label={m.footer_aria_label_legal_links()}>
<ul class="menu_items">
<li><a href="{base}/legal">{m.footer_other_legal()}</a></li>
<li aria-hidden="true">|</li>
<li><a href="{base}/terms">{m.footer_other_terms()}</a></li>
</ul>
</nav>
<div class="copyright">{m.footer_other_copyrights()}</div>
<div class="center-in-section">
<nav aria-label="Liens de contact">
<ul>
<li>
<a href="{base}/#" class="menu_icon">
<Icon label="mail" data={envelope} scale={1.7} />
</a>
</li>
<li>
<a href="https://github.com/iroco-co/rezofora" class="menu_icon">
<Icon label="github" data={github} scale={1.7} />
</a>
</li>
<li>
<a href="https://www.linkedin.com/company/rezofora/posts/?feedView=all" class="menu_icon">
<Icon label="linkedin" data={linkedin} scale={1.7} />
</a>
</li>
<li>
<a href="{base}/#" class="menu_icon">
<Icon label="mastodon" data={mastodon} scale={1.7} />
</a>
</li>
</ul>
</nav>
<nav aria-label={m.footer_aria_label_legal_links()}>
<ul class="menu_items">
<li><a href="{base}/legal">{m.footer_other_legal()}</a></li>
<li aria-hidden="true">|</li>
<li><a href="{base}/terms">{m.footer_other_terms()}</a></li>
</ul>
</nav>
<div class="copyright">{m.footer_other_copyrights()}</div>
</div>
</footer>

<style>
Expand All @@ -61,10 +63,11 @@
flex-direction: column;
align-items: center;
}
footer > * {
margin-top: .25rem;
margin-bottom: .25rem;
}
footer > * {
margin-top: .25rem;
margin-bottom: .25rem;
}
footer ul {
list-style-type: none;
Expand All @@ -82,4 +85,9 @@
font-size: small;
color: var(--DarkGreen);
}
footer .center-in-section {
display: flex;
align-items: center;
}
</style>
139 changes: 119 additions & 20 deletions src/lib/Header.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,24 +5,123 @@
</script>

<header>
<nav class="header-skip-to-content" aria-label="Accès rapide" lang="fr">
<a href="#main">Contenu</a>
</nav>
<nav aria-label="Menu" class="menu">
<a href="{base}/" class="brand-logo">
<img
alt="Logo Rezofora"
src="{base}/img/Logo-Rezofora-H-RVB-cropped.svg"
height="62"
width="144"
/>
</a>
<div class="items">
<a href="{base}/#support">{m.header_support()}</a>
<a href="{base}/#training">{m.header_training()}</a>
<a href="{base}/#inspire">{m.header_inspire()}</a>
<a href="{base}/#know-us" class="about">{m.header_about()}</a>
</div>
</nav>
<LanguageSwitcher ></LanguageSwitcher>
<div class="wrapper">
<nav class="header-skip-to-content" aria-label="Accès rapide" lang="fr">
<a href="#main">Contenu</a>
</nav>
<nav aria-label="Menu" class="menu">
<a href="{base}/" class="brand-logo">
<img
alt="Logo Rezofora"
src="{base}/img/Logo-Rezofora-H-RVB-cropped.svg"
height="62"
width="144"
/>
</a>
<div class="items">
<a href="{base}/#support">{m.header_support()}</a>
<a href="{base}/#training">{m.header_training()}</a>
<a href="{base}/#inspire">{m.header_inspire()}</a>
<a href="{base}/#know-us" class="about">{m.header_about()}</a>
</div>
</nav>
<LanguageSwitcher></LanguageSwitcher>
</div>
</header>

<style>
header {
padding: 0;
margin: 0;
}
.menu {
display: flex;
flex-wrap: wrap;
flex-direction: column;
margin-top: 0;
padding: 0 .5rem;
margin-bottom: .5rem;
justify-content: center;
align-items: center;
}
.menu > .brand-logo {
padding: 1rem;
}
.brand-logo img {
object-fit: scale-down;
}
.menu > .items {
margin-top: .5rem;
display: flex;
gap: .125rem;
align-items: baseline;
flex-direction: column;
justify-content: space-evenly;
}
.menu > .items > a {
display: block;
width: 100%;
color: var(--DarkGreen);
font-weight: bold;
font-size: 1.125rem;
text-decoration: none;
text-transform: uppercase;
padding: .25rem;
}
.menu > .items > a.about {
color: var(--DarkOrange);
}
@media only screen and (min-width: 576px) {
header {
padding: 0;
margin: 0;
}
.menu {
flex-direction: row;
justify-content: space-between;
}
.menu > .brand-logo {
padding-top: 0.25rem;
padding-bottom: 1.25rem;
margin-top: .75rem;
}
.menu > .items {
gap: .25rem;
}
.menu > .items > a {
width: auto;
}
}
@media only screen and (min-width: 768px) {
.menu > .items {
gap: 1rem;
margin-top: 2rem;
align-items: center;
flex-direction: row;
}
.menu > .items > a {
margin: 0;
}
}
</style>
Loading

0 comments on commit 14b7ab0

Please sign in to comment.