Dr Drang's CSS file with media queries

css-mobile.diff

--- mobile.css	2015-10-05 20:11:57.000000000 +0100
+++ drang-combined.css	2015-10-05 22:59:05.000000000 +0100
@@ -41,17 +41,12 @@
 }
 
 #container {
-/* 
-  width: 52em;
-  min-width: 660px;
- */
   margin-left: auto;
   margin-right: auto;
   background-color: #ded;
 }
 
 #header {
-  font-size: 150%;
   background: #384338;
   padding-left: .75em;
   padding-right: .75em;
@@ -102,12 +97,7 @@
   padding-right: 1.5em;
   padding-bottom: 1em;
   background: white;
-  font-size: 200%;
   line-height: 1.4;
-/* 
-  float: left;
-  width: 35em;
- */
 }
 
 #content h1 {
@@ -241,21 +231,28 @@
 }
 
 #content img {
-  max-width: 95%;
+  max-width: 33em;
 }
   
 #content img.ss {
   display: block;
   margin-left: auto;
   margin-right: auto;
-  max-width: 95%;    /* 48 - 12 - 2*1.5 (overall - sidebar - 2*padding) */
+  max-width: 33em;    /* 48 - 12 - 2*1.5 (overall - sidebar - 2*padding) */
 }
 
 #content .center {
   display: block;
   margin-left: auto;
   margin-right: auto;
-  max-width: 95%;    /* 48 - 12 - 2*1.5 (overall - sidebar - 2*padding) */
+  max-width: 33em;    /* 48 - 12 - 2*1.5 (overall - sidebar - 2*padding) */
+}
+
+#content iframe {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 33em;    /* 48 - 12 - 2*1.5 (overall - sidebar - 2*padding) */
 }
 
 
@@ -546,11 +543,10 @@
   
 #sidebar {
   font-family: Helvetica, Sans-Serif;
-  font-size: 250%;
+  font-size: 90%;
   /*background: #ded;
     width: 14em;
     float: right; */
-  /* margin-left: 42.25em; */
   margin-top: 0em;
   /*border-left-style: solid;
     border-left-width: .25em;
@@ -689,10 +685,6 @@
   cursor: pointer;
 }
 
-#sidebar form input {
-  font-size: 100%;
-}
-
 #footer {
   clear:both;
 }
@@ -809,3 +801,55 @@
 pre .tex .formula {
   opacity: 0.5;
 }
+
+
+
+/* Media queries */
+
+@media (max-width: 480px) and (orientation: portrait) {
+
+  #header {
+    padding: 2.5%;
+    height: 4em;
+  }
+
+  #header img {
+    max-width: 4em;
+    margin-right: 5%;
+  }
+
+  #header h1 {
+    font-size: 1.25em;
+  }
+
+  #header h2 {
+    font-size: .6em;
+  }
+
+  #content img,
+  #content img.ss,
+  #content .center {
+    max-width: 95%;
+  }
+
+}
+
+
+
+@media (min-width: 481px), (orientation: landscape) {
+
+  #container {
+    width: 52em;
+    min-width: 660px;
+  }
+
+  #content {
+    float: left;
+    width: 35em;
+  }
+
+  #sidebar {
+    margin-left: 42.25em;
+  }
+
+}

css-styles.diff

--- style.css	2015-10-05 20:11:44.000000000 +0100
+++ drang-combined.css	2015-10-05 22:59:05.000000000 +0100
@@ -41,8 +41,6 @@
 }
 
 #container {
-  width: 52em;
-  min-width: 660px;
   margin-left: auto;
   margin-right: auto;
   background-color: #ded;
@@ -100,8 +98,6 @@
   padding-bottom: 1em;
   background: white;
   line-height: 1.4;
-  float: left;
-  width: 35em;
 }
 
 #content h1 {
@@ -551,7 +547,6 @@
   /*background: #ded;
     width: 14em;
     float: right; */
-  margin-left: 42.25em;
   margin-top: 0em;
   /*border-left-style: solid;
     border-left-width: .25em;
@@ -806,3 +801,55 @@
 pre .tex .formula {
   opacity: 0.5;
 }
+
+
+
+/* Media queries */
+
+@media (max-width: 480px) and (orientation: portrait) {
+
+  #header {
+    padding: 2.5%;
+    height: 4em;
+  }
+
+  #header img {
+    max-width: 4em;
+    margin-right: 5%;
+  }
+
+  #header h1 {
+    font-size: 1.25em;
+  }
+
+  #header h2 {
+    font-size: .6em;
+  }
+
+  #content img,
+  #content img.ss,
+  #content .center {
+    max-width: 95%;
+  }
+
+}
+
+
+
+@media (min-width: 481px), (orientation: landscape) {
+
+  #container {
+    width: 52em;
+    min-width: 660px;
+  }
+
+  #content {
+    float: left;
+    width: 35em;
+  }
+
+  #sidebar {
+    margin-left: 42.25em;
+  }
+
+}

drang-combined.css

/*
Theme Name: Drang
Theme URI: http://github.com/drdrang/wp-drang-theme
Description: The theme used at http://www.leancrew.com/all-this/. Mostly a reworking of Kubrick.
Author: Dr. Drang
Version: 1.0
Tags: black, green, white, two-columns, mathjax, syntax-highlighting
*/


/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */

body {
  font-family: Georgia, Serif;
  font-size: 100%;
  background: #898;
  margin-top: .5em;
  margin-bottom: .5em;
}

h1, h2, h3, h4, h5 {
  font-family: Helvetica, Sans-Serif;
}

code {
  font-family: "DejaVu Sans Mono", "Bitstream Vera Sans Mono", Menlo, Consolas, Monospace;
  font-size: 90%;
}

img {
  border: 0px;
}

a {
  color: black;
}

a:hover {
  color: #484;
}

#container {
  margin-left: auto;
  margin-right: auto;
  background-color: #ded;
}

#header {
  background: #384338;
  padding-left: .75em;
  padding-right: .75em;
  padding-top: .75em;
  padding-bottom: .75em;
  margin-bottom: 0em;
  margin-top: 0em;
  color: white;
  height: 8em;
}

#header h1 {
  font-size: 2.5em;
  font-weight: bold;
  margin-bottom: 0em;
  margin-top: .25em;
}

#header h2 {
  font-size: 1.2em;
  line-height: 1.4;
  font-weight: normal;
  margin-top: .75em;
  margin-bottom: 0em;
}

#header img {
  float: left;
  margin-right: 2em;
  max-width: 8em;
  max-height: 8em;
}

#header a {
  color: white;
  text-decoration: none;
}

#header a:hover {
  color: #ded;
}

#content {
  margin-top: 0em;
  /* margin-right: 12em; 8?  /* sidebar: (14 + 1 + 1)*.75 */
  padding-top: .5em;
  padding-left: 1.5em;
  padding-right: 1.5em;
  padding-bottom: 1em;
  background: white;
  line-height: 1.4;
}

#content h1 {
  font-size: 150%;
  font-weight: bold;
}

#content h2 {
  font-size: 120%;
  font-style: italic;
  font-weight: bold;
  margin-bottom: -.5em;
}

#content h3, h4, h5, h6 {
  font-size: 100%;
  font-style: normal;
  font-weight: bold;
  margin-bottom: -.5em;
}

#content a.archive {
  text-decoration: none;
}

#content a.archive:hover {
  color: #484;
  text-decoration: underline;
}

#content ul.archive {
  text-indent: -.5em;
  padding-left: 1em;
  list-style-type: none;
  list-style-position: outside;
}


#content blockquote {
  font-size: 90%;
  padding-left: 1em;
  padding-right: 1em;
  padding-top: 0.125em;
  padding-bottom: 0.125em;
  background-color: #F3FEF3;
}

#content blockquote.bbpTweet {
  background-color: white;
}

#content sup, sub {
  vertical-align: 0ex;
  position: relative; }
#content sup { bottom: 1ex; }
#content sub { top: 0.8ex; }

/*#content sup, sub {
  line-height: 0em;
}*/

#content pre {
/*  font-size: 90%;*/
  padding-left: 1em;
  padding-right: 1em;
  background-color: #F3FEF3;
  overflow: auto;
  line-height: 1.25;
}

#content li {
  margin-top: .5em;
  margin-bottom: 0;
}

#content .postmetadata {
  font-size: 75%;
  text-align: right;
  margin-top: 0;
  margin-bottom: 3em;
}

#content .postmetadata a {
  text-decoration: none;
}

#content .postmetadata a:hover {
  color: #484;
  text-decoration: underline;
}

#content h1 a {
  text-decoration: none;
}

#content .tags, .source, .caption {
  font-size: 75%;
  text-align: right;
}

#content .tags {
  display: none;
}

#content .postdate {
  font-size: 90%;
  margin-top: -1em;
}

#content form input, textarea {
  font-size: 100%;
  font-family: Monospace;
}

#content form label {
  font-size: 90%;
}

#content pre {
  padding-top: .5em;
  padding-bottom: .5em;
}

#content pre span.ln {
  color: #888;
  font-size: 75%;
}

#content .navigation {
  font-size: 90%;
}

#content img {
  max-width: 33em;
}

#content img.ss {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 33em;    /* 48 - 12 - 2*1.5 (overall - sidebar - 2*padding) */
}

#content .center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 33em;    /* 48 - 12 - 2*1.5 (overall - sidebar - 2*padding) */
}

#content iframe {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 33em;    /* 48 - 12 - 2*1.5 (overall - sidebar - 2*padding) */
}


#content img.inline {
  display: inline;
  margin-left: 0;
  margin-right: 0;
}

#content object.vid {
  display: block;
  margin-left: auto;
  margin-right: auto;
}



#content div.footnotes {
  font-size: 90%;
}

#content div.footnotes ol{
  padding-left: 1.5em;
}

#content div.footnotes hr {
  width: 5em;
  margin: 0 auto 0 0;
}

#content p.youtube {
  text-align: center;
}

#content table {
  border-collapse: collapse;
  margin-left: auto;
  margin-right: auto;
}

#content table th {
  padding: .5em 1em .25em 1em;
  background-color: #ddd;
  border: 1px solid black;
  border-bottom: 2px solid black;
}

#content table td {
  padding: .25em 1em .25em 1em;
  border: 1px solid black;
}

#content table th.category {
  border-right: 2px solid black;
}

#content table td.category {
  background-color: #ddd;
  font-weight: bold;
  border-right: 2px solid black;
}


#content div.update {
  padding-left: 1em;
  padding-right: 1em;
  background-color: #ded;
  border: 2px solid #384338;
  margin-bottom: .5em;
}

#content div.update  blockquote {
  background-color: inherit;
}

#content div.sidebar {
  padding-left: 1em;
  padding-right: 1em;
  background-color: #F3FEF3;
  border: 1px solid #898;
  margin-bottom: .5em;
}


#content .spoiler {
  background: #898;
  color: #898;
}

#content .spoiler::selection {
  background: #ded;
  color: black;
}

#content .spoiler::-moz-selection {
  background: #ded;
  color: black;
}

#content ol.commentlist li {
  background: white;
  padding: .5em;
  list-style-position: outside;
}

#content ol.commentlist li li {
  padding: 0;
}

/*#content ol.commentlist li.alt {
  background: #efe;
}
*/

#content ol.commentlist a {
  color: black;
  font-weight: normal;
}

#content ol.commentlist a:hover {
  color: #484;
  text-decoration: underline;
}

#content ol.commentlist li p.commentheader {
  margin-top: 0;
}

#content ol.commentlist li .commentmetadata {
  font-size: 75%;
}

#content img.avatar {
  float: right;
}

#content textarea#comment {
  font-family: Georgia, Serif;
  font-size: 100%;
  width: 34em;
  height: 10em;
  padding: .5em;
}

#content .instruction {
  font-size: 75%;
}

#content p.social {
  text-align: right;
  margin-top: 0;
  margin-bottom: 0;
}

#content div.gist pre {
  font-family: Monospace;
  font-size: 90%;
}

#content blockquote.bbpTweet {
  font-size: 100% !important;
  background: #fff !important;
  padding: 10px 12px 10px 12px;
  margin: 0;
  min-height: 48px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}
#content blockquote.bbpTweet a {
  color: blue;
  text-decoration: none;
}
#content blockquote.bbpTweet a:hover {
  text-decoration: underline;
}
#content blockquote.bbpTweet p {
  margin: 0;
}
#content blockquote.bbpTweet p.tweet {
  color:#000;
  font-size:1.25em !important;
  line-height:1.3;
}
#content blockquote.bbpTweet img {
  max-width: 100%;
}
#content blockquote.bbpTweet p.timestamp {
  font-family: Sans-serif;
  font-size: 60%;
  display: block;
  padding-top: 0.5em;
  text-align: right;
}
#content blockquote.bbpTweet p.metadata {
  width: 100%;
  margin-top: 8px;
  padding-top: 12px;
  height: 40px;
  border-top: 1px solid #fff;
  border-top: 1px solid #e6e6e6;
  font-family: Sans-serif;
  line-height: 1.1;
}
#content blockquote.bbpTweet p.metadata span.author span.realName {
  color: #888;
  font-size: 75%;
  display: block;
}
#content blockquote.bbpTweet p.metadata span.author img {
  float: left;
  margin: 0 7px 0 0px;
  width: 36px;
  height: 36px;
}

#content .bbpBox {
  width: 80%;
  background: #8EC2DA;
  margin-left: auto;
  margin-right: auto;
  padding: 1.25em;
}

#content .bbpBox blockquote {
  font-size: 110%;
  background: white !important;
  margin: 0em !important;
  padding: .5em 1em .5em 1em;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px
}

#content .bbpBox blockquote a {
  color: #0000E6;
  text-decoration: none;
}

#content .bbpBox blockquote a:hover {
  text-decoration: underline;
}

#content .bbpBox blockquote .twMeta {
  font-size: 80%;
}

#content .bbpBox blockquote .twAuthor {
  font-family: Sans-serif;
  font-size: 80%;
  color: #aaa;
  margin-top: 0em;
  padding-top: .75em;
  border-top: solid 1px #aaa;
}

#content .bbpBox blockquote .twDate {
  font-family: Sans-serif;
  font-size: 60%;
  text-align: right;
}

#content .bbpBox blockquote .twAuthor img {
  float: left;
  margin-right: .5em;
  height: 2.5em;
}

#content hr {
  width: 10em;
}

#content hr.end {
  width: 100%;
  margin-top: 3em;
  margin-bottom: 3em;
}

#content hr.post-boundary {
  width: 100%;
  margin-top: 3em;
  margin-bottom: 3em;
}


#content span.menu {
  font-family: Lucida Grande, Helvetica, Sans Serif;
  font-size: 90%;
}

#sidebar {
  font-family: Helvetica, Sans-Serif;
  font-size: 90%;
  /*background: #ded;
    width: 14em;
    float: right; */
  margin-top: 0em;
  /*border-left-style: solid;
    border-left-width: .25em;
    border-left-color: #454;*/
  padding-top: .5em;
  padding-left: 1em;
  padding-right: 1em;
  padding-bottom: 1em;
}

#sidebar h1 {
  font-size: 120%;
  margin-top: 1em;
  margin-bottom: .25em;
}

#sidebar h2 {
  font-size: 110%;
  margin-bottom: .5em;
}

sidebar h3, h4, h5 {
  font-size: 100%;
}

#sidebar p {
  margin-top: 0em;
  padding-left: .5em;
}

#sidebar p.tag-cloud {
  line-height: 1.75em;
}

#sidebar ul {
  text-indent: -.5em;
  margin-top: 0em;
  margin-left: 0em;
  padding-left: 1em;
  list-style-type: none;
  list-style-position: outside;
}

#sidebar li {
  margin-bottom: .375em;
}

#sidebar a {
  text-decoration: none;
}

/*
#sidebar a:hover {
  text-decoration: underline;
}
 */

#sidebar hr {
  align: center;
  width: 8em;
  border-style: none;
  height: 2px;
  background-color: #454;
}

#sidebar .credit {
  margin-top: 1em;
  font-style: italic;
}

#sidebar #twitter_div ul {
  font-size: 90%;
  text-indent: 0em;
  padding-left: 0em;
}

#sidebar #twitter_div li{
  margin-bottom: 1em;
}

#sidebar img {
  max-width:12em;
  max-height:20em;
  margin-bottom: .25em;
}

#sidebar .appleWidget {
  width: 250px;
  margin-left: auto;
  margin-right: auto;
}

#sidebar .skyscraper {
  width: 160px;
  margin-left: auto;
  margin-right: auto;
}

#sidebar .affiliate {
  position: relative;
}

/*
#sidebar .affiliate-header {
  text-decoration: none !important;
}
 */

#sidebar .affiliate-popup {
  position: absolute;
  top: .5em;
  right: .5em;
  width: 20em;
  line-height: 1.25;
  z-index: 1;
  border: solid black 1px;
  box-shadow: 3px 3px black;
  /*
border-top: solid black 1px;
  border-left: solid black 1px;
  border-bottom: solid black 3px;
  border-right: solid black 3px;
 */
  padding: .5em;
  background: #F5FAF5;
  display: none;
}

#sidebar .affiliate-popup a {
  font-weight: bold;
  cursor: pointer;
}

#sidebar .affiliate img {
  min-width: 8em;
  cursor: pointer;
}

#footer {
  clear:both;
}


/* Syntax highlighting additions */

/*

Original style from softwaremaniacs.org (c) Ivan Sagalaev <[email protected]>
Changes by Dr. Drang (http://leancrew.com).

*/

pre .title,
pre .constant,
pre .parent,
pre .preprocessor,
pre .ruby .symbol,
pre .ruby .symbol .string,
pre .ruby .symbol .keyword,
pre .ruby .symbol .keymethods,
pre .instancevar,
pre .aggregate,
pre .template_tag,
pre .django .variable,
pre .smalltalk .class,
pre .addition,
pre .flow,
pre .stream,
pre .bash .variable,
pre .apache .tag,
pre .apache .cbracket,
pre .tex .command,
pre .tex .special {
  font-weight: bold;
}

pre .comment,
pre .shebang,
pre .annotation,
pre .template_comment,
pre .diff .header,
pre .chunk {
  color: #778;
  font-style: italic;
}

pre .string,
pre .date,
pre .regexp,
pre .literal,
pre .smalltalk .symbol,
pre .smalltalk .char,
pre .tag .value,
pre .change {
  color: #800;
}

pre .label,
pre .javadoc,
pre .tag .attribute,
pre .rules .keyword,
pre .ruby .string,
pre .decorator,
pre .filter .argument,
pre .localvars,
pre .array,
pre .attr_selector,
pre .important,
pre .pseudo,
pre .pi,
pre .doctype,
pre .deletion,
pre .envvar,
pre .apache .sqbracket,
pre .nginx .built_in,
pre .tex .formula {
  color: #808;
  font-weight: bold;
}

pre .title,
pre .javadoctag,
pre .phpdoc,
pre .yardoctag {
  font-weight: bold;
}

pre .keyword,
pre .command,
pre .id,
pre .phpdoc,
pre .built_in,
pre .aggregate,
pre .smalltalk .class,
pre .winutils,
pre .bash .variable,
pre .apache .tag,
pre .tex .command {
  color: #008;
  font-weight: bold;
}

pre .type,
pre .property {
  color: #806;
  font-style: italic;
}

pre .html .css,
pre .html .javascript,
pre .html .vbscript,
pre .tex .formula {
  opacity: 0.5;
}



/* Media queries */

@media (max-width: 480px) and (orientation: portrait) {

  #header {
    padding: 2.5%;
    height: 4em;
  }

  #header img {
    max-width: 4em;
    margin-right: 5%;
  }

  #header h1 {
    font-size: 1.25em;
  }

  #header h2 {
    font-size: .6em;
  }

  #content img,
  #content img.ss,
  #content .center {
    max-width: 95%;
  }

}



@media (min-width: 481px), (orientation: landscape) {

  #container {
    width: 52em;
    min-width: 660px;
  }

  #content {
    float: left;
    width: 35em;
  }

  #sidebar {
    margin-left: 42.25em;
  }

}

head-snippet.html

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="drang-combined.css">