Merge pull request #666 from ePages-de/develop

Release v0.17.1

README.md

@@ -24,6 +24,7 @@ The content in the following folders may not be shared or adapted:
 
 * `assets/img/logos`,
 * `assets/img/pages/about`,
+* `assets/img/pages/instagram`,
 * `assets/img/pages/headers/private`,
 * `assets/img/pages/blog/images`,
 * `assets/img/pages/jobs`,

Rakefile

@@ -307,9 +307,12 @@ task :test_html do
                 /.*terms-and-conditions.*/,
                 /.*beyond-docs.*/]
 
+  file_ignore = [/.*instagram.*/]
+
   options = { disable_external: true,
               url_ignore: url_ignore,
               empty_alt_ignore: true,
+              file_ignore: file_ignore,
               check_html: true,
               allow_hash_href: true }
 

_data/instagram.yml

@@ -0,0 +1,9 @@
+blog:
+  image: /assets/img/pages/instagram/blog.jpg
+  text: <strong>13 useful VSCode shortcuts for faster development</strong>
+  link: /blog/methods-and-tools/13-useful-vscode-shortcuts-for-faster-development/
+
+job:
+  image: /assets/img/pages/instagram/job.jpg
+  text: We're hiring a<br /><strong>Java Engineer</strong>
+  link: https://epages-gmbh-jobs.personio.de/job/202108?language=de

_pages/instagram.html

@@ -8,24 +8,48 @@
 
   <img class="" src="/assets/img/logos/logo_life_at_epages.svg" />
 
-  <p>@life_at_epages</p>
+  <div style="margin-bottom: 50px;">
+    <div class="columns">
+      <a class="button" href="https://epages.com/en/">ePages Home</a>
 
-  <a href="https://epages.com/en/">ePages Home</a>
+      <a class="button" href="https://epages.com/en/career/">ePages Career</a>
+    </div>
 
-  <a href="https://epages.com/en/career/">ePages Career</a>
+    <a class="button" href="https://twitter.com/epages">Twitter @epages</a>
+  </div>
 
-  <a href="https://twitter.com/epages">Twitter @epages</a>
+  <div style="margin-bottom: 50px;">
+    <div class="columns">
+      <a class="button" href="https://developer.epages.com/blog/">Dev Blog</a>
 
-  <br />
+      <a class="button" href="https://developer.epages.com/devjobs/">Dev Jobs</a>
+    </div>
 
-  <a href="https://developer.epages.com/blog/">Dev Blog</a>
+    <a class="button" href="https://twitter.com/epagesdevs/">Twitter @epagesdevs</a>
+  </div>
 
-  <a href="https://developer.epages.com/devjobs/">Dev Jobs</a>
+  <div>
+    <div class="columns">
+      <a class="image" href="{{ site.data.instagram.job.link }}" style="background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('{{ site.data.instagram.job.image }}')">
+        <p>{{ site.data.instagram.job.text }}</p>
+        <span class="flag flag--job" style="background-image: url('/assets/img/pages/instagram/rocket.png')"></span>
+      </a>
 
-  <a href="https://twitter.com/epagesdevs/">Twitter @epagesdevs</a>
+      <a class="image" href="{{ site.data.instagram.blog.link }}" style="background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('{{ site.data.instagram.blog.image }}')">
+        <p>{{ site.data.instagram.blog.text }}</p>
+        <span class="flag flag--blog" style="background-image: url('/assets/img/pages/instagram/typewriter.png')"></span>
+      </a>
+    </div>
+  </div>
 
-  <br />
-
-  <a href="https://epages.com/en/legal-notice/">Legal Notice</a>
+  <a class="legal" href="https://epages.com/en/legal-notice/" style="text-decoration: underline;">Legal Notice</a>
 
 </div>
+
+<script defer src="https://use.fontawesome.com/releases/v5.0.2/js/all.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+
+<script>
+  var width = $('.button').width();
+  $('.image').height(`${width}px`);
+</script>

_sass/3-pages/_link_collection.sass

@@ -2,29 +2,92 @@ html
   background: $white !important
 
 .link-collection
+  max-width: 500px
+  margin: 0 auto
 
   img
     display: block
     margin: 0 auto 3rem
-    width: 25rem
+    width: 15rem
 
-  p
-    color: #afafaf
-    text-align: center
-    font-weight: 700
-    margin-bottom: 3rem
-
-  a
+  .button
+    +padding(10px null)
     background-color: #eb3b41
     color: $white
     display: block
-    width: 40rem
-    max-width: 80%
+    width: 100%
     text-align: center
-    padding: 10px 20px
-    margin: 0 auto 20px
     transition: $base-transition
 
     &:hover
       background-color: lighten(#eb3b41, 8%)
       transition: $base-transition
+
+  .columns
+    display: flex
+    justify-content: space-between
+    margin-bottom: 20px
+
+    .button
+      width: calc(50% - 10px)
+
+    .image
+      width: calc(50% - 10px)
+      background-size: cover !important
+      background-repeat: no-repeat !important
+      background-position: center !important
+      display: flex
+      justify-content: center
+      align-items: center
+      vertical-align: middle
+      transform: translateZ(0)
+      box-shadow: 0 0 1px rgba(0, 0, 0, 0)
+      backface-visibility: hidden
+      -moz-osx-font-smoothing: grayscale
+      transition-duration: 0.3s
+      transition-property: transform
+      position: relative
+
+      &:hover,
+      &:focus,
+      &:active
+        transform: scale(1.05)
+
+      p
+        font-size: 16px
+        font-family: "HelveticaNeue", sans-serif
+        margin: 0 10px
+        line-height: 1
+        color: #fff
+        text-align: center
+        text-shadow: 0 1px 3px rgba(50,50,50,0.4)
+
+        +grid-media($grid-medium)
+          font-size: 22px
+          line-height: 1.2
+          margin: 0 20px
+
+      .flag
+        +size(40px)
+        position: absolute
+        top: 0
+        right: 20px
+        background-size: 60px
+        background-repeat: no-repeat
+        background-position: center
+
+        +grid-media($grid-medium)
+          background-size: 80px
+          +size(50px)
+
+        &--blog
+          background-color: #4eb7a8
+
+        &--job
+          background-color: #EB3C41
+
+  .legal
+    margin: 0 auto
+    display: table
+    color: #EB3C41
+    margin-top: 30px