intia-theme 0.1.16 → 0.1.17

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 29b89930dd6eb39693bee037d177d7e6c01f6210f57b019b745bd41e5619c527
-  data.tar.gz: 2a44934b710dc03f53e77bcedf20d58b144f7b47cbd4eef0c472c89675002cd3
+  metadata.gz: 53296ddda845d66fa5916507b301141a35e3eabd5bcd02e44b1b96830192b1a4
+  data.tar.gz: '090e60815310dad0439bc027988ae48b9bf653a4ce8dfe63227f865952f6ed5c'
 SHA512:
-  metadata.gz: 8b9b527d719ec52c5bda8f94652d0f9f7d559376ffe268abeb799cbfd8644e20be942e70315a198d8637345384da31fa5ece2ad9bd00552eead1424764b83d22
-  data.tar.gz: f5bfdfaab597667c9892c759fba7f66e802cad3fced9bb9939fad7124e59f548e2d87b1fd470c2cec21abc405df3aced7b72dd52a8d4e7923aea892ebc9035ba
+  metadata.gz: 88c769261767a6388d356a7752160c75665808e806d0b77aff3c8e6ab9fb0846df0922fd0bf06ac42229db3c447eb2049ceabf7e342c7fc691c87bd74c5e5b51
+  data.tar.gz: 439342205624ceb041d7be888fd9ee0d2ca20490eab0d2f43cdf2f1f0d94a60b406f3786075e56fb967365e4ed2631cc3ecec43fd4966eed125c5b48f30a1467

data/_includes/contact.html

@@ -1,6 +1,5 @@
 {% if page.contact %}
-<div class="green contact">
-  <div class="container">
+  <div class="container contact">
     <h1>{{ site.data.contact.title  }}</h1>
     {{ site.data.contact.introduction  }}
     <form action="{{ site.data.contact.action }}"  class="columns">
@@ -58,7 +57,7 @@
                        oninput="this.setCustomValidity('')">
                 </div>
                 
-                <div class="column">
+                <div class="column contact-agree">
                   <label for="agree">{{ site.data.contact.checkbox  }}</label><br><br>
                   <button class="button is-rounded is-dark" type="submit">Abschicken</button>
                 </div>
@@ -66,5 +65,4 @@
         </div>
     </form>
   </div>
-</div>
 {% endif %}

data/_includes/footer.html

@@ -4,7 +4,7 @@
         <div class="navbar-brand column is-full">
             <a href="{{ site.baseurl }}/" class="columns navbar-item">
                 <img class="column" src="{{ site.baseurl }}/assets/img/logo-white.png">
-                <p class="calumn brand-title">Inklusiv für alle</p>
+                <p class="calumn brand-title"></p>
             </a>
         </div>
         <div class="column is-2">
@@ -54,12 +54,12 @@
         <div class="columns content is-small has-text-centered footer-logos">
             <div class="column has-text-right"><div class="page-owner">
                 <p class="has-text-left">Eine Seite von</p>
-                <img src="https://upload.wikimedia.org/wikipedia/commons/0/0e/TH_Koeln_Logo.svg">
-                <img src="{{ site.baseurl }}/assets/img/logo-dites.png">
+                <img src="{{ site.baseurl }}/assets/img/logos/INTIA_Plattform_Logos_TH_weiss.png">
+                <img src="{{ site.baseurl }}/assets/img/logos/INTIA_Plattform_Logos_Dites_weiss.png">
             </div></div>
             <div class="column has-text-left"><div class="page-sponsor">                
                 <p class="has-text-left">Gefördert von</p>
-                <img src="https://www.bmbf.de/SiteGlobals/Frontend/Images/icons/_common/logo.svg;jsessionid=73771066A725D13D2D34C4D38E4A181D.live382?__blob=normal&v=3">
+                <img src="{{ site.baseurl }}/assets/img/logos/INTIA_Plattform_Logos_BMBF_weiss.png">
             </div></div>
         </div>
         <div class="content is-small has-text-centered">

data/_includes/header.html

@@ -17,20 +17,25 @@
                 {% for item in site.data.navigation %}
                 {% if item.dropdown %}
                 <div
-                    class="navbar-item has-text-left button is-rounded is-dark has-dropdown is-hoverable {% if site.fixed_navbar == 'bottom' %} has-dropdown-up {% endif %}">
-                    <a href="{{ item.link | relative_url }}"
-                        class="navbar-link {% if item.link == page.url %}is-active{% endif %}">{{ item.name }}</a>
+                    class="navbar-item has-text-left button is-rounded is-dark has-dropdown is-hoverable {% if site.fixed_navbar == 'bottom' %} has-dropdown-up {% endif %} {% for subitem in item.dropdown %} {% if subitem.link == page.url %} is-active-header {% endif %} {% endfor %}">
+                    
+                    {% if item.selectable %}
+                      <a href="{{ item.link | relative_url }}"
+                        class="navbar-link {% if item.link == page.url %} is-active {% endif %}">{{ item.name }}</a>
+                    {% else %}
+                     <a for="navbar-click" class="navbar-link">{{ item.name }}</a>
+                    {% endif %}
                     <div class="navbar-dropdown">
                         {% for subitem in item.dropdown %}
                         <a href="{{ subitem.link | relative_url }}"
-                            class="navbar-item button is-rounded is-dark  {% if subitem.link == page.url %}is-active{% endif %}">{{ subitem.name
+                            class="navbar-item button is-rounded is-dark  {% if subitem.link == page.url %} is-active {% endif %}">{{ subitem.name
                             }}</a>
                         {% endfor %}
                     </div>
                 </div>
                 {% else %}
                 <a href="{{ item.link | relative_url }}"
-                    class="navbar-item button is-rounded is-dark {% if item.link == page.url %}is-active{% endif %}">{{ item.name }}</a>
+                    class="navbar-item has-text-left button is-rounded is-dark {% if item.link == page.url %}is-active{% endif %}">{{ item.name }}</a>
                 {% endif %}
                 {% endfor %}
                 {% endif %}

data/_sass/_layout.scss

@@ -46,7 +46,7 @@ div.highlight {
   top: 30px;
 }
 
-.green {  
+.green {
   width: 100%;
   background-color: $light;
   padding-left: 5%;
@@ -78,9 +78,12 @@ div.highlight {
 img.is-rounded {
   border-radius: 65px;
 }
+.hidden {
+  display: none;
+}
 .arrow-image {
   z-index: 10;
-  top: calc(50% - 68px);  
+  top: calc(50% - 68px);
   left: 4vw;
   position: sticky;
   width: 64px;
@@ -161,7 +164,17 @@ a .tooltip-popup {
 .navbar-link {
   background-color: transparent;
 }
-
+a.navbar-item:focus,
+a.navbar-item:focus-within,
+a.navbar-item:hover,
+a.navbar-item.is-active,
+.navbar-link:focus,
+.navbar-link:focus-within,
+.navbar-link:hover,
+.navbar-link.is-active {
+  background-color: $primary-dark;
+  color: white;
+}
 .button.is-rounded {
   padding-right: 0em !important;
 }
@@ -468,19 +481,20 @@ a .tooltip-popup {
   display: flex;
   background-color: white;
   border-radius: 1000px;
-  padding: 3rem;
+  padding: 2rem;
   float: none;
   overflow: hidden;
   height: 300px;
-  width: 300px;
+  width: 300px;  
 }
 .highlighter .is-round img {
   background-color: white;
   padding-left: 0;
   padding-right: 0;
-  object-fit: contain;
-  height: auto;
+  object-fit: cover;
+  //height: auto;
   width: auto;
+  aspect-ratio: 1 / 1;
 }
 
 // Footer
@@ -496,8 +510,12 @@ a .tooltip-popup {
   flex-grow: 0;
 }
 .footer-logos img {
-  height: 75px;
+  height: 80px;
   margin-right: 15px;
+  image-rendering: -webkit-optimize-contrast;
+}
+.footer-logos p {
+  padding-bottom: 5px;
 }
 .footer .title {
   color: white;
@@ -534,8 +552,6 @@ footer .columns {
   font-weight: 600;
 }
 
-
-
 // Tool-Tip
 
 .tooltip-popup {
@@ -563,13 +579,24 @@ a:hover .tooltip-popup,
 .input,
 .textarea,
 #thema {
+  background-color: $light;
   border: 3px solid $primary-dark;
   border-radius: 45px;
   padding-left: 2.5em;
   padding-right: 2.5em;
 }
-.input,
-#thema {
+.input:hover,
+.textarea:hover,
+#thema:hover {
+  border: 3px solid $dark;
+}
+.input:focus,
+.textarea:focus {
+  //border: 2px solid $primary-dark;
+  border: 3px solid $dark;
+  box-shadow: none;
+}
+.input {
   height: 2.75em;
 }
 
@@ -581,7 +608,7 @@ a:hover .tooltip-popup,
 .label {
   color: $primary-dark;
   font-weight: 600;
-  padding-left: 1rem;
+  padding-left: 0.5rem;
   margin-bottom: 0 !important;
 }
 .contact .column {
@@ -589,10 +616,13 @@ a:hover .tooltip-popup,
   padding-bottom: 0;
   padding-left: 0;
 }
-.contact .contact-box {  
+.contact .contact-box {
   flex-grow: 0;
   padding-right: 50px;
 }
+.contact-agree {
+  padding-right: 0 !important;
+}
 .select:not(.is-multiple):not(.is-loading)::after {
   border-color: $primary-dark;
   right: 2.3em;
@@ -622,10 +652,11 @@ a:hover .tooltip-popup,
   height: 25px;
   border-radius: 8px;
   border: 2px solid $primary-dark;
-  background-color: #fff;
+  background-color: $light;
   display: block;
   content: "";
   float: left;
+  left: 12px;
   //margin-top: 5px;
   //margin-right: 5px;
   z-index: 5;
@@ -636,7 +667,6 @@ a:hover .tooltip-popup,
   background-color: $primary-dark;
 }
 
-
 // newss
 .news {
   box-shadow: none;
@@ -690,36 +720,41 @@ a:hover .tooltip-popup,
 // Mobil
 
 @include mobile {
-  body, .highlighter {
+  body,
+  .highlighter {
     font-size: 0.9rem;
     line-height: 1.5rem;
-}
-.arrow-image {
-  display: none;
-}
-h1, h2, h3, p {
-  padding-bottom: 0px;
-}
+  }
+  .arrow-image {
+    display: none;
+  }
+  h1,
+  h2,
+  h3,
+  p {
+    padding-bottom: 0px;
+  }
   h1,
   h1 p {
     font-size: 1.875rem; //30px
   }
   .home .hero-body h1 {
     max-width: none;
-}
-.subtitle {  
-  padding: 35px;
-  padding-top: 0;
-}
-.title.is-1 {
-  font-size: 1.3rem;
-  font-weight: 600;
-}
-.subtitle.is-4 {
-  font-size: 1.1rem;
-}
+  }
+  .subtitle {
+    padding: 35px;
+    padding-top: 0;
+  }
+  .title.is-1 {
+    font-size: 1.3rem;
+    font-weight: 600;
+  }
+  .subtitle.is-4 {
+    font-size: 1.1rem;
+  }
   h2,
-  h2 p, .highlighter h2 {
+  h2 p,
+  .highlighter h2 {
     font-size: 1.2rem;
   }
 
@@ -738,41 +773,42 @@ h1, h2, h3, p {
   .navbar {
     padding-top: 0.6rem;
     padding-bottom: 0.6rem;
-}
+  }
   .navbar-brand img {
     margin: 1rem;
-}
-.hero.is-primary .title {
-  padding-top: 35px;
-}
-.navbar-menu .button.is-dark { 
-  background-color: transparent;
-  border-radius: 0;
-  width: 100vw;
-}
-.navbar-menu {
-  background-color: transparent;
-}
-a.navbar-link {
-  background-color: $primary-dark;
-}
-a.navbar-item {
-  background-color: $primary-dark !important;
-  margin-left: 50px;
-}
-.navbar-item, .navbar-link {
-  color: #fff;
-  display: block;
-  line-height: 2.5;
-  padding: 0.9rem;
-  position: relative;
-}
-.navbar-link:not(.is-arrowless)::after {
-  border-color: #fff;
-}
-.navbar.is-primary .navbar-dropdown a.navbar-item.is-active {
-  background-color: #09443e !important;
-}
+  }
+  .hero.is-primary .title {
+    padding-top: 35px;
+  }
+  .navbar-menu .button.is-dark {
+    background-color: transparent;
+    border-radius: 0;
+    width: 100vw;
+  }
+  .navbar-menu {
+    background-color: transparent;
+  }
+  a.navbar-link {
+    background-color: $primary-dark;
+  }
+  a.navbar-item {
+    background-color: $primary-dark !important;
+    margin-left: 50px;
+  }
+  .navbar-item,
+  .navbar-link {
+    color: #fff;
+    display: block;
+    line-height: 2.5;
+    padding: 0.9rem;
+    position: relative;
+  }
+  .navbar-link:not(.is-arrowless)::after {
+    border-color: #fff;
+  }
+  .navbar.is-primary .navbar-dropdown a.navbar-item.is-active {
+    background-color: #09443e !important;
+  }
   .button {
     height: auto;
   }
@@ -781,14 +817,15 @@ a.navbar-item {
     font-size: 0.8rem !important;
     font-weight: 600;
   }
-.navbar.is-primary .navbar-dropdown a.navbar-item.is-active {
+  .navbar.is-primary .navbar-dropdown a.navbar-item.is-active {
     background-color: #09443e;
     color: #fff;
-}
+  }
   .buttons {
-   // display: table-caption;
+    // display: table-caption;
   }
-  .hero-body .button, .content-wrapper .button {
+  .hero-body .button,
+  .content-wrapper .button {
     padding: 0.5rem !important;
   }
   .hero.is-medium .hero-body {
@@ -798,15 +835,17 @@ a.navbar-item {
     // Buttongröße aus Figma
     height: auto;
   }
-  .story-slider, .content-wrapper img {
+  .story-slider,
+  .content-wrapper img {
     border-radius: 25px !important;
-}
-.column.slider-image img {  
-  border-top-right-radius: 25px !important;
-  border-bottom-left-radius: 0 !important;
-  border-bottom-right-radius: 0 !important;
-}
-  .slider-navigation-next, .slider-navigation-previous {
+  }
+  .column.slider-image img {
+    border-top-right-radius: 25px !important;
+    border-bottom-left-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+  }
+  .slider-navigation-next,
+  .slider-navigation-previous {
     top: 100% !important;
     width: 20px !important;
     height: 20px !important;
@@ -815,30 +854,30 @@ a.navbar-item {
   }
   .card-content p {
     padding-left: 3rem;
-}
-.card {
-  margin-top: 0;
-}
-.card-content {
-  padding: 2.5rem;
-}
-.left.card-image {
-  padding-left: 2.5rem;
-  padding-right: 2.5rem;
-}
-.right.card-image {
-  padding-bottom: 2.5rem;
-}
-.columns {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-}
-.two-columns p {
-  column-count: 1;
-  column-gap: 1rem;
-}
+  }
+  .card {
+    margin-top: 0;
+  }
+  .card-content {
+    padding: 2.5rem;
+  }
+  .left.card-image {
+    padding-left: 2.5rem;
+    padding-right: 2.5rem;
+  }
+  .right.card-image {
+    padding-bottom: 2.5rem;
+  }
+  .columns {
+    margin-left: 0;
+    margin-right: 0;
+    margin-top: 0;
+  }
+  .two-columns p {
+    column-count: 1;
+    column-gap: 1rem;
+  }
   .footer-logos .column {
     text-align: left !important;
   }
-}
+}

data/_sass/_main.scss

@@ -132,7 +132,20 @@ h5 {
   border-color: transparent;
   color: white;
 }
-
+@include desktop {
+  .navbar-menu .button.is-dark:hover.has-dropdown,
+  .navbar-menu .button.is-dark.is-hovered.has-dropdown {
+    background-color: $primary-dark;
+  }
+}
+.is-active-header {
+  background-color: $dark !important;
+}
+@include mobile {
+  .is-active-header {
+    background-color: transparent !important;
+  }
+}
 // Dropdownmenüelemente
 .navbar-dropdown,
 .navbar-item:focus,
@@ -142,6 +155,11 @@ h5 {
   border-width: 2px;
   color: white;
 }
+.navbar.is-primary .navbar-start .navbar-item:hover .navbar-link::after,
+.navbar.is-primary .navbar-end .navbar-item:hover .navbar-link::after {
+  transform: rotate(135deg);
+  margin-top: 0;
+}
 
 // Dropdownmenühintergrund und Rand
 .navbar-dropdown {
@@ -159,6 +177,13 @@ h5 {
 .navbar-item {
   //padding-top: 21px;
 }
+.navbar-dropdown {
+  display: none;
+}
+.button.is-dark.has-dropdown:hover .navbar-dropdown,
+.button.is-dark.is-hovered.has-dropdown .navbar-dropdown {
+  display: block;
+}
 
 .footer {
   background-color: $primary-dark;

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: intia-theme
 version: !ruby/object:Gem::Version
-  version: 0.1.16
+  version: 0.1.17
 platform: ruby
 authors:
 - Marc Schmidt
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-11-18 00:00:00.000000000 Z
+date: 2021-11-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -69,6 +69,16 @@ files:
 - assets/img/logo-white-old.png
 - assets/img/logo-white.png
 - assets/img/logo.png
+- assets/img/logos/BMBF-01.png
+- assets/img/logos/DiTes_Single.png
+- assets/img/logos/Diakonie_Logo.png
+- assets/img/logos/EvJugendhilfe_Logo.png
+- assets/img/logos/FJMK_Logo.png
+- assets/img/logos/INTIA_Plattform_Logos_BMBF_weiss.png
+- assets/img/logos/INTIA_Plattform_Logos_Dites_weiss.png
+- assets/img/logos/INTIA_Plattform_Logos_TH_weiss.png
+- assets/img/logos/StadtGrenzenlos_Logo.png
+- assets/img/logos/TH_Single.png
 - assets/img/posts/escape-game.jpg
 - assets/img/posts/messenger.jpg
 - assets/img/posts/photoprobe.jpg