Add Graymill theme

24 files changed, 1418 insertions, 0 deletions

diff --git a/graymill/LICENSE b/graymill/LICENSE
new file mode 100644
index 0000000..a9151f4
--- /dev/null
+++ b/graymill/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) [2017] [Rahul Nair]
+
+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.
diff --git a/graymill/README.md b/graymill/README.md
new file mode 100644
index 0000000..0385813
--- /dev/null
+++ b/graymill/README.md
@@ -0,0 +1,85 @@
+## Graymill - A minimal Pelican theme.  
+  
+Graymill is a minimal, responsive theme for the [Pelican](http://blog.getpelican.com/) static site generator. It is based on the [Milligram CSS framework](http://milligram.io/).  
+
+### Demo
+
+See the theme in action at [muchBits](https://muchbits.com)
+
+### Features
+
+* Syntax highlighting for code blocks
+* Easy to install
+* Minimal/No Javascript (JS is only used in case Google Analytics is enabled).
+* Google Analytics Support
+* Responsive (Mobile Friendly Test on [Google](https://search.google.com/test/mobile-friendly?utm_source=mft&utm_medium=redirect&utm_campaign=mft-redirect&id=TT7gCU77TVUWMMbu4pmHsg))
+
+## Installation
+
+* Clone the repository:
+```python
+git clone https://github.com/rn4ir/graymill.git
+```
+* Create a `THEME` variable in your `pelicanconf.py` file and set its value to the location of ***graymill*** theme, like so:
+```python
+THEME = 'path/to/graymill'
+```
+
+## Custom Variables
+
+(*Please refer to the sample pelicanconf.py contained in this repo for examples*)  
+  
+The ***Graymill*** theme use the following settings in the `pelicanconf.py`:
+
+### pelicanconf.py
+
+#### Social Icons:
+```python
+SOCIAL = (('linkedin', 'https://www.linkedin.com/in/username'),
+          ('github', 'https://github.com/username'),
+          ('twitter', 'https://twitter.com/username'),
+          ('facebook', 'https://facebook.com/userid'),
+          )
+```
+
+#### Pagination:
+```python
+DEFAULT_PAGINATION = 8
+```
+
+#### Home page parameters:
+
+```python
+SITEDESCRIPTION = 'your-site's-tagline'
+DISPLAY_SUMMARY = True
+DISPLAY_PAGES_ON_MENU = True
+```
+
+#### Other Settings
+```python
+FAVICON = 'images/favicon.png'
+STATIC_PATHS = ['images', 'extras']
+EXTRA_PATH_METADATA = {
+    'extras/.htaccess': {'path': '.htaccess'},
+    'extras/robots.txt': {'path': 'robots.txt'},
+```
+
+#### For local development:
+```
+SITEURL = 'http://localhost:8000'
+```
+
+### publishconf.py
+
+When you are ready to publish your site add the following settings to `publishconf.py` file
+
+```python
+SITEURL = 'https://domain-name.tld'
+
+FEED_ALL_ATOM = 'feeds/all.atom.xml'
+CATEGORY_FEED_ATOM = 'feeds/%s.atom.xml'
+
+GOOGLE_ANALYTICS = ""
+```
+
+For more information on publishing your site, please read the [Pelican publishing docs](http://docs.getpelican.com/en/3.6.3/publish.html)
diff --git a/graymill/sample_pelicanconf.py b/graymill/sample_pelicanconf.py
new file mode 100644
index 0000000..8a9680e
--- /dev/null
+++ b/graymill/sample_pelicanconf.py
@@ -0,0 +1,55 @@
+#!/usr/bin/env python
+# -*- coding: utf-8 -*- #
+from __future__ import unicode_literals
+
+# Basic information
+AUTHOR = u'author'
+AUTHOREMAIL = 'myemail [at] mydomain [dot] tld'
+SITENAME = u'siteName'
+SITEURL = 'http://muchbits.com'
+
+PATH = 'content'
+
+TIMEZONE = 'Asia/Kolkata'
+
+DEFAULT_LANG = u'en'
+THEME = 'themes/graymill'
+
+# Social widgets
+SOCIAL = (('twitter', 'https://twitter.com/'),
+          ('linkedin', 'https://www.linkedin.com/'),
+          ('github', 'https://github.com/'),
+          ('facebook', 'https://facebook.com/'),
+         )
+
+DEFAULT_PAGINATION = 8
+
+SITEDESCRIPTION = 'my custom tagline/description'
+
+# For post-summaries
+DISPLAY_SUMMARY = True
+
+# To display static pages like About, Contact etc.
+DISPLAY_PAGES_ON_MENU = True
+
+MENUITEMS = (('Home', SITEURL),
+            )
+
+# Feed generation is usually not desired when developing
+FEED_ALL_RSS = False
+FEED_ALL_ATOM = False
+FEED_ALL_ATOM = None
+CATEGORY_FEED_ATOM = None
+TRANSLATION_FEED_ATOM = None
+AUTHOR_FEED_ATOM = None
+AUTHOR_FEED_RSS = None
+
+# Favicon (path relative to './content/')
+FAVICON = 'images/favicon.png'
+
+# To include custom static files like htaccess, robots, PDF files etc. (path relative to './content/')
+STATIC_PATHS = ['images', 'extras']
+EXTRA_PATH_METADATA = {
+    'extras/.htaccess': {'path': '.htaccess'},
+    'extras/robots.txt': {'path': 'robots.txt'},
+}
diff --git a/graymill/static/css/custom.css b/graymill/static/css/custom.css
new file mode 100644
index 0000000..616b944
--- /dev/null
+++ b/graymill/static/css/custom.css
@@ -0,0 +1,272 @@
+body {
+    background-color: #ffffff;
+    font-size: 1.5rem;
+}
+
+a {
+    color: #6C7A89;
+    text-decoration: none;
+}
+
+.navbar {
+    margin-bottom: 10px;
+}
+
+.navbar ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
+
+.navbar li {
+    margin: 1em;
+    float: left;
+    line-height: 0.1em;
+    padding: 1em;
+}
+
+.navbar li a {
+    display: block;
+    color: #6C7A89;
+    text-align: center;
+    text-decoration: none;
+}
+
+.navbar li h4 {
+    margin: 5%;
+}
+
+.navbar li h6 {
+    line-height: 2.5;
+}
+.navbar li i {
+    display: block;
+    text-align: center;
+    padding: 14px 16px;
+}
+
+.social-img {
+    background-color: #6C7A89;
+}
+
+sidebar {
+    font-size: 1.25em;
+    width: 15%; 
+    height: 100%;
+    position: fixed;
+    right: 0;
+    padding: 2%;
+    text-align: center;
+    background-size: cover;
+}
+
+sidebar > ul {
+    list-style-type: none;
+    padding: 0px 10px;
+    margin-top: 0px;
+}
+
+.static-item {
+    text-transform: uppercase;
+    font-size: 1.5em;
+}
+
+.cat-border {
+    border: 2px solid #6C7A89;
+    text-transform: uppercase;
+}
+
+.cat-border a:focus,
+.cat-border a:hover {
+    color: #F2F1EF;
+    background-color: #6C7A89;
+    padding: 1%;
+}
+
+sidebar > ul > li > a:hover,
+sidebar > ul > li > a:focus {
+    color: #F2F1EF;
+    background-color: #6C7A89;
+    padding: 1%;
+}
+
+sidebar > h2 {
+    font-size: 15px;
+    margin-bottom: 5px;
+    padding-bottom: 3%;
+}
+
+maincontent {
+    display: block;
+    line-height: 1.6em;
+    width: 85%;
+}
+
+maincontent > ol {
+    list-style-type: none;
+}
+
+mainarticle ul {
+    list-style: square inside;
+}
+
+mainarticle ul li p {
+    padding-left: 3%;
+    margin-top: -2%;
+    font-size: 1.5em;
+}
+
+mainarticle a {
+    background: #f4f5f6;
+    font-weight: bold;
+    font-style: italic;
+}
+
+maincontent table {
+    max-width: 100%;
+    width: 0;
+}
+
+maincontent table tbody tr td pre {
+    padding-right: 20px;
+}
+
+maincontent table tbody tr td .highlight {
+    width: 90rem;
+}
+
+.page-title {
+    border-bottom: 1.5px solid #eee;
+    width: 85%;
+}
+
+hr {
+    border-top: 0.3rem double #6C7A89;
+}
+
+pre {
+    padding-left: 1.5%;
+    border-left: 0.3rem solid #6C7A89;
+}
+
+code {
+    font-size: 100%;
+    font-style: italic;
+}
+
+ul {
+   list-style: square inside;
+}
+
+.social-icons-a {
+    max-width: 3%;
+}
+
+.social-icons-m {
+    max-width: 20%;
+}
+
+.pagination-dir {
+    font-size: 2.5rem;
+    margin-top: 2%;
+}
+
+@media (max-width: 40.0rem) {
+
+  .navbar {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  .navbar li {
+    float: none;
+    padding: initial;
+    text-align: center
+  }
+  
+  .navbar li h6 {
+    line-height: initial;
+    font-size: 0.75em;
+    letter-spacing: 0;
+  }
+
+  sidebar {
+    right: 0;
+    max-width: none;
+    position: fixed;
+    width: 25%;
+    padding: 0;
+    padding-top: 1px;
+    font-size: 8px;
+  }
+
+  maincontent {
+    width: 75%;
+    font-size: 10px;
+  }
+
+  maincontent h2 {
+    font-size: 2rem;
+  }
+
+  maincontent h5 {
+    font-size: 1.4rem;
+  }
+    
+  mainarticle ul li p {
+    padding-left: 5%;
+    margin-top: -6%;
+  }
+
+  .social-icons-a {
+    max-width: 10%;
+  }
+}
+
+@media (min-width: 41.0rem) and (max-width: 80.0rem){
+  .navbar {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  .navbar li {
+    float: none;
+    padding: initial;
+    text-align: center
+  }
+
+  .navbar li h6 {
+    line-height: initial;
+    font-size: 0.75em;
+    letter-spacing: 0;
+  }
+
+  sidebar {
+    right: 0;
+    max-width: none;
+    position: fixed;
+    width: 15%;
+    padding: 0;
+    padding-top: 1px;
+    font-size: 8px;
+  }
+
+  maincontent {
+    width: 85%;
+    font-size: 10px;
+  }
+
+  maincontent h2 {
+    font-size: 2rem;
+  }
+
+  maincontent h5 {
+    font-size: 1.4rem;
+  }
+
+  mainarticle ul li p {
+    padding-left: 5%;
+    margin-top: -2%;
+  }
+}
diff --git a/graymill/static/css/milligram.css b/graymill/static/css/milligram.css
new file mode 100644
index 0000000..a05548b
--- /dev/null
+++ b/graymill/static/css/milligram.css
@@ -0,0 +1,600 @@
+/*!
+ * Milligram v1.3.0
+ * https://milligram.github.io
+ *
+ * Copyright (c) 2017 CJ Patoilo
+ * Licensed under the MIT license
+ */
+
+*,
+*:after,
+*:before {
+  box-sizing: inherit;
+}
+
+html {
+  box-sizing: border-box;
+  font-size: 62.5%;
+}
+
+body {
+  color: #606c76;
+  font-family: monospace;
+  font-size: 1.6em;
+  font-weight: 300;
+  letter-spacing: .01em;
+  line-height: 1.6;
+}
+
+blockquote {
+  border-left: 0.3rem solid #d1d1d1;
+  margin-left: 0;
+  margin-right: 0;
+  padding: 1rem 1.5rem;
+}
+
+blockquote *:last-child {
+  margin-bottom: 0;
+}
+
+.button,
+button,
+input[type='button'],
+input[type='reset'],
+input[type='submit'] {
+  background-color: #9b4dca;
+  border: 0.1rem solid #9b4dca;
+  border-radius: .4rem;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  font-size: 1.1rem;
+  font-weight: 700;
+  height: 3.8rem;
+  letter-spacing: .1rem;
+  line-height: 3.8rem;
+  padding: 0 3.0rem;
+  text-align: center;
+  text-decoration: none;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.button:focus, .button:hover,
+button:focus,
+button:hover,
+input[type='button']:focus,
+input[type='button']:hover,
+input[type='reset']:focus,
+input[type='reset']:hover,
+input[type='submit']:focus,
+input[type='submit']:hover {
+  background-color: #606c76;
+  border-color: #606c76;
+  color: #fff;
+  outline: 0;
+}
+
+.button[disabled],
+button[disabled],
+input[type='button'][disabled],
+input[type='reset'][disabled],
+input[type='submit'][disabled] {
+  cursor: default;
+  opacity: .5;
+}
+
+.button[disabled]:focus, .button[disabled]:hover,
+button[disabled]:focus,
+button[disabled]:hover,
+input[type='button'][disabled]:focus,
+input[type='button'][disabled]:hover,
+input[type='reset'][disabled]:focus,
+input[type='reset'][disabled]:hover,
+input[type='submit'][disabled]:focus,
+input[type='submit'][disabled]:hover {
+  background-color: #9b4dca;
+  border-color: #9b4dca;
+}
+
+.button.button-outline,
+button.button-outline,
+input[type='button'].button-outline,
+input[type='reset'].button-outline,
+input[type='submit'].button-outline {
+  background-color: transparent;
+  color: #9b4dca;
+}
+
+.button.button-outline:focus, .button.button-outline:hover,
+button.button-outline:focus,
+button.button-outline:hover,
+input[type='button'].button-outline:focus,
+input[type='button'].button-outline:hover,
+input[type='reset'].button-outline:focus,
+input[type='reset'].button-outline:hover,
+input[type='submit'].button-outline:focus,
+input[type='submit'].button-outline:hover {
+  background-color: transparent;
+  border-color: #606c76;
+  color: #606c76;
+}
+
+.button.button-outline[disabled]:focus, .button.button-outline[disabled]:hover,
+button.button-outline[disabled]:focus,
+button.button-outline[disabled]:hover,
+input[type='button'].button-outline[disabled]:focus,
+input[type='button'].button-outline[disabled]:hover,
+input[type='reset'].button-outline[disabled]:focus,
+input[type='reset'].button-outline[disabled]:hover,
+input[type='submit'].button-outline[disabled]:focus,
+input[type='submit'].button-outline[disabled]:hover {
+  border-color: inherit;
+  color: #9b4dca;
+}
+
+.button.button-clear,
+button.button-clear,
+input[type='button'].button-clear,
+input[type='reset'].button-clear,
+input[type='submit'].button-clear {
+  background-color: transparent;
+  border-color: transparent;
+  color: #9b4dca;
+}
+
+.button.button-clear:focus, .button.button-clear:hover,
+button.button-clear:focus,
+button.button-clear:hover,
+input[type='button'].button-clear:focus,
+input[type='button'].button-clear:hover,
+input[type='reset'].button-clear:focus,
+input[type='reset'].button-clear:hover,
+input[type='submit'].button-clear:focus,
+input[type='submit'].button-clear:hover {
+  background-color: transparent;
+  border-color: transparent;
+  color: #606c76;
+}
+
+.button.button-clear[disabled]:focus, .button.button-clear[disabled]:hover,
+button.button-clear[disabled]:focus,
+button.button-clear[disabled]:hover,
+input[type='button'].button-clear[disabled]:focus,
+input[type='button'].button-clear[disabled]:hover,
+input[type='reset'].button-clear[disabled]:focus,
+input[type='reset'].button-clear[disabled]:hover,
+input[type='submit'].button-clear[disabled]:focus,
+input[type='submit'].button-clear[disabled]:hover {
+  color: #9b4dca;
+}
+
+code {
+  background: #f4f5f6;
+  border-radius: .4rem;
+  font-size: 86%;
+  margin: 0 .2rem;
+  padding: .2rem .5rem;
+  white-space: nowrap;
+}
+
+pre {
+  background: #f4f5f6;
+  border-left: 0.3rem solid #9b4dca;
+  overflow-y: hidden;
+}
+
+pre > code {
+  border-radius: 0;
+  display: block;
+  padding: 1rem 1.5rem;
+  white-space: pre;
+}
+
+hr {
+  border: 0;
+  border-top: 0.1rem solid #f4f5f6;
+  margin: 3.0rem 0;
+}
+
+input[type='email'],
+input[type='number'],
+input[type='password'],
+input[type='search'],
+input[type='tel'],
+input[type='text'],
+input[type='url'],
+textarea,
+select {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background-color: transparent;
+  border: 0.1rem solid #d1d1d1;
+  border-radius: .4rem;
+  box-shadow: none;
+  box-sizing: inherit;
+  height: 3.8rem;
+  padding: .6rem 1.0rem;
+  width: 100%;
+}
+
+input[type='email']:focus,
+input[type='number']:focus,
+input[type='password']:focus,
+input[type='search']:focus,
+input[type='tel']:focus,
+input[type='text']:focus,
+input[type='url']:focus,
+textarea:focus,
+select:focus {
+  border-color: #9b4dca;
+  outline: 0;
+}
+
+select {
+  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 29 14" width="29"><path fill="#d1d1d1" d="M9.37727 3.625l5.08154 6.93523L19.54036 3.625"/></svg>') center right no-repeat;
+  padding-right: 3.0rem;
+}
+
+select:focus {
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 29 14" width="29"><path fill="#9b4dca" d="M9.37727 3.625l5.08154 6.93523L19.54036 3.625"/></svg>');
+}
+
+textarea {
+  min-height: 6.5rem;
+}
+
+label,
+legend {
+  display: block;
+  font-size: 1.6rem;
+  font-weight: 700;
+  margin-bottom: .5rem;
+}
+
+fieldset {
+  border-width: 0;
+  padding: 0;
+}
+
+input[type='checkbox'],
+input[type='radio'] {
+  display: inline;
+}
+
+.label-inline {
+  display: inline-block;
+  font-weight: normal;
+  margin-left: .5rem;
+}
+
+.container {
+  margin: 0 auto;
+  max-width: 112.0rem;
+  padding: 0 2.0rem;
+  position: relative;
+  width: 100%;
+}
+
+.row {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  width: 100%;
+}
+
+.row.row-no-padding {
+  padding: 0;
+}
+
+.row.row-no-padding > .column {
+  padding: 0;
+}
+
+.row.row-wrap {
+  flex-wrap: wrap;
+}
+
+.row.row-top {
+  align-items: flex-start;
+}
+
+.row.row-bottom {
+  align-items: flex-end;
+}
+
+.row.row-center {
+  align-items: center;
+}
+
+.row.row-stretch {
+  align-items: stretch;
+}
+
+.row.row-baseline {
+  align-items: baseline;
+}
+
+.row .column {
+  display: block;
+  flex: 1 1 auto;
+  margin-left: 0;
+  max-width: 100%;
+  width: 100%;
+}
+
+.row .column.column-offset-10 {
+  margin-left: 10%;
+}
+
+.row .column.column-offset-20 {
+  margin-left: 20%;
+}
+
+.row .column.column-offset-25 {
+  margin-left: 25%;
+}
+
+.row .column.column-offset-33, .row .column.column-offset-34 {
+  margin-left: 33.3333%;
+}
+
+.row .column.column-offset-50 {
+  margin-left: 50%;
+}
+
+.row .column.column-offset-66, .row .column.column-offset-67 {
+  margin-left: 66.6666%;
+}
+
+.row .column.column-offset-75 {
+  margin-left: 75%;
+}
+
+.row .column.column-offset-80 {
+  margin-left: 80%;
+}
+
+.row .column.column-offset-90 {
+  margin-left: 90%;
+}
+
+.row .column.column-10 {
+  flex: 0 0 10%;
+  max-width: 10%;
+}
+
+.row .column.column-20 {
+  flex: 0 0 20%;
+  max-width: 20%;
+}
+
+.row .column.column-25 {
+  flex: 0 0 25%;
+  max-width: 25%;
+}
+
+.row .column.column-33, .row .column.column-34 {
+  flex: 0 0 33.3333%;
+  max-width: 33.3333%;
+}
+
+.row .column.column-40 {
+  flex: 0 0 40%;
+  max-width: 40%;
+}
+
+.row .column.column-50 {
+  flex: 0 0 50%;
+  max-width: 50%;
+}
+
+.row .column.column-60 {
+  flex: 0 0 60%;
+  max-width: 60%;
+}
+
+.row .column.column-66, .row .column.column-67 {
+  flex: 0 0 66.6666%;
+  max-width: 66.6666%;
+}
+
+.row .column.column-75 {
+  flex: 0 0 75%;
+  max-width: 75%;
+}
+
+.row .column.column-80 {
+  flex: 0 0 80%;
+  max-width: 80%;
+}
+
+.row .column.column-90 {
+  flex: 0 0 90%;
+  max-width: 90%;
+}
+
+.row .column .column-top {
+  align-self: flex-start;
+}
+
+.row .column .column-bottom {
+  align-self: flex-end;
+}
+
+.row .column .column-center {
+  -ms-grid-row-align: center;
+      align-self: center;
+}
+
+@media (min-width: 40rem) {
+  .row {
+    flex-direction: row;
+    margin-left: -1.0rem;
+    width: calc(100% + 2.0rem);
+  }
+  .row .column {
+    margin-bottom: inherit;
+    padding: 0 1.0rem;
+  }
+}
+
+a {
+  color: #9b4dca;
+  text-decoration: none;
+}
+
+a:focus, a:hover {
+  color: #606c76;
+}
+
+dl,
+ol,
+ul {
+  list-style: none;
+  margin-top: 0;
+  padding-left: 0;
+}
+
+dl dl,
+dl ol,
+dl ul,
+ol dl,
+ol ol,
+ol ul,
+ul dl,
+ul ol,
+ul ul {
+  font-size: 90%;
+  margin: 1.5rem 0 1.5rem 3.0rem;
+}
+
+ol {
+  list-style: decimal inside;
+}
+
+ul {
+  list-style: circle inside;
+}
+
+.button,
+button,
+dd,
+dt,
+li {
+  margin-bottom: 1.0rem;
+}
+
+fieldset,
+input,
+select,
+textarea {
+  margin-bottom: 1.5rem;
+}
+
+blockquote,
+dl,
+figure,
+form,
+ol,
+p,
+pre,
+table,
+ul {
+  margin-bottom: 2.5rem;
+}
+
+table {
+  border-spacing: 0;
+  width: 100%;
+}
+
+td,
+th {
+  border-bottom: 0.1rem solid #e1e1e1;
+  padding: 1.2rem 1.5rem;
+  text-align: left;
+}
+
+td:first-child,
+th:first-child {
+  padding-left: 0;
+}
+
+td:last-child,
+th:last-child {
+  padding-right: 0;
+}
+
+b,
+strong {
+  font-weight: bold;
+}
+
+p {
+  margin-top: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 300;
+  letter-spacing: -.1rem;
+  margin-bottom: 2.0rem;
+  margin-top: 0;
+}
+
+h1 {
+  font-size: 4.6rem;
+  line-height: 1.2;
+}
+
+h2 {
+  font-size: 3.6rem;
+  line-height: 1.25;
+}
+
+h3 {
+  font-size: 2.8rem;
+  line-height: 1.3;
+}
+
+h4 {
+  font-size: 2.2rem;
+  letter-spacing: -.08rem;
+  line-height: 1.35;
+}
+
+h5 {
+  font-size: 1.8rem;
+  letter-spacing: -.05rem;
+  line-height: 1.5;
+}
+
+h6 {
+  font-size: 1.6rem;
+  letter-spacing: 0;
+  line-height: 1.4;
+}
+
+img {
+  max-width: 100%;
+}
+
+.clearfix:after {
+  clear: both;
+  content: ' ';
+  display: table;
+}
+
+.float-left {
+  float: left;
+}
+
+.float-right {
+  float: right;
+}
diff --git a/graymill/static/images/icons/facebook.png b/graymill/static/images/icons/facebook.png
new file mode 100644
index 0000000..f9c12e1
--- /dev/null
+++ b/graymill/static/images/icons/facebook.png
diff --git a/graymill/static/images/icons/github.png b/graymill/static/images/icons/github.png
new file mode 100644
index 0000000..4d83b8f
--- /dev/null
+++ b/graymill/static/images/icons/github.png
diff --git a/graymill/static/images/icons/gplus.png b/graymill/static/images/icons/gplus.png
new file mode 100644
index 0000000..eb1a77f
--- /dev/null
+++ b/graymill/static/images/icons/gplus.png
diff --git a/graymill/static/images/icons/linkedin.png b/graymill/static/images/icons/linkedin.png
new file mode 100644
index 0000000..48b994b
--- /dev/null
+++ b/graymill/static/images/icons/linkedin.png
diff --git a/graymill/static/images/icons/mail.png b/graymill/static/images/icons/mail.png
new file mode 100644
index 0000000..7eede02
--- /dev/null
+++ b/graymill/static/images/icons/mail.png
diff --git a/graymill/static/images/icons/rss.png b/graymill/static/images/icons/rss.png
new file mode 100644
index 0000000..b12dc1c
--- /dev/null
+++ b/graymill/static/images/icons/rss.png
diff --git a/graymill/static/images/icons/twitter.png b/graymill/static/images/icons/twitter.png
new file mode 100644
index 0000000..4ecf4c7
--- /dev/null
+++ b/graymill/static/images/icons/twitter.png
diff --git a/graymill/templates/archives.html b/graymill/templates/archives.html
new file mode 100644
index 0000000..9ebba9c
--- /dev/null
+++ b/graymill/templates/archives.html
@@ -0,0 +1,27 @@
+{% extends "base.html" %}
+{% block head %}
+{{ super() }}
+<meta name="twitter:creator" content="{{ TWITTER_USERNAME }}">
+<meta name="twitter:url" content="{{ SITEURL }}/archives.html">
+<meta name="twitter:title" content="{{ SITENAME }} || Archives">
+<meta name="twitter:description" content="{{ SITENAME }} || Archives for this website">
+
+<!-- Facebook Meta Data -->
+<meta property="og:title" content="{{ SITENAME }} || Archives" />
+<meta property="og:description" content="{{ SITENAME }} || Archives for this website" />
+<meta property="og:image" content="{{ AVATAR }}" />
+{% endblock head %}
+{% block content %}
+<h2>Archives</h2>
+    {% for article in dates %}
+    <div class="row">
+        <div class="column column-25">
+            {{ article.locale_date }}
+        </div>
+
+        <div class="column column-75">
+            <a href="{{ SITEURL }}/{{ article.url }}">{{ article.title }}</a>
+        </div>
+    </div>
+    {% endfor %}
+{% endblock %}
diff --git a/graymill/templates/article.html b/graymill/templates/article.html
new file mode 100644
index 0000000..58b49d9
--- /dev/null
+++ b/graymill/templates/article.html
@@ -0,0 +1,56 @@
+{% extends "base.html" %}
+{% block head %}
+{{ super() }}
+<meta name="twitter:creator" content="{{ TWITTER_USERNAME }}">
+<meta name="twitter:url" content="{{ SITEURL }}/{{ article.url }}">
+<meta name="twitter:title" content="{{ SITENAME }} ~ {{ article.title }}">
+<meta name="twitter:description" content="{{ article.summary|striptags|escape }}">
+
+<!-- Facebook Meta Data -->
+<meta property="og:title" content="{{ SITENAME }} ~ {{ article.title }}" />
+<meta property="og:description" content="{{ article.summary|striptags|escape  }}" />
+<meta property="og:image" content="" />
+{% endblock head %}
+{% block title %}{{ article.title }}{% endblock %}
+{% block content %}
+<h2>
+    <a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark" title="Permalink to {{ article.title }}">{{ article.title }}</a>
+</h2>
+
+<div>
+    <b>By: </b><a href="{{ SITEURL }}/{{ article.author.url }}">{{ article.author }}</a><b>    On: </b>{{ article.locale_date }}<br />
+    <b>In: </b><a href="{{ SITEURL }}/{{ article.category.url }}" rel="bookmark" title="Permalink to {{ article.category|striptags }}">{{ article.category }}</a><br />
+    <em><b>Tags: </b>
+        {% if article.tags %}
+            {% for tag in article.tags %}
+                <span><a href="{{ SITEURL }}/{{ tag.url }}">#{{ tag }} </a></span>
+            {% endfor %}
+        {% endif %}
+    </em>
+    <hr>
+</div>
+
+<div>
+    <mainarticle>
+    {{ article.content }}
+    </mainarticle>
+</div>
+<hr>
+        
+<div>
+        <i>If you found the article helpful, please share or cite the article, and spread the word:</i>
+            <p style="margin-top: 2%;">
+                <span><a target="_blank" rel="nofollow" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=700');return false;" title="Twitter" href="https://twitter.com/share?url={{ SITEURL }}/{{ article.url }}&text={{ article.title }}&via={{TWITTER_USERNAME}}"><img class="social-icons-a" src="{{ SITEURL }}/theme/images/icons/twitter.png"></a></span>
+                <span><a target="_blank" title="Facebook" rel="nofollow" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=500,width=700');return false;" href="https://www.facebook.com/sharer.php?u={{ SITEURL }}/{{article.url}}&t={{ article.title }}"><img class="social-icons-a" src="{{ SITEURL }}/theme/images/icons/facebook.png"></a></span>
+
+                <a  target="_blank" title="Linkedin" href="https://www.linkedin.com/shareArticle?mini=true&url={{ SITEURL }}/{{ article.url }}&title={{ article.title }}" rel="nofollow" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=450,width=650');return false;"><img class="social-icons-a" src="{{ SITEURL }}/theme/images/icons/linkedin.png"></a>
+            </p>
+</div>
+<hr>
+{% if AUTHOREMAIL %}
+    <p><i>For any feedback or corrections, please write in to: </i><b> {{ AUTHOREMAIL }} </b></p>
+{% else  %}
+    <p><i>For any feedback or corrections, please write in to: </i><b> {{ AUTHOR }} </b></p>
+{% endif %}
+        
+{% endblock %}
diff --git a/graymill/templates/author.html b/graymill/templates/author.html
new file mode 100644
index 0000000..3606441
--- /dev/null
+++ b/graymill/templates/author.html
@@ -0,0 +1,18 @@
+{% extends "index.html" %}
+{% block head %}
+    {{ super() }}
+    <meta name="twitter:creator" content="{{ TWITTER_USERNAME }}">
+    <meta name="twitter:url" content="{{ SITEURL }}/{{ author.url }}">
+    <meta name="twitter:title" content="{{ SITENAME }} ~ {{ author }}">
+    <meta name="twitter:description" content="All articles by {{ author }}">
+
+    <!-- Facebook Meta Data -->
+    <meta property="og:title" content="{{ SITENAME }} ~ {{ author }}"/>
+    <meta property="og:description" content="All articles by {{ author }}"/>
+    <meta property="og:image" content="{{ AVATAR }}"/>
+{% endblock head %}
+{% block title %}{{ SITENAME }} - {{ author }}{% endblock %}
+{% block heading %}
+    <h2>Author: <i>{{ author }}</i></h2>
+{% endblock %}
+
diff --git a/graymill/templates/base.html b/graymill/templates/base.html
new file mode 100644
index 0000000..55fc051
--- /dev/null
+++ b/graymill/templates/base.html
@@ -0,0 +1,138 @@
+<!doctype html>
+<html lang="{{ DEFAULT_LANG }}" itemscope itemtype="http://schema.org/Person">
+<head>
+  {% block head %}
+  <meta charset="utf-8">
+  <!-- Site Meta Data -->
+  <title>{% block title %} {{ SITENAME }} {% endblock %}</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="description" content="{{ AUTHOR_DESCRIPTION }}">
+  <meta name="author" content="{{ AUTHOR }}">
+
+  <link rel="shortcut icon" href="{{ FAVICON }}">
+
+  <!-- schema.org -->
+  <meta itemprop="name" content="{{ SITENAME }}">
+  <meta itemprop="image" content="{{ AVATAR}}">
+  <meta itemprop="description" content="{{ AUTHOR_DESCRIPTION }}">
+
+  <!-- Style Meta Data -->
+  <link rel="stylesheet" href="{{ SITEURL }}/theme/css/milligram.css" type="text/css" />
+  <link rel="stylesheet" href="{{ SITEURL }}/theme/css/custom.css" type="text/css" />
+
+  <!-- Feed Meta Data -->
+  {% if FEED_ALL_ATOM %}
+    <link href="{{ SITEURL }}/{{ FEED_ALL_ATOM }}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} ATOM Feed" />
+  {% endif %}
+  {% if FEED_ALL_RSS %}
+    <link href="{{ SITEURL }}/{{ FEED_RSS }}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} RSS Feed" />
+  {% endif %}
+
+  <!-- Twitter Feed -->
+  <meta name="twitter:card" content="summary">
+  <meta name="twitter:site" content="{{ TWITTER_USERNAME }}">
+  <meta name="twitter:image" content="">
+  {% endblock %}
+</head>
+
+<body>
+    <div class="container">
+
+    <!-- Navbar -->
+      <div class="navbar">
+        <ul>
+            <div>
+                <li>
+                    <a href="{{ SITEURL }}"><h3>{{ SITENAME }}</h3></a>
+                </li>
+                <li>
+                    {% if SITEDESCRIPTION  %}
+                        <em><h6>{{ SITEDESCRIPTION }}</h6></em>
+                    {% endif  %}
+                </li>
+            </div>
+        </ul>
+      </div>
+
+  <!-- Sidebar -->
+    <sidebar>
+        <ul class="static-item">
+        {% for title, link in MENUITEMS %}
+                <li><a href="{{ link }}">{{ title }}</a></li>
+        {% endfor %}
+
+        {% if DISPLAY_PAGES_ON_MENU and PAGES %}
+            {% for p in pages %}
+                <li><a href="{{ SITEURL }}/{{ p.url }}">{{ p.title }}</a></li>
+            {% endfor %}
+        {% endif %}
+        </ul>        
+
+        <ul>
+        {% if DISPLAY_CATEGORIES_ON_MENU and categories %}
+                <div class="cat-border">
+                <li style="color: #F2F1EF; background-color: #6C7A89;">Categories</li>
+                {% for cat, null in categories %}
+                    <li{% if cat == category %}{% endif %}><a href="{{ SITEURL }}/{{ cat.url }}">{{ cat }}</a></li>
+                {% endfor %}
+                </div>
+        {% endif %}
+        </ul>
+
+        {% if LINKS %}
+            <h2><br/>BLOGROLLS</h2>
+            <ul>
+                {% for name, link in LINKS %}
+                    <li><a href="{{ link }}">{{ name }}</a></li>
+                {% endfor %}
+            </ul> 
+        {% endif %}
+   
+        <p> 
+        {% if SOCIAL %}
+            {% for name, link in SOCIAL %}
+                <span>
+                    <a href="{{ link }}" target="_blank">
+                        <img class="social-icons-m" src="{{ SITEURL }}/theme/images/icons/{{ name|lower }}.png">
+                    </a>
+                </span>
+            {% endfor %}
+        {% endif %}
+        </p>
+        <p>
+        {% if FEED_ALL_ATOM %}
+            <a href="{{ SITEURL }}/{{ FEED_ALL_ATOM }}" rel="alternate">
+                <img class="social-icons-m" src="{{ SITEURL }}/theme/images/icons/rss.png"></a>
+        {% endif %}
+        </p>
+        <p>
+        {% if FEED_ALL_RSS %}
+            <a href="{{ SITEURL }}/{{ FEED_ALL_RSS }}" rel="alternate">
+                <img class="social-icons-m" src="{{ SITEURL }}/theme/images/icons/rss.png"></a>
+        {% endif %}
+        </p>
+    </sidebar>
+    
+    <maincontent>
+        {% block content %}
+        {% endblock %}
+    </maincontent>
+
+  <!-- Analytics -->
+  {% if GOOGLE_ANALYTICS %}
+    <script type="text/javascript">
+        var _gaq = _gaq || [];
+        _gaq.push(['_setAccount', '{{ GOOGLE_ANALYTICS }}']);
+        _gaq.push(['_trackPageview']);
+        (function() {
+            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+        })();
+    </script>
+  {% endif %}
+
+  </div>
+</body>
+
+</html>
diff --git a/graymill/templates/categories.html b/graymill/templates/categories.html
new file mode 100644
index 0000000..676f717
--- /dev/null
+++ b/graymill/templates/categories.html
@@ -0,0 +1,21 @@
+{% extends "base.html" %}
+{% block head %}
+{{ super() }}
+<meta name="twitter:creator" content="{{ TWITTER_USERNAME }}">
+<meta name="twitter:url" content="{{ SITEURL }}/categories.html">
+<meta name="twitter:title" content="{{ SITENAME }} || Categories">
+<meta name="twitter:description" content="{{ SITENAME }} || Categories in this website">
+
+<!-- Facebook Meta Data -->
+<meta property="og:title" content="{{ SITENAME }} || Categories" />
+<meta property="og:description" content="{{ SITENAME }} || Categories in this website" />
+<meta property="og:image" content="{{ AVATAR }}" />
+{% endblock head %}
+{% block content %}
+<h2>Categories</h2>
+<ol>
+{% for category, articles in categories %}
+	<li><a href="{{ category.url }}">{{ category }}</a></li>
+{% endfor %}
+</ol>
+{% endblock %}
diff --git a/graymill/templates/category.html b/graymill/templates/category.html
new file mode 100644
index 0000000..b4ffe69
--- /dev/null
+++ b/graymill/templates/category.html
@@ -0,0 +1,17 @@
+{% extends "index.html" %}
+{% block head %}
+    {{ super() }}
+    <meta name="twitter:creator" content="{{ TWITTER_USERNAME }}">
+    <meta name="twitter:url" content="{{ SITEURL }}/{{ category.url }}">
+    <meta name="twitter:title" content="{{ SITENAME }} || {{ category }}">
+    <meta name="twitter:description" content="Articles in {{ category }}">
+
+    <!-- Facebook Meta Data -->
+    <meta property="og:title" content="{{ SITENAME }} || {{ category }}"/>
+    <meta property="og:description" content="Articles in {{ category }}"/>
+    <meta property="og:image" content="{{ AVATAR }}"/>
+{% endblock head %}
+{% block title %}{{ SITENAME }} - {{ category }}{% endblock %}
+{% block heading %}
+    <h2>Category: <i>{{ category }}</i></h2>
+{% endblock %}
diff --git a/graymill/templates/index.html b/graymill/templates/index.html
new file mode 100644
index 0000000..b63d91f
--- /dev/null
+++ b/graymill/templates/index.html
@@ -0,0 +1,39 @@
+{% extends "base.html" %}
+{% block head %}
+{{ super() }}
+  <meta name="twitter:creator" content="{{ TWITTER_USERNAME }}">
+  <meta name="twitter:url" content="{{ SITEURL }}">
+  <meta name="twitter:title" content="{{ SITENAME }}">
+  <meta name="twitter:description" content="{{ SITEDESCRIPTION }}">
+
+  <!-- Facebook Meta Data -->
+  <meta property="og:title" content="{{ SITENAME }}" />
+  <meta property="og:description" content="{{ SITEDESCRIPTION }}" />
+  <meta property="og:image" content="" />
+{% endblock head %}
+{% block content_title %}{% endblock %}
+{% block content %}
+
+{% if articles %}
+    <ol>
+    {% block heading %}
+        <h3>Recent entries</h3>
+    {% endblock %}
+    {% for article in (articles_page.object_list if articles_page else articles) %}
+        <hr>
+        <li>
+            <h5><a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark" title="Permalink to {{ article.title|striptags }}">{{ article.title }}</a></h5>
+            {% if DISPLAY_SUMMARY and article.summary|length > 0 %}
+                <i>{{ article.summary }}</i>
+            {% endif %}
+            By:<a href="{{ SITEURL }}/{{ article.author.url }}">{{ article.author }}</a><br />On:{{ article.locale_date }}<br />In:<a href="{{ SITEURL }}/{{ article.category.url }}" rel="bookmark" title="Permalink to {{ article.category|striptags }}">{{ article.category }}</a>
+        </li>
+    {% endfor %}
+    </ol>
+{% endif %}
+
+{% if articles_page and articles_paginator.num_pages > 1 %}
+    {% include 'pagination.html' %}
+{% endif %}
+
+{% endblock content %}
diff --git a/graymill/templates/page.html b/graymill/templates/page.html
new file mode 100644
index 0000000..dc6cfff
--- /dev/null
+++ b/graymill/templates/page.html
@@ -0,0 +1,8 @@
+{% extends "base.html" %}
+{% block title %}{{ page.title }}{% endblock %}
+{% block content %}
+{% if PDF_PROCESSOR %}
+    <a href="{{ SITEURL }}/pdf/{{ page.slug }}.pdf">Download the PDF file</a>
+{% endif %}
+{{ page.content }}
+{% endblock %}
diff --git a/graymill/templates/pagination.html b/graymill/templates/pagination.html
new file mode 100644
index 0000000..0c5ed4d
--- /dev/null
+++ b/graymill/templates/pagination.html
@@ -0,0 +1,16 @@
+{% if DEFAULT_PAGINATION %}
+<p class="pagination-dir">
+    {% if articles_page.has_previous() %}
+        {% if articles_page.previous_page_number() == 1 %}
+            <a href="{{ SITEURL }}/{{ page_name }}.html">&#8678;</a>
+        {% else %}
+            <a href="{{ SITEURL }}/{{ page_name }}{{ articles_page.previous_page_number() }}.html">&#8678;</a>
+        {% endif %}
+    {% endif %}
+     {{ articles_page.number }} of {{ articles_paginator.num_pages }} 
+    {% if articles_page.has_next() %}
+        <a href="{{ SITEURL }}/{{ page_name }}{{ articles_page.next_page_number() }}.html">&#8680;</a>
+    {% endif %}
+</p>
+{% endif %}
+
diff --git a/graymill/templates/tag.html b/graymill/templates/tag.html
new file mode 100644
index 0000000..8186a7a
--- /dev/null
+++ b/graymill/templates/tag.html
@@ -0,0 +1,18 @@
+{% extends "index.html" %}
+{% block head %}
+    {{ super() }}
+    <meta name="twitter:creator" content="{{ TWITTER_USERNAME }}">
+    <meta name="twitter:url" content="{{ SITEURL }}/{{ tag.url }}">
+    <meta name="twitter:title" content="{{ SITENAME }} || {{ tag }}">
+    <meta name="twitter:description" content="Articles with the tag '{{ tag }}'">
+
+    <!-- Facebook Meta Data -->
+    <meta property="og:title" content="{{ SITENAME }} || {{ tag }}"/>
+    <meta property="og:description" content="Articles with the tag '{{ tag }}'"/>
+    <meta property="og:image" content="{{ AVATAR }}"/>
+{% endblock head %}
+{% block title %}{{ SITENAME }} - {{ tag }}{% endblock %}
+{% block heading %}
+    <h2>Tag: {{ tag }}</h2>
+{% endblock %}
+
diff --git a/graymill/templates/tags.html b/graymill/templates/tags.html
new file mode 100644
index 0000000..b9a80cb
--- /dev/null
+++ b/graymill/templates/tags.html
@@ -0,0 +1,21 @@
+{% extends "base.html" %}
+{% block head %}
+{{ super() }}
+<meta name="twitter:creator" content="{{ TWITTER_USERNAME }}">
+<meta name="twitter:url" content="{{ SITEURL }}/tags.html">
+<meta name="twitter:title" content="{{ SITENAME }} || Tags">
+<meta name="twitter:description" content="{{ SITENAME }} || Tags in this website">
+
+<!-- Facebook Meta Data -->
+<meta property="og:title" content="{{ SITENAME }} || Tags" />
+<meta property="og:description" content="{{ SITENAME }} || Tags" />
+<meta property="og:image" content="{{ AVATAR }}" />
+{% endblock head %}
+{% block content %}
+<h2>Tags</h2>
+<ol>
+{% for tag, articles in tags %}
+    <li><a href="{{ SITEURL }}/{{ tag.url }}">{{ tag }}</li>
+{% endfor %}
+</ol>
+{% endblock %}
diff --git a/graymill/templates/translations.html b/graymill/templates/translations.html
new file mode 100644
index 0000000..30429a4
--- /dev/null
+++ b/graymill/templates/translations.html
@@ -0,0 +1,6 @@
+{% if article.translations %}
+    <span>Languages: </span>
+    {% for translation in article.translations %}
+	    <a href="{{ SITEURL }}/{{ translation.url }}"><i class="icon-edit"></i>{{ translation.lang }}</a>
+    {% endfor %}
+{% endif %}