Commits

Owen Nelson  committed 42650e1

adding in the base sass stuff

  • Participants
  • Parent commits f08a189
  • Branches UI

Comments (0)

Files changed (9)

File trawler/config.rb

+require 'less'
+# Require any additional compass plugins here.
+
+
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "static/css"
+sass_dir = "sass"
+images_dir = "static/img"
+javascripts_dir = "static/js"
+
+# 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

File trawler/sass/less.scss

+/* Less Framework 4
+ * http://lessframework.com
+ * by Joni Korpi
+ * License: http://creativecommons.org/licenses/MIT/ */
+
+// Less Framework Compass Plugin
+// by William Wells <less@hapa.me>
+// https://github.com/willhw/compass-less-plugin
+
+@import "compass/reset";
+@import "compass/utilities/general/clearfix";
+@import "compass/layout/grid-background";
+
+@import "less/framework";
+@import "partials/more";
+
+@import "partials/global";
+@import "partials/default";
+@import "partials/tablet";
+@import "partials/mobile";
+@import "partials/wide-mobile";
+@import "partials/high-px-ratio";

File trawler/sass/partials/_default.scss

+/* Default Layout: 992px.
+ * Gutters: 24px.
+ * Outer margins: 48px.
+ * Leftover space for scrollbars @1024px: 32px.  */
+
+#{$less-grid-element} {
+  @include grid(10);
+  @include less-grid-background(10);
+}
+
+header>h1 {
+    font-size: 6.0em;
+    margin-bottom: 0.5em;
+    margin-top: 0.5em;
+}
+
+.even, .odd {
+    @include columns(5);
+}
+
+.even {
+    @include omega;
+}

File trawler/sass/partials/_global.scss

+$less-grid-element: "#wrap";
+
+body {
+  background: rgb(232, 232, 232);
+  color: rgb(60, 60, 60);
+  // Stops Mobile Safari from auto-adjusting font-sizes
+  -webkit-text-size-adjust: 100%;
+}
+
+#{$less-grid-element} {
+  margin-left: auto;
+  margin-right: auto;
+  padding-bottom: 80px;
+}
+
+// Selection colors (easy to forget)
+@include selection-color(unquote("rgb(255,255,158)"));
+
+header>h1 {
+    font-family: "League Gothic", Helvetica, Arial, sans-serif;
+    width: 100%;
+    text-transform: uppercase;
+    font-size: 3.0em;
+    margin-bottom: 1.0em;
+}
+
+.even, .odd {
+    font-family: Georgia, Times, serif;
+    margin-bottom: 4.0em;
+    h1 {
+        padding: 10px;
+        font-size: 1.75em;
+        color: #FBED64;
+    }
+    p {
+        padding: 10px;
+        line-height: 1.3em;
+        color: rgba(255,255,255,0.75);
+    }
+}
+
+#foo, #bar, #baz, #spam {
+    background-color: #C0267C;
+}

File trawler/sass/partials/_high-px-ratio.scss

+/* Retina media query.
+   Overrides styles for devices with a
+   device-pixel-ratio of 2+, such as iPhone 4.  */
+
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
+  #{$less-grid-element} {
+  }
+}

File trawler/sass/partials/_mobile.scss

+/* Mobile Layout: 320px.
+ * Gutters: 24px.
+ * Outer margins: 34px.
+ * Inherits styles from: Default Layout.  */
+
+@media only screen and (max-width: 767px) {
+    #{$less-grid-element} {
+        @include grid(3);
+        @include less-grid-background(3);
+    }
+    header>h1 {
+        font-size: 4.0em;
+        margin-bottom: 0.3em;
+        margin-top: 0.3em;
+    }
+
+    .even, .odd {
+        @include columns(3);
+        margin-bottom: 1.0em;
+        @include omega;
+
+        h1 {
+            font-size: 1.3em;
+        }
+    }
+}
+
+

File trawler/sass/partials/_more.scss

+$less-column-width: 68px;
+$less-gutter-width: 24px;
+
+@function column-width($columns) {
+    @return ($less-column-width * $columns) + ($less-gutter-width * ($columns - 1));
+}
+
+@function grid-padding-px($columns) {
+    @if $columns == 10 {
+        @return 48px;
+    } @else if $columns == 8 {
+        @return 28px;
+    } @else if $columns == 5 {
+        @return 22px;
+    } @else if $columns == 3 {
+        @return 34px;
+    } @else {
+        // should never be here...
+        @return 0px;
+    }
+}
+
+@function input-width($columns, $border: 0, $padding: 0) {
+    @return column-width($columns) - (2 * $border) - (2 * $padding);
+}
+
+@mixin less-grid-background($columns) {
+  @include column-grid-background(
+    $columns, $less-column-width, $less-gutter-width,
+    grid-padding-px($columns));
+}
+
+@mixin grid($columns) {
+    @include clearfix;
+    width: column-width($columns);
+    padding-left: grid-padding-px($columns);
+    padding-right: grid-padding-px($columns);
+    margin-left: auto;
+    margin-right: auto;
+}
+
+@mixin columns($columns) {
+    display: inline;
+    float: left;
+    width: column-width($columns);
+    margin-right: $less-gutter-width;
+}
+
+@mixin full($columns, $pad: 0) {
+    @include columns($columns);
+    @include pad($pad);
+    @include omega;
+}
+
+@mixin prefix($columns) {
+    padding-left: column-width($columns) + $less-gutter-width;
+}
+
+@mixin suffix($columns) {
+    padding-right: column-width($columns);
+}
+
+@mixin pad($columns) {
+    @include prefix($columns);
+    @include suffix($columns);
+}
+
+@mixin omega {
+    margin-right: 0;
+}
+
+@mixin accessible-selection-color($color) {
+    $textcolor: contrast-color($color);
+    ::selection {background: $color; color: $textcolor;}
+    ::-moz-selection {background: $color; color: $textcolor;}
+    img::selection {background: transparent;}
+    img::-moz-selection {background: transparent;}
+    body {-webkit-tap-highlight-color: $color;}
+}

File trawler/sass/partials/_tablet.scss

+/* Tablet Layout: 768px.
+ * Gutters: 24px.
+ * Outer margins: 28px.
+ * Inherits styles from: Default Layout.  */
+
+@media only screen and (min-width: 768px) and (max-width: 991px) {
+    #{$less-grid-element} {
+        @include grid(8);
+        @include less-grid-background(8);
+    }
+    .even, .odd {
+        @include columns(4);
+    }
+
+    .even {
+        @include omega;
+    }
+}
+
+

File trawler/sass/partials/_wide-mobile.scss

+/* Wide Mobile Layout: 480px.
+ * Gutters: 24px.
+ * Outer margins: 22px.
+ * Inherits styles from: Default Layout, Mobile Layout.  */
+
+@media only screen and (min-width: 480px) and (max-width: 767px) {
+    #{$less-grid-element} {
+        @include grid(5);
+        @include less-grid-background(5);
+    }
+    header>h1 {
+        font-size: 7.0em;
+        margin-bottom: 0.3em;
+        margin-top: 0.3em;
+    }
+    .even, .odd {
+        @include columns(5);
+        margin-bottom: 1.0em;
+        @include omega;
+    }
+}
+
+