intia-theme 0.1.3 → 0.1.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ee311aee41a62cd387c9c614a126c0656fe27e855f0997972f3670c7606d779e
-  data.tar.gz: 9bbaf10edc06c16403a87b30fe25f21f3212cb442f9e862d252256f1d82302e4
+  metadata.gz: 69feaddac06933818dad03eefdc8c253db949d04dbaa4d9616c28dbfb601847d
+  data.tar.gz: a3f0330ef5c58422cd2f7e3ef67bbee2d241588024ee3d1958185a9dfc4ce8e6
 SHA512:
-  metadata.gz: ce96af5c0a36eb1157db4c73cfc26ec511176e66bac2496b3ffc5cf7b64a685194713a2e9b448c2b6b6e5a236cad497d29a926a2ecb481729488d5678dfe4514
-  data.tar.gz: a9d2cec53bfb0a615da9d43f7df1b009da205edcae7c69e143b17fd08e5c919fd58c6cab499bc3e3dd3fd5540e905f2142b4892843f7847718c9784fc8061f45
+  metadata.gz: e8f3b4cbd3f656aef54bf1aacc57612c390607a451f2022f87f57af85093f5cd0ca3f7aa2fcfbc54f8bb027505f42b086b2fdb342f3de9d550dbe364d387b567
+  data.tar.gz: a0ad607fcebbde4e9dd4e1c96f0eaf203e2789277387621a8029b95b5b012952197850e24e6586a466b208d1d5f6e4d430975d6194b4310264bebaf80a213d73

data/_includes/contact.html

@@ -0,0 +1,70 @@
+{% if page.contact %}
+<div class="green contact">
+    <h1>Write us</h1>
+    Lorem ipsum leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget
+    metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis
+    consectetur purus sit amet fermentum.
+    <form action="https://submit-form.com/ujaWfjyi"  class="columns">
+        <div class="column is-6">
+            <div class="field">
+                <label class="label">Name</label>
+                <div class="control has-icons-left">
+                  <input class="input" type="text" id="name" name="name" placeholder="Name" required>
+                  <span class="icon is-small is-left">
+                    <i class="fas fa-user"></i>
+                  </span>
+                </div>
+              </div>
+              <div class="field">
+                <label class="label">E-Mail</label>
+                <div class="control has-icons-left">
+                  <input class="input" type="email" id="email" name="email" placeholder="E-Mail">
+                  <span class="icon is-small is-left">
+                    <i class="fas fa-envelope"></i>
+                  </span>
+                </div>
+              </div>
+              <div class="field">
+                <label class="label">Thema</label>
+                <div class="control">
+                  <div class="select">
+                    <select id="thema" name="thema">
+                      <option value="Sonstige">Sonstige</option>
+                      <option value="Plattform">Plattform</option>
+                      <option value="Innovationskoffer">Innovationskoffer</option>
+                      <option value="Methoden">Methoden</option>
+                      <option value="Prototypen">Prototypen</option>
+                      <option value="Stories">Stories</option>
+                    </select>
+                  </div>
+                </div>
+              </div>
+        </div>
+        <div class="column is-6">
+            <div class="field">
+                <label class="label">Nachricht</label>
+                <div class="control">
+                  <textarea
+                      class="textarea"
+                      id="message"
+                      name="message"
+                      placeholder="Wie können wir dir helfen?"
+                      required=""
+                  ></textarea>
+                </div>
+              </div>
+              <div class="checkbox columns">
+                <div class="column is-1">
+                  <input class="column" type="checkbox" id="agree" name="privacy-policy" value="agreed" required oninvalid="this.setCustomValidity('Bitte dieses Feld anklicken, um fortzufahren')"
+                       oninput="this.setCustomValidity('')">
+                </div>
+                
+                <div class="column">
+                  <label for="agree">Ich akzeptiere das für die Daten-Erfassung der Dienst Formspark.io genutzt wird. Für nähere Informationen zur Daten-Erfassung <a href="https://formspark.io/legal/privacy-policy/">hier klicken</a>.</label><br><br>
+                  <button class="button is-rounded is-dark" type="submit">Abschicken</button>
+                </div>
+              </div>
+        </div>
+    </form>
+  </div>
+  {% endif %}

data/_includes/footer.html

@@ -18,7 +18,7 @@
         {% if site.data.navigation %}
         <div class="column ">
             <div class="title">Site Map</div>
-            <div class="columns">
+            <div class="columns footer-nav">
                 {% for item in site.data.navigation %}
                     <div class="column">
                         <a href="{{ subitem.link | relative_url }} " class="link"><strong>{{ item.name }}</strong></a>

data/_includes/hero.html

@@ -1,10 +1,13 @@
 <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 %}>
     <div class="hero-body">
         <div class="container">
+            {% if page.title_above %}
+                <h1 class="overtitle subtitle is-4">{{ page.title_above }}</h1>
+            {% endif %}
+            <h1 class="title is-1  {% 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 %}
-            <h1 class="title is-1">{{ page.title }}</h1>
             <p class="subtitle is-4">{{ page.subtitle }}</p>
             {% if page.hero_link %}
                 <a href="{{ page.hero_link | relative_url }}" class="button is-rounded is-dark">
@@ -15,7 +18,5 @@
                 </a>
             {% endif %}
         </div>
-        <img src="../assets/img/arrow-down.png" alt="placeholder"  class="arrow-image is-pulled-left is-hidden-mobile"> 
     </div>
-</section>
-<i class="fas {{ section.icon }}"></i>
+</section>

data/_includes/story-slider.html

@@ -3,7 +3,7 @@
         <h1 class="slider-titel">Aktuelles</h1>
 
         <div class="carousel">
-            {% for story in site.posts %}
+            {% for story in site.posts limit:5 %}
             <div class="story-carousel-item">
                 <div class="container">
                     <div class="section">
@@ -36,6 +36,5 @@
             </div>
             {% endfor %}
 		</div>
-    <img src="../assets/img/arrow-down.png" alt="placeholder"  class="arrow-image is-pulled-right is-hidden-mobile">
     </div>
 {% endif %}

data/_layouts/default.html

@@ -10,16 +10,20 @@ The Default layout that everything is using
     {% include head.html %}
     <body>
         {% include header.html %}
+        <div class="arrow-image is-pulled-left is-hidden-mobile">
+            <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>
         {% unless page.hide_hero %}
             {% include hero.html %}
         {% else %}
-            
         {% endunless %}
-        <div class="content-wrapper has-background-primary-light">
+        <div id="main" class="content-wrapper has-background-primary-light">
             
             {% include story-slider.html %}
+            {% include contact.html %}
             <div class="columns is-centered">
-                <div class="column is-10-desktop is-12-tablet">
+                <div id="content" class="column is-10-desktop is-12-tablet">
                     {% include introduction.html %}
                     {% include left-right-blocks.html %}
                     {{content | markdownify}}

data/_sass/_layout.scss

@@ -46,17 +46,55 @@ div.highlight {
   top: 30px;
 }
 
+.green {
+  background-color: $light;
+  padding-left: 5%;
+  padding-right: 5%;
+  padding-top: 6rem;
+  padding-bottom: 8rem;
+}
+
+.highlighter {
+  background-color: $light;
+  padding-left: 5%;
+  padding-right: 5%;
+  padding-bottom: 5%;
+  border-radius: 65px;
+  margin-top: 3em;
+}
+.highlighter-image {
+}
+
+.overtitle {
+  margin-bottom: 0 !important;
+  padding-bottom: 0 !important;
+}
+.title-with-overtitle {
+  margin-top: 0 !important;
+  padding-top: 0.25em !important;
+}
 // Globals
 img.is-rounded {
   border-radius: 65px;
 }
 .arrow-image {
   z-index: 10;
-  position: relative;
-  bottom: -90px;
+  top: calc(50% - 68px);
+  position: sticky;
   width: 64px;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+}
+.is-pointed-down {
+  transform: scaleY(-1);
+}
+.is-hidden {
+  visibility: hidden;
+}
+.is-visible {
+  visibility: visible;
 }
-
 .clear {
   clear: both;
   display: block;
@@ -65,12 +103,13 @@ img.is-rounded {
 
 // Buttons - Mybe global in Buttons und raus damit?
 .button.is-dark {
-  background-color: #229387;
+  background-color: $primary-dark;
 }
 
 // Navi
 .navbar {
   padding-top: 0.6rem;
+  padding-bottom: 2.6rem;
 }
 
 .navbar.is-primary .navbar-dropdown a.navbar-item.is-active {
@@ -128,6 +167,8 @@ img.is-rounded {
 .hero-body img {
   float: right;
   margin-left: 200px;
+  top: -175px;
+  position: inherit;
 }
 .hero {
   display: block;
@@ -137,7 +178,7 @@ img.is-rounded {
   padding-top: 70px;
 }
 .hero.is-medium .hero-body {
-  padding: 13rem 9rem 4.5rem;
+  padding: 10rem 9rem 4.5rem;
 }
 
 .hero-body .button,
@@ -153,12 +194,32 @@ img.is-rounded {
   text-align: left;
 }
 //// Hero sub-pages with green text
-.subpage h1, .subpage p {
-  color: #229387 !important;
+.subpage h1,
+.subpage p {
+  color: $primary-dark !important;
+}
+.subpage .hero-body img,
+.toppage .hero-body img {
+  float: none;
+  margin-left: auto;
+  margin-right: auto;
+  display: block;
+  top: 0;
 }
 
+//// Hero top-pages with green box
+.toppage .hero-body {
+  background-color: $light !important;
+}
+
+.glossary {
+  text-align: center;
+}
 
 // Content
+#main .columns {
+  width: 100%;
+}
 .subtitle {
   padding: 50px;
 }
@@ -231,14 +292,6 @@ img.is-rounded {
 }
 
 // story-slider
-
-.green {
-  background-color: #e7f2ea;
-  padding-left: 5%;
-  padding-right: 5%;
-  padding-top: 6rem;
-  padding-bottom: 8rem;
-}
 .slider {
   box-shadow: none;
 }
@@ -304,12 +357,80 @@ img.is-rounded {
   border: 0px !important;
   box-shadow: none !important;
 }
+.slider-navigation-previous img,
+.slider-navigation-next img {
+  border-radius: 0%;
+}
+
+//highlighter
+.highlighter {
+  background-color: $light;
+  border-radius: 65px;
+  padding: 75px;
+  font-size: 1.4rem;
+}
+
+.min-height25p {
+  min-height: 25vw;
+}
+
+.highlighter h1 {
+  text-align: left;
+  padding-top: 0;
+}
+.highlighter h2 {
+  padding-top: 0;
+  font-size: 2rem;
+  font-weight: 600;
+}
+.two-columns p {
+  column-count: 2;
+  column-gap: 5rem;
+}
+
+.highlighter .button {
+  float: right;
+}
+
+.highlighter img {
+  border-radius: 0;
+  height: auto;
+  width: 50%;
+  float: right;
+  padding-left: 5rem;
+  padding-right: 5rem;
+}
+.highlighter .column {
+  margin-right: 4rem;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+
+.highlighter .is-round {
+  display: flex;
+  background-color: white;
+  border-radius: 1000px;
+  padding: 3rem;
+  float: none;
+  overflow: hidden;
+  height: 300px;
+  width: 300px;
+}
+.highlighter .is-round img {
+  background-color: white;
+  padding-left: 0;
+  padding-right: 0;
+  height: auto;
+  width: auto;
+}
+
 // Footer
 
 .footer {
   font-size: 0.75rem;
   margin-top: 5rem;
   line-height: 1rem;
+  padding-top: 0;
 }
 .footer img.column {
   padding: 0 !important;
@@ -329,6 +450,14 @@ footer .columns {
   margin-left: auto;
   margin-right: auto;
   font-size: 0.75rem;
+  padding-top: 2em;
+  padding-bottom: 2em;
+}
+.footer .footer-nav {
+  padding-top: 0;
+}
+.footer .footer-nav .column {
+  padding-left: 0;
 }
 .footer-logos .column {
   flex-basis: auto;
@@ -373,3 +502,58 @@ footer .columns {
     text-align: left !important;
   }
 }
+
+// Tool-Tip
+
+a:hover .tooltip-popup {
+  visibility: visible;
+  display: block;
+}
+.tooltip-popup {
+  position: relative;
+  width: 20vw;
+  visibility: hidden;
+  display: none;
+  background: $light;
+  border-radius: 65px;
+}
+
+// Contect
+
+.input, .textarea, #thema {
+  border: 3px solid $primary-dark;
+  border-radius: 45px;
+  padding-left: 2.5em;
+  padding-right: 2.5em;
+}
+.input, #thema {
+  height: 2.75em;
+}
+
+.textarea {
+  padding-left: 2.5em;
+  padding-top: 1.5em;
+  min-height: 13.5em !important;
+}
+.label {
+  color: $primary-dark;
+  font-weight: 600;
+  padding-left: 1rem;
+  margin-bottom: 0 !important;
+}
+.contact .column {
+  padding: 5rem;
+  padding-left: 0;
+}
+.select:not(.is-multiple):not(.is-loading)::after {
+  border-color: $primary-dark;
+  right: 2.3em;
+  z-index: 4;
+}
+.contact .control.has-icons-left .icon.is-left {
+  left: 5px;
+  top: 2px;
+}
+.contact .button {
+  float: right;
+}

data/_sass/_main.scss

@@ -17,26 +17,39 @@ $dark: #09443e;
 @import "../node_modules/bulma/bulma.sass";
 // Extensions
 @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;
 $modal-content-width: 800px;
 $tabs-link-active-color: $primary;
 $tabs-link-active-border-bottom-color: $primary;
 // Global
+html {
+  scroll-behavior: smooth;
+}
 body {
   font-size: 1.5rem;
   line-height: 2.25rem;
 }
 
-h1, h2, h3, p {  
-  padding-bottom:30px;
+h1,
+h2,
+h3,
+p {
+  padding-bottom: 30px;
 }
-h1, h2{  
-  padding-top:90px;
+h1,
+h2 {
+  padding-top: 90px;
 }
 
-.card h1, .card h2, .card p, .slider h1, .slider h2, .slider p {  
-  padding-top:0;
+.card h1,
+.card h2,
+.card p,
+.slider h1,
+.slider h2,
+.slider p {
+  padding-top: 0;
   padding-bottom: 0;
 }
 
@@ -49,7 +62,7 @@ h1 p {
 }
 
 .green h1,
-.green h1 p{
+.green h1 p {
   text-align: left;
 }
 

data/assets/js/main.js

@@ -6,4 +6,45 @@ const carousels = bulmaCarousel.attach('.carousel',{
     icons: {
         'previous': `<img src="../assets/img/arrow-left.png"></img>`,
         'next': `<img src="../assets/img/arrow-left.png" style="transform: rotate(180deg);"></img>`}
-});
+});
+
+var scrollUpArrow= document.getElementById("scroll-up");
+var scrollDownArrow= document.getElementById("scroll-down");
+var scrollStep=10,
+	scrollTimer=null
+
+scrollUpArrow.addEventListener("mouseenter", function(evt){
+    scroll(-scrollStep)
+})
+scrollUpArrow.addEventListener("mouseleave", function(evt){
+    if(scrollTimer!=null)clearTimeout(scrollTimer);
+})
+scrollDownArrow.addEventListener("mouseleave", function(evt){
+    if(scrollTimer!=null)clearTimeout(scrollTimer);
+})
+scrollDownArrow.addEventListener("mouseenter", function(evt){
+    scroll(scrollStep)
+})
+function scroll(yDisplacement){
+    if(scrollTimer!=null)clearTimeout(scrollTimer);
+
+  scrollTimer = setTimeout(function(){
+      window.scroll({
+        top:window.scrollY+yDisplacement,
+      left:0,
+      behavior: 'smooth'
+      })  
+      scroll(yDisplacement)
+  }, 50);
+}
+
+window.onscroll = function(ev) {
+    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
+        scrollDownArrow.classList.add("is-hidden");
+    }else if(window.pageYOffset === 0){
+        scrollUpArrow.classList.add("is-hidden");
+    }else{
+        scrollDownArrow.classList.remove("is-hidden"); 
+        scrollUpArrow.classList.remove("is-hidden"); 
+    }
+};

data/node_modules/@creativebulma/bulma-tooltip/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 CreativeBulma
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

data/node_modules/@creativebulma/bulma-tooltip/README.md

@@ -0,0 +1,34 @@
+# Introduction
+This components has been developped as a [Bulma](https://bulma.io) extension and brings the ability to **easily display a tooltip attached to any kind of element, in different position**.
+
+[![npm](https://img.shields.io/npm/v/@creativebulma/bulma-tooltip.svg)](https://www.npmjs.com/package/@creativebulma/bulma-tooltip)
+[![npm](https://img.shields.io/npm/dm/@creativebulma/bulma-tooltip.svg)](https://www.npmjs.com/package/@creativebulma/bulma-tooltip)
+[![](https://data.jsdelivr.com/v1/package/npm/@creativebulma/bulma-tooltip/badge)](https://www.jsdelivr.com/package/npm/@creativebulma/bulma-tooltip)
+
+---
+
+## Prerequisites
+This component extends [Bulma CSS Framework](https://bulma.io) and requires it to work.
+
+## Get Started
+```shell
+npm i -D @creativebulma/bulma-tooltip
+```
+Full installation steps can be found here: [installation steps](https://demo.creativebulma.net/components/tooltip/1.2/get-started)
+
+## Documentation & Demo
+Full documentation and demo are available [here](https://demo.creativebulma.net/components/tooltip/1.2/get-started)
+
+## About the project
+BulmaBoilerplate is © 2020 by [CreativeBulma](https://creativebulma.net).
+
+**If you enjoy this component, have a look at our [MarketPlace](https://creativebulma.net) and discover Free and Premium Bulma components and Templates.**
+
+## License
+BulmaBoilerplate is distributed under [MIT](https://github.com/CreativeBulma/bulma-tooltip/blob/master/LICENSE) license.
+
+## Contributing
+**Contribution are welcome!**  
+You found a bug, a typo issue ? Feel free to create a PR on the [github repository](https://github.com/CreativeBulma/bulma-tooltip/) of this project.
+
+When contributing to this project, please first discuss the change you wish to make via issue on the [github repository](https://github.com/CreativeBulma/bulma-tooltip/issues), email, or any other method with the owners of this project before making a change.