ForRo/public/assets/css/global/typography.css
ro 9be54fa13c Responsive Part 2, environment changes
Hit the major friction points in the responsive UI. Still have some
polishing to do but there shouldn't be any show stoppers at this points.

Also moved some variable to the env so they can be changed easily when
necessary
2024-02-08 13:07:49 -06:00

89 lines
1.8 KiB
CSS

/* RUBIK */
@font-face {
font-family: rubik;
src: url("fonts/Rubik/rubik-light.ttf") format("truetype"),
url("fonts/Rubik/rubik-light.woff") format("woff"),
url("fonts/Rubik/rubik-light.woff2") format("woff2");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: rubik;
src: url("fonts/Rubik/rubik-regular.ttf") format("truetype"),
url("fonts/Rubik/rubik-regular.woff") format("woff"),
url("fonts/Rubik/rubik-regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: rubik;
src: url("fonts/Rubik/rubik-medium.ttf") format("truetype"),
url("fonts/Rubik/rubik-medium.woff") format("woff"),
url("fonts/Rubik/rubik-medium.woff2") format("woff2");
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: rubik;
src: url("fonts/Rubik/rubik-bold.ttf") format("truetype"),
url("fonts/Rubik/rubik-bold.woff") format("woff"),
url("fonts/Rubik/rubik-bold.woff2") format("woff2");
font-weight: 600;
font-style: normal;
}
:root {
--base-type: rubik, helvetica, arial, sans-serif;
--mono-type: "Lucida Console", monaco, monospace;
}
h1 {
font-size: 2.5em;
font-weight: 600;
font-kerning: normal;
letter-spacing: -5px;
text-transform: uppercase;
line-height: 0.75em;
margin: 0;
position: absolute;
bottom: 20px;
width: 70%;
overflow-wrap: break-word;
}
h2 {
font-size: 1.5em;
font-weight: 500;
line-height: 0.8em;
color: var(--secondary);
margin: 30px 0;
}
h3 {
font-size: 1em;
font-weight: 500;
}
@media only screen and (max-width: 800px) {
h1 {
font-size: 2em;
}
}
@media only screen and (max-width: 650px) {
h1 {
font-size: 1.5em;
letter-spacing: -3px;
width: 100%;
position: relative;
}
}
@media only screen and (max-width: 480px) {
font-size: 1.5em;
letter-spacing: -3px;
}