Footer fully implemented.
This commit is contained in:
parent
039ae401ed
commit
a68ba0aa74
9 changed files with 242 additions and 77 deletions
25
frontend/src/lib/components/button-slider.svelte
Normal file
25
frontend/src/lib/components/button-slider.svelte
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
<script>
|
||||
import '$lib/css/base.css';
|
||||
import '$lib/css/button-slider.css';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
export let keys = ['Button1', 'Button2'];
|
||||
export let active = 0;
|
||||
|
||||
function changeActive(id) {
|
||||
dispatch('click', { id: id });
|
||||
active = id;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="button-slider-container center">
|
||||
{#each keys as k, id}
|
||||
<button
|
||||
class={id === active ? 'button-slider-active' : ''}
|
||||
on:click={() => {
|
||||
changeActive(id);
|
||||
}}><span>{k}</span></button
|
||||
>
|
||||
{/each}
|
||||
</div>
|
||||
|
|
@ -1,8 +1,40 @@
|
|||
<script>
|
||||
import '$lib/css/base.css';
|
||||
import '$lib/css/footer.css';
|
||||
import SvgIcon from '@jamescoyle/svelte-icon';
|
||||
import { mdiFormatQuoteClose, mdiFormatQuoteOpen } from '@mdi/js';
|
||||
|
||||
import Page1 from '$lib/components/footer/page1.svelte';
|
||||
import Page2 from '$lib/components/footer/page2.svelte';
|
||||
import Page3 from '$lib/components/footer/page3.svelte';
|
||||
import ButtonSlider from '$lib/components/button-slider.svelte';
|
||||
import anime from 'animejs';
|
||||
|
||||
let active = 0;
|
||||
let page = [Page1, Page2, Page3];
|
||||
let pageDiv;
|
||||
|
||||
function slideText(event) {
|
||||
const id = event.detail.id;
|
||||
const width = window.innerWidth;
|
||||
|
||||
anime({
|
||||
targets: pageDiv,
|
||||
translateX: width / 2,
|
||||
opacity: 0,
|
||||
duration: 300,
|
||||
easing: 'easeInQuad',
|
||||
complete: function () {
|
||||
active = id;
|
||||
pageDiv.style.transform = `translateX(-${width}px)`;
|
||||
anime({
|
||||
targets: pageDiv,
|
||||
translateX: 0,
|
||||
opacity: 1,
|
||||
duration: 300,
|
||||
easing: 'easeOutQuad'
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="footer-container">
|
||||
|
|
@ -11,29 +43,15 @@
|
|||
<h1 class="title">Etheryo Blog</h1>
|
||||
</div>
|
||||
<div class="footer-right">
|
||||
<div class="footer-icon-text">
|
||||
<img alt="github" src="https://cdn.simpleicons.org/github/F8F1F1" />
|
||||
<a target="_blank" href="https://github.com/yoboujon/etheryo-blog">Lien Github</a>
|
||||
</div>
|
||||
<div class="footer-icon-text">
|
||||
<img alt="raspberrypi" src="https://cdn.simpleicons.org/raspberrypi/F8F1F1" />
|
||||
<a target="_blank" href="https://fr.wikipedia.org/wiki/Raspberry_Pi"
|
||||
>Hébergé sur Raspberry Pi</a
|
||||
>
|
||||
</div>
|
||||
<div class="footer-icon-text">
|
||||
<img alt="crowcpp" src="https://crowcpp.org/master/assets/favicon.svg" />
|
||||
<a target="_blank" href="https://github.com/CrowCpp/Crow">Réalisé avec CrowCpp</a>
|
||||
</div>
|
||||
<div class="footer-icon-text footer-special">
|
||||
<SvgIcon type="mdi" path={mdiFormatQuoteOpen} />
|
||||
<span><i>Keep the web free</i></span>
|
||||
<SvgIcon type="mdi" path={mdiFormatQuoteClose} />
|
||||
<div class="page-base justify-center" bind:this={pageDiv}>
|
||||
<svelte:component this={page[active]} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-slider">
|
||||
<div class="footer-slider align-center">
|
||||
<span>{new Date().getFullYear()} • Tous droits réservés • Yohan Boujon</span>
|
||||
<div class="flex-end">ButtonSlider</div>
|
||||
<div class="flex-end">
|
||||
<ButtonSlider keys={['À propos', 'Notre Vision', 'Contacter']} on:click={slideText} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
24
frontend/src/lib/components/footer/page1.svelte
Normal file
24
frontend/src/lib/components/footer/page1.svelte
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<script>
|
||||
import '$lib/css/footer/page.css';
|
||||
|
||||
import SvgIcon from '@jamescoyle/svelte-icon';
|
||||
import { mdiFormatQuoteClose, mdiFormatQuoteOpen } from '@mdi/js';
|
||||
</script>
|
||||
|
||||
<div class="page-icon-text">
|
||||
<img alt="github" src="https://cdn.simpleicons.org/github/F8F1F1" />
|
||||
<a target="_blank" href="https://github.com/yoboujon/etheryo-blog">Code source</a>
|
||||
</div>
|
||||
<div class="page-icon-text">
|
||||
<img alt="raspberrypi" src="https://cdn.simpleicons.org/raspberrypi/F8F1F1" />
|
||||
<a target="_blank" href="https://fr.wikipedia.org/wiki/Raspberry_Pi">Hébergé sur Raspberry Pi</a>
|
||||
</div>
|
||||
<div class="page-icon-text">
|
||||
<img alt="crowcpp" src="https://crowcpp.org/master/assets/favicon.svg" />
|
||||
<a target="_blank" href="https://github.com/CrowCpp/Crow">Réalisé avec CrowCpp</a>
|
||||
</div>
|
||||
<div class="page-icon-text page-special">
|
||||
<SvgIcon type="mdi" path={mdiFormatQuoteOpen} />
|
||||
<span><i>Keep the web free</i></span>
|
||||
<SvgIcon type="mdi" path={mdiFormatQuoteClose} />
|
||||
</div>
|
||||
19
frontend/src/lib/components/footer/page2.svelte
Normal file
19
frontend/src/lib/components/footer/page2.svelte
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<script>
|
||||
import '$lib/css/base.css';
|
||||
import '$lib/css/footer/page.css';
|
||||
|
||||
import SvgIcon from '@jamescoyle/svelte-icon';
|
||||
import { mdiEye } from '@mdi/js';
|
||||
</script>
|
||||
|
||||
<div class="page-icon-text">
|
||||
<SvgIcon type="mdi" path={mdiEye} />
|
||||
<h1>Notre Vision</h1>
|
||||
</div>
|
||||
<div class="page-text">
|
||||
<span class="page-overflow text-justify"
|
||||
>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lectus ante, porttitor eget massa
|
||||
sit amet, volutpat cursus mauris. Proin et massa dui. Vestibulum eu tempus nisl, vitae bibendum
|
||||
urna. Sed tincidunt est non nulla scelerisque.
|
||||
</span>
|
||||
</div>
|
||||
16
frontend/src/lib/components/footer/page3.svelte
Normal file
16
frontend/src/lib/components/footer/page3.svelte
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<script>
|
||||
import '$lib/css/base.css';
|
||||
import '$lib/css/footer/page.css';
|
||||
|
||||
import SvgIcon from '@jamescoyle/svelte-icon';
|
||||
import { mdiEmailFast, mdiHelp } from '@mdi/js';
|
||||
</script>
|
||||
|
||||
<div class="page-icon-text">
|
||||
<SvgIcon type="mdi" path={mdiEmailFast} />
|
||||
<a href="mailto:blog@etheryo.fr">Envoyez nous un mail</a>
|
||||
</div>
|
||||
<div class="page-icon-text">
|
||||
<SvgIcon type="mdi" path={mdiHelp} />
|
||||
<a href="https://duckduckgo.com/">Besoin d'aide</a>
|
||||
</div>
|
||||
|
|
@ -132,4 +132,9 @@ h1 {
|
|||
.inherit-w-h {
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
}
|
||||
|
||||
.text-justify {
|
||||
text-align: justify;
|
||||
text-justify: inter-word;
|
||||
}
|
||||
35
frontend/src/lib/css/button-slider.css
Normal file
35
frontend/src/lib/css/button-slider.css
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
.button-slider-container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 3.5rem;
|
||||
background: linear-gradient(180deg, rgba(248, 241, 241, 1) 0%, rgba(221, 212, 223, 1) 100%);
|
||||
border-radius: 3rem;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.button-slider-active {
|
||||
background-image: linear-gradient(to right, var(--navbar-dark) 0%, var(--navbar-light) 100%);
|
||||
box-shadow: 0px 8px 18px -1px rgba(52, 42, 58, 0.2);
|
||||
}
|
||||
|
||||
.button-slider-active span {
|
||||
color: var(--color-background) !important;
|
||||
}
|
||||
|
||||
.button-slider-container button {
|
||||
background-color: #00000000;
|
||||
font-family: 'JetBrains Mono';
|
||||
border-radius: 3rem;
|
||||
height: 2.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 0.5rem;
|
||||
margin-right: 0.5rem;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.button-slider-container span {
|
||||
padding: 1.6rem;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
|
@ -1,8 +1,6 @@
|
|||
:root {
|
||||
--footer-height: 20rem;
|
||||
--ratio-container: 70%;
|
||||
--ratio-content: 50%;
|
||||
--font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.footer-container:before {
|
||||
|
|
@ -50,59 +48,6 @@
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
.footer-icon-text a {
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
transition: all .3s ease 0s;
|
||||
}
|
||||
|
||||
.footer-icon-text a:hover {
|
||||
color: var(--palette-pink);
|
||||
}
|
||||
|
||||
.footer-icon-text a::after {
|
||||
content: "";
|
||||
display: block; /* Ensure the pseudo-element takes up space */
|
||||
position: absolute;
|
||||
height: 0.2rem;
|
||||
background-color: var(--palette-pink);
|
||||
width: 0%;
|
||||
transition: all .3s ease 0s;
|
||||
}
|
||||
|
||||
.footer-icon-text a:hover::after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.footer-icon-text {
|
||||
color: var(--color-background);
|
||||
font-family: 'JetBrains Mono';
|
||||
font-weight: 500;
|
||||
font-size: var(--font-size);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.footer-icon-text i {
|
||||
font-weight: 700;
|
||||
font-size: 1.6rem;
|
||||
color: var(--color-hiddentext);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.footer-special svg {
|
||||
padding-left: 2rem;
|
||||
color: var(--color-hiddentext);
|
||||
}
|
||||
|
||||
.footer-icon-text img, .footer-icon-text svg {
|
||||
/* width: calc(calc(((var(--footer-height)*var(--ratio-container-float))) - 4rem)*(1/4)); */
|
||||
width: 1.8rem;
|
||||
height: auto;
|
||||
padding-right: 2rem;
|
||||
}
|
||||
|
||||
.footer-slider {
|
||||
width: inherit;
|
||||
height: calc(100% - var(--ratio-container));
|
||||
|
|
@ -118,4 +63,11 @@
|
|||
|
||||
.footer-slider div {
|
||||
padding-right: 2rem;
|
||||
}
|
||||
|
||||
.page-base {
|
||||
min-height: 15rem;
|
||||
max-height: 15rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
71
frontend/src/lib/css/footer/page.css
Normal file
71
frontend/src/lib/css/footer/page.css
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
:root {
|
||||
--a-size: 1.2rem;
|
||||
--p-size: 1rem;
|
||||
}
|
||||
|
||||
.page-icon-text a {
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
font-size: var(--a-size);
|
||||
transition: all .3s ease 0s;
|
||||
}
|
||||
|
||||
.page-icon-text a:hover {
|
||||
color: var(--palette-pink);
|
||||
}
|
||||
|
||||
.page-icon-text a::after {
|
||||
content: "";
|
||||
display: block; /* Ensure the pseudo-element takes up space */
|
||||
position: absolute;
|
||||
height: 0.2rem;
|
||||
background-color: var(--palette-pink);
|
||||
width: 0%;
|
||||
transition: all .3s ease 0s;
|
||||
}
|
||||
|
||||
.page-icon-text a:hover::after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page-icon-text {
|
||||
color: var(--color-background);
|
||||
font-family: 'JetBrains Mono';
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.page-icon-text i {
|
||||
font-weight: 700;
|
||||
font-size: 1.6rem;
|
||||
color: var(--color-hiddentext);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.page-special svg {
|
||||
padding-left: 2rem;
|
||||
color: var(--color-hiddentext);
|
||||
}
|
||||
|
||||
.page-icon-text img, .page-icon-text svg {
|
||||
/* width: calc(calc(((var(--page-height)*var(--ratio-container-float))) - 4rem)*(1/4)); */
|
||||
width: 1.8rem;
|
||||
height: auto;
|
||||
padding-right: 2rem;
|
||||
}
|
||||
|
||||
.page-text {
|
||||
color: var(--color-hiddentext);
|
||||
font-family: 'JetBrains Mono';
|
||||
font-weight: 400;
|
||||
font-size: var(--p-size);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.page-overflow {
|
||||
max-height: 10rem;
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue