derver/scraftia-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add the damn thing

Browse source
This commit is contained in:
biglyderv 2025-02-08 00:52:59 -05:00
parent 0bba9f885d
commit 65cbda1b2e
Signed by: biglyderv
GPG key ID: 1398543B9746192C
6 changed files with 464 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

232
docs/css/main.css Normal file
View file

@ -0,0 +1,232 @@
: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;
--border-radius: 15px;
--font: system-ui, sans-serif;
color: var(--white);
background: var(--black);
font-family: var(--font) !important;
}
.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;
margin-bottom: .5rem;
margin-top: .5rem;
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;
}