adds fonts and tailwind generation

This commit is contained in:
Drew
2025-03-07 10:41:06 -07:00
parent 1a7f4521f5
commit 2139901402
26 changed files with 168 additions and 36 deletions

79
assets/scss/_fonts.scss Normal file
View File

@ -0,0 +1,79 @@
@font-face {
font-family: 'EB Garamond 12';
src: local('EB Garamond 12 Italic'), local('EBGaramond12-Italic'),
url('EBGaramond12-Italic.woff2') format('woff2'),
url('EBGaramond12-Italic.woff') format('woff');
font-weight: normal;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'EB Garamond 12';
src: local('EB Garamond 12 Regular'), local('EBGaramond12-Regular'),
url('EBGaramond12-Regular.woff2') format('woff2'),
url('EBGaramond12-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Iosevka';
src: local('Iosevka'),
url('Iosevka.woff2') format('woff2'),
url('Iosevka.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Iosevka';
src: local('Iosevka Bold'), local('Iosevka-Bold'),
url('Iosevka-Bold.woff2') format('woff2'),
url('Iosevka-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Iosevka';
src: local('Iosevka Bold Italic'), local('Iosevka-Bold-Italic'),
url('Iosevka-Bold-Italic.woff2') format('woff2'),
url('Iosevka-Bold-Italic.woff') format('woff');
font-weight: bold;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Iosevka';
src: local('Iosevka Light'), local('Iosevka-Light'),
url('Iosevka-Light.woff2') format('woff2'),
url('Iosevka-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Iosevka';
src: local('Iosevka Light Italic'), local('Iosevka-Light-Italic'),
url('Iosevka-Light-Italic.woff2') format('woff2'),
url('Iosevka-Light-Italic.woff') format('woff');
font-weight: 300;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Iosevka';
src: local('Iosevka Oblique'), local('Iosevka-Oblique'),
url('Iosevka-Oblique.woff2') format('woff2'),
url('Iosevka-Oblique.woff') format('woff');
font-weight: normal;
font-style: italic;
font-display: swap;
}

View File

@ -0,0 +1,2 @@
$font-garamond: 'EB Garamond 12', serif;
$font-iosevka: 'Iosevka', monospace;

View File

@ -0,0 +1,32 @@
.wompum {
&-container {
width: 100%;
margin: 0 auto;
}
&-grid {
display: grid;
gap: 0;
padding: 0;
width: 100%;
}
&-cell {
width: 100%;
min-height: 30px;
background-color: var(--sand-500);
// Create pseudo-random pattern using prime numbers
&:nth-child(7n+1) {
background-color: var(--sand-100);
}
&:nth-child(5n+2) {
background-color: var(--sand-900);
}
&:nth-child(11n+3) {
background-color: var(--sand-500);
}
}
}

19
assets/scss/main.scss Normal file
View File

@ -0,0 +1,19 @@
// Tailwind
@tailwind base;
@tailwind components;
@tailwind utilities;
// Variables
@import "variables";
// Fonts
@import "fonts";
// Components
@import "components/wompum";
body {
font-family: $font-garamond;
font-size: 16px;
line-height: 1.5;
}