Merge pull request #705 from aleylara/master

Peli-Kiera: Fix alignment issues & missing updated README.md

4 files changed, 54 insertions, 35 deletions

diff --git a/Peli-Kiera/README.md b/Peli-Kiera/README.md
index 1a9b6b2..13415b1 100644
--- a/Peli-Kiera/README.md
+++ b/Peli-Kiera/README.md
@@ -24,14 +24,29 @@ In order to get read times and links between articles, the theme requires [pelic
 
 ```bash
 cd project-dir/
+# Please note the plugins repo is quite large and you only need the two.
 git clone https://github.com/getpelican/pelican-plugins
 
 # Add path to your plugins directory in pelicanconf.py
 PLUGIN_PATHS = ['pelican-plugins']
 PLUGINS = ['readtime', 'neighbors']
+```
+A sample article header.
+```text
+Title: Simple is better than complex 
+Date: 2018-11-14
+Tags: python, jupyter, library
+Description: The Zen of Python
+Category: Python
+
+### Introduction
 
-# Go ahead create few articles and populate output
-pelican ./content
+This is a standard paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+``` 
+Go ahead and create few articles in respective directories.
+```bash
+# Generate articles and populate output
+pelican content -o output -s pelicanconf.py
 # start the local server on http://localhost:8000/
 pelican --autoreload --listen
 ```
@@ -40,31 +55,39 @@ Final project directory structure should look similiar to this.
 
 ```bash
 (Pelican) ➜ project-dir tree
-│
-├── content
-│   ├── images
-│   │   ├── camera-2008479_640.png
-│   │   ├── camera-wide.png
-│   │   └── wide-wide.png
-│   ├── pages
-│   │   └── about.md
-│   └── Posts
-│       ├── article-one.md
-│       └── article-two.md
+│                                  
 ├── Makefile
-├── output     
+├── content/
+│   ├── Python/
+│   │   ├── article-one.md
+│   │   ├── article-two.md
+│   │   └── article-three.md   
+│   ├── Research/
+│   │   ├── article-one.md
+│   │   ├── article-two.md
+│   │   └── article-three.md
+│   ├── images/
+│   │   ├── camera-2008479_640.png
+│   │   ├── camera-wide.png
+│   │   └── wide-wide.png
+│   └── pages/
+│       └── about.md
+├── output/ 
+│ 
 ├── pelicanconf.py
-├── pelican-plugins
+├── pelican-plugins/
 │   ├── neighbors
-│   │   
+│   │   ├── Readme.rst
+│   │   ├── __init__.py
+│   │   └── neighbors.py
 │   └── readtime
-│       
+│       ├── README.md
+│       ├── __init__.py
+│       └── readtime.py     
 ├── publishconf.py
-├── __pycache__
-│   
 ├── tasks.py
 └── themes
-    └── Peli-Kiera
+    └── Peli-Kiera/
 ```
 
 ### Settings
@@ -78,17 +101,18 @@ from __future__ import unicode_literals
 AUTHOR = 'Author'
 COPYRIGHT = '2019'
 SITENAME = 'Site-Name'
-SITEURL = ''
-SITESUBTITLE = Site Subtitle'
+SITEURL = 'https://www.example.com'
+SITESUBTITLE = 'Site Subtitle'
 PATH = 'content'
 TIMEZONE = 'America/New_York'
 DEFAULT_LANG = 'en'
 
 THEME = 'themes/Peli-Kiera'
-PLUGIN_PATHS = ['plugins']
+PLUGIN_PATHS = ['pelican-plugins']
 PLUGINS = ['readtime', 'neighbors']
 STATIC_PATHS = ['images']
-SUMMARY_MAX_LENGTH = 60
+# Article summary length on main index page
+SUMMARY_MAX_LENGTH = 100
 DEFAULT_PAGINATION = 10
 GITHUB_URL = 'https://github.com/'
 
@@ -134,14 +158,14 @@ The pagination is presented with the current page and 3 neighboring pages on eit
 Images can be moved on page by adding the tag `#float-right`, `#float-left`, `#mid` and `#full` in your markdown.
 
 ```markdown
-![Title]({static}/images/my_image-600x400.png#float-right "")
+![Title]({static}/images/my_image-600x400.png#float-right "camera icon")
 ``` 
   
 Similarly, the placement can also be applied to html directly by wrapping images in a `<figure class="placement">` tag.
 
 ```html
 <figure class="float-left">
-    <img src="path-to/images/my_image-600x400.png" alt="">
+    <img src="path-to/images/my_image-600x400.png" alt="camera icon">
 </figure>
 ``` 
 Minimum image width of 600px is recommended. Images scale accordingly on smaller screens.
diff --git a/Peli-Kiera/static/css/main.css b/Peli-Kiera/static/css/main.css
index f1ad72c..fdf3135 100644
--- a/Peli-Kiera/static/css/main.css
+++ b/Peli-Kiera/static/css/main.css
@@ -90,16 +90,13 @@ time {
 
 #container nav ul li {
   display: flex;
+  flex-direction: column-reverse;
   margin-left: 1em;
   align-items: end;
 }
-#container nav ul li a {
-  line-height: 1.4em;
-}
 
 #container nav ul li a.active {
-  border-bottom: 0.2em solid #666666;
-  line-height: 1.4em;
+  border-bottom: 0.4em solid #666666;
 }
 
 #container main {
@@ -192,7 +189,7 @@ time {
 #container main section pre {
   background-color: #f5f5f5;
   overflow-x: auto;
-  padding: 0.8em;
+  padding: 0.8em 0.1em 0.8em 0.8em;
   font-size: 0.8em;
   box-shadow: 0 -1px 0 #bbbbbb inset;
 }
@@ -397,7 +394,6 @@ figure.float-right figcaption {
 
 table {
   width: 100%;
-  border-bottom: solid 1px #cecece;
 }
 
 table thead {
diff --git a/Peli-Kiera/static/css/pygment.css b/Peli-Kiera/static/css/pygment.css
index 254c455..67a9cb9 100644
--- a/Peli-Kiera/static/css/pygment.css
+++ b/Peli-Kiera/static/css/pygment.css
@@ -1,7 +1,6 @@
 .highlight .hll { background-color: #ffffcc }
 .highlight  { background: #f8f8f8; }
 .highlight .c { color: #8f5902; font-style: italic } /* Comment */
-.highlight .err { color: #a40000; border: 1px solid #ef2929 } /* Error */
 .highlight .g { color: #000000 } /* Generic */
 .highlight .k { color: #204a87; font-weight: normal } /* Keyword */
 .highlight .l { color: #000000 } /* Literal */
diff --git a/Peli-Kiera/templates/page.html b/Peli-Kiera/templates/page.html
index 65ee958..b5e56cf 100644
--- a/Peli-Kiera/templates/page.html
+++ b/Peli-Kiera/templates/page.html
@@ -6,7 +6,7 @@
 {% block content %}
     <main>
         <section>
-            <h2>{{ page.title }}</h2>
+            <h1>{{ page.title }}</h1>
             {% import 'translations.html' as translations with context %}
             {{ translations.translations_for(page) }}
             {{ page.content }}