122 lines
2.4 KiB
CSS
122 lines
2.4 KiB
CSS
/* =========================
|
|
Local Fonts
|
|
========================= */
|
|
|
|
/* OSWALD */
|
|
@font-face {
|
|
font-family: 'Oswald';
|
|
src: url('../fonts/oswald-400.woff2') format('woff2');
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Oswald';
|
|
src: url('../fonts/oswald-500.woff2') format('woff2');
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Oswald';
|
|
src: url('../fonts/oswald-700.woff2') format('woff2');
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
|
|
/* ROBOTO */
|
|
@font-face {
|
|
font-family: 'Roboto';
|
|
src: url('../fonts/roboto-400.woff2') format('woff2');
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Roboto';
|
|
src: url('../fonts/roboto-500.woff2') format('woff2');
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Roboto';
|
|
src: url('../fonts/roboto-700.woff2') format('woff2');
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
|
|
/* =========================
|
|
Typography System
|
|
========================= */
|
|
|
|
:root {
|
|
--primary-font: 'Oswald', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
--secondary-font: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
|
|
--site-identity-font-size: 40px;
|
|
|
|
--font-weight: 400;
|
|
--line-height: 1.6;
|
|
}
|
|
|
|
|
|
/* =========================
|
|
Base Typography
|
|
========================= */
|
|
|
|
body {
|
|
font-family: var(--secondary-font);
|
|
font-weight: var(--font-weight);
|
|
line-height: var(--line-height);
|
|
}
|
|
|
|
|
|
/* =========================
|
|
Headlines
|
|
========================= */
|
|
|
|
h1, h2, h3, h4, h5, h6,
|
|
.entry-title {
|
|
font-family: var(--primary-font);
|
|
font-weight: 500;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
|
|
/* =========================
|
|
Site Title
|
|
========================= */
|
|
|
|
.site-title,
|
|
.site-title a {
|
|
font-family: var(--primary-font);
|
|
font-size: var(--site-identity-font-size);
|
|
font-weight: 700;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
|
|
/* =========================
|
|
Content Typography
|
|
========================= */
|
|
|
|
.site-description,
|
|
.entry-content,
|
|
.post-content,
|
|
.inner-article-content {
|
|
font-family: var(--secondary-font);
|
|
}
|
|
|
|
html {
|
|
font-synthesis: none;
|
|
}
|