67 lines
1.2 KiB
CSS
67 lines
1.2 KiB
CSS
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Fira Sans";
|
|
src: url("./assets/fonts/FiraSans-Regular.otf");
|
|
font-weight: 400;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Fira Sans";
|
|
src: url("./assets/fonts/FiraSans-Heavy.otf");
|
|
font-weight: 900;
|
|
}
|
|
|
|
body {
|
|
width: 100%;
|
|
height: 100vh;
|
|
display: grid;
|
|
/* FIXME: */
|
|
grid-template-columns: [gutter-left] 1fr [content-column] max(16em) [gutter-right] 1fr;
|
|
grid-template-rows: [header] 1fr [center] 1fr [footer] 1.75fr;
|
|
font-family: 'Fira Sans', sans-serif;
|
|
}
|
|
|
|
.main {
|
|
grid-column: content-column / content-column;
|
|
grid-row: center / center;
|
|
}
|
|
|
|
.monogram {
|
|
display: grid;
|
|
grid-template-columns: 50% 50%;
|
|
line-height: 0.9;
|
|
font-size: 8rem;
|
|
}
|
|
|
|
.monogram .triangle:hover {
|
|
color: hsl(50, 90%, 50%);
|
|
cursor: pointer; /* FIXME: this is a temporary move because the triangles are unicode characters right now */
|
|
}
|
|
|
|
.monogram .triangle-label {
|
|
/* TODO */
|
|
font-size: 1rem;
|
|
margin-top: -1rem;
|
|
margin-left: 1rem;
|
|
color: black;
|
|
z-index: 2;
|
|
}
|
|
|
|
.monogram .triangle-label.multiline {
|
|
margin-top: -2rem;
|
|
}
|
|
|
|
.monogram .triangle-top .triangle-label {
|
|
margin-top: -5.5rem;
|
|
}
|
|
|
|
h1 {
|
|
font-weight: bold;
|
|
font-size: 1.7rem;
|
|
margin-top: 1em;
|
|
} |