Added basic navbar.
This commit is contained in:
parent
3e123e58f2
commit
a07ba08c78
4 changed files with 195 additions and 0 deletions
55
frontend/src/lib/css/base.css
Normal file
55
frontend/src/lib/css/base.css
Normal file
|
|
@ -0,0 +1,55 @@
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Gabarito:wght@400;700&family=Urbanist:wght@500;600;900&family=Sometype+Mono:wght@500&display=swap');
|
||||||
|
|
||||||
|
body,
|
||||||
|
html {
|
||||||
|
height: 100%;
|
||||||
|
background: var(--color-background);
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--color-title: #071952;
|
||||||
|
--color-subtitle: #0C356A;
|
||||||
|
--color-special: #0174BE;
|
||||||
|
--color-text: #261C2C;
|
||||||
|
--color-subtext: #413543;
|
||||||
|
--color-background: #F8F1F1;
|
||||||
|
--color-code: #ECE6F1;
|
||||||
|
--color-pill: #D0D4CA;
|
||||||
|
|
||||||
|
--palette-pink: #ad62aa;
|
||||||
|
--palette-red: #9A031E;
|
||||||
|
--palette-orange: #FF5B22;
|
||||||
|
--palette-yellow: #ff9843;
|
||||||
|
--palette-green: #0d9276;
|
||||||
|
--palette-purple: #4B1E78;
|
||||||
|
--palette-brown: #3c2317;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-start {
|
||||||
|
align-self: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-end {
|
||||||
|
margin-left: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shadow {
|
||||||
|
box-shadow: rgba(29, 74, 101, 0.376) 0px 8px 18px -1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h-100 {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
101
frontend/src/lib/css/navbar.css
Normal file
101
frontend/src/lib/css/navbar.css
Normal file
|
|
@ -0,0 +1,101 @@
|
||||||
|
nav {
|
||||||
|
height: 5rem;
|
||||||
|
width: 100%;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 5;
|
||||||
|
transition: all .3s ease 0s;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav > div {
|
||||||
|
transition: all .3s ease 0s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-background {
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
background-color: var(--color-text);
|
||||||
|
height: 90%;
|
||||||
|
margin: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-fake {
|
||||||
|
height: 5rem;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-title {
|
||||||
|
width: 15rem;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-title h1 {
|
||||||
|
color: var(--color-background);
|
||||||
|
font-family: Gabarito;
|
||||||
|
font-weight: 700;
|
||||||
|
margin: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-categories {
|
||||||
|
width: 25rem;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-categories a {
|
||||||
|
color: var(--color-background);
|
||||||
|
text-decoration: none;
|
||||||
|
font-family: Gabarito;
|
||||||
|
font-weight: 400;
|
||||||
|
margin-left: 1rem;
|
||||||
|
margin-right: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-search {
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-search input {
|
||||||
|
width: 10rem;
|
||||||
|
margin-right: 1rem;
|
||||||
|
margin-left: 1rem;
|
||||||
|
margin-top: calc((5rem / 2) - 1.2rem);
|
||||||
|
background-color: var(--color-text);
|
||||||
|
color: var(--color-background);
|
||||||
|
height: 1.5rem;
|
||||||
|
border: 2px solid;
|
||||||
|
border-color: var(--color-subtext);
|
||||||
|
border-radius: 2rem;
|
||||||
|
padding-left: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-search-floating input {
|
||||||
|
margin-top: 0 !important;
|
||||||
|
background-color: var(--color-background) !important;
|
||||||
|
color: var(--color-subtext) !important;
|
||||||
|
border-color: var(--color-pill) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Floating */
|
||||||
|
|
||||||
|
.floating {
|
||||||
|
background-color: rgba(248, 241, 241, 0.1);
|
||||||
|
box-shadow: rgba(0, 0, 0, 0.376) 0px 8px 18px -1px;
|
||||||
|
-webkit-backdrop-filter: blur(1rem);
|
||||||
|
backdrop-filter: blur(1rem);
|
||||||
|
height: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.floating > div {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: row;
|
||||||
|
color: var(--color-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.floating > div > h1 {
|
||||||
|
color: var(--color-text) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.floating > div > div > a {
|
||||||
|
color: var(--color-text) !important;
|
||||||
|
}
|
||||||
38
frontend/src/routes/+layout.svelte
Normal file
38
frontend/src/routes/+layout.svelte
Normal file
|
|
@ -0,0 +1,38 @@
|
||||||
|
<!-- svelte-ignore a11y-missing-content -->
|
||||||
|
<script>
|
||||||
|
import '$lib/css/base.css';
|
||||||
|
import '$lib/css/navbar.css';
|
||||||
|
|
||||||
|
let scrollY;
|
||||||
|
</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 flex-row flex-end navbar-background shadow' : 'flex-end navbar-categories h-100'}>
|
||||||
|
<div>
|
||||||
|
<a href="/">Articles</a>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a href="/">Auteurs</a>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a href="/">Catégories</a>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a href="/">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 -->
|
||||||
|
|
@ -23,6 +23,7 @@
|
||||||
{#each data as d}
|
{#each data as d}
|
||||||
<p>id: {d.id}</p>
|
<p>id: {d.id}</p>
|
||||||
{/each}
|
{/each}
|
||||||
|
<div style="height: 100rem;"></div>
|
||||||
{:else if hasLoadFailed}
|
{:else if hasLoadFailed}
|
||||||
<p>Loading failed :c</p>
|
<p>Loading failed :c</p>
|
||||||
{:else}
|
{:else}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue