Template:Main page/တႆး/styles.css

/* These are the TemplateStyles styles for the Main page. */

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

#enws-mainpage-featured-container {
	grid-area: featured;
}

#enws-mainpage-collaboration-container {
	grid-area: collaboration;
}

#enws-mainpage-newtexts-container {
	grid-area: newtexts;
}

#enws-mainpage-highlights-container {
	grid-area: highlights;
}

#enws-mainpage-explore-container {
	grid-area: explore;
}

#enws-mainpage-sisters-container {
	grid-area: sisters;
}

#enws-mainpage-content {
	/* Keep the mw-indicators above the main content.
		Normally, they go next to the H1 title, but there isn't one here. */
	clear: both;
	display: grid;
	grid-gap: 0 1em;
	grid-template-areas: 
	"header"
	"featured"
	"newtexts"
	"highlights"
	"collaboration"
	"explore"
	"sisters";
	margin-right: 1em;
}

/* The banner with links at the bottom of the New Texts widget */
/* Temporary specific rules to move away from the style attribute to a stylesheet */
#enws-mainpage-newtexts-banner {
	margin: 0.5em auto 0.25em auto;
	text-align: center;
	font-size: 92%;
}

/* Narrow screen adjustments (i.e. mobile) */
@media screen and (max-width: 736px) {
	/* FIXME: 736px is the inherited value.
		Once Codex gets done we have to sync that breakpoint or, preferably, use a var(). */

	/* hide non-essential desktop-only content */
		.enws-hide-on-mobile {
			display: none;
		}
}

/* Large screen adjustments (i.e. desktop) */
@media all and (min-width: 1000px) {
	/* The 1000px is inherited.
		Once Codex gets done we have to sync that breakpoint or, preferably, use a var(). */

	/* The container for the flexible middle section of the main page that contains the content boxes. */
	#enws-mainpage-content {
		display: grid;
		grid-template-columns: 55% 45%;
		grid-template-areas: 
			"header header"
			"featured newtexts"
			"collaboration highlights"
			"collaboration explore"
			"sisters sisters";
	}

	/* Each content box. */
	.enws-mainpage-widget-content {
		margin: 1em;
	}

	.enws-mainpage-widget-header {
		background-color: #236798;
		font-weight: bold;
		color: white;
		padding: 0.3em 1em;
		margin: 0 0 1em 0;
		font-size: inherit;
		text-align: center;
		text-transform: uppercase;
	}

	.enws-mainpage-widget {
		border: 1px solid #236798;
		margin: 0 0 0 0;
	}

	#enws-mainpage-header-container {
		margin-bottom: 1em;
	}

	#enws-mainpage-sisters-container {
		margin-top: 1em;
	}
}

@media screen {
	html.skin-theme-clientpref-night .enws-mainpage-widget-header {
		background-color: #7bbce5;
		color: black;
	}
	html.skin-theme-clientpref-night .enws-mainpage-widget {
		border-color: #7bbce5;
	}
}
@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .enws-mainpage-widget-header {
		background-color: #7bbce5;
		color: black;
	}
	html.skin-theme-clientpref-os .enws-mainpage-widget {
		border-color: #7bbce5;
	}
}