Difference between revisions of "Widget:Homepage"
From LINKS Community Center
| Line 16: | Line 16: | ||
transition: all 300ms ease-in-out; | transition: all 300ms ease-in-out; | ||
} | } | ||
| + | .loaded #hp-heading { clip-path: inset(0); } | ||
#hp-heading h1 { font-family: 'Raleway'; font-size: 5em; margin-bottom: .5em; } | #hp-heading h1 { font-family: 'Raleway'; font-size: 5em; margin-bottom: .5em; } | ||
#hp-heading h1 span { | #hp-heading h1 span { | ||
| Line 25: | Line 26: | ||
} | } | ||
.loaded #hp-heading h1 span { opacity: 1; transform: translateX(0);} | .loaded #hp-heading h1 span { opacity: 1; transform: translateX(0);} | ||
| − | #hp-heading h1 span:nth-child(1) { font-weight: 800; letter-spacing: .06em; transition-delay: | + | #hp-heading h1 span:nth-child(1) { font-weight: 800; letter-spacing: .06em; transition-delay: 300ms; } |
| − | #hp-heading h1 span:nth-child(2) { font-weight: 500; transition-delay: | + | #hp-heading h1 span:nth-child(2) { font-weight: 500; transition-delay: 400ms; } |
| − | #hp-heading h1 span:nth-child(3) { font-weight: 100; transition-delay: | + | #hp-heading h1 span:nth-child(3) { font-weight: 100; transition-delay: 500ms; } |
| − | #hp-heading .hp-lead { font-size: 2em; font-weight: 300; margin-bottom: 2em; opacity: 0; transition: all 500ms ease-in-out | + | #hp-heading .hp-lead { font-size: 2em; font-weight: 300; margin-bottom: 2em; opacity: 0; transition: all 500ms ease-in-out 1000ms; } |
.loaded #hp-heading .hp-lead { opacity: 1; } | .loaded #hp-heading .hp-lead { opacity: 1; } | ||
.hp-large-button { | .hp-large-button { | ||
| Line 38: | Line 39: | ||
user-select: none; | user-select: none; | ||
opacity: 0; | opacity: 0; | ||
| − | transition: all 500ms ease-in-out | + | transition: all 500ms ease-in-out 1300ms; |
} | } | ||
.loaded .hp-large-button { opacity: 1; } | .loaded .hp-large-button { opacity: 1; } | ||
Revision as of 16:26, 23 May 2022
Development verstion of the DCT Homepage.
Not ready for production!