Difference between revisions of "MediaWiki:Common.css"

Revision as of 10:07, 12 May 2020

/* grid container (large screen) */
.grid-container {
  display: grid;
  grid-template-areas: 
    'header header header header header header' 
    'left middle middle middle middle right' 
    'left middle2 middle2 middle2 middle2 right' 
    'left middle3 middle3 middle3 middle3 right' 
    'left footer footer footer footer footer';
} 

/* grid container (medium screen) */
@media only screen and (max-width: 1200px) {
  .grid-container  {
    grid-template-areas: 
    'header header header header header header' 
    'left middle middle middle middle middle ' 
    'left middle2 middle2 middle2 middle2 middle2 ' 
    'left middle3 middle3 middle3 middle3 middle3 ' 
    'left footer footer footer footer footer';
  }
}

/* grid container (small screen) */
@media only screen and (max-width: 600px) {
  .grid-container  {
    grid-template-areas: 
      'header header header header header header' 
      'middle middle middle middle middle middle' 
      'middle2 middle2 middle2 middle2 middle2 middle2' 
      'left left left left left left' 
      'middle3 middle3 middle3 middle3 middle3 middle3' 
      'footer footer footer footer footer footer';
  }
}

/* grid area location classes */
.header {
  grid-area: header;
}
.footer {
  grid-area: footer;
}
.left {
  grid-area: left;
}
.right {
  grid-area: right;
}
.middle {
  grid-area: middle;
}
.middle2 {
  grid-area: middle2;
}
.middle3 {
  grid-area: middle3;
}


/* info box */

.infobox {
    background: #eee;
    border: 1px solid #aaa;
    float: right;
    margin: 0 0 1em 1em;
    padding: 1em;
    width: 400px;
}
.infobox-title {
    font-size: 2em;
    text-align: center;
}
.infobox-image {
    text-align: center;
}
.infobox th {
    text-align: right;
    vertical-align: top;
    width: 120px;
}
.infobox td {
    vertical-align: top;
}