diff --git a/src/components/contactCard.astro b/src/components/contactCard.astro index 0a6ed12..1317487 100644 --- a/src/components/contactCard.astro +++ b/src/components/contactCard.astro @@ -24,15 +24,27 @@ const icon: string = `background-image: url('/assets/social/${image}.webp')` text-decoration: none; } + article div { + border-radius: 1.25rem; + background-size: contain; + display: flex; + align-items: center; + justify-content: center; + --size-value: 6.25rem; + width: var(--size-value); + height: var(--size-value); + } + article:hover span { - padding: 0.5rem 0.5rem; + border-radius: 1.25rem; + padding: 0 0.5rem; display: flex; align-items: center; justify-content: center; text-align: center; background-color: var(--c-darkgray); - height: 85%; - width: 100%; + height: calc(var(--size-value) + 0.1rem); + width: calc(var(--size-value) + 0.1rem); opacity: 90%; } @@ -51,16 +63,8 @@ const icon: string = `background-image: url('/assets/social/${image}.webp')` article span { display: none; } - - article div { - background-size: contain; - width: 100px; - height: 100px; - display: flex; - align-items: center; - justify-content: center; - } article { + border-radius: 1.25rem; display: flex; align-items: center; justify-content: center; diff --git a/src/components/navbar.astro b/src/components/navbar.astro index a8fe435..8653125 100644 --- a/src/components/navbar.astro +++ b/src/components/navbar.astro @@ -110,7 +110,7 @@ justify-self: top; } - @media (min-width: 1120px) { + @media (min-width: 1140px) { .mobile { display: none; } diff --git a/src/components/technologyCard.astro b/src/components/technologyCard.astro index b710ae2..55f2e8d 100644 --- a/src/components/technologyCard.astro +++ b/src/components/technologyCard.astro @@ -33,28 +33,32 @@ const icon: string = `background-image: url('/assets/technologies/${image}.webp' height: auto; width: auto; line-height: 100px; + border-radius: 1.25rem; } article:hover { transform: scale(var(--hover-scale)); } article > div { + border-radius: 1.25rem; display: flex; justify-content: center; align-items: center; background-size: contain; - width: 100px; - height: 100px; + --size-value: 6.25rem; + width: var(--size-value); + height: var(--size-value); } article:hover span { + border-radius: 1.25rem; padding: 0 0.5rem; display: flex; align-items: center; justify-content: center; text-align: center; background-color: var(--c-darkgray); - height: 100%; - width: 100%; + height: calc(var(--size-value) + 0.1rem); + width: calc(var(--size-value) + 0.1rem); opacity: 90%; } diff --git a/src/layouts/aboutSection.astro b/src/layouts/aboutSection.astro index ac19e08..cd89b5e 100644 --- a/src/layouts/aboutSection.astro +++ b/src/layouts/aboutSection.astro @@ -15,11 +15,17 @@ const { title } = Astro.props diff --git a/src/layouts/contactSection.astro b/src/layouts/contactSection.astro index 4519510..d872bc5 100644 --- a/src/layouts/contactSection.astro +++ b/src/layouts/contactSection.astro @@ -16,10 +16,16 @@ const { title } = Astro.props