diff --git a/frontend/src/lib/components/post-min.svelte b/frontend/src/lib/components/post-min.svelte index 563039d..622833e 100644 --- a/frontend/src/lib/components/post-min.svelte +++ b/frontend/src/lib/components/post-min.svelte @@ -19,8 +19,8 @@ let cursorY = 0; let updateX = true; - function update_gradient(event) { - const rect = post_div.getBoundingClientRect(); + function update_gradient(event, div) { + const rect = div.getBoundingClientRect(); if (updateX) { cursorX = event.clientX - rect.left; } @@ -28,15 +28,14 @@ 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) { + function animateForeground(isEntering, div_back) { const targetOpacity = isEntering ? 1 : 0; - title_h1.style.textDecoration = isEntering ? 'underline 3px' : ''; + anime({ - targets: post_div, + targets: div_back, opacity: [1 - targetOpacity, targetOpacity], duration: 400, - easing: 'easeInOutQuad', - autoplay: true + easing: 'easeInOutQuad' }); } @@ -44,12 +43,19 @@
animateForeground(true)} - on:mouseleave={() => animateForeground(false)} + 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 = ''; + }} > -
-
+
imgcool
+
+
diff --git a/frontend/src/lib/css/base.css b/frontend/src/lib/css/base.css index 4dfd8d5..3adeda8 100644 --- a/frontend/src/lib/css/base.css +++ b/frontend/src/lib/css/base.css @@ -37,6 +37,13 @@ h1 { --z-index-normal: 0; --z-index-front: 1; --z-index-popup: 2; + + --width-mobile: 875px; + /* https://clamp.font-size.app/ + min=875px max=110px */ + --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); } .title { @@ -117,6 +124,10 @@ h1 { margin-left: 3rem; } +.margin-right-2 { + margin-right: 2rem; +} + .margin-05 { margin-left: 0.5rem; } diff --git a/frontend/src/lib/css/footer.css b/frontend/src/lib/css/footer.css index 2601e55..94e2896 100644 --- a/frontend/src/lib/css/footer.css +++ b/frontend/src/lib/css/footer.css @@ -59,6 +59,7 @@ font-family: 'JetBrains Mono'; padding-left: 2rem; color: var(--color-hiddentext); + font-size: var(--1-rem); } .footer-slider div { diff --git a/frontend/src/lib/css/footer/page.css b/frontend/src/lib/css/footer/page.css index 5cfbfad..baf0a47 100644 --- a/frontend/src/lib/css/footer/page.css +++ b/frontend/src/lib/css/footer/page.css @@ -1,15 +1,14 @@ -:root { - --a-size: 1.2rem; - --p-size: 1rem; -} - .page-icon-text a { text-decoration: none; position: relative; - font-size: var(--a-size); + font-size: var(--1-2-rem); transition: all .3s ease 0s; } +.page-icon-text h1 { + font-size: var(--1-6-rem); +} + .page-icon-text a:hover { color: var(--palette-pink); } @@ -39,7 +38,7 @@ .page-icon-text i { font-weight: 700; - font-size: 1.6rem; + font-size: var(--1-6-rem); color: var(--color-hiddentext); cursor: default; } @@ -60,7 +59,7 @@ color: var(--color-hiddentext); font-family: 'JetBrains Mono'; font-weight: 400; - font-size: var(--p-size); + font-size: var(--1-rem); display: flex; align-items: center; padding: 0.5rem; diff --git a/frontend/src/lib/css/navbar.css b/frontend/src/lib/css/navbar.css index 91058fa..74c5ff3 100644 --- a/frontend/src/lib/css/navbar.css +++ b/frontend/src/lib/css/navbar.css @@ -42,7 +42,7 @@ a { grid-template-areas: "navbar-overlay-back" "navbar-overlay-front" - "navbar-content"; + "content"; } .navbar-overlay-front { diff --git a/frontend/src/lib/css/post.css b/frontend/src/lib/css/post.css index 8f996d2..7f89cb1 100644 --- a/frontend/src/lib/css/post.css +++ b/frontend/src/lib/css/post.css @@ -1,38 +1,47 @@ +:root { + /* 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; +} + /* Post */ .post-container { + display: grid; + grid-template-areas: + "post-overlay-back" + "post-overlay-front" + "post"; 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%); + width: var(--width-post); } -.post-overlay { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - border-radius: 1rem; +.post-overlay-front { + grid-area: overlay; + background-image: linear-gradient(180deg, rgba(248, 241, 241, 1) 0%, rgba(221, 212, 223, 1) 100%); + border-radius: 0.5rem; + box-shadow: rgba(79, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px; } -.post-foreground { - opacity: 0; +.post-overlay-back { + grid-area: overlay; + border-radius: 0.5rem; } .post { cursor: pointer; display: flex; + grid-area: overlay; + z-index: var(--z-index-front); } .post img { width: auto; - max-width: 28rem; + max-width: calc(var(--ratio-picture)*var(--width-post)); height: 100%; object-fit: cover; border-top-left-radius: 1rem; @@ -44,12 +53,12 @@ .post-text { font-family: 'JetBrains Mono'; - margin: 1rem; - margin-right: 2rem; justify-content: space-between; display: flex; flex-direction: column; width: 100%; + margin: 1rem; + margin-right: 2rem; } .text-container { @@ -71,7 +80,6 @@ margin: 0.5rem; height: 3rem; flex-grow: 1; - width: 100%; } /* @@ -113,19 +121,15 @@ color: var(--color-background) !important; } -/* - color: var(--color-text); - background: var(--color-background); -*/ .pill-reversed svg { - margin-left: 1.5rem; + margin-left: 1rem; margin-right: 0; } h1 { font-weight: 800; - font-size: 1.5rem; + font-size: var(--1-6-rem); margin-top: 1rem; margin-bottom: 1rem; /* Overflow */ @@ -148,13 +152,24 @@ h1 { display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; - -webkit-line-clamp: 3; - line-clamp: 3; + -webkit-line-clamp: 4; + line-clamp: 4; } .pill span { - font-size: 1rem; + 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/routes/articles/+page.svelte b/frontend/src/routes/articles/+page.svelte index f6ee807..b5ed49d 100644 --- a/frontend/src/routes/articles/+page.svelte +++ b/frontend/src/routes/articles/+page.svelte @@ -12,8 +12,7 @@

Etheryo Blog

{#if data != undefined} - -
+
{:else}

Loading failed :c

{/if} diff --git a/frontend/src/routes/style/+page.svelte b/frontend/src/routes/style/+page.svelte index f3317c7..ad8c7ec 100644 --- a/frontend/src/routes/style/+page.svelte +++ b/frontend/src/routes/style/+page.svelte @@ -8,24 +8,21 @@
-
- -
+
+
- +
-
- -
+