From ab43e0ed7487fbd973038a296faa6348cd58de8e Mon Sep 17 00:00:00 2001 From: Yohan Boujon Date: Sat, 27 Jul 2024 17:16:40 +0100 Subject: [PATCH] Added PostMin. New post style. Added animejs and mdi packages. --- frontend/package-lock.json | 15 +- frontend/package.json | 3 +- frontend/src/lib/components/post-min.svelte | 76 ++++++++++ frontend/src/lib/css/base.css | 1 + frontend/src/lib/css/post.css | 160 ++++++++++++++++++++ 5 files changed, 251 insertions(+), 4 deletions(-) create mode 100644 frontend/src/lib/components/post-min.svelte create mode 100644 frontend/src/lib/css/post.css diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 456d4c2..2126065 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -10,7 +10,8 @@ "dependencies": { "@jamescoyle/svelte-icon": "^0.1.1", "@mdi/js": "^7.4.47", - "@sveltejs/adapter-node": "^5.0.1" + "@sveltejs/adapter-node": "^5.0.1", + "animejs": "^3.2.2" }, "devDependencies": { "@sveltejs/adapter-auto": "^3.0.0", @@ -382,7 +383,8 @@ "node_modules/@jamescoyle/svelte-icon": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/@jamescoyle/svelte-icon/-/svelte-icon-0.1.1.tgz", - "integrity": "sha512-7zDOSm3UQ4Onk2JWI4Zp8vjfK1pA8LQDBIBHRCuKB36kk+ZQY2/oXGIneVOyPJawVjRLkKK5Xv8hY0I2iyaiNQ==" + "integrity": "sha512-7zDOSm3UQ4Onk2JWI4Zp8vjfK1pA8LQDBIBHRCuKB36kk+ZQY2/oXGIneVOyPJawVjRLkKK5Xv8hY0I2iyaiNQ==", + "license": "MIT" }, "node_modules/@jridgewell/gen-mapping": { "version": "0.3.5", @@ -430,7 +432,8 @@ "node_modules/@mdi/js": { "version": "7.4.47", "resolved": "https://registry.npmjs.org/@mdi/js/-/js-7.4.47.tgz", - "integrity": "sha512-KPnNOtm5i2pMabqZxpUz7iQf+mfrYZyKCZ8QNz85czgEt7cuHcGorWfdzUMWYA0SD+a6Hn4FmJ+YhzzzjkTZrQ==" + "integrity": "sha512-KPnNOtm5i2pMabqZxpUz7iQf+mfrYZyKCZ8QNz85czgEt7cuHcGorWfdzUMWYA0SD+a6Hn4FmJ+YhzzzjkTZrQ==", + "license": "Apache-2.0" }, "node_modules/@polka/url": { "version": "1.0.0-next.25", @@ -819,6 +822,12 @@ "node": ">=0.4.0" } }, + "node_modules/animejs": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/animejs/-/animejs-3.2.2.tgz", + "integrity": "sha512-Ao95qWLpDPXXM+WrmwcKbl6uNlC5tjnowlaRYtuVDHHoygjtIPfDUoK9NthrlZsQSKjZXlmji2TrBUAVbiH0LQ==", + "license": "MIT" + }, "node_modules/aria-query": { "version": "5.3.0", "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index ba02074..3b1db1d 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -22,6 +22,7 @@ "dependencies": { "@jamescoyle/svelte-icon": "^0.1.1", "@mdi/js": "^7.4.47", - "@sveltejs/adapter-node": "^5.0.1" + "@sveltejs/adapter-node": "^5.0.1", + "animejs": "^3.2.2" } } diff --git a/frontend/src/lib/components/post-min.svelte b/frontend/src/lib/components/post-min.svelte new file mode 100644 index 0000000..a1c3aa7 --- /dev/null +++ b/frontend/src/lib/components/post-min.svelte @@ -0,0 +1,76 @@ + + + +
animateForeground(true)} + on:mouseleave={() => animateForeground(false)} +> +
+
+ 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 7f9ba81..19b6ad6 100644 --- a/frontend/src/lib/css/base.css +++ b/frontend/src/lib/css/base.css @@ -1,4 +1,5 @@ @import url('https://fonts.googleapis.com/css2?family=Gabarito:wght@500;700&family=Urbanist:wght@500;600;900&family=Sometype+Mono:wght@500&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap'); body, html { diff --git a/frontend/src/lib/css/post.css b/frontend/src/lib/css/post.css new file mode 100644 index 0000000..8f996d2 --- /dev/null +++ b/frontend/src/lib/css/post.css @@ -0,0 +1,160 @@ +/* Post */ + +.post-container { + 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%); +} + +.post-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: 1rem; +} + +.post-foreground { + opacity: 0; +} + +.post { + cursor: pointer; + display: flex; +} + +.post img { + width: auto; + max-width: 28rem; + height: 100%; + object-fit: cover; + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; + border-top-right-radius: 0.6rem; + border-bottom-right-radius: 0.6rem; + margin-right: 1rem; +} + +.post-text { + font-family: 'JetBrains Mono'; + margin: 1rem; + margin-right: 2rem; + justify-content: space-between; + display: flex; + flex-direction: column; + width: 100%; +} + +.text-container { + margin-top: 1rem; + margin-bottom: 1rem; + display: flex; + 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; + width: 100%; +} + +/* + 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; +} + +/* + color: var(--color-text); + background: var(--color-background); +*/ +.pill-reversed svg { + + margin-left: 1.5rem; + margin-right: 0; +} + +h1 { + font-weight: 800; + font-size: 1.5rem; + margin-top: 1rem; + margin-bottom: 1rem; + /* Overflow */ + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + text-overflow: ellipsis; + -webkit-line-clamp: 2; + line-clamp: 2; +} + +.post-text p { + font-size: 1rem; + font-style: italic; + color: var(--color-subtext); + text-align: justify; + text-justify: auto; + /* Overflow */ + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + text-overflow: ellipsis; + -webkit-line-clamp: 3; + line-clamp: 3; +} + +.pill span { + font-size: 1rem; + font-style: normal; + color: var(--color-text); + transition: all .4s ease 0s; +} \ No newline at end of file