ayo/ayco.io-astro
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: extract variables.css

Browse source
This commit is contained in:
Ayo Ayco 2024-05-20 18:21:12 +02:00
parent 755750c4bb
commit af7a05419e
2 changed files with 29 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/layouts/Layout.astro
View file

@ -1,4 +1,5 @@
---
import "./variables.css";
import "./reset.css";
import Head from "../components/Head.astro";
import Nav from "../components/Nav.astro";
@ -19,33 +20,6 @@ const { title, description } = Astro.props;
<Nav links={links} />
<slot />
<style>
:root {
--content-width: 700px;
--font-size-sm: clamp(0.75rem, 0.2vw + 0.66rem, 0.8rem);
--font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
--font-size-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem);
--font-size-xl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
--color-border: hsl(17, 24%, 90%);
--color-link: var(--color-brand-blue-3);
--color-brand-blue-1: #3054bf;
--color-brand-blue-2: #203880;
--color-brand-blue-3: #416fff;
--color-brand-blue-4: #101c40;
--color-brand-blue-5: #3964e6;
--color-brand-complement: orange;
--ayo-gradient: linear-gradient(45deg, #3054bf, #416fff);
--text-color-dark: black;
--text-color-light: #f8f9fa;
--bg-dark: #343a40;
--bg-darker: #212529;
--bg-darkest: #000;
}
html,
body,
* {

28
src/layouts/variables.css Normal file
View file

@ -0,0 +1,28 @@
:root {
--content-width: 700px;
--font-size-sm: clamp(0.75rem, 0.2vw + 0.66rem, 0.8rem);
--font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
--font-size-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem);
--font-size-xl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
--color-border: hsl(17, 24%, 90%);
--color-link: var(--color-brand-blue-5);
--color-brand-blue-1: #3054bf;
--color-brand-blue-2: #203880;
--color-brand-blue-3: #416fff;
--color-brand-blue-4: #101c40;
--color-brand-blue-5: #3964e6;
--color-brand-complement: orange;
--ayo-gradient: linear-gradient(45deg, #3054bf, #416fff);
--text-color-dark: #232323;
--text-color-dark-faded: #555;
--text-color-light: #f8f9fa;
--text-color-light-faded: #999;
--bg-dark: #343a40;
--bg-darker: #212529;
--bg-darkest: #000;
}