superwriter 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 79c3756d13d32db305f934d6cfce898db6a84408
+  data.tar.gz: a946582b8cfd38ed66cc317fa044edbb6ace36bb
+SHA512:
+  metadata.gz: b60dd956d9fc108fcbe609e67747fb23ef5ffa02afa6e82a0d070fa7ed32f98ec76bacdd9b636bde40e712aae4e06b93b8a0f3e6f3353db945afe458abe717e3
+  data.tar.gz: 96289ba239895764ecf32d1751fe9232e73553c6c24c4803f4109aabbf20be77a1c7f7857bb349daef7c7b0111104f297383d7603b0e9292d56b66b2890f14ac

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,88 @@
+# Superwriter Jekyll Theme
+
+Superwriter is a minimalistic theme for bloggers with post hero image and well thought typography.
+
+## Installation
+
+Add this line to your Jekyll site's Gemfile:
+
+```ruby
+gem "superwriter"
+```
+
+And add this line to your Jekyll site's `_config.yml`:
+
+```yaml
+theme: superwriter
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install superwriter
+
+## Configurable variables
+
+### General
+
+```
+title:
+description:
+favicon:
+
+header:
+  logo-img:
+  title-img:
+  subtitle:
+
+footer:
+  script-note:
+
+url:
+baseurl:
+```
+### Localization
+
+```
+localization:
+  read-more: "Read more"
+  see-all-posts: "See all posts"
+```
+
+### Landing page
+
+```
+landing: index
+post-per-page: 10
+```
+
+### Social and Analytics
+
+```
+facebook.app_id:
+facebook.image:
+google_analytics:
+```
+
+## Data files
+
+Top menu and footer secondary menu links are defined in the ```_data``` folder. Use the ```menu.yml``` and ```footer.yml``` files, respectively.
+
+## TODO
+
+- Read more footer based on yalm header. Use something like:
+```{{ site.components | where:"title" : "Button" }}```
+- Upcoming events footer
+- Define categories
+- Hero image caption for credits
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/ruvido/superwriter. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
+
+## License
+
+The theme is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).

data/_includes/facebook_opengraph.html

@@ -0,0 +1,23 @@
+<!-- Facebook OpenGraph tags -->
+<meta property="fb:app_id" content="{{ site.facebook.app_id }}" />
+
+{% if page.title %}
+<meta property="og:title" content="{{ page.title }}" />
+{% else %}
+<meta property="og:title" content="{{ site.title }}" />
+{% endif %}
+
+{% if page.summary %}
+<meta property="og:description" content="{{ page.summary }}">
+{% else %}
+<meta property="og:description" content="{{ site.description }}">
+{% endif %}
+
+<meta property="og:type" content="website" />
+<meta property="og:url"  content="{{ page.url | replace:'index.html','' | absolute_url }}" />
+
+{% if page.image %}
+<meta property="og:image" content="{{ page.image }}" />
+{% elsif site.facebook.image %}
+<meta property="og:image" content="{{ site.url }}{{ site.facebook.image }}" />
+{% endif %}

data/_includes/google_analytics.html

@@ -0,0 +1,8 @@
+<script>
+  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+  ga('create', '{{ site.google_analytics }}', 'auto');
+  ga('send', 'pageview');
+</script>

data/_includes/head.html

@@ -0,0 +1,20 @@
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/png"  href="{{site.baseurl}}/{{site.favicon}}">
+
+  <title>{% if page.title %}{{ page.title | append: ' | ' | append: site.title | escape }}{% else %}{{ site.title | append: ' | ' | append: site.subtitle  | escape }}{% endif %}</title>
+  <meta name="description" content="{{ page.excerpt | default: site.description | strip_html | normalize_whitespace | truncate: 160 | escape }}">
+
+  <link rel="stylesheet" href="{{ "{{site.baseurl}}/assets/css/style.css" | relative_url }}">
+  <link rel="canonical" href="{{ page.url | replace:'index.html','' | absolute_url }}">
+
+<!-- Font awesome -->
+<!-- to be optimized with http://fontello.com/ -->
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+
+  {% include facebook_opengraph.html %}
+  {% include google_analytics.html %}
+
+</head>

data/_layouts/archive.html

@@ -0,0 +1,34 @@
+---
+layout: default
+---
+
+<section class="index">
+
+{% for post in site.posts  %}
+    {% capture this_year %}{{ post.date | date: "%Y" }}{% endcapture %}
+    {% capture next_year %}{{ post.previous.date | date: "%Y" }}{% endcapture %}
+
+    {% if forloop.first %}
+    <time class="catchy-headline">{{this_year}}</time>
+    <ul>
+    {% endif %}
+
+    <li>
+      <time class="hide-in-mobile details">{{post.date | date: "%b %d"}}</time>
+      <h2 class="small inline catchy-headline shift-right">
+        <a href="{{site.baseurl}}{{post.url}}">{{ post.title }} <i class="light-gray fa fa-chevron-right" aria-hidden="true"></i></a>
+      </h2>
+    </li>
+
+    {% if forloop.last %}
+    </ul>
+    {% else %}
+        {% if this_year != next_year %}
+        </ul>
+        <time class="catchy-headline">{{next_year}}</time>
+        <ul>
+        {% endif %}
+    {% endif %}
+{% endfor %}
+
+</section>

data/_layouts/default.html

@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="{{ page.lang | default: site.lang | default: "en" }}">
+
+  {% include head.html %}
+
+  <body>
+
+    <header>
+      <a href="{{site.baseurl}}/">
+        <img class="logo-image" alt="{{site.title}} logo" src="{{site.baseurl}}/{{site.header.logo-img}}">
+        <img class="main-header-title" alt="{{site.title}}" src="{{site.baseurl}}/{{site.header.title-img}}">
+        <h1 class="hidden">{{site.title}}</h1>
+        <h2>{{site.header.subtitle}}</h2>
+      </a>
+    </header>
+
+    <nav>
+      {% for item in site.data.menu %}
+        <a class="{% cycle 'color-1', 'color-2', 'color-3', 'color-4' %}" href="{{site.baseurl}}/{{item.url}}">
+          {{item.name}}</a>
+      {% endfor %}
+    </nav>
+
+
+    <main>
+      {{ content }}
+    </main>
+
+    <!-- <section class="see-all-posts" >
+      <a href="{{site.archive}}">See all posts <i class="fa fa-chevron-right" aria-hidden="true"></i></a>
+    </section> -->
+
+    <section class="meaningful-block">
+      <a class="big follow-up" href="{{site.baseurl}}/{{site.archive}}">{{site.localization.see-all-posts}} <i class="fa fa-chevron-right" aria-hidden="true"></i></a>
+    </section>
+
+    <footer>
+
+      <nav class="footer-menu" >
+        {% for item in site.data.footer %}
+          {% if item.url contains "http" %}
+            <a href="{{item.url}}">{{item.name}}</a>
+          {% else %}
+            <a href="{{site.baseurl}}/{{item.url}}">{{item.name}}</a>
+          {% endif %}
+        {% endfor %}
+      </nav>
+
+      <section class="footer-script-note">
+        {{ site.footer.script-note }}
+      </section>
+
+    </footer>
+
+  </body>
+
+</html>

data/_layouts/index.html

@@ -0,0 +1,38 @@
+---
+layout: default
+---
+
+<!-- ====================================== -->
+{% if site.landing == "index" %}
+
+<section class="index">
+  {% for post in site.posts limit:site.post-per-page %}
+    <h2 class="catchy-headline">
+    <a href="{{site.baseurl}}{{post.url}}">{{ post.title }}</a></h2>
+
+    <section class="small details block">
+      by <a href="{{site.baseurl}}/about">{{post.author | capitalize}}</a>,
+      <time>{{post.date | date: "%b %d %Y"}}</time>
+    </section>
+
+    <section class="small summary">{{post.summary | truncatewords: 20}}</section>
+
+    <a class="small follow-up block" href="{{site.baseurl}}{{post.url}}">
+      {{site.localization.read-more}} <i class="fa fa-chevron-right" aria-hidden="true"></i>
+    </a>
+
+  {% endfor %}
+</section>
+
+
+  <!-- ====================================== -->
+  {% elsif site.landing == "single" %}
+
+  This is the last post
+
+  <!-- ====================================== -->
+  {% elsif site.landing == "page" %}
+
+  This is a page
+
+  {% endif %}

data/_layouts/not-found.html

@@ -0,0 +1,6 @@
+---
+layout: default
+---
+
+<div class="very huge catchy-headline">Oooops!</div>
+<div class="details">Sorry, this page does not exist</div>

data/_layouts/post.html

@@ -0,0 +1,58 @@
+---
+layout: default
+---
+
+
+{% if page.image %}
+<figure>
+  <img alt="{{page.title}}" src="{{site.baseurl}}{{page.image}}" />
+  <figcaption>{{page.caption}}</figcaption>
+</figure>
+{% endif %}
+
+<header>
+
+  <h1>{{ page.title }}</h1>
+
+  {% if page.author %}
+  <section class="author">
+    by <a href="{{site.baseurl}}/about">{{page.author | capitalize}}</a>,
+    <time datetime="{{page.date}}">{{page.date | date: "%B %d %Y"}}</time>
+  </section>
+  {% endif %}
+
+  {% if page.summary %}
+  <section class="summary">{{ page.summary }}</section>
+  {% endif %}
+
+</header>
+
+<article>
+
+  {{ content }}
+
+  <figure class="page-end-logo">
+    <img alt="{{site.title}}" src="{{site.baseurl}}/{{site.header.logo-img}}" />
+  </figure>
+
+</article>
+
+  <!-- TODO -->
+
+  {% if site.upcoming-events %}
+  <section class="upcoming-events">
+    <header>Upcoming events</header>
+    {% for event in site.events %}
+      <h2>{{event.title}}</h2>
+    {% endfor %}
+  </section>
+  {% endif %}
+
+  {% if page.read-more %}
+  <section class="read-more">
+    <header>Read more</header>
+    {% for post in site.posts %}
+      <h2>{{post.title}}</h2>
+    {% endfor %}
+  </section>
+  {% endif %}

data/_sass/layout.scss

@@ -0,0 +1,334 @@
+html {height: 100%;}
+
+// flex to have a sticky footer
+body {min-height: 100%; display: flex; flex-direction: column;}
+main {flex: 1;}
+
+// PLACEHOLDERS
+%margin-0-auto {margin: 0 auto; display: block;}
+%wrapper {padding: 0 $bigger-font-size; max-width: $tablet; text-align: left;}
+%uppercase {text-transform: uppercase; letter-spacing: 0.2rem; margin-top: $script-font-size;}
+%hidden {visibility: hidden;height: 0px;}
+
+// EXTENDS
+.wrapper {@extend %wrapper;}
+.hidden {@extend %hidden;}
+
+h1 {@extend .header-font;}
+
+
+body {
+
+  // HEADER
+  header {
+    @extend %margin-0-auto;
+    margin-top: 1.5*$huge-font-size;
+    img {@extend %margin-0-auto;}
+    h2 { font-size: $small-font-size; @extend .light-font; @extend %uppercase; text-align: center;}
+    .logo-image {width: $huge-font-size*1.3;}
+    .main-header-title { width: $huge-font-size*6; margin-top: $regular-font-size;}
+    @media (min-width: $tablet) {
+      .logo-image {width: $huge-font-size*1.8;}
+      .main-header-title { width: $huge-font-size*8;}
+      h2 { font-size: $regular-font-size;}
+    }
+    @media (min-width: $desktop) {
+      margin-top: 2.5*$huge-font-size;
+    }
+  }
+
+  // NAVIGATION BAR
+  nav{
+    @extend %margin-0-auto;
+    margin-top: $big-font-size;
+    a {
+      display: inline-block;
+      // @extend .summary-font;
+      font-weight: bold;
+      font-size: $script-font-size;
+      width: $bigger-font-size*2.0;
+      text-align: center;
+      padding: $script-font-size $script-font-size/3.0;
+      border-radius: 0.8rem;
+      color: white;
+      border: 0px;
+      margin: $script-font-size/3.0;
+      @media (min-width: $tablet) {
+        margin: $mid-font-size;
+        font-size: $small-font-size;
+        width: $bigger-font-size*3.0;
+      }
+      @media (min-width: $desktop) {
+        margin-top: $big-font-size;
+        font-size: $regular-font-size;
+        width: $bigger-font-size*3.0;
+      }
+    }
+  }
+
+  // MAIN
+  main {
+
+    @extend %margin-0-auto;
+    margin-top: $big-font-size;
+
+    figure {
+      img {width: 100%; max-width: $tablet*1.5; @extend %margin-0-auto;}
+    }
+
+    header {
+      @extend %wrapper;
+      margin-top: 0;
+      h1 {
+        margin-top: $mid-font-size;
+        font-size: $bigger-font-size;
+        @media (min-width: $tablet) {
+          margin-top: $huge-font-size;
+          font-size: $huge-font-size;
+        }
+      }
+      .author {
+        @extend .light-font;
+        padding-top: $script-font-size;
+        font-size: $small-font-size;
+        a {border: 0px; color: $brand-blue;}
+        @media (min-width: $tablet) {
+          font-size: $regular-font-size;
+        }
+      }
+      // .summary {
+      //   // @extend .summary-font;
+      //   margin-top: $regular-font-size;
+      //   color: $light-gray;
+      //   font-weight: bold;
+      //   font-size: $mid-font-size;
+      //   line-height: 1.4;
+      //   @media (min-width: $tablet) {
+      //     font-size: $big-font-size;
+      //     line-height: 1.6;
+      //   }
+      // }
+    }
+    article {
+      @extend %margin-0-auto;
+      @extend %wrapper;
+      h2 {
+        @extend .header-font;
+        font-size: $mid-font-size;
+        padding-top: $mid-font-size;
+        line-height: 1.4;
+        @media (min-width: $tablet) {
+          font-size: $big-font-size;
+        }
+      }
+      p{
+        font-size: $regular-font-size;
+        line-height: 1.6;
+        @media (min-width: $tablet) {
+          line-height: 1.8;
+        }
+      }
+      ul {
+        li {
+          position: relative;
+// background: #88b7d5;
+          border-radius: 10px;
+          margin: $small-font-size 0;//$huge-font-size;
+          padding: 0 $regular-font-size;
+          line-height: 1.6;
+          // font-size: $regular-font-size*0.9;
+        }
+        li:nth-child(odd) {
+          // text-align: left;
+          // margin-left: 0;
+          // background-color: #ecf0f1;
+        }
+        li:nth-child(even) {
+          font-style: italic;
+          // text-align: right;
+          // margin-right: 0;
+          // background: $light-gray;
+        }
+        li:before{
+          content: '\2013';
+          padding-right: 0.3rem;
+          // content: '\00ab';
+        }
+        li:after{
+          // content: '\00bb';
+        }
+        // li:after{
+        //   left: 100%;
+        // 	top: 50%;
+        // 	border: solid transparent;
+        // 	content: " ";
+        // 	height: 0;
+        // 	width: 0;
+        // 	position: absolute;
+        // 	pointer-events: none;
+        // 	// border-color: rgba(136, 183, 213, 0);
+        // 	border-left-color: #ecf0f1;
+        // 	border-width: 10px;
+        // 	margin-top: -10px;
+        // }
+      }
+      .page-end-logo {
+        margin: 0 auto;
+        padding: $regular-font-size 0 0 0;
+        width: $bigger-font-size;
+        img {
+          max-width: 100%;
+        }
+      }
+    }
+  } //MAIN close
+
+  // .see-all-posts {
+  //   padding-top: $huge-font-size;
+  //   padding-bottom: $script-font-size/2;
+  //   width:100%;
+  //   a {
+  //     display: block;
+  //     @extend .summary-font;
+  //     @extend %margin-0-auto;
+  //     @extend %wrapper;
+  //     font-size: $big-font-size;
+  //     color: $light-gray;
+  //     border: 0px;
+  //     text-transform: uppercase;
+  //     @media (min-width: $tablet) {
+  //       font-size: $bigger-font-size;
+  //     }
+  //   }
+  // }
+
+  footer {
+    background-color: $opaque-red;
+    color: white;
+    padding-bottom: $mid-font-size;
+    nav.footer-menu {
+      padding-top: $mid-font-size;
+      padding-bottom: $big-font-size;
+      @extend %wrapper;
+      a {
+        width: 100%;
+        font-size: $mid-font-size;
+        text-align: left;
+        display: block;
+        padding: 0;
+        margin: 0;
+        line-height: 1.8;
+        @extend .header-font;
+        @media  (min-width: $tablet) {
+          font-size: $big-font-size;
+        }
+      }
+    }
+    .footer-script-note {
+      @extend %wrapper;
+      @extend %margin-0-auto;
+      font-size: $script-font-size;
+      text-align: center;
+      line-height: 1.5;
+      a {
+        color: white;
+        border-bottom: 1px solid white;
+      }
+    }
+  } //FOOTER close
+} // BODY close
+
+
+
+.index {padding-bottom: $huge-font-size; @extend %wrapper;}
+
+.hide-in-mobile {
+  display: none !important;
+  @media (min-width: $tablet) {
+    display: inline-block !important;
+  }
+}
+
+.catchy-headline {
+  display: block;
+  @extend .header-font;
+  font-size: $mid-font-size;
+  padding-top: $mid-font-size;
+  line-height: 1.4;
+  &.small {font-size: $regular-font-size; padding-top: $regular-font-size;}
+  a {border: 0px;}
+  @media (min-width: $tablet) {
+    font-size: $big-font-size;
+    &.small {font-size: $mid-font-size; padding-top: $mid-font-size;}
+  }
+}
+
+.details {
+  margin-top: $script-font-size;
+  display: inline-block;
+  @extend .light-font;
+  font-size: $regular-font-size;
+  &.small {font-size: $small-font-size;}
+  // &.block { display: block;}
+  a {color: $brand-blue; border: 0px;}
+  @media (min-width: $tablet) {
+    font-size: $mid-font-size;
+  }
+}
+
+.summary {
+  margin-top: $regular-font-size;
+  color: $light-gray;
+  font-weight: bold;
+  font-size: $mid-font-size;
+  line-height: 1.4;
+  &.small {font-size: $regular-font-size; margin-top: $script-font-size;}
+  @media (min-width: $tablet) {
+    font-size: $big-font-size;
+    line-height: 1.6;
+  }
+}
+
+.follow-up {
+  // @extend .summary-font;
+  text-transform: uppercase;
+  font-weight: bold;
+  color: $light-gray;
+  border: 0px;
+  margin-top: $script-font-size;
+}
+
+.meaningful-block{
+  padding-top: $huge-font-size;
+  padding-bottom: $script-font-size/2;
+  width:100%;
+  a {
+    display: block;
+    // @extend .summary-font;
+    @extend %margin-0-auto;
+    @extend %wrapper;
+    // font-size: $big-font-size;
+    // color: $light-gray;
+    // border: 0px;
+  }
+}
+
+.shift-right {padding-left: $regular-font-size;}
+.block {display: block;}
+.inline {display: inline-block;}
+
+.big {
+  font-size: $big-font-size;
+  @media (min-width: $tablet) {
+    font-size: $bigger-font-size;
+  }
+}
+.huge {
+  font-size: $huge-font-size;
+  &.very {
+    font-size: 1.5*$huge-font-size;
+    @media (min-width: $tablet) {
+      font-size: 2.2*$huge-font-size;
+    }
+  }
+}

data/_sass/palettes.scss

@@ -0,0 +1,28 @@
+// Very cool color palettes
+
+$dark-black:   #303030;
+$light-gray:   #D1D5D8;
+$mid-gray:     #666666;
+$brand-blue:   #3498DB;
+$acid-blue:    #19B5FE;
+$vivid-yellow: #F1C40F;
+$opaque-red:   #E74C3C;
+$marine-green: #1ABC9C;
+
+// Menu colors
+.color-1 {background-color: $marine-green;}
+.color-2 {background-color: $opaque-red;}
+.color-3 {background-color: $vivid-yellow;}
+.color-4 {background-color: $brand-blue;}
+
+a {color: $dark-black;}
+a.dark-link {color: $dark-black;}
+a.color-link {color: $brand-blue;}
+
+// $dark-black:   #303030;
+.light-gray, .light-gray a {color: $light-gray;}
+// $mid-gray:     #666666;
+// $brand-blue:   #3498DB;
+// $vivid-yellow: #F1C40F;
+// $opaque-red:   #E74C3C;
+// $marine-green: #1ABC9C;

data/_sass/reset.scss

@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}

data/_sass/typography.scss

@@ -0,0 +1,179 @@
+//--------------------------------------------------
+// FONT SIZES
+//--------------------------------------------------
+
+// http://type-scale.com/
+// 1.618 Golden Ratio
+
+// $script-font-size:  0.618rem;
+// $min-font-size:     0.8rem;   // Major third
+// $regular-font-size: 1rem;
+// $maj-font-size:     1.250rem; // Major third
+// $mid-font-size:     1.414rem; // Augmented fourth
+// $big-font-size:     1.618rem;
+// $bigger-font-size:  2.618rem;
+
+// http://type-scale.com/
+// 1.250 Major third scale
+
+$script-font-size:  0.640rem;
+$small-font-size:   0.800rem;
+$regular-font-size: 1.000rem;
+$mid-font-size:     1.250rem;
+$big-font-size:     1.563rem;
+$bigger-font-size:  1.953rem;
+$huge-font-size:    2.441rem;
+
+//--------------------------------------------------
+// FONT TYPES
+//--------------------------------------------------
+
+@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700');
+.text-font {
+  font-family: 'Open Sans', sans-serif;
+}
+
+@import url('https://fonts.googleapis.com/css?family=Raleway:900');
+.header-font{
+  font-family: 'Raleway', sans-serif;
+  font-weight: 900;
+}
+
+// @import url('https://fonts.googleapis.com/css?family=Raleway:700,700i');
+// .summary-font{
+//   font-family: 'Raleway', sans-serif;
+//   font-weight: 700;
+// }
+
+@import url('https://fonts.googleapis.com/css?family=Raleway:400');
+.light-font{
+  font-family: 'Raleway', sans-serif;
+  font-weight: 400;
+}
+
+//--------------------------------------------------
+// DEFAULTS
+//--------------------------------------------------
+
+body, h1, h2, h3, h4, h5, h6, .author {
+  font-size-adjust: 0.5;
+}
+
+body {
+  font-size: 100%;
+  @extend .text-font;
+  color: $dark-black;
+}
+
+strong, .bold { font-weight: bold;  }
+em { font-style: italic; }
+small { font-size: $script-font-size;}
+
+a {
+  color: $dark-black;
+  text-decoration: none;
+  border-bottom: 1px solid $acid-blue;
+  // border-bottom: 1px solid #7f8c8d;
+}
+
+a.no-decoration {
+  text-decoration: none;
+  border-bottom: 0px;
+}
+
+// h1, .post-index h2 {
+//   @extend .header-font;
+//   font-size: $bigger-font-size;
+//   padding-top: 0;
+// }
+// h2 {
+//   @extend .header-font;
+//   font-size: $big-font-size;
+//   padding-top: $big-font-size;
+// }
+// h3 {
+//   @extend .header-font;
+//   font-size: $big-font-size;
+//   padding-top: $big-font-size;
+// }
+//
+// h4, .page-summary h3 {
+//   @extend .summary-font;
+//   font-size: $mid-font-size;
+//   padding-top: $mid-font-size;
+// }
+// h5 {
+//   @extend .summary-font;
+//   font-size: $regular-font-size;
+//   padding-top: $regular-font-size;
+// }
+
+.page-text, .page-header {
+  h1 {
+    @extend .header-font;
+    font-size: $bigger-font-size;
+    padding-top: 0;
+  }
+  h2 {
+    @extend .header-font;
+    font-size: $big-font-size;
+    padding-top: $big-font-size;
+  }
+  h3 {
+    @extend .header-font;
+    font-size: $big-font-size;
+    padding-top: $big-font-size;
+  }
+
+  h4, .page-summary h3 {
+    // @extend .summary-font;
+    font-size: $mid-font-size;
+    padding-top: $mid-font-size;
+  }
+  h5 {
+    // @extend .summary-font;
+    font-size: $regular-font-size;
+    padding-top: $regular-font-size;
+  }
+}
+.index {
+  .title{
+    a {border: 0px;}
+    h2 {font-size: $mid-font-size; padding: $script-font-size 0 0 0;}
+  }
+  .author{
+    font-size: $regular-font-size; padding: $script-font-size 0 0 0;
+  }
+  .summary{
+    h3 {font-size: $mid-font-size; padding: $script-font-size 0 0 0;}
+  }
+}
+
+blockquote {
+  p {
+    // @extend .summary-font;
+    font-weight: bold;
+    margin: $script-font-size 0;
+    padding-left: $regular-font-size;
+    font-size: $mid-font-size;
+    border-left: $script-font-size solid $light-gray;
+  }
+  cite{
+    font-size: $regular-font-size;
+    color: $light-gray;
+  }
+  cite:before{content:"\2014"; padding-right: 0.2rem;}
+}
+
+p {
+  padding: $script-font-size 0rem;
+  line-height: strip-unit($big-font-size);
+  text-align: left;
+}
+
+.responsive-font-size {
+  font-size: $regular-font-size;
+  @media (min-width: $tablet) {
+    font-size: $mid-font-size;
+  }
+}

data/assets/css/style.scss

@@ -0,0 +1,20 @@
+---
+# Superwriter stylesheet for Jekyll.
+---
+// Global variables
+$tablet: 600px;
+$desktop: 1024px;
+
+// Functions
+@function strip-unit($number) {
+  @if type-of($number) == 'number' and not unitless($number) {
+    @return $number / ($number * 0 + 1);
+  }
+  @return $number;
+}
+
+// Imports
+@import "reset";
+@import "palettes";
+@import "typography";
+@import "layout";

metadata

@@ -0,0 +1,104 @@
+--- !ruby/object:Gem::Specification
+name: superwriter
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Francesco Rao
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2016-12-16 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: jekyll
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '3.3'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '3.3'
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '1.12'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '1.12'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: 0.9.6
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: 0.9.6
+description: 
+email:
+- ruvido@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- LICENSE.txt
+- README.md
+- _includes/facebook_opengraph.html
+- _includes/google_analytics.html
+- _includes/head.html
+- _layouts/archive.html
+- _layouts/default.html
+- _layouts/index.html
+- _layouts/not-found.html
+- _layouts/post.html
+- _sass/layout.scss
+- _sass/old-layout.scss
+- _sass/palettes.scss
+- _sass/reset.scss
+- _sass/typography.scss
+- assets/css/style.scss
+- "assets/js/Icon\r"
+homepage: https://github.com/ruvido/superwriter
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.0.14.1
+signing_key: 
+specification_version: 4
+summary: Superwriter is a minimalistic Jekyll theme for bloggers with post hero image
+  and well thought typography.
+test_files: []