From 69dc2b1047f5721ce7889da7c869227d91b519f7 Mon Sep 17 00:00:00 2001 From: Yohan Boujon Date: Fri, 16 Aug 2024 22:36:27 +0100 Subject: [PATCH] Added post-min. --- frontend/src/lib/components/footer.svelte | 2 +- frontend/src/lib/components/post-min.svelte | 51 +++++-------- frontend/src/lib/components/post.svelte | 85 +++++++++++++++++++++ frontend/src/lib/css/base.css | 1 + frontend/src/lib/css/footer.css | 10 ++- frontend/src/lib/css/navbar.css | 2 +- frontend/src/lib/css/pill.css | 69 +++++++++++++++++ frontend/src/lib/css/post-min.css | 71 +++++++++++++++++ frontend/src/lib/css/post.css | 82 +------------------- frontend/src/lib/css/profile/base.css | 10 ++- frontend/src/routes/profile/+page.svelte | 20 ++++- frontend/src/routes/style/+page.svelte | 2 +- 12 files changed, 286 insertions(+), 119 deletions(-) create mode 100644 frontend/src/lib/components/post.svelte create mode 100644 frontend/src/lib/css/pill.css create mode 100644 frontend/src/lib/css/post-min.css diff --git a/frontend/src/lib/components/footer.svelte b/frontend/src/lib/components/footer.svelte index 258ed58..445bd54 100644 --- a/frontend/src/lib/components/footer.svelte +++ b/frontend/src/lib/components/footer.svelte @@ -44,7 +44,7 @@

Etheryo Blog

-
+
diff --git a/frontend/src/lib/components/post-min.svelte b/frontend/src/lib/components/post-min.svelte index 622833e..536440e 100644 --- a/frontend/src/lib/components/post-min.svelte +++ b/frontend/src/lib/components/post-min.svelte @@ -1,6 +1,8 @@ -
{ 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 = ''; }} > -
+
imgcool (updateX = false)} - on:mouseleave={() => (updateX = true)} + on:mouseenter={() => (updateY = false)} + on:mouseleave={() => (updateY = true)} /> -
-
-

{title}

-

{text}

-
-
-
- profile - {author} -
-
- {date} - -
-
+

{title}

+
+ + {date}
-
-
+
+
diff --git a/frontend/src/lib/components/post.svelte b/frontend/src/lib/components/post.svelte new file mode 100644 index 0000000..895fbdb --- /dev/null +++ b/frontend/src/lib/components/post.svelte @@ -0,0 +1,85 @@ + + + +
{ + 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 = ''; + }} +> +
+ imgcool (updateX = false)} + on:mouseleave={() => (updateX = true)} + /> +
+
+

{title}

+

{text}

+
+
+
+ profile + {author} +
+
+ {date} + +
+
+
+
+
+
+
diff --git a/frontend/src/lib/css/base.css b/frontend/src/lib/css/base.css index 6f28483..192523e 100644 --- a/frontend/src/lib/css/base.css +++ b/frontend/src/lib/css/base.css @@ -43,6 +43,7 @@ h1 { --border-min: 0.5rem; --border-max: 2rem; + --profile-content-width: 40rem; --width-mobile: 875px; /* https://clamp.font-size.app/ diff --git a/frontend/src/lib/css/footer.css b/frontend/src/lib/css/footer.css index 9cea123..167282c 100644 --- a/frontend/src/lib/css/footer.css +++ b/frontend/src/lib/css/footer.css @@ -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; diff --git a/frontend/src/lib/css/navbar.css b/frontend/src/lib/css/navbar.css index acb9331..45bd890 100644 --- a/frontend/src/lib/css/navbar.css +++ b/frontend/src/lib/css/navbar.css @@ -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; diff --git a/frontend/src/lib/css/pill.css b/frontend/src/lib/css/pill.css new file mode 100644 index 0000000..1c5cfee --- /dev/null +++ b/frontend/src/lib/css/pill.css @@ -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; +} \ No newline at end of file diff --git a/frontend/src/lib/css/post-min.css b/frontend/src/lib/css/post-min.css new file mode 100644 index 0000000..3ea70bc --- /dev/null +++ b/frontend/src/lib/css/post-min.css @@ -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); +} \ No newline at end of file diff --git a/frontend/src/lib/css/post.css b/frontend/src/lib/css/post.css index dbec741..47292ae 100644 --- a/frontend/src/lib/css/post.css +++ b/frontend/src/lib/css/post.css @@ -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; } \ No newline at end of file diff --git a/frontend/src/lib/css/profile/base.css b/frontend/src/lib/css/profile/base.css index 3754635..49b3a65 100644 --- a/frontend/src/lib/css/profile/base.css +++ b/frontend/src/lib/css/profile/base.css @@ -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; diff --git a/frontend/src/routes/profile/+page.svelte b/frontend/src/routes/profile/+page.svelte index d2c181c..34c7b2e 100644 --- a/frontend/src/routes/profile/+page.svelte +++ b/frontend/src/routes/profile/+page.svelte @@ -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.

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.

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.

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.

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.

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.

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.';
@@ -27,5 +30,20 @@

À propos

{@html description}

+
+ + + +
diff --git a/frontend/src/routes/style/+page.svelte b/frontend/src/routes/style/+page.svelte index 024dcac..95e47fd 100644 --- a/frontend/src/routes/style/+page.svelte +++ b/frontend/src/routes/style/+page.svelte @@ -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';