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

Updated Vite Config. Frontend: Updated base css to hide scrolling bar, fixed margin from footer, sidebar is now fixed when footer is reached.

Browse source
This commit is contained in:
Yohan Boujon 2024-01-08 20:14:19 +01:00
parent 1aa48a15ac
commit 282627ed0d
4 changed files with 22 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/src/lib/css/base.css
View file

@ -1,8 +1,8 @@
@import url('https://fonts.googleapis.com/css2?family=Gabarito:wght@400;700&family=Urbanist:wght@500;600;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Gabarito:wght@400;700&family=Urbanist:wght@500;600;900&display=swap');
html { html {
scroll-behavior: smooth; overflow-x: hidden;
} }
:root { :root {
--color-title: #071952; --color-title: #071952;

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

@ -75,13 +75,12 @@ h2 {
} }
.end { .end {
padding-bottom: 3rem; padding-bottom: 5rem;
} }
.footer { .footer {
position: relative; position: relative;
display: flex; display: flex;
margin-top: 1rem;
height: 10rem; height: 10rem;
background-color: var(--color-text); background-color: var(--color-text);
z-index: 3; z-index: 3;

21
frontend/src/routes/+page.svelte
View file

@ -39,18 +39,25 @@
// Sidebar sticky // Sidebar sticky
let sidebar; let sidebar;
let sidebar_height = 0; let footer;
let moving_position = 0;
$: scrollY = 0; $: scrollY = 0;
$: innerHeight = 0; $: innerHeight = 0;
onMount(() => { onMount(() => {
sidebar_height = sidebar.offsetHeight;
sidebarScrollingHandler(); sidebarScrollingHandler();
}); });
function sidebarScrollingHandler() { function sidebarScrollingHandler() {
if(scrollY+innerHeight >= sidebar_height) { let isBottom = (scrollY+innerHeight >= footer.offsetTop);
// Testing if sidebar is outside of scrolling scope
if(scrollY+innerHeight >= sidebar.offsetHeight && !isBottom) {
sidebar.style.position = 'fixed'; sidebar.style.position = 'fixed';
sidebar.style.top = `-${sidebar_height-innerHeight}px`; sidebar.style.top = `-${sidebar.offsetHeight-innerHeight}px`;
moving_position = scrollY;
}
else if(isBottom) {
sidebar.style.position = 'absolute';
sidebar.style.top = `${moving_position-(sidebar.offsetHeight-innerHeight)}px`;
} }
else { else {
sidebar.style.position = 'absolute'; sidebar.style.position = 'absolute';
@ -137,9 +144,9 @@
</div> </div>
</div> </div>
</div> </div>
<div class="footer"> <div class="footer" bind:this={footer}>
<p>Made with <SvgIcon size="20" path={mdiHeart} type="mdi"/> and Svelte</p> <p>Made with <SvgIcon size="20" path={mdiHeart} type="mdi"/> using Svelte</p>
<p>© {new Date().getFullYear()} Copyright: Yohan Boujon</p> <p>All rights reserved, Yohan Boujon • {new Date().getFullYear()}</p>
</div> </div>
{:else} {:else}
<h1 class="h1 text-center">Oops, could not load database :/</h1> <h1 class="h1 text-center">Oops, could not load database :/</h1>

6
frontend/vite.config.js
View file

@ -2,5 +2,9 @@ import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite'; import { defineConfig } from 'vite';
export default defineConfig({ export default defineConfig({
plugins: [sveltekit()] plugins: [sveltekit()],
server: {
host: '127.0.0.1',
port: 5125,
},
}); });