mirror of
https://codeberg.org/vlw/vlw.se.git
synced 2025-09-13 21:13:40 +02:00
Victor Westerlund
56cf142e0d
The PR is a huge refactor of all Reflect and Vegvisir code. I've merged the API and "Front-end" codebases together into the same root, this will allow for both Reflect and Vegvisir to use the same resources. Not only that, but I've also added proper database modeling with actual OOP inheritance for database tables. Reviewed-on: https://codeberg.org/vlw/vlw.se/pulls/23
205 lines
No EOL
3.3 KiB
CSS
205 lines
No EOL
3.3 KiB
CSS
/* # Overrides */
|
|
|
|
:root {
|
|
--primer-color-accent: 255, 195, 255;
|
|
--color-accent: rgb(var(--primer-color-accent));
|
|
--hue-accent: 200deg;
|
|
}
|
|
|
|
vv-shell {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--padding);
|
|
}
|
|
|
|
.fingerprint {
|
|
word-break: break-all;
|
|
}
|
|
|
|
/* # Sections */
|
|
|
|
vv-shell > svg {
|
|
margin: var(--padding) 0;
|
|
}
|
|
|
|
/* ## Modifiers */
|
|
|
|
section.center {
|
|
text-align: center;
|
|
}
|
|
|
|
/* ## Social */
|
|
|
|
section.social {
|
|
--icon-size: 60px;
|
|
|
|
display: grid;
|
|
grid-template-columns: repeat(3, var(--icon-size));
|
|
grid-template-rows: var(--icon-size);
|
|
align-items: center;
|
|
fill: white;
|
|
gap: var(--padding);
|
|
}
|
|
|
|
section.social social {
|
|
transition: 200ms fill;
|
|
position: relative;
|
|
}
|
|
|
|
/* ### Hover tooltip */
|
|
|
|
section.social social p {
|
|
display: none;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
transform: translate(0, 0);
|
|
background-color: rgba(var(--primer-color-accent), .1);
|
|
padding: 5px 10px;
|
|
white-space: nowrap;
|
|
pointer-events: none;
|
|
border-radius: 6px;
|
|
-webkit-backdrop-filter: brightness(.2) blur(20px);
|
|
backdrop-filter: brightness(.2) blur(20px);
|
|
}
|
|
|
|
section.social social:hover {
|
|
fill: var(--color-accent);
|
|
}
|
|
|
|
section.social social p.hovering {
|
|
display: initial;
|
|
}
|
|
|
|
/* ## PGP key */
|
|
|
|
section.pgp {
|
|
max-width: 800px;
|
|
position: relative;
|
|
display: flex;
|
|
border-radius: 12px;
|
|
flex-direction: column;
|
|
gap: var(--padding);
|
|
text-align: center;
|
|
background-color: rgba(var(--primer-color-accent), .15);
|
|
padding: var(--padding);
|
|
transform: rotate(-1.5deg);
|
|
}
|
|
|
|
section.pgp > svg {
|
|
position: absolute;
|
|
top: -30px;
|
|
right: -20px;
|
|
width: 60px;
|
|
fill: var(--color-accent);
|
|
}
|
|
|
|
section.pgp > p {
|
|
padding: 0 var(--padding);
|
|
}
|
|
|
|
section.pgp .buttons {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-top: var(--padding);
|
|
gap: var(--padding);
|
|
}
|
|
|
|
/* ## Contact form */
|
|
|
|
section.form :is(input, textarea) {
|
|
min-width: 100%;
|
|
max-width: 100%;
|
|
color: black;
|
|
padding: var(--padding);
|
|
border-radius: 4px;
|
|
border: none;
|
|
outline: none;
|
|
}
|
|
|
|
section.form input {
|
|
height: calc(var(--running-size) - var(--padding));
|
|
}
|
|
|
|
section.form textarea {
|
|
min-height: calc(var(--running-size) * 1.5);
|
|
}
|
|
|
|
section.form {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--padding);
|
|
width: 100%;
|
|
}
|
|
|
|
section.form form {
|
|
display: contents;
|
|
}
|
|
|
|
section.form input-group {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: calc(var(--padding) / 2);
|
|
}
|
|
|
|
section.form input-group label {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
section.form button {
|
|
width: 100%;
|
|
max-width: 500px;
|
|
}
|
|
|
|
/* ### Contact form messages */
|
|
|
|
section.form-message {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: calc(var(--padding) / 2);
|
|
padding: var(--padding);
|
|
background-color: white;
|
|
margin: var(--padding) 0;
|
|
color: black;
|
|
}
|
|
|
|
section.form-message h3 {
|
|
text-align: center;
|
|
}
|
|
|
|
section.form-message pre {
|
|
white-space: pre-wrap;
|
|
padding: var(--padding);
|
|
background-color: rgba(0, 0, 0, .15);
|
|
}
|
|
|
|
section.form-message.error {
|
|
background-color: #ec4444;
|
|
color: white;
|
|
}
|
|
|
|
section.form-message.sent {
|
|
background-color: var(--color-accent);
|
|
}
|
|
|
|
section.form-message.sent + section.form {
|
|
display: none;
|
|
}
|
|
|
|
/* # Size queries */
|
|
|
|
@media (min-width: 460px) {
|
|
section.pgp {
|
|
padding: calc(var(--padding) * 1.5);
|
|
}
|
|
|
|
section.pgp .buttons {
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
}
|
|
} |