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

Post is now reactive. Modified overlay.

Browse source
This commit is contained in:
Yohan Boujon 2024-08-14 00:08:18 +01:00
parent 870b6dbdfb
commit a600584907
8 changed files with 97 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
frontend/src/lib/components/post-min.svelte
View file

@ -19,8 +19,8 @@
let cursorY = 0;
let updateX = true;
function update_gradient(event) {
const rect = post_div.getBoundingClientRect();
function update_gradient(event, div) {
const rect = div.getBoundingClientRect();
if (updateX) {
cursorX = event.clientX - rect.left;
}
@ -28,15 +28,14 @@
post_div.style.backgroundImage = `radial-gradient(circle farthest-corner at ${Math.floor(cursorX)}px ${Math.floor(cursorY)}px, var(--color-background) 0%, #958a98 100%)`;
}
function animateForeground(isEntering) {
function animateForeground(isEntering, div_back) {
const targetOpacity = isEntering ? 1 : 0;
title_h1.style.textDecoration = isEntering ? 'underline 3px' : '';
anime({
targets: post_div,
targets: div_back,
opacity: [1 - targetOpacity, targetOpacity],
duration: 400,
easing: 'easeInOutQuad',
autoplay: true
easing: 'easeInOutQuad'
});
}
</script>
@ -44,12 +43,19 @@
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
class="post-container"
on:mousemove={update_gradient}
on:mouseenter={() => animateForeground(true)}
on:mouseleave={() => animateForeground(false)}
on:mousemove={(event) => {
update_gradient(event, post_div);
}}
on:mouseenter={() => {
animateForeground(true, post_div);
title_h1.style.textDecoration = 'underline 3px';
}}
on:mouseleave={() => {
animateForeground(false, post_div);
title_h1.style.textDecoration = '';
}}
>
<div class="post-foreground post-overlay" bind:this={post_div} />
<div class="post post-overlay">
<div class="post">
<img
alt="imgcool"
src={cover}
@ -73,4 +79,6 @@
</div>
</div>
</div>
<div class="post-overlay-front" />
<div class="post-overlay-back" bind:this={post_div} />
</div>

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

@ -37,6 +37,13 @@ h1 {
--z-index-normal: 0;
--z-index-front: 1;
--z-index-popup: 2;
--width-mobile: 875px;
/* https://clamp.font-size.app/
min=875px max=110px */
--1-rem: clamp(0.75rem, -0.2222rem + 1.7778vw, 1rem);
--1-2-rem: clamp(0.9rem, -0.2667rem + 2.1333vw, 1.2rem);
--1-6-rem: clamp(1.2rem, -0.3556rem + 2.8444vw, 1.6rem);
}
.title {
@ -117,6 +124,10 @@ h1 {
margin-left: 3rem;
}
.margin-right-2 {
margin-right: 2rem;
}
.margin-05 {
margin-left: 0.5rem;
}

1
frontend/src/lib/css/footer.css
View file

@ -59,6 +59,7 @@
font-family: 'JetBrains Mono';
padding-left: 2rem;
color: var(--color-hiddentext);
font-size: var(--1-rem);
}
.footer-slider div {

15
frontend/src/lib/css/footer/page.css
View file

@ -1,15 +1,14 @@
:root {
--a-size: 1.2rem;
--p-size: 1rem;
}
.page-icon-text a {
text-decoration: none;
position: relative;
font-size: var(--a-size);
font-size: var(--1-2-rem);
transition: all .3s ease 0s;
}
.page-icon-text h1 {
font-size: var(--1-6-rem);
}
.page-icon-text a:hover {
color: var(--palette-pink);
}
@ -39,7 +38,7 @@
.page-icon-text i {
font-weight: 700;
font-size: 1.6rem;
font-size: var(--1-6-rem);
color: var(--color-hiddentext);
cursor: default;
}
@ -60,7 +59,7 @@
color: var(--color-hiddentext);
font-family: 'JetBrains Mono';
font-weight: 400;
font-size: var(--p-size);
font-size: var(--1-rem);
display: flex;
align-items: center;
padding: 0.5rem;

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

@ -42,7 +42,7 @@ a {
grid-template-areas:
"navbar-overlay-back"
"navbar-overlay-front"
"navbar-content";
"content";
}
.navbar-overlay-front {

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

@ -1,38 +1,47 @@
:root {
/* min vp: 875px max vp: 1250px
min: 750ox max: 1125px */
--width-post: clamp(46.875rem, -7.8125rem + 100vw, 70.3125rem);
/* min vp: 875px max vp: 1250px
min: 5rem max: 15rem */
--width-pill: clamp(5rem, -18.3333rem + 42.6667vw, 15rem);
--ratio-picture: 0.5;
}
/* Post */
.post-container {
display: grid;
grid-template-areas:
"post-overlay-back"
"post-overlay-front"
"post";
height: 20rem;
width: 60rem;
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;
flex-direction: row;
margin-top: 3rem;
margin-bottom: 3rem;
position: relative;
background: linear-gradient(180deg, rgba(248, 241, 241, 1) 0%, rgba(221, 212, 223, 1) 100%);
width: var(--width-post);
}
.post-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 1rem;
.post-overlay-front {
grid-area: overlay;
background-image: linear-gradient(180deg, rgba(248, 241, 241, 1) 0%, rgba(221, 212, 223, 1) 100%);
border-radius: 0.5rem;
box-shadow: rgba(79, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
}
.post-foreground {
opacity: 0;
.post-overlay-back {
grid-area: overlay;
border-radius: 0.5rem;
}
.post {
cursor: pointer;
display: flex;
grid-area: overlay;
z-index: var(--z-index-front);
}
.post img {
width: auto;
max-width: 28rem;
max-width: calc(var(--ratio-picture)*var(--width-post));
height: 100%;
object-fit: cover;
border-top-left-radius: 1rem;
@ -44,12 +53,12 @@
.post-text {
font-family: 'JetBrains Mono';
margin: 1rem;
margin-right: 2rem;
justify-content: space-between;
display: flex;
flex-direction: column;
width: 100%;
margin: 1rem;
margin-right: 2rem;
}
.text-container {
@ -71,7 +80,6 @@
margin: 0.5rem;
height: 3rem;
flex-grow: 1;
width: 100%;
}
/*
@ -113,19 +121,15 @@
color: var(--color-background) !important;
}
/*
color: var(--color-text);
background: var(--color-background);
*/
.pill-reversed svg {
margin-left: 1.5rem;
margin-left: 1rem;
margin-right: 0;
}
h1 {
font-weight: 800;
font-size: 1.5rem;
font-size: var(--1-6-rem);
margin-top: 1rem;
margin-bottom: 1rem;
/* Overflow */
@ -148,13 +152,24 @@ h1 {
display: -webkit-box;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-line-clamp: 4;
line-clamp: 4;
}
.pill span {
font-size: 1rem;
font-size: var(--1-rem);
font-style: normal;
color: var(--color-text);
transition: all .4s ease 0s;
/* Overflow */
overflow: hidden;
white-space: nowrap;
text-overflow: ".";
max-width: var(--width-pill);
padding-right: 1rem;
}
.pill-reversed span {
padding-right: 0;
padding-left: 1rem;
}

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

@ -12,8 +12,7 @@
<h1>Etheryo Blog</h1>
{#if data != undefined}
<CarouselVertical posts={article.content} />
<!-- debug purpose -->
<div style="height: 100rem;"></div>
<div style="height: 6rem;"/>
{:else}
<p>Loading failed :c</p>
{/if}

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

@ -8,24 +8,21 @@
</script>
<div class="base">
<div class="margin-left-3">
<Post
cover="https://share.etheryo.fr/Rando-01.11.2023/Groupe%20Ombre%20Lac%20Montagne%20Rouge%20Bleu.jpg"
profile="https://cloud.etheryo.fr/s/JrKoP57R4qHcR4A/download/pfp.jpg"
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 class="blank" />
<Post
cover="https://share.etheryo.fr/Rando-01.11.2023/Groupe%20Ombre%20Lac%20Montagne%20Rouge%20Bleu.jpg"
profile="https://cloud.etheryo.fr/s/JrKoP57R4qHcR4A/download/pfp.jpg"
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 class="blank" />
<div class="margin-left-3">
<Search logo_size=48 />
<Search logo_size="48" />
</div>
<div class="blank" />
<div class="margin-left-3">
<Post />
</div>
<Post />
<div class="blank" />
<div class="margin-left-3">
<Archive />