michalvankodev/michalvankodev-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

font scavenging

Browse Source
This commit is contained in:
Michal Vanko
2024-09-13 23:21:51 +02:00
parent e2e0464c78
commit 73d3219799
43 changed files with 794 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
axum_server/src/main.rs
View File

@ -31,6 +31,7 @@ async fn main() {
let app = router::get_router()
.nest_service("/styles", ServeDir::new("styles"))
.nest_service("/images", ServeDir::new("../static/images"))
.nest_service("/fonts", ServeDir::new("../static/fonts"))
.nest_service("/generated_images", ServeDir::new("generated_images"))
.nest_service("/svg", ServeDir::new("../static/svg"))
.nest_service(
@ -49,6 +50,7 @@ async fn main() {
}
// TODO responsive design
// TODO Variable weight for font, setup boldness for <strong> and h1 h2 ... elements
// - contact
// TODO Colors
// TODO go live pipeline

66
axum_server/styles/input.css
View File

@ -2,6 +2,72 @@
@tailwind components;
@tailwind utilities;
@layer base {
@font-face {
font-family: 'Comfortaa';
font-style: normal;
font-display: swap;
font-weight: 300;
src:
local('Comfortaa Light'),
local('Comfortaa'),
url(/fonts/comfortaa/Comfortaa-Light.woff2) format('woff2'),
url(/fonts/comfortaa/Comfortaa-Light.ttf) format('truetype');
}
@font-face {
font-family: 'Comfortaa';
font-style: normal;
font-display: swap;
font-weight: 400;
src:
local('Comfortaa Regular'),
local('Comfortaa'),
url(/fonts/comfortaa/Comfortaa-Regular.woff2) format('woff2'),
url(/fonts/comfortaa/Comfortaa-Regular.ttf) format('truetype');
}
@font-face {
font-family: 'Comfortaa';
font-style: normal;
font-display: swap;
font-weight: 500;
src:
local('Comfortaa Medium'),
local('Comfortaa'),
url(/fonts/comfortaa/Comfortaa-Medium.woff2) format('woff2'),
url(/fonts/comfortaa/Comfortaa-Medium.ttf) format('truetype');
}
@font-face {
font-family: 'Comfortaa';
font-style: normal;
font-display: swap;
font-weight: 600;
src:
local('Comfortaa SemiBold'),
local('Comfortaa'),
url(/fonts/comfortaa/Comfortaa-SemiBold.woff2) format('woff2'),
url(/fonts/comfortaa/Comfortaa-SemiBold.ttf) format('truetype');
}
@font-face {
font-family: 'Comfortaa';
font-style: normal;
font-display: swap;
font-weight: 700;
src:
local('Comfortaa Bold'),
local('Comfortaa'),
url(/fonts/comfortaa/Comfortaa-Bold.woff2) format('woff2'),
url(/fonts/comfortaa/Comfortaa-Bold.ttf) format('truetype');
}
@font-face {
font-family: 'Baloo2';
font-style: normal;
font-display: swap;
src:
local('Baloo2'),
url(/fonts/baloo2/Baloo2-VariableFont_wght.ttf) format('truetype');
}
}
a {
@apply text-pink-600 underline underline-offset-2;

237
axum_server/styles/output.css
View File

@ -46,7 +46,7 @@ html,
-o-tab-size: 4;
tab-size: 4;
/* 3 */
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-family: Baloo2, Comfortaa, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
/* 4 */
font-feature-settings: normal;
/* 5 */
@ -446,6 +446,98 @@ video {
display: none;
}
@font-face {
font-family: 'Comfortaa';
font-style: normal;
font-display: swap;
font-weight: 300;
src:
local('Comfortaa Light'),
local('Comfortaa'),
url(/fonts/comfortaa/Comfortaa-Light.woff2) format('woff2'),
url(/fonts/comfortaa/Comfortaa-Light.ttf) format('truetype');
}
@font-face {
font-family: 'Comfortaa';
font-style: normal;
font-display: swap;
font-weight: 400;
src:
local('Comfortaa Regular'),
local('Comfortaa'),
url(/fonts/comfortaa/Comfortaa-Regular.woff2) format('woff2'),
url(/fonts/comfortaa/Comfortaa-Regular.ttf) format('truetype');
}
@font-face {
font-family: 'Comfortaa';
font-style: normal;
font-display: swap;
font-weight: 500;
src:
local('Comfortaa Medium'),
local('Comfortaa'),
url(/fonts/comfortaa/Comfortaa-Medium.woff2) format('woff2'),
url(/fonts/comfortaa/Comfortaa-Medium.ttf) format('truetype');
}
@font-face {
font-family: 'Comfortaa';
font-style: normal;
font-display: swap;
font-weight: 600;
src:
local('Comfortaa SemiBold'),
local('Comfortaa'),
url(/fonts/comfortaa/Comfortaa-SemiBold.woff2) format('woff2'),
url(/fonts/comfortaa/Comfortaa-SemiBold.ttf) format('truetype');
}
@font-face {
font-family: 'Comfortaa';
font-style: normal;
font-display: swap;
font-weight: 700;
src:
local('Comfortaa Bold'),
local('Comfortaa'),
url(/fonts/comfortaa/Comfortaa-Bold.woff2) format('woff2'),
url(/fonts/comfortaa/Comfortaa-Bold.ttf) format('truetype');
}
@font-face {
font-family: 'Baloo2';
font-style: normal;
font-display: swap;
src:
local('Baloo2'),
url(/fonts/baloo2/Baloo2-VariableFont_wght.ttf) format('truetype');
}
*, ::before, ::after {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
@ -608,21 +700,11 @@ video {
margin-right: auto;
}
.my-12 {
margin-top: 3rem;
margin-bottom: 3rem;
}
.my-2 {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.my-3 {
margin-top: 0.75rem;
margin-bottom: 0.75rem;
}
.my-5 {
margin-top: 1.25rem;
margin-bottom: 1.25rem;
@ -685,10 +767,6 @@ video {
aspect-ratio: 16 / 9;
}
.h-0 {
height: 0px;
}
.h-12 {
height: 3rem;
}
@ -705,10 +783,6 @@ video {
height: 1.75rem;
}
.h-\[220px\] {
height: 220px;
}
.h-\[240px\] {
height: 240px;
}
@ -729,14 +803,14 @@ video {
width: 1.75rem;
}
.w-full {
width: 100%;
}
.w-\[180px\] {
width: 180px;
}
.w-full {
width: 100%;
}
.max-w-maxindex {
max-width: 100rem;
}
@ -749,11 +823,6 @@ video {
flex-grow: 1;
}
.-translate-y-1 {
--tw-translate-y: -0.25rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\.5 {
--tw-translate-y: -0.375rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@ -767,10 +836,6 @@ video {
grid-template-columns: max-content 1fr;
}
.grid-rows-\[max-content_max-content_max-content\] {
grid-template-rows: max-content max-content max-content;
}
.grid-rows-\[max-content_1fr_max-content\] {
grid-template-rows: max-content 1fr max-content;
}
@ -783,10 +848,6 @@ video {
place-content: center;
}
.content-center {
align-content: center;
}
.content-end {
align-content: flex-end;
}
@ -823,16 +884,14 @@ video {
overflow: hidden;
}
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rounded {
border-radius: 0.25rem;
}
.rounded-2xl {
border-radius: 1rem;
}
.rounded-full {
border-radius: 9999px;
}
@ -841,18 +900,6 @@ video {
border-radius: 0.375rem;
}
.rounded-lg {
border-radius: 0.5rem;
}
.rounded-3xl {
border-radius: 1.5rem;
}
.rounded-2xl {
border-radius: 1rem;
}
.border {
border-width: 1px;
}
@ -865,11 +912,6 @@ video {
border-width: 4px;
}
.border-blue-200 {
--tw-border-opacity: 1;
border-color: rgb(191 219 254 / var(--tw-border-opacity));
}
.border-blue-500 {
--tw-border-opacity: 1;
border-color: rgb(59 130 246 / var(--tw-border-opacity));
@ -880,16 +922,16 @@ video {
border-color: rgb(23 37 84 / var(--tw-border-opacity));
}
.bg-blue-100 {
--tw-bg-opacity: 1;
background-color: rgb(219 234 254 / var(--tw-bg-opacity));
}
.bg-blue-50 {
--tw-bg-opacity: 1;
background-color: rgb(239 246 255 / var(--tw-bg-opacity));
}
.bg-blue-800 {
--tw-bg-opacity: 1;
background-color: rgb(30 64 175 / var(--tw-bg-opacity));
}
.bg-pink-200 {
--tw-bg-opacity: 1;
background-color: rgb(251 207 232 / var(--tw-bg-opacity));
@ -900,11 +942,6 @@ video {
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.bg-blue-100 {
--tw-bg-opacity: 1;
background-color: rgb(219 234 254 / var(--tw-bg-opacity));
}
.fill-blue-950 {
fill: #172554;
}
@ -935,11 +972,6 @@ video {
padding-right: 1rem;
}
.px-5 {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.py-5 {
padding-top: 1.25rem;
padding-bottom: 1.25rem;
@ -976,6 +1008,11 @@ video {
line-height: 2.5rem;
}
.text-8xl {
font-size: 6rem;
line-height: 1;
}
.text-base {
font-size: 1rem;
line-height: 1.5rem;
@ -996,16 +1033,6 @@ video {
line-height: 1.75rem;
}
.text-6xl {
font-size: 3.75rem;
line-height: 1;
}
.text-8xl {
font-size: 6rem;
line-height: 1;
}
.font-bold {
font-weight: 700;
}
@ -1034,16 +1061,16 @@ video {
line-height: 1.25rem;
}
.text-blue-500 {
--tw-text-opacity: 1;
color: rgb(59 130 246 / var(--tw-text-opacity));
}
.text-blue-700 {
--tw-text-opacity: 1;
color: rgb(29 78 216 / var(--tw-text-opacity));
}
.text-blue-800 {
--tw-text-opacity: 1;
color: rgb(30 64 175 / var(--tw-text-opacity));
}
.text-blue-900 {
--tw-text-opacity: 1;
color: rgb(30 58 138 / var(--tw-text-opacity));
@ -1074,11 +1101,6 @@ video {
color: rgb(30 41 59 / var(--tw-text-opacity));
}
.text-blue-500 {
--tw-text-opacity: 1;
color: rgb(59 130 246 / var(--tw-text-opacity));
}
.no-underline {
text-decoration-line: none;
}
@ -1088,10 +1110,6 @@ video {
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition-colors {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@ -1586,10 +1604,6 @@ a {
justify-content: stretch;
}
.md\:gap-8 {
gap: 2rem;
}
.md\:gap-x-8 {
-moz-column-gap: 2rem;
column-gap: 2rem;
@ -1610,6 +1624,11 @@ a {
line-height: 2.5rem;
}
.md\:text-6xl {
font-size: 3.75rem;
line-height: 1;
}
.md\:text-base {
font-size: 1rem;
line-height: 1.5rem;
@ -1624,16 +1643,6 @@ a {
font-size: 1.25rem;
line-height: 1.75rem;
}
.md\:text-5xl {
font-size: 3rem;
line-height: 1;
}
.md\:text-6xl {
font-size: 3.75rem;
line-height: 1;
}
}
@media (min-width: 1024px) {
@ -1669,10 +1678,6 @@ a {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.lg\:grid-cols-\[1fr_2fr\] {
grid-template-columns: 1fr 2fr;
}
.lg\:grid-cols-\[2fr_1fr\] {
grid-template-columns: 2fr 1fr;
}

13
axum_server/tailwind.config.js
View File

@ -3,6 +3,19 @@ module.exports = {
content: ["./templates/**/**.html"],
theme: {
extend: {
fontFamily: {
sans: [
"Baloo2",
"Comfortaa",
"ui-sans-serif",
"system-ui",
"sans-serif",
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol",
"Noto Color Emoji",
],
},
spacing: {
note: "60rem",
read: "64rem",