webzone/styles.css
2024-12-22 14:59:18 +00:00

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;
}
}