intia-theme 0.1.13 → 0.1.17

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b88ed09bc1f742257defe1d4efc91e4a8ed4de01116a8ef9ab09f6cb554cf34c
-  data.tar.gz: 6ecbd3fb415169e9adab1f8b886124cddd3ba845a99878248863787e0f5ed8d3
+  metadata.gz: 53296ddda845d66fa5916507b301141a35e3eabd5bcd02e44b1b96830192b1a4
+  data.tar.gz: '090e60815310dad0439bc027988ae48b9bf653a4ce8dfe63227f865952f6ed5c'
 SHA512:
-  metadata.gz: 7890328c21d1f0d1f495a352e8a7cdce3fca2b623406c2ad04d54801cfde487090f469b3a45d34b3ef57bbb5eb82e5c6c6d55211e594202b20172548898b4759
-  data.tar.gz: 003d6fff816a6e60b26ad474d99304f863927f66659e8220250c4ddd8c572d3fe88bcdbfcb60044854eac79144a9fe07f72f9943a74931aa11c57fa49e8887af
+  metadata.gz: 88c769261767a6388d356a7752160c75665808e806d0b77aff3c8e6ab9fb0846df0922fd0bf06ac42229db3c447eb2049ceabf7e342c7fc691c87bd74c5e5b51
+  data.tar.gz: 439342205624ceb041d7be888fd9ee0d2ca20490eab0d2f43cdf2f1f0d94a60b406f3786075e56fb967365e4ed2631cc3ecec43fd4966eed125c5b48f30a1467

data/_includes/contact.html

@@ -1,5 +1,5 @@
 {% if page.contact %}
-<div class="green contact">
+  <div class="container contact">
     <h1>{{ site.data.contact.title  }}</h1>
     {{ site.data.contact.introduction  }}
     <form action="{{ site.data.contact.action }}"  class="columns">
@@ -46,18 +46,18 @@
                       class="textarea"
                       id="message"
                       name="message"
-                      placeholder="Wie können wir dir helfen?"
+                      placeholder="Hier tippen"
                       required=""
                   ></textarea>
                 </div>
               </div>
               <div class="checkbox columns">
-                <div class="column is-1">
+                <div class="column contact-box">
                   <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">
+                <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>
@@ -65,4 +65,4 @@
         </div>
     </form>
   </div>
-  {% endif %}
+{% 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

@@ -47,11 +47,13 @@ div.highlight {
 }
 
 .green {
+  width: 100%;
   background-color: $light;
   padding-left: 5%;
   padding-right: 5%;
   padding-top: 6rem;
   padding-bottom: 8rem;
+  overflow: hidden;
 }
 
 .highlighter {
@@ -76,17 +78,23 @@ div.highlight {
 img.is-rounded {
   border-radius: 65px;
 }
+.hidden {
+  display: none;
+}
 .arrow-image {
   z-index: 10;
   top: calc(50% - 68px);
+  left: 4vw;
   position: sticky;
   width: 64px;
   cursor: pointer;
   display: flex;
   flex-direction: column;
+  height: 132px;
 }
 .is-pointed-down {
   transform: scaleY(-1);
+  margin-top: auto;
 }
 .is-hidden {
   visibility: hidden;
@@ -156,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;
 }
@@ -205,7 +223,8 @@ a .tooltip-popup {
   padding: 16px !important;
 }
 
-.hero-body .container .button, .float_right {
+.hero-body .container .button,
+.float_right {
   float: right;
 }
 .home .hero-body h1,
@@ -233,9 +252,9 @@ a .tooltip-popup {
   object-fit: cover;
 }
 .subpage .hero-body img {
-object-fit: cover;
-max-height: 30vw;
-width: 100%;
+  object-fit: cover;
+  max-height: 30vw;
+  width: 100%;
 }
 .buttons-hero {
   display: none;
@@ -267,7 +286,9 @@ width: 100%;
 .subtitle {
   padding: 50px;
 }
-
+.subtitle.is-4 {
+  font-size: 1.6rem;
+}
 .post h3 {
   font-weight: 600;
   padding-top: 2rem;
@@ -460,19 +481,20 @@ width: 100%;
   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
@@ -488,8 +510,12 @@ width: 100%;
   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;
@@ -526,53 +552,26 @@ footer .columns {
   font-weight: 600;
 }
 
-// Hacks für Mobil
-@include mobile {
-  .button {
-    height: auto;
-  }
-  .button a,
-  .button span {
-    font-size: 24px !important;
-    font-weight: 600;
-  }
-  .buttons {
-    display: table-caption;
-  }
-  .navbar-menu {
-    background-color: #229387;
-  }
-  .hero.is-medium .hero-body {
-    padding: 5rem 1rem 4.5rem;
-  }
-  .navbar-menu .button {
-    // Buttongröße aus Figma
-    height: auto;
-  }
-  .footer-logos .column {
-    text-align: left !important;
-  }
-}
-
 // Tool-Tip
 
-.tooltip-popup {  
+.tooltip-popup {
   position: absolute;
   width: 20vw;
   z-index: 30;
   visibility: hidden;
   display: none;
   background: #e7f2ea;
-  border-radius: 65px;  
+  border-radius: 65px;
   padding: 50px;
   margin-top: -10px;
   margin-right: 30px;
 }
-a:hover .tooltip-popup, .show {
+a:hover .tooltip-popup,
+.show {
   visibility: visible;
   display: block;
 }
-.tooltip-popup h2{  
+.tooltip-popup h2 {
   padding-top: 0;
 }
 // Contect
@@ -580,13 +579,24 @@ a:hover .tooltip-popup, .show {
 .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;
 }
 
@@ -598,13 +608,21 @@ a:hover .tooltip-popup, .show {
 .label {
   color: $primary-dark;
   font-weight: 600;
-  padding-left: 1rem;
+  padding-left: 0.5rem;
   margin-bottom: 0 !important;
 }
 .contact .column {
   padding: 5rem;
+  padding-bottom: 0;
   padding-left: 0;
 }
+.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;
@@ -615,9 +633,40 @@ a:hover .tooltip-popup, .show {
   top: 2px;
 }
 .contact .button {
+  margin-top: 50px;
   float: right;
 }
 
+[type="checkbox"] {
+  position: relative;
+  //left: 15px;
+  top: 0;
+  z-index: 0;
+  -webkit-appearance: none;
+}
+[type="checkbox"] {
+  position: absolute;
+}
+[type="checkbox"]::before {
+  width: 25px;
+  height: 25px;
+  border-radius: 8px;
+  border: 2px solid $primary-dark;
+  background-color: $light;
+  display: block;
+  content: "";
+  float: left;
+  left: 12px;
+  //margin-top: 5px;
+  //margin-right: 5px;
+  z-index: 5;
+  position: relative;
+}
+[type="checkbox"]:checked::before {
+  box-shadow: inset 0px 0px 0px 4px #fff;
+  background-color: $primary-dark;
+}
+
 // newss
 .news {
   box-shadow: none;
@@ -667,3 +716,168 @@ a:hover .tooltip-popup, .show {
   display: flow-root;
   margin: auto;
 }
+
+// Mobil
+
+@include mobile {
+  body,
+  .highlighter {
+    font-size: 0.9rem;
+    line-height: 1.5rem;
+  }
+  .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;
+  }
+  h2,
+  h2 p,
+  .highlighter h2 {
+    font-size: 1.2rem;
+  }
+
+  h3 {
+    font-weight: 600;
+    font-size: 1.7rem;
+  }
+
+  h4 {
+    font-size: 1rem;
+  }
+
+  h5 {
+    font-size: 0.83rem;
+  }
+  .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;
+  }
+  .button {
+    height: auto;
+  }
+  .button a,
+  .button span {
+    font-size: 0.8rem !important;
+    font-weight: 600;
+  }
+  .navbar.is-primary .navbar-dropdown a.navbar-item.is-active {
+    background-color: #09443e;
+    color: #fff;
+  }
+  .buttons {
+    // display: table-caption;
+  }
+  .hero-body .button,
+  .content-wrapper .button {
+    padding: 0.5rem !important;
+  }
+  .hero.is-medium .hero-body {
+    padding: 5rem 1rem 4.5rem;
+  }
+  .navbar-menu .button {
+    // Buttongröße aus Figma
+    height: auto;
+  }
+  .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 {
+    top: 100% !important;
+    width: 20px !important;
+    height: 20px !important;
+    margin-left: 80px;
+    margin-right: 80px;
+  }
+  .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;
+  }
+  .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.13
+  version: 0.1.17
 platform: ruby
 authors:
 - Marc Schmidt
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-11-03 00:00:00.000000000 Z
+date: 2021-11-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -59,14 +59,26 @@ files:
 - assets/img/download_link.png
 - assets/img/external-link.png
 - assets/img/internal-link.png
+- assets/img/logo-black-old.png
 - assets/img/logo-black.png
 - assets/img/logo-dites.png
 - assets/img/logo-green-white.png
 - assets/img/logo-green.png
 - assets/img/logo-short-green.png
 - assets/img/logo-short.png
+- 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