mirror of
https://codeberg.org/vegvisir/website.git
synced 2025-09-13 16:33:42 +02:00
vlw
7a8fc36ec0
Brand new design for the website following the new design language I used for [version 2.0 of my personal website](https://codeberg.org/vlw/vlw.se/releases/tag/2.0.0). Reviewed-on: https://codeberg.org/vegvisir/website/pulls/2 Co-authored-by: vlw <victor@vlw.se> Co-committed-by: vlw <victor@vlw.se>
113 lines
No EOL
2 KiB
CSS
113 lines
No EOL
2 KiB
CSS
code-demo {
|
|
--primer-color-base: 31, 31, 31;
|
|
--color-base: rgb(var(--primer-color-base));
|
|
--height: calc(var(--padding) * 2.5);
|
|
|
|
display: block;
|
|
min-width: 700px;
|
|
border-radius: 12px;
|
|
font-family: monospace;
|
|
background-color: var(--color-base);
|
|
}
|
|
|
|
/* # Header */
|
|
|
|
code-demo .header {
|
|
display: flex;
|
|
overflow-x: scroll;
|
|
height: var(--height);
|
|
border-bottom: solid 1px rgba(255, 255, 255, .1);
|
|
}
|
|
|
|
code-demo .header button.inline {
|
|
border: solid 1px rgba(255, 255, 255, .1);
|
|
border-bottom: unset;
|
|
border-radius: unset;
|
|
box-shadow: unset;
|
|
}
|
|
|
|
code-demo .header button.inline:hover {
|
|
box-shadow: unset;
|
|
}
|
|
|
|
code-demo .header button:first-child {
|
|
margin-left: var(--height);
|
|
}
|
|
|
|
code-demo .header button.inline + button.inline {
|
|
border-left: unset;
|
|
}
|
|
|
|
/* ## Active */
|
|
|
|
code-demo .header button {
|
|
--primer-color-accent: 255, 255, 255;
|
|
--color-accent: rgb(var(--primer-color-accent));
|
|
}
|
|
|
|
code-demo .header button.active {
|
|
border-top: solid 4px var(--color-accent);
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* ## Languages */
|
|
|
|
code-demo .header button[data-lang="js"] {
|
|
--primer-color-accent: 241, 224, 90;
|
|
--color-accent: rgb(var(--primer-color-accent));
|
|
}
|
|
|
|
code-demo .header button[data-lang="css"] {
|
|
--primer-color-accent: 81, 154, 186;
|
|
--color-accent: rgb(var(--primer-color-accent));
|
|
}
|
|
|
|
code-demo .header button[data-lang="php"] {
|
|
--primer-color-accent: 160, 116, 196;
|
|
--color-accent: rgb(var(--primer-color-accent));
|
|
}
|
|
|
|
code-demo .header button[data-lang="html"] {
|
|
--primer-color-accent: 221, 120, 49;
|
|
--color-accent: rgb(var(--primer-color-accent));
|
|
}
|
|
|
|
/* # Body */
|
|
|
|
code-demo .body {
|
|
overflow: scroll;
|
|
padding: var(--padding);
|
|
}
|
|
|
|
code-demo .body .view-line {
|
|
white-space: pre;
|
|
}
|
|
|
|
/* ## Tabs */
|
|
|
|
code-demo .body [data-file] {
|
|
display: none;
|
|
}
|
|
|
|
code-demo .body [data-file].active {
|
|
display: initial;
|
|
}
|
|
|
|
code-demo .body a {
|
|
display: inline;
|
|
text-decoration: underline;
|
|
text-decoration-color: white;
|
|
}
|
|
|
|
code-demo .body a:hover {
|
|
text-decoration-thickness: 2px;
|
|
}
|
|
|
|
/* # Size queries */
|
|
|
|
@media (max-width: 950px) {
|
|
code-demo {
|
|
width: 100%;
|
|
min-width: unset;
|
|
}
|
|
} |