pelican-elegant/css/custom.css

/*
_______________________________
Desktop version layout - place your custom code here */

body {

}

.pageBackground {
   background-color:white;
}

.topNavBar {
   background-color: black;
   color: #D1D1D1;
   font-family: Consolas,monospace, "Courier New";
   font-size: 0.8em;
   text-align:right;
   text-transform:uppercase;
}

.topNavMobile {
   border-bottom: 1px solid #8C8C8C;
   text-decoration: none;
   text-align: center;
}

a#twitterNavBar {
   background: url(images/socialIcons.png) no-repeat;
   background-position: -1px -129px ;
   width: 31px;
   height: 22px;
   text-decoration:none;
   background-repeat:no-repeat;
   font-size: 0em;
   margin: auto;
}

a#twitterNavBar:hover {
   background-position: -2px -165px ;
}

a#githubNavBar {
   background-image:url(images/socialIcons.png);
   background-position: 0 0;
   width: 28px;
   height: 22px;
   text-decoration:none;
   background-repeat:no-repeat;
   font-size: 0em;
   margin: auto;
}

a#githubNavBar:hover {
   background-position: 0 -29px ;
}

a#rssNavBar {
   background: url(images/socialIcons.png) no-repeat;
   background-position: -6px -62px ;
   width: 22px;
   height: 22px;
   text-decoration:none;
   background-repeat:no-repeat;
   font-size: 0em;
   margin: auto;
}

a#rssNavBar:hover {
   background-position: -5px -97px ;
}

a#contentsNavBar {
   margin:auto;
   padding-right: 1em;
   text-decoration: none;
   color: #D1D1D1;
}

a#contentsNavBar:hover {
   color: darkGoldenRod;
}

.pageForeground {
   background-color: white;
}

.siteBanner {
   display:block;
   padding-top: 2em;
   padding-bottom: 2em;
}

a#siteTitle{
   font-family:Consolas, monospace, "Courier New";
   font-size:3.0em;
   margin:0 0 0 0;
   text-decoration: none;
   color: black;
}

a#siteTitle:hover{
   color: #610B0B;
}

#siteTagline {
   font-family:"Palatino Linotype", "MS Serif", "Times New Roman";
   color:black;
   font-style: italic;
   margin: 0em 0px 0em 0px;
   font-size: 1.5em;
   font-weight: normal;
}

.hmenu {
   text-align: left;
   font-family: Georgia, "DejaVu Serif", Times, "Times New Roman", serif;
   font-size: 0.9em;
   border-top: 1px solid #8C8C8C;
   border-bottom: 1px solid #8C8C8C;
   text-shadow: #EBEBEB 0 1px;
   text-decoration: none;
   color:#444;
   overflow: hidden;
   padding: 0.35em;
}

.searchBox {
   text-align: right;
}

.articleTitle {
   font-size: 3.2em;
   color: darkRed;
   font-weight: normal;
   font-family: Georgia, "DejaVu Serif", Times, "Times New Roman", serif;
   line-height: 1.5;
   margin: 0.5em 0;
}

.publicationDate {
   background-color: white;
   font-family: georgia;
   font-size: 1.0em;
   color: dimGray;
   font-style: normal;
}

.tagsHeading {
   background-color: white;
   font-family: georgia;
   font-sze: 1.0em;
   color: #444;
   font-style: normal;
   padding-top: 0.313em;
}

.tagsHeading a {
   color:#444;
   text-decoration: none;
}

.tagBox {
   list-style: none;
   margin: 0;
   padding: 0.313em 0;
   overflow: hidden;
}

.tagBox li {
   line-height: 1.75em;
   font-size: 0.9em;
   margin-left: 1.25em;
   margin-bottom: 0.3em;
}

.tagBox a {
   padding: 0.28em 0.375em;
   margin: 0.125em;
   background: #EEE;
   color: #444;
   border-radius: 0.188em;
   text-decoration: none;
}

.tagBox a span {
   vertical-align: super;
   font-size: 0.8em;
}

.post {
   font-family: Georgia, "DejaVu Serif", Times, "Times New Roman", serif;
   font-size: 1.0em;
   line-height: 1.5em;
   color: #111;
   text-align: justify;
}

/*
_______________________________
Mobile version - preset code from cssgrid.net */

@media handheld, only screen and (max-width: 767px) {
   
   .pageForeground {
      border-radius:0px;
      moz-border-radius:0px;
   }

   .siteBanner {
      margin-top:-16px;
      padding-left: 0.2em;
      padding-right: 0.2em;
   }

   a#siteTitle{
      font-size:2.3em;
      padding-left:0px;
   }

   .hmenu {
      margin-top:-11px;
      text-align: center;
   }


   .searchBox {
      text-align: center;
   }


   .examplecontainer {}

   body {}
}

/*
_______________________________
Provide higher res assets for iPhone 4 - preset code from cssgrid.net */

@media only screen and (-webkit-min-device-pixel-ratio: 2) { 

	/* An example of how to override an image with one twice the size for iPhone 4. Specify the original pixel size with background-size.
	.download {
	background: url(../img/downarrow@2x.png) no-repeat;
	background-size: 27px 28px;
	}
	*/
}

/* from http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ */

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media handheld, only screen and (max-width : 320px) {
/* Styles */
   a#siteTitle{
      font-size:1.8em;
      padding-left:0px;
   }

   #siteTagline {
      font-size:0.9em;
   }
}