The edit can be undone. Please check the comparison below to verify that this is what you want to do, and then publish the changes below to finish undoing the edit.
Latest revision | Your text | ||
Line 1: | Line 1: | ||
. | @media (max-width: 800px) { | ||
.homesizehide { | |||
display: none; | |||
} | |||
} | |||
@media (min-width: 800px) { | |||
.priority { | |||
display: none; | |||
} | |||
} | |||
.article { | |||
grid-area: article; | |||
} | |||
.widgets { | |||
grid-area: widgets; | |||
} | |||
.main-home-grid { | |||
display: grid; | |||
grid-template-areas: | |||
"priority" | |||
"article" | |||
"widgets"; | |||
} | |||
@media (min-width: 800px) { | |||
.main-home-grid { | |||
grid-template-columns: 4.059fr 2fr; | |||
grid-gap: 0.625rem; | |||
grid-template-areas: | |||
"article widgets"; | |||
} | |||
} | |||
.split-left { | |||
grid-area: split-left; | |||
} | |||
.split-right { | |||
grid-area: split-right; | |||
} | |||
.sub-home-grid { | |||
display: grid; | |||
grid-gap: 0.625rem; | |||
grid-template-areas: | |||
"split-left" | |||
"split-right"; | |||
} | |||
@media (min-width: 200px) { | |||
.sub-home-grid { | |||
grid-template-columns: 1fr 1fr; | |||
grid-template-areas: | |||
"split-left split-right"; | |||
} | |||
} | |||
/* Templates, from Citizen */ | |||
.home-grid { | |||
display: grid; | |||
grid: auto-flow dense/repeat( auto-fit, minmax( 9.375rem, 1fr ) ); | |||
grid-auto-rows: minmax( 3rem, auto ); | |||
grid-gap: 0.625rem; | |||
} | |||
@media (max-width: 1083px) and (min-width: 916px) { | |||
.home-grid { | |||
display: grid; | |||
grid: auto-flow dense/repeat( auto-fit, minmax( 8.375rem, 1fr ) ); | |||
grid-auto-rows: minmax( 3rem, auto ); | |||
grid-gap: 0.625rem; | |||
} | |||
} | |||
@media (max-width: 915px) and (min-width: 852px) { | |||
.home-grid { | |||
display: grid; | |||
grid: auto-flow dense/repeat( auto-fit, minmax( 7.375rem, 1fr ) ); | |||
grid-auto-rows: minmax( 3rem, auto ); | |||
grid-gap: 0.625rem; | |||
} | |||
} | |||
@media (max-width: 851px) and (min-width: 838px) { | |||
.home-grid { | |||
display: grid; | |||
grid: auto-flow dense/repeat( auto-fit, minmax( 10.375rem, 1fr ) ); | |||
grid-auto-rows: minmax( 3rem, auto ); | |||
grid-gap: 0.625rem; | |||
} | |||
} | |||
.home-grid--col2 { | |||
grid-template-columns: 1fr 1fr; | |||
} | |||
.home-grid a.external { | |||
background-image: none; | |||
} | |||
.home-card { | |||
position: relative; | position: relative; | ||
padding: 15px; | |||
background: var( --color-surface-1 ); | |||
border-radius: 8px; | |||
box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.04 ), 0 3px 6px rgba( 0, 0, 0, 0.0575 ); | |||
background | |||
border-radius: | |||
font-size: 0.875rem; | font-size: 0.875rem; | ||
margin-bottom: 0.625rem; | |||
} | |||
.home-card table.timeline { | |||
margin-top: 0.2rem; | |||
} | |||
.home-card--col2 { | |||
grid-column: span 2; | |||
} | |||
.home-card--col4 { | |||
grid-column: span 4; | |||
} | } | ||
. | .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; | |||
} | |||
h3.home-card__header { | |||
margin-top: 0; | |||
font-size: 1rem; | |||
} | |||
.home-card__header a { | |||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
justify-content: space-between; | |||
} | } | ||
. | .home-card__header a:after { | ||
content: '▶'; | |||
font-size: 0.8125rem; | |||
} | } | ||
. | .home-card__background { | ||
position: absolute; | position: absolute; | ||
top: 0; | |||
right: 0; | |||
bottom: 0; | |||
left: 0; | |||
background: #242a31; | |||
border-radius: 8px; | |||
} | |||
.home-card__background img { | |||
width: 100%; | width: 100%; | ||
height: 100%; | |||
background-color: | object-fit: cover; | ||
border- | object-position: center; | ||
} | |||
.home-card__foreground { | |||
position: absolute; | |||
} | |||
.home-card__foreground .home-card__label { | |||
color: #bababa; | |||
} | |||
.home-card__foreground .home-card__header { | |||
color: #fff; | |||
} | |||
.home-card p { | |||
margin-top: 0.2rem; | |||
font-size: 0.875rem; | |||
} | |||
.home-card.home-card--button { | |||
overflow: hidden; | |||
padding: 0; | |||
background: #242a31; | |||
} | |||
.home-card--button a { | |||
display: flex; | |||
height: 100%; | |||
justify-content: center; | |||
align-items: center; | |||
padding: 0 15px; | |||
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: 6px; | |||
font-size: 0.875rem; | |||
font-weight: 500; | |||
grid-gap: 6px; | |||
text-align: center; | |||
} | |||
.home-link__button { | |||
display: flex; | |||
text-align: center; | |||
} | |||
.home-link__button a { | |||
flex-grow: 1; | |||
padding: 0.3rem 0.6rem; | |||
border: 1px solid; | |||
border-color: var( --border-color-base ); | |||
background: var( --color-surface-2 ); | |||
border-radius: 12px; | |||
color: var( --color-base--emphasized ) !important; | |||
} | |||
.home-link__button a:hover { | |||
background: var( --color-surface-2--hover ); | |||
} | } | ||
. | .home-link__button a:active { | ||
background: var( --color-surface-2--active ); | |||
} | |||
/*no radius top*/ | |||
.home-link__button-connecttop { | |||
display: flex; | |||
text-align: center; | |||
} | } | ||
. | .home-link__button-connecttop a { | ||
flex-grow: 1; | |||
padding: 0.3rem 0.6rem; | |||
border: 1px solid; | |||
border-color: var( --border-color-base ); | |||
background: var( --color-surface-2 ); | |||
border-radius: 0 0 12px 12px; | |||
color: var( --color-base--emphasized ) !important; | |||
} | } | ||
. | .home-link__button-connecttop a:hover { | ||
background | background: var( --color-surface-2--hover ); | ||
} | } | ||
.home-link__button-connecttop a:active { | |||
background: var( --color-surface-2--active ); | |||
} | } | ||
#home-content { | |||
margin-top: 1.6rem; | |||
} | } | ||
. | |||
.home-footer { | |||
font-size: 0.8125rem; | |||
font-family: monospace; | |||
text-align: center; | |||
} | |||
.button-container__spacebetween { | |||
display: flex; | |||
align-items: end; | |||
justify-content: space-between; | |||
} | |||
.button-container__right { | |||
display: flex; | |||
align-items: center; | |||
justify-content: end; | |||
} | |||
.up-date { | |||
background: var(--color-surface-3); | |||
border-radius: 100px; | |||
font-size: 0.7125rem; | |||
font-weight: 500; | |||
text-transform: uppercase; | |||
padding: 0 5px; | |||
white-space: nowrap; | |||
pointer-events: none; | |||
} | |||
@media (max-width: 500px) { | |||
#home-card-prevupdate .up-date { | |||
display: none; | |||
} | |||
} | |||
.up-preview { | |||
background: var(--color-surface-3); | |||
border-radius: 100%; | |||
font-size: 0.7125rem; | |||
font-weight: 500; | |||
text-transform: uppercase; | |||
white-space: nowrap; | |||
display: none; | |||
height: 1.5rem; | |||
width: 1.5rem; | |||
text-align: center; | |||
line-height: 1.5rem; | |||
} | |||
@media (max-width: 500px) { | |||
#home-card-prevupdate .up-preview { | |||
display: inherit; | |||
} | |||
.prevupdate-date { | |||
position: absolute; | |||
pointer-events: none; | |||
right: 0; | |||
} | |||
div#home-card-prevupdate.home-card div.citizen-table-wrapper table.wikitable tbody tr td a { | |||
width: 70%; | |||
display: inline-block; | |||
} | |||
} | |||
#home-featuredpoll.home-card div.home-server-address__container br { | |||
display: none; | |||
} | } |