First-pass at some responsive CSS

Author: JordanHatch

_layouts/default.html

@@ -7,6 +7,7 @@
   </style>
 
   <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
 
   <title>Europe Code Week 2014 - {{ page.title }}</title>
 

_layouts/home.html

@@ -11,7 +11,7 @@ <h2>11th &mdash; 17th October <a href="https://twitter.com/search?q=%23codeEU&am
 
     {% include nav.ext %}
 
-    <div id="intro-description" class="col-md-8">
+    <div id="intro-description" class="col-md-8 col-xs-12">
       <p>All around Europe, people are making apps, websites and lots of other things by learning to code.</p>
       <p>Join them at one of many events and clubs taking place when Code Week returns this year.</p>
 

stylesheets/core.css

@@ -17,12 +17,27 @@ body {
   margin: 0 auto;
 }
 
+@media (max-width: 1020px){
+  .wrap, .inner {
+    width: 100%;
+    padding-left: 16px;
+    padding-right: 16px;
+  }
+}
+
+
 /* Tidbits */
 
 .button-well {
   padding: 20px 0;
 }
 
+@media (max-width: 1020px){
+  .button-well {
+    padding: 10px 0;
+  }
+}
+
 .button, a.button,
     a.button:link, a.button:visited {
   display: inline-block;
@@ -66,6 +81,14 @@ section h1 {
   text-transform: uppercase;
 }
 
+@media (max-width: 1020px){
+  section h1 {
+    padding: 0;
+    font-size: 22px;
+    margin-top: 10px;
+  }
+}
+
 a, a:link, a:visited {
   color: #0f6abc;
   text-decoration: underline;
@@ -117,6 +140,24 @@ header h2 a:hover, header h2 a:active {
   color: #bcdbff;
 }
 
+@media (max-width: 1020px){
+  header.small, header.small .inner {
+    height: auto;
+    overflow: visible;
+  }
+  header.small h1 {
+    float: none;
+  }
+  header.small h1 a {
+    margin: 0 auto;
+  }
+  header.small h2 {
+    float: none;
+    text-align: center;
+    margin-top: 10px;
+  }
+}
+
 /* Intro */
 
 #intro {
@@ -202,6 +243,53 @@ header h2 a:hover, header h2 a:active {
   padding-top: 30px;
 }
 
+@media (max-width: 1020px){
+  #intro {
+    font-size: 16px;
+    line-height: 24px;
+    height: auto;
+  }
+
+  #intro .inner {
+    width: 100%;
+    padding: 0px;
+  }
+
+  #intro header {
+    margin-top: 20px;
+  }
+
+  #intro header h1 {
+    background: url('/images/small-logo.png') no-repeat top center;
+    height: 45px;
+    width: 240px;
+    margin: 0 auto;
+  }
+
+  #intro header h2 {
+    font-size: 16px;
+    text-align: center;
+    padding-top: 10px;
+    margin-top: 0;
+  }
+  #intro header h2 a {
+    display: inline;
+    margin-top: 6px;
+  }
+  #intro header h2 a:before {
+    content: "•";
+    text-decoration: none;
+    padding-right: 4px;
+    display: inline-block;
+  }
+
+  #intro-description {
+    padding-top: 8px;
+    padding-bottom: 8px;
+  }
+}
+
+
 /* Small Nav */
 
 nav {
@@ -239,8 +327,25 @@ nav ul li a, nav ul li a:link, nav ul li a:visited {
 #intro nav li a, #intro nav li a:link, #intro nav li a:visited {
   color: #bcdbff;
 }
-#intro nav li a, #intro nav li a:link, #intro nav li a:visited {
-  color: #bcdbff;
+
+@media (max-width: 1020px){
+  nav, #intro nav {
+    position: static;
+    margin: 10px 16px;
+    padding: 0;
+    font-size: 14px;
+  }
+  nav ul {
+    text-align: center;
+    padding: 0;
+    margin: 0;
+  }
+  nav li, #intro nav li {
+    padding: 0 4px;
+  }
+  nav ul li a, nav ul li a:link, nav ul li a:visited {
+    color: #bcdbff;
+  }
 }
 
 /* Footer */
@@ -257,6 +362,14 @@ footer .team {
   line-height: 25px;
   text-align: right;
 }
+
+@media (max-width: 1020px){
+  footer .team {
+    padding: 10px 0 25px;
+    text-align: center;
+  }
+}
+
 footer a, footer a:link, footer a:visited {
   color: #bcdbff;
 }
@@ -290,3 +403,19 @@ footer ul.links li a.facebook {
 footer ul.links li a.github {
   background-image: url('/images/links-github.png');
 }
+
+@media (max-width: 1020px){
+  footer ul.links {
+    text-align: center;
+    margin: 0 auto;
+    padding: 25px 0 10px;
+  }
+  footer ul.links li {
+    display: inline-block;
+    padding: 0px 8px;
+  }
+  footer ul.links li a {
+    display: inline-block;
+    padding-left: 28px;
+  }
+}