Template:Main page navigation/Sandbox/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.featuredmod { grid-area: feats / feats / feate / feate; }

.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; }

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

/* 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/0/0d/Sly_1_Paris_France.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: url(https://static.miraheze.org/slymodswiki/4/43/Sly_Modding_Discord_banner.png); 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: 125%; filter: blur(3px); }