jekyll-rebellion 0.1.0 → 0.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 51b5200ade4fabeda4bd69ae8ca17151ed0cd17078123983faf573568ce71ae9
-  data.tar.gz: 1a4fe5fc41748fc8049a205db16dbd0fc5128246e2a7a89c634cc9ba325ac6af
+  metadata.gz: 204c8cdf810d6aa67b2e6b43a9fa9c80c8f868e5f5d923571c096e576bdbcee7
+  data.tar.gz: 0a9408cb7ca2d211e33621a84453be52b0c74c5b47cf8d8bcdfad7386f64f7fb
 SHA512:
-  metadata.gz: c16b9a1c6503262db5c8dbaaa038467640843d1243f0308ed825338bd5178dee91130496e7f95ce52f8c01af673a61ef4ba7d878b883801ee97d7e05c708293a
-  data.tar.gz: 81f0a9cf6630db81a7d4e3444aefb4c7f68e619c3a16359c46baa0146205c24719b723c188280bf4fffbdcba928fef5ec36115d6af7ef6a314025f700f4d0d92
+  metadata.gz: 59c87be691aa45f34ee42bebf32771b42a9cc13d9c6f61373d1b5ea81771c24e359a5d4e3750c9515d3b0d79edd02902377aca9f55eeaceafbb19f120892cbcd
+  data.tar.gz: 975fb1248f31cb29762d3a4f2a0257ceb988032afecf3345c7b065539956e544eb4e3b2f6421acd7e806f6c64a25d2cad06ae15b17fa443e78556a2434d88c55

data/_includes/blog-list.html

@@ -8,26 +8,64 @@
     {% capture next_month %}{{ post.previous.date | date: "%B" }}{% endcapture %}
 
     {% if forloop.first %}
-    <h2 id="{{ this_year }}-ref">{{this_year}}</h2>
-    <h3 id="{{ this_year }}-{{ this_month }}-ref">{{ this_month }}</h3>
-    <ol>
+        {% comment %}
+            <!-- Not including month and year at the top -->
+            <h2 id="{{ this_year }}-ref">{{this_year}}</h2>
+            <h3 id="{{ this_year }}-{{ this_month }}-ref">{{ this_month }}</h3>
+        {% endcomment %}
+    <div class="Rebellion-Blog-List">
     {% endif %}
 
-    <li class="li{{this_day}}"><a href="{{ post.url }}">{{ post.title }}</a></li>
+    <div class="Rebellion-Blog-Item">
+        <div class="top">
+                <div class="date">
+                    <span class="day-number">{{ post.date | date: "%e" }}</span>
+                    <span class="month">{{ post.date | date: "%b" }}</span>
+                </div>
+                <div class="description">
+                    <h4><a href="{{ post.url }}">{{ post.title }}</a></h4>
+                    {% if post.authors %}
+                    <span> 
+                        {% for a in post.authors %}
+                            {% if a.url %}<a href='/{{ a.url }}'>{{ a.name }}</a>{% else %}{{a.name}}{% endif %}{% if forloop.last == false %},{% endif %}
+                        {% endfor %}
+                    </span>
+                    {%endif%}
+                    <p>{% if post.summary %}
+                            {{ post.summary }}
+                        {% else if post.excerpt %}
+                            {{ post.excerpt }}
+                        {% endif %}</p>
+                </div>
+            </div>
+            {% if post.image %}
+            <a href="{{ post.url }}"><img src="{{ post.image }}" /></a>
+            {% endif %}
+            <div style="width: 100%">
+            {% if post.categories.size > 0 %}
+                <span style="float: right;">Categories: 
+                {% for c in post.categories %}
+                    <a href="/categories/{{ c }}">{{ c }}</a>{% if forloop.last == false %},{% endif %}
+                {% endfor %}
+                </span>
+            {% endif %}
+        </div>
+    </div>
+    
 
     {% if forloop.last %}
-    </ol>
+        </div>
     {% else %}
         {% if this_year != next_year %}
-        </ol>
+        </div>
         <h2 id="{{ next_year }}-ref">{{next_year}}</h2>
         <h3 id="{{ next_year }}-{{ next_month }}-ref">{{ next_month }}</h3>
-        <ol>
+        <div class="Rebellion-Blog-List">
         {% else %}    
             {% if this_month != next_month %}
-            </ol>
+            </div>
             <h3 id="{{ this_year }}-{{ next_month }}-ref">{{ next_month }}</h3>
-            <ol>
+            <div class="Rebellion-Blog-List">
             {% endif %}
         {% endif %}
     {% endif %}

data/_includes/footer.html

@@ -42,7 +42,7 @@
             </div>
         </nav>
     </div>
-        <p>This site uses the <a href="https://github.com/davidgundry/rebellion/">Rebellion</a> theme for Jekyll.
+        <p>This site uses the <a href="https://github.com/davidgundry/jekyll-rebellion/">Rebellion</a> theme for Jekyll.
         {% if site.copyright_notice %}
             {{ site.copyright_notice }}
         {% endif %}

data/_includes/header.html

@@ -5,7 +5,6 @@
     {% include mobile-header.html %}
     {% include desktop-header.html %}
 
-    
     {%- assign titles_size = site.pages | map: 'title' | join: '' | size -%}
     {% if site.header_pages %}
         {% assign titles_size = 0 %}

data/_layouts/default.html

@@ -1,8 +1,9 @@
+<!DOCTYPE html>
 {% include head.html %}
 <body>
     {% include header.html %}
 
-    <main class="Rebellion-main">
+    <main class="Rebellion-Main">
 
         {% if page.top_image %}
             {% if layout.image_big %}

data/_layouts/page.html

@@ -7,4 +7,3 @@ layout: default
         {{ content }}
     </div>
 </div>
-

data/_layouts/post.html

@@ -1,9 +1,13 @@
 ---
-layout: base-post
+layout: default
 ---
+
 <div class="Rebellion-Section">
     <div class="Rebellion-Wrapper-Wide">
         <h1>{{ page.title }}</h1>
+        {% if page.image %}
+            <img src="{{ page.image }}" />
+        {% endif %}
         {{ content }}
     </div>
 </div>

data/_sass/rebellion.scss

@@ -8,7 +8,6 @@
     font-display:swap
 }
 
-
 // Fonts
 $base-font-stack: "Crimson Text", serif !default;
 $base-font-size:   16pt !default;
@@ -18,7 +17,6 @@ $header-font-stack: "FucXed","Helvetica Neue",Helvetica,Arial,sans-serif;
 $small-font-size:  $base-font-size * 0.875 !default;
 $smaller-font-size:  $base-font-size * 0.7 !default;
 
-
 $table-text-align: left !default;
 
 // Width of the content area
@@ -32,6 +30,7 @@ $on-large:         1300px !default;
 
 $spacing-unit:     10px !default;
 $action-bar-height: 72px !default;
+$action-bar-height-mobile: 56px !default;
 $rounding: 5px;
 
 // Import partials.
@@ -39,6 +38,6 @@ $rounding: 5px;
   "rebellion/base",
   "rebellion/header",
   "rebellion/footer",
-  "rebellion/components"
+  "rebellion/content"
 ;
     

data/_sass/rebellion/base.scss

@@ -24,8 +24,6 @@ pre, code, blockquote, figure, table {
     margin: $spacing-unit*2 0;
     padding: 0;
 }
-h1 { text-align: center; }
-
 
 /**
  * Basic styling
@@ -39,7 +37,17 @@ body {
     flex-direction: column;
 }
 
- 
+h1 { 
+    text-align: center;
+    line-height: 1.1;
+    font-family: $header-font-stack;
+    margin: 1em 0 0.4em 0;
+}
+
+p {
+    margin: 1em 0;
+}
+
 img {
     max-width: 100%;
     vertical-align: middle;
@@ -137,9 +145,7 @@ ul {
         padding-right: 0.5em;
     }
 }
- 
-
- 
+  
 
 /**
 * Links
@@ -202,10 +208,8 @@ pre {
         padding-left: 0;
     }
 }
- 
 
  
- 
  /**
   * Tables
   */
@@ -239,8 +243,6 @@ table {
     }
 }
 
-
-  
 /**
 * Clearfix
 */
@@ -250,68 +252,6 @@ table {
     clear: both;
 }
  
-.Rebellion-Wrapper-Wide{
-    max-width: -webkit-calc(#{$content-width-wide} - (#{$spacing-unit}));
-    max-width:         calc(#{$content-width-wide} - (#{$spacing-unit}));
-    margin-right: auto;
-    margin-left: auto;
-    padding-right: $spacing-unit;
-    padding-left: $spacing-unit;
-    @extend %clearfix;
-
-}
-
-.Rebellion-Wrapper-Narrow{
-    max-width: -webkit-calc(#{$content-width-narrow} - (#{$spacing-unit}));
-    max-width:         calc(#{$content-width-narrow} - (#{$spacing-unit}));
-    margin-right: auto;
-    margin-left: auto;
-    padding-right: $spacing-unit;
-    padding-left: $spacing-unit;
-    @extend %clearfix;
-}
-
-.Rebellion-Main {
-    display: flex;
-    flex: 1 0 auto;
-    flex-direction: column;
-    display: block; //Defaults to 'inline' in IE 11
-}
-
-
-.Rebellion-Button {
-    display: inline-block;
-    background-color: $accent-color;
-    color: $accent-text-color;
-    padding: 0.5em 1em;
-    border-radius: $rounding;
-    font-family: $header-font-stack;
-    transition: background-color 0.3s  ease-in-out;
-    font-weight: normal;
-    &:hover {
-        text-decoration: none; 
-        background-color: $accent-color-dark;
-    }
-    &:visited {
-        color: $accent-text-color;
-    }
-}
-
-
-.Rebellion-Post-Info {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-evenly;
-    align-content: stretch;
-    padding-top: $spacing-unit*4;
-    font-size: $small-font-size;
-
-    > .box {
-        background-color: $grey-color-light;
-        padding: 0 $spacing-unit*2;
-        flex-basis: 250px;
-    }
-}
 
 .invert-text {
     color: $background-color;

data/_sass/rebellion/content.scss

@@ -0,0 +1,210 @@
+.Rebellion-Section {
+    padding: 10vh 0;
+    width: 100%;
+    position: relative;
+    box-sizing: border-box;
+    &:first-of-type {
+        padding-top: $action-bar-height-mobile + 50;
+
+        @media screen and (min-width: $on-small) {
+            padding-top: $action-bar-height + 50;
+        }
+    }
+}
+
+.Rebellion-Wrapper-Wide{
+    max-width: -webkit-calc(#{$content-width-wide} - (#{$spacing-unit}));
+    max-width:         calc(#{$content-width-wide} - (#{$spacing-unit}));
+    margin-right: auto;
+    margin-left: auto;
+    padding-right: $spacing-unit;
+    padding-left: $spacing-unit;
+    @extend %clearfix;
+}
+
+.Rebellion-Wrapper-Narrow{
+    max-width: -webkit-calc(#{$content-width-narrow} - (#{$spacing-unit}));
+    max-width:         calc(#{$content-width-narrow} - (#{$spacing-unit}));
+    margin-right: auto;
+    margin-left: auto;
+    padding-right: $spacing-unit;
+    padding-left: $spacing-unit;
+    @extend %clearfix;
+}
+
+.Rebellion-Main {
+    display: flex;
+    flex: 1 0 auto;
+    flex-direction: column;
+    display: block; //Defaults to 'inline' in IE 11
+}
+
+.Rebellion-Big-Picture {
+    background-position: center;
+    background-size: cover;
+    height: 100vh;
+    padding: 0;
+}
+
+.Rebellion-Half-Picture {
+    background-position: center;
+    background-size: cover;
+    padding: 0;
+    height: 45vh;
+}
+
+.Rebellion-Near-Bottom {
+    position: absolute;
+    bottom: 10%;
+    left: 0;
+    right: 0;
+}
+
+.Rebellion-Flex-Line {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+}
+
+.Rebellion-Button {
+    display: inline-block;
+    background-color: $accent-color;
+    color: $accent-text-color;
+    padding: 0.5em 1em;
+    border-radius: $rounding;
+    font-family: $header-font-stack;
+    transition: background-color 0.3s  ease-in-out;
+    font-weight: normal;
+    &:hover {
+        text-decoration: none; 
+        background-color: $accent-color-dark;
+    }
+    &:visited {
+        color: $accent-text-color;
+    }
+}
+
+.Rebellion-PullQuote {
+    background-color: $brand-color;
+    color: $brand-text-color;
+    font-family: $header-font-stack;
+    text-align: center;
+    padding: 130px 0 100px 0;
+
+    h1 {
+        text-align: left;
+        margin: 1em 0;
+        font-size: $base-font-size * 1.25 ;
+    }
+
+    @media screen and (min-width: 400px) {
+        h1 { font-size: $base-font-size * 1.5;}
+    }
+
+    @media screen and (min-width: 800px) {
+        h1 { font-size: $base-font-size * 2; }
+    }
+}
+
+.Rebellion-Post-Info {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    align-content: stretch;
+    padding-top: $spacing-unit*4;
+    font-size: $small-font-size;
+
+    > .box {
+        padding: 0 $spacing-unit*2;
+        flex: 0 1 300px;
+    }
+}
+
+.Rebellion-Blog-List{
+    li {
+        list-style-type: none;
+        counter-increment: list;
+        position: relative;
+        margin-left: 2.5em;
+    }
+
+    li:before {
+        font-weight: bold;
+        position: absolute;
+        left: -2.6em;
+        width: 2em;
+        text-align: right;
+        color: $text-color;
+        font-family: $header-font-stack;
+        font-size: 2em;
+    }
+}
+
+.Rebellion-Blog-Item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: $background-color;
+    box-shadow: 0 5px 10px $shadow-color;
+    padding: $spacing-unit;
+    padding-bottom: $spacing-unit /2;
+    margin: $spacing-unit;
+    max-width: $content-width-wide;
+    width: 90%;
+
+    & > img {
+        margin: $spacing-unit 0 $spacing-unit/2 0;
+    }
+
+    .top {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        width: 100%;
+
+        .date {
+            flex-basis: 60px;
+            flex-grow: 0;
+            flex-shrink: 0;
+
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            text-align: center;
+            font-family: $header-font-stack;
+            padding-right: $spacing-unit;
+
+            .day-number {
+                font-size: $base-font-size * 2;
+                border-bottom: 4px solid $xr-green;
+                line-height: 1;
+            }
+
+            .month {
+                font-size: $small-font-size; //$base-font-size * 0.8;
+                color: $text-color-light;
+            }
+        }
+
+        .description {
+            line-height: 1;
+            width: 100%;
+            font-size: $small-font-size;
+
+            h3, h4 {
+                margin-top: 5px;
+            }
+
+            .bottom-line {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                justify-content: space-between;
+                width: 100%;
+            }
+        }
+    }
+}
+