diff --git a/frontend/src/lib/components/archive.svelte b/frontend/src/lib/components/archive.svelte index 078d3ac..a2c5b1c 100644 --- a/frontend/src/lib/components/archive.svelte +++ b/frontend/src/lib/components/archive.svelte @@ -7,6 +7,8 @@ export let fontPost = 1; export let paddingPost = 0.5; + export let width = "100%"; + const posts = { 'Août 2024': [ 'Est-ce que le lorem est Ipsum ?', @@ -97,24 +99,12 @@ duration: 200, easing: 'easeInOutQuad' }); - - if (isActive[index]) { - scrollToPosition(); - } - } - - function scrollToPosition() { - const rect = containerRef.getBoundingClientRect().top + window.scrollY; - window.scrollTo({ - top: rect, - behavior: 'smooth' - }); }
diff --git a/frontend/src/lib/components/social.svelte b/frontend/src/lib/components/social.svelte new file mode 100644 index 0000000..b5ec10f --- /dev/null +++ b/frontend/src/lib/components/social.svelte @@ -0,0 +1,108 @@ + + +
+

Liens

+ {#each social_list as s} + + {/each} +
diff --git a/frontend/src/lib/css/archive.css b/frontend/src/lib/css/archive.css index e47ca43..5d0d774 100644 --- a/frontend/src/lib/css/archive.css +++ b/frontend/src/lib/css/archive.css @@ -1,9 +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; - /* For now */ - width: 50%; border-radius: 1rem; color: var(--color-text); + background-image: var(--background-light); } .archive { @@ -27,6 +26,10 @@ display: none; } +.archive-post > div { + width: auto; +} + .archive-post span { /* Overflow */ overflow: hidden; diff --git a/frontend/src/lib/css/base.css b/frontend/src/lib/css/base.css index 192523e..25315c6 100644 --- a/frontend/src/lib/css/base.css +++ b/frontend/src/lib/css/base.css @@ -33,7 +33,8 @@ h1 { --palette-purple: #4B1E78; --palette-brown: #3c2317; - --background-light: linear-gradient(180deg, rgba(248, 241, 241, 1) 0%, rgba(221, 212, 223, 1) 100%); + --background-light: linear-gradient(180deg, rgba(248, 241, 241, 1) 0%, rgba(15, 11, 17, 0.1) 100%); + --background-dark: linear-gradient(180deg, rgba(248, 241, 241, 1) 0%, rgba(224, 217, 217, 1) 100%); --z-index-last: -1; --z-index-normal: 0; @@ -45,6 +46,7 @@ h1 { --border-max: 2rem; --profile-content-width: 40rem; + --width-min-desktop: 1275px; --width-mobile: 875px; /* https://clamp.font-size.app/ min=875px max=110px */ diff --git a/frontend/src/lib/css/button-slider.css b/frontend/src/lib/css/button-slider.css index eaa89fd..6042c98 100644 --- a/frontend/src/lib/css/button-slider.css +++ b/frontend/src/lib/css/button-slider.css @@ -2,7 +2,7 @@ display: flex; width: 100%; height: 3.5rem; - background: var(--background-light); + background: var(--background-dark); border-radius: 3rem; padding: 0 !important; } diff --git a/frontend/src/lib/css/post-min.css b/frontend/src/lib/css/post-min.css index 3ea70bc..a30b3e5 100644 --- a/frontend/src/lib/css/post-min.css +++ b/frontend/src/lib/css/post-min.css @@ -64,6 +64,10 @@ margin-top: auto !important; } +.post-min-pill span { + font-size: 0.8rem; +} + .post-min-pill svg { width: 1.2rem !important; height: 1.2rem !important; diff --git a/frontend/src/lib/css/profile/base.css b/frontend/src/lib/css/profile/base.css index 49b3a65..146efd3 100644 --- a/frontend/src/lib/css/profile/base.css +++ b/frontend/src/lib/css/profile/base.css @@ -16,6 +16,11 @@ margin: 0; } +.profile-title { + margin-bottom: 2rem !important; + margin-left: 2rem !important; +} + .profile p { text-align: justify; text-justify: auto; @@ -65,7 +70,7 @@ .profile-name { display: flex; - margin-top: 2rem; + height: 12rem; margin-left: calc(var(--picture-left) + var(--picture-width) + var(--picture-border)*2); } @@ -77,22 +82,32 @@ border-radius: var(--border-min); } -.profile-container { +.profile-main { width: 100%; display: flex; +} + +.profile-container { + display: flex; flex-direction: column; + margin-bottom: 2rem; + margin-left: 1rem; + margin-right: 1rem; +} + +.profile-container > div { + margin-bottom: 2rem; } .profile-post-container { display: flex; flex-direction: row; + width: calc(var(--profile-content-width) + 6rem); } /* Depending on media */ .profile-content { - margin-top: 8rem; - margin-bottom: 2rem; width: var(--profile-content-width); padding: 3rem; border-radius: 1rem; diff --git a/frontend/src/lib/css/social.css b/frontend/src/lib/css/social.css new file mode 100644 index 0000000..f1c2239 --- /dev/null +++ b/frontend/src/lib/css/social.css @@ -0,0 +1,63 @@ +:root { + --social-max-width: 20rem; + --social-min-width: 2rem; +} + +.social { + padding: 3rem; + padding-right: 2rem; + padding-left: 2rem; + 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; + background-image: var(--background-light); + width: var(--social-max-width); +} + +.social-link { + height: 2rem; + display: flex; + flex-direction: row; + margin-top: 1.2rem; + margin-bottom: 1.2rem; + cursor: pointer; + transition: all .3s ease 0s; +} + +.social-link img { + height: 2rem; + width: 2rem; +} + +.social-link a { + text-decoration: none; + position: relative; + color: var(--color-text); + margin-left: auto; + font-size: 1.4rem; + font-weight: 500; +} + +/* Underline links */ + +.social-link a:hover { + color: var(--social-color); +} + +.social-link a::after { + content: ""; + position: absolute; + width: 0; + background-color: var(--social-color); + transition: all .3s ease 0s; + height: 3px; +} + +.social-link a::after { + bottom: -3px; + height: 3px; + right: 0; +} + +.social-link a:hover::after { + width: 100%; +} \ No newline at end of file diff --git a/frontend/src/routes/profile/+page.svelte b/frontend/src/routes/profile/+page.svelte index 34c7b2e..dcf0e71 100644 --- a/frontend/src/routes/profile/+page.svelte +++ b/frontend/src/routes/profile/+page.svelte @@ -3,6 +3,8 @@ import '$lib/css/profile/base.css'; import PostMin from '$lib/components/post-min.svelte'; + import Social from '$lib/components/social.svelte'; + import Archive from '$lib/components/archive.svelte' let cover = 'https://share.etheryo.fr/Rando-01.11.2023/Groupe%20Ombre%20Lac%20Montagne%20Rouge%20Bleu.jpg'; @@ -25,25 +27,31 @@

{name}

{pronoun}
-
-
-

À propos

-

{@html description}

+
+
+ +

Archives

+
-
- - - +
+
+

À propos

+

{@html description}

+
+

Derniers articles

+
+ + + +