Added post-min.
This commit is contained in:
parent
4526d02eed
commit
69dc2b1047
12 changed files with 286 additions and 119 deletions
|
|
@ -44,7 +44,7 @@
|
|||
<h1 class="title">Etheryo Blog</h1>
|
||||
</div>
|
||||
<div class="footer-right">
|
||||
<div class="page-base justify-center" bind:this={pageDiv}>
|
||||
<div class="footer-page justify-center" bind:this={pageDiv}>
|
||||
<svelte:component this={page[active]} />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
<script>
|
||||
import '$lib/css/base.css';
|
||||
import '$lib/css/post.css';
|
||||
import '$lib/css/pill.css';
|
||||
import '$lib/css/post-min.css';
|
||||
|
||||
import SvgIcon from '@jamescoyle/svelte-icon';
|
||||
import { mdiCalendarRange } from '@mdi/js';
|
||||
import anime from 'animejs';
|
||||
|
|
@ -8,23 +10,20 @@
|
|||
export let cover =
|
||||
'https://share.etheryo.fr/Rando-01.11.2023/Alix%20Mange%20Lac%20Rouge%20Bleu%20Orange%20Midi.jpg';
|
||||
export let title = 'Title';
|
||||
export let text = 'Little description.';
|
||||
export let author = 'Author';
|
||||
export let date = '01/01/1997';
|
||||
export let profile = 'https://i.pravatar.cc/300';
|
||||
|
||||
let post_div;
|
||||
let title_h1;
|
||||
let cursorX = 0;
|
||||
let cursorY = 0;
|
||||
let updateX = true;
|
||||
let updateY = true;
|
||||
|
||||
function update_gradient(event, div) {
|
||||
const rect = div.getBoundingClientRect();
|
||||
if (updateX) {
|
||||
cursorX = event.clientX - rect.left;
|
||||
if (updateY) {
|
||||
cursorY = event.clientY - rect.top;
|
||||
}
|
||||
cursorY = event.clientY - rect.top;
|
||||
cursorX = event.clientX - rect.left;
|
||||
post_div.style.backgroundImage = `radial-gradient(circle farthest-corner at ${Math.floor(cursorX)}px ${Math.floor(cursorY)}px, var(--color-background) 0%, #958a98 100%)`;
|
||||
}
|
||||
|
||||
|
|
@ -40,45 +39,35 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
<div
|
||||
class="post-container"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
class="post-min-container"
|
||||
on:mousemove={(event) => {
|
||||
update_gradient(event, post_div);
|
||||
}}
|
||||
on:mouseenter={() => {
|
||||
animateForeground(true, post_div);
|
||||
title_h1.style.textDecoration = 'underline 3px';
|
||||
title_h1.style.textDecoration = 'underline 2px';
|
||||
}}
|
||||
on:mouseleave={() => {
|
||||
animateForeground(false, post_div);
|
||||
title_h1.style.textDecoration = '';
|
||||
}}
|
||||
>
|
||||
<div class="post">
|
||||
<div class="post-min">
|
||||
<img
|
||||
alt="imgcool"
|
||||
src={cover}
|
||||
on:mouseenter={() => (updateX = false)}
|
||||
on:mouseleave={() => (updateX = true)}
|
||||
on:mouseenter={() => (updateY = false)}
|
||||
on:mouseleave={() => (updateY = true)}
|
||||
/>
|
||||
<div class="post-text">
|
||||
<div>
|
||||
<h1 bind:this={title_h1}>{title}</h1>
|
||||
<p>{text}</p>
|
||||
</div>
|
||||
<div class="text-container">
|
||||
<div class="pill pill-profile">
|
||||
<img alt="profile" src={profile} />
|
||||
<span>{author}</span>
|
||||
</div>
|
||||
<div class="pill pill-reversed">
|
||||
<span>{date}</span>
|
||||
<SvgIcon type="mdi" path={mdiCalendarRange} size="120"></SvgIcon>
|
||||
</div>
|
||||
</div>
|
||||
<h1 bind:this={title_h1}>{title}</h1>
|
||||
<div class="pill post-min-pill post-min-end">
|
||||
<SvgIcon type="mdi" path={mdiCalendarRange} size="120"></SvgIcon>
|
||||
<span>{date}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="post-overlay-front" />
|
||||
<div class="post-overlay-back" bind:this={post_div} />
|
||||
<div class="post-min-overlay-front" />
|
||||
<div class="post-min-overlay-back" bind:this={post_div} />
|
||||
</div>
|
||||
|
|
|
|||
85
frontend/src/lib/components/post.svelte
Normal file
85
frontend/src/lib/components/post.svelte
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
<script>
|
||||
import '$lib/css/base.css';
|
||||
import '$lib/css/pill.css';
|
||||
import '$lib/css/post.css';
|
||||
import SvgIcon from '@jamescoyle/svelte-icon';
|
||||
import { mdiCalendarRange } from '@mdi/js';
|
||||
import anime from 'animejs';
|
||||
|
||||
export let cover =
|
||||
'https://share.etheryo.fr/Rando-01.11.2023/Alix%20Mange%20Lac%20Rouge%20Bleu%20Orange%20Midi.jpg';
|
||||
export let title = 'Title';
|
||||
export let text = 'Little description.';
|
||||
export let author = 'Author';
|
||||
export let date = '01/01/1997';
|
||||
export let profile = 'https://i.pravatar.cc/300';
|
||||
|
||||
let post_div;
|
||||
let title_h1;
|
||||
let cursorX = 0;
|
||||
let cursorY = 0;
|
||||
let updateX = true;
|
||||
|
||||
function update_gradient(event, div) {
|
||||
const rect = div.getBoundingClientRect();
|
||||
if (updateX) {
|
||||
cursorX = event.clientX - rect.left;
|
||||
}
|
||||
cursorY = event.clientY - rect.top;
|
||||
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, div_back) {
|
||||
const targetOpacity = isEntering ? 1 : 0;
|
||||
|
||||
anime({
|
||||
targets: div_back,
|
||||
opacity: [1 - targetOpacity, targetOpacity],
|
||||
duration: 400,
|
||||
easing: 'easeInOutQuad'
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
<div
|
||||
class="post-container"
|
||||
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">
|
||||
<img
|
||||
alt="imgcool"
|
||||
src={cover}
|
||||
on:mouseenter={() => (updateX = false)}
|
||||
on:mouseleave={() => (updateX = true)}
|
||||
/>
|
||||
<div class="post-text">
|
||||
<div>
|
||||
<h1 bind:this={title_h1}>{title}</h1>
|
||||
<p>{text}</p>
|
||||
</div>
|
||||
<div class="text-container">
|
||||
<div class="pill pill-profile post-pill">
|
||||
<img alt="profile" src={profile} />
|
||||
<span>{author}</span>
|
||||
</div>
|
||||
<div class="pill pill-reversed post-pill">
|
||||
<span>{date}</span>
|
||||
<SvgIcon type="mdi" path={mdiCalendarRange} size="120"></SvgIcon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="post-overlay-front" />
|
||||
<div class="post-overlay-back" bind:this={post_div} />
|
||||
</div>
|
||||
|
|
@ -43,6 +43,7 @@ h1 {
|
|||
|
||||
--border-min: 0.5rem;
|
||||
--border-max: 2rem;
|
||||
--profile-content-width: 40rem;
|
||||
|
||||
--width-mobile: 875px;
|
||||
/* https://clamp.font-size.app/
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
:root {
|
||||
--ratio-container: 70%;
|
||||
--ratio-container: 0.7;
|
||||
--ratio-content: 50%;
|
||||
--height-footer: 25rem;
|
||||
}
|
||||
|
||||
.footer-container:before {
|
||||
|
|
@ -19,13 +20,14 @@
|
|||
flex-direction: column;
|
||||
margin-top: 3rem;
|
||||
padding-top: 2rem;
|
||||
height: fit-content;
|
||||
height: var(--height-footer);
|
||||
background-image: linear-gradient(to right, var(--navbar-dark) 0%, var(--navbar-light) 100%);
|
||||
box-shadow: rgba(72, 50, 93, 0.2) 0px 120px 60px -20px inset, rgba(0, 0, 0, 0.4) 0px 100px 60px -18px inset;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
width: inherit;
|
||||
height: calc(var(--ratio-container) * var(--height-footer));
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
|
@ -49,7 +51,7 @@
|
|||
|
||||
.footer-slider {
|
||||
width: inherit;
|
||||
height: calc(100% - var(--ratio-container));
|
||||
height: auto;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
}
|
||||
|
|
@ -65,7 +67,7 @@
|
|||
padding-right: 2rem;
|
||||
}
|
||||
|
||||
.page-base {
|
||||
.footer-page {
|
||||
min-height: 15rem;
|
||||
max-height: 15rem;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -146,7 +146,7 @@ a {
|
|||
/* Floating */
|
||||
|
||||
.floating {
|
||||
background-image: linear-gradient(to right, #241d25e5 0%, #3d2b47e5 100%);
|
||||
background-image: linear-gradient(to right, #241d25c4 0%, #3d2b47c4 100%);
|
||||
box-shadow: rgba(52, 42, 58, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
|
||||
border-bottom-left-radius: 2rem;
|
||||
border-bottom-right-radius: 2rem;
|
||||
|
|
|
|||
69
frontend/src/lib/css/pill.css
Normal file
69
frontend/src/lib/css/pill.css
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
.pill {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
font-weight: 600;
|
||||
background-color: #00000000;
|
||||
border-radius: 3rem;
|
||||
box-shadow: 0px 8px 18px -1px rgba(52, 42, 58, 0.2);
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
.pill-reversed {
|
||||
padding: 0 !important;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.pill img {
|
||||
border-radius: 100% !important;
|
||||
width: 3rem !important;
|
||||
height: 3rem !important;
|
||||
margin-right: 1rem !important;
|
||||
}
|
||||
|
||||
.pill svg {
|
||||
border-radius: 100% !important;
|
||||
width: 1.8rem !important;
|
||||
height: 1.8rem !important;
|
||||
padding: calc((3rem - 1.8rem)/2);
|
||||
color: var(--color-background);
|
||||
background: linear-gradient(180deg, rgb(52, 42, 58), rgb(38, 28, 44));
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.pill-profile {
|
||||
transition: all .4s ease 0s;
|
||||
}
|
||||
|
||||
.pill-profile:hover {
|
||||
background: var(--color-text);
|
||||
box-shadow: 0px 8px 18px -1px #413543A0;
|
||||
}
|
||||
|
||||
.pill-profile:hover span {
|
||||
color: var(--color-background) !important;
|
||||
}
|
||||
|
||||
.pill-reversed svg {
|
||||
|
||||
margin-left: 1rem;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.pill span {
|
||||
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;
|
||||
}
|
||||
71
frontend/src/lib/css/post-min.css
vendored
Normal file
71
frontend/src/lib/css/post-min.css
vendored
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
.post-min-container {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"post-min-overlay-back"
|
||||
"post-min-overlay-front"
|
||||
"post-min";
|
||||
height: calc(var(--profile-content-width)/2);
|
||||
width: calc((var(--profile-content-width) + 6rem - 4rem)/3);
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.post-min {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-area: overlay;
|
||||
height: calc(var(--profile-content-width)/2);
|
||||
z-index: var(--z-index-front);
|
||||
}
|
||||
|
||||
.post-min img {
|
||||
width: auto;
|
||||
max-height: calc(var(--profile-content-width)/4);
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
border-top-left-radius: 1rem;
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-left-radius: 0.6rem;
|
||||
border-bottom-right-radius: 0.6rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.post-min h1 {
|
||||
font-weight: 800;
|
||||
font-size: 1.1rem;
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
/* Overflow */
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-line-clamp: 3;
|
||||
line-clamp: 3;
|
||||
}
|
||||
|
||||
.post-min-overlay-front {
|
||||
grid-area: overlay;
|
||||
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;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.post-min-overlay-back {
|
||||
grid-area: overlay;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.post-min-pill {
|
||||
height: 2rem;
|
||||
width: auto;
|
||||
margin: 1rem;
|
||||
margin-top: auto !important;
|
||||
}
|
||||
|
||||
.post-min-pill svg {
|
||||
width: 1.2rem !important;
|
||||
height: 1.2rem !important;
|
||||
padding: calc((2rem - 1.2rem)/2);
|
||||
}
|
||||
|
|
@ -2,9 +2,6 @@
|
|||
/* 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;
|
||||
}
|
||||
|
||||
|
|
@ -68,65 +65,6 @@
|
|||
flex-direction: row;
|
||||
}
|
||||
|
||||
.pill {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
font-weight: 600;
|
||||
background-color: #00000000;
|
||||
border-radius: 3rem;
|
||||
width: fit-content;
|
||||
box-shadow: 0px 8px 18px -1px rgba(52, 42, 58, 0.2);
|
||||
margin: 0.5rem;
|
||||
height: 3rem;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
/*
|
||||
background: linear-gradient(90deg, rgb(52, 42, 58), rgb(38, 28, 44)) !important;
|
||||
color: var(--color-background);
|
||||
*/
|
||||
.pill-reversed {
|
||||
padding: 0 !important;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.pill img {
|
||||
border-radius: 100% !important;
|
||||
width: 3rem !important;
|
||||
height: 3rem !important;
|
||||
margin-right: 1rem !important;
|
||||
}
|
||||
|
||||
.pill svg {
|
||||
border-radius: 100% !important;
|
||||
width: 1.8rem !important;
|
||||
height: 1.8rem !important;
|
||||
padding: calc((3rem - 1.8rem)/2);
|
||||
color: var(--color-background);
|
||||
background: linear-gradient(180deg, rgb(52, 42, 58), rgb(38, 28, 44));
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.pill-profile {
|
||||
transition: all .4s ease 0s;
|
||||
}
|
||||
|
||||
.pill-profile:hover {
|
||||
background: var(--color-text);
|
||||
box-shadow: 0px 8px 18px -1px #413543A0;
|
||||
}
|
||||
|
||||
.pill-profile:hover span {
|
||||
color: var(--color-background) !important;
|
||||
}
|
||||
|
||||
.pill-reversed svg {
|
||||
|
||||
margin-left: 1rem;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-weight: 800;
|
||||
font-size: var(--1-6-rem);
|
||||
|
|
@ -156,20 +94,8 @@ h1 {
|
|||
line-clamp: 4;
|
||||
}
|
||||
|
||||
.pill span {
|
||||
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;
|
||||
.post-pill {
|
||||
height: 3rem;
|
||||
width: fit-content;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
|
@ -3,7 +3,6 @@
|
|||
--picture-width: 15rem;
|
||||
--picture-left: 5vw;
|
||||
--picture-border: 1.5rem;
|
||||
--content-width: 40rem;
|
||||
}
|
||||
|
||||
.profile {
|
||||
|
|
@ -81,13 +80,20 @@
|
|||
.profile-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.profile-post-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
/* Depending on media */
|
||||
|
||||
.profile-content {
|
||||
margin-top: 8rem;
|
||||
width: var(--content-width);
|
||||
margin-bottom: 2rem;
|
||||
width: var(--profile-content-width);
|
||||
padding: 3rem;
|
||||
border-radius: 1rem;
|
||||
box-shadow: rgba(79, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
|
||||
|
|
|
|||
|
|
@ -2,12 +2,15 @@
|
|||
import '$lib/css/base.css';
|
||||
import '$lib/css/profile/base.css';
|
||||
|
||||
import PostMin from '$lib/components/post-min.svelte';
|
||||
|
||||
let cover =
|
||||
'https://share.etheryo.fr/Rando-01.11.2023/Groupe%20Ombre%20Lac%20Montagne%20Rouge%20Bleu.jpg';
|
||||
let profile = 'https://cloud.etheryo.fr/s/JrKoP57R4qHcR4A/download/pfp.jpg';
|
||||
let name = 'Yohan Boujon';
|
||||
let pronoun = 'il/lui';
|
||||
let description = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Qui atque praesentium et culpa. Qui aliquam nobis error id praesentium quam reprehenderit.<br><br>Corrupti voluptas amet ut. Ratione neque fugit nam vel incidunt. Blanditiis sit vel et occaecati. Expedita necessitatibus sit et minima recusandae pariatur explicabo. Aspernatur nam laborum corrupti quisquam vero repellat soluta. Aliquid magni fugiat sint sunt. Natus ut architecto magni harum et quam. Eaque dicta quo ex inventore.<br><br>Aut odio et sunt et dicta quo non. Impedit debitis omnis in nihil. Deleniti quaerat aut quia molestias. Neque voluptatum deleniti dolore aliquam. Delectus saepe aliquam doloremque fugit voluptas laborum dolorem nobis. Eveniet est repellat autem sunt. Repudiandae repellendus incidunt est eveniet ut. Similique quis vero dolorum. Debitis dolores atque ullam quia repellat repudiandae. Consequuntur voluptatem quia vel repellendus sed asperiores. Modi rerum alias voluptatem in quia quasi quos et. Quae quisquam quis repellendus tenetur. Incidunt accusantium fugiat veritatis molestiae. Corporis nemo odio dolorem perferendis praesentium et impedit saepe.'
|
||||
let description =
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Qui atque praesentium et culpa. Qui aliquam nobis error id praesentium quam reprehenderit.<br><br>Corrupti voluptas amet ut. Ratione neque fugit nam vel incidunt. Blanditiis sit vel et occaecati. Expedita necessitatibus sit et minima recusandae pariatur explicabo. Aspernatur nam laborum corrupti quisquam vero repellat soluta. Aliquid magni fugiat sint sunt. Natus ut architecto magni harum et quam. Eaque dicta quo ex inventore.<br><br>Aut odio et sunt et dicta quo non. Impedit debitis omnis in nihil. Deleniti quaerat aut quia molestias. Neque voluptatum deleniti dolore aliquam. Delectus saepe aliquam doloremque fugit voluptas laborum dolorem nobis. Eveniet est repellat autem sunt. Repudiandae repellendus incidunt est eveniet ut. Similique quis vero dolorum. Debitis dolores atque ullam quia repellat repudiandae. Consequuntur voluptatem quia vel repellendus sed asperiores. Modi rerum alias voluptatem in quia quasi quos et. Quae quisquam quis repellendus tenetur. Incidunt accusantium fugiat veritatis molestiae. Corporis nemo odio dolorem perferendis praesentium et impedit saepe.';
|
||||
</script>
|
||||
|
||||
<div class="profile">
|
||||
|
|
@ -27,5 +30,20 @@
|
|||
<h1>À propos</h1>
|
||||
<p>{@html description}</p>
|
||||
</div>
|
||||
<div class="profile-post-container">
|
||||
<PostMin
|
||||
cover="https://share.etheryo.fr/Rando-01.11.2023/Groupe%20Ombre%20Lac%20Montagne%20Rouge%20Bleu.jpg"
|
||||
title="Le lorem est-il 'Ipsum' ? C'est une question que je me pose souvent"
|
||||
date="26/07/2024"
|
||||
/>
|
||||
<PostMin
|
||||
cover="https://share.etheryo.fr/Rando-01.11.2023/Vert%20Rouge%20Vue%20Montagne%20Aerien%20Ciel.jpg"
|
||||
title="Comment installer Linus Torvalds sur ma tablette?"
|
||||
date="13/03/2024"
|
||||
/>
|
||||
<PostMin
|
||||
title="Alix est beau"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
import '$lib/css/base.css';
|
||||
import '$lib/css/style.css';
|
||||
|
||||
import Post from '$lib/components/post-min.svelte';
|
||||
import Post from '$lib/components/post.svelte';
|
||||
import Search from '$lib/components/search.svelte';
|
||||
import Archive from '$lib/components/archive.svelte';
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue