intia-theme 0.1.51 → 0.1.54

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f905a7cf72167a88c327e3a8de72dc0bf24395f73a2786c333f89880a557fb06
-  data.tar.gz: 363c862e72c5da5ba2d0a8cd62f5f3c67de986af1624aa608661e84ea7da19e8
+  metadata.gz: 5a57ae54b99cc5c23737bdeea3ae9fa72f62219c49c31b8ee5045b1a1e51d963
+  data.tar.gz: 919bbdd3968ad79f17714ce8a095b13cbdd35457d83242ec4e44bdad45f0131d
 SHA512:
-  metadata.gz: 929a33259fa68ca2656dc4f52dfd2cc45c676c5b9cc0356ad50c21529d3516b8ca3dceab982fa084e53e097da6dbba217598a5039cf9e7320b819fdf8a098594
-  data.tar.gz: 5a650a0bfd4ab32dfca2808849136c632f2d0eb1ab1dac9023c4546109c42199503c5af296ca13752493283c6fc8a126c3aadb179fc57e31a65e532c0dd72746
+  metadata.gz: bf470d16533d41d7a8975e5c290dbb240bebffe34c7b95a7fc31b9d20cbce73cb8a370812f3f2cd58a7d454739024c02d1cf67a0ba46b35a941025ee5d9500ae
+  data.tar.gz: 1041c4c8151cd9cdb305b29bd0ea0463d83a58d4acecc00fdf4abb3e0e58804a061fb509dd6ecf5b0127ad79ef246245638a7a63be81677b51429ed58cdba4a9

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

@@ -12,7 +12,26 @@
             </a>
         </div>
         <div class="navbar-menu" id="navMenu" :class="{ 'is-active': openNav }">
-            <div class="navbar-end buttons">
+            <div id="SearchOverlay" class="searchbar-overlay navbar-end buttons">
+                <div class="navbar-item searchbar">
+                    <div class="field">
+                        <div id="search-container" class="control">
+                          <input class="input search-input" type="text" id="search-input" placeholder="Suchbegriff eintippen">
+                        </div>
+                    </div>
+                    <ul id="results-container" class="search-result-list"></ul>
+                </div>
+                <div class="navbar-end">
+                    <div class="navbar-item navbar-search">
+                        <a id="closeSearch">
+                            <span class="icon">
+                                <i class="fa-solid icon-remove"></i>
+                            </span>
+                        </a>  
+                    </div>
+                </div>
+            </div>
+            <div id="navmenu" class="navbar-end buttons">
                 {% if site.data.navigation %}
                 {% for item in site.data.navigation %}
                 {% if item.dropdown %}
@@ -42,7 +61,7 @@
                 {% endif %}
                 {% endfor %}
                 {% endif %}
-                <div class="navbar-end">
+   
                     <div class="navbar-item navbar-search">
                         <a id="openSearch">
                             <span class="icon">
@@ -50,12 +69,11 @@
                             </span>
                         </a>  
                     </div>
-                </div>
+                
             </div>
         </div>
     </div>
 </nav>
-
 {% unless page.hide_beadcrumb %}
 <section class="breadcrumb-section green-version">
     <div class="container breadcrumb-container">
@@ -91,20 +109,6 @@
 {% else %}
 {% endunless %}
 
-
-<div id="SearchOverlay" class="overlay">
-    
-    <div class="overlay-content">
-        
-        <div class="field">
-            <div id="search-container" class="control">
-              <input class="input" type="text" id="search-input" placeholder="Suchbegriff eintippen">
-            </div>
-        </div>
-        <span class="closebtn" id="closeSearch" title="Close Overlay">×</span>
-        <ul id="results-container"></ul>
-    </div>
-</div>
   <!-- Script pointing to search-script.js -->
   <script src="/assets/js/search.js" type="text/javascript"></script>
   

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,7 +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: 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,60 +30,98 @@ 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 {
+  @extend h2;
+  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;
   padding-left: 1em;
 }
+a:link {
+  color: #1E7D73;
+}
+
+a:visited {
+  color: #1E7D73;
+}
+
+a:hover {
+  color: #77B9A5;
+}
+
+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);
@@ -99,35 +138,32 @@ ul {
   -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,
@@ -179,72 +215,47 @@ ul {
 }
 // Search 
 .navbar-search{
-  padding-left: 0.75rem !important;
-  padding-top: 0.5rem !important;
-}
-//Search overlay
-.overlay {
-  height: 100%;
-  width: 100%;
-  display: none;
-  position: fixed;
-  z-index: 40;
-  top: 0;
-  left: 0;
-  background-color: #1e7d73be;
-}
-
-.overlay-content {
-  position: relative;
-  top: 46%;
-  width: 80%;
-  margin-top: 30px;
-  margin: auto;
-}
-
-.overlay .closebtn {
-  font-size: 60px;
-  cursor: pointer;
-  color: white;
+  padding: 0px !important;
+  height: 2rem;
+  margin-bottom: 12px;
 }
-
-.overlay .closebtn:hover {
-  color: #ccc;
-}
-
-.overlay input[type=text] {
-  padding: 15px;
-  font-size: 17px;
-  float: left;
-  width: 80%;
-  background: white;
-  border: 3px solid $primary-dark;
+.navbar-search .icon {
+  height: 1.5rem;
+  width: 1.5rem;
+  vertical-align : middle;
 }
-
-.overlay input[type=text]:hover {
-  background: #f1f1f1;
+//Search overlay
+.searchbar .field{
+  margin-bottom: 0;
 }
-
-.overlay button {
-  float: left;
-  width: 20%;
-  padding: 15px;
-  background: #ddd;
-  font-size: 17px;
-  border: none;
-  cursor: pointer;
+.searchbar-overlay{
+  display: none;
 }
-
-.overlay button:hover {
-  background: #bbb;
+.searchbar{
+  height: 47px;
+  width: 800px;
+  padding-top: 0 !important;
+  margin-right: 1rem;
 }
-
 .search-item {
-  color: white;
+  color: black;
 }
-.overlay-content ul{
+.searchbar-overlay ul{
   list-style-type: none;
 }
+.search-result-list {
+  display: none;
+  background-color: #e7f2ea;
+  color: black;
+  border-bottom-left-radius: 45px;
+  border-bottom-right-radius: 45px;
+  border-left: 3px solid #1e7d73;
+  border-right: 3px solid #1e7d73;
+  border-bottom: 3px solid #1e7d73;
+}
+.search-input:active, .search-input:hover{
+  border-color: #1e7d73 !important ;
+}
 
 .button.is-dark.has-dropdown:hover .navbar-dropdown,
 .button.is-dark.is-hovered.has-dropdown .navbar-dropdown {
@@ -322,14 +333,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;
@@ -350,7 +353,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;
@@ -358,6 +361,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;
@@ -398,8 +413,7 @@ a .tooltip-popup {
 
 // Navi
 .navbar {
-  padding-top: 0.6rem;
-  padding-bottom: 2.6rem;
+  padding-top: 10px;
 }
 
 .navbar.is-primary .navbar-dropdown a.navbar-item.is-active {
@@ -408,8 +422,8 @@ a .tooltip-popup {
 }
 
 .navbar-brand img {
-  max-height: 3rem;
-  margin-top: 1rem;
+  max-height: 2rem;
+  margin-top: 16px;
 }
 
 .navbar-brand a p {
@@ -568,10 +582,6 @@ a.navbar-item.is-active,
   box-shadow: none;
 }
 
-.card .button {
-  margin-top: 50px;
-}
-
 .content-wrapper h1 {
   padding-top: 50px;
 }
@@ -604,10 +614,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;
@@ -654,6 +664,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;
@@ -719,7 +735,8 @@ figcaption {
   background-color: $light;
   border-radius: 65px;
   padding: 75px;
-  font-size: 1.4rem;
+  margin-top: 3em;
+  margin-bottom: 3em;
 }
 
 .min-height25p {
@@ -732,8 +749,6 @@ figcaption {
 }
 .highlighter h2 {
   padding-top: 0;
-  font-size: 2rem;
-  font-weight: 600;
 }
 .two-columns p {
   column-count: 2;
@@ -778,7 +793,6 @@ figcaption {
   width: 50%;
   float: right;
   padding-left: 5rem;
-  padding-right: 5rem;
 }
 .highlighter img.with-zone {
   width: 100%;
@@ -922,7 +936,7 @@ a:hover .tooltip-popup,
   box-shadow: none;
 }
 .input {
-  height: 2.75em;
+  height: 2em;
 }
 
 .textarea {
@@ -1032,10 +1046,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;
@@ -1119,10 +1129,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;
@@ -1132,9 +1147,6 @@ div.faq {
   color: #1e7d73;
   cursor: default;
 }
-.navbar {
-  padding-bottom: 2.3rem;
-}
 .hero.is-medium .hero-body {
   padding-top: 1rem;
 }
@@ -1221,8 +1233,7 @@ div.faq {
     font-size: 0.83rem;
   }
   .navbar {
-    padding-top: 0.6rem;
-    padding-bottom: 0.6rem;
+    padding-top: 10px;
   }
   .navbar-brand img {
     margin: 1rem;
@@ -1341,4 +1352,11 @@ div.faq {
     image-rendering: -webkit-optimize-contrast;
     padding-bottom: 15px;
   }
+  //Searchbar
+  .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/img/icons/remove.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+  
+<g transform="matrix(2,0,0,2,0,0)"><path d="M.44,21.44a1.49,1.49,0,0,0,0,2.12,1.5,1.5,0,0,0,2.12,0l9.26-9.26a.25.25,0,0,1,.36,0l9.26,9.26a1.5,1.5,0,0,0,2.12,0,1.49,1.49,0,0,0,0-2.12L14.3,12.18a.25.25,0,0,1,0-.36l9.26-9.26A1.5,1.5,0,0,0,21.44.44L12.18,9.7a.25.25,0,0,1-.36,0L2.56.44A1.5,1.5,0,0,0,.44,2.56L9.7,11.82a.25.25,0,0,1,0,.36Z" style="fill: #000000"></path></g></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,13 +50,96 @@ window.onscroll = function(ev) {
     }
 };
 
+// Searchbar
 document.getElementById("openSearch").addEventListener("click", openSearch);
 document.getElementById("closeSearch").addEventListener("click", closeSearch);
+document.getElementById("search-input").addEventListener("input", showsearchresults);
+
+var searchOverlay = document.getElementById("SearchOverlay");
+var navmenu = document.getElementById("navmenu");
+var resultsContainer = document.getElementById("results-container");
+var searchInput = document.getElementById("search-input");
 
 function openSearch() {
-    document.getElementById("SearchOverlay").style.display = "block";
+    searchOverlay.style.display = "flex";
+    navmenu.style.display = "none";
 }
   
 function closeSearch() {
-    document.getElementById("SearchOverlay").style.display = "none";
-}
+    searchOverlay.style.display = "none";
+    navmenu.style.display = "flex";
+}
+
+
+function showsearchresults(e) {
+    if(e.target.value.length>0){
+        resultsContainer.style.display = "block";
+        searchInput.style.borderBottomLeftRadius = "0px";
+        searchInput.style.borderBottomRightRadius = "0px";
+    }else{
+        resultsContainer.style.display = "none";
+        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.51
+  version: 0.1.54
 platform: ruby
 authors:
 - Marc Schmidt
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-04-11 00:00:00.000000000 Z
+date: 2022-05-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -61,12 +61,15 @@ 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
 - assets/img/icons/search.svg
 - assets/img/internal-link.png
 - assets/img/logo-black.png