mirror of
https://codeberg.org/vlw/vlw.se.git
synced 2025-09-13 13:03:41 +02:00
140132fa72
* wip: 2024-02-13T12:59:17+0100 (1707825557) * wip: 2024-02-21T03:16:48+0100 (1708481808) * wip: 2024-02-21T20:50:20+0100 (1708545020) * wip: 2024-02-21T20:50:20+0100 (1708545020) * wip: 2024-03-01T13:17:58+0100 (1709295478) * wip: 2024-03-06T12:06:58+0100 (1709723218) * wip: 2024-03-07T15:07:57+0100 (1709820477) * wip: 2024-03-09T01:36:44+0100 (1709944604) * wip: 2024-03-14T23:24:12+0100 (1710455052) * wip: 2024-03-28T18:27:40+0100 (1711646860) * wip: 2024-03-28T18:27:40+0100 (1711646860) * feat: create README * wip: 2024-04-01T12:21:45+0200 (1711966905)
184 lines
No EOL
3 KiB
CSS
Executable file
184 lines
No EOL
3 KiB
CSS
Executable file
/* # Overrides */
|
|
|
|
:root {
|
|
--primer-color-accent: 255, 195, 255;
|
|
--color-accent: rgb(var(--primer-color-accent));
|
|
}
|
|
|
|
main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--padding);
|
|
}
|
|
|
|
/* # Sections */
|
|
|
|
main > svg {
|
|
margin: var(--padding) 0;
|
|
}
|
|
|
|
/* ## 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;
|
|
font-size: 17px;
|
|
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.hovering p {
|
|
display: initial;
|
|
}
|
|
|
|
/* ## OpenPGP key */
|
|
|
|
section.pgp {
|
|
max-width: 800px;
|
|
position: relative;
|
|
text-align: center;
|
|
background-color: rgba(var(--primer-color-accent), .15);
|
|
padding: calc(var(--padding) * 1.5);
|
|
transform: rotate(-1.5deg);
|
|
}
|
|
|
|
section.pgp > svg {
|
|
position: absolute;
|
|
top: -30px;
|
|
right: -20px;
|
|
width: 60px;
|
|
fill: var(--color-accent);
|
|
}
|
|
|
|
section.pgp > p {
|
|
margin-bottom: var(--padding);
|
|
padding: var(--padding);
|
|
}
|
|
|
|
section.pgp .buttons {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--padding);
|
|
}
|
|
|
|
/* ## Contact form */
|
|
|
|
section.form :is(input, textarea) {
|
|
min-width: 100%;
|
|
max-width: 100%;
|
|
color: black;
|
|
font-size: 15px;
|
|
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 {
|
|
font-size: 11px;
|
|
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);
|
|
}
|
|
|
|
/* # Size queries */
|
|
|
|
@media (min-width: 460px) {
|
|
section.pgp .buttons {
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
}
|
|
} |