User:Alex4401/common.css

From Voices of the Void Wiki
Jump to navigation Jump to search

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
#mp-container {
	--cell-spacing: 1.2em 1.8em;
}

#mp-container {
	gap: var(--cell-spacing);
	display: flex;
	flex-direction: column;
}

.mp-row{
 	display: flex;
 	flex-flow: row;
	justify-content: stretch;
	align-items: stretch;
	gap: var(--cell-spacing);
	
	& > .mp-box:first-child,
	& > .mp-column:first-child {
		flex-grow: 1;
	}
	
	& > .mp-box:last-child {
		flex-basis: 20%;
		flex-grow: 0;
	}
}

.mp-column{
 	display: flex;
 	flex-flow: column;
	justify-content: stretch;
	align-items: stretch;
	gap: var(--cell-spacing);
}


.mp-box {
	text-align: center;
	border: 2px solid var(--votv-main-color-dark); 
	background: black;
	font-family: var(--votv-font--highlights);
	flex: 1 1 auto;
	font-size: 1.1em;
	
	.mp-header{
		color: var(--votv-firstheader); /* placing it here makes it actually override stuff */
		text-shadow: var(--votv-firstheader-shadow);
		
		font-size: 1.5em;
		font-weight: bold;
		margin: 0;
		padding-top:0;
		border-bottom: 2px solid var(--votv-main-color-dark);
		text-decoration: 2px underline var(--votv-main-color-dark);
	}
	
	.mp-body {
		margin: 0.5em 1em;
	}
}


#mp-welcome{
	.mp-header{
		font-size: 2.5em;
		font-weight: bold;
	}
	
	.mp-body{
		font-size: 1.5em;
	}
}

#mp-quicklinks{
		font-size: 1.25em;
}

.mp-flexrow{
		display: flex;
		flex-flow: row;
		flex-wrap: wrap;
		justify-content: space-evenly;
}

#mp-usefullinks {
	  .mp-body {
  	    text-align: left;
	  }
	
	  ul {
        list-style: none;
  		  margin: 0;
	  }
}

#mp-quicklinks ul {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	max-width: 800px;
	margin: 0 auto;
}