Merge pull request #1 from superhighfives/master

Made better while listening to the glorious Prince.
joho · Dec 17, 2012 · 2a58087 · 2a58087
2 parents 4aa2b58 + ec41a37
commit 2a58087
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 18 deletions.
diff --git a/views/index.haml b/views/index.haml
@@ -1,14 +1,19 @@
+.hero
+  .overlay
+
 %img{src: "http://sk.lds.li/skitched-20121217-025412.jpg", alt: "World Purple Rain Hour", width: 1000, height: 1000}
 
-%p
-  It's just like Earth Hour, but instead the whole world is going to Listen to
-  %a{href: "http://rd.io/x/QX4ldiJe2Ro"}
-    Purple Rain
-  all as one.
-%p
-  Expect to see overflowing maternity wards nine months later.
-%p
-  Follow
-  %a{href: "http://twitter.com/purplerainhour"}
-    @PurpleRainHour
-  to get in on this.
+.content
+  %h1 This is World Purple Rain Hour
+  %p
+    It's just like Earth Hour, but instead the whole world is going to Listen to
+    %a{href: "http://rd.io/x/QX4ldiJe2Ro"}
+      Purple Rain
+    all as one.
+  %p
+    Expect to see overflowing maternity wards nine months later.
+  %p
+    Follow
+    %a{href: "http://twitter.com/purplerainhour"}
+      @PurpleRainHour
+    to get in on this.
diff --git a/views/layout.haml b/views/layout.haml
@@ -5,14 +5,23 @@
       World Purple Rain Hour 
     :css
       * { box-sizing: border-box; }
-      img { display: block; margin: 0 auto;}
-      body { font-family: Helvetica, Arial, sans-serif; }
+      img { display: block; margin: 0 auto; z-index: 10; position: relative; -webkit-box-shadow:  0px 0px 15px 0px rgba(0, 0, 0, 0.5); box-shadow:  0px 0px 15px 0px rgba(0, 0, 0, 0.5); }
+      body { font-family: Helvetica, Arial, sans-serif; background: #000; height: 100%; padding: 0; margin: 0; }
+      .hero { position: fixed; top: 0; background: url('http://sk.lds.li/skitched-20121217-025412.jpg') center center; background-size: cover; width: 100%; height: 600px; }
+      .overlay { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0.5); }
+      .content { border-left: 3px solid #7e6da0; width: 500px; padding-left: 20px; margin: 80px auto; position: relative; z-index: 10; }
+      h1 { color: #7e6da0; font-size: 1.4em; }
       p {
-        font-size: 1.7em;
+        font-size: 1.4em;
         line-height: 1.6;
-        text-align: center;
-        width: 1000px;
-        margin: 20px auto;
+        text-align: left;
+        margin: 20px 0;
+        color: #fff;
+      }
+      a {
+        color: #7e6da0;
+        text-decoration: none;
+        border-bottom: 1px dashed #7e6da0;
       }
 
 %body