Difference between revisions of "MediaWiki:Mobile.css"

From AoW: Planetfall
Jump to navigation Jump to search
m (1 revision imported)
m
Line 1: Line 1:
 
/* CSS placed here will affect users of the mobile site */
 
/* CSS placed here will affect users of the mobile site */
 
#page-actions li { float:right }
 
#page-actions li { float:right }
 +
 +
 +
/* RWD test */
 +
/* hide options */
 +
@media only screen and (max-width: 600px) {
 +
  .hides {display: none;}
 +
}
 +
 +
@media only screen and (max-width: 1200px) {
 +
  .hidem {display: none;}
 +
}
 +
 +
@media only screen and (min-width: 1201px) {
 +
  .hidel {display: none;}
 +
}
 +
 +
/* Grid layout test */
 +
* {
 +
/*  box-sizing: border-box; */
 +
}
 +
 +
/* 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;
 +
}
 +
 +
.gridBG {
 +
background: #3c5a6e url(/images/a/ad/EU4_MainBG.jpg) repeat left center;
 +
}

Revision as of 09:07, 30 May 2020

/* CSS placed here will affect users of the mobile site */
#page-actions li { float:right }


/* RWD test */
/* hide options */
@media only screen and (max-width: 600px) {
  .hides {display: none;}
}

@media only screen and (max-width: 1200px) {
  .hidem {display: none;}
}

@media only screen and (min-width: 1201px) {
  .hidel {display: none;}
}

/* Grid layout test */
* {
/*  box-sizing: border-box; */
}

/* 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;
}

.gridBG {
	background: #3c5a6e url(/images/a/ad/EU4_MainBG.jpg) repeat left center;
}