Added new design for the new gallery function, new design for code bl…

…ocks

author.hbs

@@ -1,16 +1,16 @@
 {{!< default}}
-<header id="header" class="header {{#if author.cover_image}}cover-image {{/if}}animated fadeIn"{{#if author.cover_image}} style="background-image: url({{author.cover_image}})"{{/if}}>
+<header id="header" class="header {{#if primary_author.cover_image}}cover-image {{/if}}animated fadeIn"{{#if primary_author.cover_image}} style="background-image: url({{primary_author.cover_image}})"{{/if}}>
     <section class="header--top ">
         {{>header-navigation}}
     </section>
     <section class="hero post-meta">
         <div class="hero-content flex-row">
-            {{#if author.profile_image}}<img class="author-image animated fadeInUp delay-1" src="{{author.profile_image}}" alt="{{author.name}}">{{/if}}
-            <h1 class="author-title animated fadeInUp delay-2">{{author.name}}</h1>
+            {{#if primary_author.profile_image}}<img class="author-image animated fadeInUp delay-1" src="{{primary_author.profile_image}}" alt="{{primary_author.name}}">{{/if}}
+            <h1 class="author-title animated fadeInUp delay-2">{{primary_author.name}}</h1>
             <p class="author-data animated fadeInUp delay-3">
-                {{#if author.location}}<span class="location animated fadeInUp"><i class="fa fa-map-marker"></i>{{author.location}}</span>{{/if}}
-                {{#if author.website}}<span class="website animated fadeInUp"><i class="fa fa-link"></i> <a href="{{author.website}}">{{author.website}}</a></span>{{/if}}
-                {{#if author.bio}}<span class="bio animated fadeInUp">{{author.bio}}</span>{{/if}}</p>
+                {{#if primary_author.location}}<span class="location animated fadeInUp"><i class="fa fa-map-marker"></i>{{primary_author.location}}</span>{{/if}}
+                {{#if primary_author.website}}<span class="website animated fadeInUp"><i class="fa fa-link"></i> <a href="{{primary_author.website}}">{{primary_author.website}}</a></span>{{/if}}
+                {{#if primary_author.bio}}<span class="bio animated fadeInUp">{{primary_author.bio}}</span>{{/if}}</p>
         </div>
 
     </section>

default.hbs

@@ -20,6 +20,16 @@
         {{> footer}}
     </footer>
     {{ghost_foot}}
+    <script>
+        var images = document.querySelectorAll('.kg-gallery-image img');
+        images.forEach(function (image) {
+            var container = image.closest('.kg-gallery-image');
+            var width = image.attributes.width.value;
+            var height = image.attributes.height.value;
+            var ratio = width / height;
+            container.style.flex = ratio + ' 1 0%';
+        })
+    </script>
     <script id="__bs_script__">//<![CDATA[
     document.write("<script async src='http://HOST:3000/browser-sync/browser-sync-client.js?v=2.24.5'><\/script>".replace("HOST", location.hostname));
     //]]></script>

package.json

@@ -7,7 +7,7 @@
   "config": {
     "posts_per_page": 10
   },
-  "version": "2.0.0-beta",
+  "version": "2.0.0-RC1",
   "description": "Tell your story! A Ghost theme designed for photoblogging",
   "repository": "https://github.com/Reedyn/Saga",
   "license": "MIT",

sass/base/_base.scss

@@ -8,7 +8,7 @@ body {
     overflow-y: scroll;
     min-height: 100%;
     height: 100%;
-    background: darken($white, 5%);
+    background: white;
     color: $transparent-grey;
     font-size: 14px;
     font-size: 1.4rem;

sass/base/_typography.scss

@@ -196,23 +196,6 @@ code {
     font-family: $font-monospace;
 }
 
-pre {
-    margin:  {
-        top: 30px;
-        right: 20px;
-        bottom: 10px;
-        left: 20px;
-    }
-    word-wrap: break-word;
-    code {
-        padding: 0;
-        background: none;
-        font-size: 15px;
-        font-size: 1.5rem;
-        font-family: $font-monospace;
-    }
-}
-
 hr {
     height: 4px;
     border: 0;

sass/components/_content--card-full.scss

@@ -0,0 +1,10 @@
+.kg-card.kg-width-full {
+    img {
+        width: 100vw;
+        position: relative;
+        left: 50%;
+        right: 50%;
+        margin-left: -50vw;
+        margin-right: -50vw;
+    }
+}

sass/components/_content--card-gallery.scss

@@ -0,0 +1,29 @@
+.kg-card.kg-gallery-card {
+    margin: 0 0 1.5em;
+    .kg-gallery-container {
+        display: flex;
+        flex-direction: column;
+        margin: 1.5em auto;
+
+        .kg-gallery-row {
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+
+            &:not(:first-of-type) {
+                margin: 10px 0 0 0;
+            }
+            .kg-gallery-image {
+                &:not(:first-of-type) {
+                    margin: 0 0 0 10px;
+                }
+                img {
+                    display: block;
+                    margin: 0;
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+        }
+    }
+}

sass/components/_content--card-image.scss

@@ -0,0 +1,15 @@
+.kg-card.kg-image-card {
+    margin-top: 20px;
+    margin-bottom: 20px;
+
+    @include respond-to(small) {
+        margin-top: 40px;
+        margin-bottom: 40px;
+    }
+
+    figcaption {
+        text-align: center;
+        font-size: 14px;
+        line-height: 50px;
+    }
+}

sass/components/_content--card-wide.scss

@@ -0,0 +1,14 @@
+.kg-card.kg-width-wide {
+    width: 100vw;
+    max-width: 100%;
+
+    @include respond-to(medium) {
+        max-width: $wrapper-width+200px;
+    }
+    @include respond-to(large) {
+        max-width: $wrapper-width+400px;
+    }
+    @include respond-to(huge) {
+        max-width: $wrapper-width+600px;
+    }
+}

sass/components/_content--code-block.scss

@@ -0,0 +1,27 @@
+pre {
+    width: 100vw;
+    max-width: 100%;
+    padding: 15px;
+    background: darken($white, 3%);
+    overflow-x: scroll;
+    margin:  {
+        top: 0;
+        right: 0;
+        bottom: 10px;
+        left: 0;
+    }
+    word-wrap: break-word;
+    code {
+        padding: 0;
+        background: none;
+        font-size: 12px;
+        font-size: 1.2rem;
+        font-family: $font-monospace;
+
+
+        @include respond-to(medium) {
+            font-size: 15px;
+            font-size: 1.5rem;
+        }
+    }
+}

sass/components/_content--media.scss

@@ -1,57 +1,6 @@
 .content {
     img {
-        display: block;
-        margin-left: auto;
-        margin-left: calc(0% - 20px);
         width: 100%;
-        width: calc(100% + 40px);
         height: auto;
     }
-
-    figure.kg-image-card {
-        position: relative;
-        right: 50%;
-        left: 50%;
-        margin-top: 20px;
-        margin-right: -50vw;
-        margin-bottom: 20px;
-        margin-left: -50vw;
-        width: 100vw;
-
-        @include respond-to(small) {
-            margin-top: 40px;
-            margin-bottom: 40px;
-        }
-        img.kg-image {
-            margin: 0 auto;
-            max-width: calc(100vw - 40px);
-            width: initial;
-
-            @include respond-to(small) {
-                max-width: $wrapper-width+80px;
-            }
-            &.kg-image-wide {
-                max-width: 100vw;
-
-                @include respond-to(medium) {
-                    max-width: $wrapper-width+200px;
-                }
-                @include respond-to(large) {
-                    max-width: $wrapper-width+400px;
-                }
-                @include respond-to(huge) {
-                    max-width: $wrapper-width+600px;
-                }
-            }
-            &.kg-image-full {
-                max-width: 100vw;
-                width: 100vw;
-            }
-        }
-        figcaption {
-            text-align: center;
-            font-size: 14px;
-            line-height: 50px;
-        }
-    }
 }

sass/pages/_home.scss

@@ -0,0 +1,3 @@
+.home-template {
+    background: darken(white, 5%);
+}

sass/pages/_page.scss

@@ -1,26 +1,30 @@
 .page-template .main {
-    padding: 10px 20px;
     background: #FFFFFF;
+    margin: 0 auto;
+    width: 100%;
 
-    @include respond-to(medium) {
-        padding: 30px 20px;
-    }
-    @include respond-to(large) {
-        padding: 40px 20px;
-    }
-    .page {
-        margin: 0 auto;
+    .content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
         max-width: $wrapper-width;
+        padding: 10px 20px;
+        margin: auto;
+        @include respond-to(medium) {
+            padding: 30px 20px;
+        }
+        @include respond-to(large) {
+            padding: 40px 20px;
+        }
+        > * {
+            min-width: 100%;
+        }
 
-        @include respond-to(small) {
+        > *:first-child {
+            margin-top: 0;
         }
-        .content {
-            > *:first-child {
-                margin-top: 0;
-            }
-            > *:last-child {
-                margin-bottom: 0;
-            }
+        > *:last-child {
+            margin-bottom: 0;
         }
     }
 }

sass/pages/_post.scss

@@ -1,26 +1,31 @@
 .post-template .main {
-    padding: 10px 20px;
     background: #FFFFFF;
+    margin: 0 auto;
+    width: 100%;
 
-    @include respond-to(medium) {
-        padding: 30px 20px;
-    }
-    @include respond-to(large) {
-        padding: 40px 20px;
-    }
-    .post {
-        margin: 0 auto;
+    .content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
         max-width: $wrapper-width;
+        padding: 20px;
+        margin: auto;
+
+        @include respond-to(medium) {
+            padding: 30px 20px;
+        }
+        @include respond-to(large) {
+            padding: 40px 20px;
+        }
+        > * {
+            min-width: 100%;
+        }
 
-        @include respond-to(small) {
+        > *:first-child {
+            margin-top: 0;
         }
-        .content {
-            > *:first-child {
-                margin-top: 0;
-            }
-            > *:last-child {
-                margin-bottom: 0;
-            }
+        > *:last-child {
+            margin-bottom: 0;
         }
     }
 }

sass/shame.scss

@@ -12,4 +12,10 @@
             margin-left: -50%;
         }
     }
+}
+
+/* Fix for 100vw and horizontal scrollbar */
+
+body {
+    overflow-x: hidden;
 }

sass/utils/_variables.scss

@@ -26,5 +26,5 @@ $breakpoints: (
     "small": (min-width: $small),
     "tiny": (min-width: $tiny),
 );
-$wrapper-width: 600px;
+$wrapper-width: 800px;
 $gutter: 20px;