really-simple 0.2.1 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 8f5757d0a4636f35f1753fba7354f027f3e9fe0d
-  data.tar.gz: 50ae926db80905fc165754ef842443715582210a
+  metadata.gz: 637a119baafca5676209954dd486bf133f237921
+  data.tar.gz: 333cb92694dfdd48bd86938b8094f1ff850ee645
 SHA512:
-  metadata.gz: cd621ee806ed5889de77fe9707f760231da1b67171e1b32892517d4c48553127f770dc3bf892293b77791f0cc45293b4f1262f663913a4d53bf084de39f2a2df
-  data.tar.gz: 9d6f2b5df3bbb27a66b3ca701df5ce2fd0a831285be97d46aa5d64bca9708f38b8d5e96123104768ff87afe6097c5185cde91472de9ce8ee472101585a5a875f
+  metadata.gz: 4693aa6adf9015dd9b1c34f308e7335b413084545abb190bf03944753d9d5c949e5648195ba68fece54309d1b6975430200a4bc1b0f8c475eead92fe5256b60c
+  data.tar.gz: 0b29f909c9bc754e2c689eca60833b68c497b7cc00e482f4f8cbfe4766a16c95fc81b0cd15388fbdeca994591f70b62a7ab181edc1e9428f94585d375a835717

data/README.md

@@ -1,19 +1,15 @@
 [![CircleCI](https://circleci.com/gh/jusx/really-simple/tree/master.svg?style=shield)](https://circleci.com/gh/jusx/really-simple/tree/master)
 [![Gem Version](https://badge.fury.io/rb/really-simple.svg)](https://badge.fury.io/rb/really-simple)
 
-# Really Simple.
+# Really Simple
 
-Really Simple is a really simple [Jekyll](https://jekyllrb.com) theme. It is barebones and is meant to get a site with blogging up very quickly. The Really Simple design is basic yet esthetically pleasing. In other words it's good enough for an MVP.
+Really Simple is a really simple [Jekyll](https://jekyllrb.com) theme. It is barebones and is meant to get a blogging site up very quickly. The Really Simple design is basic yet aesthetically pleasing. In other words it's good enough for an MVP allowing the author to quickly publish content without worrying about the details.
 
-There are no bells and no whistles. Those can be added later -- when the author is ready.
+![Screenshot of customized colors](screenshot.png)
 
-## The Story
+There are no bells and no whistles. Those can be added later -- when the author is ready.
 
-I had been struggling to find a a really simple Jekyll theme that supported blogging out of the box. It was either esthetically not pleasing to me or that it had too many bells and whistles forcing me to think about things I did not wish to have to think about immediately. I just wanted to launch.
-
-While flying from Los Angeles (LAX) to San Diego (SAN) our flight was refused landing due to fog. We had to turn back to LAX. After landing back in LAX, Delta booked a bus to drive us to SAN instead. It was late, I couldn't sleep. I was inspired to create and I had time to burn.
-
-So, I hacked this together during the two hour bus ride.
+Preview the theme to [see what it looks like](https://jusx.github.io/really-simple/).
 
 ## Usage
 This Really Simple Jekyll theme is a gem.
@@ -24,11 +20,10 @@ In your `Gemfile` add the line:
  gem 'really-simple'
 ```
 
-In your `_config.yml` file specify the theme and title:
+In your `_config.yml` file specify the theme:
 
 ```yml
 theme: really-simple
-title: Your Title
 ```
 
 And then execute:
@@ -47,14 +42,68 @@ Any content in this file will be included in the page.
 
 Alternately you can simply fork this repo and go from there.
 
-## Details
+## Customization
+
+### Configuration
+
+The following settings are configurable in `_config.yml`:
 
-- Really Simple will display up to three posts fully on the home page.
+- **Title** - Title of your site. This is used in the header and footer.
+- **Post Limit** - The number of posts to show on the home page. Link to archives in the header and at the end of the home page will only display based on this setting. When this is not specified, Really Simple defaults the limit to 3.
 
-- Link to archives in the header and at the end of the home page will only display when there are more than 3 posts.
+Here's an example:
+
+```yml
+title: Really Simple # Title of site.
+post_limit: 3  # Number of posts to display on the home page.
+```
+
+### Colors
+The color palette can be changed and configured by changing the rgb in `_sass/_colors.scss`. If using the gem, merely create the file `_colors.scss` under the folder `_sass` and set the colors appropriately. Here's an example:
+
+```scss
+$header-text-color: #ee4035;
+$content-text-color: #333;
+$footer-text-color: #ee4035;
+
+$post-link-color: #7bc043;
+$normal-link-color: #0392cf;
+$hover-link-color: #f37736;
+
+$table-border-color: #eee;
+$blockquote-txt-color: #999;
+$blockquote-border-color: #fdf498;
+$code-bg-color: #fdf498;
+```
+The above will render the palette like so:
+
+![Screenshot of customized colors](really-simple-rainbow-pallete.png)
+
+
+## Details
+
+- Link to archives in the header and at the end of the home page will only display when there are more than  post limit configured (or the default of 3 if it is not configured).
 
 - The header has two links: `Archives` and `About`. Really Simple expects these files to be in the root project folder. The `jekyll new` command will create a dummy `about.md` file in the root folder. Remove the layout metadata so that the Really Simple default template is used.
 
+## Philosophy
+
+The Really Simple theme is meant to be minimal and be a design starting point. It follows the following principles:
+
+- It should work out of the box without additional configuration.
+
+- It should be lightweight. No external dependencies on CSS or JS frameworks.
+
+- It should be responsive.
+
+## Background
+
+I had been struggling to find a really simple Jekyll theme that supported blogging out of the box. It was either esthetically not pleasing to me or that it had too many bells and whistles forcing me to think about things I did not wish to have to think about immediately. I just wanted to launch.
+
+While flying from Los Angeles (LAX) to San Diego (SAN) our flight was refused landing due to fog. We had to turn back to LAX. After landing back in LAX, Delta booked a bus to drive us to SAN instead. It was late, I couldn't sleep. I was inspired to create and I had time to burn.
+
+So, I hacked this together during the two hour bus ride.
+
 ## Contributions
 Bug reports and pull requests are most welcome.
 

data/_layouts/default.html

@@ -7,11 +7,12 @@
    <link rel="stylesheet" href="{{ "assets/main.css" | relative_url }}">
 </head>
 <body>
+   {% assign post_limit = site.post_limit | default: 3 %}
    <div class="content">
       <div class="header">
          <a class="title" href="{{ "/" | relative_url }}">{{ site.title | escape }}</a>
          <span class="nav">
-            {% if site.posts.size > 3 %}
+            {% if site.posts.size > post_limit %}
             &raquo; <a href="{{ "archives" | relative_url }}">archives</a>
             {% endif %}
             &nbsp;&raquo; <a href="{{ "about" | relative_url }}">about</a>

data/_layouts/home.html

@@ -7,7 +7,8 @@ layout: default
   {{ content }}
 
   <ul class="post-list">
-    {% for post in site.posts limit:3 %}
+    {% assign post_limit = site.post_limit | default: 3 %}
+    {% for post in site.posts limit: post_limit %}
       <li>
         {% assign date_format = site.minima.date_format | default: "%b %-d, %Y" %}
         <h1 class="post-title">
@@ -21,7 +22,7 @@ layout: default
     {% endfor %}
   </ul>
 
-  {% if site.posts.size > 3 %}
-  <a class="post-link" href="{{ "pages/archives" | relative_url }}">More...</a>
+  {% if site.posts.size > post_limit %}
+  <a class="post-link" href="{{ "archives" | relative_url }}">More...</a>
   {% endif %}
 </div>

data/_sass/_colors.scss

@@ -0,0 +1,18 @@
+/**
+ * Color definitions.
+ **/
+
+$header-text-color: #999;        // text and nav link color in the header.
+$content-text-color: #333;       // content text color
+$footer-text-color: #999;        // text color in the footer.
+
+$post-link-color: #ff9b0b;       // post title link color.
+$normal-link-color: #0090B2;     // anchor tags within the content area.
+$hover-link-color: #ff7a00;      // on hover of anchor tags within the content area.
+
+$table-border-color: #eee;       // border color for tables.
+
+$blockquote-txt-color: #999;     // text color for blockquote.
+$blockquote-border-color: #eee;  // left border color of blockquote.
+
+$code-bg-color: #eee;            // background color for highlighted code.

data/_sass/_simple.scss

@@ -1,17 +1,61 @@
+// all the base.
 body {
    font-family: Georgia, Cambria, 'Josefin Slab';
-   color: #333;
+   color: $content-text-color;
 }
 
+a {
+   color: $normal-link-color;
+   text-decoration:none;
+
+   &:hover {
+     color: $hover-link-color;
+   }
+}
+
+code { background: $code-bg-color; padding:3px; border-radius: 2px; }
+
+table {
+  margin-bottom: 30px;
+  width: 100%;
+  text-align: left;
+  border-collapse: collapse;
+  border: 1px solid $table-border-color;
+  tr {
+    &:nth-child(even) {
+      background-color: lighten($table-border-color, 6%);
+    }
+  }
+  th, td {
+    padding: 10px 10px;
+  }
+  th {
+    background-color: lighten($table-border-color, 3%);
+    border: 1px solid darken($table-border-color, 4%);
+    border-bottom-color: darken($table-border-color, 12%);
+  }
+  td {
+    border: 1px solid $table-border-color;
+  }
+}
+
+blockquote {
+   color: $blockquote-txt-color;
+   border-left: 5px solid $blockquote-border-color;
+   padding: 10px 10px 10px 20px;
+   background: lighten($blockquote-txt-color, 37%);
+}
+
+// all the layout.
 .header {
-   color: #999;
+   color: $header-text-color;
    padding-top: 20px;
    padding-bottom: 20px;
 
    .title {
       font-size:1.5em;
       text-decoration: none;
-      color: #999;
+      color: $header-text-color;
    }
 
    .nav {
@@ -22,21 +66,21 @@ body {
       white-space: nowrap;
 
       a {
-         color: #999;
+         color: $header-text-color;
          text-decoration: none;
 
          &:hover {
-            color: darken(#999, 20%);
+            color: darken($header-text-color, 20%);
          }
       }
    }
 }
 
 .footer {
-   color: #999;
+   color: $footer-text-color;
    padding-top: 20px;
    padding-bottom: 20px;
-   border-top: 1px solid #ddd;
+   border-top: 1px solid lighten($footer-text-color, 30%);
    margin-top: 70px;
    font-size: 0.8em;
 }
@@ -48,7 +92,11 @@ body {
 
   h1, h2, h3, h4, h5, h6 {
      font-family: "Lucida Grande", verdana, 'Lato', sans-serif;
-     color: #222;
+     color: lighten($content-text-color, 10%);
+  }
+
+  img {
+     width: 100%;
   }
 }
 
@@ -65,18 +113,18 @@ body {
 }
 
 .post-meta {
-   color: #999;
+   color: lighten($content-text-color,40%);
    font-size: 0.9em;
 }
 
 .post-title { margin-bottom: 5px; }
 
 .post-link {
-   color: #ff9b0b;
+   color: $post-link-color;
    text-decoration: none;
 
    &:hover {
-      color: darken(#ff9b0b, 10%);
+      color: darken($post-link-color, 10%);
    }
 }
 
@@ -84,49 +132,3 @@ body {
    line-height: 1.5em;
 
 }
-
-a {
-   color:#111;
-   color: #0090B2;
-   text-decoration:none;
-
-   &:hover {
-     color: #FF7A00;
-   }
-}
-
-code { background: #eee; padding:3px; border-radius: 2px; }
-
-/**
- * Tables
- */
-table {
-  margin-bottom: 30px;
-  width: 100%;
-  text-align: left;
-  border-collapse: collapse;
-  border: 1px solid #eee;
-  tr {
-    &:nth-child(even) {
-      background-color: lighten(#eee, 6%);
-    }
-  }
-  th, td {
-    padding: 10px 10px;
-  }
-  th {
-    background-color: lighten(#eee, 3%);
-    border: 1px solid darken(#eee, 4%);
-    border-bottom-color: darken(#eee, 12%);
-  }
-  td {
-    border: 1px solid #eee;
-  }
-}
-
-blockquote {
-   color: #999;
-   border-left: 5px solid #eee;
-   padding: 10px 10px 10px 20px;
-   background: lighten(#999, 37%);
-}

data/_sass/_syntax-highlighting.scss

@@ -3,12 +3,12 @@
  * Adapted from https://github.com/jekyll/minima/blob/master/_sass/minima/_syntax-highlighting.scss
  */
 .highlight {
-  background: #eee;
+  background: $code-bg-color;
   padding: 3px 5px 3px 10px;
   border-radius: 10px;
   margin-bottom: 30px;
   margin-left: 20px;
-  
+
   .c     { color: #998; font-style: italic } // Comment
   .err   { color: #a61717; background-color: #e3d2d2 } // Error
   .k     { font-weight: bold } // Keyword

data/assets/main.scss

@@ -1,4 +1,5 @@
 ---
 ---
+@import "colors";
 @import "syntax-highlighting";
 @import "simple";

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: really-simple
 version: !ruby/object:Gem::Version
-  version: 0.2.1
+  version: 0.3.0
 platform: ruby
 authors:
 - jusx
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-11-24 00:00:00.000000000 Z
+date: 2017-11-26 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -65,6 +65,7 @@ files:
 - _layouts/default.html
 - _layouts/home.html
 - _layouts/post.html
+- _sass/_colors.scss
 - _sass/_simple.scss
 - _sass/_syntax-highlighting.scss
 - assets/main.scss