hax/moodist
1
0
Fork 0
mirror of https://github.com/remvze/moodist.git synced 2025-12-18 17:34:17 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

style: add base and global styles

Browse source
This commit is contained in:
MAZE 2023-10-05 17:37:08 +03:30
parent 17cbd6eb38
commit 05d68e4de6
10 changed files with 103 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/fonts/fraunces-v31-latin-600.woff2 Normal file
View file

Binary file not shown.

BIN
public/fonts/inter-tight-v7-latin-600.woff2 Normal file
View file

Binary file not shown.

BIN
public/fonts/inter-v13-latin-regular.woff2 Normal file
View file

Binary file not shown.

39
src/layouts/layout.astro
View file

@ -1,4 +1,6 @@
--- ---
import '@/styles/global.css';
interface Props { interface Props {
title: string; title: string;
} }
@ -10,42 +12,13 @@ const { title } = Astro.props;
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="description" content="Astro description" /> <meta content="Astro description" name="description" />
<meta name="viewport" content="width=device-width" /> <meta content="width=device-width" name="viewport" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link href="/favicon.svg" rel="icon" type="image/svg+xml" />
<meta name="generator" content={Astro.generator} /> <meta content={Astro.generator} name="generator" />
<title>{title}</title> <title>{title}</title>
</head> </head>
<body> <body>
<slot /> <slot />
</body> </body>
</html> </html>
<style is:global>
: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;
}
</style>

20
src/styles/base/base.css Normal file
View file

@ -0,0 +1,20 @@
*,
*::before,
*::after {
box-sizing: border-box;
padding: 0;
margin: 0;
font: inherit;
}
body {
background-color: var(--color-neutral-50);
color: var(--color-foreground);
font-family: var(--font-body);
font-size: var(--font-base);
}
::selection {
background-color: var(--color-neutral-300);
color: var(--color-foreground);
}

26
src/styles/fonts.css Normal file
View file

@ -0,0 +1,26 @@
/* fraunces-600 - latin */
@font-face {
font-display: swap;
font-family: Fraunces;
font-style: normal;
font-weight: 600;
src: url('/fonts/fraunces-v31-latin-600.woff2') format('woff2');
}
/* inter-regular - latin */
@font-face {
font-display: swap;
font-family: Inter;
font-style: normal;
font-weight: 400;
src: url('/fonts/inter-v13-latin-regular.woff2') format('woff2');
}
/* inter-tight-600 - latin */
@font-face {
font-display: swap;
font-family: 'Inter Tight';
font-style: normal;
font-weight: 600;
src: url('/fonts/inter-tight-v7-latin-600.woff2') format('woff2');
}

3
src/styles/global.css Normal file
View file

@ -0,0 +1,3 @@
@import 'variables/index.css';
@import 'base/base.css';
@import 'fonts.css';

18
src/styles/variables/color.css Normal file
View file

@ -0,0 +1,18 @@
:root {
--color-neutral-50: #09090b;
--color-neutral-100: #18181b;
--color-neutral-200: #27272a;
--color-neutral-300: #3f3f46;
--color-neutral-400: #52525b;
--color-neutral-500: #71717a;
--color-neutral-600: #a1a1aa;
--color-neutral-700: #d4d4d8;
--color-neutral-800: #e4e4e7;
--color-neutral-900: #f4f4f5;
--color-neutral-950: #fafafa;
/* Foreground */
--color-foreground: var(--color-neutral-900);
--color-foreground-subtle: var(--color-neutral-600);
--color-foreground-subtler: var(--color-neutral-500);
}

2
src/styles/variables/index.css Normal file
View file

@ -0,0 +1,2 @@
@import 'color.css';
@import 'typography.css';

20
src/styles/variables/typography.css Normal file
View file

@ -0,0 +1,20 @@
:root {
--font-body: 'Inter', sans-serif;
--font-heading: 'Inter Tight', sans-serif;
--font-display: 'Fraunces', serif;
/* Font Sizes */
--font-base-size: 1rem;
--font-pos-ratio: 1.2;
--font-neg-ratio: 1.125;
--font-3xlg: calc(var(--font-xxlg) * var(--font-pos-ratio));
--font-2xlg: calc(var(--font-xlg) * var(--font-pos-ratio));
--font-xlg: calc(var(--font-lg) * var(--font-pos-ratio));
--font-lg: calc(var(--font-md) * var(--font-pos-ratio));
--font-md: calc(var(--font-base) * var(--font-pos-ratio));
--font-base: var(--font-base-size);
--font-sm: calc(var(--font-base) / var(--font-neg-ratio));
--font-xsm: calc(var(--font-sm) / var(--font-neg-ratio));
--font-2xsm: calc(var(--font-xsm) / var(--font-neg-ratio));
--font-3xsm: calc(var(--font-xxsm) / var(--font-neg-ratio));
}