Widget: Homepage: Difference between revisions
From LINKS Community Center
Eschmidt (talk | contribs) No edit summary |
Eschmidt (talk | contribs) No edit summary |
||
| Line 25: | Line 25: | ||
transition: all 500ms ease-in-out; | transition: all 500ms ease-in-out; | ||
} | } | ||
.loaded #hp-heading h1 span { opacity: | .loaded #hp-heading h1 span { opacity: .95; transform: translateX(0);} | ||
#hp-heading h1 span:nth-child(1) { font-weight: 800; letter-spacing: .06em; transition-delay: 300ms; } | #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: 400ms; } | #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: 500ms; } | #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 1000ms; } | #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: | .loaded #hp-heading .hp-lead { opacity: .95; } | ||
.hp-large-button { | .hp-large-button { | ||
display: inline-block; | display: inline-block; | ||
| Line 36: | Line 36: | ||
font-size: 1.6em; | font-size: 1.6em; | ||
padding: .5em; | padding: .5em; | ||
border: 1px solid | border: 1px solid rgba(0, 0, 0, .9); | ||
user-select: none; | user-select: none; | ||
opacity: 0; | opacity: 0; | ||
| Line 52: | Line 52: | ||
.hp-area-text p { font-size: 1.2em; margin: 0 0 0 .1em; } | .hp-area-text p { font-size: 1.2em; margin: 0 0 0 .1em; } | ||
.hp-area-arrow { flex: 1 0; font-size: 3em; margin-left: 1em; user-select: none; } | .hp-area-arrow { flex: 1 0; font-size: 3em; margin-left: 1em; user-select: none; } | ||
.hp-compass { border-top: 1px solid | .hp-compass { border-top: 1px solid rgba(0, 0, 0, .9); border-bottom: 1px solid rgba(0, 0, 0, .9); padding: 5em; display: flex; justify-content: center; } | ||
#forum-topics { padding: 4em 1em 4em 0; border-right: 1px solid | #forum-topics { padding: 4em 1em 4em 0; border-right: 1px solid rgba(0, 0, 0, .9); } | ||
#hp-recent h3 { margin-bottom: 1em; } | #hp-recent h3 { margin-bottom: 1em; } | ||
#hp-changes { padding: 4em 0 4em 1em; } | #hp-changes { padding: 4em 0 4em 1em; } | ||
| Line 60: | Line 60: | ||
width: 100px; | width: 100px; | ||
height: 100px; | height: 100px; | ||
border: 1px solid | border: 1px solid rgba(0, 0, 0, .9); | ||
} | } | ||
.placeholder-box::before { | .placeholder-box::before { | ||
| Line 70: | Line 70: | ||
width: 141.42%; | width: 141.42%; | ||
height: 1px; | height: 1px; | ||
background-color: | background-color: rgba(0, 0, 0, .9); | ||
transform-origin: top left; | transform-origin: top left; | ||
transform: rotate(45deg); | transform: rotate(45deg); | ||
| Line 82: | Line 82: | ||
width: 141.42%; | width: 141.42%; | ||
height: 1px; | height: 1px; | ||
background-color: | background-color: rgba(0, 0, 0, .9); | ||
transform-origin: bottom left; | transform-origin: bottom left; | ||
transform: rotate(-45deg); | transform: rotate(-45deg); | ||
Revision as of 16:21, 23 May 2022
Development verstion of the DCT Homepage.
Not ready for production!