Initial commit

config.rb

@@ -0,0 +1,24 @@
+# Require any additional compass plugins here.
+
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "stylesheets"
+sass_dir = "sass"
+images_dir = "images"
+javascripts_dir = "javascripts"
+
+# You can select your preferred output style here (can be overridden via the command line):
+# output_style = :expanded or :nested or :compact or :compressed
+
+# To enable relative paths to assets via compass helper functions. Uncomment:
+# relative_assets = true
+
+# To disable debugging comments that display the original location of your selectors. Uncomment:
+line_comments = false
+
+
+# If you prefer the indented syntax, you might want to regenerate this
+# project again passing --syntax sass, or you can uncomment this:
+# preferred_syntax = :sass
+# and then run:
+# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

sass/screen.sass

@@ -0,0 +1,45 @@
+// If
+
+// Set a variable to run the if statement against
+$boolean: true !default
+
+=if
+  @if $boolean
+    @debug "$boolean is #{$boolean}"
+    display: block
+  @else
+    @debug "$boolean is #{$boolean}"
+    display: none
+
+.if
+  +if
+
+// For
+
+$class-slug: for !default
+
+@for $i from 1 through 4
+  .#{$class-slug}-#{$i}
+    width: 60px + $i
+
+// Each
+
+$list: adam john wynn mason kuroir
+
+=author-images
+  @each $author in $list
+    .photo-#{$author}
+      background: image-url("avatars/#{$author}.png") no-repeat
+
+.author-bio
+  +author-images
+
+// While
+
+$types: 4
+$type-width: 20px
+
+@while $types > 0
+  .while-#{$types}
+    width: $type-width + $types
+  $types: $types - 1

stylesheets/screen.css

@@ -0,0 +1,47 @@
+.if {
+  display: block;
+}
+
+.for-1 {
+  width: 61px;
+}
+
+.for-2 {
+  width: 62px;
+}
+
+.for-3 {
+  width: 63px;
+}
+
+.author-bio .photo-adam {
+  background: url('/images/avatars/adam.png') no-repeat;
+}
+.author-bio .photo-john {
+  background: url('/images/avatars/john.png') no-repeat;
+}
+.author-bio .photo-wynn {
+  background: url('/images/avatars/wynn.png') no-repeat;
+}
+.author-bio .photo-mason {
+  background: url('/images/avatars/mason.png') no-repeat;
+}
+.author-bio .photo-kuroir {
+  background: url('/images/avatars/kuroir.png') no-repeat;
+}
+
+.while-4 {
+  width: 24px;
+}
+
+.while-3 {
+  width: 23px;
+}
+
+.while-2 {
+  width: 22px;
+}
+
+.while-1 {
+  width: 21px;
+}