+
{author}
-
+
{date}
diff --git a/frontend/src/lib/css/base.css b/frontend/src/lib/css/base.css
index bf78161..dcdd0d5 100644
--- a/frontend/src/lib/css/base.css
+++ b/frontend/src/lib/css/base.css
@@ -12,6 +12,13 @@ html {
h1 {
margin-top: 0.5rem;
margin-bottom: 1rem;
+ font-weight: 800;
+ font-size: var(--2-rem);
+}
+
+h2 {
+ font-weight: 600;
+ font-size: var(--1-4-rem);
}
:root {
@@ -50,10 +57,11 @@ h1 {
--width-min-desktop: 1275px;
--width-mobile: 875px;
/* https://clamp.font-size.app/
- min=875px max=110px */
+ min=875px max=1100px */
--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);
+ --2-rem: clamp(1.4rem, -0.834rem + 4.0851vw, 2rem);
--navbar-height: 6rem;
}
diff --git a/frontend/src/lib/css/post.css b/frontend/src/lib/css/post.css
index 47292ae..2054d27 100644
--- a/frontend/src/lib/css/post.css
+++ b/frontend/src/lib/css/post.css
@@ -1,10 +1,31 @@
:root {
- /* min vp: 875px max vp: 1250px
- min: 750ox max: 1125px */
- --width-post: clamp(46.875rem, -7.8125rem + 100vw, 70.3125rem);
+ --width-max-post: 60rem;
+ --width-min-post: 50rem;
+ --height-post: 20rem;
+ --width-picture: 25rem;
--ratio-picture: 0.5;
}
+@media screen and (max-width: 1075px) {
+ .post-container {
+ width: var(--width-min-post);
+ }
+
+ .post-text {
+ width: calc(var(--width-min-post) - var(--width-picture) - 4rem);
+ }
+}
+
+@media screen and (min-width: 1076px) {
+ .post-container {
+ width: var(--width-max-post);
+ }
+
+ .post-text {
+ width: calc(var(--width-max-post) - var(--width-picture) - 4rem);
+ }
+}
+
/* Post */
.post-container {
@@ -13,8 +34,7 @@
"post-overlay-back"
"post-overlay-front"
"post";
- height: 20rem;
- width: var(--width-post);
+ height: var(--height-post);
}
.post-overlay-front {
@@ -37,9 +57,8 @@
}
.post img {
- width: auto;
- max-width: calc(var(--ratio-picture)*var(--width-post));
- height: 100%;
+ width: var(--width-picture);
+ height: var(--height-post);
object-fit: cover;
border-top-left-radius: 1rem;
border-bottom-left-radius: 1rem;
@@ -53,7 +72,6 @@
justify-content: space-between;
display: flex;
flex-direction: column;
- width: 100%;
margin: 1rem;
margin-right: 2rem;
}
@@ -90,12 +108,10 @@ h1 {
display: -webkit-box;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
- -webkit-line-clamp: 4;
- line-clamp: 4;
+ -webkit-line-clamp: 3;
+ line-clamp: 3;
}
-.post-pill {
- height: 3rem;
- width: fit-content;
- flex-grow: 1;
+.post-author-pill {
+ width: 100%;
}
\ 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 e6f3bb3..bf4f8fe 100644
--- a/frontend/src/lib/css/profile/base.css
+++ b/frontend/src/lib/css/profile/base.css
@@ -31,8 +31,6 @@
}
.profile h1 {
- font-weight: 800;
- font-size: 2rem;
margin: 0;
}
@@ -100,6 +98,7 @@
margin-right: 1rem;
padding: 0.5rem;
border-radius: var(--border-min);
+ font-size: var(--1-2-rem);
}
.profile-slider {
diff --git a/frontend/src/routes/profile/+layout.svelte b/frontend/src/routes/profile/+layout.svelte
index 748a2d9..54704d7 100644
--- a/frontend/src/routes/profile/+layout.svelte
+++ b/frontend/src/routes/profile/+layout.svelte
@@ -23,10 +23,13 @@
function changeDir(click) {
const id = click.detail.id;
- goto(idUrl.getStr(id));
+ goto(idUrl.getStr(id), { noScroll: true });
}
+ let innerWidth;
+