charlie-lee-theme 0.2.1 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 820506346cb846ddbb4fcdd9294073fc8bb476c3
-  data.tar.gz: 7ad474a297ae550c0e6424c6ef88ca71dd157354
+  metadata.gz: feb4e92e591e011b358aaad0f8fe2e35114b9a75
+  data.tar.gz: dcbef87ac336876f0fcdb9344c8f413009acdd57
 SHA512:
-  metadata.gz: 68e933e83b581475819dc5acdff912731351a4501e792bcd0c6a22c3fe00f526b5beb1cdbf967ceaac311cb91eea1c34308b5f773bd54abcfaa12ef8bf4fc6ab
-  data.tar.gz: fe2378b6ae4771f0bc122001b58939b0634ef0c3726e817e8b73513155eb921c1464ddb6b648067ce29acf6e5793171e3111d5d54176a1bc33325cdfb0fb4f62
+  metadata.gz: c399eeef31e179946e43d519c763d1d6e028e7e4dde562f434f08dd3e8ccb3e2c0bbea8b8af886630daafc1e4df7afd310b01b24e2113f95166de8e897a71f91
+  data.tar.gz: 184857f0e2a87db11f26a7c3a2e93252718ba3dd08530fbae9b10ffbdcea9bb043e8bbd336ab757a8118741e32b2796fdeb522186426a6a7dc6d86a9ff2b959f

data/README.md

@@ -30,7 +30,7 @@ Or install it yourself as:
 
 #### page
 
-The default layout.
+The default layout. If an `img` is specified it will displayed behind the title.
 
 ```yaml
 ---
@@ -42,7 +42,7 @@ Page contents.
 
 #### post
 
-Creates a page with the page's author and date of creation displayed.
+Creates a page with the page's author and date of creation displayed. If an `img` is specified it will displayed behind the title.
 
 ```yaml
 ---
@@ -57,22 +57,23 @@ Post contents.
 
 #### home
 
-Creates a page with a grid displaying recent posts. The content entered on the page will be displayed as text in the page's hero image.
-
-If a collection is specified, the pages in that will be displayed instead of the recent posts.
+* Creates a page with a grid displaying recent posts. The content entered on the page will be displayed as text in the page's hero image.
+* If an `img` is specified it will used as the hero image.
+* If a `collection` is specified, the pages in that will be displayed instead of the recent posts.
 
 ```yaml
 ---
 title: Home
 layout: home
 collection: posts
+img: assets/image.png
 ---
 Hero image text.
 ```
 
 #### category
 
-Creates a page listing the posts in the category matching the `title` of the page.
+Creates a page listing the posts in the category matching the `title` of the page. If an `img` is specified it will displayed behind the title.
 
 ```yaml
 ---

data/_includes/header.html

@@ -1,6 +1,6 @@
 <header>
 <nav>
-  <div id="mobile-menu-toggle">||||</div>
+  <div id="mobile-menu-toggle">|||</div>
   <div id="logo">
     <a href="{{ site.baseurl }}/index.html">{{ site.title }}</a>
   </div>

data/_layouts/category.html

@@ -6,7 +6,7 @@
     {% include header.html %}
 
     <main>
-      <header>
+      <header style="background-image: url('{{ page.img }}');">
         <h1>Category: {{ page.title }}</h1>
       </header>
 

data/_layouts/home.html

@@ -10,6 +10,11 @@
         <div>
           <h1>{{ content | strip_html }}</h1>
         </div>
+        {% if page.img %}
+        <img src="{{ page.img }}">
+        {% else %}
+        <section style="height: 15em; width: 100%"></div>
+        {% endif %}
       </header>
 
       <div class="gallery cols-3">

data/_layouts/page.html

@@ -6,7 +6,7 @@
     {% include header.html %}
 
     <main>
-      <header>
+      <header style="background-image: url('{{ page.img }}');">
         <h1>
           {% if page.title %} {{ page.title }}
           {% else %} {{ site.title }}

data/_layouts/post.html

@@ -6,7 +6,7 @@
     {% include header.html %}
 
     <main>
-      <header>
+      <header style="background-image: url('{{ page.img }}');">
         <h1>
           {% if page.title %} {{ page.title }}
           {% else %} {{ site.title }}

data/assets/main.css

@@ -1,7 +1,5 @@
 /*!
-  Main style sheet for COM1008 Assignment
-  Author: Charles Lee
-  Created: 09/11/16
+  Main style sheet for charlie-lee-theme
 */
 
 /* ================================
@@ -38,7 +36,7 @@
    -------------------------------- */
 
 body {
-  font-family: "Roboto", sans-serif;
+  font-family: Helvetica, Arial, sans-serif;
 }
 p {
   line-height: 1.3em;
@@ -56,11 +54,6 @@ a, a:visited {
 }
 a:hover { color: rgb(4,81,94); }
 
-/* ===Headings=== */
-h1, h2 {
-  font-family: "Montserrat", sans-serif;
-}
-
 /* ===Elements that are only displayed when no CSS is avaliable=== */
 .alt {
   display: none;
@@ -155,24 +148,16 @@ aside ul {
 
 /* ===Global header===*/
 header {
-  background-color: rgb(0,83,133);
+  background-color: rgb(0,0,0);
 }
 
 /* ===Logo=== */
 #logo {
-  background-color: rgb(0,0,0);
-  font-family: 'Merriweather', serif;
   font-size: 1.5em;
   font-weight: 600;
   margin: 0;
   text-align: center;
 }
-#logo .fa-coffee::after {
-  /* Creates a space after the logo symbol relative to font-size */
-  color: transparent;
-  content: "-";
-  text-shadow: none;
-}
 #logo a:hover {
   background-color: rgb(30,30,30);
   text-decoration: none;
@@ -196,14 +181,37 @@ main header h1 {
 }
 
 /* ===Hero headers===*/
+.hero {
+  align-items: center;
+  box-sizing: border-box;
+  display: flex;
+  overflow: hidden;
+  position: relative;
+}
 .hero div {
-  margin: 10% auto;
+  align-items: center;
+  background-color: rgba(0,0,0,0.5);
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 2;
 }
 .hero h1 {
+  background-color: transparent;
+  color: rgb(255,255,255);
   display: inline;
-  font-family: "Coming Soon", cursive;
+  line-height: 1.2em;
+  margin: 0;
+  padding: 0;
+  text-shadow: 0px 0px 10px rgb(0, 0, 0);
   white-space: pre-wrap;
 }
+.hero img {
+  width: 100%;
+}
 
 /* 1.4. NAVIGATION
    -------------------------------- */
@@ -251,6 +259,7 @@ nav li.highlight:nth-of-type(2n+2) a {
   padding: 10px;
   position: absolute;
   right: 0;
+  transform: rotate(90deg);
 }
 #mobile-menu-toggle:hover {
   color: rgb(212,212,212);
@@ -515,7 +524,7 @@ footer li:last-child:after {
     width: 100%;
   }
   article {
-    max-width: 900px;
+    max-width: 800px;
     padding: 0 20px;
   }
   article.with-sidebar {
@@ -552,15 +561,16 @@ footer li:last-child:after {
     max-width: 1200px;
   }
   main header h1 {
-    max-width: 900px;
+    max-width: 800px;
   }
 
   /* ===Hero headers===*/
-  .hero div {
-    max-width: 900px;
+  .hero {
+    max-height: 25em;
   }
   .hero h1 {
     font-size: 3.5em;
+    max-width: 800px;
   }
 
   /* 3.3. NAVIGATION
@@ -570,7 +580,7 @@ footer li:last-child:after {
      display: flex;
     /* Moves header contents onto one row */
     flex-flow: row wrap;
-    max-width: 900px;
+    max-width: 1200px;
   }
   nav ul, header nav ul.hidden {
     display: block;

data/assets/main.js

@@ -1,5 +1,5 @@
 /*!
-  JavaScript used on the entire website.
+  Main JavaScript file for charlie-lee-theme.
 */
 
 var mobileToggle = document.getElementById("mobile-menu-toggle"),

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: charlie-lee-theme
 version: !ruby/object:Gem::Version
-  version: 0.2.1
+  version: 0.3.0
 platform: ruby
 authors:
 - Charlie Lee
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-12-18 00:00:00.000000000 Z
+date: 2017-01-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll