124 lines
No EOL
2 KiB
CSS
124 lines
No EOL
2 KiB
CSS
@font-face {
|
|
font-family: "Manrope";
|
|
src: url("Manrope[wght].woff2") format('woff2');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
:root {
|
|
--background: #ffffff;
|
|
--foreground: #000000;
|
|
--accent: #512bd8;
|
|
|
|
--space-unit: 1em;
|
|
--space-xxs: calc(0.25 * var(--space-unit));
|
|
--space-xs: calc(0.5 * var(--space-unit));
|
|
--space-sm: calc(0.75 * var(--space-unit));
|
|
--space-norm: var(--space-unit);
|
|
--space-normplus: calc(var(--space-unit) + var(--space-sm));
|
|
--space-md: calc(1.25 * var(--space-unit));
|
|
--space-lg: calc(2 * var(--space-unit));
|
|
--space-xl: calc(3.25 * var(--space-unit));
|
|
--space-xxl: calc(5.25 * var(--space-unit));
|
|
|
|
--h1: 3.052rem;
|
|
--h2: 2.441rem;
|
|
--h3: 1.953rem;
|
|
--h4: 1.563rem;
|
|
--h5: 1.25rem;
|
|
--small: 0.8rem;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
font-size: 100%;
|
|
font-family: "Manrope", Arial, Helvetica, sans-serif;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-weight: 400;
|
|
line-height: 1.75;
|
|
color: var(--foreground);
|
|
background-color: var(--background);
|
|
accent-color: var(--accent);
|
|
}
|
|
|
|
a {
|
|
color: var(--accent);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.main-container {
|
|
width: clamp(200px, 100vw, 1000px);
|
|
margin: 28px auto;
|
|
padding: 36px;
|
|
}
|
|
|
|
.branding-container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.branding-primary {
|
|
color: var(--background);
|
|
background-color: var(--foreground);
|
|
font-size: var(--h2);
|
|
flex-grow: 0;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.branding-secondary {
|
|
font-size: var(--h2);
|
|
flex-grow: 0;
|
|
border: 1px solid black;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.showcase-card {
|
|
margin-top: var(--space-xxs);
|
|
font-size: var(--h5);
|
|
}
|
|
|
|
/* scales */
|
|
|
|
p {
|
|
margin-bottom: 0.4rem;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5 {
|
|
margin: 3rem 0 1.38rem;
|
|
font-weight: 400;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
h1 {
|
|
font-size: var(--h1);
|
|
margin-top: 0;
|
|
}
|
|
|
|
h2 {
|
|
font-size: var(--h2);
|
|
}
|
|
|
|
h3 {
|
|
font-size: var(--h3);
|
|
}
|
|
|
|
h4 {
|
|
font-size: var(--h4);
|
|
}
|
|
|
|
h5 {
|
|
font-size: var(--h5);
|
|
}
|
|
|
|
small,
|
|
.text_small {
|
|
font-size: var(--small);
|
|
} |