intia-theme 0.1.0

data/_sass/_layout.scss

@@ -0,0 +1,355 @@
+.is-outlined {
+  border-width: 2px;
+  border-color: $primary-dark;
+}
+
+div.highlight {
+  margin-bottom: 1rem;
+}
+
+@include desktop {
+  .navbar-item {
+    border-width: 2px;
+    display: block;
+    &.is-hoverable:hover {
+      border-width: 2px;
+      .navbar-dropdown {
+        display: block;
+      }
+    }
+  }
+}
+
+// Duno
+.contents {
+  box-shadow: $box-shadow;
+  padding: 1.5rem;
+  margin-bottom: 3rem;
+}
+
+.content {
+  figure {
+    margin: 0;
+  }
+}
+
+.callout {
+  &-icon {
+    width: 4rem;
+    height: 4rem;
+    margin-bottom: 0.75rem;
+  }
+}
+
+.sticky {
+  position: sticky;
+  top: 30px;
+}
+
+// Globals
+img.is-rounded {
+  border-radius: 65px;
+}
+.arrow-image {
+  z-index: 10;
+  position: relative;
+  bottom: -90px;
+  width: 64px;
+}
+
+.clear {
+  clear: both;
+  display: block;
+  width: 100%;
+}
+
+// Buttons - Mybe global in Buttons und raus damit?
+.button.is-dark {
+  background-color: #229387;
+}
+
+// Navi
+.navbar {
+  padding-top: 0.6rem;
+}
+
+.navbar.is-primary .navbar-dropdown a.navbar-item.is-active {
+  background-color: #09443e;
+  color: #fff;
+}
+
+.navbar-brand img {
+  max-height: 2.5rem;
+  margin-top: 1rem;
+}
+.navbar-brand a p {
+  color: #000;
+}
+
+.navbar-item,
+.navbar-link,
+.navbar-dropdown {
+  padding-left: 0em;
+  padding-right: 0em;
+  padding-top: 0.65em;
+}
+
+.navbar.is-primary {
+  background-color: white;
+}
+
+.navbar-link {
+  background-color: transparent;
+}
+
+.button.is-rounded {
+  padding-right: 0em !important;
+}
+.navbar-dropdown .button.is-rounded {
+  padding-right: auto !important;
+}
+.navbar-dropdown .navbar-item {
+  padding: 0.5rem 1rem;
+  text-align: left;
+}
+
+// Hero
+.hero-body {
+  background-color: white;
+}
+.hero.is-large .hero-body {
+  padding-bottom: 12rem;
+}
+
+.hero-body img {
+  float: right;
+  margin-left: 200px;
+}
+.hero {
+  display: block;
+}
+.hero.is-primary .title {
+  color: rgba(0, 0, 0, 1);
+  padding-top: 70px;
+}
+.hero.is-medium .hero-body {
+  padding: 13rem 9rem 4.5rem;
+}
+
+.hero-body .button,
+.content-wrapper .button {
+  padding: 16px !important;
+}
+
+.hero-body .container .button {
+  float: right;
+}
+
+// Content
+.subtitle {
+  padding: 50px;
+}
+
+.card {
+  // margin-left: 3rem;
+  // margin-right: 3rem;
+  margin-top: 6rem;
+  box-shadow: none;
+}
+
+.card .button {
+  margin-top: 50px;
+}
+
+.content-wrapper h1 {
+  padding-top: 50px;
+}
+
+.content-wrapper img {
+  border-radius: 65px;
+  height: auto;
+}
+
+.content-wrapper p {
+  display: inline-block;
+}
+
+.card-content h2 p {
+  padding-left: 15px;
+}
+
+.card-image:first-child img {
+  border-top-left-radius: 65px;
+  border-top-right-radius: 65px;
+}
+
+.card-content {
+  width: 100%;
+  padding: 3.5rem;
+  display: flow-root;
+  margin: auto;
+}
+.card-content p {
+  padding-left: 4rem;
+}
+.card-content a {
+  margin-left: 4rem;
+}
+.card-image:last-child img {
+  border-bottom-left-radius: 65px;
+  border-bottom-right-radius: 65px;
+}
+
+.story-card {
+  background-color: white;
+  border-bottom-left-radius: 65px !important;
+  border-bottom-right-radius: 65px !important;
+  border-top-left-radius: 65px !important;
+  border-top-right-radius: 65px !important;
+}
+.story-card .column {
+  padding: 0px;
+}
+.story-card .card-image:first-child img {
+  border-bottom-right-radius: 0px !important;
+  border-top-right-radius: 0px !important;
+}
+
+// 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%;
+}
+.slider-container .card-content .content {
+  margin: 50px;
+}
+.story-slider {
+  background-color: white;
+  border-bottom-left-radius: 65px !important;
+  border-bottom-right-radius: 65px !important;
+  border-top-left-radius: 65px !important;
+  border-top-right-radius: 65px !important;
+}
+.story-slider .button {
+  float: right;
+}
+.column.slider-image {
+  padding: 0;
+}
+.column.slider-image .image {
+  height: 100%;
+}
+.column.slider-image img {
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+  height: 100%;
+}
+.column.slider-content {
+  padding: 3em;
+}
+.slider-content h2 {
+  margin-bottom: 2rem;
+}
+.slider-content {
+  width: 100%;
+  display: flow-root;
+  margin: auto;
+}
+.slider-pagination .slider-page {
+  background-color: #229387 !important;
+  width: 20px !important;
+  height: 20px !important;
+  box-shadow: none;
+  cursor: pointer;
+}
+.slider-pagination .slider-page.is-active,
+.slider-pagination .slider-page:hover {
+  background-color: #09443e !important;
+  -webkit-transform: scale(1) !important;
+  transform: scale(1) !important;
+}
+.slider-pagination {
+  bottom: -40px !important;
+}
+// Footer
+
+.footer {
+  font-size: 0.75rem;
+  margin-top: 5rem;
+  line-height: 1rem;
+}
+.footer img.column {
+  padding: 0 !important;
+  flex-grow: 0;
+}
+.footer-logos img {
+  height: 75px;
+}
+.footer .title {
+  color: white;
+  text-decoration: underline;
+  font-weight: 600;
+  font-size: 1rem;
+}
+footer .columns {
+  margin-left: auto;
+  margin-right: auto;
+  font-size: 0.75rem;
+}
+.footer-logos .column {
+  flex-basis: auto;
+}
+.is-bordered-bottom {
+  border-bottom: solid 1px #fff;
+}
+.page-owner {
+  display: inline-block;
+}
+
+// Text neben dem Logo - gut möglich das dies seine darseinsberechtigung verliert
+.brand-title {
+  display: contents;
+  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;
+  }
+}

data/_sass/_main.scss

@@ -0,0 +1,142 @@
+// Font
+@charset "utf-8";
+@import url("https://fonts.googleapis.com/css?family=Verdana");
+$family-primary: "Verdana", sans-serif;
+// Colors
+//$primary: #d1e7d6 !default;
+$primary: #ffffff !default;
+$text: #000 !default;
+$title-color: #000 !default;
+//$primary-light: #e7f2ea;
+//$primary-light: #ffffff;
+$light: #e7f2ea;
+$primary-dark: #1e7d73;
+$dark: #09443e;
+//$navbar-box-shadow-color: transparent;
+// Bulma
+@import "../node_modules/bulma/bulma.sass";
+// Extensions
+@import "../node_modules/bulma-block-list/src/block-list.scss";
+// Bulma Config
+$column-gap: 1rem;
+$modal-content-width: 800px;
+$tabs-link-active-color: $primary;
+$tabs-link-active-border-bottom-color: $primary;
+// Global
+body {  
+  font-size: 1.5rem;
+  line-height: 2.25rem;
+}
+
+h1,
+h1 p {
+  font-size: 48px;
+  line-height: 72px;
+  font-weight: 600;
+}
+
+h2,
+h2 p {
+  font-size: 36px;
+  font-weight: 600;
+  text-align: left;
+  background-repeat: no-repeat;
+  background-size: auto 35px;
+  font-family: "Verdana", sans-serif;
+}
+
+h3 {
+  font-size: 1.17rem;
+}
+
+h4 {
+  font-size: 1rem;
+}
+
+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-property: background-color, transform;
+  transition-duration: .3s;
+  -webkit-transition-timing-function: cubic-bezier(.25, .46, .45, .94);
+  -webkit-transition-property: background-color, transform;
+  -webkit-transition-duration: .3s;
+  -o-transition-timing-function: cubic-bezier(.25, .46, .45, .94);
+  -o-transition-property: background-color, transform;
+  -o-transition-duration: .3s;
+  -moz-transition-timing-function: cubic-bezier(.25, .46, .45, .94);
+  -moz-transition-property: background-color, transform;
+  -moz-transition-duration: .3s;
+}
+
+.button a, .button span{
+  // Schrifft
+  font-size: 16px !important;
+  font-weight: 600;
+}
+
+.navbar-menu .button, .navbar-dropdown .button{
+  // Buttongröße aus Figma
+  width: 166px;
+  height: 47px;
+}
+
+// z.B. "Mehr über Intia" Button
+.button.is-dark:hover,
+.button.is-dark.is-hovered {
+  border-width: 1px;
+  background-color: $dark;
+  border-color: transparent;
+  color: white;
+}
+
+// Dropdownmenüelemente
+.navbar-dropdown,
+.navbar-item:focus,
+.navbar-dropdown a.navbar-item:focus,
+.navbar-dropdown a.navbar-item:hover {
+  background-color: $dark;
+  border-width: 2px;
+  color: white;
+}
+
+// Dropdownmenühintergrund und Rand
+.navbar-dropdown {
+  border-top: transparent;
+  background-color: transparent;
+}
+
+// Navbar Padding
+.navbar-end.buttons {
+  padding-left: 0px;
+  padding-top: 15px;
+  font-weight: bold;
+}
+// Logo Padding
+.navbar-item {
+  //padding-top: 21px;
+}
+
+.footer {
+  background-color: $primary-dark;
+  color: white;
+}
+
+.link {
+  color: $primary;
+}
+
+.footer .link {
+  color: white;
+}
+
+// Specific styles
+@import "layout";
+@import "print";

data/_sass/_print.scss

@@ -0,0 +1,193 @@
+/**
+ * Modify styling for printing, as to PDF or on paper.
+ * Copied from: https://gitlab.com/find-it-program-locator/newtowne/-/blob/8.x-1.x/src/global/_print.sass
+ */
+
+
+/**
+ * This may get into Bulma proper: https://github.com/jgthms/bulma/pull/2329
+ * And https://github.com/jgthms/bulma/issues/721
+ */
+
+
+/* This mixin would be in sass/utilities/mixins.sass per pull/2329 */
+
+// Media types
+@mixin print {
+    @media print {
+        @content;
+    }
+    @media screen and (min-width: 1024px) {
+        .navbar.is-primary .navbar-start .navbar-link::after,
+        .navbar.is-primary .navbar-end .navbar-link::after {
+            border-color: white;
+        }
+    }
+    @media screen and (min-width: 1024px) {
+        .navbar.is-primary .navbar-start>.navbar-item,
+        .navbar.is-primary .navbar-start .navbar-link,
+        .navbar.is-primary .navbar-end>.navbar-item,
+        .navbar.is-primary .navbar-end .navbar-link {
+            color: white;
+        }
+    }
+    @media screen and (min-width: 1024px) {
+        .navbar.is-primary .navbar-item.has-dropdown:focus .navbar-link,
+        .navbar.is-primary .navbar-item.has-dropdown:hover .navbar-link,
+        .navbar.is-primary .navbar-item.has-dropdown.is-active .navbar-link {
+            background-color: transparent;
+            color: white;
+        }
+    }
+    @media screen and (min-width: 1024px) {
+        .navbar-dropdown {
+            background-color: transparent;
+            border-bottom-left-radius: 6px;
+            border-bottom-right-radius: 6px;
+            border-top: transparent;
+            box-shadow: none;
+        }
+    }
+}
+
+
+/* From https://github.com/jgthms/bulma/pull/2329#issuecomment-459391961 */
+
+.columns {
+    @include print {
+        &.no-print {
+            display:block {}
+        }
+    }
+}
+
+
+/* Rest from https://github.com/jgthms/bulma/pull/2329/files as was mixin */
+
+@include print {
+    .is-hidden-print {
+        display: none !important;
+    }
+    /* i added or modified these print link URLs */
+    a:not(.is-not-linked-print)[href]::after {
+        content: attr(href);
+        text-decoration: underline;
+        font-size: 90%;
+        padding-left: 0.5rem;
+    }
+    a[href].clearfix::after {
+        content: attr(href);
+        text-decoration: underline;
+        font-size: 90%;
+        padding-top: 0.5rem;
+    }
+    /* and i did this drastic war on color */
+    * {
+        background-color: white !important;
+        color: black !important;
+    }
+    .is-together-print {
+        page-break-inside: avoid;
+    }
+    /* prevent break inside of a table row */
+    table {
+        page-break-inside: auto
+    }
+    tr {
+        page-break-inside: avoid;
+        page-break-after: auto
+    }
+    .section {
+        padding-top: 0;
+    }
+    .column.is-narrow {
+        display: inline-block;
+    }
+    .column.is-narrow~.column {
+        display: inline-block;
+    }
+}
+
+.column {
+    @include print {
+        &.is-narrow-print {
+            flex: none;
+        }
+        &.is-full-print {
+            flex: none;
+            width: 100%;
+        }
+        &.is-three-quarters-print {
+            flex: none;
+            width: 75%;
+        }
+        &.is-two-thirds-print {
+            flex: none;
+            width: 66.6666%;
+        }
+        &.is-half-print {
+            flex: none;
+            width: 50%;
+        }
+        &.is-one-third-print {
+            flex: none;
+            width: 33.3333%;
+        }
+        &.is-one-quarter-print {
+            flex: none;
+            width: 25%;
+        }
+        &.is-one-fifth-print {
+            flex: none;
+            width: 20%;
+        }
+        &.is-two-fifths-print {
+            flex: none;
+            width: 40%;
+        }
+        &.is-three-fifths-print {
+            flex: none;
+            width: 60%;
+        }
+        &.is-four-fifths-print {
+            flex: none;
+            width: 80%;
+        }
+        &.is-offset-three-quarters-print {
+            margin-left: 75%;
+        }
+        &.is-offset-two-thirds-print {
+            margin-left: 66.6666%;
+        }
+        &.is-offset-half-print {
+            margin-left: 50%;
+        }
+        &.is-offset-one-third-print {
+            margin-left: 33.3333%;
+        }
+        &.is-offset-one-quarter-print {
+            margin-left: 25%;
+        }
+        &.is-offset-one-fifth-print {
+            margin-left: 20%;
+        }
+        &.is-offset-two-fifths-print {
+            margin-left: 40%;
+        }
+        &.is-offset-three-fifths-print {
+            margin-left: 60%;
+        }
+        &.is-offset-four-fifths-print {
+            margin-left: 80%;
+        }
+        @for $i from 1 through 12 {
+            &.is-#{$i}-print {
+                flex: none;
+                width: percentage($i / 12);
+            }
+            &.is-offset-#{$i}-print {
+                margin-left: percentage($i / 12);
+            }
+        }
+    }
+}