webzone/styles.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); } .header p { margin: 0; text-wrap: balance; } :is(.header p) + 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; } .link-list .button { display: flex; font: var(--font-body-bold); transition: transform 200ms; border: solid 1px #00000022; } .link-list .button:hover { transform: scale(1.05); box-shadow: 0 2px 10px -8px #0009; } .link-list .button:not(.is-primary) { background: var(--bg-color); color: var(--text-color); } .link-list 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; } .icon-list svg { width: 20px; height: 20px; fill: currentColor; } .icon-list .button { display: flex; font: var(--font-body-bold); transition: transform 200ms; } .icon-list .button:hover { transform: scale(1.05); box-shadow: 0 2px 10px -8px #0009; } .icon-list .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); } footer > * { margin: 0; } footer > * + * { margin-top: 1em; } footer a { color: inherit; }