Template:Main page/sandbox.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 {

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

.enws-mainpage-hideonmobile { display: none; }

display: grid; grid-gap: 0 1em; grid-template-areas: "header" "featured" "collaboration" "newtexts" "highlights" "explore" "sisters"; margin-right: 1em; }
 * 1) enws-mainpage-content {

/* Special styling for the New Texts widget */ position: relative; }
 * 1) enws-mainpage-newtexts-container {

/* 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%; position: absolute; bottom: 0; }
 * 1) enws-mainpage-newtexts-banner {

@media all and (min-width: 1000px) { .enws-mainpage-hideonmobile { display: block; }

/* 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) */