- added MakerLab Murnau Link

- added three new fields of activity
- added new hero image on home page
- added the option to control the initial offset of the hero image

config/site.yaml

@@ -7,7 +7,7 @@ taxonomies:
   - category
   - tag
 metadata:
-  description: .
+  description: 'Official website of Itsblue Development.'
 summary:
   enabled: true
   format: short

config/system.yaml

@@ -82,7 +82,7 @@ pages:
       - form
       - forms
 cache:
-  enabled: true
+  enabled: false
   check:
     method: file
   driver: auto

pages/01.home/01._hero/hero.md

@@ -1,8 +1,10 @@
 ---
 title: 'Home Hero'
+media_order: 'header.jpg,Hero.jpg'
 menu: Top
-hero_classes: 'parallax text-light'
-hero_image: header.jpg
+hero_classes: 'parallax text-light overlay-dark'
+hero_image: Hero.jpg
+hero_positionY: 80
 ---
 
 # Welcome

pages/01.home/02._highlights/features.md

@@ -1,17 +1,28 @@
 ---
 title: 'Homepage Highlights'
+media_order: laserCutter.svg
 menu: Highlights
 class: offset-box
 features:
     -
-        icon: 'fas fa-code'
+        iconFa: 'fas fa-code'
         header: Coding
     -
-        icon: 'fas fa-cubes'
+        iconFa: 'fas fa-cubes'
         header: '3D printing'
     -
-        icon: 'fas fa-microchip'
+        iconFa: 'fas fa-microchip'
         header: Microcontrollers
+    -
+        iconFa: 'fas fa-bahai'
+        iconBase64: /user/pages/01.home/02._highlights/laserCutter.svg
+        header: 'Laser cutting'
+    -
+        iconFa: 'far fa-file'
+        header: Foiling
+    -
+        iconFa: 'fas fa-server'
+        header: 'Server management'
 ---
 
 # What's our field of activity?

pages/01.home/02._highlights/laserCutter.svg

@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.0"
+   width="200.000000pt"
+   height="200.000000pt"
+   viewBox="0 0 200.000000 200.000000"
+   preserveAspectRatio="xMidYMid meet"
+   id="svg8"
+   sodipodi:docname="laserCutter.svg"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)">
+  <defs
+     id="defs12" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1850"
+     inkscape:window-height="1016"
+     id="namedview10"
+     showgrid="false"
+     inkscape:zoom="3.54"
+     inkscape:cx="133.33333"
+     inkscape:cy="133.33333"
+     inkscape:window-x="70"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg8" />
+  <metadata
+     id="metadata2">
+Created by potrace 1.16, written by Peter Selinger 2001-2019
+<rdf:RDF>
+  <cc:Work
+     rdf:about="">
+    <dc:format>image/svg+xml</dc:format>
+    <dc:type
+       rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+  </cc:Work>
+</rdf:RDF>
+</metadata>
+  <g
+     transform="translate(0.000000,200.000000) scale(0.100000,-0.100000)"
+     fill="#000000"
+     stroke="none"
+     id="g6">
+    <path
+       d="M700 1581 l0 -119 89 -209 89 -208 51 -3 51 -3 0 -190 0 -189 -55 0 c-52 0 -55 1 -45 19 8 17 4 23 -36 45 -26 14 -50 26 -55 26 -8 0 -24 -39 -17 -44 1 -1 19 -12 38 -24 l35 -22 -282 0 c-276 0 -283 0 -283 -20 0 -20 7 -20 350 -20 l350 0 0 -22 c0 -13 -13 -72 -28 -133 l-28 -110 -322 -3 -322 -2 0 -25 0 -25 342 2 342 3 13 55 c22 88 25 89 42 15 l16 -70 343 -3 342 -2 0 25 0 25 -320 0 -319 0 -10 38 c-33 126 -46 190 -43 209 l3 23 300 0 c292 0 299 0 299 20 0 19 -7 20 -242 20 l-241 0 37 32 c27 24 36 38 31 51 -10 24 -24 21 -71 -16 -33 -26 -40 -37 -32 -50 8 -15 3 -17 -37 -17 -34 0 -45 4 -45 16 0 10 7 14 22 12 17 -2 25 6 41 45 17 41 18 50 6 58 -25 16 -37 10 -52 -28 -15 -37 -16 -33 -16 119 l-1 157 46 3 45 3 95 220 94 219 0 108 0 108 -25 0 -25 0 0 -102 -1 -103 -88 -205 -88 -205 -83 0 -83 0 -33 78 -33 77 59 0 c53 0 60 2 60 20 0 18 -7 20 -69 20 -65 0 -81 7 -81 36 0 2 43 4 95 4 88 0 95 1 95 20 0 19 -7 20 -105 20 -94 0 -105 2 -115 20 -10 20 -8 20 125 20 128 0 135 1 135 20 0 19 -7 20 -144 20 -122 0 -145 2 -150 16 -3 9 -6 18 -6 20 0 2 70 4 155 4 148 0 155 1 155 20 0 19 -7 20 -155 20 l-155 0 0 90 c0 89 0 90 -25 90 l-25 0 0 -119z"
+       id="path4"
+       style="fill:#e7e9ed;fill-opacity:1" />
+  </g>
+</svg>

pages/01.home/06._links/features.md

@@ -4,17 +4,17 @@ menu: Features
 class: standard
 features:
     -
-        icon: 'fab fa-gitlab'
+        iconFa: 'fab fa-gitlab'
         header: 'Our GitLab '
         text: 'We use Gitlab for most of our projects, you can explore them here.'
         url: 'https://git.itsblue.de/explore'
     -
-        icon: 'fab fa-google-play'
+        iconFa: 'fab fa-google-play'
         header: 'Google Play'
         text: 'This is our developer account on GooglePlay where you can find all of our apps for android.'
         url: 'https://play.google.com/store/apps/developer?id=Itsblue+Development'
     -
-        icon: 'fas fa-pencil-ruler'
+        iconFa: 'fas fa-pencil-ruler'
         header: 'MakerLab Murnau'
         text: 'This is where our hardware development and production takes place.'
         url: 'https://makerlab-murnau.de/'

pages/02.scstw/02._highlights/features.md

@@ -4,23 +4,23 @@ menu: Highlights
 class: offset-box
 features:
     -
-        icon: 'fas fa-tachometer-alt'
+        iconFa: 'fas fa-tachometer-alt'
         header: 'Super simple'
         text: 'Simplicity and ease of use is one of the major features of the ScStw.'
     -
-        icon: 'fa fa-suitcase'
+        iconFa: 'fa fa-suitcase'
         header: 'Super portable'
         text: 'The ScStw litterally fits in your suitcase!'
     -
-        icon: 'fas fa-clock'
+        iconFa: 'fas fa-clock'
         header: 'Easy to deploy'
         text: 'The ScStw can be fully deployed within 15 minutes.'
     -
-        icon: 'fas fa-wifi'
+        iconFa: 'fas fa-wifi'
         header: 'Fully wireless'
         text: 'Stop fighting with cables and start climbing!'
     -
-        icon: 'fa fa-money-bill-alt'
+        iconFa: 'fa fa-money-bill-alt'
         header: Affordable
         text: 'You don''t need to spend an arm or a leg for percise timing.'
 ---

themes/itsblue/blueprints/modular/features.yaml

@@ -25,9 +25,12 @@ form:
               label: Features
 
               fields:
-                .icon:
+                .iconFa:
                   type: iconpicker
-                  label: Icon
+                  label: Icon (Fontawesome)
+                .iconBase64:
+                  type: text
+                  label: Icon (base64)
                 .header:
                   type: text
                   label: Header

themes/itsblue/blueprints/modular/hero.yaml

@@ -19,5 +19,14 @@ form:
               label: Hero Image
               preview_images: true
               description: 'If not specified, this defaults to the first image found in the page''s folder'
+            header.hero_positionY:
+              type: text
+              label: Image Y Position
+              description: 'The initial y Position of the hero image (in percent)'
+              default: 100
+              validate:
+                  type: int
+                  min: 0
+                  max: 100
 
 

themes/itsblue/js/site.js

@@ -9,19 +9,21 @@ function scrollHeader() {
         $("#header").removeClass("scrolled");
 }
 
-function parallaxBackground() {
-    $('.parallax').css('background-positionY', ($(window).scrollTop() * 0.3) + 'px');
+function parallaxBackground(offset) {
+    $('.parallax').css('background-positionY', (parseInt(offset) - ($(window).scrollTop() * 0.1)) + '%');
 }
 
 jQuery(document).ready(function($){
 
     scrollHeader();
 
+    var heroBasePosition = $('#header-hero').css('background-positionY');
+
     // Scroll Events
     if (!isTouch){
         $(document).scroll(function() {
             scrollHeader();
-            parallaxBackground();
+            parallaxBackground(heroBasePosition);
         });
     };
 

themes/itsblue/scss/theme/_onepage.scss

@@ -2,6 +2,11 @@
   #to-start {
     bottom: 3.5rem;
   }
+  background-position: top;
+  @include breakpoint(md) {
+    background-origin: border-box;
+    padding-bottom: -100px;
+  }
 }
 
 .modular-features {
@@ -43,8 +48,8 @@
         top: auto;
         color: $gray-color;
         @extend .default-animation;
-
       }
+
       h6 {
         text-transform: none;
       }
@@ -95,6 +100,14 @@
       transform: translateX(-50%) translateY(-50%);
     }
 
+    img {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translateX(-50%) translateY(-50%);
+      height: 210%;
+    }
+
     h6 {
       background: $light-color;
       line-height: 1;

themes/itsblue/templates/modular/features.html.twig

@@ -11,7 +11,13 @@
                    <div class="column {{ columns }}">
                       {% if feature.url %}<a href="{{feature.url}}">{% endif %}
                       <div class="feature-icon">
-                         <i class="{{ feature.icon }}"></i>
+                        {% if feature.iconFa %}
+                         <i class="{{ feature.iconFa }}"></i>
+                        {% elseif feature.iconBase64 %}
+                           <img src="{{ feature.iconBase64 }}">
+                        {% else %}
+                         <i></i>
+                        {% endif %}
                          {% if feature.header %}
                             <h6>{{ feature.header }}</h6>
                          {% endif %}

themes/itsblue/templates/partials/hero.html.twig

@@ -1,4 +1,4 @@
-<section id="{{ id }}" class="section modular-hero hero {{ page.header.hero_classes }} {{ page.header.background.parallax ? 'parallax' : '' }}" {% if hero_image %}style="background-image: url('{{ hero_image.url }}');"{% endif %}>
+<section id="header-hero" class="section modular-hero hero {{ page.header.hero_classes }} {{ page.header.background.parallax ? 'parallax' : '' }}" {% if hero_image %}style="background-image: url('{{ hero_image.url }}'); background-position-y: {{ page.header.hero_positionY }}%;"{% endif %}>
     <div class="image-overlay"></div>
     <section class="container {{ grid_size }}" style="text-align: {{ page.header.hero_align|default('center') }}">
         {{ content|raw }}