diff options
Diffstat (limited to 'src/partials')
| -rw-r--r-- | src/partials/Footer.astro | 55 | ||||
| -rw-r--r-- | src/partials/Header.astro | 88 |
2 files changed, 82 insertions, 61 deletions
diff --git a/src/partials/Footer.astro b/src/partials/Footer.astro index 577a42d..96e857a 100644 --- a/src/partials/Footer.astro +++ b/src/partials/Footer.astro @@ -3,46 +3,57 @@ import t from "../i18n/es.json"; --- <footer> - <p> - Copyright © 2023-{new Date().getFullYear()} Ariel Costas Guerrero. { - t.footer.copyright - } - </p> + <div class="footer-content"> + <p> + Copyright © 2023-{new Date().getFullYear()} Ariel Costas Guerrero. { + t.footer.copyright + } + </p> - <p> - {t.footer.contentLicencedUnder} - <a href={`https://creativecommons.org/licenses/by-sa/4.0/deed.es`} - >CC BY-SA 4.0</a - >. + <p> + {t.footer.contentLicencedUnder} + <a href={`https://creativecommons.org/licenses/by-sa/4.0/deed.es`} + >CC BY-SA 4.0</a + >. - {t.footer.sourceCodeAvailableOn} - <a href="https://github.com/arielcostas/costasdev">GitHub</a> - {t.footer.andIsLicencedUnder} - <a href="https://joinup.ec.europa.eu/collection/eupl/eupl-text-11-12" - >{t.footer.eupl} 1.2</a - > - </p> + {t.footer.sourceCodeAvailableOn} + <a href="https://github.com/arielcostas/costasdev">GitHub</a> + {t.footer.andIsLicencedUnder} + <a href="https://joinup.ec.europa.eu/collection/eupl/eupl-text-11-12" + >{t.footer.eupl} 1.2</a + > + </p> + </div> </footer> <style lang="scss"> @use "../../styles/variables" as *; footer { - background-color: $dark; - color: $light; + background: #222; + color: #ccc; + font-size: 0.9rem; + border-top: 1px solid #000; + box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); vertical-align: middle; text-align: center; - padding: 0.5rem 1rem; + padding: 2rem 1rem; + + .footer-content { + max-width: 900px; + margin: 0 auto; + } a { - color: $accentLight; + color: white; + text-shadow: 0 1px 1px rgba(0,0,0,0.5); } p { - max-width: 60ch; margin-inline: auto; + margin-bottom: 0.5rem; } } </style> diff --git a/src/partials/Header.astro b/src/partials/Header.astro index 77c8166..ad95b25 100644 --- a/src/partials/Header.astro +++ b/src/partials/Header.astro @@ -64,8 +64,13 @@ import t from "../i18n/es.json"; @use "../../styles/variables" as *; header { - color: $accent; - padding: 1rem 2rem; + background: $accentDark; + border-bottom: 1px solid $accentLight; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); + padding: 0.5rem 1rem; + position: sticky; + top: 0; + z-index: 1000; .header-container { display: flex; @@ -80,53 +85,43 @@ import t from "../i18n/es.json"; margin-right: auto; .brand-link { - font-size: 1.8rem; - font-weight: 700; - font-variation-settings: "wdth" 87.5,"wght" 700,"GRAD" 150; + font-size: 1.5rem; + font-weight: 800; text-decoration: none; - background: linear-gradient(135deg, #0066cc 0%, #0099ff 50%, #00ccff 100%); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; - transition: filter 0.2s ease; - - &:hover { - filter: brightness(1.1); - } + color: white; + letter-spacing: -0.5px; .brand-accent { - background: linear-gradient(135deg, #0052a3 0%, #0066cc 50%, #0080ff 100%); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; + color: $secondary; } } } .nav-links { display: flex; - gap: 2rem; + gap: 0.5rem; align-items: center; a { text-decoration: none; - font-weight: 700; - font-size: 1.2rem; - text-transform: uppercase; - transition: - color 0.2s ease-in-out, - border-bottom-color 0.2s ease-in-out; - color: $accent; - line-height: 1; - border-bottom: 2px solid transparent; + font-weight: bold; + font-size: 0.95rem; + padding: 0.4rem 1rem; + border-radius: 20px; + color: white; + text-shadow: 0 -1px 0 rgba(0,0,0,0.3); + border: 1px solid transparent; &:hover { - color: $accentDark; - border-bottom-color: currentColor; + background: rgba(255, 255, 255, 0.2); + border: 1px solid rgba(255, 255, 255, 0.3); + box-shadow: inset 0 1px 0 rgba(255,255,255,0.2); } &.active { - color: $accentDark; + background: rgba(0, 0, 0, 0.15); + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3); + border: 1px solid rgba(0, 0, 0, 0.1); } } } @@ -135,17 +130,16 @@ import t from "../i18n/es.json"; display: none; flex-direction: column; justify-content: space-between; - width: 2rem; - height: 1.25rem; + width: 1.5rem; + height: 1rem; cursor: pointer; z-index: 10; .bar { - height: 3px; + height: 2px; width: 100%; - background-color: $accent; - border-radius: 3px; - transition: all 0.2s ease; + background-color: white; + border-radius: 2px; } &.active { @@ -189,17 +183,33 @@ import t from "../i18n/es.json"; width: 80%; max-width: 300px; height: 100vh; - background-color: $lightAlt; + background-color: rgba($lightAlt, 0.95); + backdrop-filter: blur(10px); flex-direction: column; justify-content: center; align-items: center; gap: 2rem; - transition: right 0.3s ease; box-shadow: $shadow; + border-left: 1px solid rgba(0,0,0,0.1); z-index: 5; a { font-size: 1.5rem; + color: $accentDark; + text-shadow: none; + width: 80%; + text-align: center; + + &:hover { + background: rgba($accent, 0.1); + border-color: rgba($accent, 0.2); + } + + &.active { + color: white; + background: $accent; + box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 2px 4px rgba(0,0,0,0.1); + } } &.active { |