084603bb6e
- Created home.css with comprehensive styles for the home page layout, including typography, buttons, and responsive design adjustments. - Created landing.css to style the landing page, focusing on typography, layout, and responsive behavior for various screen sizes.
65 lines
4.0 KiB
CSS
65 lines
4.0 KiB
CSS
.landing-root { font-size: 16px; }
|
|
.landing-root .ds-eyebrow { font-size: 11px; }
|
|
.landing-root .ds-button { font-size: 14px !important; }
|
|
.landing-header nav { font-size: 14px; }
|
|
.landing-header > .ds-button { gap: 24px; }
|
|
.landing-hero { padding: 88px 0 80px; }
|
|
.landing-hero h1 { font-size: clamp(64px, 7.5vw, 100px); }
|
|
.landing-hero .ds-intro-copy { max-width: 580px; font-size: 16px; }
|
|
.landing-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 28px; margin-top: 30px; }
|
|
.landing-text-link { display: inline-flex; align-items: center; gap: 20px; padding: 10px 0; font-size: 14px; }
|
|
.landing-signin-note { margin-top: 14px !important; color: var(--ds-secondary); font-size: 12px; }
|
|
.landing-hero-note { flex: 0 0 200px; padding-bottom: 43px; font-size: 14px; }
|
|
.landing-root .ds-demo-note { font-size: 12px; white-space: normal; }
|
|
.landing-root .ds-footnote { font-size: 13px; }
|
|
.landing-root .ds-preview-heading .ds-eyebrow { font-size: 11px; }
|
|
.landing-root .ds-preview-heading > p { font-size: 13px; }
|
|
.landing-root .ds-view-switch button { font-size: 14px; }
|
|
.landing-root .ds-counter .ds-button { font-size: 23px !important; }
|
|
.landing-demo-hint { max-width: 740px; }
|
|
.landing-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; list-style: none; padding: 0; margin: 44px 0 24px; }
|
|
.landing-steps li { border-top: 1px solid var(--ds-rule); padding-top: 22px; }
|
|
.landing-steps .ds-eyebrow { color: var(--ds-secondary); }
|
|
.landing-steps h3 { font-family: var(--ds-serif); font-size: 29px; line-height: 1.15; margin: 22px 0 14px; }
|
|
.landing-steps p, .landing-discord-copy > p { color: var(--ds-secondary); line-height: 1.8; }
|
|
.landing-discord { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; padding-top: 56px; padding-bottom: 64px; }
|
|
.landing-discord h2 { font-size: clamp(38px, 4.5vw, 56px); margin-top: 24px; }
|
|
.landing-discord-copy { padding-top: 4px; }
|
|
.landing-discord-details { margin: 30px 0 0; }
|
|
.landing-discord-details > div { border-top: 1px solid var(--ds-rule); padding: 18px 0; }
|
|
.landing-discord-details dt { margin-bottom: 6px; font-size: 14px; }
|
|
.landing-discord-details dd { margin: 0; color: var(--ds-secondary); font-size: 14px; line-height: 1.7; }
|
|
.landing-closing { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 56px 0 64px; }
|
|
.landing-closing h2 { font-size: clamp(44px, 5.5vw, 64px); margin-top: 22px; }
|
|
.landing-closing > div:last-child { text-align: right; }
|
|
.landing-footer { font-size: 13px; }
|
|
.landing-auth-error { border-bottom: 1px solid var(--ds-rule); padding: 20px 0; font-size: 14px; }
|
|
.landing-account-state { max-width: 600px; margin: auto; padding: 96px 24px; }
|
|
.landing-account-state p { margin: 32px 0 20px; color: var(--ds-secondary); }
|
|
|
|
@media (max-width: 900px) {
|
|
.landing-hero-note { flex-basis: 160px; }
|
|
.landing-steps { gap: 24px; }
|
|
.landing-discord { gap: 32px; }
|
|
}
|
|
@media (max-width: 680px) {
|
|
.landing-header { flex-wrap: wrap; gap: 20px; padding: 22px 24px; }
|
|
.landing-header nav { order: 3; flex-basis: 100%; justify-content: space-between; gap: 16px; }
|
|
.landing-root .ds-main { padding: 0 24px; }
|
|
.landing-hero { padding: 52px 0; }
|
|
.landing-hero h1 { font-size: clamp(54px, 12vw, 78px); letter-spacing: -1.5px; }
|
|
.landing-hero-note { display: none; }
|
|
.landing-desktop-break { display: none; }
|
|
.landing-root .ds-section-top { align-items: flex-start; }
|
|
.landing-root .ds-section-top h2 { font-size: 38px; }
|
|
.landing-root .ds-preview-toolbar { flex-wrap: wrap; gap: 8px 20px; }
|
|
.landing-root .ds-view-switch { gap: 20px; }
|
|
.landing-root .ds-preview-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
|
|
.landing-steps { grid-template-columns: 1fr; gap: 28px; margin-top: 32px; }
|
|
.landing-steps h3 { margin-top: 14px; }
|
|
.landing-discord { grid-template-columns: 1fr; gap: 28px; padding: 40px 0; }
|
|
.landing-closing { align-items: flex-start; flex-direction: column; padding: 40px 0; }
|
|
.landing-closing > div:last-child { text-align: left; }
|
|
.landing-footer { flex-wrap: wrap; gap: 20px; }
|
|
}
|