intia-theme 0.1.0 → 0.1.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fe0e6449cf726568b62e712a4f6b6fde5f425abe58ad70177388e1ee782fb07c
-  data.tar.gz: bcff36192de3125d60137288b559c9c70c73a578f9546fd26a7811a515c1d2e6
+  metadata.gz: 0b85ccfa02dee6eb0a399ee350facc3db911c9e81fdcf1f9638de1570bf2e01c
+  data.tar.gz: c62194c0d2f11ebbdc1ec14d5111473c810df5366b53f96ddbb16de85752746d
 SHA512:
-  metadata.gz: 283167d6525f793f56e73a5b5a582435895d76ef95b78fb1da837943505da325bb971568e3d035440476aca22cfaef5fa79c7647873e9d895283d2df4d8e3003
-  data.tar.gz: 96a112508c99a88662418d1cf11d410ef398aea9c04456f0e13bd750177088dd6c21bf74754508f05c305f853d06843ea0e50c08b19e9263d233b276e22c508c
+  metadata.gz: 7b86528ed7b2ae09844988a20e39fded3887707b8b5f486231f98a81df98e423f211cd5915aaed1e52ce4dccd9c79e28a9b33a563d64e7760579f0bfdf23ef1a
+  data.tar.gz: 3b0b85d4fb3f7f31bddeb0e66e4b51ef40df5ffdbde3442624ee738d0c2d0cd64a131dd6aad96d1db959f45011fd8536b72ade48f8c615919429ad4b61501501

data/_includes/hero.html

@@ -1,7 +1,9 @@
-<section class="hero is-primary is-hidden-print {% if page.hero_height %} {{ page.hero_height }} {% else %} is-medium {% 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-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">
-            <img src="https://via.placeholder.com/440x638" alt="placeholder"  class="is-rounded is-hidden-mobile">
+            {% 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 %}
@@ -13,7 +15,7 @@
                 </a>
             {% endif %}
         </div>
-        <img src="../assets/img/arrow.png" alt="placeholder"  class="arrow-image is-pulled-left is-hidden-mobile"> 
+        <img src="{{ site.baseurl }}/assets/img/arrow-down.png" alt="placeholder"  class="arrow-image is-pulled-left is-hidden-mobile"> 
     </div>
 </section>
 <i class="fas {{ section.icon }}"></i>

data/_includes/introduction.html

@@ -1,5 +1,5 @@
 {% if page.introduction_title %}
-    <div class="card">
+    <div class="card column is-8 is-offset-2">
         <h1 class="has-text-centered">{{page.introduction_title}}</h1>
         <h3 class="subtitle is-4 has-text-left">{{page.introduction_content}}</h3>
     <br>

data/_includes/story-slider.html

@@ -36,6 +36,6 @@
             </div>
             {% endfor %}
 		</div>
-    <img src="../assets/img/arrow.png" alt="placeholder"  class="arrow-image is-pulled-right is-hidden-mobile">
+    <img src="../assets/img/arrow-down.png" alt="placeholder"  class="arrow-image is-pulled-right is-hidden-mobile">
     </div>
 {% endif %}

data/_layouts/404.html

@@ -0,0 +1,7 @@
+---
+layout: default
+---
+{% if page.error_image %}
+<img src="{{page.error_image}}" alt="placeholder">
+{% endif %} 
+{{content | markdownify}}

data/_sass/_layout.scss

@@ -46,6 +46,23 @@ 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;
+}
+.highlighter-image {
+}
 // Globals
 img.is-rounded {
   border-radius: 65px;
@@ -105,6 +122,10 @@ img.is-rounded {
 .button.is-rounded {
   padding-right: 0em !important;
 }
+.button.button.is-rounded:not(.navbar-item) {
+  padding-left: 1.5em !important;
+  padding-right: 1.5em !important;
+}
 .navbar-dropdown .button.is-rounded {
   padding-right: auto !important;
 }
@@ -144,6 +165,15 @@ img.is-rounded {
 .hero-body .container .button {
   float: right;
 }
+.home .hero-body h1,
+.home .hero-body h1 p {
+  text-align: left;
+}
+//// Hero sub-pages with green text
+.subpage h1,
+.subpage p {
+  color: #229387 !important;
+}
 
 // Content
 .subtitle {
@@ -168,6 +198,7 @@ img.is-rounded {
 .content-wrapper img {
   border-radius: 65px;
   height: auto;
+  object-fit: cover;
 }
 
 .content-wrapper p {
@@ -176,6 +207,7 @@ img.is-rounded {
 
 .card-content h2 p {
   padding-left: 15px;
+  padding-bottom: 0.5em;
 }
 
 .card-image:first-child img {
@@ -216,20 +248,9 @@ 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;
 }
-.slider-item {
-  // padding-left: 50px;
-}
 .story-carousel-item {
   margin-left: 5%;
   margin-right: 5%;
@@ -257,6 +278,7 @@ img.is-rounded {
   border-top-right-radius: 0 !important;
   border-bottom-right-radius: 0 !important;
   height: 100%;
+  object-fit: cover;
 }
 .column.slider-content {
   padding: 3em;
@@ -285,6 +307,12 @@ img.is-rounded {
 .slider-pagination {
   bottom: -40px !important;
 }
+.slider-navigation-previous,
+.slider-navigation-next {
+  background: transparent !important;
+  border: 0px !important;
+  box-shadow: none !important;
+}
 // Footer
 
 .footer {
@@ -298,6 +326,7 @@ img.is-rounded {
 }
 .footer-logos img {
   height: 75px;
+  margin-right: 15px;
 }
 .footer .title {
   color: white;

data/_sass/_main.scss

@@ -23,16 +23,34 @@ $modal-content-width: 800px;
 $tabs-link-active-color: $primary;
 $tabs-link-active-border-bottom-color: $primary;
 // Global
-body {  
+body {
   font-size: 1.5rem;
   line-height: 2.25rem;
 }
 
+h1, h2, h3, p {  
+  padding-bottom:30px;
+}
+h1, 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-weight: 600;
+  text-align: center;
+}
+
+.green h1,
+.green h1 p{
+  text-align: left;
 }
 
 h2,
@@ -56,33 +74,36 @@ h4 {
 h5 {
   font-size: 0.83rem;
 }
+
 // Button Animation + Gleiche Breite
 .button {
   // Schrifft
   font-size: 1.31rem !important;
   font-weight: 600;
   // Animation
-  transition-timing-function: cubic-bezier(.25, .46, .45, .94);
+  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
   transition-property: background-color, transform;
-  transition-duration: .3s;
-  -webkit-transition-timing-function: cubic-bezier(.25, .46, .45, .94);
+  transition-duration: 0.3s;
+  -webkit-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
   -webkit-transition-property: background-color, transform;
-  -webkit-transition-duration: .3s;
-  -o-transition-timing-function: cubic-bezier(.25, .46, .45, .94);
+  -webkit-transition-duration: 0.3s;
+  -o-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
   -o-transition-property: background-color, transform;
-  -o-transition-duration: .3s;
-  -moz-transition-timing-function: cubic-bezier(.25, .46, .45, .94);
+  -o-transition-duration: 0.3s;
+  -moz-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
   -moz-transition-property: background-color, transform;
-  -moz-transition-duration: .3s;
+  -moz-transition-duration: 0.3s;
 }
 
-.button a, .button span{
+.button a,
+.button span {
   // Schrifft
   font-size: 16px !important;
   font-weight: 600;
 }
 
-.navbar-menu .button, .navbar-dropdown .button{
+.navbar-menu .button,
+.navbar-dropdown .button {
   // Buttongröße aus Figma
   width: 166px;
   height: 47px;

data/assets/js/main.js

@@ -2,5 +2,8 @@ import './bulma-carousel/js/bulma-carousel.js';
 // Initialize all elements with carousel class.
 const carousels = bulmaCarousel.attach('.carousel',{
     slidesToScroll: 1,
-    slidesToShow: 1
+    slidesToShow: 1,
+    icons: {
+        'previous': `<img src="../assets/img/arrow-left.png"></img>`,
+        'next': `<img src="../assets/img/arrow-left.png" style="transform: rotate(180deg);"></img>`}
 });