devterm 0.1.8

data/_includes/work-page.html

@@ -0,0 +1,14 @@
+       <ul class="work-list">
+        {% for work in site.works %}
+        <li class="work-list-item">
+          <a class="work-tile" title="{{ work.title }}" href="{{ work.permalink }}">
+            <img class="work-tile-logo" alt="{{ work.title }}" src="{{ site.baseurl }}/{{ work.cdn }}/img/logo-promotion.png">
+            <span class="text-content text-content-{{ work.background }}">
+              <span>
+                {{ work.description }}
+              </span>
+            </span>
+          </a>
+        </li>
+        {% endfor %}
+      </ul>

data/_includes/work-screencaps.html

@@ -0,0 +1 @@
+<h3 class="p-title">Screencaps:</h3>

data/_includes/work-version.html

@@ -0,0 +1 @@
+<h3 class="p-title">Version:</h3>

data/_layouts/compress.html

@@ -0,0 +1,10 @@
+---
+# Jekyll layout that compresses HTML
+# v3.0.2
+# http://jch.penibelst.de/
+# © 2014–2015 Anatol Broder
+# MIT License
+---
+
+{% capture _LINE_FEED %}
+{% endcapture %}{% if site.compress_html.ignore.envs contains jekyll.environment %}{{ content }}{% else %}{% capture _content %}{{ content }}{% endcapture %}{% assign _profile = site.compress_html.profile %}{% if site.compress_html.endings == "all" %}{% assign _endings = "html head body li dt dd p rt rp optgroup option colgroup caption thead tbody tfoot tr td th" | split: " " %}{% else %}{% assign _endings = site.compress_html.endings %}{% endif %}{% for _element in _endings %}{% capture _end %}</{{ _element }}>{% endcapture %}{% assign _content = _content | remove: _end %}{% endfor %}{% if _profile and _endings %}{% assign _profile_endings = _content | size | plus: 1 %}{% endif %}{% for _element in site.compress_html.startings %}{% capture _start %}<{{ _element }}>{% endcapture %}{% assign _content = _content | remove: _start %}{% endfor %}{% if _profile and site.compress_html.startings %}{% assign _profile_startings = _content | size | plus: 1 %}{% endif %}{% if site.compress_html.comments == "all" %}{% assign _comments = "<!-- -->" | split: " " %}{% else %}{% assign _comments = site.compress_html.comments %}{% endif %}{% if _comments.size == 2 %}{% capture _comment_befores %}.{{ _content }}{% endcapture %}{% assign _comment_befores = _comment_befores | split: _comments.first %}{% for _comment_before in _comment_befores %}{% if forloop.first %}{% continue %}{% endif %}{% capture _comment_outside %}{% if _carry %}{{ _comments.first }}{% endif %}{{ _comment_before }}{% endcapture %}{% capture _comment %}{% unless _carry %}{{ _comments.first }}{% endunless %}{{ _comment_outside | split: _comments.last | first }}{% if _comment_outside contains _comments.last %}{{ _comments.last }}{% assign _carry = false %}{% else %}{% assign _carry = true %}{% endif %}{% endcapture %}{% assign _content = _content | remove_first: _comment %}{% endfor %}{% if _profile %}{% assign _profile_comments = _content | size | plus: 1 %}{% endif %}{% endif %}{% assign _pre_befores = _content | split: "<pre" %}{% assign _content = "" %}{% for _pre_before in _pre_befores %}{% assign _pres = _pre_before | split: "</pre>" %}{% assign _pres_after = "" %}{% if _pres.size != 0 %}{% if site.compress_html.blanklines %}{% assign _lines = _pres.last | split: _LINE_FEED %}{% capture _pres_after %}{% for _line in _lines %}{% assign _trimmed = _line | split: " " | join: " " %}{% if _trimmed != empty or forloop.last %}{% unless forloop.first %}{{ _LINE_FEED }}{% endunless %}{{ _line }}{% endif %}{% endfor %}{% endcapture %}{% else %}{% assign _pres_after = _pres.last | split: " " | join: " " %}{% endif %}{% endif %}{% capture _content %}{{ _content }}{% if _pre_before contains "</pre>" %}<pre{{ _pres.first }}</pre>{% endif %}{% unless _pre_before contains "</pre>" and _pres.size == 1 %}{{ _pres_after }}{% endunless %}{% endcapture %}{% endfor %}{% if _profile %}{% assign _profile_collapse = _content | size | plus: 1 %}{% endif %}{% if site.compress_html.clippings == "all" %}{% assign _clippings = "html head title base link meta style body article section nav aside h1 h2 h3 h4 h5 h6 hgroup header footer address p hr blockquote ol ul li dl dt dd figure figcaption main div table caption colgroup col tbody thead tfoot tr td th" | split: " " %}{% else %}{% assign _clippings = site.compress_html.clippings %}{% endif %}{% for _element in _clippings %}{% assign _edges = " <e;<e; </e>;</e>;</e> ;</e>" | replace: "e", _element | split: ";" %}{% assign _content = _content | replace: _edges[0], _edges[1] | replace: _edges[2], _edges[3] | replace: _edges[4], _edges[5] %}{% endfor %}{% if _profile and _clippings %}{% assign _profile_clippings = _content | size | plus: 1 %}{% endif %}{{ _content }}{% if _profile %} <table id="compress_html_profile_{{ site.time | date: "%Y%m%d" }}" class="compress_html_profile"> <thead> <tr> <td>Step <td>Bytes <tbody> <tr> <td>raw <td>{{ content | size }}{% if _profile_endings %} <tr> <td>endings <td>{{ _profile_endings }}{% endif %}{% if _profile_startings %} <tr> <td>startings <td>{{ _profile_startings }}{% endif %}{% if _profile_comments %} <tr> <td>comments <td>{{ _profile_comments }}{% endif %}{% if _profile_collapse %} <tr> <td>collapse <td>{{ _profile_collapse }}{% endif %}{% if _profile_clippings %} <tr> <td>clippings <td>{{ _profile_clippings }}{% endif %} </table>{% endif %}{% endif %}

data/_layouts/contact.html

@@ -0,0 +1,26 @@
+---
+layout: compress
+---
+
+<!DOCTYPE html>
+<html lang="en">
+{% include head.html %}
+  <body>
+    <div class="top-div purple-div">
+{% include top-div.html %}
+    </div>
+    <div class="left-div fixed-div purple-div page-div">
+      {% include h2-div.html %}
+{% include svg-mail.html %}
+      {% include h1-div.html %}
+    </div>
+    <div>
+{% include menu-contact.html %}
+    </div>
+    <div class="right-div right-div-contact purple"> 
+{{ content }}
+    </div>
+{% include svg-law.html %}
+{% include body-scripts.html %}
+  </body>
+</html>

data/_layouts/default.html

@@ -0,0 +1,12 @@
+---
+layout: compress
+---
+
+<!DOCTYPE html>
+<html lang="en">
+{% include head.html %}
+  <body>
+{{ content }}
+{% include body-scripts.html %}
+  </body>
+</html>

data/_layouts/license.html

@@ -0,0 +1,29 @@
+---
+layout: compress
+---
+
+<!DOCTYPE html>
+<html lang="en">
+{% include head.html %}
+  <body>
+    <div class="top-div green-div">
+{% include top-div.html %}
+    </div>
+    <div class="left-div fixed-div green-div page-div">
+      {% include h2-div.html %}
+{% include svg-law-big.html %}
+      {% include h1-div.html %}
+    </div>
+    <div>
+{% include menu-license.html %}
+    </div>
+    <div class="right-div green">
+{{ content }}
+    </div>
+{% if page.require contains 'arrow-up' %}
+{% include svg-arrow-up.html %}
+{% endif %}
+{% include svg-home.html %}
+{% include body-scripts.html %}
+  </body>
+</html>

data/_layouts/tips.html

@@ -0,0 +1,29 @@
+---
+layout: compress
+---
+
+<!DOCTYPE html>
+<html lang="en">
+{% include head.html %}
+  <body>
+    <div class="top-div orange-div">
+{% include top-div.html %}
+    </div>
+    <div class="left-div fixed-div orange-div page-div">
+      {% include h2-div.html %}
+{% include svg-light-bulb.html %}
+      {% include h1-div.html %}
+    </div>
+    <div>
+{% include menu-tips.html %} 
+    </div>
+    <div class="right-div orange"> 
+{{ content }}
+    </div>
+{% if page.require contains 'arrow-up' %}
+{% include svg-arrow-up.html %}
+{% endif %}
+{% include svg-law.html %}
+{% include body-scripts.html %}
+  </body>
+</html>

data/_layouts/work.html

@@ -0,0 +1,29 @@
+---
+layout: compress
+---
+
+<!DOCTYPE html>
+<html lang="en">
+{% include head.html %}
+  <body>
+    <div class="top-div blue-div">
+{% include top-div.html %}
+    </div>
+    <div class="left-div fixed-div blue-div page-div">
+      {% include h2-div.html %}
+{% include svg-file-binary.html %}
+      {% include h1-div.html %}
+    </div>
+    <div>
+{% include menu-work.html %}
+    </div>
+    <div class="right-div blue"> 
+{{ content }}
+    </div>
+{% if page.require contains 'arrow-up' %}
+{% include svg-arrow-up.html %}
+{% endif %}
+{% include svg-law.html %}
+{% include body-scripts.html %}
+  </body>
+</html>

data/_sass/main.scss

@@ -0,0 +1,680 @@
+@import 'palette';
+
+body {
+  background-color: $smoke;
+  color: $smoke;
+  font-family: $font-stack;
+  margin: 0;
+  padding: 0;
+}
+
+.window-div {
+  background-color: $black;
+  height: 100vh;
+  width: 100vw;
+}
+
+.hidden {
+  display: none;
+}
+
+.left-div {
+  background-color: $black;
+  height: 100vh;
+}
+
+.page-div {
+  display: none;
+}
+
+.top-div {
+  height: 15vh;
+}
+
+.right-div {
+  margin-left: 10vw;
+  padding: 5vh 0 7vh 0;
+  width: 80vw;
+}
+
+.nav-up {
+  top: -40px;
+}
+
+.h2-div {
+  font-size: 6vw;
+  font-weight: 400;
+  height: 6vh;
+  margin: 0;
+  padding: 15vh 0 0 0;
+  text-align: center;
+}
+
+.h2-page {
+  font-size: 12vw;
+}
+
+.h2-top {
+  height: 4vh;
+  padding: 2vh 0 0 0;
+}
+
+.p-center {
+  line-height: 32px;
+  margin: 0;
+  padding: 0;
+  text-align: center;
+}
+
+.p-title {
+  font-size: 7vw;
+  font-weight: 600;
+  margin-top: 7vh;
+  text-align: center;
+}
+
+.p-title-first {
+  margin-top: 0;
+}
+
+.main-title {
+  font-size: 8vw;
+  font-weight: 600;
+  margin-top: 0;
+  text-align: center;
+}
+
+.text-indent {
+  text-indent: 30px;
+}
+
+ul {
+  padding-left: 25px;
+  line-height: 30px;
+  text-align: justify;
+  text-justify: inter-word;
+}
+
+.p-justify {
+  line-height: 30px;
+  text-align: justify;
+  text-justify: inter-word;
+}
+
+.right-div a {
+  color: inherit;
+}
+
+.svg-div {
+  height: 40vh;
+  margin: 9vh 30vw 0 30vw;
+  width: 40vw;
+}
+
+.h1-div {
+  font-family: $font-stack;
+  font-size: 12vw;
+  height: 12vh;
+  margin: 0;
+  padding: 0;
+  text-align: center;
+}
+
+.h1-window {
+  padding: 6vh 0 0 0;
+  a {
+    text-decoration: none;
+    &:hover {
+      text-decoration: none;
+    }
+  }
+}
+
+.h1-window-top {
+  padding: 10vh 0 0 0;
+}
+
+.h1-window-bottom {
+  padding: 0;
+}
+
+.h1-page {
+  font-size: 17vw;
+}
+
+.h1-top {
+  font-size: 9vw;
+  height: 5vh;
+  margin: 2vh 0 0 10px;
+}
+
+.h1-page a,
+.h1-top a {
+  color: $smoke;
+  text-decoration: none;
+}
+
+.h1-page a:hover,
+.h1-top a:hover {
+  color: $smoke;
+  text-decoration: underline;
+}
+
+.typed-cursor {
+  animation: blink 1s infinite;
+  color: $green-lime;
+  margin-left: -7px;
+  margin-right: -5px;
+}
+
+@keyframes blink {
+  to {
+    opacity: .0;
+  }
+}
+
+
+.svg-window {
+  margin: 0 30vw 0 30vw;
+}
+
+.bottom-svg {
+  border-radius: 50px;
+  bottom: 3vh;
+  height: 4vh;
+  max-height: 30px;
+  max-width: 30px;
+  padding: 7px;
+  position: fixed;
+  width: 4vh;
+}
+
+.bottom-left-svg {
+  left: 3vw;
+}
+
+.bottom-right-svg {
+  right: 3vw;
+}
+
+.bottom-svg {
+  &:hover,
+  &:focus,
+  &:active {
+    cursor: pointer;
+    opacity: 0.7;
+  }
+}
+
+.main-menu {
+  font-size: 5vw;
+  height: 5vh;
+  margin: -17vh 0 0 0;
+  padding: 0 0 2vh 0;
+  text-align: center;
+  width: 100vw;
+  z-index: 1000;
+  a {
+    color: $smoke;
+    padding: 20px 0;
+    text-decoration: none;
+  }
+}
+
+.menu-page {
+  border-bottom: 2px solid $gray;
+  height: inherit;
+  margin: 0;
+  padding: 2vh 0;
+  a {
+    padding: 0;
+  }
+}
+
+.slash {
+  color: $gray;
+}
+
+.top-menu {
+  border: 0;
+  position: fixed;
+  top: 0;
+}
+
+.work {
+  padding: 2vw;
+}
+
+.black {
+  color: $black;
+}
+
+a .black:hover {
+  text-decoration: underline;
+}
+
+.green {
+  color: $green;
+}
+
+.green-div {
+  background-color: $green;
+}
+
+.blue {
+  color: $blue;
+}
+
+a .blue:hover {
+  text-decoration: underline;
+}
+
+.blue-div {
+  background-color: $blue;
+}
+
+.red {
+  color: $red;
+}
+
+a .red:hover {
+  text-decoration: underline;
+}
+
+.purple {
+  color: $purple;
+}
+
+a .purple:hover {
+  text-decoration: underline;
+}
+
+.purple-div {
+  background-color: $purple;
+}
+
+.orange {
+  color: $orange;
+}
+
+a .orange:hover {
+  text-decoration: underline;
+}
+
+.orange-div {
+  background-color: $orange;
+}
+
+.white {
+  color: $smoke;
+}
+
+.nav-content {
+  margin-left: -5vw;
+  margin-top: 5vh;
+  width: 90vw;
+  ul {
+    line-height: inherit;
+    list-style: none;
+    padding: 0;
+    text-align: center;
+  }
+}
+
+.nav-li {
+  display: inline-block;
+  font-size: 4.3vw;
+  padding: 5px 10px;
+  text-decoration: none;
+}
+
+.nav-content a {
+  color: $smoke;
+  text-decoration: none;
+  &:hover {
+    color: $smoke;
+    text-decoration: none;
+  }
+}
+
+.work-list {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  text-align: center;
+}
+
+.work-list-item {
+  display: inline-block;
+  position: relative;
+}
+
+.work-tile {
+  text-decoration: none;
+}
+
+.work-list-item,
+.img-screenshot {
+  border-radius: 3px;
+  border: 2px solid $gray-light;
+  cursor: pointer;
+  margin: 0 0 1vh 0;
+  transition: 0.3s;
+  width: 80vw;
+}
+
+.work-list-item {
+  background-color: $smoke;
+  height: 30vw;
+}
+
+.text-content {
+  -moz-transition: opacity 300ms;
+  -o-transition: opacity 300ms;
+  -webkit-transition: opacity 300ms;
+  cursor: pointer;
+  display: table;
+  height: 100%;
+  left: 0;
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  transition: opacity 300ms;
+  width: 100%;
+}
+
+.text-content-white {
+  background-color: $white;
+  color: $black;
+}
+
+.text-content-green {
+  background-color: $green-zendesk;
+  color: $white;
+}
+
+.text-content-algae {
+  background-color: $algae;
+  color: $white;
+}
+
+.text-content-black {
+  background-color: $black;
+  color: $gray-light;
+}
+
+.text-content-ruby {
+  background-color: $ruby;
+  color: $white;
+}
+
+.work-list .work-list-item:hover span.text-content {
+  opacity: 1;
+}
+
+.tip-title,
+.text-content span {
+  display: table-cell;
+  font-size: 4vw;
+  line-height: 8vw;
+  text-align: center;
+  vertical-align: middle;
+}
+
+.tip-title {
+  font-size: 6vw;
+  padding: 11vw 5px;
+  vertical-align: initial;
+}
+
+.img-screenshot {
+  padding: 2px 0;
+}
+
+.work-tile-logo {
+  border-radius: 1px;
+  height: 100%;
+  padding: 0;
+  width: 100%;
+}
+
+.img-screenshot:hover {
+  opacity: 0.5;
+}
+
+.img-screenshot-gif {
+  background-color: $smoke;
+}
+
+.no-top-margin {
+  margin-top: 0;
+}
+
+.emoji {
+  height: 16px;
+  vertical-align: text-top;
+  width: 16px;
+}
+
+.social-image {
+  background-color: $gray-dark;
+  border-radius: 1vh;
+  color: $smoke;
+  height: 5vh;
+  max-height: 50px;
+  max-width: 50px;
+  padding: 1vh;
+  width: 5vh;
+  &:hover {
+    opacity: 0.7;
+  }
+}
+
+.p-footer {
+  margin-bottom: -3vh;
+  margin-top: 5em;
+}
+
+.copy-contact {
+  margin-top: 2em;
+}
+
+.footer-contact {
+  background: $smoke;
+  bottom: 3vh;
+  left: 0;
+  position: fixed;
+  width: 100vw;
+}
+
+code {
+  background: $black;
+  border: 1px solid $black;
+  color: $smoke;
+  padding: 0 5px;
+}
+
+.code-block {
+  display: block;
+}
+
+@media screen and (min-width: 568px) {
+
+  .left-div {
+    float: left;
+    width: 50%;
+  }
+
+  .fixed-div {
+    position: fixed;
+  }
+
+  .top-div {
+    display: none;
+  }
+
+  .right-div {
+    float: right;
+    font-size: 2vw;
+    padding: 10vh 0 6vh 0;
+    position: absolute;
+    right: 5vw;
+    top: 9vh;
+    width: 40vw;
+  }
+
+  .right-div-contact {
+    top: 5vh;
+  }
+
+  .page-div {
+    display: block;
+  }
+
+  .h2-div {
+    font-size: 3vw;
+  }
+
+  .h2-page {
+    font-size: 6vw;
+  }
+
+  .h1-page .typed-cursor {
+    margin-left: -20px;
+  }
+
+  .h1-div {
+    font-size: 6vw;
+  }
+
+  .h1-page {
+    font-size: 8vw;
+  }
+
+  .h1-window-top,
+  .h1-window-bottom {
+    padding: 6vh 0 0 0;
+  }
+
+  .svg-div {
+    margin: 9vh 10vw 5vh 10vw;
+    width: 30vw;
+  }
+
+  .svg-window {
+    margin: 0 35vw 0 35vw;
+  }
+
+  .main-menu {
+    float: right;
+    font-size: 5vw;
+    height: 45vh;
+    margin: 0;
+    padding: 27.5vh 12.5vw 0 0;
+    text-align: center;
+    width: 25vw;
+    a {
+      display: inline-block;
+      line-height: 15vh;
+      padding: 0;
+    }
+  }
+
+  .menu-page {
+    background-color: $smoke;
+    border-bottom: 2px $gray solid;
+    font-size: 3vw;
+    height: inherit;
+    left: 50vw;
+    padding: 2vh 0;
+    position: fixed;
+    width: 50vw;
+    a {
+      line-height: 5vh;
+      padding: 0 1vw;
+    }
+  }
+
+  .slash {
+    display: none;
+  }
+
+  .menu-page .slash {
+    display: inline-block;
+  }
+
+  .bottom-left-svg {
+    left: 51vw;
+  }
+
+  .bottom-right-svg {
+    right: 1vw;
+  }
+
+  .p-justify,
+  ul {
+    line-height: 4vw;
+  }
+
+  .nav-content {
+    margin-left: -2.5vw;
+    margin-top: 10vh;
+    width: 45vw;
+  }
+
+  .nav-li {
+    font-size: 2vw;
+  }
+
+  .p-title {
+    font-size: 4vw;
+    margin-top: 10vh;
+  }
+
+  .p-title-first {
+    margin-top: 0;
+  }
+
+  .p-center {
+    line-height: 4vw;
+  }
+
+  .main-title {
+    font-size: 5vw;
+  }
+
+  .work-list-item,
+  .img-screenshot {
+    width: 18vw;
+  }
+
+  .work-list-item {
+    height: 7vw;
+  }
+
+  .text-content span {
+    font-size: 1vw;
+    line-height: 1.4vw;
+  }
+
+  .tip-title {
+    font-size: 1.4vw;
+    line-height: 1.4vw;
+    padding: 2.8vw 10px;
+  }
+
+  .emoji {
+    height: 2vw;
+    margin-bottom: 0.5vw;
+    width: 2vw;
+  }
+
+  .no-top-margin {
+    margin-top: 0;
+  }
+
+  .footer-contact {
+    left: 50vw;
+    width: 50vw;
+  }
+}