started implementing the adzerk ads

jeffkreeftmeijer · Aug 29, 2010 · 20458f7 · 20458f7
1 parent bb3d39b
commit 20458f7
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 35 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -12,45 +12,55 @@
   {{ page.head }}
   <link rel="stylesheet" href="/css/screen.css" type="text/css" />
   <link rel="stylesheet" href="/css/syntax.css" type="text/css" />
+  <link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="/css/iphone.css" type="text/css" />
   <link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="/css/ipad.css" type="text/css" />
   <link rel="alternate" type="application/atom+xml" href="http://feeds.feedburner.com/jeffkreeftmeijer" />
 </head>
 <body>
   <div id="wrapper">
-    <div id="header">
-      <h1>
-        {% if page.home %}
-         Jeff Kreeftmeijer <span title="krayft&bull;migh&bull;er">/kre&#618;ft&bull;ma&#618;&bull;&#604;r/</span>
-        {% else %}
-          <a href="/">&larr; Jeff Kreeftmeijer</a>
-        {% endif %}
-      </h1>
-      <ul>
-        <li>
-          <a href="/navvy">Navvy</a>
-        </li>
-        <li>
-          <a href="/archive">Archive</a>
-        </li>
-        <li>
-          <a href="http://github.com/jeffkreeftmeijer">Github &rarr;</a>
-        </li>
-        <li>
-          <a href="http://twitter.com/jkreeftmeijer">Twitter &rarr;</a>
-        </li>
-      </ul>
-      <hr/>
-    </div>
-    <h2>{{ page.title }}</h2>
-    {{ content }}
-    <div id="footer">
-      <a id="webbynode" href="http://webbynode.com">
-        <img src="/images/webbynode.png"/> <span class="balloon">awesome hosting.</span>
-      </a>
-      <a id="feed" href="http://feeds.feedburner.com/jeffkreeftmeijer">
-        <span class="balloon">subscribe!</span> <img src="/images/feed.png"/>
-      </a>
-      <hr/>
+    <div id="container">
+      <div id="header">
+        <h1>
+          {% if page.home %}
+           Jeff Kreeftmeijer <span title="krayft&bull;migh&bull;er">/kre&#618;ft&bull;ma&#618;&bull;&#604;r/</span>
+          {% else %}
+            <a href="/">&larr; Jeff Kreeftmeijer</a>
+          {% endif %}
+        </h1>
+        <ul>
+          <li>
+            <a href="/navvy">Navvy</a>
+          </li>
+          <li>
+            <a href="/archive">Archive</a>
+          </li>
+          <li>
+            <a href="http://github.com/jeffkreeftmeijer">Github &rarr;</a>
+          </li>
+          <li>
+            <a href="http://twitter.com/jkreeftmeijer">Twitter &rarr;</a>
+          </li>
+        </ul>
+        <hr/>
+      </div>
+      <h2>{{ page.title }}</h2>
+      {{ content }}
+      <div id="footer">
+        <a id="webbynode" href="http://webbynode.com">
+          <img src="/images/webbynode.png"/> <span class="balloon">awesome hosting.</span>
+        </a>
+        <a id="feed" href="http://feeds.feedburner.com/jeffkreeftmeijer">
+          <span class="balloon">subscribe!</span> <img src="/images/feed.png"/>
+        </a>
+        <hr/>
+      </div>
+      <div id="ad">
+        <a href="http://engine.rubyrow.net/redirect/0/2226/2289/132/fb80f3d43bc24a9db9df83f4c6c56fe1"><img src="http://static2.rubyrow.net/Advertisers/2226.png"/></a>
+
+        <p>Monitor Rails, MongoDB,Redis, Passenger, Delayed Job and more.</p>
+
+        <a href="http://engine.rubyrow.net/redirect/0/2226/2289/132/fb80f3d43bc24a9db9df83f4c6c56fe1" style="font-weight:bold">Free 30-Day Trial</a>
+      </div>
     </div>
   </div>
 

diff --git a/css/iphone.css b/css/iphone.css
@@ -0,0 +1,3 @@
+div#ad{
+  display:none;
+}
diff --git a/css/screen.css b/css/screen.css
@@ -56,6 +56,12 @@ a:hover, a:hover span#eighty, a:hover span#beans
 }
 
 div#wrapper
+{
+  min-width:490px;
+  overflow:hidden;
+}
+
+div#container
 {
   -moz-border-radius:5px;
   -moz-box-shadow:0 1px 0 #fff;
@@ -67,11 +73,12 @@ div#wrapper
   color:#222;
   font-size:15px;
   line-height:150%;
-  margin:50px auto;
   opacity:0.9px;
   padding:20px;
   text-shadow:0 1px 0 #fff;
   width:450px;
+  margin:50px auto;
+  position:relative;
 }
 
 div#content img, div#content object
@@ -122,6 +129,39 @@ div.post h3,div.post p
   margin:5px 0;
 }
 
+div#ad{
+  width: 120px;
+  position:absolute;
+  background-color: #222;
+  top: 110px;
+  right: -140px;
+  padding: 10px;
+  -moz-border-radius-topright:5px;
+  -moz-border-radius-bottomright:5px;
+  -moz-box-shadow:0 -1px 0 #444;
+  -webkit-border-top-right-radius:5px;
+  -webkit-border-bottom-right-radius:5px;
+  -webkit-box-shadow:0 -1px 0 #444;
+}
+
+div#ad, div#ad a
+{
+  color:#fff;
+  font-size: 11px;
+  line-height: 130%;
+  text-shadow:0 1px 0 #000;
+}
+
+div#ad a:hover
+{
+  color: #ddd;
+}
+
+div#ad p
+{
+  margin:10px 0;
+}
+
 h1
 { 
   -moz-border-radius:5px;