better title text fitting responsive design

kit/css/content.css

@@ -18,6 +18,7 @@
   flex-wrap: nowrap;
   align-items: center;
   justify-content: flex-end;
+  /* overflow: hidden; */
 }
 
 .intro-element .content-wrap * {
@@ -30,13 +31,9 @@
 .intro-element .content-wrap .h2 {
   color: #ffffff;
   text-shadow: 1px 1px 3px black;
-  width: 80vw;
+  /* font-size: calc(3vw + 3vh);
-  max-height: 50vw;
+  line-height: calc(3.5vw + 3.5vh); */
-  font-size: calc(3vw + 3vh);
-  line-height: calc(3.5vw + 3.5vh);
   word-wrap: break-word;
-  /* text-overflow: ellipsis;
-  overflow-y: hidden; */
 }
 
 .intro-element .video-loop {
@@ -1429,7 +1426,7 @@ body.page-theme-color-secondary .teaser-box-category-marker:hover {
 }
 
 body.page-theme-color-secondary .teaser-box-category-marker::after {
-  content: url(../img/teaser-box-arrow-brand-secondary.svg);
+  mask: url('../img/teaser-box-arrow-brand-secondary.svg') no-repeat center / contain;
 }
 
 body.page-theme-color-tertiary .teaser-box-image {

kit/css/custom.css

@@ -24,3 +24,23 @@ ul.bestandliste {
   margin-left: 1rem;
   font-weight: normal;
 }
+
+.intro-element .content-wrap #centeredMultiLine {
+  height: 60%;
+  width: 100%;
+  line-height: normal;
+  text-shadow: 1px 1px 3px black;
+  font-family: "Roboto", "Source Sans Pro", "Open Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  font-weight: 400;
+}
+
+.intro-element {
+  padding: 2rem 0 2rem 0;
+}
+
+/* @media (max-width: 1024px) {
+  .intro-element .content-wrap #centeredMultiLine {
+    height: 100%;
+    line-height: 4em;
+  }
+} */

kit/footer.php

@@ -14,6 +14,8 @@
 
 </footer>
 
+<script src="<?php bloginfo('stylesheet_directory');?>/js/jquery-3.js" type="text/javascript"></script>
+<script src="<?php bloginfo('stylesheet_directory');?>/js/jquery.js" type="text/javascript"></script>
 <script src="<?php bloginfo('stylesheet_directory');?>/js/jquery_002.js" type="text/javascript"></script>
 <script src="<?php bloginfo('stylesheet_directory');?>/js/parsley.js" type="text/javascript"></script>
 <script src="<?php bloginfo('stylesheet_directory');?>/js/Tabs.js" type="text/javascript"></script>
@@ -21,10 +23,21 @@
 <script src="<?php bloginfo('stylesheet_directory');?>/js/cookieconsent.js" type="text/javascript"></script>
 <script src="<?php bloginfo('stylesheet_directory');?>/js/magnific-popup.js" type="text/javascript"></script>
 <script src="<?php bloginfo('stylesheet_directory');?>/js/swiper.js" type="text/javascript"></script>
-<script src="<?php bloginfo('stylesheet_directory');?>/js/jquery.js" type="text/javascript"></script>
 <script src="<?php bloginfo('stylesheet_directory');?>/js/main.js" type="text/javascript"></script>
 <script src="<?php bloginfo('stylesheet_directory');?>/js/menu.js" type="text/javascript"></script>
 <script src="<?php bloginfo('stylesheet_directory');?>/js/custom.js" type="text/javascript"></script>
+<script src="<?php bloginfo('stylesheet_directory');?>/js/textFit.js" type="text/javascript"></script>
+
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+    console.log("resized");
+    textFit(document.getElementById('centeredMultiLine'), {alignHoriz: true, alignVert: true, multiLine: true, reProcess: true, maxFontSize: 45});
+  });
+  window.addEventListener('resize', function(event){
+    console.log("resized");
+    textFit(document.getElementById('centeredMultiLine'), {alignHoriz: true, alignVert: true, multiLine: true, reProcess: true, maxFontSize: 45});
+  });
+</script>
 
 <?php wp_footer(); ?>
 

kit/header.php

@@ -22,8 +22,6 @@
     <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory');?>/css/content.css" media="all">
     <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory');?>/css/custom.css" media="all">
 
-    <script src="<?php bloginfo('stylesheet_directory');?>/js/jquery-3.js" type="text/javascript"></script>
-
     <link rel="apple-touch-icon" href="<?php bloginfo('stylesheet_directory');?>/img/apple-touch-icon.png">
     <link rel="apple-touch-icon-precomposed" sizes="57x57" href="<?php bloginfo('stylesheet_directory');?>/img/apple-touch-icon-57x57.png">
     <link rel="apple-touch-icon-precomposed" sizes="114x114" href="<?php bloginfo('stylesheet_directory');?>/img/apple-touch-icon-114x114.png">

kit/js/textFit.js

@@ -0,0 +1,238 @@
+/**
+ * textFit v2.3.1
+ * Previously known as jQuery.textFit
+ * 11/2014 by STRML (strml.github.com)
+ * MIT License
+ *
+ * To use: textFit(document.getElementById('target-div'), options);
+ *
+ * Will make the *text* content inside a container scale to fit the container
+ * The container is required to have a set width and height
+ * Uses binary search to fit text with minimal layout calls.
+ * Version 2.0 does not use jQuery.
+ */
+/*global define:true, document:true, window:true, HTMLElement:true*/
+
+(function(root, factory) {
+  "use strict";
+
+  // UMD shim
+  if (typeof define === "function" && define.amd) {
+    // AMD
+    define([], factory);
+  } else if (typeof exports === "object") {
+    // Node/CommonJS
+    module.exports = factory();
+  } else {
+    // Browser
+    root.textFit = factory();
+  }
+
+}(typeof global === "object" ? global : this, function () {
+  "use strict";
+
+  var defaultSettings = {
+    alignVert: false, // if true, textFit will align vertically using css tables
+    alignHoriz: false, // if true, textFit will set text-align: center
+    multiLine: false, // if true, textFit will not set white-space: no-wrap
+    detectMultiLine: true, // disable to turn off automatic multi-line sensing
+    minFontSize: 6,
+    maxFontSize: 80,
+    reProcess: true, // if true, textFit will re-process already-fit nodes. Set to 'false' for better performance
+    widthOnly: false, // if true, textFit will fit text to element width, regardless of text height
+    alignVertWithFlexbox: false, // if true, textFit will use flexbox for vertical alignment
+  };
+
+  return function textFit(els, options) {
+
+    if (!options) options = {};
+
+    // Extend options.
+    var settings = {};
+    for(var key in defaultSettings){
+      if(options.hasOwnProperty(key)){
+        settings[key] = options[key];
+      } else {
+        settings[key] = defaultSettings[key];
+      }
+    }
+
+    // Convert jQuery objects into arrays
+    if (typeof els.toArray === "function") {
+      els = els.toArray();
+    }
+
+    // Support passing a single el
+    var elType = Object.prototype.toString.call(els);
+    if (elType !== '[object Array]' && elType !== '[object NodeList]' &&
+            elType !== '[object HTMLCollection]'){
+      els = [els];
+    }
+
+    // Process each el we've passed.
+    for(var i = 0; i < els.length; i++){
+      processItem(els[i], settings);
+    }
+  };
+
+  /**
+   * The meat. Given an el, make the text inside it fit its parent.
+   * @param  {DOMElement} el       Child el.
+   * @param  {Object} settings     Options for fit.
+   */
+  function processItem(el, settings){
+    if (!isElement(el) || (!settings.reProcess && el.getAttribute('textFitted'))) {
+      return false;
+    }
+
+    // Set textFitted attribute so we know this was processed.
+    if(!settings.reProcess){
+      el.setAttribute('textFitted', 1);
+    }
+
+    var innerSpan, originalHeight, originalHTML, originalWidth;
+    var low, mid, high;
+
+    // Get element data.
+    originalHTML = el.innerHTML;
+    originalWidth = innerWidth(el);
+    originalHeight = innerHeight(el);
+
+    // Don't process if we can't find box dimensions
+    if (!originalWidth || (!settings.widthOnly && !originalHeight)) {
+      if(!settings.widthOnly)
+        throw new Error('Set a static height and width on the target element ' + el.outerHTML +
+          ' before using textFit!');
+      else
+        throw new Error('Set a static width on the target element ' + el.outerHTML +
+          ' before using textFit!');
+    }
+
+    // Add textFitted span inside this container.
+    if (originalHTML.indexOf('textFitted') === -1) {
+      innerSpan = document.createElement('span');
+      innerSpan.className = 'textFitted';
+      // Inline block ensure it takes on the size of its contents, even if they are enclosed
+      // in other tags like <p>
+      innerSpan.style['display'] = 'inline-block';
+      innerSpan.innerHTML = originalHTML;
+      el.innerHTML = '';
+      el.appendChild(innerSpan);
+    } else {
+      // Reprocessing.
+      innerSpan = el.querySelector('span.textFitted');
+      // Remove vertical align if we're reprocessing.
+      if (hasClass(innerSpan, 'textFitAlignVert')){
+        innerSpan.className = innerSpan.className.replace('textFitAlignVert', '');
+        innerSpan.style['height'] = '';
+        el.className.replace('textFitAlignVertFlex', '');
+      }
+    }
+
+    // Prepare & set alignment
+    if (settings.alignHoriz) {
+      el.style['text-align'] = 'center';
+      innerSpan.style['text-align'] = 'center';
+    }
+
+    // Check if this string is multiple lines
+    // Not guaranteed to always work if you use wonky line-heights
+    var multiLine = settings.multiLine;
+    if (settings.detectMultiLine && !multiLine &&
+        innerSpan.scrollHeight >= parseInt(window.getComputedStyle(innerSpan)['font-size'], 10) * 2){
+      multiLine = true;
+    }
+
+    // If we're not treating this as a multiline string, don't let it wrap.
+    if (!multiLine) {
+      el.style['white-space'] = 'nowrap';
+    }
+
+    low = settings.minFontSize + 1;
+    high = settings.maxFontSize + 1;
+
+    // Binary search for best fit
+    while (low <= high) {
+      mid = parseInt((low + high) / 2, 10);
+      innerSpan.style.fontSize = mid + 'px';
+      if(innerSpan.scrollWidth <= originalWidth && (settings.widthOnly || innerSpan.scrollHeight <= originalHeight)){
+        low = mid + 1;
+      } else {
+        high = mid - 1;
+      }
+      // await injection point
+    }
+    // Sub 1 at the very end, this is closer to what we wanted.
+    innerSpan.style.fontSize = (mid - 1) + 'px';
+
+    // Our height is finalized. If we are aligning vertically, set that up.
+    if (settings.alignVert) {
+      addStyleSheet();
+      var height = innerSpan.scrollHeight;
+      if (window.getComputedStyle(el)['position'] === "static"){
+        el.style['position'] = 'relative';
+      }
+      if (!hasClass(innerSpan, "textFitAlignVert")){
+        innerSpan.className = innerSpan.className + " textFitAlignVert";
+      }
+      innerSpan.style['height'] = height + "px";
+      if (settings.alignVertWithFlexbox && !hasClass(el, "textFitAlignVertFlex")) {
+        el.className = el.className + " textFitAlignVertFlex";
+      }
+    }
+  }
+
+  // Calculate height without padding.
+  function innerHeight(el){
+    var style = window.getComputedStyle(el, null);
+    return el.clientHeight -
+      parseInt(style.getPropertyValue('padding-top'), 10) -
+      parseInt(style.getPropertyValue('padding-bottom'), 10);
+  }
+
+  // Calculate width without padding.
+  function innerWidth(el){
+    var style = window.getComputedStyle(el, null);
+    return el.clientWidth -
+      parseInt(style.getPropertyValue('padding-left'), 10) -
+      parseInt(style.getPropertyValue('padding-right'), 10);
+  }
+
+  //Returns true if it is a DOM element
+  function isElement(o){
+    return (
+      typeof HTMLElement === "object" ? o instanceof HTMLElement : //DOM2
+      o && typeof o === "object" && o !== null && o.nodeType === 1 && typeof o.nodeName==="string"
+    );
+  }
+
+  function hasClass(element, cls) {
+    return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
+  }
+
+  // Better than a stylesheet dependency
+  function addStyleSheet() {
+    if (document.getElementById("textFitStyleSheet")) return;
+    var style = [
+      ".textFitAlignVert{",
+        "position: absolute;",
+        "top: 0; right: 0; bottom: 0; left: 0;",
+        "margin: auto;",
+        "display: flex;",
+        "justify-content: center;",
+        "flex-direction: column;",
+      "}",
+      ".textFitAlignVertFlex{",
+        "display: flex;",
+      "}",
+      ".textFitAlignVertFlex .textFitAlignVert{",
+        "position: static;",
+      "}",].join("");
+
+    var css = document.createElement("style");
+    css.type = "text/css";
+    css.id = "textFitStyleSheet";
+    css.innerHTML = style;
+    document.body.appendChild(css);
+  }
+}));

kit/style.css

@@ -118,7 +118,7 @@ dfn {
  */
 h1 {
   margin: .67em 0;
-  font-size: 2em;
+  /* font-size: 2em; */
 }
 
 /**
@@ -969,9 +969,9 @@ body.page-theme-color-quaternary .color-page-theme-contrast {
 h1 {
   position: relative;
   margin: 0;
-  font-size: 3.61111rem;
+  /*font-size: 3.61111rem;
   line-height: 3.88889rem;
-  letter-spacing: .8px;
+  letter-spacing: .8px; */
 }
 
 .h1::after,
@@ -1190,8 +1190,8 @@ body.page-theme-color-quaternary h2::after {
 @media (max-width: 960px) {
   .h1,
   h1 {
-    font-size: 2.66667rem;
+    /* font-size: 2.66667rem;
-    line-height: 3.11111rem;
+    line-height: 3.11111rem; */
   }
   .h1::after,
   h1::after {

kit/template-parts/content-page.php

@@ -27,9 +27,12 @@ $kit_category_url = get_category_link( $kit_categories[0]->term_id );
         </span>
       </a>
       <?php } ?>
+
+      <div id="centeredMultiLine">
         <?php the_title( '<h1>', '</h1>' ); ?>
       </div>
     </div>
+  </div>
 </section>
 
 <section class="background-color-white">