diff options
Diffstat (limited to 'src/layouts/Layout.astro')
| -rw-r--r-- | src/layouts/Layout.astro | 262 |
1 files changed, 138 insertions, 124 deletions
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index c8d3302..ff3a6cc 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -4,11 +4,11 @@ import "@fontsource-variable/sen"; import Header from "../partials/Header.astro"; import Footer from "../partials/Footer.astro"; import { getAbsoluteLocaleUrl } from "astro:i18n"; -import { getUrlWithoutLocale } from '../i18n'; +import { getUrlWithoutLocale } from "../i18n"; interface Props { - title: string; - description: string; + title: string; + description: string; } const { title, description } = Astro.props; @@ -17,156 +17,170 @@ const urlWithoutLocale = getUrlWithoutLocale(Astro.url.pathname); <!doctype html> <html lang={Astro.currentLocale}> - <head> - <meta charset="UTF-8" /> - <meta name="description" content={description} /> - <meta name="viewport" content="width=device-width" /> + <head> + <meta charset="UTF-8" /> + <meta name="description" content={description} /> + <meta name="viewport" content="width=device-width" /> - <link rel="canonical" href={Astro.url.toString().replace(/\.html$/, '')} /> - <link rel="alternate" hreflang="es" href={getAbsoluteLocaleUrl("es", urlWithoutLocale)} /> - <link rel="alternate" hreflang="en" href={getAbsoluteLocaleUrl("en", urlWithoutLocale)} /> - <link rel="alternate" hreflang="x-default" href={getAbsoluteLocaleUrl("es", urlWithoutLocale)} /> + <link rel="canonical" href={Astro.url.toString().replace(/\.html$/, "")} /> + <link + rel="alternate" + hreflang="es" + href={getAbsoluteLocaleUrl("es", urlWithoutLocale)} + /> + <link + rel="alternate" + hreflang="en" + href={getAbsoluteLocaleUrl("en", urlWithoutLocale)} + /> + <link + rel="alternate" + hreflang="x-default" + href={getAbsoluteLocaleUrl("es", urlWithoutLocale)} + /> - <link rel="alternate" type="application/rss+xml" href="/blog.xml" /> - <link rel="sitemap" type="application/xml" href="/sitemap-index.xml" /> + <link rel="alternate" type="application/rss+xml" href="/blog.xml" /> + <link rel="sitemap" type="application/xml" href="/sitemap-index.xml" /> - <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> - <link rel="icon" type="image/png" href="/favicon.png" /> - <link rel="apple-touch-icon" href="/favicon.png" /> + <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> + <link rel="icon" type="image/png" href="/favicon.png" /> + <link rel="apple-touch-icon" href="/favicon.png" /> - <meta property="og:title" content={title} /> - <meta property="og:description" content={description} /> - <meta property="og:type" content="website" /> - <meta property="og:url" content={Astro.url} /> - <meta property="og:image" content="/favicon.png" /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="og:type" content="website" /> + <meta property="og:url" content={Astro.url} /> + <meta property="og:image" content="/favicon.png" /> - <meta name="twitter:card" content="summary" /> - <meta name="twitter:title" content={title} /> - <meta name="twitter:description" content={description} /> - <meta name="twitter:image" content="/favicon.png" /> + <meta name="twitter:card" content="summary" /> + <meta name="twitter:title" content={title} /> + <meta name="twitter:description" content={description} /> + <meta name="twitter:image" content="/favicon.png" /> - <title>{title} - Ariel Costas</title> + <title>{title} - Ariel Costas</title> - <slot name="head-jsonld" /> - </head> - <body> - <Header /> - <main> - <slot /> - </main> - <Footer /> - </body> + <slot name="head-jsonld" /> + </head> + <body> + <Header /> + <main> + <slot /> + </main> + <Footer /> + </body> </html> <style is:global lang="scss"> - @use "../../styles/shared.scss" as *; - @use "sass:color"; + @use "../../styles/shared.scss" as *; + @use "sass:color"; - html, - body { - margin: 0; - padding: 0; - box-sizing: border-box; - } + html, + body { + margin: 0; + padding: 0; + box-sizing: border-box; + } - body { - min-height: 100vh; - max-width: 100vw; + body { + min-height: 100vh; + max-width: 100vw; - display: flex; - flex-direction: column; - gap: 1.5rem; + display: flex; + flex-direction: column; + gap: 1.5rem; - background: linear-gradient(to bottom, - #FFFFFF 0%, - $background 3rem, - $background 100% - ); - color: $dark; - } + background: linear-gradient( + to bottom, + #ffffff 0%, + $background 3rem, + $background 100% + ); + color: $dark; + } - a { - color: $accent; - } + a { + color: $accent; + } - *::selection { - background-color: color.adjust($accent, $alpha: -0.85); - } + *::selection { + background-color: color.adjust($accent, $alpha: -0.85); + } - li > time { - font-family: $monoFontStack; - } + li > time { + font-family: $monoFontStack; + } - div[role="alert"] { - padding: 1rem; - margin-block: 1rem; - border-radius: 0.5rem; - - &.note { - background-color: $noteBackground; - color: $noteText; - box-shadow: 0 0 0 1px $noteText; - } + div[role="alert"] { + padding: 1rem; + margin-block: 1rem; + border-radius: 0.5rem; - &.warning { - background-color: $warningBackground; - color: $warningText; - box-shadow: 0 0 0 1px $warningText; - } - } + &.note { + background-color: $noteBackground; + color: $noteText; + box-shadow: 0 0 0 1px $noteText; + } - main { - box-sizing: border-box; - margin-bottom: auto; + &.warning { + background-color: $warningBackground; + color: $warningText; + box-shadow: 0 0 0 1px $warningText; + } + } - align-self: center; + main { + box-sizing: border-box; + margin-bottom: auto; - max-width: 82ch; - font-size: 1.2rem; - - padding-block-end: 3rem; + align-self: center; - > p > code { - word-break: break-word; - font-family: $monoFontStack; + max-width: 82ch; + font-size: 1.2rem; - color: $accentDark; - background-color: #f6f6f6; - } + padding-block-end: 3rem; - p.meta { - display: block; - font-size: 0.85rem; - margin-bottom: 1rem; - } + > p > code { + word-break: break-word; + font-family: $monoFontStack; - pre { - overflow: scroll; - } - } + color: $accentDark; + background-color: #f6f6f6; + } - main a { - color: $accentDark; - } + p.meta { + display: block; + font-size: 0.85rem; + margin-bottom: 1rem; + } - footer a { - color: $accentLight; - } + pre { + overflow: scroll; + } + } - main a, footer a { - text-decoration: none; - padding: 0.1rem; - box-shadow: 0 1px $accent; + main a { + color: $accentDark; + } - &:hover { - box-shadow: 0 2px $accentDark; - } + footer a { + color: $accentLight; + } - &:focus { - color: $accentDark; - outline: none; - background-color: $secondary; - box-shadow: 0 4px #0b0c0c; - } - } + main a, + footer a { + text-decoration: none; + padding: 0.1rem; + box-shadow: 0 1px $accent; + + &:hover { + box-shadow: 0 2px $accentDark; + } + + &:focus { + color: $accentDark; + outline: none; + background-color: $secondary; + box-shadow: 0 4px #0b0c0c; + } + } </style> |