|
|
| (20 intermediate revisions by 2 users not shown) |
| Line 1: |
Line 1: |
| /*
| |
|
| |
| MAIN GRID and standard grid elements
| |
|
| |
| */
| |
|
| |
| .main-grid {
| |
| display: grid;
| |
| grid: auto-flow dense/repeat( auto-fit, minmax( 10.2rem, 1fr ) );
| |
| grid-auto-rows: minmax( 3rem, auto );
| |
| grid-gap: -10px;
| |
| margin-top: 1px;
| |
| }
| |
|
| |
| .card {
| |
| position: relative;
| |
| /*border: 1px solid var( --border-color-base );*/
| |
| border-radius: 6px;
| |
| background: var( --card-background );
| |
| padding: var(--space-lg);
| |
| }
| |
|
| |
| .card__label {
| |
| color: var( --color-base--subtle );
| |
| font-size: 16px;
| |
| }
| |
|
| |
| .card__text {
| |
| margin-top: 15px;
| |
| }
| |
|
| |
| .card__image img {
| |
| width: 100%;
| |
| height: auto;
| |
| border-radius: 6px;
| |
| }
| |
|
| |
| .card__video video {
| |
| width: 100% !important;
| |
| height: auto !important;
| |
| }
| |
|
| |
| .card__header {
| |
| font-family: 'Saira Extra Condensed','Nunito','Saira',system-ui,-apple-system,sans-serif;
| |
| text-transform: uppercase;
| |
| font-weight: bold;
| |
| color: var( --color-base-emphasized );
| |
| font-size: 30px;
| |
| line-height: 1;
| |
| margin-bottom: 10px;
| |
| }
| |
|
| |
| .card--col2 {
| |
| grid-column: span 2;
| |
| }
| |
|
| |
| .card--col3 {
| |
| grid-column: span 3;
| |
| }
| |
|
| |
| .card--col6 {
| |
| grid-column: 1 / -1;
| |
| }
| |
|
| |
| .card--row2 {
| |
| grid-row: span 2;
| |
| }
| |
|
| |
| .card--row6 {
| |
| grid-row: span 6;
| |
| }
| |
|
| |
|
| |
| .card--row4 {
| |
| grid-row: span 4;
| |
| }
| |
|
| |
| .card--row3 {
| |
| grid-row: span 3;
| |
| }
| |
|
| |
| .card--row8 {
| |
| grid-row: span 8/auto;
| |
| }
| |
|
| |
| .card--text {
| |
| margin-top: 0px;
| |
| padding: 15px;
| |
| }
| |
|
| |
|
| |
| /*
| |
| NAVIGATION CARDS
| |
| */
| |
|
| |
| .category-card { | | .category-card { |
| padding: 0; | | padding: 0; |
| border: 0; | | border: 0; |
| transition: all 0.3s ease; | | transition: all 0.3s ease; |
| display: flex; | | display: inline-table; |
| flex-direction: column; | | margin: 3px; |
| } | | } |
|
| |
|
| Line 121: |
Line 26: |
| } | | } |
|
| |
|
| .category-card__label a {
| |
| display: flex;
| |
| width: 100%;
| |
| justify-content: center;
| |
| text-decoration: none;
| |
| color: #fff;
| |
| }
| |
|
| |
|
| .category-card__background { | | .category-card__background { |
| Line 135: |
Line 33: |
|
| |
|
| .category-card__background img { | | .category-card__background img { |
| width: 100%; | | width: 100px; |
| height: auto; | | height: auto; |
| padding: 20%; | | padding: 20%; |
| object-position: center; | | object-position: center; |
| }
| |
|
| |
|
| |
| /*
| |
| JUST BUTTONS
| |
| */
| |
|
| |
| .card-button-grid {
| |
| display: grid;
| |
| grid-gap: var( --space-xs );
| |
| text-align: center;
| |
| }
| |
|
| |
| .card-button {
| |
| display: flex;
| |
| }
| |
|
| |
| .card-button a {
| |
| flex-grow: 1;
| |
| padding: var( --space-xs );
| |
| /*border: 1px solid var(--color-button);*/
| |
| border-radius: 6px;
| |
| text-decoration: none !important;
| |
| color: var(--color-base)!important;
| |
| background: var(--color-button);
| |
| }
| |
|
| |
| .card-button a:hover {
| |
| background: var(--color-button--hover);
| |
| }
| |
|
| |
|
| |
| /*
| |
| TEXT PILL THAT GOES TOP RIGHT OF IMAGE (A BIT JANK)
| |
| */
| |
|
| |
| .image-pill {
| |
| display: inline-block;
| |
| position: relative;
| |
| text-align: center;
| |
| margin-bottom: 5px;
| |
| }
| |
|
| |
| .image-pill__text {
| |
| position: absolute;
| |
| right: 0;
| |
| top: 0;
| |
| border-radius: 6px;
| |
| background: #2396c5;
| |
| font-size: 14px;
| |
| border: none;
| |
| color: white;
| |
| padding: 4px 10px;
| |
| text-decoration: none !important;
| |
| margin: 10px 10px;
| |
| pointer-events: none;
| |
| font-family: 'Saira Extra Condensed','Nunito','Saira',system-ui,-apple-system,sans-serif;
| |
| font-style: italic;
| |
| font-weight: var( --font-weight-semibold );
| |
| }
| |
|
| |
| /*
| |
| WIKI STAT STYLING
| |
| */
| |
|
| |
| .home-stats {
| |
| display: grid;
| |
| grid-auto-flow: column;
| |
| margin-top: 15px;
| |
| grid-template-columns: 50%;
| |
| }
| |
|
| |
| .home-stats__item {
| |
| display: flex;
| |
| flex-direction: column;
| |
| align-items: center;
| |
| }
| |
|
| |
| .home-stats__label {
| |
| color: var(--color-base--subtle);
| |
| letter-spacing: 0.05em;
| |
| white-space: nowrap;
| |
| }
| |
|
| |
| .home-stats__data {
| |
| color: var(--color-base--emphasized);
| |
| font-weight: 500;
| |
| font-size: 30px;
| |
| white-space: nowrap;
| |
| font-family: 'Saira Condensed','Nunito','Saira',system-ui,-apple-system,sans-serif
| |
| }
| |
|
| |
| /*
| |
| RANDOM IDs
| |
| */
| |
|
| |
| #card--category--grid {
| |
| grid: auto-flow dense/repeat(auto-fit,minmax(7rem,1fr))
| |
| }
| |
|
| |
| #patchnotes {
| |
| height: 0;
| |
| min-height: 100%;
| |
| overflow: auto;
| |
| }
| |
|
| |
| #newcontent {
| |
| min-height: 0;
| |
| overflow: auto;
| |
| max-height: 650px;
| |
| }
| |
|
| |
| #staff {
| |
| margin-top: 15px;
| |
| text-align: center;
| |
| }
| |
|
| |
| #new-content__table tr:nth-child(n+7) {
| |
| display: none;
| |
| }
| |
|
| |
| #new-content__table td {
| |
| font-size: 14px;
| |
| }
| |
|
| |
| #new-content__table th {
| |
| display: none;
| |
| }
| |
|
| |
|
| |
| @media only screen and (max-width: 768px) {
| |
| #transitions-page {
| |
| grid-template-columns: 1fr;
| |
| }
| |
| }
| |
|
| |
| [aria-hidden="true"] {
| |
| display: none;
| |
| } | | } |
.category-card {
padding: 0;
border: 0;
transition: all 0.3s ease;
display: inline-table;
margin: 3px;
}
.category-card:hover {
transform: scale(1.04);
}
.category-card__label {
width: 100%;
color: #ffffff;
background-color: #d21f3c;
display:flex;
align-items:center;
justify-content:center;
font-family: 'Saira Extra Condensed','Nunito','Saira',system-ui,-apple-system,sans-serif;
font-weight: bold;
font-size: 26px;
font-style: italic;
border-radius: 0 0 6px 6px;
text-transform: uppercase;
}
.category-card__background {
background: #f1f2f4;
border-radius: 6px 6px 0 0;
}
.category-card__background img {
width: 100px;
height: auto;
padding: 20%;
object-position: center;
}
