Template:Main Page/shared/styles.css

/* Created & Original at https://starcitizen.tools - Credits to them */

/* Base Grid Layout */
.home-grid {
  display: grid;
  grid: auto-flow dense / repeat(auto-fit, minmax(9.375rem, 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;
}

/* Responsive Grid Adjustments */
@media (max-width: 1083px) and (min-width: 916px) {
  .home-grid {
    grid: auto-flow dense / repeat(auto-fit, minmax(8.375rem, 1fr));
  }
}
@media (max-width: 915px) and (min-width: 852px) {
  .home-grid {
    grid: auto-flow dense / repeat(auto-fit, minmax(7.375rem, 1fr));
  }
}
@media (max-width: 851px) and (min-width: 838px) {
  .home-grid {
    grid: auto-flow dense / repeat(auto-fit, minmax(10.375rem, 1fr));
  }
}
.citizen-feature-custom-width-clientpref-wide .home-grid {
  grid: auto-flow dense / repeat(auto-fit, minmax(15.375rem, 1fr));
}

/* Home Card Styles */
.home-card {
  position: relative;
  padding: var(--space-md);
  border: 1px solid var(--border-color-base);
  background: var(--color-surface-1);
  border-radius: var(--border-radius-medium);
  font-size: var(--font-size-small);
  margin-bottom: 0.625rem;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.04), 0 3px 6px rgba(0, 0, 0, 0.0575);
}

.home-card table.timeline {
  margin-top: var(--space-xs);
}

.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__badge,
.home-card__label {
  color: var(--color-subtle);
  font-size: var(--font-size-x-small);
  letter-spacing: 0.05em;
}

.home-card__badge {
  padding: var(--space-xxs) var(--space-xs);
  border-radius: var(--border-radius-base);
  background: var(--color-surface-2);
}

.home-card__header {
  color: var(--color-emphasized);
  font-size: 1rem;
  font-weight: var(--font-weight-semi-bold);
  line-height: var(--line-height-xxx-small);
}

.home-card__header a {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.home-card__header a:after {
  content: '▶';
  font-size: var(--font-size-x-small);
}

.home-card__background {
  position: absolute;
  inset: 0;
  background: #242a31;
  border-radius: 8px;
}

.home-card__background:after {
  position: absolute;
  pointer-events: none;
  inset: 0;
  display: block;
  background: linear-gradient(to right, #000, transparent);
  content: "";
  transition: transform 250ms ease;
}

.home-card__background picture,
.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-xxx-small);
  pointer-events: none;
}

.home-card__foreground .home-card__badge {
  position: absolute;
  top: 0;
  right: 0;
  border-top-left-radius: 0;
  border-bottom-right-radius: 0;
}

.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: var(--font-size-small);
}

.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: var(--font-weight-medium);
}

.home-card--button .home-card__background a {
  padding: 0;
}

.home-card--button img {
  transition: transform 250ms ease;
}

.home-card--button:hover img {
  transform: scale(1.1);
}

/* Home Links */
.home-link {
  display: grid;
  margin-top: var(--space-xs);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
  grid-gap: var(--space-xs);
  text-align: center;
}

.home-link__button,
.home-link__button-connecttop {
  display: flex;
  text-align: center;
}

.home-link__button a,
.home-link__button-connecttop a {
  flex-grow: 1;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--border-color-base);
  background: var(--color-surface-2);
  color: var(--color-emphasized) !important;
  text-decoration: none !important;
  line-height: var(--line-height-xxx-small);
}

.home-link__button a {
  border-radius: var(--border-radius-medium);
}

.home-link__button-connecttop a {
  border-radius: 0 0 12px 12px;
}

.home-link__button a:hover,
.home-link__button-connecttop a:hover {
  background: var(--color-surface-2--hover);
}

.home-link__button a:active,
.home-link__button-connecttop a:active {
  background: var(--color-surface-2--active);
}

/* Footer */
.home-footer {
  font-size: var(--font-size-small);
  font-family: var(--font-family-monospace);
  text-align: center;
}

/* Utilities */
@media (max-width: 800px) {
  .homesizehide {
    display: none;
  }
}
@media (min-width: 800px) {
  .priority {
    display: none;
  }
}

/* Layout Areas */
.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";
  }
}

/* Misc Elements */
#home-content {
  margin-top: var(--space-lg);
}

#home-card-discord {
  background: #5865f2;
}
#home-card-patreon {
  background: #ff424d;
}
#home-card-kofi {
  background: #ff5e5b;
}
#home-card-reddit {
  background: #ff4500;
}

.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 {
    cursor: help;
  }
  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;
}