intia-theme 0.1.53 → 0.1.56

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 84ee3907348e454a62313b289b4b92838253c3456f614a2485165cecb472399d
-  data.tar.gz: bc2cfc46a79efb5865b9413db2912b438692f53695ffb2bed8c2d7b5d9dfa4f8
+  metadata.gz: c3d3b98390c39c7b9199ccb9ab7a697e00b9dfcbef1577c558243fb729f9ce8c
+  data.tar.gz: cf2f452d0da883c2f4b4bc3c9ab4857653f695af018c4986c6a31316f4a7a7be
 SHA512:
-  metadata.gz: 4e74178ced381a75a79046a788e5ff314e08d0728aba81b2906656dd1dfc189e6e6e01121ea99061d00cea69158a275d04a8135c4ae17e433ad40d8e12fa472e
-  data.tar.gz: d6651d53e18f1d4218fb263a99656ec5ea40089c583b2059f2e99c5e331544f4972afdbffef66248cf6108ca01f67c54a69ba7b215e1fad5ec96bf2abd9374c8
+  metadata.gz: 1c4344e05d1df9f424d720635a31f4f09300f4d1a45a02d4b038515973863331e902492706bcb4d68c63b4c86eab638934667e76f7619f232ef9ee779a6e2f89
+  data.tar.gz: c47d43986c8970ec0ebec47ddc651c1ae43812968dfc5948957b2ed46fac03df90a897dcd7359f96dae5505b8e1cb3f2296e2810e3b90426d59e6b6d51e68aa8

data/_includes/glossary.html

@@ -1,6 +1,6 @@
 {% assign entries=site.glossary | sort:page.sort %}
 {% for entry in entries %}
-<h2> {{entry.title}} </h2>
+<h2 class="has-text-left"> {{entry.title}} </h2>
 <p class="text-green has-text-weight-bold">{{entry.subtitle}}</p>
 
 {{entry.abstract}}

data/_includes/head.html

@@ -7,7 +7,6 @@
           {% if site.favicon %} href="{{ site.favicon | relative_url }}" {% else %} href="{{ site.baseurl }}/favicon.png" {% endif %}
     />
     <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.min.js" defer></script>
-    <link href="https://fonts.googleapis.com/css?family=Verdana" rel="stylesheet" type='text/css'>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5/css/all.min.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-carousel@4.0.3/dist/css/bulma-carousel.min.css">
     {% unless site.hide_radar %}

data/_includes/header.html

@@ -61,7 +61,7 @@
                 {% endif %}
                 {% endfor %}
                 {% endif %}
-                <div class="navbar-end">
+   
                     <div class="navbar-item navbar-search">
                         <a id="openSearch">
                             <span class="icon">
@@ -69,7 +69,7 @@
                             </span>
                         </a>  
                     </div>
-                </div>
+                
             </div>
         </div>
     </div>

data/_includes/hero.html

@@ -1,17 +1,17 @@
-<section class="hero is-primary is-hidden-print {% if page.hero_height %} {{ page.hero_height }} {% else %} is-medium {% endif %} {% if page.hero_tags %} {{ page.hero_tags }} {% endif %}" {% if page.hero_background_image %} style="background: url('{{ page.hero_background_image }}') no-repeat center center; background-size: cover;" {% endif %}>
+<section class="hero is-hidden-print {% if page.hero_height %} {{ page.hero_height }} {% else %} is-medium {% endif %} {% if page.hero_tags %} {{ page.hero_tags }} {% endif %}" {% if page.hero_background_image %} style="background: url('{{ page.hero_background_image }}') no-repeat center center; background-size: cover;" {% endif %}>
     <div class="hero-body">
         <div class="container">
             {% if page.title_above %}
-                <h1 class="overtitle subtitle is-4">{{ page.title_above }}</h1>
+                <h5 class="overtitle">{{ page.title_above }}</h5>
             {% endif %}
-            <h1 class="title is-1  {% if page.title_above %} title-with-overtitle {% endif %}">{{ page.title }}</h1>
+            <h1 class="{% if page.title_above %} title-with-overtitle {% endif %}">{{ page.title }}</h1>
             {% if page.hero_image %}
                 <img src="{{page.hero_image}}" alt="placeholder"  class="is-rounded is-hidden-mobile">
             {% endif %}
             {% if page.subtitle_markdownify %} 
-                <p class="subtitle is-4">{{ page.subtitle | markdownify }}</p>
+                <h4>{{ page.subtitle | markdownify }}</h4>
             {% else %}
-                <p class="subtitle is-4">{{ page.subtitle }}</p>
+                <h4>{{ page.subtitle }}</h4>
             {% endif %}
             {% if page.hero_link %}
                 <a href="{{ page.hero_link | relative_url }}" class="button is-rounded is-dark">

data/_includes/introduction.md

@@ -1,6 +1,6 @@
 <div class="card column is-8 is-offset-2">
     <h1 class="has-text-centered">{{include.title}}</h1>
-    <h3 class="subtitle is-4 has-text-left">{{include.content}}</h3>
+    <h4 class="has-text-left">{{include.content}}</h4>
 <br>
 <br>
 </div>

data/_includes/stories.html

@@ -13,8 +13,8 @@
             <div class="news-content column is-half">
                 <div class="media">
                   <div class="media-content">
-                    <h4>{{story.date | date: "%d.%m.%Y"}}</h4>
-                    <h2>{{story.title}}</h2>
+                    <div class="date">{{story.date | date: "%d.%m.%Y"}}</div>
+                    <h4>{{story.title}}</h4>
                   </div>
                 </div>                
                 <div class="content">

data/_includes/story-slider.html

@@ -17,7 +17,8 @@
                         <div class="slider-content column is-half">
                             <div class="media">
                               <div class="media-content">
-                                <h2>{{story.title}}</h2>
+                                <div class="date">{{story.date | date: "%d.%m.%Y"}}</div>
+                                <h4>{{story.title}}</h4>
                               </div>
                             </div>
                 

data/_layouts/default.html

@@ -14,6 +14,13 @@ The Default layout that everything is using
             <img id="scroll-up" src="{{ site.baseurl }}/assets/img/arrow-down.png" alt="placeholder">
             <img id="scroll-down" src="{{ site.baseurl }}/assets/img/arrow-down.png" alt="placeholder"  class="is-pointed-down">     
         </div>
+        <div class="accessibility-image is-pulled-left is-hidden-mobile">
+                <a id="changeFontsize"class="button is-rounded is-dark">
+                    <span class="icon is-small">
+                        <i class="fas icon-font-size fa-xs invert"></i>
+                        </span> 
+                    </a>    
+        </div>
         {% unless page.hide_hero %}
             {% include hero.html %}
         {% else %}
@@ -27,7 +34,7 @@ The Default layout that everything is using
                     {% if page.toc %}
                     {% include toc.html html=content class='menu-list' h_min=1 h_max=1 %}
                     {% endif %}
-                    {{content | markdownify}}
+                    {{content | markdownify }}
                 </div>
             </div> 
         </div> 
@@ -35,4 +42,4 @@ The Default layout that everything is using
             {% include footer.html %}
         {% endunless %}
     </body>
-</html>
+</html>

data/_sass/_icons.scss

@@ -1,6 +1,8 @@
 // Custom Icons
 .icon-handshake:before {
   @extend .custom-icon;
+  width: 48px;
+  height: 48px;
   background: url(/assets/img/icons/handshake.svg) no-repeat;
 }
 .icon-download:before {
@@ -15,15 +17,22 @@
 .icon-search:before {
   @extend .custom-button-icons;
   background: url(/assets/img/icons/search.svg) no-repeat;
-  width: 32px;
-  height: 32px;
+  width: 1.5rem;
+  height: 1.5rem;
   filter: invert(35%) sepia(93%) saturate(355%) hue-rotate(124deg) brightness(93%) contrast(88%);
 }
 .icon-remove:before {
   @extend .custom-button-icons;
   background: url(/assets/img/icons/remove.svg) no-repeat;
-  width: 32px;
-  height: 32px;
+  width: 1.5rem;
+  height: 1.5rem;
   filter: invert(35%) sepia(93%) saturate(355%) hue-rotate(124deg) brightness(93%) contrast(88%);
 }
+.icon-font-size:before {
+  @extend .custom-button-icons;
+  width: 1.5rem;
+  height: 1.5rem;
+  filter: invert(100%);
+  background: url(/assets/img/icons/font-size.svg) no-repeat;
+}
 

data/_sass/_layout.scss

@@ -5,19 +5,20 @@
 @import "../node_modules/bulma-block-list/src/block-list.scss";
 @import "../node_modules/@creativebulma/bulma-tooltip/src/sass/index.sass";
 // Bulma Config
-$column-gap: 1rem;
+$column-gap: 16px;
 $modal-content-width: 800px;
 $tabs-link-active-color: $primary;
 $tabs-link-active-border-bottom-color: $primary;
 // Global
+//:root {
+//  font-size: 24px;
+//  line-height: 1.5rem;
+//}
 html {
   scroll-behavior: smooth;
+  font-size: 24px;
+  line-height: 150%;
 }
-body {
-  font-size: 1.5rem;
-  line-height: 2.25rem;
-}
-
 h1,
 h2,
 h3,
@@ -29,51 +30,62 @@ h2 {
   padding-top: 90px;
 }
 
-.card h1,
-.card h2,
-.card p,
-.slider h1,
-.slider h2,
-.slider p {
-  padding-top: 0;
-  padding-bottom: 0;
-}
-
 h1,
 h1 p {
-  font-size: 48px;
-  line-height: 72px;
+  font-size: 2rem;
+  line-height: 3rem;
   font-weight: 600;
   text-align: center;
 }
+.turquoise {
+  color: $primary-dark;
+}
+h2,
+h2 p {
+  font-size: 2rem;
+  line-height: 3rem;
+  font-weight: 400;
+  text-align: center;
+}
+h3,
+h3 p {
+  font-size: 2rem;
+  line-height: 3rem;
+  font-weight: 400;
+  text-align: left;
+}
 
+// Should be replaced
 .green h1,
 .green h1 p {
   text-align: left;
 }
 
-h2,
-h2 p {
-  font-size: 36px;
-  font-weight: 600;
-  text-align: left;
-  background-repeat: no-repeat;
-  background-size: auto 35px;
-  font-family: "Verdana", sans-serif;
-}
+
 
 h3 {
   font-weight: 600;
-  font-size: 1.7rem;
+  font-size: 1.5rem;
   padding-top: 50px;
 }
 
 h4 {
-  font-size: 1rem;
+  font-size: 1.5rem;
 }
 
 h5 {
-  font-size: 0.83rem;
+  font-size: 1rem;
+  text-align: center;
+  text-transform: uppercase;
+}
+h6 {
+  font-size: 0.5rem;
+  text-transform: uppercase;
+  letter-spacing: 20%;
+}
+//h7
+.date {
+  font-size: 0.5833rem;
 }
 ul {
   list-style-type: disc;
@@ -94,10 +106,24 @@ a:hover {
 a:active {
   color: #1E7D73;
 }
+.card h1,
+.card h2,
+.card p,
+.slider h1,
+.slider h2,
+.slider p {
+  padding-top: 0;
+}
+.card h2.fas {
+  padding-bottom: 0;
+}
+.fas p {
+  font-family: "Verdana", sans-serif;
+}
 // Button Animation + Gleiche Breite
 .button {
   // Schrifft
-  font-size: 1.31rem !important;
+  font-size: 0.667rem !important;
   font-weight: 600;
   // Animation
   transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
@@ -114,35 +140,32 @@ a:active {
   -moz-transition-duration: 0.3s;
 }
 
-.button a,
-.button span {
-  // Schrifft
-  font-size: 16px !important;
-  font-weight: 600;
+.button {
+  height: 2rem;
 }
 
 .navbar-menu .button,
 .navbar-dropdown .button {
   // Buttongröße aus Figma
   width: 180px;
-  height: 47px;
+  font-weight: 600;
 }
 .navbar-item.has-no-dropdown {
   padding: 0;
 }
 .navbar.is-primary .navbar-item.has-no-dropdown .navbar-link:hover,
 .navbar.is-primary .navbar-item.has-no-dropdown .navbar-link.is-active {
-  background-color: transparent;
   color: #fff;
+  background-color: transparent;
 }
 
 // z.B. "Mehr über Intia" Button
 .button.is-dark:hover,
 .button.is-dark.is-hovered {
   border-width: 1px;
-  background-color: $dark;
+  background-color: $dark !important;
   border-color: transparent;
-  color: white;
+  color: white !important;
 }
 @include desktop {
   .navbar-menu .button.is-dark:hover.has-dropdown,
@@ -194,8 +217,14 @@ a:active {
 }
 // Search 
 .navbar-search{
-  padding-left: 0.75rem !important;
-  padding-top: 0.5rem !important;
+  padding: 0px !important;
+  height: 2rem;
+  margin-bottom: 12px;
+}
+.navbar-search .icon {
+  height: 1.5rem;
+  width: 1.5rem;
+  vertical-align : middle;
 }
 //Search overlay
 .searchbar .field{
@@ -208,6 +237,7 @@ a:active {
   height: 47px;
   width: 800px;
   padding-top: 0 !important;
+  margin-right: 1rem;
 }
 .search-item {
   color: black;
@@ -305,14 +335,6 @@ div.highlight {
   overflow: hidden;
 }
 
-.highlighter {
-  background-color: $light;
-  padding-left: 5%;
-  padding-right: 5%;
-  padding-bottom: 5%;
-  border-radius: 65px;
-  margin-top: 3em;
-}
 .overtitle {
   margin-bottom: 0 !important;
   padding-bottom: 0 !important;
@@ -333,7 +355,7 @@ img.is-rounded {
 .arrow-image {
   z-index: 10;
   top: calc(50% - 68px);
-  left: 4vw;
+  left: calc(100% - 2vw - 64px);
   position: sticky;
   width: 64px;
   cursor: pointer;
@@ -341,6 +363,18 @@ img.is-rounded {
   flex-direction: column;
   height: 132px;
 }
+.accessibility-image {
+  z-index: 10;
+  top: calc(50% - 68px);
+  left: 0.5vw;
+  position: sticky;
+  cursor: pointer;
+}
+.accessibility-image .button {
+  border-radius: 9999px;
+  height: 3rem;
+  width: 3rem;
+}
 .is-pointed-down {
   transform: scaleY(-1);
   margin-top: auto;
@@ -381,7 +415,7 @@ a .tooltip-popup {
 
 // Navi
 .navbar {
-  padding-top: 0.6rem;
+  padding-top: 10px;
 }
 
 .navbar.is-primary .navbar-dropdown a.navbar-item.is-active {
@@ -390,8 +424,8 @@ a .tooltip-popup {
 }
 
 .navbar-brand img {
-  max-height: 3rem;
-  margin-top: 1rem;
+  max-height: 2rem;
+  margin-top: 16px;
 }
 
 .navbar-brand a p {
@@ -550,10 +584,6 @@ a.navbar-item.is-active,
   box-shadow: none;
 }
 
-.card .button {
-  margin-top: 50px;
-}
-
 .content-wrapper h1 {
   padding-top: 50px;
 }
@@ -586,10 +616,10 @@ a.navbar-item.is-active,
   margin: auto;
 }
 .card-content p {
-  padding-left: 4rem;
+  padding-left: 15px + 48px;
 }
 .card-content a {
-  margin-left: 4rem;
+  margin-left: 15px + 48px;
 }
 .card-image:last-child img {
   border-bottom-left-radius: 65px;
@@ -636,6 +666,12 @@ figcaption {
 .slider-container .card-content .content {
   margin: 50px;
 }
+.slider-item {
+  margin: auto;
+}
+.slider-titel {
+  padding-top: 0px !important;
+}
 .story-slider {
   background-color: white;
   border-bottom-left-radius: 65px !important;
@@ -701,7 +737,8 @@ figcaption {
   background-color: $light;
   border-radius: 65px;
   padding: 75px;
-  font-size: 1.4rem;
+  margin-top: 3em;
+  margin-bottom: 3em;
 }
 
 .min-height25p {
@@ -714,8 +751,6 @@ figcaption {
 }
 .highlighter h2 {
   padding-top: 0;
-  font-size: 2rem;
-  font-weight: 600;
 }
 .two-columns p {
   column-count: 2;
@@ -760,7 +795,6 @@ figcaption {
   width: 50%;
   float: right;
   padding-left: 5rem;
-  padding-right: 5rem;
 }
 .highlighter img.with-zone {
   width: 100%;
@@ -904,7 +938,7 @@ a:hover .tooltip-popup,
   box-shadow: none;
 }
 .input {
-  height: 2.75em;
+  height: 2em;
 }
 
 .textarea {
@@ -1014,10 +1048,6 @@ a:hover .tooltip-popup,
   margin-bottom: 2rem;
   padding-top: 0;
 }
-.news-content h4 {
-  font-size: 0.75rem;
-  letter-spacing: 0.3rem;
-}
 .news-content {
   width: 100%;
   display: flow-root;
@@ -1101,10 +1131,15 @@ div.faq {
 }
 
 // Breadcrumbs
+.breadcrumb {
+  font-size: 0.667rem;
+}
 .breadcrumb-section {
-  margin-top: 7.5rem;
+  margin-top: calc(80px + 1rem);
   // position: fixed;
   //  z-index: 29;
+  padding-top: 10px;
+  padding-bottom: 10px;
   width: 100%;
   background-color: white;
   border-top: 2px solid #1e7d73;
@@ -1200,7 +1235,7 @@ div.faq {
     font-size: 0.83rem;
   }
   .navbar {
-    padding-top: 0.6rem;
+    padding-top: 10px;
   }
   .navbar-brand img {
     margin: 1rem;
@@ -1323,6 +1358,7 @@ div.faq {
   .searchbar{
     height: 47px;
     width: auto;
+    margin-right: 1rem;
     padding-top: 0 !important;
   }
 }

data/assets/img/icons/contrast.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.4.5, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 48.53 48.61" style="enable-background:new 0 0 48.53 48.61;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#1E7D74;}
+	.st1{fill:#FFFFFF;stroke:#FFFFFF;stroke-width:0.7;stroke-linejoin:round;}
+	.st2{fill:#FFFFFF;stroke:#FFFFFF;stroke-width:0.7;stroke-linejoin:round;stroke-miterlimit:4;}
+	.st3{fill:#FFFFFF;}
+	.st4{fill:none;stroke:#FFFFFF;stroke-width:2;}
+	.st5{fill:#FFFFFF;stroke:#FFFFFF;}
+	.st6{opacity:0.2;fill:none;stroke:#FFFFFF;stroke-width:2;enable-background:new    ;}
+</style>
+<g>
+	<path class="st0" d="M47.66,24.56L47.66,24.56c0,12.62-10.23,22.84-22.84,22.84h-0.86c-12.62,0-22.84-10.23-22.84-22.84l0,0
+		c0-12.62,10.23-22.84,22.84-22.84h0.86C37.43,1.72,47.66,11.94,47.66,24.56z"/>
+	<path class="st4" d="M36.45,24.13L36.45,24.13c0,6.19-5.02,11.21-11.21,11.21h-0.86c-6.19,0-11.21-5.02-11.21-11.21l0,0
+		c0-6.19,5.02-11.21,11.21-11.21h0.86C31.44,12.92,36.45,17.94,36.45,24.13z"/>
+	<path class="st5" d="M24.82,35.76V12.92c7.56,1.19,9.8,3.86,11.21,11.21C35.92,31.49,33.02,33.73,24.82,35.76z"/>
+</g>
+</svg>

data/assets/img/icons/font-size.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.4.5, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32.4 28" style="enable-background:new 0 0 32.4 28;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#1E7D74;}
+	.st1{fill:#FFFFFF;stroke:#FFFFFF;stroke-width:0.7;stroke-linejoin:round;}
+	.st2{fill:#FFFFFF;stroke:#FFFFFF;stroke-width:0.7;stroke-linejoin:round;stroke-miterlimit:4;}
+	.st3{fill:#FFFFFF;}
+	.st4{fill:none;stroke:#FFFFFF;stroke-width:2;}
+	.st5{fill:#FFFFFF;stroke:#FFFFFF;}
+	.st6{opacity:0.2;fill:none;stroke:#FFFFFF;stroke-width:2;enable-background:new    ;}
+</style>
+<path class="st3" d="M31.19,5.93h-8.06v19.89h-3V5.93h-8.06V3.26h19.12V5.93z"/>
+<path class="st3" d="M7.11,9.53h-5.3V8.15h12.2v1.38h-5.3v13.71H7.11V9.53z"/>
+<path class="st3" d="M7.11,9.53h0.26V9.28H7.11V9.53z M1.81,9.53H1.55v0.26h0.26V9.53z M1.81,8.15V7.9H1.55v0.26H1.81z M14.01,8.15
+	h0.26V7.9h-0.26V8.15z M14.01,9.53v0.26h0.26V9.53H14.01z M8.71,9.53V9.28H8.45v0.26H8.71z M8.71,23.24v0.26h0.26v-0.26H8.71z
+	 M7.11,23.24H6.85v0.26h0.26V23.24z M7.11,9.28h-5.3v0.52h5.3V9.28z M2.07,9.53V8.15H1.55v1.38H2.07z M1.81,8.41h12.2V7.9H1.81V8.41
+	z M13.75,8.15v1.38h0.52V8.15H13.75z M14.01,9.28h-5.3v0.52h5.3V9.28z M8.45,9.53v13.71h0.52V9.53H8.45z M8.71,22.98H7.11v0.52h1.59
+	V22.98z M7.37,23.24V9.53H6.85v13.71H7.37z"/>
+</svg>
+

data/assets/js/main.js

@@ -8,6 +8,7 @@ const carousels = bulmaCarousel.attach('.carousel',{
         'next': `<img src="../assets/img/arrow-left.png" style="transform: rotate(180deg);"></img>`}
 });
 
+// Scrollarrows
 var scrollUpArrow= document.getElementById("scroll-up");
 var scrollDownArrow= document.getElementById("scroll-down");
 var scrollStep=10,
@@ -49,6 +50,7 @@ window.onscroll = function(ev) {
     }
 };
 
+// Searchbar
 document.getElementById("openSearch").addEventListener("click", openSearch);
 document.getElementById("closeSearch").addEventListener("click", closeSearch);
 document.getElementById("search-input").addEventListener("input", showsearchresults);
@@ -79,4 +81,65 @@ function showsearchresults(e) {
         searchInput.style.borderBottomLeftRadius = "45px";
         searchInput.style.borderBottomRightRadius = "45px";
     }
-}
+}
+
+// Simple storage for site wide changes
+var siteData
+window.addEventListener('load', (event) => {
+    init()
+});
+// Triggered on load of body element
+function init() {
+    loadFromStorage()
+    if (siteData == null) {
+        setDefaultData()
+    }
+}
+
+// Default data when no data is found
+function setDefaultData() {
+    updateSiteData(null, 1.2)
+}
+function updateSiteData(newSiteData, newFontSize = 1.2) {
+    console.log("update " + newSiteData + " fontsize: " +newFontSize )
+    if (newSiteData == null) {
+        siteData = {
+            fontSize: newFontSize
+        }
+    } else {
+        siteData = newSiteData
+    }
+    saveToStorage()
+    updateSite()
+}
+function saveToStorage(){
+    localStorage.setItem("intiaSiteData", JSON.stringify(siteData))
+}
+function loadFromStorage() {
+    var data = JSON.parse(localStorage.getItem("intiaSiteData"))
+    loadFromJson(data)
+}
+function loadFromJson(jsonString){
+    if (jsonString !== null) {
+        updateSiteData(jsonString)
+    }
+}
+
+// Trigger update for all elements that are based on site wide data
+function updateSite() {
+    updateFontSize()
+}
+
+// Font size
+var html=document.querySelector('html');
+
+function updateFontSize() {
+    html.style.fontSize=siteData.fontSize+"rem";
+}
+
+// Change font size Button
+document.getElementById("changeFontsize").addEventListener("click", changeFontSize);
+function changeFontSize() {
+    console.log("Fontsize changed "+ (siteData.fontSize == 1.2) ? 1.5 : 1.2)
+    updateSiteData(null, (siteData.fontSize == 1.2) ? 1.5 : 1.2)
+  }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: intia-theme
 version: !ruby/object:Gem::Version
-  version: 0.1.53
+  version: 0.1.56
 platform: ruby
 authors:
 - Marc Schmidt
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-04-13 00:00:00.000000000 Z
+date: 2022-05-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -61,10 +61,12 @@ files:
 - assets/img/arrow-left.png
 - assets/img/download_link.png
 - assets/img/external-link.png
+- assets/img/icons/contrast.svg
 - assets/img/icons/download.png
 - assets/img/icons/download.svg
 - assets/img/icons/external.png
 - assets/img/icons/external.svg
+- assets/img/icons/font-size.svg
 - assets/img/icons/handshake.svg
 - assets/img/icons/internal.png
 - assets/img/icons/remove.svg