Styled notes section

2 files changed, 74 insertions, 13 deletions

diff --git a/design/sass/_480.sass b/design/sass/_480.sass
index bcc6890..5bef89e 100644
--- a/design/sass/_480.sass
+++ b/design/sass/_480.sass
@@ -6,13 +6,13 @@ header[role="banner"]
     margin: 0 auto
     text-align: center
     h1
-        background: url('../img/tree.png') 0 0 no-repeat
+        background: url('/media/img/tree.png') 0 0 no-repeat
         text-indent: -9999px
         width: 151px
         height: 84px
         margin: 0 auto
     h2
-        background: url('../img/text-centered.png') 0 0 no-repeat
+        background: url('/media/img/text-centered.png') 0 0 no-repeat
         text-indent: -9999px
         width: 184px
         height: 54px
@@ -200,6 +200,43 @@ article[role="main"]
         letter-spacing: 1px
     p
         font-size: 1em
+
+
+//****************  Notes Structure ************************
+
+.notes .h-entry
+    border: none
+    padding: 0
+    margin-top: 3em
+    &:after
+        margin-top: 3em
+        height: 1px
+        visibility: visible
+        background: -webkit-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.2),rgba(0,0,0,0))
+    &:last-child:after
+        background: none
+
+.notes .e-content
+    a
+        color: $orange
+.notes .u-url
+    font-family: sans-serif
+.notes .twitter
+    font-size: .75em
+    a:after
+        content: "\2219"
+        margin-left: .25em
+        padding-right: .35em
+        padding-left: .35em
+    a:last-child:after
+        content: ""
+.month--header
+    font-size: .75em
+    margin: 0
+    letter-spacing: 1px
+    text-transform: uppercase
+    border-bottom: 1px dotted rgba(0,0,0,0.2)
+    
 //*******************  Footer **********************
 
 
@@ -251,9 +288,9 @@ footer:after, .archive article:after, #archive:after, article[role="main"] heade
             &:visited
                 color: white
         h1
-            background: url('../img/tree.png') left -84px no-repeat
+            background: url('/media/img/tree.png') left -84px no-repeat
         h2
-            background: url('../img/text-centered.png') 0 -60px no-repeat
+            background: url('/media/img/text-centered.png') 0 -60px no-repeat
     header[role="banner"]
         border-bottom: #cccccc 1px solid
     article[role="main"]
@@ -290,7 +327,7 @@ footer:after, .archive article:after, #archive:after, article[role="main"] heade
             z-index: 2000
             margin: 0
             padding: 0
-            background: url("../img/mapbg-dark.png") no-repeat top left
+            background: url("/media/img/mapbg-dark.png") no-repeat top left
         .map-wrapper
             width: 400px
             height: 328px
@@ -302,7 +339,7 @@ footer:after, .archive article:after, #archive:after, article[role="main"] heade
             right: -30px
             bottom: 40px
             z-index: 2000
-            background: url("../img/parkbg.png") no-repeat top left
+            background: url("/media/img/parkbg.png") no-repeat top left
             font: normal .9em/25px unquote("Helvetica Neue"), Helvetica, Verdana, sans-serif
             dl
                 margin-top: 45px
@@ -356,9 +393,9 @@ footer:after, .archive article:after, #archive:after, article[role="main"] heade
         color: #ccc
     header[role="banner"]
         h1
-            background: url('../img/tree.png') left -168px no-repeat
+            background: url('/media/img/tree.png') left -168px no-repeat
         h2
-            background: url('../img/text-centered.png') 0 -121px no-repeat
+            background: url('/media/img/text-centered.png') 0 -121px no-repeat
     nav[role="navigation"]
         border-top: 1px #ccc dotted
         border-bottom: 1px #ccc dotted
@@ -402,4 +439,4 @@ footer:after, .archive article:after, #archive:after, article[role="main"] heade
             border-top: #ccc 1px dotted
             border-bottom: #ccc 1px dotted
         p
-            color: #ccc
\ No newline at end of file
+            color: #ccc
diff --git a/design/sass/_768.sass b/design/sass/_768.sass
index 2b89230..f9ff3f1 100644
--- a/design/sass/_768.sass
+++ b/design/sass/_768.sass
@@ -14,7 +14,7 @@
             width: 160px
             margin-top: -12px
         h2
-            background: url('../img/text.png') 0 0 no-repeat
+            background: url('/media/img/text.png') 0 0 no-repeat
             margin-top: 5px
             float: left
         nav[role="navigation"]
@@ -202,6 +202,30 @@
         font-size: 1.6em 
         line-height: 1.2em
         font-weight: normal
+
+
+    .notes
+        main h1
+            float: none
+            margin-bottom: 1em
+            width: 100%
+        main
+            max-width: 600px
+            margin: 0 auto
+        article footer
+            margin-top: 1em
+        article p
+            float: none
+        .twitter
+            float: right
+            padding-top: 1em
+    .permalink
+        main
+            margin-top: 5em
+        #license
+            text-align: center
+            float: none
+            
     //map
     #map-canvas
         height: 400px
@@ -226,7 +250,7 @@
     .dark
         header[role="banner"]
             h2
-                background: url('../img/text.png') 0 -61px no-repeat 
+                background: url('/media/img/text.png') 0 -61px no-repeat 
     
         .park
             position: relative
@@ -304,7 +328,7 @@
         header[role="banner"]
             border-bottom: 1px #ccc solid
             h2
-                background: url('../img/text.png') 0 -121px no-repeat
+                background: url('/media/img/text.png') 0 -121px no-repeat
         h6
             display: block
             text-align: center
@@ -396,7 +420,7 @@
             z-index: 2000
             margin: 0
             padding: 0
-            background: url("../img/mapbg.png") no-repeat top left
+            background: url("/media/img/mapbg.png") no-repeat top left
     
         .map-wrapper
             width: 400px