Etheryo/blog
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Updated Navbar.

Browse source
This commit is contained in:
Yohan Boujon 2024-08-06 11:28:51 +01:00
parent 59845e4e54
commit c2c30a5b49
8 changed files with 337 additions and 175 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/lib/components/archive.svelte
View file

@ -2,7 +2,7 @@
import '$lib/css/base.css'; import '$lib/css/base.css';
import '$lib/css/archive.css'; import '$lib/css/archive.css';
import SvgIcon from '@jamescoyle/svelte-icon'; import SvgIcon from '@jamescoyle/svelte-icon';
import { mdiChevronRight, mdiHomeVariantOutline } from '@mdi/js'; import { mdiChevronRight } from '@mdi/js';
import anime from 'animejs'; import anime from 'animejs';
export let fontPost = 1; export let fontPost = 1;

132
frontend/src/lib/components/navbar.svelte Normal file
View file

@ -0,0 +1,132 @@
<!-- svelte-ignore a11y-missing-content -->
<script>
import '$lib/css/base.css';
import '$lib/css/navbar.css';
import { page } from '$app/stores';
import anime from 'animejs';
import Search from '$lib/components/search.svelte';
const SCROLL = 150;
$: pageUrl = $page.url.pathname;
let scrollY;
let cursorX;
let cursorY;
let navbar_title;
let navbar_category;
let navbar_search;
function isActive(str, url) {
if (url === str) return 'navbar-active';
else return '';
}
function isActiveMultiple(strArray, url) {
for (const str of strArray) {
const returnVal = isActive(str, url);
if (returnVal != '') return returnVal;
}
return '';
}
function update_gradient(event, div) {
const rect = div.getBoundingClientRect();
cursorX = event.clientX - rect.left;
cursorY = event.clientY - rect.top;
div.style.backgroundImage = `radial-gradient(circle farthest-corner at ${Math.floor(cursorX)}px ${Math.floor(cursorY)}px, var(--navbar-ligher) 0%, var(--navbar-darker) 100%)`;
}
function animateForeground(isEntering, div_back) {
const targetOpacity = isEntering ? 1 : 0;
anime({
targets: div_back,
opacity: [1 - targetOpacity, targetOpacity],
duration: 400,
easing: 'easeInOutQuad'
});
}
function changeScroll() {
document.documentElement.style.setProperty(
'--navbar-height',
scrollY < SCROLL ? '6rem' : '5rem'
);
}
</script>
<svelte:window bind:scrollY on:scroll={changeScroll} />
<!-- Navbar -->
<nav class={scrollY < SCROLL ? 'flex-row' : 'flex-row floating'}>
<div
role="banner"
class="navbar-height flex-row container"
on:mousemove={(event) => {
update_gradient(event, navbar_title);
}}
on:mouseenter={() => {
animateForeground(true, navbar_title);
}}
on:mouseleave={() => {
animateForeground(false, navbar_title);
}}
>
<div class="navbar-title content">
<h1>Etheryo Blog</h1>
</div>
<div class={scrollY < SCROLL ? 'navbar-overlay-front' : ''} />
<div class={scrollY < SCROLL ? 'navbar-overlay-back' : ''} bind:this={navbar_title} />
</div>
<div
role="banner"
class="navbar-height flex-row flex-end container"
on:mousemove={(event) => {
update_gradient(event, navbar_category);
}}
on:mouseenter={() => {
animateForeground(true, navbar_category);
}}
on:mouseleave={() => {
animateForeground(false, navbar_category);
}}
>
<div class="content navbar-categories">
<div>
<a class={isActiveMultiple(['/', '/articles', '/style'], pageUrl)} href="/articles"
>Articles</a
>
</div>
<div>
<a class={isActive('/authors', pageUrl)} href="/authors">Auteurs</a>
</div>
<div>
<a class={isActive('/categories', pageUrl)} href="/categories">Catégories</a>
</div>
</div>
<div class={scrollY < SCROLL ? 'navbar-overlay-front' : ''} />
<div class={scrollY < SCROLL ? 'navbar-overlay-back' : ''} bind:this={navbar_category} />
</div>
<div
role="banner"
class="navbar-height flex-row container"
on:mousemove={(event) => {
update_gradient(event, navbar_search);
}}
on:mouseenter={() => {
animateForeground(true, navbar_search);
}}
on:mouseleave={() => {
animateForeground(false, navbar_search);
}}
>
<div class="content navbar-search"><Search /></div>
<div class={scrollY < SCROLL ? 'navbar-overlay-front' : ''} />
<div class={scrollY < SCROLL ? 'navbar-overlay-back' : ''} bind:this={navbar_search} />
</div>
</nav>
<div class="navbar-fake" />

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

@ -80,6 +80,11 @@ h1 {
justify-content: center; justify-content: center;
} }
.center {
align-items: center;
justify-content: center;
}
.margin-padding-0 { .margin-padding-0 {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -93,3 +98,24 @@ h1 {
margin-top: 0.5rem; margin-top: 0.5rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
.margin-left-3 {
margin-left: 3rem;
}
.margin-05 {
margin-left: 0.5rem;
}
.padding-left-3 {
padding-left: 3rem;
}
.relative {
position: relative;
}
.inherit-w-h {
width: inherit;
height: inherit;
}

134
frontend/src/lib/css/navbar.css
View file

@ -1,13 +1,22 @@
:root {
--navbar-height: 6rem;
--transition: all .4s ease 0s;
--navbar-dark: #261C2CFF;
--navbar-darker: #261C2CFF;
--navbar-light: #413543FF;
--navbar-ligher: #413543FF;
--navbar-outline: 2px solid rgb(40, 32, 44, 0.5);
--navbar-inset: inset 0px 0px 0px 2px rgba(52, 42, 58, 0.5);
--navbar-blur: blur(0.6rem);
}
nav { nav {
height: 5rem; height: var(--navbar-height);
width: 100%; width: 100%;
position: fixed; position: fixed;
z-index: 5; z-index: 5;
transition: all .3s ease 0s; transition: var(--transition);
} padding-top: 0.5rem;
nav>div {
transition: all .3s ease 0s;
} }
a { a {
@ -16,38 +25,87 @@ a {
.navbar-background { .navbar-background {
border-radius: 0.5rem; border-radius: 0.5rem;
background-color: var(--color-text); background-image: linear-gradient(to right, var(--navbar-dark) 0%, var(--navbar-light) 100%);
height: 90%; height: 90%;
margin: 0.5rem; margin: 0.5rem;
} }
.navbar-fake { .navbar-fake {
height: 5rem; height: var(--navbar-height);
width: 100%; width: 100%;
} }
/* Background */
.container {
display: grid;
grid-template-areas:
"navbar-overlay-back"
"navbar-overlay-front"
"navbar-content";
}
.navbar-overlay-front {
grid-area: overlay;
background-image: linear-gradient(to right, var(--navbar-dark) 0%, var(--navbar-light) 100%);
width: inherit;
height: inherit;
border-radius: 0.5rem;
box-shadow: rgba(52, 42, 58, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, var(--navbar-inset);
outline: 2px solid rgb(40, 32, 44, 0.5);
}
.navbar-overlay-back {
grid-area: overlay;
width: inherit;
height: inherit;
border-radius: 0.5rem;
box-shadow: var(--navbar-inset);
outline: var(--navbar-outline)
}
.content {
grid-area: overlay;
z-index: 1;
width: inherit;
display: flex;
}
/* Each element */
.navbar-height {
height: var(--navbar-height);
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.navbar-title { .navbar-title {
width: 15rem; margin-left: 3rem;
justify-content: center; margin-right: 3rem;
} }
.navbar-title h1 { .navbar-title h1 {
color: var(--color-background); color: var(--color-background);
font-family: Gabarito; font-family: Gabarito;
font-weight: 700; font-weight: 700;
margin: 0 !important; cursor: default;
transition: var(--transition);
} }
.navbar-categories { .navbar-categories {
width: 25rem; align-items: center;
justify-content: center; height: var(--navbar-height);
padding-left: 1rem;
padding-right: 1rem;
} }
.navbar-categories a { .navbar-categories a {
text-decoration: none; text-decoration: none;
font-family: Gabarito; font-family: JetBrains Mono;
font-weight: 400; font-weight: 500;
font-size: 1rem;
transition: all .3s ease 0s; transition: all .3s ease 0s;
color: var(--color-background);
transition: var(--transition);
} }
.navbar-categories div { .navbar-categories div {
@ -61,22 +119,19 @@ a {
content: ""; content: "";
position: absolute; position: absolute;
width: 0; width: 0;
background-color: var(--palette-purple); background-color: var(--palette-pink);
transition: all .3s ease 0s; transition: all .3s ease 0s;
height: 3px; height: 3px;
} }
.navbar-categories-white>div>a::before,
.navbar-categories-white>div>a::after {
background-color: var(--palette-pink) !important;
}
.navbar-categories>div>a::before { .navbar-categories>div>a::before {
top: -6px; top: -3px;
height: 3px;
} }
.navbar-categories>div>a::after { .navbar-categories>div>a::after {
bottom: -6px; bottom: -3px;
height: 3px;
right: 0; right: 0;
} }
@ -86,17 +141,11 @@ a {
} }
.navbar-categories>div>a:hover { .navbar-categories>div>a:hover {
color: var(--palette-purple);
}
.navbar-categories-white>div>a:hover {
color: var(--palette-pink); color: var(--palette-pink);
} }
.navbar-search { .navbar-search {
align-items: center;
justify-content: center; justify-content: center;
text-align: center;
} }
.navbar-search input { .navbar-search input {
@ -123,39 +172,28 @@ a {
/* Floating */ /* Floating */
.floating { .floating {
background-color: rgba(248, 241, 241, 0.5); background-image: linear-gradient(to right, #241d25e5 0%, #3d2b47e5 100%);
box-shadow: #41354340 0px 8px 18px -1px; box-shadow: rgba(52, 42, 58, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
-webkit-backdrop-filter: blur(1rem); border-bottom-left-radius: 1rem;
backdrop-filter: blur(1rem); border-bottom-right-radius: 1rem;
height: 4rem; padding-top: 0;
-webkit-backdrop-filter: var(--navbar-blur);
backdrop-filter: var(--navbar-blur);
} }
.floating>div { .floating>div {
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: row; flex-direction: row;
color: var(--color-text);
}
.floating>div>h1 {
color: var(--color-text);
}
.floating>div>div>a {
color: var(--color-text);
} }
/* Active */ /* Active */
.navbar-active { .navbar-active {
color: var(--palette-pink); color: var(--palette-pink) !important;
cursor: default; cursor: default;
} }
.navbar-active-scroll {
color: var(--palette-purple) !important;
}
.navbar-active::after { .navbar-active::after {
width: 100% !important; width: 100% !important;
} }

46
frontend/src/lib/css/style.css
View file

@ -1,50 +1,4 @@
.base {
margin-left: 3rem;
}
.blank { .blank {
height: 10rem; height: 10rem;
background-color: #00000000; background-color: #00000000;
} }
/* Menu */
.menu-border {
background-image: -webkit-gradient(linear, right bottom, left bottom, color-stop(0, rgb(52, 42, 58)), color-stop(100, rgb(38, 28, 44)));
background-image: -webkit-linear-gradient(left, rgb(52, 42, 58) 0%, rgb(38, 28, 44) 100%);
background-image: -moz-linear-gradient(left, rgb(52, 42, 58) 0%, rgb(38, 28, 44) 100%);
background-image: -o-linear-gradient(left, rgb(52, 42, 58) 0%, rgb(38, 28, 44) 100%);
background-image: linear-gradient(to left, rgb(52, 42, 58) 0%, rgb(38, 28, 44) 100%);
padding: 0.8rem;
width: 40rem;
border-radius: 1rem;
box-shadow: rgba(52, 42, 58, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}
.menu {
border-radius: 0.8rem;
background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0, rgb(52, 42, 58)), color-stop(100, rgb(38, 28, 44)));
background-image: -webkit-linear-gradient(right, rgb(52, 42, 58) 0%, rgb(38, 28, 44) 100%);
background-image: -moz-linear-gradient(right, rgb(52, 42, 58) 0%, rgb(38, 28, 44) 100%);
background-image: -o-linear-gradient(right, rgb(52, 42, 58) 0%, rgb(38, 28, 44) 100%);
background-image: linear-gradient(to right, rgb(52, 42, 58) 0%, rgb(38, 28, 44) 100%);
justify-content: center;
align-items: center;
min-height: 10rem;
}
.menu p {
font-family: 'JetBrains Mono';
font-weight: 600;
margin: 0 !important;
font-size: 5rem;
color: var(--color-background);
filter: drop-shadow(0px 15px 25px rgba(0, 0, 0, 0.3)) drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.1));
}
.menu svg {
margin-right: 3rem;
color: var(--color-background);
filter: drop-shadow(rgba(0, 0, 0, 0.3) 0px 15px 25px) drop-shadow(rgba(0, 0, 0, 0.1) 0px 5px 10px);
}

57
frontend/src/routes/+layout.svelte
View file

@ -2,63 +2,10 @@
<script> <script>
import '$lib/css/base.css'; import '$lib/css/base.css';
import '$lib/css/navbar.css'; import '$lib/css/navbar.css';
import { page } from '$app/stores'; import Navbar from '$lib/components/navbar.svelte';
$: pageUrl = $page.url.pathname;
let scrollY;
function isActive(str, url, condition) {
if (url === str) return condition ? 'navbar-active' : 'navbar-active navbar-active-scroll';
else return '';
}
function isActiveMultiple(strArray, url, condition) {
for (const str of strArray) {
const returnVal = isActive(str, url, condition);
if (returnVal != '') return returnVal;
}
return '';
}
</script> </script>
<svelte:window bind:scrollY /> <Navbar/>
<!-- Navbar -->
<nav class={scrollY < 50 ? 'flex-row' : 'flex-row floating'}>
<div
class={scrollY < 50 ? 'navbar-title flex-row navbar-background shadow' : 'navbar-title h-100'}
>
<h1>Etheryo Blog</h1>
</div>
<div
class={scrollY < 50
? 'navbar-categories navbar-categories-white flex-row flex-end navbar-background shadow'
: 'flex-end navbar-categories h-100'}
>
<div>
<a class={isActiveMultiple(['/', '/articles'], pageUrl, scrollY < 50)} href="/articles"
>Articles</a
>
</div>
<div>
<a class={isActive('/authors', pageUrl, scrollY < 50)} href="/authors">Auteurs</a>
</div>
<div>
<a class={isActive('/categories', pageUrl, scrollY < 50)} href="/categories">Catégories</a>
</div>
<div>
<a class={isActive('/rss', pageUrl, scrollY < 50)} href="/rss">Flux RSS</a>
</div>
</div>
<div
class={scrollY < 50
? 'navbar-search navbar-background shadow'
: 'navbar-search navbar-search-floating h-100'}
>
<input type="text" placeholder="Rechercher..." />
</div>
</nav>
<div class="navbar-fake" />
<slot /> <slot />
<!-- Footer --> <!-- Footer -->

64
frontend/src/routes/old_layout.svelte Normal file
View file

@ -0,0 +1,64 @@
<!-- svelte-ignore a11y-missing-content -->
<script>
import '$lib/css/base.css';
import '$lib/css/navbar.css';
import { page } from '$app/stores';
$: pageUrl = $page.url.pathname;
let scrollY;
function isActive(str, url, condition) {
if (url === str) return condition ? 'navbar-active' : 'navbar-active navbar-active-scroll';
else return '';
}
function isActiveMultiple(strArray, url, condition) {
for (const str of strArray) {
const returnVal = isActive(str, url, condition);
if (returnVal != '') return returnVal;
}
return '';
}
</script>
<svelte:window bind:scrollY />
<!-- Navbar -->
<nav class={scrollY < 50 ? 'flex-row' : 'flex-row floating'}>
<div
class={scrollY < 50 ? 'navbar-title flex-row navbar-background shadow' : 'navbar-title h-100'}
>
<h1>Etheryo Blog</h1>
</div>
<div
class={scrollY < 50
? 'navbar-categories navbar-categories-white flex-row flex-end navbar-background shadow'
: 'flex-end navbar-categories h-100'}
>
<div>
<a class={isActiveMultiple(['/', '/articles'], pageUrl, scrollY < 50)} href="/articles"
>Articles</a
>
</div>
<div>
<a class={isActive('/authors', pageUrl, scrollY < 50)} href="/authors">Auteurs</a>
</div>
<div>
<a class={isActive('/categories', pageUrl, scrollY < 50)} href="/categories">Catégories</a>
</div>
<div>
<a class={isActive('/rss', pageUrl, scrollY < 50)} href="/rss">Flux RSS</a>
</div>
</div>
<div
class={scrollY < 50
? 'navbar-search navbar-background shadow'
: 'navbar-search navbar-search-floating h-100'}
>
<input type="text" placeholder="Rechercher..." />
</div>
</nav>
<div class="navbar-fake" />
<slot />
<!-- Footer -->

37
frontend/src/routes/style/+page.svelte
View file

@ -1,8 +1,6 @@
<script> <script>
import '$lib/css/base.css'; import '$lib/css/base.css';
import '$lib/css/style.css'; import '$lib/css/style.css';
import SvgIcon from '@jamescoyle/svelte-icon';
import { mdiAccount } from '@mdi/js';
import Post from '$lib/components/post-min.svelte'; import Post from '$lib/components/post-min.svelte';
import Search from '$lib/components/search.svelte'; import Search from '$lib/components/search.svelte';
@ -10,14 +8,9 @@
</script> </script>
<div class="base"> <div class="base">
<br /><br /> <div class="blank" />
<div class="menu-border"> <div class="blank" />
<div class="menu flex-row"> <div class="margin-left-3">
<SvgIcon type="mdi" path={mdiAccount} size="120"></SvgIcon>
<p>Test</p>
</div>
</div>
<div class="blank"></div>
<Post <Post
cover="https://share.etheryo.fr/Rando-01.11.2023/Groupe%20Ombre%20Lac%20Montagne%20Rouge%20Bleu.jpg" cover="https://share.etheryo.fr/Rando-01.11.2023/Groupe%20Ombre%20Lac%20Montagne%20Rouge%20Bleu.jpg"
profile="https://avatars.githubusercontent.com/u/115081848?v=4" profile="https://avatars.githubusercontent.com/u/115081848?v=4"
@ -26,12 +19,20 @@
author="Yohan boujon" author="Yohan boujon"
date="26/07/2024" date="26/07/2024"
/> />
<div class="blank"></div> </div>
<Search/> <div class="blank" />
<div class="blank"></div> <div class="margin-left-3">
<Post/> <Search />
<div class="blank"></div> </div>
<Archive/> <div class="blank" />
<div class="blank"></div> <div class="margin-left-3">
<div class="blank"></div> <Post />
</div>
<div class="blank" />
<div class="margin-left-3">
<Archive />
</div>
<div class="blank" />
</div> </div>