updates to the theme

1. Changes to blog template (Still not complete) 2. Changes to pagination 3. added few sample posts 4. changes to layouts for adding html 5 tags
olakara · Jun 24, 2014 · f897d90 · f897d90
1 parent 08cb0c6
commit f897d90
Show file tree

Hide file tree

Showing 12 changed files with 273 additions and 43 deletions.
diff --git a/_config.yml b/_config.yml
@@ -3,7 +3,7 @@ markdown: redcarpet
 pygments: true
 
 # Permalinks
-permalink:        /blog/:year/:month/:day/:title/
+permalink:        /blog/:year/:month/:day/:title
 
 # Setup
 title:            Jekyll Metro
@@ -18,10 +18,8 @@ author:         'Abdel Raoof Olakara'
 # Google Analytics
 gahandler: 'UA-52149651-1'
 
-# 
-Blog Configurations
-
-paginate: 5 # Posts per page on the blog index
+# Blog Configurations
+paginate: 2 # Posts per page on the blog index
 paginate_path: "/blog/page:num"
 destination: ./_site
 navigation:
@@ -33,4 +31,4 @@ navigation:
   url: /about/
 
 # Custom vars
-version:          0.1.0
+version:          0.2.0
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -1,12 +1,14 @@
-<div class="container">
-	<div class="row">
-		<div class="col-ms-12 text-center">
-			<a href="#"> About Me </a>&nbsp;<i class="fa fa-asterisk"></i>&nbsp;<a href="#"> Blog </a>&nbsp;<i class="fa fa-asterisk"></i>&nbsp; <a href="#"> Contact Me </a> <br/>
-			<hr/>
-				&copy; {{ site.time | date: '%Y' }} - {{site.author}}. All rights reserved.
-		</div>
-	</div>
-</div>
+<footer>
+    <div class="container">
+    	<div class="row">
+    		<div class="col-ms-12 text-center">
+    			<a href="#"> About Me </a>&nbsp;<i class="fa fa-asterisk"></i>&nbsp;<a href="#"> Blog </a>&nbsp;<i class="fa fa-asterisk"></i>&nbsp; <a href="#"> Contact Me </a> <br/>
+    			<hr/>
+    				&copy; {{ site.time | date: '%Y' }} - {{site.author}}. All rights reserved.
+    		</div>
+    	</div>
+    </div>
+</footer>
 <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),

diff --git a/_includes/head.html b/_includes/head.html
@@ -22,10 +22,13 @@
   <link rel="stylesheet" href="{{site.url}}/assets/css/font-awesome.css">
 
   <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
+
+  <!-- Modernizr -->
+  <script src="{{site.url}}/assets/js/modernizr.js"></script>
 
   <!-- Icons -->
-  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/public/apple-touch-icon-144-precomposed.png">
-  <link rel="shortcut icon" href="/public/favicon.ico">
+  <link rel="apple-touch-icon-precomposed" sizes="128x128" href="/images/favicon-128.png">
+  <link rel="shortcut icon" href="/images/favicon-16.ico">
 
   <!-- RSS -->
   <link rel="alternate" type="application/rss+xml" title="RSS" href="/atom.xml">

diff --git a/_layouts/master.html b/_layouts/master.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html class="no-js">
 
   {% include head.html %}
 

diff --git a/_posts/2014-06-24-another-sample-markdown.md b/_posts/2014-06-24-another-sample-markdown.md
@@ -0,0 +1,164 @@
+---
+layout: post
+title:  Another sample markdown
+date:   2014-06-24 23:28:58
+categories: design markdown
+---
+
+An h1 header
+============
+
+Paragraphs are separated by a blank line.
+
+2nd paragraph. *Italic*, **bold**, and `monospace`. Itemized lists
+look like:
+
+  * this one
+  * that one
+  * the other one
+
+Note that --- not considering the asterisk --- the actual text
+content starts at 4-columns in.
+
+> Block quotes are
+> written like so.
+>
+> They can span multiple paragraphs,
+> if you like.
+
+Use 3 dashes for an em-dash. Use 2 dashes for ranges (ex., "it's all
+in chapters 12--14"). Three dots ... will be converted to an ellipsis.
+
+
+
+An h2 header
+------------
+
+Here's a numbered list:
+
+ 1. first item
+ 2. second item
+ 3. third item
+
+Note again how the actual text starts at 4 columns in (4 characters
+from the left side). Here's a code sample:
+
+    # Let me re-iterate ...
+    for i in 1 .. 10 { do-something(i) }
+
+As you probably guessed, indented 4 spaces. By the way, instead of
+indenting the block, you can use delimited blocks, if you like:
+
+~~~
+define foobar() {
+    print "Welcome to flavor country!";
+}
+~~~
+
+(which makes copying & pasting easier). You can optionally mark the
+delimited block for Pandoc to syntax highlight it:
+
+~~~python
+import time
+# Quick, count to ten!
+for i in range(10):
+    # (but not *too* quick)
+    time.sleep(0.5)
+    print i
+~~~
+
+
+
+### An h3 header ###
+
+Now a nested list:
+
+ 1. First, get these ingredients:
+
+      * carrots
+      * celery
+      * lentils
+
+ 2. Boil some water.
+
+ 3. Dump everything in the pot and follow
+    this algorithm:
+
+        find wooden spoon
+        uncover pot
+        stir
+        cover pot
+        balance wooden spoon precariously on pot handle
+        wait 10 minutes
+        goto first step (or shut off burner when done)
+
+    Do not bump wooden spoon or it will fall.
+
+Notice again how text always lines up on 4-space indents (including
+that last line which continues item 3 above). Here's a link to [a
+website](http://foo.bar). Here's a link to a [local
+doc](local-doc.html). Here's a footnote [^1].
+
+[^1]: Footnote text goes here.
+
+Tables can look like this:
+
+size  material      color
+----  ------------  ------------
+9     leather       brown
+10    hemp canvas   natural
+11    glass         transparent
+
+Table: Shoes, their sizes, and what they're made of
+
+(The above is the caption for the table.) Pandoc also supports
+multi-line tables:
+
+--------  -----------------------
+keyword   text
+--------  -----------------------
+red       Sunsets, apples, and
+          other red or reddish
+          things.
+
+green     Leaves, grass, frogs
+          and other things it's
+          not easy being.
+--------  -----------------------
+
+A horizontal rule follows.
+
+***
+
+Here's a definition list:
+
+apples
+  : Good for making applesauce.
+oranges
+  : Citrus!
+tomatoes
+  : There's no "e" in tomatoe.
+
+Again, text is indented 4 spaces. (Alternately, put blank lines in
+between each of the above definition list lines to spread things
+out more.)
+
+Here's a "line block":
+
+| Line one
+|   Line too
+| Line tree
+
+and images can be specified like so:
+
+![example image](assets/images/favicon-128.png "An exemplary image")
+
+Inline math equations go in like so: $\omega = d\phi / dt$. Display
+math should get its own line and be put in in double-dollarsigns:
+
+$$I = \int \rho R^{2} dV$$
+
+And note that you can backslash-escape any punctuation characters
+which you wish to be displayed literally, ex.: \`foo\`, \*bar\*, etc.
+
+Done.
diff --git a/_posts/2014-06-24-markdown-basics.md b/_posts/2014-06-24-markdown-basics.md
@@ -0,0 +1,57 @@
+---
+layout: post
+title:  Markdown basics
+date:   2014-06-24 23:30:58
+categories: design markdown
+---
+
+Markdown is intended to be as easy-to-read and easy-to-write as is feasible.
+
+Readability, however, is emphasized above all else. A Markdown-formatted
+document should be publishable as-is, as plain text, without looking
+like it's been marked up with tags or formatting instructions. While
+Markdown's syntax has been influenced by several existing text-to-HTML
+filters -- including [Setext] [1], [atx] [2], [Textile] [3], [reStructuredText] [4],
+[Grutatext] [5], and [EtText] [6] -- the single biggest source of
+inspiration for Markdown's syntax is the format of plain text email.
+
+  [1]: http://docutils.sourceforge.net/mirror/setext.html
+  [2]: http://www.aaronsw.com/2002/atx/
+  [3]: http://textism.com/tools/textile/
+  [4]: http://docutils.sourceforge.net/rst.html
+  [5]: http://www.triptico.com/software/grutatxt.html
+  [6]: http://ettext.taint.org/doc/
+
+To this end, Markdown's syntax is comprised entirely of punctuation
+characters, which punctuation characters have been carefully chosen so
+as to look like what they mean. E.g., asterisks around a word actually
+look like \*emphasis\*. Markdown lists look like, well, lists. Even
+blockquotes look like quoted passages of text, assuming you've ever
+used email.
+
+
+
+<h3 id="html">Inline HTML</h3>
+
+Markdown's syntax is intended for one purpose: to be used as a
+format for *writing* for the web.
+
+Markdown is not a replacement for HTML, or even close to it. Its
+syntax is very small, corresponding only to a very small subset of
+HTML tags. The idea is *not* to create a syntax that makes it easier
+to insert HTML tags. In my opinion, HTML tags are already easy to
+insert. The idea for Markdown is to make it easy to read, write, and
+edit prose. HTML is a *publishing* format; Markdown is a *writing*
+format. Thus, Markdown's formatting syntax only addresses issues that
+can be conveyed in plain text.
+
+For any markup that is not covered by Markdown's syntax, you simply
+use HTML itself. There's no need to preface it or delimit it to
+indicate that you're switching from Markdown to HTML; you just use
+the tags.
+
+The only restrictions are that block-level HTML elements -- e.g. `<div>`,
+`<table>`, `<pre>`, `<p>`, etc. -- must be separated from surrounding
+content by blank lines, and the start and end tags of the block should
+not be indented with tabs or spaces. Markdown is smart enough not
+to add extra (unwanted) `<p>` tags around HTML block-level tags.
diff --git a/assets/css/app.css b/assets/css/app.css
@@ -23,10 +23,7 @@
 	color: #2672EC;
 }
 
-.profile {
-	/*background: url('../images/me.jpg') -50px !important*/
-}
-
+
 .tile {  
 	width: 100%;
 	display: inline-block;

diff --git a/assets/images/favicon-128.png b/assets/images/favicon-128.png
diff --git a/assets/images/favicon-16.ico b/assets/images/favicon-16.ico
diff --git a/assets/images/favicon-16.png b/assets/images/favicon-16.png
diff --git a/assets/js/modernizr.js b/assets/js/modernizr.js
diff --git a/blog/index.html b/blog/index.html
@@ -7,40 +7,45 @@
 <div class="container">
 
 	<header class="clearfix header">
-		<h1>Abdel Raoof's Blog</h1>				
+		<a href="{{site.baseurl}}"><span class="fa fa-arrow-circle-o-left fa-6">&nbsp;</span></a>&nbsp;&nbsp;&nbsp;<h1>Abdel Raoof's Blog</h1>				
 	</header>	
 
   <div class="posts">
     {% for post in paginator.posts %}
-    <div class="post">
+    <article class="post">
       <h1 class="post-title">
         <a href="{{site.baseurl}}{{ post.url }}">
           {{ post.title }}
         </a>
       </h1>
-
       <span class="post-date">{{ post.date | date_to_string }}</span>
-
+      <br/>
       {{ post.content }}
-    </div>
+    </article>
     {% endfor %}
   </div>
-
-  <div class="pagination">
-    {% if paginator.next_page %}
-      <a class="pagination-item older" href="/page{{paginator.next_page}}">Older</a>
-    {% else %}
-      <span class="pagination-item older">Older</span>
-    {% endif %}
-    {% if paginator.previous_page %}
-      {% if paginator.page == 2 %}
-        <a class="pagination-item newer" href="/">Newer</a>
-      {% else %}
-        <a class="pagination-item newer" href="/page{{paginator.previous_page}}">Newer</a>
-      {% endif %}
-    {% else %}
-      <span class="pagination-item newer">Newer</span>
-    {% endif %}
+
+  <br/>
+  <div class="row">
+    <div class="col-sm-6 text-left">
+        {% if paginator.next_page %}
+        <a class="btn btn-primary" href="{{paginate_path}}/{{paginator.next_page}}">Older</a>
+        {% else %}
+        <span class="btn btn-primary disabled">Older</span>
+        {% endif %}
+    </div>
+    <div class="col-sm-6 text-right">
+        {% if paginator.previous_page %}
+          {% if paginator.page == 2 %}
+            <a class="btn btn-primary" href="/">Newer</a>
+          {% else %}
+            <a class="btn btn-primary" href="/page{{paginator.previous_page}}">Newer</a>
+          {% endif %}
+        {% else %}
+          <span class="btn btn-primary disabled">Newer</span>
+        {% endif %}
+    </div>
   </div>
+
 </div>