Template:Main page/styles.css

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

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

grid-area: featured; }
 * 1) enws-mainpage-featured-container {

grid-area: collaboration; }
 * 1) enws-mainpage-collaboration-container {

grid-area: newtexts; }
 * 1) enws-mainpage-newtexts-container {

grid-area: highlights; }
 * 1) enws-mainpage-highlights-container {

grid-area: explore; }
 * 1) enws-mainpage-explore-container {

grid-area: sisters; }
 * 1) enws-mainpage-sisters-container {

/* 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; }
 * 1) enws-mainpage-content {

/* 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 */ margin: 0.5em auto 0.25em auto; text-align: center; font-size: 92%; }
 * 1) enws-mainpage-newtexts-banner {

/* 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: #5090C0; 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 #5090C0; margin: 0 0 0 0; }

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

#enws-mainpage-sisters-container { margin-top: 1em; } } /* END: @media all and (min-width: 720px) */