Difference between revisions of "MediaWiki:Common.css"

From WikiConference North America
Jump to navigation Jump to search
(Roboto --> Source Sans Pro)
(Banner image)
Line 59: Line 59:
 
#p-logo a {
 
#p-logo a {
 
background-image: url(//upload.wikimedia.org/wikipedia/commons/thumb/d/de/Wikimedia_US_eagle_thing.svg/135px-Wikimedia_US_eagle_thing.svg.png) !important;
 
background-image: url(//upload.wikimedia.org/wikipedia/commons/thumb/d/de/Wikimedia_US_eagle_thing.svg/135px-Wikimedia_US_eagle_thing.svg.png) !important;
  +
}
  +
  +
/* Copied from Wikivoyage for scalable-width images */
  +
  +
@media screen and (max-width:749px) {
  +
.banner-image {
  +
position: relative;
  +
overflow: hidden;
  +
max-width: 1125px;
  +
width: 100%;
  +
height: auto;
  +
margin-bottom: .6em;
  +
text-align: center;
  +
padding-left: 0 !important;
  +
}
  +
.banner-image img {
  +
width: 100%;
  +
height: auto;
  +
width: auto\9;
  +
margin:0 auto;
  +
}
  +
}
  +
  +
@media screen and (min-width:750px) {
  +
.banner-image {
  +
float: right;
  +
position: relative;
  +
overflow: hidden;
  +
max-width: 1125px;
  +
height: auto;
  +
margin-bottom: .6em;
  +
}
  +
.banner-image img {
  +
float: right;
  +
width: 100%;
  +
height: auto;
  +
width: auto\9;
  +
}
  +
.banner-image-left {
  +
float: left !important;
  +
}
  +
.banner-image-left img {
  +
float: left !important;
  +
}
  +
.banner-image-none {
  +
float: none !important;
  +
}
  +
.banner-image-none img {
  +
float: none !important;
  +
}
  +
.banner-image-center {
  +
padding-left: none !important;
  +
float: none !important;
  +
margin-left: auto !important;
  +
margin-right: auto !important;
  +
}
  +
.banner-image-center img {
  +
float: none !important;
  +
}
 
}
 
}

Revision as of 13:28, 20 May 2015

/* CSS placed here will be applied to all skins */

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700);

/* Typography */
/* Makes site-wide what has been implemented on a page-by-page basis */

.firstHeading {
   font-weight:600;
   border-bottom: none;
   margin-bottom:10px;
   padding-top:10px !important;
   padding-left:0;
   font-size: 2.4em !important;
   width:100%;
   margin:auto;
   border-collapse:collapse;
   vertical-align:top;
   line-height:100%;
}

body {
  font-family:'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

@media screen and (min-width:750px) {
  div#bodyContent {
    font-size:1.05em; padding:0;
  }
  p {
    margin-bottom:1em;
  }
}

/* Main Page Banner */

.banner-image {
  position: relative;
  overflow: hidden;
  max-width: 65em; 
  width: 100%;
  height: auto;
  margin-bottom: .6em;
  text-align: center;
  padding-left: 0 !important;
}
.banner-image img {
  width: 100%;
  height: auto;
  width: auto\9;
  margin:0 auto;
}

.page-2015_Main_Page #firstHeading, .page-2015_Main_Page #yearline {
  display: none;
}

/* This is totally the right way to change the site logo. */
#p-logo a {
   background-image: url(//upload.wikimedia.org/wikipedia/commons/thumb/d/de/Wikimedia_US_eagle_thing.svg/135px-Wikimedia_US_eagle_thing.svg.png) !important;
}

/* Copied from Wikivoyage for scalable-width images */

@media screen and (max-width:749px) {
  .banner-image {
    position: relative;
    overflow: hidden;
    max-width: 1125px; 
    width: 100%;
    height: auto;
    margin-bottom: .6em;
    text-align: center;
    padding-left: 0 !important;
  }
  .banner-image img {
    width: 100%;
    height: auto;
    width: auto\9;
    margin:0 auto;
  }
}

@media screen and (min-width:750px) {
  .banner-image {
    float: right;
    position: relative;
    overflow: hidden;
    max-width: 1125px; 
    height: auto;
    margin-bottom: .6em;
  }
  .banner-image img {
    float: right;
    width: 100%;
    height: auto;
    width: auto\9;
  }
  .banner-image-left {
    float: left !important;
  }
  .banner-image-left img {
    float: left !important;
  }
  .banner-image-none {
    float: none !important;
  }
  .banner-image-none img {
    float: none !important;
  }
  .banner-image-center {
    padding-left: none !important;
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .banner-image-center img {
    float: none !important;
  }
}