middleman-sculptor 0.3

data/lib/middleman-sculptor/template/source/assets/scripts/glyptotheque/services.js

@@ -0,0 +1 @@
+angular.module('services', []);

data/lib/middleman-sculptor/template/source/assets/scripts/head-js.js

@@ -0,0 +1 @@
+//= require store

data/lib/middleman-sculptor/template/source/assets/scripts/iframe-js.js

@@ -0,0 +1 @@
+//= require iframe-resizer/src/iframeResizer.contentWindow

data/lib/middleman-sculptor/template/source/assets/styles/glyptotheque.scss

@@ -0,0 +1,9 @@
+@import 'bourbon';
+
+@import 'glyptotheque/$variables';
+@import 'glyptotheque/base';
+@import 'glyptotheque/nav';
+@import 'glyptotheque/model';
+@import 'glyptotheque/model-utils';
+@import 'glyptotheque/html-outline';
+@import 'glyptotheque/codehilite';

data/lib/middleman-sculptor/template/source/assets/styles/glyptotheque/_$variables.scss

@@ -0,0 +1,3 @@
+$light-grey: #e7e6e8;
+$hover-orange: #d25f00;
+$glypto-nav-width: 230px;

data/lib/middleman-sculptor/template/source/assets/styles/glyptotheque/_base.scss

@@ -0,0 +1,58 @@
+html,
+body {
+  height: 100%;
+}
+
+body {
+  background: #d9d7de;
+}
+
+.glyptotheque {
+  padding: 40px 20px;
+  min-height: 100%;
+  overflow: hidden;
+  background: white;
+  box-shadow: -1px 0 0 rgba(black, .1);
+  position: relative;
+
+  > header {
+    margin: 0 0 30px;
+    border-bottom: 1px solid #ccc;
+
+    h1 {
+      font-size: 28px;
+      font-weight: 400;
+      margin: 0;
+      padding-bottom: 4px;
+      border-bottom: 4px solid #ccc;
+      display: inline-block;
+    }
+  }
+}
+
+.glypto-section {
+  margin: 0 -20px 30px;
+  padding: 0 20px 30px;
+  border-bottom: 1px solid #ddd;
+  box-shadow: 0 1px rgba(white, .4);
+
+  &:last-child {
+    box-shadow: none;
+    border: 0;
+  }
+
+  .glypto-title {
+    font-weight: 400;
+    font-size: 24px;
+    margin: 0;
+
+    a {
+      color: #0070a8;
+      text-decoration: none;
+
+      &:hover {
+        color: $hover-orange;
+      }
+    }
+  }
+}

data/lib/middleman-sculptor/template/source/assets/styles/glyptotheque/_codehilite.scss

@@ -0,0 +1,10 @@
+.codehilite {
+  background: $light-grey;
+  padding: 10px;
+
+  // compensate for first new line
+  code {
+    display: inline-block;
+    margin-top: -1em;
+  }
+}

data/lib/middleman-sculptor/template/source/assets/styles/glyptotheque/_html-outline.scss

@@ -0,0 +1,131 @@
+.html-outline {
+  @mixin _item($color: null, $before: none, $after: none) {
+    $pres-color: #aaa;
+
+    display: inline-block;
+    vertical-align: top;
+    overflow: hidden;
+
+    @if $color {
+      color: $color;
+    }
+    &:before {
+      content: $before;
+      color: $pres-color;
+    }
+    &:after {
+      content: $after;
+      color: $pres-color;
+    }
+  }
+
+  font: 600 11px Menlo, monospace;
+  cursor: default;
+  background: $light-grey;
+  padding: 10px;
+  margin: 1em 0;
+
+  .glypto-model-outline & {
+    margin: 0;
+  }
+
+  ._element {
+    transition: 100ms;
+    padding: 1px 2px 2px;
+    border-radius: 3px;
+    margin: 1px;
+    color: #aaa;
+
+    &:hover {
+      box-shadow: inset 0 0 0 1px rgba(black, .07);
+      background: rgba(white, .2);
+    }
+
+    > span {
+      margin-top: 1px;
+    }
+
+    ._element {
+      margin-left: 10px;
+    }
+
+    > ._name,
+    ._id,
+    ._classes {
+      border-radius: 3px;
+      background: rgba(white, .2);
+    }
+
+    > ._name,
+    ._id,
+    ._classes,
+    ._class {
+      padding: 2px 5px;
+      margin-right: 1px;
+      white-space: nowrap;
+    }
+  }
+
+  ._id {
+    @include _item(#009486);
+    box-shadow: inset 0 0 0 1px rgba(#009486, .2);
+  }
+
+  ._classes {
+    @include _item;
+    box-shadow: inset 0 0 0 1px rgba(#cc3333, .2);
+  }
+
+  ._element > ._name {
+    @include _item(#003366);
+    box-shadow: inset 0 0 0 1px rgba(#003366, .2);
+  }
+
+  ._element ._class {
+    @include _item(#cc3333);
+    margin: -2px 0 -2px -1px;
+    border-left: 1px solid rgba(#cc3333, .1);
+    background: none;
+
+    &:first-child {
+      margin-left: -4px;
+      border: 0;
+    }
+
+    &:before {
+      font-family: serif;
+      font-weight: bold;
+      font-size: 12px;
+      margin: 0 2px 0 -2px;
+      color: inherit;
+    }
+  }
+
+  ._attributes {
+    @include _item;
+    padding: 2px;
+    border-radius: 3px;
+    word-break: break-word;
+  }
+
+  ._attr {
+    > ._name {
+      @include _item(#3366cc);
+    }
+
+    > ._value {
+      @include _item(#339900);
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      max-width: 400px;
+    }
+  }
+
+  ._text {
+    @include _item;
+    font: normal 13px/15px Helvetica, Arial, sans-serif;
+    padding: 2px 2px 0;
+    max-width: 360px;
+    word-break: break-word;
+  }
+}

data/lib/middleman-sculptor/template/source/assets/styles/glyptotheque/_model-utils.scss

@@ -0,0 +1,78 @@
+.glypto-model-utils {
+  border-top: 1px solid $light-grey;
+
+  > menu {
+    @include clearfix;
+    font-size: 11px;
+    font-weight: 600;
+    color: #888;
+    margin: 0;
+    padding: 5px;
+    position: relative;
+    -webkit-font-smoothing: antialiased;
+
+    > a,
+    > button {
+      text-transform: uppercase;
+      padding: 5px 8px;
+      border-radius: 3px;
+      background: none;
+      color: inherit;
+      font-weight: inherit;
+
+      &:hover {
+        color: #555;
+        background: rgba(black, .05);
+      }
+      &:active {
+        color: #333;
+        background: rgba(black, .1);
+      }
+
+      &.__active {
+        color: white;
+        background: rgba(black, .3);
+
+        &:active {
+          background: rgba(black, .5);
+          color: white;
+        }
+      }
+
+      .fa {
+        margin-left: 5px;
+      }
+    }
+  }
+
+  ._tab-toggle {
+    float: left;
+    border: none;
+    outline: none;
+    margin-right: 3px;
+  }
+
+  ._isolated {
+    float: right;
+    text-decoration: none;
+  }
+
+  ._container {
+    max-height: 40rem;
+    overflow: auto;
+  }
+
+  ._panel {
+    display: none;
+
+    &.__shown {
+      display: block;
+    }
+  }
+
+  pre {
+    font: 12px/1.4 Menlo, monospace;
+    white-space: pre-wrap;
+    margin: 0;
+  }
+}

data/lib/middleman-sculptor/template/source/assets/styles/glyptotheque/_model.scss

@@ -0,0 +1,48 @@
+@import 'pygments/github';
+
+.glypto-model {
+  margin: 20px 0;
+  border: 1px solid $light-grey;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  > .glypto-model-stage {
+    position: relative;
+    padding: 1px;
+
+    > figure,
+    > iframe {
+      display: block;
+      margin: 0;
+    }
+
+    > figure {
+      @include clearfix;
+      padding: 10px;
+    }
+
+    ._component {
+      transition: 200ms max-width;
+      overflow: hidden;
+      padding: 5px;
+
+      &.__small {
+        max-width: 320px;
+      }
+
+      &.__medium {
+        max-width: 640px;
+      }
+
+      &.__large {
+        max-width: 1280px;
+      }
+
+      &.__default {
+        max-width: 100%;
+      }
+    }
+  }
+}

data/lib/middleman-sculptor/template/source/assets/styles/glyptotheque/_nav.scss

@@ -0,0 +1,172 @@
+.glypto-nav,
+#glypto-nav-placeholder {
+  float: left;
+  width: $glypto-nav-width;
+  min-height: 1px;
+}
+
+.glypto-nav {
+  transition: 120ms ease-out;
+  color: #444;
+
+  &.s-hidden {
+    margin-left: -$glypto-nav-width;
+
+    > .glypto-nav-toggle {
+      background: none;
+      border-color:rgba(black, .2);
+      box-shadow: none;
+      margin-right: -30px;
+    }
+  }
+
+  ._logo {
+    background: rgba(black, .2);
+    color: rgba(white, .6);
+    border-bottom: 1px solid rgba(black, .05);
+    box-shadow: 0 1px 0 rgba(white, .3);
+    padding: 8px;
+
+    &:hover,
+    &:focus {
+      background: rgba(black, .2);
+      color: white;
+    }
+  }
+
+  .search {
+    padding: 4px;
+    background: rgba(black, .06);
+    border-bottom: 1px solid transparent;
+    margin-bottom: -1px;
+
+    input {
+      box-sizing: border-box;
+      border: 1px solid rgba(black, .2);
+      background: rgba(white, .6);
+      padding: 5px;
+      font-size: 14px;
+      display: block;
+      width: 100%;
+      outline: none;
+
+      @include placeholder {
+        color: #bbb;
+      }
+
+      &:focus {
+        background: white;
+        border-color: rgba(black, .4);
+        box-shadow: inset 0 0 2px rgba(black, .2);
+
+        @include placeholder {
+          color: #ddd;
+        }
+      }
+    }
+  }
+
+  > .glypto-nav-toggle {
+    @include size(25px);
+    transition: 100ms;
+    padding: 0;
+    background: rgba(black, .1);
+    border: 0;
+    float: right;
+    margin: 5px 5px 0 0;
+    position: relative;
+    z-index: 1;
+    cursor: pointer;
+    opacity: .5;
+    outline: none;
+    border: 1px solid rgba(black, .28);
+    box-shadow: inset 0 0 0 1px rgba(black, .06);
+
+    &:before {
+      @include position(absolute, 5px 0 null 0);
+      transition: 300ms;
+      box-shadow: 0 2px 0 1px black, 0 7px 0 1px black, 0 12px 0 1px black;
+      width: 15px;
+      margin: auto;
+      opacity: .6;
+      content: '';
+    }
+
+    &:hover {
+      opacity: .6;
+    }
+    &:active {
+      opacity: .8;
+      background: rgba(black, .1);
+      border-color: rgba(black, .2);
+      box-shadow: inset 0 0 0 1px rgba(black, .06);
+    }
+  }
+
+  ul {
+    @include clearfix;
+    list-style: none;
+    font-size: 14px;
+    line-height: 1.2;
+    padding: 0;
+    margin: 0;
+    color: #555;
+  }
+
+  > ul > li {
+    border-top: 1px solid rgba(black, .07);
+  }
+
+  a {
+    display: block;
+    padding: 8px 10px;
+    color: inherit;
+    text-decoration: none;
+    outline: none;
+
+    &:hover,
+    &:focus {
+      background: rgba(white, .16);
+      color: $hover-orange;
+    }
+
+    &:active {
+      color: inherit;
+      background: rgba(black, .01);
+    }
+  }
+
+  li._index {
+    > a {
+      letter-spacing: 1px;
+      font-weight: 600;
+    }
+
+    ._count {
+      float: right;
+      color: #999;
+      font-weight: normal;
+      line-height: 16px;
+    }
+
+    ul {
+      a:before {
+        content: '';
+        margin: 0 5px;
+      }
+
+      ul a:before {
+        margin-left: 15px;
+      }
+
+      li:not(._index) a:before {
+        content: '•';
+      }
+    }
+  }
+
+  li.s-selected > a {
+    color: inherit;
+    background: rgba(#b5cdd9, .5);
+  }
+}