Benutzer:Gokussj7/Spielwiese2/styles.css: Unterschied zwischen den Versionen
Aus DragonballWiki
Weitere Optionen
Inhalt gelöscht Inhalt hinzugefügt
 Gokussj7 (Diskussion | Beiträge) (Seiteninhalt ersetzt: @media only screen and (max-width: 1100px) { .slick-slider { margin-left: auto; margin-right: auto; display: block; } }) |
|||
| Zeile 5: | Zeile 5: | ||
display: block; |
display: block; |
||
} |
} |
||
#home-nav { |
|||
margin-top: 1rem; |
|||
} |
|||
#home-nav .home-card__foreground { |
|||
font-weight: var( --font-weight-medium ); |
|||
} |
|||
#home-nav .home-card.home-card--button { |
|||
height: 10rem; |
|||
} |
|||
.home-grid { |
|||
display: grid; |
|||
grid: auto-flow dense/repeat( auto-fit, minmax( 10rem, 1fr ) ); |
|||
grid-auto-rows: minmax( 3rem, auto ); |
|||
grid-gap: var( --space-xs ); |
|||
} |
|||
.home-grid--col2 { |
|||
grid-template-columns: 1fr 1fr; |
|||
} |
|||
.home-grid a.external { |
|||
background-image: none; |
|||
} |
|||
.home-card { |
|||
position: relative; |
|||
padding: var( --space-md ); |
|||
background: var( --color-surface-1 ); |
|||
border: 1px solid var( --border-color-base ); |
|||
border-radius: 8px; |
|||
box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.04 ), 0 3px 6px rgba( 0, 0, 0, 0.0575 ); |
|||
font-size: 0.875rem; |
|||
} |
|||
.home-card table.timeline { |
|||
margin-top: 0.2rem; |
|||
} |
|||
.home-card--col2 { |
|||
grid-column: span 2; |
|||
} |
|||
.home-card--row3 { |
|||
grid-row: span 3; |
|||
} |
|||
.home-card--row4 { |
|||
grid-row: span 4; |
|||
} |
|||
.home-card--row8 { |
|||
grid-row: span 8 / auto; |
|||
} |
|||
.home-card__label { |
|||
color: var( --color-base--subtle ); |
|||
font-size: 0.8125rem; |
|||
letter-spacing: 0.75px; |
|||
} |
|||
.home-card__header { |
|||
color: var( --color-base--emphasized ); |
|||
font-size: 1rem; |
|||
font-weight: var( --font-weight-semibold ); |
|||
line-height: var( --line-height-xs ); |
|||
} |
|||
.home-card__header a { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
} |
|||
.home-card__header a:after { |
|||
content: '▶'; |
|||
font-size: 0.8125rem; |
|||
} |
|||
.home-card__background { |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
left: 0; |
|||
background: #242a31; |
|||
border-radius: 8px; |
|||
} |
|||
.home-card__background:after { |
|||
position: absolute; |
|||
pointer-events: none; |
|||
top: 0; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
display: block; |
|||
background: linear-gradient(to right,#000,transparent); |
|||
content: ""; |
|||
} |
|||
.home-card__background img { |
|||
width: 100%; |
|||
height: 100%; |
|||
object-fit: cover; |
|||
object-position: center; |
|||
} |
|||
.home-card__foreground { |
|||
position: absolute; |
|||
top: 0; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
padding: var( --space-md ); |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
gap: var( --space-xxs ); |
|||
color: #fff; |
|||
line-height: var( --line-height-xs ); |
|||
pointer-events: none; |
|||
} |
|||
.home-card__foreground .home-card__header { |
|||
color: #fff; |
|||
} |
|||
.home-card__foreground .home-card__label { |
|||
color: #bababa; |
|||
} |
|||
.home-card p { |
|||
margin-top: var( --space-xs ); |
|||
font-size: 0.875rem; |
|||
} |
|||
.home-card.home-card--button { |
|||
overflow: hidden; |
|||
padding: 0; |
|||
background: #242a31; |
|||
border: 0; |
|||
} |
|||
.home-card--button a { |
|||
display: flex; |
|||
height: 100%; |
|||
justify-content: center; |
|||
align-items: center; |
|||
padding: 0 var( --space-md ); |
|||
background: transparent; |
|||
color: #fff; |
|||
font-weight: 500; |
|||
} |
|||
.home-card--button .home-card__background a { |
|||
padding: 0; |
|||
} |
|||
.home-card--button img { |
|||
transition: transform 0.2s ease; |
|||
} |
|||
.home-card--button:hover img { |
|||
transform: scale(1.1); |
|||
} |
|||
.home-link { |
|||
display: grid; |
|||
margin-top: var( --space-xs ); |
|||
font-size: 0.875rem; |
|||
font-weight: 500; |
|||
grid-gap: var( --space-xs ); |
|||
text-align: center; |
|||
} |
|||
.home-link__button { |
|||
display: flex; |
|||
} |
|||
.home-link__button a { |
|||
flex-grow: 1; |
|||
padding: var( --space-xs ); |
|||
border: 1px solid var( --border-color-base ); |
|||
background: var( --color-surface-2 ); |
|||
border-radius: var( --border-radius--medium ); |
|||
color: var( --color-base--emphasized ) !important; |
|||
line-height: var( --line-height-xs ); |
|||
text-decoration: none !important; |
|||
} |
|||
.home-link__button a:hover { |
|||
background: var( --color-surface-2--hover ); |
|||
} |
|||
.home-link__button a:active { |
|||
background: var( --color-surface-2--active ); |
|||
} |
|||
#home-content { |
|||
margin-top: var( --space-lg ); |
|||
} |
|||
.home-stats { |
|||
flex-grow: 1; |
|||
line-height: 1; |
|||
} |
|||
.home-stats__value { |
|||
font-size: 1.5rem; |
|||
font-weight: 600; |
|||
} |
|||
.home-stats__unit { |
|||
margin-top: var( --space-xxs ); |
|||
color: var( --color-base--subtle ); |
|||
font-size: 0.8125rem; |
|||
} |
|||
#home-card-discord { |
|||
min-height: 55px; |
|||
background: #5865f2; |
|||
} |
|||
#home-card-mastodon { |
|||
min-height: 55px; |
|||
background: linear-gradient(0deg, rgba(86,58,204,1) 0%, rgba(99,100,255,1) 100%); |
|||
} |
|||
#home-card-discord .external::after, |
|||
#home-card-mastodon .external::after { |
|||
display: none; |
|||
} |
|||
.home-footer { |
|||
font-size: 0.8125rem; |
|||
font-family: monospace; |
|||
text-align: center; |
|||
} |
|||
} |
} |
||