runtimefee.lol/public/css/bundle.css

124 lines
2.1 KiB
CSS

/* See https://codeberg.org/lucajunge/css-reset for details */
@import url(./reset.css);
/* Custom fonts */
@import url(./fonts.css);
@import url(./margins.css);
@import url(./icons.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;
}
:root {
--background-color: #121212;
--background-color-dark: #080808;
--accent-color: #daa520;
}
html,
body {
font-family: var(--font-family);
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);
}
.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: #080808;
border-radius: 4px;
padding: 2px 4px 1px 2px;
}
.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-dark);
}