Sjabloon:Hoofdpagina/styles.css

/* These are the TemplateStyles styles for the Main page.
 * Specifically, this includes CSS that enables a mobile-responsive layout
 */

#nlws-mainpage-header-container {
    grid-area: header;
    text-align:center;
    padding:0.8em;
    border:1px solid silver;
    font-size: 105%;
}

#nlws-mainpage-header-banner {
    border-bottom: 1px solid silver;
}

#nlws-mainpage-header-stats {
    font-weight: bold;
}

#nlws-mainpage-header-navlist {
    margin: 0.8em;
    display: table;
    margin: auto;
    width:80%;
    border:1px solid silver;
}

#nlws-mainpage-featured-container {
    grid-area: featured;
    padding:0.8em;
    border:1px solid silver;
}

#nlws-mainpage-welcome-container {
    grid-area: welcome;
    border:1px solid SlateBlue;
    background: #FAFAFF;
    padding:0.8em;
}

#nlws-mainpage-welcome-container > div:nth-child(n+2) {
    border-top:1px dashed SlateBlue;
    margin-top:10px;
}

#nlws-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.8em;
  grid-template-areas: 
  "header"
  "featured"
  "welcome";
  margin-right: 1em;
}

/*
 * On wider screens, allow a dual-column layout
 */
@media all and (min-width: 1000px) {
  #nlws-mainpage-content {
    display: grid;
    grid-template-columns: 40% 60%;
    grid-template-areas: 
      "header  header"
      "featured welcome";
  }
}

/* Do not allow images to prevent the container shrinking */
#nlws-mainpage-content img {
	max-width: 100%;
	height: auto;
}