compass-theme 0.0.2

data/lib/compass-theme/stylesheets/core/_clearing-classes.sass

@@ -0,0 +1,17 @@
+.clear-top-left-corner
+  +border-top-left-radius(0)
+.clear-top-right-corner
+  +border-top-right-radius(0)
+.clear-bottom-left-corner
+  +border-bottom-left-radius(0)
+.clear-bottom-right-corner
+  +border-bottom-right-radius(0)
+
+.hide
+  display: none
+.clear-box-shadow
+  +box-shadow(none)
+.clear-border-radius
+  @extend .clear-rounded-corners
+.clear-rounded-corners
+  +border-radius(0)

data/lib/compass-theme/stylesheets/core/_extensions.scss

@@ -0,0 +1,10 @@
+@mixin reset($reset-type: false){
+  @if($reset-type){
+    @if($reset-type == global){
+      @include global-reset;
+    }
+    @if($reset-type == html5){
+      @include reset-html5;
+    }
+  }
+}

data/lib/compass-theme/stylesheets/home.scss

@@ -0,0 +1,17 @@
+@import "compass";
+@import "core/extensions";
+@include reset(global);
+@include reset(html5);
+@import "core/base-classes";
+
+@import "partials/theme";
+@import "partials/layout";
+@import "partials/nav";
+@import "partials/typography";
+@import "partials/main";
+@import "partials/home";
+
+html.dark { @include dark-theme; }
+html.light { @include light-theme; }
+
+@import "core/clearing-classes";

data/lib/compass-theme/stylesheets/ie.scss

@@ -0,0 +1,5 @@
+ul#featured_sites li {
+  margin-left: 4px;
+  margin-top: 4px;
+  &:hover{ padding: 6px;
+    img { width: 240px; }}}

data/lib/compass-theme/stylesheets/partials/_blog.scss

@@ -0,0 +1,6 @@
+body#blog-archive {
+  .timestamp {
+    margin-right: 1em;
+    font-size: 12px;
+  }
+}

data/lib/compass-theme/stylesheets/partials/_code.scss

@@ -0,0 +1,113 @@
+//html.sass .mixin-source .scss, html.scss .mixin-source .sass { @extend .hide;}
+.mixin-source, .example-source, .function-source {
+  position: relative; @extend .fixed-font;
+  .syntaxhighlighter, pre {
+  &.scss, &.sass, &.css, &.haml, &.html { display: none; } } }
+
+html.sass { .mixin-source, .example-source, .function-source { .syntaxhighlighter.sass { display: block; } } }
+html.scss { .mixin-source, .example-source, .function-source { .syntaxhighlighter.scss { display: block; } } }
+html.css .example-source .syntaxhighlighter.css { display: block; }
+html.html .example-source .syntaxhighlighter.html { display: block; }
+html.haml .example-source .syntaxhighlighter.haml { display: block; }
+
+
+
+.mixin-source, .function-source { display: none; }
+
+html.light .syntaxhighlighter, html.dark .syntaxhighlighter {
+  margin: 0 0 2px;
+  code { padding: 0; }
+  //font-size: 1.1em;
+  text-shadow: none;
+  .code-block { background: none; @extend .clear-box-shadow; }
+  table td.gutter { .line { &:first-child { padding-top: 10px !important; } &:last-child { padding-bottom: 10px !important; } } }
+  .toolbar { display: none; }
+  //a.help { font-size: 1.5em; @extend .pictos; color: #aaa; position: relative; right: 6px; top: 2px; }
+  }
+
+a[rel="github-source"] {
+  position: relative;
+  float: right;
+  top: 1.1em;
+}
+
+pre {
+  margin: 1.5em 0;
+  overflow: auto;
+  .code-block:first-child { padding: .6em; display: block; }
+  .code-block:first-child { width: 100%; @include box-sizing(border-box); overflow: auto; }
+}
+
+.code-block { @extend .round-corners-4; @extend .fixed-font;
+  display: inline-block;
+  font-size: .95em;
+  padding: 0 .4em;
+  line-height: 1.5em;
+}
+
+.source-documentation {
+  @extend .round-corners-4;
+  padding: 10px 15px;
+  @include round-bottom-corners
+}
+
+h3 { @include round-corners;
+  padding: 10px 15px;
+  margin: 20px 0 20px;
+  font-weight: bold;
+  position: relative;
+  a { text-decoration: none;}
+  code, .arg { font-weight: normal; }
+}
+h3.mixin, h3.function { @include round-top-corners; margin-bottom: 2px;}
+.arg {
+  display: inline-block;
+  padding: 0 2px;
+  &[data-default-value] {
+    font-style: italic;
+    &:before { content: "[" ; }
+    &:after { content: "]" ; }}
+}
+
+a[rel="view source"]{ float: right; padding: 9px 15px; margin-top: 20px; position: relative; z-index: 2; font-size: .8em; @include hover-link;}
+h2 + a[rel="view source"]{ margin-top: 6px;}
+
+.syntaxhighlighter {
+  a, div, code, table, table td, table tr, table tbody, table thead, table caption, textarea {
+    background: none; border: 0; bottom: auto; float: none; height: auto; left: auto; line-height: 1.2em !important;
+    padding: 0; margin: 0; outline: 0;
+    overflow: visible; position: static; right: auto;
+    text-align: left; top: auto; vertical-align: baseline;
+    width: auto;
+    font: { weight: normal; style: normal;
+      size: 1em;
+    }
+    min: { height: inherit; }
+  }
+}
+
+.syntaxhighlighter { width: 100%; margin: 1em 0 1em 0; position: relative; overflow: auto; font-size: 1em;
+
+  // set up bold and italic
+  .bold { font-weight: bold; }
+  .italic { font-style: italic; }
+  .line { white-space: pre; }
+
+  // main table and columns
+  table { width: 100%;
+    td.code { width: 100%;
+      .line { padding: 0 .6em; } }
+    td.gutter .line { text-align: right; padding: 0 0.8em 0 1em; } } // middle spacing between line numbers and lines
+
+  // Styles for the toolbar
+  .toolbar { position: absolute; right: 1px; top: 1px; width: 11px; height: 11px; font-size: 10px; z-index: 10;
+    span.title { display: inline; }
+    a { display: block; text-align: center; text-decoration: none; padding-top: 1px; } }
+  .container { position: relative; }
+  textarea { @include stretch(0, .65em, 0, .65em); @extend .fixed-font; font-size: .95em; line-height: 1.3em !important;}
+}
+.syntaxhighlighter, pre .code-block:first-child, pre {
+  &::-webkit-scrollbar { height: 12px; }
+  &::-webkit-scrollbar-button { &:start:decrement, &:end:increment { display: block; width: 0; height: 0; } }
+  &::-webkit-scrollbar-thumb:horizontal { -webkit-border-radius: 5px; -webkit-background-clip: padding-box; }
+}

data/lib/compass-theme/stylesheets/partials/_example.scss

@@ -0,0 +1,29 @@
+html.light #demo, html.dark #demo {
+  color: #333;
+}
+
+#demo {
+  @include round-corners;
+  @extend .group;
+  background: #fff;
+  margin-bottom: 1.2em;
+  padding: 40px;
+  code {
+    @include box-shadow(rgba(#000, .3) 0 1px 3px, rgba(#000, .15) 0 1px 0 0 inset);
+    background: #fff;
+    color: inherit;
+  }
+}
+
+#how {
+  section { width: 49%; float: left; }
+  section + section { float: right; }
+
+  .example-source { clear: both; }
+}
+
+#reference {
+  float: right;
+  margin-top: 1em;
+}
+

data/lib/compass-theme/stylesheets/partials/_home.scss

@@ -0,0 +1,99 @@
+body#home {
+  width: 810px;
+  #page { padding-top: 31px;}
+  h1#logo {
+    $logo: 'compass-logo.png';
+    background: image-url($logo) no-repeat;
+    text-indent: -9999px;
+    overflow: hidden;
+    width: image-width($logo);
+    height: image-height($logo)/2;
+    padding: 0;
+    margin: 0 auto 18px;
+  }
+  #{headings()}{ @extend .heading-font; }
+  h2 {
+    text-align: center;
+    font-size: 30px;
+    padding-bottom: 15px;
+    margin-bottom: 30px;
+    line-height: 1.1em;
+  }
+  h3 {
+    text-align: center;
+    font-size: 25px;
+    margin-top: 32px;
+  }
+  h4 { font-size: 1.5em; }
+  .overview {
+    @extend .group;
+    .compass { width: 406px; float: left;
+      h4:before { content: "k"; } }
+    .sass { width: 275px; float: right; 
+      h4:before { content: "2"; } }
+    div { 
+      padding: 20px;
+      h4 {
+        padding-bottom: 12px;
+        margin-bottom: 12px;
+        &:before {
+          @extend .pictos;
+          color: #fb292d;
+          display: inline-block;
+          font-size: 1.2em;
+          padding-right: .3em;
+        }
+      }
+    }
+    ol { padding-left: 0; list-style: inside decimal; margin-bottom: 0; }
+    p { margin-bottom: 0; }
+    ol, p { line-height: 1.8em; font-size: .95em;}
+  }
+}
+ul#featured_sites {
+  @extend .group;
+  overflow: visible;
+  margin-top: 30px;
+  list-style: none;
+  padding: 0px;
+  li {
+    float: left;
+    text-shadow: none;
+    overflow: visible;
+    position: relative;
+    &:nth-child(3n+2){ margin: 0 7px; }
+    &:nth-child(1n+4){ margin-top: 7px; }
+    &:nth-child(3n+4){ clear: left; }
+    padding: 6px;
+    a { text-decoration: none; }
+    img { float: left; width: 240px; }
+    span { display: none;}
+    &:hover { z-index: 100;
+      padding: 3px 2px;
+      img { width: 248px; }
+      span { display: block; position: absolute; text-shadow: none;}
+    }
+    .url {
+      bottom: 2px; left: 2px; right: 2px; background: #000; background: rgba(#000, .8); z-index: 102; padding: 2.2em 10px 6px;
+      font-size: .8em; border-top: 1px solid rgba(#fff, .2); }
+    .title { bottom: 1.7em; left: 0; z-index: 103; text-decoration: none; padding: 0 11px; color: #fff; }
+  }
+}
+section.book, section.gui {
+  width: 48%;
+  float: left;
+  @extend .group;
+  h3 { margin-bottom: 1em; height: 2em; text-align: left; }
+}
+section.book {
+  margin-right: 2%;
+  img { float: left; margin-right: 1em; margin-bottom: 1em; }
+}
+section.gui  {
+ text-align: center;
+ .note {
+   font-size: smaller;
+ }
+}
+
+html.light body#home { h1#logo { background-position: bottom;} }

data/lib/compass-theme/stylesheets/partials/_install.scss

@@ -0,0 +1,10 @@
+body#install {
+  #steps, p.madlib, p.note, h4 { margin-top: 1em;                        }
+  p.note                       { font-size: smaller; font-style: italic; }
+  p.warning                    { color: #c00;                            }
+  .customization               { display: none;                          }
+  .customizable .customization { display: inline;                        }
+  blockquote                   { border-left: 2px solid #ccc;
+                                 text-indent: 0; padding-left: 0.5em;    }
+  .customization input         { width: 8em;                             }
+}

data/lib/compass-theme/stylesheets/partials/_layout.scss

@@ -0,0 +1,21 @@
+$min-width: 700px;
+$side-nav-width: 160px;
+$main-min-width: $min-width - $side-nav-width;
+
+body {
+  max-width: 1500px;
+  min-width: $min-width;
+  margin: 0 auto;
+  @extend .sans-font;
+  line-height: 1.45em;
+}
+
+#wrap { @extend .group; padding: 0 20px 20px; }
+#page { @extend .group; padding-bottom: 30px; }
+footer { @extend .group; clear: both; padding-top: 20px;}
+header { padding: 22px 0 0; position: relative; }
+#page aside + article { margin-left: $side-nav-width + 22px; padding-left: 23px; }
+aside { float: left; width: $side-nav-width; position: relative; z-index: 2;}
+
+body#home #page article { padding-left: 0;}
+body.site, body#changelog, body.default { max-width: 1024px; }

data/lib/compass-theme/stylesheets/partials/_main.scss

@@ -0,0 +1,63 @@
+body.get-involved h1 + p { font-size: 1.2em; line-height: 1.45em; }
+
+#page {
+  position: relative;
+  padding-top: 40px;
+  & > article { padding-top: 10px; font-size: 15px;
+  img { max-width: 100%; } } }
+
+#theme_pref {
+  a { display: block; font-size: 18px; width: .9em; position: relative; text-decoration: none; @extend .pictos; } }
+
+#docs_panel {
+  position: absolute; top: 0; right: 0;
+  width: 100%;
+  & > div { float: right; margin-left: 10px; @include round-bottom-corners; border: 1px solid; border-top: 0;}
+  a { text-decoration: none; }
+  #theme_pref { padding: 3px 12px 6px; a { position: relative; top: 2px;} }
+  #version { font-size: .75em; padding: 4px 0 5px; background: none; border: none; position: absolute; left: 0; a { @include hover-link; } }
+
+}
+
+#syntax_pref, .syntax_pref { padding: 4px 8px 5px; a { font-size: .9em; padding: 0px 6px 1px; display: inline-block; line-height: 1.45em;} }
+
+.syntax_pref {
+  float: left; @include round-top-corners; border: 1px solid; border-bottom: 0;
+  a { text-decoration: none; }
+}
+
+footer {
+  .links { float: left; font-size: .9em;
+    img { vertical-align: middle; padding-right: 5px; position: relative; top: -2px;}
+    span { position: relative; top: -1px; }
+    ul { @include horizontal-list(15px); overflow: visible;
+    li { padding-top: 3px; }
+    li:last-child {border: 0; @include box-shadow(none); } } }
+}
+#page article h2 {
+  margin-top: 1.5em;
+}
+h2 a.help {
+  text-indent: -9999px;
+  display: inline-block;
+  position: relative;
+  text-decoration: none;
+  @include opacity(.3);
+  &:hover { @include opacity(.7); }
+  &:before {
+    @extend .pictos;
+    content: "?";
+    text-indent: 0;
+    position: absolute;
+    top: 2px;
+    left: 0;
+    font-size: .85em;
+  }
+}
+hr {
+  height: 0px;
+  border: 0;
+  border-bottom-width: 4px;
+  margin: 3em 0;
+  background: transparent;
+}

data/lib/compass-theme/stylesheets/partials/_nav.scss

@@ -0,0 +1,96 @@
+.triangle-marker {
+  border-color: transparent transparent;
+  content: "\00a0";
+  height: 0; width: 0;
+  position: absolute;
+  border-style: solid; }
+
+nav a { @include hover-link; }
+nav .selected a:hover { text-decoration: none;}
+
+header { @extend .group;
+  font-size: 1.3em; @extend .heading-font; border-width: 4px;}
+#main-nav {
+  display: inline-block;
+  padding-bottom: 10px;
+  ul {
+    @include horizontal-list(10px);
+    line-height: 2em; }}
+
+#sub-nav {
+  @extend .group;
+  padding: 8px 0; }
+
+#docs-nav, #module-nav {
+  display: inline-block;
+  float: left;
+  a {
+    padding: 2px 10px;
+    display: inline-block; }}
+
+#docs-nav { padding-right: 30px;
+  & + #module-nav {
+    padding-left: 20px;
+  }}
+
+#module-nav {
+  display: inline-block;
+  ul { @include horizontal-list(false); }}
+
+body.getting-started #module-nav li.getting-started,
+body.tutorial #module-nav li.tutorials,
+body.support #module-nav li.support,
+#module-nav li.selected {
+  position: relative;
+  a {
+    text-decoration: none;
+  }
+  a:before{ @extend .triangle-marker;
+    border-width: 0 8px 8px;
+    z-index: 2;
+    bottom: -9px;
+    left: 50%;
+    margin-left: -8px;
+    border-bottom-color: #121212;
+  }
+  &:before { @extend .triangle-marker;
+    border-bottom-color: #414141;
+    border-width: 0 6px 6px;
+    z-index: 3;
+    bottom: -9px;
+    left: 50%;
+    margin-left: -6px;
+  }
+  &:after { @extend .triangle-marker;
+    border-bottom-color: #343434;
+    border-width: 0 5px 5px;
+    z-index: 3;
+    bottom: -10px;
+    left: 50%;
+    margin-left: -5px;
+  }
+}
+
+#search-docs {
+  width: 170px;
+  float: right;
+  position: relative;
+  top: .3em;
+  //position: absolute; top: 29px; right: 0;
+  &:before {
+    content: "s";
+    display: block;
+    @extend .pictos;
+    position: absolute;
+    left: 6px;
+    top: 4px;
+    font-size: .8em;
+    z-index: 20;
+    @include opacity(.8)
+  }
+  input { @extend .sans-font; @include round-corners;
+    @include box-sizing(border-box);
+    width: 170px; border: 0; margin: 0; padding: 5px 8px 5px 26px;
+    font-size: .8em;
+    float: right;
+    position: relative; } }