Permalink
Browse files

Working with SASS now in sample app (etc).

  • Loading branch information...
1 parent e66b9bb commit 8b0abf20dfdced56cb79900b33928282aabca4c5 @cowboy committed Mar 21, 2011
Showing with 339 additions and 150 deletions.
  1. +2 −0 .gitignore
  2. +7 −0 sample_app/app.rb
  3. +18 −0 sample_app/public/js/site.js
  4. +63 −0 sample_app/views/css/_twilight.scss
  5. +247 −0 sample_app/views/css/site.sass
  6. +2 −150 sample_app/views/layout.haml
View
@@ -6,3 +6,5 @@ sample_app/test_repo/*
spec/test_repo/*
DELETE.rb
+
+/sample_app/.sass-cache/
View
@@ -1,4 +1,6 @@
require 'sinatra'
+require 'sinatra/advanced_routes'
+require 'sinatra/compass'
require 'rack/cache'
require 'haml'
@@ -177,6 +179,11 @@ def pages_by_category(cat)
"<h1>OMG 404</h1>#{' '*512}"
end
+ get '/favicon.ico' do; 'COMING SOON'; end
+
+ register Sinatra::Compass
+ get_compass 'css'
+
# TODO: REMOVE?
get '/rebuild' do
$pageset.rebuild!
@@ -0,0 +1,18 @@
+// Project listing hovers.
+(function($) {
+ var z = 1;
+
+ $(document).delegate('ul.projects > li > a', 'hover', function( e ) {
+ var hover = e.type == 'mouseenter',
+ li = $(this).parent(),
+ reveal = li.find('.reveal');
+
+ // By always increasing the z-index of the currently hovered element,
+ // odd overlapping issues on hover out are eliminated.
+ li.css('z-index', ++z).toggleClass('hover', hover);
+
+ // Because -webkit-transition won't animate from 0 to auto, a numeric
+ // height has to be used!
+ reveal.css('height', hover ? reveal.css('height', 'auto').height() : 0);
+ });
+})(jQuery);
@@ -0,0 +1,63 @@
+/* Adapted from https://gist.github.com/803005 */
+.sh {
+ /* background: #181818; padding: 16px; color: #F8F8F8; font-family: Consolas, Monaco,"Lucida Console"; */
+ &, * { font-family: Consolas, Monaco,"Lucida Console"; }
+ .hll { background-color: #ffffcc }
+ .c { color: #5F5A60; font-style: italic } /* Comment */
+ .err { border:#B22518; } /* Error */
+ .k { color: #CDA869 } /* Keyword */
+ .cm { color: #5F5A60; font-style: italic } /* Comment.Multiline */
+ .cp { color: #5F5A60 } /* Comment.Preproc */
+ .c1 { color: #5F5A60; font-style: italic } /* Comment.Single */
+ .cs { color: #5F5A60; font-style: italic } /* Comment.Special */
+ .gd { background: #420E09 } /* Generic.Deleted */
+ .ge { font-style: italic } /* Generic.Emph */
+ .gr { background: #B22518 } /* Generic.Error */
+ .gh { color: #000080; font-weight: bold } /* Generic.Heading */
+ .gi { background: #253B22 } /* Generic.Inserted */
+ .go { } /* Generic.Output */
+ .gp { font-weight: bold } /* Generic.Prompt */
+ .gs { font-weight: bold } /* Generic.Strong */
+ .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
+ .gt { } /* Generic.Traceback */
+ .kc { } /* Keyword.Constant */
+ .kd { color: #e9df8f; } /* Keyword.Declaration */
+ .kn { } /* Keyword.Namespace */
+ .kp { color: #9B703F } /* Keyword.Pseudo */
+ .kr { } /* Keyword.Reserved */
+ .kt { } /* Keyword.Type */
+ .m { } /* Literal.Number */
+ .s { } /* Literal.String */
+ .na { color: #F9EE98 } /* Name.Attribute */
+ .nb { color: #CDA869 } /* Name.Builtin */
+ .nc { color: #9B859D; font-weight: bold } /* Name.Class */
+ .no { color: #9B859D } /* Name.Constant */
+ .nd { color: #7587A6 } /* Name.Decorator */
+ .ni { color: #CF6A4C; font-weight: bold } /* Name.Entity */
+ .nf { color: #9B703F; font-weight: bold } /* Name.Function */
+ .nn { color: #9B859D; font-weight: bold } /* Name.Namespace */
+ .nt { color: #CDA869; font-weight: bold } /* Name.Tag */
+ .nv { color: #7587A6 } /* Name.Variable */
+ .ow { color: #AA22FF; font-weight: bold } /* Operator.Word */
+ .w { color: #141414 } /* Text.Whitespace */
+ .mf { color: #CF6A4C } /* Literal.Number.Float */
+ .mh { color: #CF6A4C } /* Literal.Number.Hex */
+ .mi { color: #CF6A4C } /* Literal.Number.Integer */
+ .mo { color: #CF6A4C } /* Literal.Number.Oct */
+ .sb { color: #8F9D6A } /* Literal.String.Backtick */
+ .sc { color: #8F9D6A } /* Literal.String.Char */
+ .sd { color: #8F9D6A; font-style: italic; } /* Literal.String.Doc */
+ .s2 { color: #8F9D6A } /* Literal.String.Double */
+ .se { color: #F9EE98; font-weight: bold; } /* Literal.String.Escape */
+ .sh { color: #8F9D6A } /* Literal.String.Heredoc */
+ .si { color: #DAEFA3; font-weight: bold; } /* Literal.String.Interpol */
+ .sx { color: #8F9D6A } /* Literal.String.Other */
+ .sr { color: #E9C062 } /* Literal.String.Regex */
+ .s1 { color: #8F9D6A } /* Literal.String.Single */
+ .ss { color: #CF6A4C } /* Literal.String.Symbol */
+ .bp { color: #00aaaa } /* Name.Builtin.Pseudo */
+ .vc { color: #7587A6 } /* Name.Variable.Class */
+ .vg { color: #7587A6 } /* Name.Variable.Global */
+ .vi { color: #7587A6 } /* Name.Variable.Instance */
+ .il { color: #009999 } /* Literal.Number.Integer.Long */
+}
@@ -0,0 +1,247 @@
+@import "compass"
+
+// Main styles.
+
+#content
+ width: 40em
+ color: #333
+ font-family: Georgia
+ img
+ border: 1px solid #333
+ .noborder
+ border: none
+ box-shadow: none
+
+#content img, .sh-code
+ box-shadow: 0px 2px 4px #aaa
+
+h1, h2, h3, h4
+ font-family: "Gill Sans"
+ font-weight: 400
+h1
+ font-size: 250%
+ margin-bottom: 0
+h2
+ font-size: 180%
+h3
+ font-size: 150%
+h4
+ font-size: 120%
+
+p
+ line-height: 1.4em
+ &.subtitle
+ font-style: italic
+ font-size: 160%
+ color: #777
+ margin: 0
+ &.last_updated
+ color: #aaa
+ font-size: 80%
+
+a
+ color: #ff7700
+ -webkit-transition: color 0.1s linear
+ &:hover
+ color: #aa3300
+ code
+ text-decoration: underline
+
+img
+ vertical-align: top
+
+code, pre, .sh-link
+ font-family: "Consolas", "Courier New", Courier, monospace
+ font-size: 0.9em
+code
+ background: #eee
+ border: 1px solid #aaa
+ color: #555
+ padding: 4px 0.2em 1px
+ webkit-border-radius: 4px
+
+
+// Misc.
+
+.tag-cloud li
+ display: inline
+ font-style: none
+
+
+
+// Project listing.
+
+ul.projects
+ &, li
+ list-style: none
+ margin: 0
+ padding: 0
+ li
+ position: relative
+ z-index: 0
+ left: -4px
+ right: -4px
+ padding-left: 4px
+ padding-right: 4px
+ padding-top: 2px
+ border-top-left-radius: 10px
+ border-top-right-radius: 10px
+ &, .meta, .reveal
+ -webkit-transition: 0.1s ease-out
+ -webkit-transition-delay: 0.1s
+ -webkit-transition-property: height, color, background, border, box-shadow
+ &, .reveal
+ border: 1px solid rgba(0, 0, 0, 0)
+ .meta
+ color: #ccc
+ font-size: 70%
+ .reveal
+ background: #fff
+ font-size: 80%
+ padding: 3px 4px 0
+ position: absolute
+ left: -1px
+ right: -1px
+ height: 0
+ overflow: hidden
+ border-bottom-left-radius: 10px
+ border-bottom-right-radius: 10px
+ a
+ color: inherit
+ text-decoration: none
+ > *
+ margin: 0.2em 0 0.4em 0
+ &.hover
+ z-index: 1
+ .meta
+ color: #AA9A89
+ .reveal
+ border-color: #000
+ border-top: none !important
+ &, .reveal
+ background: #fed
+ border: 1px solid #000
+ box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.4)
+
+// Diffs.
+
+.diff
+ overflow: auto
+ ul
+ color: #000
+ background: #fff
+ overflow: auto
+ font-size: 13px
+ list-style: none
+ margin: 0
+ padding: 0
+ display: table
+ width: 100%
+ del, ins
+ display: block
+ text-decoration: none
+ li
+ padding: 0
+ display: table-row
+ margin: 0
+ height: 1em
+ &.ins
+ background: #dfd
+ &.del
+ background: #fdd
+ &:hover
+ background: #ffc
+ del, ins, span
+ // Try 'whitespace: pre' if you don't want lines to wrap
+ white-space: pre-wrap
+ font-family: courier
+ del strong
+ font-weight: normal
+ background: #faa
+ ins strong
+ font-weight: normal
+ background: #afa
+
+
+// Syntax highlighting.
+@import twilight
+
+.sh
+ width: 42em
+ color: #F8F8F8
+.sh-code
+ overflow: hidden
+ background: #181818
+ border: 2px solid #181818
+ -webkit-border-radius: 12px
+ -webkit-border-top-right-radius: 0
+.highlighttable
+ margin: 0
+ padding: 0
+ border-collapse: collapse
+ td
+ margin: 0
+ padding: 0
+ vertical-align: top
+ .highlight
+ width: 39.4em
+ overflow: auto
+ padding: 6px 6px 3px
+ a
+ position: absolute
+ // Vertical offset for fragment linking.
+ margin-top: -2em
+ .linenos
+ color: #aaa
+ background: #444
+ border-right: 2px solid #181818
+ -webkit-border-top-left-radius: 10px
+ -webkit-border-bottom-left-radius: 10px
+ .linenodiv
+ padding: 6px 3px 3px 5px
+ a
+ color: #aaa
+ text-decoration: none
+ &:hover
+ color: #fff
+ text-decoration: underline
+ pre
+ margin: 0
+ line-height: 125%
+
+.sh-link
+ text-align: right
+ a
+ text-decoration: none
+ color: #aaa
+ background: #181818
+ padding: 0.5em 0.5em 0.2em 0.6em
+ -webkit-border-top-left-radius: 10px
+ -webkit-border-top-right-radius: 10px
+ &:hover
+ text-decoration: underline
+ color: #fff
+
+// No line numbers.
+.sh-nolines .highlight
+ background: #181818
+ padding: 4px
+ pre
+ margin: 0
+ white-space: pre-wrap
+
+// WebKit Scrollbar.
+// Adapted from http://beautifulpixels.com/goodies/create-custom-webkit-scrollbar/
+body ::-webkit-scrollbar
+ height: 12px
+::-webkit-scrollbar-button:start, ::-webkit-scrollbar-button:end
+ display: none
+::-webkit-scrollbar-track-piece, ::-webkit-scrollbar-thumb
+ -webkit-border-radius: 8px
+::-webkit-scrollbar-track-piece
+ background-color: #444
+::-webkit-scrollbar-thumb:horizontal
+ width: 50px
+ background-color: #777
+::-webkit-scrollbar-thumb:hover
+ background-color: #aaa
Oops, something went wrong.

0 comments on commit 8b0abf2

Please sign in to comment.