WIP on new blog design

duien · Feb 2, 2013 · 6893f22 · 6893f22
1 parent b4bd8df
commit 6893f22
Show file tree

Hide file tree

Showing 17 changed files with 147 additions and 0 deletions.
diff --git a/public/IMG_2179.JPG b/public/IMG_2179.JPG
diff --git a/public/desk of duien narrow image.png b/public/desk of duien narrow image.png
diff --git a/public/desk of duien narrow image@2x.png b/public/desk of duien narrow image@2x.png
diff --git a/public/desk of duien opaque.png b/public/desk of duien opaque.png
diff --git a/public/desk of duien opaque@2x.png b/public/desk of duien opaque@2x.png
diff --git a/public/desk of duien right opaque.png b/public/desk of duien right opaque.png
diff --git a/public/desk of duien right opaque@2x.png b/public/desk of duien right opaque@2x.png
diff --git a/public/desk of duien right.png b/public/desk of duien right.png
diff --git a/public/desk of duien right@2x.png b/public/desk of duien right@2x.png
diff --git a/public/desk of duien tall.png b/public/desk of duien tall.png
diff --git a/public/desk of duien.png b/public/desk of duien.png
diff --git a/public/desk of duien@2x.png b/public/desk of duien@2x.png
diff --git a/public/desk-of-duien.png b/public/desk-of-duien.png
diff --git a/public/highres_200472412.jpeg b/public/highres_200472412.jpeg
diff --git a/views/duien-new.haml b/views/duien-new.haml
@@ -0,0 +1,33 @@
+!!!
+
+%head
+  %link{ rel: 'stylesheet', href: '/duien-grid.css' }
+  %link{ rel: 'stylesheet', href: '/duien.css' }
+  %script(type="text/javascript" src="//use.typekit.net/sxk0nfs.js")
+  :javascript
+    try{Typekit.load();}catch(e){}
+
+%body
+  #content
+    #header.container
+      %h1
+        desk of
+        %em duien
+    #main.container
+      .col_4
+        .post
+          .photo.pull-right
+            %img{ src: '/highres_200472412.jpeg'}
+          %h1 Rails Girls
+          %p.callout This past Wednesday, I was lucky enough to attend the first meetup of Rails Girls ATL. I can't wait to see where this group goes. 
+          %p Where I work. An essay by Emily Price, who will soon be Emily Hyland. I want to write something about where I work and how I work there sort of like the stuff I love in Offscreen.
+          .meta
+            some meta info
+      .col_4
+        .post
+          %h1 Circular Gallefreyan
+  %script{ src: "//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" }
+  :javascript
+    $( document ).ready( function() {
+      $('#header').click(function(){ $(this).toggleClass('full') })
+    })
diff --git a/views/sass/duien-grid.sass b/views/sass/duien-grid.sass
@@ -0,0 +1,39 @@
+.container
+  max-width: 970px
+  margin: 0 auto
+
+.card
+  margin: 0 -10px
+  padding: 10px
+
+  background: #ffffff
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5)
+.inset
+  margin: 10 -10px
+  padding: 10px
+
+  border-radius: 10px
+  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5)
+
+.container, .row, .full, .half, .quarter, .card
+  &:after
+    visibility: hidden
+    display: block
+    clear: both
+    height: 0
+    font-size: 0
+    content: " "
+
+.col_1, .col_2, .col_3, .col_4
+  float: left
+  margin-left: 20px
+  margin-right: 10px
+
+.col_4
+  width: 930px
+.col_3
+  width: 690px
+.col_2
+  width: 450px
+.col_1
+  width: 210px
diff --git a/views/sass/duien.sass b/views/sass/duien.sass
@@ -0,0 +1,75 @@
+$purple: #311226
+$cement: #D0D1C6
+
+body
+  background: $purple
+  margin: 0
+  padding: 0
+
+#header
+  // background: url('/desk of duien right opaque.png')
+  background: url('/desk of duien tall.png')
+  height: 60px
+  background-repeat: no-repeat
+  -webkit-transition: height 1s
+
+  &.full
+    height: 260px
+
+  h1
+    visibility: hidden
+    margin: 0
+    padding: 0
+
+h1, h2, h3, h4, h5, h6
+  font-family: 'Clio C Bold'
+
+
+
+
+#main
+  background: $cement
+  font-family: 'proxima-nova'
+
+.callout
+  font-family: 'Jubilat'
+  font-style: italic
+  font-size: 130%
+  font-weight: 100
+
+.post
+  h1
+    font-size: 250%
+
+.meta
+  padding: 20px 0
+  clear: both
+  text-transform: uppercase
+  font-size: 80%
+
+  // &:before, &:after
+  //   display: block
+  //   content: ''
+  //   width: 930px
+  //   height: 0
+  //   border-bottom: 1px solid #e0e1d6
+  //   border-top: 1px solid #c0c1b6
+  //   position: relative
+  // &:before
+  //   top: -10px
+  // &:after
+  //   top: 10px
+    
+
+.photo
+  margin: 0 -10px
+  padding: 10px
+  background: white
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5)
+
+.pull-right
+  float: right
+  margin-left: 30px
+
+  img
+    width: 450px