repo para Dot Dager

.astro/icon.d.ts

@@ -1,5 +1,5 @@
 // Automatically generated by astro-icon
-// e5c0fc0eb3d33158f5f6f437f5db228377727e61d76a0a51b052e85ec3b5ea80
+// d2e8b05cdb428ab696e1a3a4db551b17472054c3f72d39ad2ccadff497902661
 
 declare module 'virtual:astro-icon' {
 	export type Icon = 
@@ -66,7 +66,13 @@ declare module 'virtual:astro-icon' {
 		| "ion:arrow-down-circle"
 		| "ion:arrow-down-circle-outline"
 		| "ion:arrow-down-circle-sharp"
+		| "ion:arrow-down-left-box"
+		| "ion:arrow-down-left-box-outline"
+		| "ion:arrow-down-left-box-sharp"
 		| "ion:arrow-down-outline"
+		| "ion:arrow-down-right-box"
+		| "ion:arrow-down-right-box-outline"
+		| "ion:arrow-down-right-box-sharp"
 		| "ion:arrow-down-sharp"
 		| "ion:arrow-expand"
 		| "ion:arrow-forward"
@@ -110,7 +116,13 @@ declare module 'virtual:astro-icon' {
 		| "ion:arrow-up-circle"
 		| "ion:arrow-up-circle-outline"
 		| "ion:arrow-up-circle-sharp"
+		| "ion:arrow-up-left-box"
+		| "ion:arrow-up-left-box-outline"
+		| "ion:arrow-up-left-box-sharp"
 		| "ion:arrow-up-outline"
+		| "ion:arrow-up-right-box"
+		| "ion:arrow-up-right-box-outline"
+		| "ion:arrow-up-right-box-sharp"
 		| "ion:arrow-up-sharp"
 		| "ion:asterisk"
 		| "ion:at"
@@ -193,6 +205,9 @@ declare module 'virtual:astro-icon' {
 		| "ion:bicycle"
 		| "ion:bicycle-outline"
 		| "ion:bicycle-sharp"
+		| "ion:binoculars"
+		| "ion:binoculars-outline"
+		| "ion:binoculars-sharp"
 		| "ion:bluetooth"
 		| "ion:bluetooth-outline"
 		| "ion:bluetooth-sharp"
@@ -1301,6 +1316,7 @@ declare module 'virtual:astro-icon' {
 		| "ion:logo-amplify"
 		| "ion:logo-android"
 		| "ion:logo-angular"
+		| "ion:logo-appflow"
 		| "ion:logo-apple"
 		| "ion:logo-apple-appstore"
 		| "ion:logo-apple-ar"
@@ -1372,6 +1388,7 @@ declare module 'virtual:astro-icon' {
 		| "ion:logo-stencil"
 		| "ion:logo-tableau"
 		| "ion:logo-tiktok"
+		| "ion:logo-trapeze"
 		| "ion:logo-tumblr"
 		| "ion:logo-tux"
 		| "ion:logo-twitch"
@@ -1387,6 +1404,7 @@ declare module 'virtual:astro-icon' {
 		| "ion:logo-whatsapp"
 		| "ion:logo-windows"
 		| "ion:logo-wordpress"
+		| "ion:logo-x"
 		| "ion:logo-xbox"
 		| "ion:logo-xing"
 		| "ion:logo-yahoo"

.astro/settings.json

@@ -0,0 +1,5 @@
+{
+	"_variables": {
+		"lastUpdateCheck": 1732223582946
+	}
+}

.astro/types.d.ts

@@ -0,0 +1 @@
+/// <reference types="astro/client" />

src/components/Card.astro

@@ -0,0 +1,61 @@
+---
+interface Props {
+	title: string;
+	body: string;
+	href: string;
+}
+
+const { href, title, body } = Astro.props;
+---
+
+<li class="link-card">
+	<a href={href}>
+		<h2>
+			{title}
+			<span>&rarr;</span>
+		</h2>
+		<p>
+			{body}
+		</p>
+	</a>
+</li>
+<style>
+	.link-card {
+		list-style: none;
+		display: flex;
+		padding: 1px;
+		background-color: #23262d;
+		background-image: none;
+		background-size: 400%;
+		border-radius: 7px;
+		background-position: 100%;
+		transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
+	}
+	.link-card > a {
+		width: 100%;
+		text-decoration: none;
+		line-height: 1.4;
+		padding: calc(1.5rem - 1px);
+		border-radius: 8px;
+		color: white;
+		background-color: #23262d;
+		opacity: 0.8;
+	}
+	h2 {
+		margin: 0;
+		font-size: 1.25rem;
+		transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+	}
+	p {
+		margin-top: 0.5rem;
+		margin-bottom: 0;
+	}
+	.link-card:is(:hover, :focus-within) {
+		background-position: 0;
+		background-image: var(--accent-gradient);
+	}
+	.link-card:is(:hover, :focus-within) h2 {
+		color: rgb(var(--accent-light));
+	}
+</style>

src/layouts/Layout.astro

@@ -0,0 +1,110 @@
+---
+import "@astrojs/tailwind/base.css";
+import "../assets/scss/globals.scss";
+import SiteMeta from "../components/SiteMeta.astro";
+import Header from "../components/Header.astro";
+import Footer from "../components/Footer.astro";
+
+const {
+  title = "Astro",
+  description = "A starter project with accessibility features using Astro static site builder. Contains accessible landmarks, skip links, a dark mode color scheme, better focus outline and keyboard menu navigation.",
+  url,
+  image = "/social-preview-image.png",
+  author = "Mark Teekman",
+} = Astro.props;
+---
+
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+
+    <!-- favicon -->
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+
+    <SiteMeta
+      title={title}
+      description={description.substring(0, 100)}
+      url={Astro.site
+        ? `${Astro.site}/${title.toLowerCase().replaceAll(" ", "-")}`
+        : `https://accessible-astro.dev/${title.toLowerCase().replaceAll(" ", "-")}`}
+      image={image}
+      author={author}
+    />
+  </head>
+  <body>
+    <Header />
+    <main id="main-content" transition:animate="fade">
+      <slot />
+    </main>
+    <Footer />
+    <style lang="scss" is:global>
+      // theme settings
+      :root {
+        --radius-small: 3px;
+        --radius-large: 6px;
+        --gap-default: 2rem;
+        --font-measure: 70ch;
+        --font-family-default: "Open Sans", sans-serif;
+        --font-family-special: "Open Sans", sans-serif;
+        // light theme
+        --font-color: var(--neutral-900);
+        --action-color: var(--primary-300);
+        --action-color-state: var(--primary-500);
+        --background: var(--neutral-100);
+        --primary-background: var(--primary-100);
+        --neutral-background: var(--neutral-200);
+      }
+
+      // dark color scheme overrides
+      .darkmode {
+        --font-color: var(--neutral-100);
+        --action-color: var(--secondary-100);
+        --action-color-state: var(--secondary-500);
+        --background: var(--dark-100);
+        --primary-background: var(--primary-500);
+        --neutral-background: var(--neutral-900);
+      }
+
+      // sticky footer on low content pages
+      html,
+      body {
+        height: 100%;
+        overflow-x: hidden;
+      }
+
+      body {
+        display: flex;
+        flex-direction: column;
+        color: var(--font-color);
+        background-color: var(--background);
+
+        main {
+          flex: 1 0 auto;
+        }
+
+        footer {
+          flex-shrink: 0;
+        }
+      }
+
+      pre {
+        padding: 1rem;
+        border-radius: 0.35rem;
+        border: 2px solid var(--action-color);
+      }
+
+      body .pagination a {
+        &:hover,
+        &:focus-visible {
+          background-color: var(--action-color-state);
+
+          svg path {
+            stroke: white;
+          }
+        }
+      }
+    </style>
+  </body>
+</html>

tailwind.conf.js

@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+  darkMode: ["class", ".darkmode"],
+};

tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "astro/tsconfigs/strict"
+}