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
290 lines
No EOL
7.1 KiB
CSS
290 lines
No EOL
7.1 KiB
CSS
/* # Overrides */
|
|
|
|
:root {
|
|
--primer-color-accent: 148, 255, 21;
|
|
--color-accent: rgb(var(--primer-color-accent));
|
|
--hue-accent: 390deg;
|
|
|
|
--primer-color-go: 0, 173, 216;
|
|
--primer-color-php: 79, 93, 149;
|
|
--primer-color-css: 86, 61, 124;
|
|
--primer-color-html: 227, 76, 38;
|
|
--primer-color-shell: 137, 224, 81;
|
|
--primer-color-python: 53, 114, 165;
|
|
--primer-color-typescript: 49, 120, 198;
|
|
--primer-color-javascript: 241, 224, 90;
|
|
|
|
--color-go: rgb(var(--primer-color-go));
|
|
--color-php: rgb(var(--primer-color-php));
|
|
--color-css: rgb(var(--primer-color-css));
|
|
--color-html: rgb(var(--primer-color-html));
|
|
--color-shell: rgb(var(--primer-color-shell));
|
|
--color-python: rgb(var(--primer-color-python));
|
|
--color-typescript: rgb(var(--primer-color-typescript));
|
|
--color-javascript: rgb(var(--primer-color-javascript));
|
|
}
|
|
|
|
vv-shell {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--padding);
|
|
}
|
|
|
|
/* # Sections */
|
|
|
|
/* ## Divider */
|
|
|
|
vv-shell > hr {
|
|
border-color: rgba(255, 255, 255, .1);
|
|
}
|
|
|
|
/* ## About */
|
|
|
|
section.about {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: calc(var(--padding) / 2);
|
|
}
|
|
|
|
section.about p:first-of-type:first-letter {
|
|
font-size: 1.8rem;
|
|
font-weight: bold;
|
|
margin-right: .1rem;
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
section.about span.interests {
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
color: var(--color-accent);
|
|
animation: interests-hue 5s infinite linear;
|
|
}
|
|
|
|
section.about p i:not(:hover) {
|
|
opacity: .3;
|
|
}
|
|
|
|
/* ## Languages */
|
|
|
|
section.languages {
|
|
margin: calc(var(--padding) / 1.5) 0;
|
|
}
|
|
|
|
section.languages stacked-bar-chart {
|
|
gap: 3px;
|
|
width: 100%;
|
|
display: flex;
|
|
border-radius: 100px;
|
|
height: var(--padding);
|
|
background-color: rgba(255, 255, 255, 0);
|
|
}
|
|
|
|
section.languages stacked-bar-chart:last-of-type {
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
section.languages stacked-bar-chart:hover chart-segment {
|
|
opacity: .5;
|
|
}
|
|
|
|
section.languages stacked-bar-chart chart-segment {
|
|
--border-corner-radius: 100px;
|
|
|
|
transition: 150ms opacity;
|
|
width: var(--size, 0%);
|
|
min-width: 3%;
|
|
height: 100%;
|
|
color: white;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: rgba(255, 255, 255, .1);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
section.languages stacked-bar-chart a:nth-child(odd) chart-segment {
|
|
background-color: rgba(255, 255, 255, .3);
|
|
}
|
|
|
|
/* ### Round corners */
|
|
|
|
section.languages stacked-bar-chart a:first-child chart-segment {
|
|
border-top-right-radius: var(--padding);
|
|
border-bottom-right-radius: var(--padding);
|
|
border-top-left-radius: var(--border-corner-radius);
|
|
border-bottom-left-radius: var(--border-corner-radius);
|
|
}
|
|
|
|
section.languages stacked-bar-chart a:last-child chart-segment {
|
|
border-top-left-radius: var(--padding);
|
|
border-bottom-left-radius: var(--padding);
|
|
border-top-right-radius: var(--border-corner-radius);
|
|
border-bottom-right-radius: var(--border-corner-radius);
|
|
}
|
|
|
|
section.languages stacked-bar-chart:last-of-type a:first-child chart-segment {
|
|
border-top-left-radius: var(--padding);
|
|
border-bottom-left-radius: var(--padding);
|
|
border-top-right-radius: var(--border-corner-radius);
|
|
border-bottom-right-radius: var(--border-corner-radius);
|
|
}
|
|
|
|
section.languages stacked-bar-chart:last-of-type a:last-child chart-segment {
|
|
border-top-right-radius: var(--padding);
|
|
border-bottom-right-radius: var(--padding);
|
|
border-top-left-radius: var(--border-corner-radius);
|
|
border-bottom-left-radius: var(--border-corner-radius);
|
|
}
|
|
|
|
/* ### Texts */
|
|
|
|
section.languages stacked-bar-chart chart-segment p {
|
|
text-align: center;
|
|
color: inherit;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
pointer-events: none;
|
|
text-overflow: ellipsis;
|
|
padding: 0 3px;
|
|
}
|
|
|
|
section.languages stacked-bar-chart chart-segment[style="--size:0%;"] p span {
|
|
display: none;
|
|
}
|
|
|
|
section.languages stacked-bar-chart chart-segment[style="--size:0%;"] p::before {
|
|
content: "<1%";
|
|
opacity: .5;
|
|
}
|
|
|
|
section.languages stacked-bar-chart chart-segment [data-hover] {
|
|
display: none;
|
|
}
|
|
|
|
/* ### Colors */
|
|
|
|
section.languages stacked-bar-chart a chart-segment[data-lang="Go"] { background-color: var(--color-go); }
|
|
section.languages stacked-bar-chart a chart-segment[data-lang="PHP"] { background-color: var(--color-php); }
|
|
section.languages stacked-bar-chart a chart-segment[data-lang="CSS"] { background-color: var(--color-css); }
|
|
section.languages stacked-bar-chart a chart-segment[data-lang="HTML"] { background-color: var(--color-html); }
|
|
section.languages stacked-bar-chart a chart-segment[data-lang="Python"] { background-color: var(--color-python); }
|
|
section.languages stacked-bar-chart a chart-segment[data-lang="TypeScript"] { background-color: var(--color-typescript); }
|
|
section.languages stacked-bar-chart a chart-segment[data-lang="Shell"] { background-color: var(--color-shell); color: black; }
|
|
section.languages stacked-bar-chart a chart-segment[data-lang="JavaScript"] { background-color: var(--color-javascript); color: black; }
|
|
|
|
/* ### Legend */
|
|
|
|
section.languages languages-list {
|
|
gap: calc(var(--padding) / 2);
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
margin: var(--padding) 0;
|
|
}
|
|
|
|
section.languages languages-list language-item {
|
|
gap: 10px;
|
|
display: flex;
|
|
border-radius: 8px;
|
|
align-items: center;
|
|
fill: var(--color-php);
|
|
padding: calc(var(--padding) / 1.5);
|
|
border: solid 1px rgba(255, 255, 255, .1);
|
|
background: linear-gradient(139deg, rgba(0, 0, 0, 0) 0%, rgba(79, 93, 144, .2) 100%);
|
|
}
|
|
|
|
section.languages languages-list language-item svg {
|
|
width: 2em;
|
|
margin-left: auto;
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
section.languages button p.lang {
|
|
font-size: 1.3em;
|
|
font-weight: 900;
|
|
}
|
|
|
|
/* # Interests */
|
|
|
|
div.interests {
|
|
--text-shadow-blur: 30px;
|
|
|
|
transition: 300ms opacity;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
font-weight: bold;
|
|
pointer-events: none;
|
|
font-size: clamp(16px, 15vw, 50px);
|
|
color: var(--color-accent);
|
|
overflow: hidden;
|
|
opacity: 0;
|
|
z-index: 200;
|
|
}
|
|
|
|
div.interests.active {
|
|
opacity: 1;
|
|
}
|
|
|
|
div.interests p {
|
|
transition: 500ms transform cubic-bezier(.34,0,0,.99);
|
|
position: absolute;
|
|
text-shadow:
|
|
0 0 var(--text-shadow-blur) black,
|
|
0 0 var(--text-shadow-blur) black,
|
|
0 0 var(--text-shadow-blur) black,
|
|
0 0 var(--text-shadow-blur) black,
|
|
0 0 var(--text-shadow-blur) black;
|
|
}
|
|
|
|
@keyframes interests-hue {
|
|
to {
|
|
-webkit-filter: hue-rotate(360deg);
|
|
filter: hue-rotate(360deg);
|
|
}
|
|
}
|
|
|
|
/* Feature queries */
|
|
|
|
@media (hover: hover) {
|
|
section.languages stacked-bar-chart chart-segment:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
section.languages stacked-bar-chart chart-segment [data-hover] {
|
|
display: none;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
text-align: center;
|
|
transform: translate(0, 0);
|
|
background-color: inherit;
|
|
padding: 5px 10px;
|
|
white-space: nowrap;
|
|
pointer-events: none;
|
|
border-radius: 6px;
|
|
z-index: 2000;
|
|
-webkit-backdrop-filter: brightness(.2) blur(20px);
|
|
backdrop-filter: brightness(.2) blur(20px);
|
|
}
|
|
|
|
section.languages stacked-bar-chart chart-segment [data-hover].hovering {
|
|
display: initial;
|
|
}
|
|
}
|
|
|
|
/* Size queries */
|
|
|
|
@media (max-width: 900px) {
|
|
section.languages languages-list {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 650px) {
|
|
section.languages languages-list {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
} |