73 lines
1.5 KiB
CSS
73 lines
1.5 KiB
CSS
:root {
|
|
--max-width: 750px;
|
|
--background-1: #ffffff;
|
|
--background-2: #e9e9e9;
|
|
--background-3: #555555;
|
|
--text-color-1: #000000;
|
|
--text-color-2: #555555;
|
|
--nav-button-size: 70px;
|
|
--nav-button-radius: 10px;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
main {
|
|
margin: 1em auto;
|
|
max-width: var(--max-width);
|
|
}
|
|
|
|
.message .metadata .name {
|
|
font-size: 120%;
|
|
}
|
|
|
|
.message .metadata .date {
|
|
color: var(--text-color-2);
|
|
}
|
|
|
|
.message .text {
|
|
margin-top: 1em;
|
|
}
|
|
|
|
nav #top-left {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: var(--nav-button-size);
|
|
height: var(--nav-button-size);
|
|
background-color: var(--background-2);
|
|
color: black;
|
|
font-size: calc(var(--nav-button-size) - 10px);
|
|
border-bottom-right-radius: var(--nav-button-radius);
|
|
}
|
|
|
|
nav #bottom-left {
|
|
position: fixed;
|
|
top: calc(100vh - var(--nav-button-size));
|
|
left: 0;
|
|
width: var(--nav-button-size);
|
|
height: var(--nav-button-size);
|
|
background-color: var(--background-2);
|
|
color: black;
|
|
font-size: calc(var(--nav-button-size) - 10px);
|
|
border-top-right-radius: var(--nav-button-radius);
|
|
}
|
|
|
|
nav a {
|
|
cursor: pointer;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-decoration: none;
|
|
}
|
|
|
|
nav a i {
|
|
display: block;
|
|
}
|