diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 7b552be..1bdd7b3 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -4,6 +4,8 @@ interface Props { } const { title } = Astro.props; + +import '../styles/global.css'; --- @@ -19,33 +21,4 @@ const { title } = Astro.props; - - + \ No newline at end of file diff --git a/src/pages/index.astro b/src/pages/index.astro index fb62628..9810a22 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,6 +1,7 @@ --- import Layout from '../layouts/Layout.astro'; import Card from '../components/Card.astro'; +import '../styles/global.css'; --- @@ -63,61 +64,3 @@ import Card from '../components/Card.astro'; - diff --git a/src/styles/global.css b/src/styles/global.css new file mode 100644 index 0000000..e0ef1a2 --- /dev/null +++ b/src/styles/global.css @@ -0,0 +1,90 @@ +:root { + --accent: 136, 58, 234; + --accent-light: 224, 204, 250; + --accent-dark: 49, 10, 101; + --accent-gradient: linear-gradient( + 45deg, + rgb(var(--accent)), + rgb(var(--accent-light)) 30%, + white 60% + ); +} +html { + font-family: system-ui, sans-serif; + background: #13151a; + background-size: 224px; +} +code { + font-family: + Menlo, + Monaco, + Lucida Console, + Liberation Mono, + DejaVu Sans Mono, + Bitstream Vera Sans Mono, + Courier New, + monospace; +} + +main { + margin: auto; + padding: 1rem; + width: 800px; + max-width: calc(100% - 2rem); + color: white; + font-size: 20px; + line-height: 1.6; +} + +h1 { + font-size: 4rem; + font-weight: 700; + line-height: 1; + text-align: center; + margin-bottom: 1em; +} + +.astro-a { + position: absolute; + top: -32px; + left: 50%; + transform: translatex(-50%); + width: 220px; + height: auto; + z-index: -1; +} + +.text-gradient { + background-image: var(--accent-gradient); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-size: 400%; + background-position: 0%; +} +.instructions { + margin-bottom: 2rem; + border: 1px solid rgba(var(--accent-light), 25%); + background: linear-gradient( + rgba(var(--accent-dark), 66%), + rgba(var(--accent-dark), 33%) + ); + padding: 1.5rem; + border-radius: 8px; +} +.instructions code { + font-size: 0.8em; + font-weight: bold; + background: rgba(var(--accent-light), 12%); + color: rgb(var(--accent-light)); + border-radius: 4px; + padding: 0.3em 0.4em; +} +.instructions strong { + color: rgb(var(--accent-light)); +} +.link-card-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr)); + gap: 2rem; + padding: 0; +}