jambi 0.1.0

data/_sass/libraries/syntax.scss

@@ -0,0 +1,60 @@
+.highlight  { background: #ffffff; }
+.highlight .c { color: #999988; font-style: italic } /* Comment */
+.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
+.highlight .k { font-weight: bold } /* Keyword */
+.highlight .o { font-weight: bold } /* Operator */
+.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */
+.highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */
+.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */
+.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
+.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
+.highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */
+.highlight .ge { font-style: italic } /* Generic.Emph */
+.highlight .gr { color: #aa0000 } /* Generic.Error */
+.highlight .gh { color: #999999 } /* Generic.Heading */
+.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
+.highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */
+.highlight .go { color: #888888 } /* Generic.Output */
+.highlight .gp { color: #555555 } /* Generic.Prompt */
+.highlight .gs { font-weight: bold } /* Generic.Strong */
+.highlight .gu { color: #aaaaaa } /* Generic.Subheading */
+.highlight .gt { color: #aa0000 } /* Generic.Traceback */
+.highlight .kc { font-weight: bold } /* Keyword.Constant */
+.highlight .kd { font-weight: bold } /* Keyword.Declaration */
+.highlight .kp { font-weight: bold } /* Keyword.Pseudo */
+.highlight .kr { font-weight: bold } /* Keyword.Reserved */
+.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */
+.highlight .m { color: #009999 } /* Literal.Number */
+.highlight .s { color: #d14 } /* Literal.String */
+.highlight .na { color: #008080 } /* Name.Attribute */
+.highlight .nb { color: #0086B3 } /* Name.Builtin */
+.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */
+.highlight .no { color: #008080 } /* Name.Constant */
+.highlight .ni { color: #800080 } /* Name.Entity */
+.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */
+.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */
+.highlight .nn { color: #555555 } /* Name.Namespace */
+.highlight .nt { color: #000080 } /* Name.Tag */
+.highlight .nv { color: #008080 } /* Name.Variable */
+.highlight .ow { font-weight: bold } /* Operator.Word */
+.highlight .w { color: #bbbbbb } /* Text.Whitespace */
+.highlight .mf { color: #009999 } /* Literal.Number.Float */
+.highlight .mh { color: #009999 } /* Literal.Number.Hex */
+.highlight .mi { color: #009999 } /* Literal.Number.Integer */
+.highlight .mo { color: #009999 } /* Literal.Number.Oct */
+.highlight .sb { color: #d14 } /* Literal.String.Backtick */
+.highlight .sc { color: #d14 } /* Literal.String.Char */
+.highlight .sd { color: #d14 } /* Literal.String.Doc */
+.highlight .s2 { color: #d14 } /* Literal.String.Double */
+.highlight .se { color: #d14 } /* Literal.String.Escape */
+.highlight .sh { color: #d14 } /* Literal.String.Heredoc */
+.highlight .si { color: #d14 } /* Literal.String.Interpol */
+.highlight .sx { color: #d14 } /* Literal.String.Other */
+.highlight .sr { color: #009926 } /* Literal.String.Regex */
+.highlight .s1 { color: #d14 } /* Literal.String.Single */
+.highlight .ss { color: #990073 } /* Literal.String.Symbol */
+.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */
+.highlight .vc { color: #008080 } /* Name.Variable.Class */
+.highlight .vg { color: #008080 } /* Name.Variable.Global */
+.highlight .vi { color: #008080 } /* Name.Variable.Instance */
+.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */

data/_sass/ui/article-list/_base.scss

@@ -0,0 +1,22 @@
+article-list {
+
+  article {
+    margin: 4.5em 0;
+
+    &:first-child {
+      margin-top: 0;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    .article-link {
+      display: block;
+    }
+
+    excerpt {
+
+    }
+  }
+}

data/_sass/ui/article/_base.scss

@@ -0,0 +1,56 @@
+article {
+
+  header {
+    margin-bottom: 1.5em;
+
+    .info {
+      margin-top: 0;
+    }
+
+    category {
+      text-transform: capitalize;
+
+      &:before {
+        content: "/ ";
+        color: $color-seperator;
+        padding: 0 .25em;
+      }
+    }
+  }
+
+  content {
+
+    p {
+      line-height: 1.35em;
+      margin: .75em 0;
+    }
+  }
+
+  iframe,
+  img {
+    max-width: 100%;
+    max-height: 25em;
+    padding: $layout-border-radius;
+    border: 1px solid $color-border;
+    border-radius: $layout-border-radius;
+    overflow: hidden;
+    display: block;
+    margin: 2em auto;
+  }
+
+  figure {
+    margin: 1em 0;
+
+    &.highlight {
+
+      pre {
+        font-size: .9em;
+        border: 1px solid $color-border;
+        background-color: $color-gray-lightest;
+        padding: 1em;
+        overflow: auto;
+        border-radius: $layout-border-radius;
+      }
+    }
+  }
+}

data/_sass/ui/body/_base.scss

@@ -0,0 +1,57 @@
+%body-sub-header {
+  letter-spacing: .05em;
+  color: $color-gray-dark;
+  font-weight: 300;
+  margin: .5em 0 .25em;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: $font-sans-family;
+  color: $color-text;
+  font-weight: 300;
+}
+
+h1 {
+  letter-spacing: .05em;
+  font-size: 1.75em;
+  font-family: $font-serif-family;
+  margin: 0 0 .15em 0;
+}
+
+h2 {
+  @extend %body-sub-header;
+  font-size: 1.35em;
+}
+
+h3 {
+  @extend %body-sub-header;
+  font-size: 1.15em;
+}
+
+p {
+  margin: .5em 0;
+}
+
+a {
+  text-decoration: none;
+  transition: color 0.2s;
+  color: $color-text;
+
+  &:active,
+  &:visited {
+    color: $color-text;
+  }
+}
+
+category,
+time {
+  font-size: .8em;
+  color: $color-gray;
+  font-weight: 300;
+}

data/_sass/ui/footer/_base.scss

@@ -0,0 +1,32 @@
+.ui-footer {
+  margin-top: 1em;
+  padding: 0 1em 1em;
+
+  .wrapper {
+    max-width: $layout-wrapper-max-width;
+    margin: auto;
+    border-top: 1px solid $color-border;
+    padding: 1em 0;
+  }
+
+  .usernames {
+    margin-bottom: 1em;
+    font-size: 1.25em;
+
+    a {
+      margin-right: 1em;
+      vertical-align: middle;
+      color: $color-gray;
+
+      &.email {
+        font-size: .85rem;
+      }
+    }
+  }
+
+  .copy {
+    font-size: .65em;
+    margin-top: 1em;
+    color: $color-gray-light;
+  }
+}

data/_sass/ui/header/_base.scss

@@ -0,0 +1,101 @@
+.ui-header {
+  padding: 1em 1em 0;
+  border-bottom: 1px solid $color-border;
+  background: $color-header-top; /* fallback for old browsers */
+  background: linear-gradient(to bottom, $color-header-top, $color-header-bottom);
+
+  .wrapper {
+    max-width: $layout-wrapper-max-width;
+    margin: auto;
+  }
+
+  .intro {
+    display: flex;
+    align-items: center;
+
+    .image {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+      overflow: hidden;
+      border: 1px solid $color-border;
+      background-color: white;
+      flex-shrink: 0;
+      padding: .25em;
+
+      .background {
+        @include square(3.5em);
+        background: url("/assets/images/header/me.jpg") center no-repeat;
+        background-size: contain;
+        display: block;
+        border-radius: 50%;
+      }
+    }
+
+    .info {
+      flex: 1;
+      margin: 0 0 0 1em;
+
+      .name {
+        font-size: 1.25em;
+      }
+
+      .tagline {
+        font-size: .85em;
+        margin: .25em 0;
+        color: $color-gray-dark;
+      }
+    }
+  }
+
+  nav {
+    margin-top: 1em;
+  }
+
+  ul {
+    display: flex;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  li {
+    padding: .35em .75em;
+    margin: 0 .25em;
+    border-bottom: 0;
+    border-right: 0;
+    position: relative;
+    border-top: 1px solid transparent;
+
+    &.active {
+      border: 1px solid $color-border;
+      border-bottom: 0;
+      border-radius: $layout-border-radius $layout-border-radius 0 0;
+      background: white;
+
+      a {
+        color: $color-text;
+      }
+
+      &:after {
+        content: "";
+        border-bottom: 3px solid white;
+        position: absolute;
+        width: 100%;
+        left: 0;
+        bottom: -2px;
+        z-index: 1;
+      }
+    }
+
+    &:first-child {
+      margin-left: 0;
+    }
+
+    a {
+      font-weight: 300;
+      color: $color-link;
+    }
+  }
+}

data/_sass/ui/icons/_base.scss

@@ -0,0 +1,41 @@
+i {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'jambi' !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  display: inline-block;
+  vertical-align: middle;
+  transition: color 0.3s;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  &.github:before {
+    content: "\e900";
+
+    &:hover {
+      color: $color-text;
+    }
+  }
+
+  &.linkedin:before {
+    content: "\e901";
+
+    &:hover {
+      color: #0077b5;
+    }
+  }
+
+  &.twitter:before {
+    content: "\e902";
+
+    &:hover {
+      color: #1da1f2;
+    }
+  }
+}

data/_sass/ui/main/_base.scss

@@ -0,0 +1,8 @@
+.ui-main {
+  padding: 2em 1em;
+
+  .wrapper {
+    max-width: $layout-wrapper-max-width;
+    margin: auto;
+  }
+}

data/_sass/utilities/_animations.scss

@@ -0,0 +1,19 @@
+$animation-easing: cubic-bezier(0, 0, 0.2, 1);
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform:rotate(359deg);
+  }
+}
+
+@keyframes in-up {
+  from {
+    transform: translateY(1em);
+  }
+  to {
+    transform: translateY(0);
+  }
+}

data/_sass/utilities/_mixins.scss

@@ -0,0 +1,41 @@
+@mixin position ($top, $right, $bottom, $left) {
+  @if $top {
+    top: $top;
+  }
+  @if $right {
+    right: $right;
+  }
+  @if $bottom {
+    bottom: $bottom;
+  }
+  @if $left {
+    left: $left;
+  }
+}
+
+// Sizing shortcuts
+// -------------------------
+@mixin size($height, $width) {
+  width: $width;
+  height: $height;
+}
+
+@mixin square($size) {
+  @include size($size, $size);
+}
+
+@mixin ellipsis-overflow () {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// Circles
+@mixin circle($diameter) {
+  line-height: $diameter;
+  width: $diameter;
+  text-align: center;
+  border-radius: 50%;
+  overflow: hidden;
+  display: inline-block;
+}