intia-theme 0.1.14 → 0.1.18

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 564a52586c89ee13284be7aea2cf7f8e54c6608b05929db5def148ab41e8bd28
-  data.tar.gz: e358425ed5e040a534ecc5cbd885d98a8c20bfee3a8d79197034bcbb50e43aad
+  metadata.gz: 8086f593a2fb18d23f6a12c2c3861fa1baae6dfc6c370ce4081b350db1fc31a8
+  data.tar.gz: cac867fccf4719ae6f771685346e5d53c4c784c81a823f0108feafa5ddf82810
 SHA512:
-  metadata.gz: 0e7fdc0223c1a6c187092bb65de94b5eeae3e61693fd57adea35365be6e9c5fc87560423b29c9517bae8dfc1eff0f939d357be1be3948a3a9f341eeabc540e10
-  data.tar.gz: e4c07f01803754b26270444fb308f0693583314e2af327e43a5c5fd213412f959472faa1590d12ec11867f34db9c31307ee99e9532a6e21feb9e1db3c387bb0b
+  metadata.gz: b1f8c53124c21df01a95b5fe69e2cee57779d46b2526c030f013b8816e22d1e1aaa0b19eb4e3c8217603d42c9bd23f22ecdbf31f28fd7a549585fe9958ecc317
+  data.tar.gz: a06fd3586b714ed9b7f07748ce5470988ab0491e95788f5860820ebf5d26125a98e91a7073cf001dfbfc5df056cf46f0f3f555ed76dafc2eedf3a06728ae087c

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,9 +78,13 @@ 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;
@@ -158,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;
 }
@@ -270,7 +286,9 @@ a .tooltip-popup {
 .subtitle {
   padding: 50px;
 }
-
+.subtitle.is-4 {
+  font-size: 1.6rem;
+}
 .post h3 {
   font-weight: 600;
   padding-top: 2rem;
@@ -463,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
@@ -491,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;
@@ -529,34 +552,6 @@ 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 {
@@ -584,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;
 }
 
@@ -602,13 +608,21 @@ a:hover .tooltip-popup,
 .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;
@@ -619,9 +633,40 @@ a:hover .tooltip-popup,
   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;
@@ -671,3 +716,173 @@ a:hover .tooltip-popup,
   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;
+  }
+  .highlighter .is-round {
+    padding: 10px;
+    height: auto;
+    width: auto;
+}
+  .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.14
+  version: 0.1.18
 platform: ruby
 authors:
 - Marc Schmidt
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-11-11 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
@@ -393,6 +403,6 @@ requirements: []
 rubygems_version: 3.2.19
 signing_key:
 specification_version: 4
-summary: A barrier-free design by INTIA, created to be used as an Jekyll theme using
-  Bulma. It can be viewed on theme.intia.de
+summary: A accessible focused design by INTIA, created to be used as an Jekyll theme
+  using Bulma. It can be viewed on theme.intia.de
 test_files: []