Template:Main page navigation/styles.css

/* Template:Main page navigation/styles.css */

/* container and grid setup */
.navigation-container {
	display: grid;
	justify-content: space-evenly;
	column-gap: 15px;
	row-gap: 15px;
	margin-top: 10px;
}

/* for default (large) screens */
.navigation-container.gameboxes {
  grid-template-columns:
    [s1s] 1fr
    [s1e s2s] 1fr
    [s2e s3s] 1fr
    [s3e s4s] 1fr
    [s4e];
  grid-template-rows: 
    [s1s s2s s3s s4s] 1fr
    [s1e s2e s3e s4e];
}

.navigation-container.smallboxes {
  grid-template-columns:
    [box1s] 1fr
    [box1e box2s] 1fr
    [box2e box3s] 1fr
    [box3e];
  grid-template-rows:
    [box1s box2s box3s] 1fr
    [box1e box2e box3e];
}

.navigation-container.miscboxes {
  grid-template-columns: 
  [feats] 1fr
  [feate discs decomps] 1fr 
  [disce decompe];
  grid-template-rows: 
  [feats discs] 1fr
  [disce decomps] 1fr
  [decompe];
}

/* for medium screens */
@media screen and (max-width: 1050px) {
	.navigation-container.gameboxes {
    display: grid;
    grid-template-columns: 
    [s1s s3s] 1fr
    [s1e s3e s2s s4s] 1fr
    [s2e s4e] !important;
    grid-template-rows:
    [s1s s2s] 1fr
    [s1e s2e s3s s4s] 1fr
    [s3e s4e] !important;
	}

  .navigation-container.smallboxes {
    grid-template-columns:
      [box1s box2s box3s] 1fr
      [box1e box2s box3e] !important;
    grid-template-rows:
      [box1s box2s box3s] 1fr
      [box1e box2e box3e] !important;
  }
  
  .navigation-container.miscboxes {
    grid-template-columns: 
    [feats discs] 1fr
    [disce decomps] 1fr
    [feate decompe] !important;
    grid-template-rows:
    [feats] 1fr
    [feate discs decomps] 1fr
    [disce decompe] !important;
  }
}

/* for small screens */
@media screen and (max-width: 800px) {
  .navigation-container.gameboxes {
    grid-template-columns:
    [s1s s2s s3s s4s] 1fr
    [s1e s2e s3e s4e] !important;
    grid-template-rows:
    [s1s] 1fr
    [s1e s2s] 1fr
    [s2e s3s] 1fr
    [s3e s4s] 1fr
    [s4e] !important;
  }
  
  .navigation-container.miscboxes {
    grid-template-columns: 
    [feats discs decomps] 1fr
    [feate disce decompe] !important;
    grid-template-rows: 
    [feats] 1fr
    [feate discs] 1fr
    [disce decomps] 1fr
    [decompe] !important;
  }
}

.gamebox .sly-1 {
  grid-area: s1s / s1s / s1e / s1e;
}
.gamebox .sly-2 {
  grid-area: s2s / s2s / s2e / s2e;
}
.gamebox .sly-3 {
  grid-area: s3s / s3s / s3e / s3e;
}
.gamebox .sly-4 {
  grid-area: s4s / s4s / s4e / s4e;
}

.gamebox.discord {
  grid-area: discs / discs / disce / disce;
}

.gamebox.decomp {
  grid-area: decomps / decomps / decompe / decompe;
}

/* gameboxes */
.gamebox {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 15px;
	
	position: relative;
	margin: 0;
	padding: 30px 0px 20px 0px;
	width: 100%;
	max-width: none;
	/*height: fit-content;*/

    background-color: rgba(220, 220, 220, 0.5);

	text-align: center;
	overflow: hidden;
}

.gamebox * {
	margin: 0;
	padding: 0;
	z-index: 1;
}

body.skin-vector-legacy .gamebox, 
body.skin-minerva .gamebox {
	background-color: #0B1D39;
}

.gamebox-header {
	display: inline-block;
	margin: 0;
	padding: 0;
	
	flex-grow: 0;
}

.gamebox-header * {
	margin: 0;
	padding: 0;
}

.gamebox-header img {
  height: 118px !important;
}

.gamebox-title {
	font-size: 2em;
	line-height: 1em;
	font-weight: bold;
}

.gamebox-subtitle {
	max-height: 19px;
}

.gamebox-links {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex-grow: 0;
	
	margin: 0 !important;
	padding: 0;
	
	text-align: center;
	list-style: none;
}

.gamebox-links li {	
	line-height: 30px;
}

/* smallboxes */
.smallbox {
	padding: 0;
	height: 75px !important;
}

.smallbox-title {
	font-size: 1.75em;
}

/* misc boxes */
.gamebox.discord, .gamebox.decomp {
  min-height: 250px;
}

.featuredmod {
  grid-area: feats / feats / feate / feate;
}

/* background images */
.gamebox:before {
  content: "";
  position: absolute;
  padding: 0;

  height: calc(100% + 15px);
  width: calc(100% + 15px);
  
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  filter: blur(7px);
  z-index: 0;
}

.gamebox.sly-1:before {
  background-image: url(https://static.miraheze.org/slymodswiki/1/1a/Sly_1_Paris_France_HD.png);
}

.gamebox.sly-2:before {
  background-image: url(https://static.miraheze.org/slymodswiki/4/44/Sly_2_Cairo_720p.png);
  filter: blur(7px) brightness(1.2)
}

.gamebox.sly-3:before {
  background-image: url(https://static.miraheze.org/slymodswiki/8/81/Sly_3_Kaine_Island_towers.png);
}

.gamebox.sly-4:before {
  background-image: url(https://static.miraheze.org/slymodswiki/2/25/Sly_4_Pitch_Screenshot_1.jpg);
  filter: blur(7px) brightness(0.8)
}

.gamebox.discord:before {
  background-image: url(https://static.miraheze.org/slymodswiki/4/43/Sly_Modding_Discord_banner.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.gamebox.decomp:before {
  background: url(https://static.miraheze.org/slymodswiki/7/7d/Sly_1_decomp_code.png);
  background-repeat: no-repeat;
  background-size: cover !important;
  filter: blur(3px);
}