Updated Navbar.
This commit is contained in:
parent
59845e4e54
commit
c2c30a5b49
8 changed files with 337 additions and 175 deletions
|
|
@ -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
132
frontend/src/lib/components/navbar.svelte
Normal 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" />
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -92,4 +97,25 @@ h1 {
|
||||||
.margin-horizontal-05 {
|
.margin-horizontal-05 {
|
||||||
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;
|
||||||
}
|
}
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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);
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -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
64
frontend/src/routes/old_layout.svelte
Normal 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 -->
|
||||||
|
|
@ -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,28 +8,31 @@
|
||||||
</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>
|
<Post
|
||||||
<p>Test</p>
|
cover="https://share.etheryo.fr/Rando-01.11.2023/Groupe%20Ombre%20Lac%20Montagne%20Rouge%20Bleu.jpg"
|
||||||
</div>
|
profile="https://avatars.githubusercontent.com/u/115081848?v=4"
|
||||||
|
title="Le lorem est-il 'Ipsum' ? C'est une question que je me pose souvent"
|
||||||
|
text="Petit texte explicatif sans vraiment de grande importance, hormis le fait que ce soit le meilleur texte de tous les temps, après je ne suis pas ouvert au débat mais on peut essayer... bref"
|
||||||
|
author="Yohan boujon"
|
||||||
|
date="26/07/2024"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="blank"></div>
|
<div class="blank" />
|
||||||
<Post
|
<div class="margin-left-3">
|
||||||
cover="https://share.etheryo.fr/Rando-01.11.2023/Groupe%20Ombre%20Lac%20Montagne%20Rouge%20Bleu.jpg"
|
<Search />
|
||||||
profile="https://avatars.githubusercontent.com/u/115081848?v=4"
|
</div>
|
||||||
title="Le lorem est-il 'Ipsum' ? C'est une question que je me pose souvent"
|
<div class="blank" />
|
||||||
text="Petit texte explicatif sans vraiment de grande importance, hormis le fait que ce soit le meilleur texte de tous les temps, après je ne suis pas ouvert au débat mais on peut essayer... bref"
|
<div class="margin-left-3">
|
||||||
author="Yohan boujon"
|
<Post />
|
||||||
date="26/07/2024"
|
</div>
|
||||||
/>
|
|
||||||
<div class="blank"></div>
|
<div class="blank" />
|
||||||
<Search/>
|
<div class="margin-left-3">
|
||||||
<div class="blank"></div>
|
<Archive />
|
||||||
<Post/>
|
</div>
|
||||||
<div class="blank"></div>
|
|
||||||
<Archive/>
|
<div class="blank" />
|
||||||
<div class="blank"></div>
|
|
||||||
<div class="blank"></div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue