I am bad at css

mipearson · Dec 29, 2013 · 015bd5e · 015bd5e
1 parent f752e57
commit 015bd5e
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 189 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -4,40 +4,36 @@
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
         <title>{{ page.title }}</title>
-        <meta name="viewport" content="width=device-width">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-        <!-- syntax highlighting CSS -->
         <link rel="stylesheet" href="/css/syntax.css">
+        <link rel="stylesheet" href="/css/yeti.css">
+        <link rel="stylesheet" href="/css/app.css">
+        <script src="/js/app.js"></script>
 
-        <!-- Custom CSS -->
-        <link rel="stylesheet" href="/css/main.css">
-
+        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
+        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+        <!--[if lt IE 9]>
+          <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+          <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
+        <![endif]-->
     </head>
     <body>
-
-        <div class="site">
-          <div class="header">
-            <h1 class="title"><a href="/">{{ site.name }}</a></h1>
-            <a class="extra" href="/">home</a>
-          </div>
-
-          {{ content }}
-
-          <div class="footer">
-            <div class="contact">
-              <p>
-                Michael Pearson<br />
-                mipearson@gmail.com
-              </p>
-            </div>
-            <div class="contact">
-              <p>
-                <a href="https://github.com/mipearson">github.com/mipearson</a><br />
-                <a href="https://twitter.com/mipearson">twitter.com/mipearson</a><br />
-              </p>
-            </div>
-          </div>
+      <div class="content">
+        {{ content }}
+      </div>
+      <div class="sidebar">
+        <div class="contact">
+          <p>
+            Michael Pearson<br />
+            mipearson@gmail.com
+          </p>
+          <p>
+            <a href="https://github.com/mipearson">github.com/mipearson</a><br />
+            <a href="https://twitter.com/mipearson">twitter.com/mipearson</a><br />
+          </p>
         </div>
+      </div>
 
     </body>
 </html>
diff --git a/_layouts/post.html b/_layouts/post.html
@@ -1,7 +1,9 @@
 ---
 layout: default
 ---
-<h2>{{ page.title }}</h2>
+<div class="page-header">
+  <h1>{{ page.title }}</h2>
+</div>
 <p class="meta">{{ page.date | date_to_string }}</p>
 
 <div class="post">

diff --git a/css/app.css b/css/app.css
@@ -0,0 +1,23 @@
+/* http://timkadlec.com/2013/01/windows-phone-8-and-device-width/ */
+@-webkit-viewport{width:device-width}
+@-moz-viewport{width:device-width}
+@-ms-viewport{width:device-width}
+@-o-viewport{width:device-width}
+@viewport{width:device-width}
+
+body {
+  background: #000000;
+}
+.content {
+  background: #ffffff;
+}
+.sidebar {
+  position: fixed;
+  right: 0;
+  top: 0;
+  width: 25%;
+  margin-bottom: 0;
+
+  background: url('/images/bg.jpg') no-repeat top left #000000;
+  height: 900px;
+}
diff --git a/css/main.css b/css/main.css
diff --git a/css/yeti.css b/css/yeti.css
diff --git a/images/bg.jpg b/images/bg.jpg
diff --git a/js/app.js b/js/app.js
@@ -0,0 +1,12 @@
+/* http://timkadlec.com/2013/01/windows-phone-8-and-device-width/ */
+if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
+  var msViewportStyle = document.createElement("style");
+  msViewportStyle.appendChild(
+    document.createTextNode(
+      "@-ms-viewport{width:auto!important}"
+    )
+  );
+  document.getElementsByTagName("head")[0].
+    appendChild(msViewportStyle);
+}
+