scraftia-web/docs/css/main.css

245 lines
3.9 KiB
CSS
Raw Permalink Normal View History

2025-02-08 00:52:59 -05:00
:root {
--black: rgb(16, 16, 16);
--gray: rgb(38, 38, 38);
--white: rgb(240, 240, 240);
--primary-dark: rgb(230, 128, 78);
--primary-light: rgb(255, 230, 200);
--elem-width: min(800px, 90vw);
--elem-height: 300px;
2025-02-10 20:25:30 -05:00
--border-radius: 8px;
2025-02-08 00:52:59 -05:00
--font: system-ui, sans-serif;
color: var(--white);
background: var(--black);
font-family: var(--font) !important;
}
2025-02-09 19:23:40 -05:00
.comment.joiner {
background: rgb(78,180,78);
}
.comment.leaver {
background: rgb(180,78,78);
}
2025-02-08 00:52:59 -05:00
.img {
max-width: 500px;
max-height: 500px;
}
.banner,
body {
display: flex;
flex-direction: column;
align-items: center;
overflow-x: hidden;
margin-top: 0
}
pre {
white-space: pre-wrap;
font-family: var(--font);
}
.banner {
justify-content: center;
margin-bottom: calc(-1*var(--elem-height))
}
.banner-background,
.banner-content {
height: var(--elem-height);
overflow-y: auto
}
.banner-background {
border-radius: var(--border-radius);
background-color: var(--gray);
opacity: 30%;
object-fit: cover
}
.banner-content {
margin-left: 10px;
margin-right: 10px;
position: relative;
top: calc(-1*var(--elem-height))
}
.banner pre {
width: calc(var(--elem-width) - 40px);
margin: 5px;
}
.banner,
.banner-background,
.content,
.comment {
width: var(--elem-width)
}
.avatar {
display: flex;
align-items: center;
margin-bottom: 5px;
}
.avatar b {
margin-right: 5px;
}
.avatar-img {
width: 50px;
height: 50px;
margin-right: 15px;
border-radius: var(--border-radius);
}
.form {
width: calc(var(--elem-width) - 1rem);
grid-template-columns: .51fr 1fr;
display: grid
}
.form-key {
margin-right: 10px
}
.form-button,
.form-input,
.form,
.comment {
border: solid var(--gray) 3px;
background: var(--black);
border-radius: var(--border-radius);
color: var(--white);
padding: .5rem;
2025-02-10 20:25:30 -05:00
margin-bottom: .1rem;
margin-top: .1rem;
2025-02-08 00:52:59 -05:00
text-decoration: none
}
.form-button,
.form-heading,
.form-message {
grid-column: span 2;
}
.form-button {
font-weight: 700;
display: inline-block;
background: var(--primary-dark);
border-color: var(--primary-light);
margin: .5rem;
}
.header {
z-index: 5;
position: sticky;
top: 0;
display: flex;
background: var(--gray);
color: var(--white);
padding: 10px;
margin-bottom: 10px;
align-items: center;
flex-wrap: wrap;
width: var(--elem-width);
border-radius: var(--border-radius);
}
.header-link,
.link {
font-weight: 700;
color: var(--white)
}
.header-link {
text-decoration: none;
padding-left: .5em;
margin-left: .5em;
border-left: solid var(--white) 2px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 1.5em;
}
.header-img {
border-left: none;
margin: 0;
padding-left: 0;
height: 2.5em;
object-fit: cover;
}
@media (max-width: 800px) {
.form {
grid-template-columns: 1fr;
}
.form-button, .form-heading, .form-message {
grid-column: span 1;
}
}
pre {
width: var(--elem-width);
white-space: pre-wrap;
overflow-wrap: break-word;
}
iframe {
width: 480px;
height: 360px;
border: none;
}
.header a {
width: 60px;
}
.header a, .clickie {
text-decoration: none;
color: inherit;
font-weight: bold;
margin: 5px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.header a.leave {
margin-left: auto;
}
.clickie {
width: min-content;
margin-top: 40px;
}
.map {
width: var(--elem-width);
background: var(--gray);
image-rendering: pixelated;
image-rendering: crisp-edges;
}
.coords {
position: relative;
top: calc(var(--elem-width) / -3);
left: calc(var(--elem-width) / 6);
font-size: 16px;
background: rgba(0,0,0,0.5);
padding: 10px;
width: 250px;
margin: 0;
margin-bottom: -50px;
}
2025-02-10 20:25:30 -05:00
.date {
font-size: 0.8em;
}