170 lines
2.8 KiB
CSS
170 lines
2.8 KiB
CSS
/* See https://codeberg.org/lucajunge/css-reset for details */
|
|
@import url(./reset.css);
|
|
|
|
@import url(./fonts.css);
|
|
|
|
@import url(./icons.css);
|
|
|
|
@import url(./util.css);
|
|
|
|
@import url(./post.css);
|
|
|
|
:root {
|
|
--font-family: "Source Sans 3", -apple-system, system-ui, sans-serif;
|
|
--font-family-monospace: Consolas, Menlo, Monaco, Andale Mono WT, Andale Mono,
|
|
Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono,
|
|
Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Courier New,
|
|
Courier, monospace;
|
|
--background-color: #242424;
|
|
--background-color-strong: #080808;
|
|
--text-color: #f3f3f3;
|
|
--accent-color: #daa520;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
font-family: var(--font-family);
|
|
color: var(--text-color);
|
|
background-color: var(--background-color);
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
font-family: "Crimson Pro";
|
|
font-size: 1.3em;
|
|
font-weight: 600;
|
|
color: var(--accent-color);
|
|
}
|
|
|
|
h1 {
|
|
font-size: 1.6em;
|
|
}
|
|
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
margin-block: 0.5em 0.7em;
|
|
}
|
|
|
|
.header {
|
|
padding: 1rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.footer {
|
|
padding: 1rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-weight: bold;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.footer * {
|
|
text-align: center;
|
|
}
|
|
|
|
.footer div {
|
|
background-color: var(--background-color-strong);
|
|
border-radius: 4px;
|
|
padding: 2px 4px 1px 4px;
|
|
}
|
|
|
|
.tag {
|
|
padding: 3px 6px;
|
|
background-color: var(--background-color-strong);
|
|
margin-left: 4px;
|
|
display: inline-block;
|
|
border-radius: 4px;
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
.recent-posts-container {
|
|
margin: 12px 12px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
gap: 12px;
|
|
}
|
|
|
|
.highlight-card {
|
|
border-radius: 12px;
|
|
display: flex;
|
|
padding: 14px;
|
|
width: 100%;
|
|
justify-content: stretch;
|
|
}
|
|
|
|
.highlight-card-header {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
column-gap: 10px;
|
|
justify-content: space-between;
|
|
padding-bottom: 8px;
|
|
}
|
|
|
|
.highlight-card img {
|
|
border-radius: 8px;
|
|
width: 100%;
|
|
height: 8rem;
|
|
object-fit: cover;
|
|
display: inline-block;
|
|
box-shadow: inset 0px 0px 32px 32px #000000;
|
|
}
|
|
|
|
.highlight-card a {
|
|
color: var(--white);
|
|
width: 100%;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.highlight-card-button {
|
|
border-radius: 8px;
|
|
margin: 8px 0px 0px 0px;
|
|
padding: 4px 8px;
|
|
cursor: pointer;
|
|
background-color: var(--accent-color);
|
|
outline: none;
|
|
border: none;
|
|
}
|
|
|
|
.content-type {
|
|
font-family: "Crimson Pro";
|
|
font-weight: bold;
|
|
border-radius: 4px;
|
|
padding: 2px 7px 5px 7px;
|
|
background-color: var(--background-color-strong);
|
|
}
|
|
|
|
/* Light theme */
|
|
@media (prefers-color-scheme: light) {
|
|
:root {
|
|
--text-color: #242424;
|
|
--background-color: #f3f3f3;
|
|
--background-color-strong: #ababab;
|
|
}
|
|
}
|
|
|
|
.home main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-width: 786px;
|
|
}
|
|
|
|
.home main * {
|
|
max-width: 786px;
|
|
}
|
|
|
|
.attention-box {
|
|
border: 4px solid var(--accent-color);
|
|
border-radius: 6px;
|
|
background-color: rgb(from var(--accent-color) r g b / 0.1);
|
|
}
|