aboutsummaryrefslogtreecommitdiff
path: root/src/layouts/Layout.astro
diff options
context:
space:
mode:
authorAriel Costas Guerrero <ariel@costas.dev>2025-04-10 21:42:41 +0200
committerAriel Costas Guerrero <ariel@costas.dev>2025-04-10 21:42:41 +0200
commite3141794b95e534656427fadf0354435c62254d6 (patch)
tree95788249ac51475aea45ad17d7157dffd1564e47 /src/layouts/Layout.astro
parent3caee506c961ae0e78503164ed6a0f81db3c8c32 (diff)
Fix formatting
Diffstat (limited to 'src/layouts/Layout.astro')
-rw-r--r--src/layouts/Layout.astro262
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>
generated by cgit v1.3 (git 2.53.0) at 2026-04-12 06:06:25 +0000