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

Updated to only 'Etheryo'. Added base "link" component.

Browse source
This commit is contained in:
Yohan Boujon 2024-10-03 23:34:19 +02:00
parent 6cf1d654ca
commit c1a69f3346
17 changed files with 179 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -41,7 +41,7 @@
<div class="footer-container">
<div class="footer-content">
<div class="footer-left">
<h1 class="title">Etheryo Blog</h1>
<h1 class="title">Etheryo</h1>
</div>
<div class="footer-right">
<div class="footer-page justify-center" bind:this={pageDiv}>

11
frontend/src/lib/components/link.svelte Normal file
View file

@ -0,0 +1,11 @@
<script>
import '$lib/css/base.css';
import '$lib/css/link.css';
import SvgIcon from '$lib/components/svg-icon-custom.svelte';
import { mdiChevronRight } from '@mdi/js';
</script>
<div class="link-container flex-row center">
<span>Link</span>
<SvgIcon type="mdi" path={mdiChevronRight} size={80}></SvgIcon>
</div>

10
frontend/src/lib/components/navbar.svelte
View file

@ -10,7 +10,7 @@
const SCROLL = 150;
$: pageUrl = $page.url.pathname;
let scrollY;
let scrollY=0;
let cursorX;
let cursorY;
@ -62,7 +62,7 @@
<nav class={scrollY < SCROLL ? 'flex-row' : 'flex-row floating'}>
<div
role="banner"
class="navbar-height flex-row container"
class="{scrollY < SCROLL ? 'disabled' : 'navbar-height flex-row container'}"
on:mousemove={(event) => {
update_gradient(event, navbar_title);
}}
@ -74,10 +74,8 @@
}}
>
<div class="navbar-title content">
<h1 class="title">Etheryo Blog</h1>
<h1 class="title">Etheryo</h1>
</div>
<div class={scrollY < SCROLL ? 'navbar-overlay-front' : ''} />
<div class={scrollY < SCROLL ? 'navbar-overlay-back' : ''} bind:this={navbar_title} />
</div>
<div
@ -105,7 +103,7 @@
<div>
<a class={isActive('/categories', pageUrl)} href="/categories">Catégories</a>
</div>
<Search width="15rem" font_size="0.8rem" padding="0rem" logo_size=25/>
<Search width="15rem" font_size="0.8rem" padding="0rem" logo_size="25" />
</div>
<div class={scrollY < SCROLL ? 'navbar-overlay-front' : ''} />
<div class={scrollY < SCROLL ? 'navbar-overlay-back' : ''} bind:this={navbar_category} />

2
frontend/src/lib/css/archive.css
View file

@ -1,8 +1,8 @@
.archive-container {
box-shadow: rgba(52, 42, 58, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
border-radius: 1rem;
color: var(--color-text);
background-image: var(--background-light);
box-shadow: rgba(79, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
}
.archive {

29
frontend/src/lib/css/article.css
View file

@ -0,0 +1,29 @@
:root {
--banner-height: 60vh;
}
.article-banner {
display: grid;
grid-template-areas:
"article-banner-gradient"
"article-banner-content";
height: var(--banner-height);
width: 100dvw;
}
.article-banner-background {
grid-area: overlay;
width: 100dvw;
height: var(--banner-height);
z-index: var(--z-index-last);
background-image: linear-gradient(to right, var(--navbar-dark) 0%, var(--navbar-light) 100%);
border-bottom-left-radius: 2rem;
border-bottom-right-radius: 2rem;
box-shadow: rgba(79, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
}
.article-banner-content {
grid-area: overlay;
width: 100dvw;
height: var(--banner-height);
}

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

@ -77,6 +77,8 @@ h2 {
font-weight: 700;
cursor: default;
transition: var(--transition);
font-size: 1.5rem;
margin: 0;
}
.flex-row {
@ -173,4 +175,8 @@ h2 {
.text-justify {
text-align: justify;
text-justify: inter-word;
}
.disabled {
display: none !important;
}

52
frontend/src/lib/css/link.css Normal file
View file

@ -0,0 +1,52 @@
:root {
--link-color: #0174BE;
--line-size: 5px;
}
.link-container {
width: 60rem;
height: 20rem;
margin-bottom: 2rem;
margin-left: 1rem;
margin-right: 1rem;
box-shadow: rgba(79, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
}
.link-container svg {
margin-left: 1rem;
}
/* Link Underlined */
.link-container > span {
font-family: 'JetBrains Mono';
font-weight: 500;
font-size: 2.5rem;
text-decoration: none;
position: relative;
transition: all .3s ease 0s;
}
.link-container > span:hover {
cursor: pointer;
color: var(--link-color);
}
.link-container > span::after {
content: "";
position: absolute;
width: 0;
background-color: var(--link-color);
transition: all .3s ease 0s;
height: var(--line-size);
}
.link-container > span::after {
bottom: calc(0px - var(--line-size));
height: var(--line-size);
left: 0;
}
.link-container > span:hover::after {
width: 100%;
}

32
frontend/src/lib/css/main.css Normal file
View file

@ -0,0 +1,32 @@
:root {
--banner-height: 60vh;
}
.main-banner {
display: grid;
grid-template-areas:
"overlay";
width: 100%;
}
.main-banner-gradient {
grid-area: overlay;
background: linear-gradient(0deg, #00000000, #261C2C20 50%, #261c2c40 100%);
height: calc(var(--navbar-height)*2);
}
.main-banner-content {
grid-area: overlay;
margin-top: var(--navbar-height);
}
.main-banner-content img {
width: 40dvw;
}
.main-banner-content h1 {
color: var(--color-text);
font-family: Gabarito;
font-weight: 700;
font-size: 3rem;
}

2
frontend/src/lib/css/post.css
View file

@ -83,7 +83,7 @@
flex-direction: row;
}
h1 {
.post-text h1 {
font-weight: 800;
font-size: var(--1-6-rem);
margin-top: 1rem;

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

@ -1,9 +1,12 @@
<!-- svelte-ignore a11y-missing-content -->
<script>
import { page } from '$app/stores';
import '$lib/css/base.css';
import '$lib/css/navbar.css';
import Navbar from '$lib/components/navbar.svelte';
import Footer from '$lib/components/footer.svelte';
// $: pageUrl = $page.url.pathname;
</script>
<Navbar />

4
frontend/src/routes/+page.js
View file

@ -1,6 +1,8 @@
/*
import { redirect } from '@sveltejs/kit';
export async function load(context)
{
redirect(301, '/articles')
}
}
*/

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

@ -0,0 +1,21 @@
<script>
import '$lib/css/base.css';
import '$lib/css/main.css';
import Link from '$lib/components/link.svelte';
let img = 'placeholder.png';
</script>
<div class="main-banner">
<div class="main-banner-gradient" />
<div class="main-banner-content">
<div class="flex-row center">
<img alt="logo" src={img} />
<h1>Welcome to Etheryo</h1>
</div>
</div>
</div>
<!-- content -->
<div class="flex-col center">
<Link />
</div>

16
frontend/src/routes/articles/+page.svelte
View file

@ -1,19 +1,17 @@
<script>
import '$lib/css/base.css';
import '$lib/css/article.css';
import CarouselVertical from '$lib/components/carousel-vertical.svelte';
export let data;
// Database
const article = data.status == 0 ? data : undefined;
// article.content
</script>
<div>
<h1>Etheryo Blog</h1>
{#if data != undefined}
<CarouselVertical posts={article.content} />
<div style="height: 6rem;"/>
{:else}
<p>Loading failed :c</p>
{/if}
<div class="article-banner">
<div class="article-banner-background" />
<div class="article-banner-content">
<p>Prout</p>
</div>
</div>
<div style="height: 10rem;" />

2
frontend/src/routes/profile/+layout.svelte
View file

@ -32,7 +32,7 @@
<div class="profile">
<div class="profile-banner">
<div class="profile-banner-gradient"></div>
<div class="profile-banner-gradient" />
<div class="profile-banner-img"><img alt="banner" src={cover} /></div>
<div class="profile-banner-profile">
<img alt="profile" src={profile} />

6
frontend/src/routes/profile/+page.js Normal file
View file

@ -0,0 +1,6 @@
import { redirect } from '@sveltejs/kit';
export async function load()
{
throw redirect(301, '/profile/bio');
}

BIN
frontend/static/placeholder.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 44 KiB

BIN
frontend/static/placeholder_link.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 32 KiB