jeygeethanmedia-inkpen 1.2.6.1

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

@@ -0,0 +1,11 @@
+@import 'pygments.css';
+@import 'fonts';
+@import 'variables_and_mixins';
+@import 'navbar';
+@import 'general';
+@import 'article';
+@import 'pagination';
+@import 'footer';
+@import 'media_queries';
+@import 'lines_overrides';
+@import 'messages';

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

@@ -0,0 +1,302 @@
+@import 'variables_and_mixins';
+
+.article {
+  max-width: $max-width;
+  font-family: $Merriweather;
+  line-height: 1.5em;
+  color: $black;
+
+
+  h1, h2, h3, h4, h5, h6 {
+    font-family: $SourceSansPro;
+  }
+
+  .article_header, .article_teaser, .article_content {
+    margin: 0 auto;
+
+    * { margin: 1.1em auto;}
+    & > * { padding: 0 13%; }
+    & > blockquote { padding: 0 5%; }
+    & > p img {
+      max-width: 100%;
+      margin: 3em auto;
+    }
+  }
+
+  .article_header {
+    text-align: center;
+    h1  {
+      font-size: 3.0em;
+      font-weight: 900;
+      line-height: 120%;
+      color: $black;
+      a { color: $black; }
+      a:hover { color:$red; }        
+    }
+    h2 {
+      font-size: 1.5em;
+      font-weight: 400;
+      color: $grey;
+      line-height: 120%;
+    }
+    .author_name {
+      font-family: $MerriweatherSans;
+      font-size: 0.8em;
+      text-transform: uppercase;
+    }
+  }
+
+  .hero_image {
+    text-align: center;
+    a, img {
+      display: block;
+      margin: 0 auto;
+      text-align: center;
+    }
+  }
+
+  .article_teaser {
+    font-size: 1.375em;
+    line-height: 1.8em;
+    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.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; }
+    h6 { font-weight: 600; }
+
+    h1 { font-size: 2.5em; }
+    h2 { font-size: 2.0em;}
+    h3 { 
+      font-size: 1.5em;
+      color: $red; 
+      margin-bottom: 1.0em; 
+      a { color: $red; }
+      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; 
+      a { color: $grey; }
+    }
+
+    p { 
+      font-size: 1.125em;
+      display: block; 
+      a { color: $black; }
+      a:hover { color: $red; }
+    }
+  
+
+    img { display: block; margin: 0 auto; }
+
+    br { display: block; margin: 0; padding: 0;}
+    
+    ul, ol {
+      list-style: none;
+      font-size: 1.125rem;
+      margin-left: 0;
+      margin-right: 2em;
+      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 {
+      font-family: $Merriweather;
+      font-style: italic;
+      font-size: 1.5em;
+      line-height: 1.5em;
+      color:#999;
+      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 {
+      border-left: 2px solid $grey;
+      font-family: $Monospace;
+      font-weight: 400;
+      font-size: 1.25em;
+      line-height: 140%;
+      color: $grey;
+      padding: 0 20px;
+    }
+
+    .highlight pre { font-size: 0.875em; }
+
+    table {
+      border: none;
+      text-align: left;
+      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: $black;
+        padding: 0.6em;
+      }
+      th { text-transform: uppercase; font-weight: 600; }
+      td { font-weight: 400; }
+    }
+
+    .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 {
+    margin: 4em 13%;
+    line-height: 130%;
+    font-family: $SourceSansPro;
+    color: $grey;
+    text-align: left;
+    a {
+      font-weight: 600;
+      &:hover { color: $black; }
+    }
+  }
+
+  .article_googleplus {
+    text-align: center;
+    font-family: $SourceSansPro;
+    margin-top: $gutter-gamma;
+    a {
+      margin: 0 auto;
+      display: inline-block;
+      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%); }
+    }
+  }
+
+
+  &.small {
+    max-width: 50%;
+    float: left;
+    .article_header {
+      h1 { font-size: 1.75rem; }
+      h2 { display: none; }
+    }
+    .article_teaser {
+      p { font-size: 1.0rem; line-height: 1.5em; }
+    }
+    .article_googleplus, .article_footer, .article_content { display:none; }
+  }
+}

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

@@ -0,0 +1,4 @@
+@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(/fira-mono/fira-mono.css); /* 300, 400, 600 */

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

@@ -0,0 +1,18 @@
+@import 'variables_and_mixins';
+
+footer, #footer {
+  margin-top: 2em;
+  background-color: $black;
+  color: $white;
+  font-family: $SourceSansPro;
+  line-height: 120%;
+  .container {
+    margin: 1.5em auto;
+    max-width: $max-width;
+    p {
+      padding: 0.4em 13%;
+      a { color: $white; font-weight: 600; }
+      a:hover { color: lighten($red, 10%); text-decoration: underline;  }
+    }
+  }
+}

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

@@ -0,0 +1,90 @@
+@import 'variables_and_mixins';
+
+* {
+  margin: 0; padding: 0; 
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+html, body { font-size: 16px }
+
+body {
+  height: 100%; background-color: #fff;
+  &.no-scroll {
+    overflow: hidden;
+  }
+}
+
+img, div { border: 0; display: block; }
+
+div, header, footer { display: block; overflow: hidden; }
+
+img {
+  max-width: 100%;
+  height: auto;
+  width: auto\9; /* ie8 */
+}
+
+a {
+  text-decoration: none;
+  color: $darkgrey;
+  @include addTransition(0.3);
+  &:hover { color: $orange; }
+}
+
+i, em { font-style: italic; }
+strong, b { font-weight: bold; }
+
+ul li { list-style-position: outside; }
+
+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 {
+    zoom:1; /* For IE 6/7 (trigger hasLayout) */
+    &:before, &:after { content: ""; display: table; }
+    &:after { clear: both; }
+}
+
+div.rss { display:none; }
+
+/*--------------------------------------------------------*/
+/*------------------------  HEADER  ----------------------*/
+/*--------------------------------------------------------*/
+
+#topbar {
+  color: #fff;
+  font-size: 12px;
+  padding: 2px 0;
+  background-color: #000;
+  div { max-width: $max-width; margin: 0 auto; }
+  .right { float: right; }
+  a { color: #aaa; }
+}
+
+header {
+  margin: 0 auto;
+  max-width: $max-width;
+  padding: 1.1em 0;
+  font-family: $SourceSansPro;
+  font-weight: 500;
+  font-size: 1.250em;
+  a {
+    color: #000;
+    &:hover { color: $orange; }
+  }
+  #logo { float: left; text-transform: uppercase; font-weight: 600; }
+  #lines { float: right; }
+}
+
+.container {
+  position: relative;
+  max-width: $max-width;
+  margin: 0 auto;
+}