adds fonts and tailwind generation
This commit is contained in:
79
assets/scss/_fonts.scss
Normal file
79
assets/scss/_fonts.scss
Normal 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;
|
||||
}
|
2
assets/scss/_variables.scss
Normal file
2
assets/scss/_variables.scss
Normal file
@ -0,0 +1,2 @@
|
||||
$font-garamond: 'EB Garamond 12', serif;
|
||||
$font-iosevka: 'Iosevka', monospace;
|
32
assets/scss/components/_wompum.scss
Normal file
32
assets/scss/components/_wompum.scss
Normal 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
19
assets/scss/main.scss
Normal 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;
|
||||
}
|
Reference in New Issue
Block a user