Merge pull request #57 from ShortTechDE/development

Development
ShortTechDE · Apr 22, 2020 · c02d2be · c02d2be
2 parents 482f875 + 8365d42
commit c02d2be
Show file tree

Hide file tree

Showing 8 changed files with 120 additions and 12 deletions.
diff --git a/assets/scss/style.scss b/assets/scss/style.scss
@@ -873,6 +873,7 @@ section.page-template {
       }
 
       div.kg-gallery-row {
+        margin-top: 20px;
         display: flex;
         flex-direction: row;
         justify-content: center;
@@ -900,6 +901,7 @@ section.page-template {
             display: block;
             width: 100%;
             height: 100%;
+            object-fit: cover;
             border-radius: 10px;
             @include lighter-shadow();
 
@@ -1072,6 +1074,68 @@ section.page-template {
   }
 }
 
+aside.post-suggestions {
+  width: 100%;
+  margin-bottom: 150px;
+  margin-top: -30px;
+
+  @media #{$small-device} {
+    margin-top: -50px;
+  }
+
+  div.container {
+    display: flex;
+    flex-direction: row;
+
+    @media #{$small-device} {
+      flex-direction: column;
+    }
+
+    a {
+      text-decoration: none;
+      color: currentColor;
+      display: flex;
+      flex: 1;
+      transition: all $default-transition-time;
+
+      &:hover {
+        transform: translate(0, -0.3em);
+      }
+
+      @media #{$small-device} {
+        margin-top: 20px;
+      }
+    }
+
+    article {
+      display: flex;
+      align-items: center;
+      padding: 30px;
+      border-radius: 10px;
+      margin: 0 20px;
+      width: 100%;
+      @include shadow();
+
+      @media (prefers-color-scheme: dark) {
+        @include dark-shadow();
+      }
+
+      @media #{$small-device} {
+        margin: 0 0;
+      }
+
+      span {
+        color: #FFF;
+        text-transform: uppercase;
+        font-size: 12px;
+        display: block;
+        text-decoration: none;
+        font-weight: 600;
+      }
+    } 
+  }
+}
+
 /* Error */
 section.error {
   padding-top: 100px;

diff --git a/default.hbs b/default.hbs
@@ -58,7 +58,7 @@
 
     <script>
         let page = 2;
-        let url_blog = window.location.href;
+        let url_blog = window.location.href.replace("\/#", "/");
         let ids = ['p31', 'p32', 'p33', 'p21', 'p22', 'p1']
         let max_page = {{ pagination.pages }};
         let currentlyLoading = false;
@@ -105,4 +105,4 @@
     {{ghost_foot}}
 </body>
 
-</html>
+</html>
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "ingenious",
   "description": "The theme that powers the ingenious german tech blog ShortTech.",
   "demo": "https://shorttech.de",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "scripts": {
     "start": "gulp && gulp develop",
     "build": "gulp",
@@ -48,6 +48,26 @@
     "sass": "^1.26.3"
   },
   "config": {
-    "posts_per_page": 6
+    "posts_per_page": 6,
+    "image_sizes": {
+      "xxs": {
+        "width": 30
+      },
+      "xs": {
+        "width": 100
+      },
+      "s": {
+        "width": 400
+      },
+      "m": {
+        "width": 600
+      },
+      "l": {
+        "width": 1000
+      },
+      "xl": {
+        "width": 1920
+      }
+    }
   }
 }
diff --git a/partials/footer.hbs b/partials/footer.hbs
@@ -14,7 +14,7 @@
                             <a href="/impressum" class="link">Impressum</a>
                         </li>
                         <li class="entry">
-                            <a href="/datenschutz" class="link">Datenschutz</a>
+                            <a href="/datenschutzerklaerung" class="link">Datenschutz</a>
                         </li>
                     </ul>
                 </div>
@@ -57,7 +57,7 @@
                 Copyright &copy; ShortTech.de 2016 - {{date format="YYYY"}}
             </li>
             <li class="entry">
-                Version 1.2.0
+                Version 1.2.1
             </li>
             <li class="entry">
                 Mit ❤️ &amp;
@@ -67,7 +67,7 @@
                     <span>🏳️‍🌈 aus Greifswald</span>
                     <span>🏳️‍🌈 aus Groß-Umstadt</span>
                     <span>🏳️‍🌈 aus Frankfurt</span>
-                    <span>🏳️‍🌈 aus Europa</span>
+                    <span>🏳️‍🌈 aus Trebsen</span>
                 </div>
             </li>
         </ul>

diff --git a/partials/next-post.hbs b/partials/next-post.hbs
@@ -0,0 +1,10 @@
+<a href="{{url}}">
+    <article class="next-article {{post_class}}" 
+        style="background: linear-gradient(to left, rgba(0,0,0,0.2), rgba(0,0,0,0.7)), url({{img_url feature_image size="l"}}) no-repeat center / cover, #111111"
+        data-aos="fade-up" data-aos-duration="800" data-aos-easing="ease-out-cubic" data-aos-delay="100">
+        <div class="content">
+            <span>{{primary_tag.name}}</span>
+            <h1 class="title">{{title}}</h1>
+        </div>
+    </article>
+</a>
diff --git a/partials/post-card.hbs b/partials/post-card.hbs
@@ -1,7 +1,7 @@
 <article class="article {{post_class}}" data-aos="fade-up" data-aos-duration="800" data-aos-easing="ease-out-cubic"
     data-aos-delay="100">
     {{#if feature_image}}
-    <a href="{{url}}"><img class="thumbnail" src="{{feature_image}}" alt="{{title}}" /></a>
+    <a href="{{url}}"><img class="thumbnail" src="{{img_url feature_image size="s"}}" alt="{{title}}" /></a>
     {{/if}}
     <div class="content">
         <a href="{{primary_tag.url}}" class="category">{{primary_tag.name}}</a>

diff --git a/partials/top-story.hbs b/partials/top-story.hbs
@@ -1,5 +1,5 @@
 <header class="page-header top-story"
-    style="background: linear-gradient(to top, rgba(0,0,0,0.4), rgba(0,0,0,0.3)), url({{feature_image}}) no-repeat center / cover, #111111">
+    style="background: linear-gradient(to top, rgba(0,0,0,0.4), rgba(0,0,0,0.3)), url({{img_url feature_image size="xl"}}) no-repeat center / cover, #111111">
     <div class="content container">
         <h1 class="headline">{{title}}</h1>
         <a class="button" href="{{url}}">Lesen</a>

diff --git a/post.hbs b/post.hbs
@@ -1,7 +1,6 @@
 {{!< default}}
 
 <main>
-
     {{#post}}
     <header class="page-header article"
         style="background: linear-gradient(to top, rgba(0,0,0,0.4), rgba(0,0,0,0.3)), url({{feature_image}})  no-repeat center / cover, #111111">
@@ -32,6 +31,21 @@
             {{content}}
         </div>
     </section>
-    {{/post}}
+</main>
+<aside class="post-suggestions">
+    <div class="container">
+        {{#next_post}}
+            {{> "next-post"}}
+        {{/next_post}}
+
+        {{#prev_post}}
+            {{> "next-post"}}
+        {{/prev_post}}
+    </div>
+</aside>
+{{/post}}
 
-</main>
+<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
+<script>
+    AOS.init();
+</script>