Etheryo/curriculum-vitae
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases 1 Packages Wiki Activity Actions

Change the language icon to the top of the page.

Browse source
This commit is contained in:
Yohan Boujon 2024-02-10 12:23:43 +01:00
parent 36035828cc
commit 4ee14f1c21
2 changed files with 49 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
frontend/src/lib/css/cv.css
View file

@ -52,6 +52,18 @@
flex-direction: column;
}
.lang-btn-container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: absolute;
right: 0;
top: 0;
margin-right: 5rem;
margin-top: 1.5rem;
}
.footer-text p {
font-family: 'Urbanist', sans-serif;
font-weight: 600;
@ -278,6 +290,16 @@ h2 {
text-decoration: none;
}
.lang-btn {
background-color: var(--color-background) !important;
color: var(--color-text) !important;
}
.lang-btn:hover {
background-color: var(--color-text) !important;
color: var(--color-background) !important;
}
.footer-text svg {
margin: 0;
}
@ -287,10 +309,19 @@ h2 {
color: var(--color-subtitle);
}
.footer-btn:active,
.footer-btn:active {
transform: translateY(3px);
}
.footer-btn:hover>img {
filter: none;
}
.none {
display: none;
}
.flag-little {
width: fit-content;
}

36
frontend/src/routes/lang=[lang]/+page.svelte
View file

@ -115,6 +115,14 @@
<SvgIcon size="23" path={mdiAccount} type="mdi" />
{/if}
</button>
<button
class={scrollY <= 53 ? "none" : "topbar-button"}
on:click={() => (window.location.href = `/lang=${otherlang}`)}
>
<span class={`fi fi-${flag} flag-little`}></span>
</button>
<h1 class={scrollY <= 53 ? "topbar-name" : "topbar-name-little"}>
{cv.info.full_name}
</h1>
@ -124,6 +132,15 @@
<!-- MAIN DIV (RIGHT: desktop/CENTER: mobile) -->
<div class="main">
{#if innerWidth >= 1000}
<div class="lang-btn-container">
<button
class="footer-btn lang-btn"
on:click={() => (window.location.href = `/lang=${otherlang}`)}
>
<p>{text.lang}</p>
<span class={`fi fi-${flag} flag-size`}></span>
</button>
</div>
<h1 class="name">{cv.info.full_name}</h1>
{/if}
<h2 class="name">{cv.info.title}</h2>
@ -196,15 +213,7 @@
<div class="footer" bind:this={footer}>
<!-- Footer desktop -->
{#if innerWidth >= 1000}
<div class="footer-btn-container">
<button
class="footer-btn"
on:click={() => (window.location.href = `/lang=${otherlang}`)}
>
<p>{text.lang}</p>
<span class={`fi fi-${flag} flag-size`}></span>
</button>
</div>
<div />
<div class="footer-text">
<p>
{text.madewith}
@ -239,15 +248,6 @@
<p>{text.copyright} • {new Date().getFullYear()}</p>
</div>
<div class="footer-mobile-btn">
<div class="footer-btn-container">
<button
class="footer-btn"
on:click={() => (window.location.href = `/lang=${otherlang}`)}
>
<p>{text.lang}</p>
<span class={`fi fi-${flag} flag-size`}></span>
</button>
</div>
<div class="footer-btn-container">
<a
class="footer-btn footer-github"