lines-engine 0.6.2 → 0.9.0

data/app/assets/stylesheets/lines/general.scss

@@ -7,7 +7,12 @@
 
 html, body { font-size: 16px }
 
-body { height: 100%; background-color: #fff; }
+body {
+  height: 100%; background-color: #fff;
+  &.no-scroll {
+    overflow: hidden;
+  }
+}
 
 img, div { border: 0; display: block; }
 
@@ -26,12 +31,17 @@ a {
   &:hover { color: $orange; }
 }
 
-i, em { font-family: $Merriweather; font-style: italic; }
-strong, b { font-family: $Merriweather; font-weight: bold; }
+i, em { font-style: italic; }
+strong, b { font-weight: bold; }
 
 ul li { list-style-position: outside; }
 
-hr { display: block; margin: 1.2em 0; height: 1px; background-color: #3d3d3d; border:none; }
+hr { display: block; margin: $gutter-gamma auto !important; height: 2px; background-color: $grey; border:none; width: 50%;}
+
+input, textarea, input[type="submit"] {
+  -webkit-appearance: none;
+  -webkit-border-radius: 0;
+}
 
 .float-right { float:right; margin: 15px 0 5px 10px; }
 .clearfix {
@@ -59,21 +69,16 @@ div.rss { display:none; }
 header {
   margin: 0 auto;
   max-width: $max-width;
-  padding: 1.1em;
+  padding: 1.1em 0;
   font-family: $SourceSansPro;
   font-weight: 500;
-  font-size: 1.188em;
-  border-bottom: 1px solid #e3e3e3;
+  font-size: 1.250em;
   a {
     color: #000;
     &:hover { color: $orange; }
   }
-  #logo { float: left; }
-  #lines {
-    float: right;
-    font-size: 0.737em;
-    text-transform: uppercase;
-  }
+  #logo { float: left; text-transform: uppercase; font-weight: 600; }
+  #lines { float: right; }
 }
 
 .container {

data/app/assets/stylesheets/lines/media_queries.scss

@@ -1,7 +1,11 @@
 /************************************************************************************
 smaller than 975px
 *************************************************************************************/
-@media screen and (max-width: 975px) {
+@media screen and (max-width: 990px) {
+  header {
+    padding-left: 1.5em;
+    padding-right: 1.5em;
+  }
 }
 
 /************************************************************************************

data/app/assets/stylesheets/lines/messages.scss

@@ -0,0 +1,28 @@
+/*
+ * Alerts and messages
+ */
+#error_explanation, .alert {
+  background-color: $darkred;
+  border: 0 none;
+  color: $white;
+  padding: 20px;
+  margin-bottom: 20px;
+  position: relative;
+  font-family: $MerriweatherSans;
+  &.alert-success { background-color: $green; }
+  &.alert-notice { background-color: $grey; }
+  &.alert-error { }
+  &.alert-warning { }
+  .close {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    cursor: pointer;
+    display: block;
+    color: $white
+  }
+  h2 { color: $white; margin-top: 0; text-transform: none; }
+  ul { padding-left: 1em; }
+}
+
+

data/app/assets/stylesheets/lines/navbar.scss

@@ -1,148 +1,225 @@
-$orange: #e8581e;
-$background: #2d2d2d;
-$text: #e3e3e3;
-$btn: #434343;
-$btn_active: $orange;
-
-@mixin addTransition($x) {
-  transition: all $x+s ease;
-  -o-transition: all $x+s ease;
-  -ms-transition: all $x+s ease;
-  -moz-transition: all $x+s ease;
-  -webkit-transition: all $x+s ease;
-}
-
-.btn {
-  font-family: 'Cabin', sans-serif;
-  font-size: 16px;
-  line-height: 16px;
-  color: #ffffff;
-  padding: 10px 15px;
-  letter-spacing: 0.1em;
-  cursor: pointer;
-  border: 0px;
-  display: inline-block;
-  margin: 8px 0px;
-  &.btn-publish {
-    background-color: $orange !important;
-    color: #d6d6d6;
-    &:hover {
-      background-color: lighten($orange, 15%) !important;
-    }
-  }
-  &.btn-edit, &.btn-back {
-    background-color: #434343;
-    &:hover {
-      background-color: lighten(#434343, 15%);
-    }
-  }
-}
-
 #navbar {
-  font-family: 'Cabin', sans-serif;
-  line-height: 1.5em;
-  font-size: 1.125em;
-  height: 60px;
-  background-color: $background;
+  font-family: $MerriweatherSans;
   position: fixed;
-  top: 0px;
-  left: 0px;
-  z-index: 9999;
+  top: 0;
+  left: 0;
   width: 100%;
-  color: $text;
-  .navbar-inner{
-    width: 960px;
-    height: 60px;
-    line-height: 60px;
-    margin:0 auto;
-    span.blogtitle {
-      font-family: 'Roboto Condensed', sans-serif;
-      font-size: 32px;
-      text-transform: uppercase;
-      color: $text;
-      letter-spacing: 0.03em;
-    }
-    span.backlink {
-      width: 60px;
-      height: 60px;
-      display: inline-block;
-      float: left;
-      margin-right: 10px;
-      @include addTransition(0.3);
-      a {
+  height: $height-alpha;
+  background-color: $color-alpha;
+  color: #fff;
+  z-index: 100;
+  overflow: visible;
+  .navbar-inner {
+    width: 100%;
+    max-width: 1000px;
+    margin: 0 auto;
+    padding: 0 20px;
+    line-height: $height-alpha;
+    font-size: $size-beta;
+    height: $height-alpha;
+    .buttons {
+      form.button_to {
         display: inline-block;
-        background: transparent image-url('ic_action_home.png') no-repeat scroll center center;
-        height: 60px;
-        width: 60px;
-      }
-      &:hover {
-        background-color: $btn;
       }
-    }
-    span.actionlink {
-      float: left;
-      display: inline-block;
-      font-size: 20px;
-      text-transform: uppercase;
-      margin-right: 20px;
-    }
-    span.buttons {
-      float: left;
-      display: inline-block;
-      line-height:60px;
-      padding-top:5px;
-      a, input {
-        display: inline-block;
-        background-color: $btn;
-        color: $text;
-        height: 35px;
-        margin-right: 15px;
-        line-height: 35px;
-        padding: 0px 15px;
+      a.btn, input.btn {
+        font-size: $size-beta;
+        border: 0 none;
+        color: #fff;
         text-transform: uppercase;
-        float:left;
-        &.btn-save-publish {
-          background: $orange;
+        padding: 0.5em 1em;
+        border-radius: 3px;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        font-family: $font-alpha;
+        &:hover {
+          background-color: lighten($color-alpha, 10%);
+        }
+        &.highlight {
+          background-color: $color-beta;
           &:hover {
-            background: lighten($orange, 15%);
+            background-color: lighten($color-beta, 10%);
           }
         }
-        &:hover {
-          background: lighten($btn, 15%);
-        }
-      }
-      form {
-        float:left;
-        display: inline-block;
-        height:40px;
       }
     }
-    span.logged-in-as {
-      font-size: 14px;
-      float: right;
-    }
-    span.logout {
-      float: right;
-      margin-left: 15px;
+  }
+  .submenu {
+    background-color: $color-alpha;
+    position: absolute;
+    top: $height-alpha;
+    left: 0;
+    width: 100%;
+    display: none;
+    .submenu-inner {
+      width: 100%;
+      max-width: 1000px;
+      margin: 0 auto;
+      padding: 0 20px 20px 20px;
+      ul {
+        list-style: none;
+        border-top: 1px solid $color-delta;
+        padding-top: 1em;
+        li {
+          font-size: $size-beta;
+          &+li {
+            // margin-top: 1em;
+          }
+          &.small {
+            font-size: $size-alpha;
+            padding: 0.5em 1em;
+          }
+        }
+        &+ul {
+          margin-top: 1em;
+        }
+      }
       a {
-        color: $text;
-        font-size: 14px;
-        font-family: 'Cabin', sans-serif;
+        color: #fff;
         text-transform: uppercase;
-        border-bottom: 1px solid #434343;
+        font-size: $size-beta;
+        display: block;
+        padding: 0.5em 1em;
         &:hover {
-          border-bottom: 1px solid $orange;
+          background-color: lighten($color-alpha, 10%);
         }
       }
     }
   }
 }
 
+.btn-menu {
+  float: right;
+  width: $height-alpha;
+  height: $height-alpha;
+  cursor: pointer;
+  position: relative;
+  .stripes {
+    position: absolute;
+    width: 18px;
+    height: 2px;
+    background-color: #fff;
+    top: 50%;
+    left: 50%;
+    transform: translate3d(-50%, -50%, 0) rotate(0deg);
+    transition: all 0.3s ease;
+    &:before, &:after {
+      content: "";
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      background-color: #fff;
+      transition: all 0.3s ease;
+    }
+    &:before {
+      transform: translateY(-250%) rotate(0deg);
+    }
+    &:after {
+      transform: translateY(250%) rotate(0deg);
+    }
+  }
+  &.active {
+    .stripes {
+      transform: translate3d(-50%, -50%, 0) rotate(90deg);
+      background-color: transparent;
+      &:before {
+        transform: translateY(0%) rotate(45deg);
+      }
+      &:after {
+        transform: translateY(0%) rotate(-45deg);
+      }
+    }
+  }
+  &:hover {
+    background-color: lighten($color-alpha, 10%);
+  }
+}
+
 .spacer {
-  height: 60px;
+  height: $height-alpha;
   width: 100%;
   position: relative;
   top: 0px;
   left: 0px;
-  margin-bottom: 50px;
+  margin-bottom: $gutter-gamma;
+}
+
+/*
+ * Markdown Cheatsheet
+ */
+.cheatsheet {
+  position: fixed;
+  display: none;
+  max-width: calc(960px - 4em);
+  width: calc(100% - 4em);
+  z-index: 50;
+  margin: 0 auto;
+  top: calc(56px + 2em);
+  left: 0;
+  right: 0;
+  bottom: 2em;
+  overflow: visible;
+  font-family: $font-beta;
+  .cheatsheet-close {
+    position: absolute;
+    z-index: 2;
+    width: 48px;
+    height: 48px;
+    text-align: center;
+    line-height: 48px;
+    border-radius: 3px;
+    background-color: $color-beta;
+    color: #fff;
+    font-size: 2rem;
+    cursor: pointer;
+    right: -24px;
+    top: -24px;
+    transition: all 0.3s ease;
+    &:hover {
+      background-color: lighten($color-beta, 10%);
+    }
+  }
+  .cheatsheet-inner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow-y: scroll;
+    background-color: #fff;
+    z-index: 1;
+    padding: 2em;
+    font-size: $size-beta;
+    h2 {
+      margin-top: 0;
+      font-family: $font-alpha;
+      font-size: $size-beta;
+      color: #9793a0;
+      text-transform: uppercase;
+      font-weight: 800;
+      margin-bottom: 22px;
+    }
+    p {
+      margin-bottom: $gutter-beta;
+    }
+    a {
+      border-bottom: 1px solid $color-gamma;
+      color: $color-alpha;
+      &:hover {
+        border-bottom-color: $color-beta;
+        color: $color-beta;
+      }
+    }
+    .formatting {
+      color: rgba(#000, 0.3);
+    }
+  }
+  .cheatsheet-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba($color-alpha, 0.8);
+    z-index: 0;
+  }
 }