From dd02c39006a1105811ee3fbb71ab21b194e90d72 Mon Sep 17 00:00:00 2001 From: Felipe Vogt Date: Sun, 25 Feb 2024 14:34:18 -0300 Subject: [PATCH] feature: web in progess and fix urls --- src/components/Weakness.astro | 5 +++- src/layouts/Layout.astro | 53 ++++++++++++++++++++++++++++++++++- src/pages/index.astro | 5 +++- src/pages/persona/[key].astro | 8 ++++-- 4 files changed, 66 insertions(+), 5 deletions(-) diff --git a/src/components/Weakness.astro b/src/components/Weakness.astro index 1983ece..5b79420 100644 --- a/src/components/Weakness.astro +++ b/src/components/Weakness.astro @@ -1,4 +1,6 @@ --- +import { getBaseUrl } from '@utils/baseUrl'; + interface Props { weakness: string[]; } @@ -34,7 +36,7 @@ const WEAK_IMGS: { [key: number]: string } = { weakness.map((weak, index) => (
- + {WEAK_TEXTS[weak]}
@@ -87,6 +89,7 @@ const WEAK_IMGS: { [key: number]: string } = { .weak img { min-width: 40px; max-width: 40px; + aspect-ratio: 4 / 3; } .weak-container:nth-child(even) { diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 9e6be9a..da3ee1f 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -13,12 +13,20 @@ const { title, description } = Astro.props; - + {title} +
+
+
+
+ +
Web in Prgress!
+
+
@@ -68,4 +76,47 @@ const { title, description } = Astro.props; Courier New, monospace; } + + .webprogress { + position: fixed; + margin: 20px; + bottom: 0; + right: 0; + box-sizing: border-box; + text-decoration: none; + height: 70px; + padding: 5px 20px; + + display: flex; + flex-direction: column; + align-content: center; + justify-content: center; + align-items: center; + } + + .webprogress__content { + position: relative; + color: white; + font-weight: bold; + } + + .webprogress__background { + box-sizing: border-box; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: white; + padding: 5px; + transform: skew(-3deg, -0.3deg); + z-index: 0; + } + + .webprogress__background2 { + background-color: black; + transform: skew(2deg, 0.2deg); + width: 100%; + height: 100%; + } diff --git a/src/pages/index.astro b/src/pages/index.astro index 77d8f96..55786bc 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -7,7 +7,10 @@ import { PersonaList } from '../components/PersonaList/PersonaList'; const data: Personas = PERSONAS_ROYAL_DATA; --- - +
diff --git a/src/pages/persona/[key].astro b/src/pages/persona/[key].astro index ba7b222..6950bd8 100644 --- a/src/pages/persona/[key].astro +++ b/src/pages/persona/[key].astro @@ -4,6 +4,7 @@ import { PERSONAS_ROYAL_DATA } from '@data/personas.data'; import Layout from '@layouts/Layout.astro'; import Description from '@components/Description.astro'; import Weakness from '@components/Weakness.astro'; +import { getBaseUrl } from '@utils/baseUrl'; const { key } = Astro.params; @@ -55,7 +56,7 @@ export function getStaticPaths() {
- +
@@ -169,6 +170,7 @@ export function getStaticPaths() { .persona-detail__img { grid-column: 2 / span 1; grid-row: 3; + aspect-ratio: 1; } .persona-detail__img img { @@ -176,7 +178,9 @@ export function getStaticPaths() { object-fit: contain; display: block; margin: auto; - max-height: 500px; + max-height: 100%; + + filter: drop-shadow(7px 4px 0px white); } .stat__name {