132 lines
2.2 KiB
CSS
132 lines
2.2 KiB
CSS
|
|
@import "https://unpkg.com/@lumeland/ds@0.5.2/ds.css";
|
|
/* Lume's design system */
|
|
/* Custom components */
|
|
.header {
|
|
font: var(--font-body);
|
|
margin-bottom: min(5vh, 100px);
|
|
color: var(--color-text);
|
|
|
|
p {
|
|
margin: 0;
|
|
text-wrap: balance;
|
|
|
|
+ p {
|
|
margin-top: .5em;
|
|
}
|
|
}
|
|
}
|
|
.header-avatar {
|
|
border-radius: 50%;
|
|
aspect-ratio: 1;
|
|
-o-object-fit: cover;
|
|
object-fit: cover;
|
|
-o-object-position: center center;
|
|
object-position: center center;
|
|
width: 200px;
|
|
max-width: 50vw;
|
|
}
|
|
.header-title {
|
|
font: var(--font-title);
|
|
letter-spacing: var(--font-title-spacing);
|
|
margin: .5em 0 0;
|
|
color: var(--color-base);
|
|
}
|
|
.header-theme {
|
|
position: absolute;
|
|
top: 1rem;
|
|
right: 1.5rem;
|
|
}
|
|
.link-list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: grid;
|
|
row-gap: 10px;
|
|
|
|
.button {
|
|
display: flex;
|
|
font: var(--font-body-bold);
|
|
transition: transform 200ms;
|
|
border: solid 1px #00000022;
|
|
|
|
&:hover {
|
|
transform: scale(1.05);
|
|
box-shadow: 0 2px 10px -8px #0009;
|
|
}
|
|
}
|
|
.button:not(.is-primary) {
|
|
background: var(--bg-color);
|
|
color: var(--text-color);
|
|
}
|
|
|
|
svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
fill: currentColor;
|
|
}
|
|
}
|
|
[data-theme="dark"] {
|
|
.link-list .button {
|
|
border: solid 1px #FFFFFF16;
|
|
}
|
|
}
|
|
.icon-list {
|
|
list-style: none;
|
|
margin: 0 0 min(5vh, 100px);
|
|
padding: 0;
|
|
display: flex;
|
|
gap: 10px;
|
|
justify-content: center;
|
|
|
|
svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
fill: currentColor;
|
|
}
|
|
|
|
.button {
|
|
display: flex;
|
|
font: var(--font-body-bold);
|
|
transition: transform 200ms;
|
|
|
|
&:hover {
|
|
transform: scale(1.05);
|
|
box-shadow: 0 2px 10px -8px #0009;
|
|
}
|
|
}
|
|
.button:not(.is-primary) {
|
|
background: var(--bg-color);
|
|
color: var(--text-color);
|
|
}
|
|
}
|
|
body {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 500px);
|
|
grid-template-rows: 1fr auto;
|
|
min-height: 100vh;
|
|
text-align: center;
|
|
padding: max(20px, 5vh) 20px;
|
|
row-gap: 20px;
|
|
justify-content: center;
|
|
align-content: center;
|
|
}
|
|
main {
|
|
align-self: center;
|
|
}
|
|
footer {
|
|
font: var(--font-small);
|
|
color: var(--color-dim);
|
|
|
|
> * {
|
|
margin: 0;
|
|
}
|
|
|
|
> * + * {
|
|
margin-top: 1em;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
}
|
|
}
|