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