lines-engine 0.6.2 → 0.9.0

data/app/assets/stylesheets/lines/admin/variables_and_mixins.scss

@@ -0,0 +1,36 @@
+/*
+ * Mixins
+ */
+@mixin clearfix() {
+  content: "";
+  clear: both;
+  display: table;
+}
+
+/*
+ * Imports
+ */
+@import url(//fonts.googleapis.com/css?family=Merriweather+Sans:400,800);
+@import url(/fira-mono/fira-mono.css); /* 300, 400, 600 */
+@import url(/iconfont/iconfont.css);
+
+/*
+ * Variables
+ */
+$font-alpha: 'Merriweather Sans', sans-serif;
+$font-beta: 'Fira Mono', monospace;
+
+$color-alpha: #100719; // blue/black
+$color-beta: #c10020; // red
+$color-gamma: #9793a0; // grey
+$color-delta: #403947; // dark grey
+
+$size-alpha: 1rem; // 16px
+$size-beta: 1.063rem; // 17px
+$size-gamma: 1.5rem; // 22em
+
+$gutter-alpha: 6px;
+$gutter-beta: 22px;
+$gutter-gamma: 80px;
+
+$height-alpha: 56px; // Navbar size

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

@@ -1,15 +1,3 @@
-/*
- * This is a manifest file that'll be compiled into application.css, which will include all the files
- * listed below.
- *
- * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
- * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
- *
- * You're free to add application-wide styles to this file and they'll appear at the top of the
- * compiled file, but it's generally better to create a new file per style scope.
- *
- */
-
 @import 'pygments.css';
 @import 'fonts';
 @import 'variables_and_mixins';
@@ -19,4 +7,5 @@
 @import 'pagination';
 @import 'footer';
 @import 'media_queries';
-@import 'lines_overrides';
+@import 'lines_overrides';
+@import 'messages';

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

@@ -2,7 +2,7 @@
   max-width: $max-width;
   font-family: $Merriweather;
   line-height: 1.5em;
-  color: #555;
+  color: $black;
 
 
   h1, h2, h3, h4, h5, h6 {
@@ -16,15 +16,11 @@
     & > * { padding: 0 13%; }
     & > blockquote { padding: 0 5%; }
     & > p img {
-      margin: 0 -10%;
-      max-width: 120%;
+      max-width: 100%;
+      margin: 3em auto;
     }
   }
 
-  .hero_image {
-    margin-top: 1.2em;
-  }
-
   .article_header {
     text-align: center;
     h1  {
@@ -48,6 +44,14 @@
     }
   }
 
+  .hero_image {
+    text-align: center;
+    a, img {
+      display: block;
+      margin: 0 auto;
+      text-align: center;
+    }
+  }
 
   .article_teaser {
     font-size: 1.375em;
@@ -55,8 +59,35 @@
     font-weight: 400;
   } 
 
+  .more-link {
+    display: block;
+    margin: 0 auto 2em auto;
+    text-align: center;
+    font-family: $SourceSansPro;
+    a {
+      margin: 0;
+      font-weight: 600;
+      display: inline-block;
+      text-transform: uppercase;
+      letter-spacing: 0.06em;
+      font-size: 1.25rem;
+      padding:5px 10px;
+      color: #4d4d4d;
+      display:block;
+      width:100%;
+      text-align:center;
+      &:hover { background-color: darken($white, 10%); }
+    }
+  }      
+
+
   .article_content {
-    line-height: 1.8em;
+    line-height: 1.9em;
+
+    a { 
+      border-bottom: 1px solid $grey;
+      &:hover { color: $red; border-bottom: 1px solid $red; }
+    }
 
     h1, h2, h3, h4, h5, h6 { margin-top: 1.8em; line-height: 120%; color: $black }
     h2, h3, h4, h5 { font-weight: 700; }
@@ -69,32 +100,86 @@
       color: $red; 
       margin-bottom: 1.0em; 
       a { color: $red; }
-      a:hover { color: $grey; }
+      a:hover { color: $black; border-bottom: 1px solid $black; }
     }
     h4 { font-size: 1.25em; text-transform: uppercase;  }
     h5 { font-size: 1.25em; }
-    h6 { font-size: 1.25em; color: $grey; }
+    h6 { 
+      font-size: 1.25em; color: $grey; 
+      a { color: $grey; }
+    }
 
     p { 
       font-size: 1.125em;
       display: block; 
-      a { color: $red; }
-      a:hover { color: $grey; }
+      a { color: $black; }
+      a:hover { color: $red; }
     }
   
-    a { 
-      border-bottom: 1px solid $grey;
-    }
 
     img { display: block; margin: 0 auto; }
 
     br { display: block; margin: 0; padding: 0;}
     
-    ul, ol { font-size: 1.125em; }
-    ul {
-      margin-left: 2em;
+    ul, ol {
+      list-style: none;
+      font-size: 1.125rem;
+      margin-left: 0;
       margin-right: 2em;
-      li { margin: 0.5em 0; }
+      li {
+        margin: 0.75em 0; padding-left: 1.5em;
+        line-height: 1.4em;
+        list-style-type: none;
+        position: relative;
+        &:before {
+          top: 0.03em;
+          left: 0;
+          content: '\2022 ';
+          color: $grey;
+          font-size: 2em;
+          position: absolute;
+        }
+      }
+    }
+
+    ol {
+      counter-reset: list;
+      li {
+        counter-increment: list;
+        &:before {
+          content: counter(list) ".";
+          position: absolute;
+          top: 0;
+          left: 0;
+          font-size: 1.125rem;
+          font-family: $SourceSansPro;
+          font-weight: 600;
+        }
+      }
+      ol {
+        counter-reset: sublist;
+        li {
+          counter-increment: sublist;
+          padding-left: 3rem;
+          &:before {
+            content: counter(list) "." counter(sublist) ".";
+          }
+        }
+      }
+    }
+
+    svg {
+      margin: 0 auto;
+      display: block;
+      max-width: 100%;
+    }
+
+    iframe {
+      width: auto;
+      max-width: 100%;
+      position: relative;
+      left: 50%;
+      transform: translateX(-50%);
     }
 
     blockquote {
@@ -103,8 +188,17 @@
       font-size: 1.5em;
       line-height: 1.5em;
       color:#999;
-      em:last-child { font-family: $MerriweatherSans; font-style: normal; font-size: 1.0rem; }
-      strong { font-weight: bold; }
+      text-align: center;
+      em { font-weight: 700;}
+      strong { font-weight: 900; }
+    }
+
+    blockquote strong:last-child, img + br + strong {
+      em { font-family: $SourceSansPro; font-style: normal; font-weight: normal; font-size: 1.0rem; color: $black; }
+    }
+
+    img + br + strong em {
+      display: block; text-align: center; margin-top: -3em;
     }
 
     pre {
@@ -114,59 +208,79 @@
       font-size: 1.25em;
       line-height: 140%;
       color: $grey;
-      padding: 20px 0;
+      padding: 0 20px;
     }
 
+    .highlight pre { font-size: 0.875em; }
+
     table {
       border: none;
       text-align: left;
-      margin: 40px 0;
+      margin: 40px 13%;
+      border-spacing: 0;
+      border-collapse: collapse;
       th, td {
         border: 1px solid $grey;
         font-family: $SourceSansPro;
         line-height: 120%;        
         font-size: 1.25em;
-        color: $grey;
-        text-transform: uppercase;
-        padding: 20px;
+        color: $black;
+        padding: 0.6em;
       }
-      th { font-weight: 700; }
+      th { text-transform: uppercase; font-weight: 600; }
       td { font-weight: 400; }
     }
 
-    .highlight pre { margin: auto 2em; font-size: 0.875em; }
+    .article_document {
+      a {
+        display: block;
+        text-align: center;
+        background-color: $black;
+        color: $white;
+        font-family: $SourceSansPro;
+        font-size: 1.25rem;
+        font-weight: 600;
+        line-height: 3rem;
+        &:hover { background-color: $red; }
+      }
+    }
   }
 
   .article_footer {
-    border-top: 1px solid #ccc;
-    border-bottom: 1px solid #ccc;
-    text-align: center;
-    color: #808080;
-    font-size: 0.8em;
-    a { color: $orange; }
-    a:hover { color: $darkgrey; }
+    margin: 4em 13%;
+    line-height: 130%;
+    font-family: $SourceSansPro;
+    color: $grey;
+    text-align: left;
+    a {
+      font-weight: 600;
+      &:hover { color: $black; }
+    }
   }
 
   .article_googleplus {
-    border-top: 1px solid #ccc;
-    padding: 1.1em;
-    min-height: 40px;
-    line-height: 40px;
     text-align: center;
+    font-family: $SourceSansPro;
+    margin-top: $gutter-gamma;
     a {
       margin: 0 auto;
       display: inline-block;
-      color: $lightgrey;
-      &:hover { color: $darkgrey; }
-    }
-    span {
-      background: url('/assets/ic_googleplus.png') 0px 0px no-repeat;
-      height: 40px;
-      width: 40px;
-      line-height: 40px;
-      display: inline-block;
-      float: left;
-      margin: 0 15px 0 0;
+      color: $black;
+      line-height: 32px;
+      font-size: 1.25rem;
+      &:before {
+        content: "";
+        display: inline-block;
+        margin-right: 10px;
+        float: left;
+        color: #fff;
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+        background: url('/assets/gplus.svg') $red center center no-repeat;
+        background-size: 80% auto;  
+      }
+      &:hover { color: lighten($grey, 10%); }
     }
   }
 
@@ -175,29 +289,11 @@
     max-width: 50%;
     float: left;
     .article_header {
-      h1 { font-size: 1.8em; }
+      h1 { font-size: 1.75rem; }
       h2 { display: none; }
     }
     .article_teaser {
       p { font-size: 1.0rem; line-height: 1.5em; }
-      .more-link {
-        display: block;
-        margin:40px auto 0 auto;
-        text-align: center;
-        a {
-          display: inline-block;
-          text-transform: uppercase;
-          letter-spacing: 0.06em;
-          font-size:0.8em;
-          background-color: #f4f4f4;
-          padding:5px 10px;
-          color: #4d4d4d;
-          display:block;
-          width:100%;
-          text-align:center;
-          &:hover { background-color: #e7e7e7; }
-        }
-      }      
     }
     .article_googleplus, .article_footer, .article_content { display:none; }
   }

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

@@ -1,4 +1,4 @@
-@import url(//fonts.googleapis.com/css?family=Merriweather:400,400italic,700);
+@import url(//fonts.googleapis.com/css?family=Merriweather:400,400italic,700,700italic,900,900italic);
 @import url(//fonts.googleapis.com/css?family=Merriweather+Sans:400,700);
 @import url(//fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,700italic,900);
-@import url(//fonts.googleapis.com/css?family=Fira+Mono:400,700&subset=latin,latin-ext);
+@import url(/fira-mono/fira-mono.css); /* 300, 400, 600 */

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

@@ -1,62 +1,16 @@
 footer, #footer {
-  background-color: #f4f4f4;
-  margin: 50px 0 0 0;
-  padding: 30px 0;
-
+  margin-top: 2em;
+  background-color: $black;
+  color: $white;
+  font-family: $SourceSansPro;
+  line-height: 120%;
   .container {
-    margin: 0 auto;
+    margin: 1.5em auto;
     max-width: $max-width;
-    color: #999;
-    font-size: 0.85em;
-    font-family: $Merriweather;
-    .row {
-      text-align: left;
-      width: 100%;
-      .two-cols {
-        padding: 0 20px;
-        width: 50%;
-        line-height:24px;
-        float: left;
-        &:first-child {
-          margin-right: 0;
-        }
-      }
-    }
-  }
-  
-  hr { background-color:#ccc; margin:40px 0px; }
-
-  h2, h2 a {
-    margin-top: 20px;
-    text-transform: uppercase;
-    font-family: $SourceSansPro;
-    font-size: 1.2em;
-    font-weight: 300;
-    letter-spacing: 0.03em;
-  }
-
-  span.label {
-    text-transform: uppercase;
-    font-size:13px;
-    color:#c0bfbf;
-  }
-
-  .weekday {
-    font-family: $SourceSansPro;
-    font-weight: 300;
-    color: $darkgrey;
-  }
-  
-  #copyright {
-    text-align:center;
-    padding:50px 0 10px 0;
-    font-size:13px;
-    text-transform:uppercase;
-    letter-spacing: 0.05em;
-    line-height:24px;
-    a {
-      color:#999; font-family: $Merriweather;
-      &:hover { color: $orange; }
+    p {
+      padding: 0.4em 13%;
+      a { color: $white; font-weight: 600; }
+      a:hover { color: lighten($red, 10%); text-decoration: underline;  }
     }
   }
 }