0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2024-12-23 21:53:55 -05:00
astro/www/public/global.scss

85 lines
2 KiB
SCSS
Raw Normal View History

:root {
--font-sans: "IBM Plex Sans", system-ui;
--font-mono: "IBM Plex Mono", Consolas, "Andale Mono WT", "Andale Mono",
"Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono",
"Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco,
"Courier New", Courier, monospace;
--color-green: #17c083;
}
* {
box-sizing: border-box;
margin: 0;
}
html {
display: grid;
width: 100%;
height: 100%;
background-color: #000014;
}
html, body {
padding: 0;
font-size: clamp(14px, calc(1rem + (3vw - 1.2rem)), 20px);
font-family: var(--font-sans);
font-weight: 400;
background-image: radial-gradient(
87.7% 87.7% at 85.6% 18.14%,
#111827 0%,
#000014 100%
);
background-repeat: no-repeat;
color: #f3f4f6;
}
body {
position: relative;
display: grid;
place-items: center;
min-width: 100%;
max-width: 100vw;
min-height: 100vh;
overflow-x: hidden;
}
.visually-hidden {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
a {
position: relative;
text-decoration: none;
color: var(--color-green);
padding: 0.05em 0.125em;
margin: -0.05em -0.125em;
transition: color 120ms cubic-bezier(0.23, 1, 0.320, 1);
z-index: 0;
display: inline-block;
&:hover,
&:focus {
color: rgba(0, 0, 0, 1);
&::before {
transform: scaleY(1);
background: var(--color-green);
}
}
&::before {
transform-origin: bottom center;
content: '';
display: block;
position: absolute;
inset: 0;
background: var(--color-green);
pointer-events: none;
transform: scaleY(0.05);
transition: transform 120ms cubic-bezier(0.23, 1, 0.320, 1),
background 120ms cubic-bezier(0.23, 1, 0.320, 1);
z-index: -1;
}
}