Switch to design v2

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}

Makefile

@@ -1,7 +1,7 @@
 clean:
 	rm -rf _site/*
 
-debug:
+dev:
 	bundle exec jekyll serve --watch --baseurl=
 
 build_test: clean

_config.yml

@@ -19,13 +19,18 @@ sass:
 
 # Holzwerke Categories/Tags
 holzwerke_tags:
+  garderobe: "Garderoben"
   tische: "Tische"
   schraenke: "Schränke"
   wohnen: "Wohnen"
   kueche: "Küche"
   geschenke: "Geschenke"
 
+
 # Schlüesselanhänger Categories/Tags
 schluesselanhaenger_tags:
   geschenke: "Geschenke"
-  b2b: "B2B"  
+  hz: "Hochzeit"
+  hotel: "Hotels"
+  werbung: "Werbung"
+

_includes/image.html

@@ -1,3 +1,3 @@
 <div class="img-wrapper">
-	<img class="rounded {{ include.type }}" src="{{ include.url | prepend: site.baseurl }}" alt="{{ include.description }}" />
+	<img class="{{ include.type }}" src="{{ include.url | prepend: site.baseurl }}" alt="{{ include.description }}" />
 </div>

_layouts/holzwerk.html

@@ -39,7 +39,7 @@ <h1 class="content-head center">{{ page.title }}</h1>
 		{% endif %}
 
 		{% if page.path contains '_posts' %}
-			<p><a href="/{{ pathsegments[1] | prepend: site.baseurl }}">zurück</a></p>
+			<p><a href="/{{ pathsegments[1] | prepend: site.baseurl }}" onclick="history.back(); return false;">zurück</a></p>
 		{% endif %}
 
   </article>

_layouts/landing.html

@@ -1,12 +1,73 @@
 ---
 layout: base
 ---
-<div class="splash-container"></div>
+
+<div class="splash-container">
+  <picture>
+    <source
+      media="(min-width: 1201px)"
+      srcset="
+        img/header-1920x600.jpg    1x,
+        img/header-1920x600@2x.jpg 2x,
+        img/header-1920x600@3x.jpg 3x
+      "
+    />
+    <source
+      media="(min-width: 1081px)"
+      srcset="
+        img/header-1200x375.jpg    1x,
+        img/header-1200x375@2x.jpg 2x,
+        img/header-1200x375@3x.jpg 3x
+      "
+    />
+    <source
+      media="(min-width: 801px)"
+      srcset="
+        img/header-1080x338.jpg    1x,
+        img/header-1080x338@2x.jpg 2x,
+        img/header-1080x338@3x.jpg 3x
+      "
+    />
+    <source
+      media="(min-width: 601px)"
+      srcset="
+        img/header-800x250.jpg    1x,
+        img/header-800x250@2x.jpg 2x,
+        img/header-800x250@3x.jpg 3x
+      "
+    />
+    <source
+      media="(min-width: 401px)"
+      srcset="
+        img/header-600x188.jpg    1x,
+        img/header-600x188@2x.jpg 2x,
+        img/header-600x188@3x.jpg 3x
+      "
+    />
+    <source
+      media="(min-width: 321px)"
+      srcset="
+        img/header-400x125.jpg    1x,
+        img/header-400x125@2x.jpg 2x,
+        img/header-400x125@3x.jpg 3x
+      "
+    />
+    <source
+      media="(min-width: 0)"
+      srcset="
+        img/header-320x100.jpg    1x,
+        img/header-320x100@2x.jpg 2x,
+        img/header-320x100@3x.jpg 3x
+      "
+    />
+    <img src="img/header-1920x600.jpg" alt="RUPPERTdesign header" />
+  </picture>
+</div>
 <div class="landing-wrapper">
   <main>
     {{ content }}
   </main>
   <footer id="kontakt">
     {% include footer.html %}
   </footer>
-</div>
+</div>

_layouts/post.html

@@ -12,7 +12,7 @@ <h1 class="content-head center">{{ page.title }}</h1>
   	{{ content }}
 
 		{% if page.path contains '_posts' %}
-			<a href="/{{ pathsegments[1] | prepend: site.baseurl }}">zurück</a>
+			<a href="/{{ pathsegments[1] | prepend: site.baseurl }}" onclick="history.back(); return false;">zurück</a>
 		{% endif %}
 
   </article>

_sass/base.scss

@@ -101,14 +101,6 @@ address {
   text-align: center;
 }
 
-.rounded {
-  border-radius: 3px;
-}
-
-img.rounded {
-  border: 1px solid $silver;
-}
-
 .hideme {
   display: none !important;
 }

_sass/holzwerke.scss

@@ -1,24 +1,14 @@
 // Category Nav
 .category-nav {
-  float: left;
-  width: 100%;
-  overflow:hidden;
-  position:relative;
   ul {
-    clear: left;
-    float: left;
-    position: relative;
-    left: 50%;
-    text-align: center;
-    padding: 0;
+    display: flex;
+    justify-content: center;
+    flex-flow: wrap;
+    list-style-type: none;
     margin: 4rem 0;
     li {
-      display: block;
-      float: left;
-      position: relative;
-      right: 50%;
       text-transform: uppercase;
-      @include font-size($font-size-big);
+      font-size: 2.2rem;
       font-weight: $font-weight-default;
       color: $nav-color;
       a {
@@ -34,7 +24,7 @@
             -webkit-transform: scaleX(1);
             transform: scaleX(1);
           }
-        }      
+        }
         &:before {
           content: '';
           position: absolute;
@@ -50,7 +40,7 @@
         }
       }
       .separator {
-        margin: 0 10px;
+        margin-right: 5px;
       }
     }
   }
@@ -73,35 +63,23 @@
 }
 
 .holzwerk-box {
-
   text-align: center;
 
   .img-wrapper {
-    width: 300px;
-    height: 225px;
+    width: 320px;
+    height: 240px;
     margin: 1em auto;
-    overflow: hidden;
-    border-radius: 3px;
-    border: 1px solid $silver;
-    z-index: 10;  // needed cause webkit swallaws border on scale
   }
 
   img {
-
     @include transition(all 1s ease);
-
-    border: 0 none;
-    z-index: 1; // needed cause webkit swallaws border on scale
-
     &:hover {
       @include filter(opacity(70%));
       @include transform(scale(1.1));
     }
-
   }
 
   h3 {
-
     font-size: 1.3em;
     margin: 1em 0 0.5em 0;
 
@@ -114,11 +92,9 @@
     a:focus {
         color: $accent-color;
     }
-
   }
 
   p {
-
     margin-top: 0;
 
     a,
@@ -127,14 +103,12 @@
         color: #999;
         text-decoration: none;
     }
-
   }
-
 }
 
 @media only screen and (max-width: 345px) {
   .holzwerk-box .img-wrapper {
     width: 100%;
     height: 100%;
   }
-}
+}