วิกิซอร์ซ:Main Page/styles.css

/* {{pp|small=yes}} */
/* Main page stylesheet */

/* Assign widgets to named grid areas. */
#mp-header-container {
  grid-area: header;
}

#mp-featured-container {
  grid-area: featured;
}

#mp-translatedfeatured-container {
  grid-area: translatedfeatured;
}

#mp-collaboration-container {
  grid-area: collaboration;
}

#mp-newtexts-container {
  grid-area: newtexts;
}

#mp-howto-container {
  grid-area: howto;
}

#mp-explore-container {
  grid-area: explore;
}

#mp-sisters-container {
  grid-area: sisters;
}

#mp-languages-container {
  grid-area: languages;
}

/* the display part */
#mp-container {
    display: grid;
    grid-template-columns: 55% 45%;
    grid-template-areas: 
      /* "header  header" */
      "featured newtexts"
      "translatedfeatured newtexts"
      "collaboration howto"
      "collaboration explore"
      "sisters sisters"
      "languages languages";
}

.mp-backgroundbox {
	border-left: 1px solid #CCCCCC;
	border-right: 1px solid #CCCCCC;
	background: #F2F6FF;
	margin: 0 0.15em;
	padding: 0 1em;
}

.mp-container-top {
	background-color: #375493;
	color: white;
	font-size: 125%;
	font-weight: bold;
	text-align: left;
	line-height: 1.6;
	padding-left: 7px;
}

/* desktop only */
@media (min-width: 875px) {
	.mp-backgroundbox-top-desktop {
		border-top: 1px solid #CCCCCC;
		margin-top: 0.3em;
	}
	
	.mp-backgroundbox-bottom-desktop {
		border-bottom: 1px solid #CCCCCC;
		padding-bottom: 1em;
	}
}

/* edits for mobile */
@media (max-width: 875px) {
	#mp-container {
		clear: both;
		display: grid;
		grid-template-columns: 100%;
		grid-template-areas: 
		/* "header" */
		"featured"
		"translatedfeatured"
		"newtexts"
		"howto"
		"collaboration"
		"explore"
		"sisters";
	}
	
	.mp-container-top {
		background-color: #375493;
		color: white;
		font-size: 125%;
		font-weight: bold;
		text-align: left;
		line-height: 1.6;
		padding: 0;
		padding-left: 7px;
		margin-top: 1em;
	}
	
	/* mobile only */
	.mp-backgroundbox-top-mobile {
		border-top: 1px solid #CCCCCC;
		margin-top: 0.3em;
	}
	
	.mp-backgroundbox-bottom-mobile {
		border-bottom: 1px solid #CCCCCC;
		padding-bottom: 1em;
	}
}