Template:Mainpage/styles.css

/* For templates used on Main Page:
   MainWelcome, MainHeroes, MainHeroes/Icon, MainHeroes/Port, MainContent */

/*** Headers ***/
.mainheader {
	text-align: center;
	font-size: 35px;
	line-height: 1;
	font-family: 'MuseoSans500';
	font-weight: bold;
	color: #FBFAD9;
	margin: 0 auto 10px; }
	
/*** Blocks ***/
.mainblock, .glassblock {
	margin: 0 auto 10px;
	max-width: 1150px;
	font-family: 'Montserrat', sans-serif; }
.mainblock, .miniblock {
	border: 5px solid #3FB9BE;
	background: url(https://static.miraheze.org/gogiganticwiki/b/b2/Block_background_tile.png);
	background-color: #002B36;
	margin: 0 auto 10px; }
.glassblock {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around; }
.miniglass {
	width: 30%; }
.miniblock {
	padding: 15px;
	min-height: 225px; }
@media only screen and (max-width:850px) {
	.miniblock table {
		width: unset; }
}
@media only screen and (max-width:400px) {
	.miniglass {
		width: 95%; }
	.miniblock {
		min-height: unset !important;	 }
}

/* External links colors */
.mainblock a.extiw, .mainblock a.external {
    color: #FFF8A1 !important; }
.mainblock a.extiw:visited, .mainblock a.external:visited {
	color: #FFF37A !important; }

/*** Welcome block ***/
.mainwelcome {
	text-align: center;
	padding: 15px 30px;
	font-size: 110%; }
/* On small screens */
@media only screen and (max-width: 690px) {
	.relogo img {
		width: 500px;
		height: auto; }
}
@media only screen and (max-width: 560px) {
	.relogo img {
		width: 400px; }
}
@media only screen and (max-width: 480px) {
	.relogo img {
		width: 300px; }
}
@media only screen and (max-width: 390px) {
	.mainwelcome {
		padding: 10px 7px; }
}

/*** Hero block ***/
.iconbox, .portbox, .thumbbox { /* Container (added to mainblock) + same styles for Content block */
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	white-space: pre-wrap;
	text-align: center; }
.iconbox, .thumbbox {
	padding: 10px; }
.portbox {
	padding: 10px 60px; }

.iconhandler, .iconblank { /* Element of icon */
	width: 120px;
	height: 120px; }
body.skin-timeless .iconhandler, body.skin-timeless .iconblank { /* On Timeless */
	margin: 6px; }
body.skin-vector .iconhandler, body.skin-vector .iconblank { /* On Vector */
	margin: 5px 10px; }

.porthandler { /* Element of portrait (new) */
	width: 162px;
	height: 85px; }
body.skin-timeless .porthandler { /* On Timeless */
	margin: 10px; }
body.skin-vector .porthandler { /* On Vector */
	margin: 5px 10px; }	

/* Changes for ports */
@media screen and (max-width:1350px) {
	.portbox {
		padding: 10px !important; }
}
@media screen and (max-width:1250px) {
	.portbox {
		padding: 5px !important; }
}
@media screen and (max-width:990px) {
	.portbox {
		padding: 10px 0 !important; }
	.porthandler { 
    	margin: 5px !important; }
}
@media screen and (max-width:930px) {
	.porthandler { 
		width: 140px !important;
		height: 75px !important; }
	.porthandler img {
    	width: 130px;
    	height: auto; }
}
/* Type switch (depending on screensize) */
@media screen and (min-width:501px) {
	.iconbox {
		display: none !important; }
}
@media screen and (max-width:500px) {
	.portbox {
		display: none !important; }
/* Changes for icons */
	.iconhandler, .iconblank {
    	width: 110px !important;
    	margin: 0 !important; }
	.iconhandler img, .iconblank img {
    	width: 100px !important;
    	margin: 0 !important; }
}
@media only screen and (max-width: 400px) {
	.iconhandler, .iconblank {
		width: 100px !important;
		margin: -3px auto !important; }
	.iconhandler img, .iconblank img {
		width:90px !important; }
	.thumbsize {
		width: 130px; }
}

/*** Content block ***/
.thumbhandler { /* Element of thumbnail */
	border-collapse: collapse;
	margin: 5px 20px; }
/* On Timeless */
@media screen and (max-width: 1365px) {
	body.skin-timeless .thumbhandler {
    	margin: 5px 10px; }
}
@media only screen and (max-width:1329px) {
	body.skin-timeless .thumbhandler {
    	margin: 5px 0; }
}
/* On Vector */
@media only screen and (max-width: 1117px) { 
	body.skin-vector .thumbhandler {
		margin: 5px 0; }
}
.thumbsize {
	width: 140px;
	height: 103px; }

/*** Borders for icons and thumbs ***/
.iconhandler img, .porthandler img, .thumbsize img {
    border: 5px outset #017087;
	background: linear-gradient(#E7E7E7, #C6C7C6); }
.iconhandler img:hover, .porthandler img:hover, .thumbsize img:hover {
	border: 5px solid #3FB9BE; }
.iconhandler img, .thumbsize img, .iconblank img {
	margin: 5px; }
.iconblank {
	border: 5px solid transparent; }

/*** Links block ***/
.logo {
	margin: 0 auto 8px;
	border-collapse: collapse; }
.logo td {
	padding: 0 4px; }
#whitefilter {
	filter: brightness(0) invert(1); }
/*** Community block ***/
.comm {
	margin: 10% auto; }
@media only screen and (max-width:400px) {
	.comm {
		margin: 5px auto; }
}

/*** Activity block (Recent Changes restyling) ***/
/* .mw-changeslist {
	margin-top: ; } */
/* Day heading */
.mw-changeslist h4 {
	margin: 8px 0 2px;
	font-size: 100%;
	font-weight: bold;
	font-family: 'Montserrat', sans-serif; }
/* Hide legend card, prefixes, commentary, rollback, user page actions, history links, tags */
.mw-changeslist-legend, .mw-enhancedchanges-arrow-space, .mw-enhanced-rc:nth-child(4),
.comment, .mw-changeslist-line-inner-rollback, .mw-usertoollinks, .mw-changeslist-links,
.mw-changeslist-line-inner-tags {
    display: none; }
/* Changing separator to | instead of . . */
.mw-changeslist-separator:empty::before {
    content: '|'; }
/* Different shade of grey for (0) */
.mw-plusminus-null {
	color: #696969; }


/* [[Category:Styling pages]] */