mi-jekyll-theme 0.4.1

data/_sass/lib/sass/utilities/mixins.sass

@@ -0,0 +1,224 @@
+=arrow($color)
+  border: 1px solid $color
+  border-right: 0
+  border-top: 0
+  content: " "
+  display: block
+  height: 0.5em
+  pointer-events: none
+  position: absolute
+  transform: rotate(-45deg)
+  width: 0.5em
+
+=block
+  &:not(:last-child)
+    margin-bottom: 1.5rem
+
+=clearfix
+  &:after
+    clear: both
+    content: " "
+    display: table
+
+=center($width, $height: 0)
+  position: absolute
+  @if $height != 0
+    left: calc(50% - (#{$width} / 2))
+    top: calc(50% - (#{$height} / 2))
+  @else
+    left: calc(50% - (#{$width} / 2))
+    top: calc(50% - (#{$width} / 2))
+
+=delete
+  +unselectable
+  -moz-appearance: none
+  -webkit-appearance: none
+  background-color: rgba($black, 0.2)
+  border: none
+  border-radius: 290486px
+  cursor: pointer
+  display: inline-block
+  flex-grow: 0
+  flex-shrink: 0
+  font-size: $size-normal
+  height: 20px
+  max-height: 20px
+  max-width: 20px
+  min-height: 20px
+  min-width: 20px
+  outline: none
+  position: relative
+  vertical-align: top
+  width: 20px
+  &:before,
+  &:after
+    background-color: $white
+    content: ""
+    display: block
+    left: 50%
+    position: absolute
+    top: 50%
+    transform: translateX(-50%) translateY(-50%) rotate(45deg)
+    transform-origin: center center
+  &:before
+    height: 2px
+    width: 50%
+  &:after
+    height: 50%
+    width: 2px
+  &:hover,
+  &:focus
+    background-color: rgba($black, 0.3)
+  &:active
+    background-color: rgba($black, 0.4)
+  // Sizes
+  &.is-small
+    height: 16px
+    max-height: 16px
+    max-width: 16px
+    min-height: 16px
+    min-width: 16px
+    width: 16px
+  &.is-medium
+    height: 24px
+    max-height: 24px
+    max-width: 24px
+    min-height: 24px
+    min-width: 24px
+    width: 24px
+  &.is-large
+    height: 32px
+    max-height: 32px
+    max-width: 32px
+    min-height: 32px
+    min-width: 32px
+    width: 32px
+
+=fa($size, $dimensions)
+  display: inline-block
+  font-size: $size
+  height: $dimensions
+  line-height: $dimensions
+  text-align: center
+  vertical-align: top
+  width: $dimensions
+
+=hamburger($dimensions)
+  cursor: pointer
+  display: block
+  height: $dimensions
+  position: relative
+  width: $dimensions
+  span
+    background-color: currentColor
+    display: block
+    height: 1px
+    left: 50%
+    margin-left: -7px
+    position: absolute
+    top: 50%
+    transition: none $speed $easing
+    transition-property: background, left, opacity, transform
+    width: 15px
+    &:nth-child(1)
+      margin-top: -6px
+    &:nth-child(2)
+      margin-top: -1px
+    &:nth-child(3)
+      margin-top: 4px
+  &:hover
+    background-color: rgba(black, 0.05)
+  // Modifers
+  &.is-active
+    span
+      &:nth-child(1)
+        margin-left: -5px
+        transform: rotate(45deg)
+        transform-origin: left top
+      &:nth-child(2)
+        opacity: 0
+      &:nth-child(3)
+        margin-left: -5px
+        transform: rotate(-45deg)
+        transform-origin: left bottom
+
+=loader
+  animation: spinAround 500ms infinite linear
+  border: 2px solid $border
+  border-radius: 290486px
+  border-right-color: transparent
+  border-top-color: transparent
+  content: ""
+  display: block
+  height: 1em
+  position: relative
+  width: 1em
+
+=overflow-touch
+  -webkit-overflow-scrolling: touch
+
+=overlay($offset: 0)
+  bottom: $offset
+  left: $offset
+  position: absolute
+  right: $offset
+  top: $offset
+
+=placeholder
+  $placeholders: ':-moz' ':-webkit-input' '-moz' '-ms-input'
+  @each $placeholder in $placeholders
+    &:#{$placeholder}-placeholder
+      @content
+
+=unselectable
+  -webkit-touch-callout: none
+  -webkit-user-select: none
+  -moz-user-select: none
+  -ms-user-select: none
+  user-select: none
+
+// Responsiveness
+
+=from($device)
+  @media screen and (min-width: $device)
+    @content
+
+=until($device)
+  @media screen and (max-width: $device - 1px)
+    @content
+
+=mobile
+  @media screen and (max-width: $tablet - 1px)
+    @content
+
+=tablet
+  @media screen and (min-width: $tablet), print
+    @content
+
+=tablet-only
+  @media screen and (min-width: $tablet) and (max-width: $desktop - 1px)
+    @content
+
+=touch
+  @media screen and (max-width: $desktop - 1px)
+    @content
+
+=desktop
+  @media screen and (min-width: $desktop)
+    @content
+
+=desktop-only
+  @media screen and (min-width: $desktop) and (max-width: $widescreen - 1px)
+    @content
+
+=widescreen
+  @media screen and (min-width: $widescreen)
+    @content
+
+=widescreen-only
+  @media screen and (min-width: $widescreen) and (max-width: $fullhd - 1px)
+    @content
+
+=fullhd
+  @media screen and (min-width: $fullhd)
+    @content

data/_sass/lib/sass/utilities/variables.sass

@@ -0,0 +1,150 @@
+////////////////////////////////////////////////
+////////////////////////////////////////////////
+// 1. Initial variables
+
+// Colors
+$black:        hsl(0, 0%, 4%) !default
+$black-bis:    hsl(0, 0%, 7%) !default
+$black-ter:    hsl(0, 0%, 14%) !default
+
+$grey-darker:  hsl(0, 0%, 21%) !default
+$grey-dark:    hsl(0, 0%, 29%) !default
+$grey:         hsl(0, 0%, 48%) !default
+$grey-light:   hsl(0, 0%, 71%) !default
+$grey-lighter: hsl(0, 0%, 86%) !default
+
+$white-ter:    hsl(0, 0%, 96%) !default
+$white-bis:    hsl(0, 0%, 98%) !default
+$white:        hsl(0, 0%, 100%) !default
+
+$orange:       hsl(14,  100%, 53%) !default
+$yellow:       hsl(48,  100%, 67%) !default
+$green:        hsl(141, 71%,  48%) !default
+$turquoise:    hsl(171, 100%, 41%) !default
+$blue:         hsl(217, 71%,  53%) !default
+$purple:       hsl(271, 100%, 71%) !default
+$red:          hsl(348, 100%, 61%) !default
+
+// Typography
+$family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default
+$family-monospace: monospace !default
+$render-mode: optimizeLegibility !default
+
+$size-1: 3rem !default
+$size-2: 2.5rem !default
+$size-3: 2rem !default
+$size-4: 1.5rem !default
+$size-5: 1.25rem !default
+$size-6: 1rem !default
+$size-7: 0.75rem !default
+
+$weight-light: 300 !default
+$weight-normal: 400 !default
+$weight-semibold: 500 !default
+$weight-bold: 700 !default
+
+// Body
+$body-background: #fff !default
+$body-size: 16px !default
+
+// Responsiveness
+// 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16
+$tablet: 769px !default
+// 960px container + 40px
+$desktop: 1000px !default
+// 1152px container + 40
+$widescreen: 1192px !default
+// 1344px container + 40
+$fullhd: 1384px !default
+
+// Miscellaneous
+$easing: ease-out !default
+$radius-small: 2px !default
+$radius: 3px !default
+$radius-large: 5px !default
+$speed: 86ms !default
+
+////////////////////////////////////////////////
+////////////////////////////////////////////////
+// 2. Primary colors
+
+$primary: $turquoise !default
+
+$info: $blue !default
+$success: $green !default
+$warning: $yellow !default
+$danger: $red !default
+
+$light: $white-ter !default
+$dark: $grey-darker !default
+
+////////////////////////////////////////////////
+////////////////////////////////////////////////
+// 3. Applied variables
+
+// Invert colors
+$orange-invert: findColorInvert($orange) !default
+$yellow-invert: findColorInvert($yellow) !default
+$green-invert: findColorInvert($green) !default
+$turquoise-invert: findColorInvert($turquoise) !default
+$blue-invert: findColorInvert($blue) !default
+$purple-invert: findColorInvert($purple) !default
+$red-invert: findColorInvert($red) !default
+
+$primary-invert: $turquoise-invert !default
+$info-invert: $blue-invert !default
+$success-invert: $green-invert !default
+$warning-invert: $yellow-invert !default
+$danger-invert: $red-invert !default
+$light-invert: $dark !default
+$dark-invert: $light !default
+
+// General colors
+$background: $white-ter !default
+
+$border: $grey-lighter !default
+$border-hover: $grey-light !default
+
+// Text colors
+$text: $grey-dark !default
+$text-invert: findColorInvert($text) !default
+$text-light: $grey !default
+$text-strong: $grey-darker !default
+
+// Code colors
+$code: $red !default
+$code-background: $background !default
+
+$pre: $text !default
+$pre-background: $background !default
+
+// Link colors
+$link: $primary !default
+$link-invert: $primary-invert !default
+$link-visited: $purple !default
+
+$link-hover: $grey-darker !default
+$link-hover-border: $grey-light !default
+
+$link-focus: $grey-darker !default
+$link-focus-border: $primary !default
+
+$link-active: $grey-darker !default
+$link-active-border: $grey-dark !default
+
+// Typography
+$family-primary: $family-sans-serif !default
+$family-code: $family-monospace !default
+
+$size-small: $size-7 !default
+$size-normal: $size-6 !default
+$size-medium: $size-5 !default
+$size-large: $size-4 !default
+
+////////////////////////////////////////////////
+////////////////////////////////////////////////
+// 4. Lists and maps
+
+$colors: ("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert)) !default
+
+$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default

data/_sass/mi-jekyll.scss

@@ -0,0 +1,821 @@
+//
+// IMPORTS
+//
+@import "lib/variables";
+@import "lib/bulma";
+@import "lib/overrides";
+// Syntax highlighting @import is at the bottom of this file
+
+/**************/
+/* BASE RULES */
+/**************/
+
+.button {
+    font-size: $bfs;
+    background-color: $mi-pink;
+    color: $mi-bg;
+    font-weight: bold;
+    position: absolute;
+    margin-left: 5px;
+    padding: 1px 10px;
+    text-align: center;
+    display: inline-block;
+    font-size: 10px;
+}
+
+body,
+html {
+  line-height: 130%;
+}
+
+.is-underlined{
+  padding-bottom: $bfs /2;
+  margin-bottom: $bfs *2 !important;
+  margin-top: $bfs * 2;
+  border-bottom: solid 1px $mi-grau;
+}
+
+/*hr{
+	-moz-border-bottom-colors: none;
+    -moz-border-left-colors: none;
+    -moz-border-right-colors: none;
+    -moz-border-top-colors: none;
+    border-color: #aaa -moz-use-text-color -moz-use-text-color;
+    border-image: none;
+    border-style: dotted none none;
+    border-width: 1px 0 0;
+    box-sizing: content-box;
+    height: 0;
+} */
+
+
+/**************/
+/* index     */
+/**************/
+
+
+/**************/
+/* Footer     */
+/**************/
+
+.footer {
+  border-top: solid 1px $mi-pink;
+
+  .menu-list {
+    li+li {
+      border-top: solid 1px rgba(0, 0, 0, 0.2);
+    }
+
+    a {
+      padding-left: 0;
+      font-size: $bfs * 0.8;
+    }
+  }
+
+}
+
+
+/**************/
+/* Header  */
+/**************/
+
+.is-header {
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center center;
+    overflow: hidden;
+    position: relative;
+    
+    &.has-gradient::before{
+      content: '';
+      top: 0;
+      bottom: 0;
+      position: absolute;
+      right: 0;
+      left: 0;
+      background-size: auto;
+      background-image: linear-gradient(to left,rgba(0,173,47,0), rgba(0,173,47,100));
+      background-repeat: no-repeat;
+      background-position: bottom;
+      opacity: 1;
+      z-index: 0;
+    }
+  .title {
+    font-weight: 100;
+    font-size: $bfs * 2;
+  }
+}
+
+
+/**************/
+/* Timetable  */
+/**************/
+
+$tt-grid-height: 60px;
+
+.timetable {
+  .datum {
+    height: $tt-grid-height;
+
+    @media (max-width: 999px) {
+      height: auto !important;
+    }
+  }
+
+  @media (max-width: 999px) {
+    .datum:nth-of-type(2) {
+      margin-top: $bfs *2;
+    }
+
+    h2 {
+      border-bottom: $dotted-line;
+      padding-bottom: $bfs /4;
+      padding-top: $bfs *2;
+    }
+  }
+
+  .timetable-wrap {
+    position: relative;
+
+    .timetable-grid {
+      height: $tt-grid-height;
+      border-top: $dotted-line;
+
+      @media (max-width: 999px) {
+        border-top: none;
+        height: auto;
+      }
+
+      .grid-time {
+        font-size: $bfs /2;
+
+        @media (max-width: 999px) {
+          display: none;
+        }
+      }
+    }
+
+    .veranstaltung-wrap {
+      float: left;
+      width: 20%;
+    }
+
+    .veranstaltungen-wrap {
+      position: absolute;
+      top: 0;
+      left: 30px;
+
+      &:after {
+        content: "";
+        display: block;
+        clear: both;
+      }
+    }
+
+    .veranstaltung {
+      width: 100%;
+      background-color: #999;
+
+      border-bottom: solid 1px rgba(255, 255, 255, 0.7);
+      border-right: solid 1px rgba(255, 255, 255, 0.7);
+      padding: $bfs /2;
+
+      @media (max-width: 999px) {
+        height: auto !important;
+        padding-top: $bfs;
+        padding-bottom: $bfs * 1.5;
+      }
+
+      .title,
+      .subtitle {
+        color: #fff;
+        font-size: 0.9rem;
+        line-height: 120%;
+      }
+
+      .title+.subtitle {
+        margin-top: $bfs * -0.8;
+      }
+
+      .title {
+        font-weight: bold;
+      }
+
+      &.training {
+        background-color: $mi-lila;
+      }
+
+      &.workshop {
+        background-color: $mi-gruen;
+      }
+
+      &.seminar {
+        background-color: $mi-pink;
+    }
+
+      &.vortrag {
+        background-color: $mi-pink;
+      }
+
+      &.feedback {
+        background-color: $mi-blau;
+      }
+
+      &.orga {
+        background-color: $mi-grau;
+      }
+
+      &.ganztagesworkshop {
+        background-color: $mi-gruen;
+      }
+    }
+  }
+}
+
+
+/**************/
+/* Veranstaltungsübersicht
+/**************/
+
+.is-tab-wrap {
+  display: flex;
+  flex-wrap: wrap;
+
+  .card {
+    display: flex;
+    flex-direction: column;
+
+    &.is-training .card-header {
+      background-color: $mi-lila;
+
+      >.card-header-title {
+        color: #fff;
+      }
+    }
+
+    & .card-content {
+      flex-grow: 1;
+
+      dl.overview-card {
+        dd,
+        dt {
+          display: inline-block;
+          float: none;
+        }
+
+        dd+dt:before {
+          content: " // ";
+          font-weight: 100;
+          color: #999;
+        }
+      }
+    }
+
+    &.is-workshop .card-header {
+      background-color: $mi-gruen;
+
+      >.card-header-title {
+        color: #fff;
+      }
+    }
+
+    &.is-ganztagesworkshop .card-header {
+      background-color: $mi-gruen;
+
+      >.card-header-title {
+        color: #fff;
+      }
+    }
+
+    &.is-vortrag .card-header {
+      background-color: $mi-pink;
+
+      >.card-header-title {
+        color: #fff;
+      }
+    }
+
+    &.is-feedback .card-header {
+      background-color: $mi-blau;
+
+      >.card-header-title {
+        color: #fff;
+      }
+    }
+
+    &.is-pruefung .card-header {
+      background-color: $mi-black;
+
+      >.card-header-title {
+        color: #fff;
+      }
+    }
+
+    &.is-support-all .card-header {
+      background-color: $mi-grau;
+
+      >.card-header-title {
+        color: #fff;
+      }
+    }
+  }
+
+  .is-tab-content {
+    flex-basis: 30%;
+    margin-right: 3%;
+
+    @media (max-width: 999px) {
+      flex-basis: 47%;
+      margin-right: 3%;
+    }
+
+    @media (max-width: 768px) {
+      flex-basis: 100%;
+      margin-right: 0;
+    }
+  }
+}
+
+/**************/
+/* News
+/**************/
+
+
+.news-box{
+  margin-bottom: $bfs * 2;
+
+  dl{
+    margin-bottom: 0;
+
+  }
+
+  .card{
+    transition: all 0.3s;
+  }
+
+  .card:hover{
+    background-color: #000;
+    color: #fff;
+
+    h3{
+      color: #fff;
+    }
+  }
+
+  .bm--card-equal-height {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+ }
+ .bm--card-equal-height .card-footer {
+    margin-top: auto;
+ }
+
+ figure.image{
+   margin: 0;
+
+   img{
+    object-fit: cover;
+   }
+ }
+}
+
+//////////////
+// Links 
+//////////////
+.panel {
+  margin-bottom: 2rem;
+}
+
+.panel-block.is-active {
+  color: $mi-pink;
+}
+
+.link-overview .link-overview__item+.link-overview__item {
+  border-top: solid 1px $mi-grau;
+  margin-top: 1rem;
+  padding-top: 1rem;
+}
+
+/**************/
+/* Content    */
+/**************/
+
+* {
+  word-wrap: normal;
+  hyphens: auto;
+}
+
+.section {
+  padding-top: $bfs;
+}
+
+.section:nth-of-type(2) {
+  padding-top: $bfs *2;
+}
+
+.is-overview-item {
+  margin-bottom: $bfs *2;
+}
+
+.cite{
+    padding: $bfs;
+    background-color: $mi-bg;
+}
+
+.content {
+    li{
+        margin-left: 1em;
+    }
+
+    p,
+    li,
+    table {
+        max-width: $bfs * 36;
+    }
+
+  h1 {
+    font-size: $bfs * 1.6;
+    font-weight: 500;
+  }
+
+  h2 {
+    font-size: $bfs * 1.4;
+    font-weight: 500;
+  }
+
+  h3 {
+    font-size: $bfs;
+    font-weight: 600;
+  }
+
+  h4 {
+    font-size: $bfs;
+    font-weight: 600;
+  }
+
+  h5 {
+    font-size: $bfs;
+    font-weight: 600;
+  }
+
+  h6 {
+    font-size: $bfs;
+    font-weight: 600;
+  }
+
+  /*ul{
+		margin-left: 1em;
+    }*/
+
+  dl {
+    margin-bottom: $bfs;
+
+    dt {
+      display: block;
+      float: left;
+      min-width: 10px;
+      padding: $bfs /8 0;
+      font-weight: bold;
+      color: $info;
+    }
+
+    dd {
+      /*border-bottom: solid 1px $grey-light; */
+      padding: $bfs /8 0;
+      margin-left: 0;
+    }
+
+    dt::after {
+      content: ":";
+      display: inline-block;
+      padding-right: $bfs /4;
+    }
+  }
+
+  table {
+
+    a,
+    a:not(.button) {
+      border: none;
+    }
+
+    th {
+      font-weight: 600;
+    }
+
+    .no-border {
+
+      th,
+      td {
+        border: none;
+      }
+    }
+  }
+
+  table {
+    @extend .table;
+  }
+
+  table.tab-schwerpunktmodule {
+    th {
+      width: 40%;
+    }
+
+    th+th+th {
+      width: 20%;
+    }
+  }
+
+  .footnotes {
+    border-top: solid 1px #9313ce;
+    padding-bottom: $bfs;
+    border-bottom: solid 1px #9313ce;
+  }
+
+  .img-responsive {
+    width: 100%;
+  }
+
+  figure {
+    border-top: dotted 1px $mi-gruen;
+    padding-top: $bfs;
+    margin-top: $bfs;
+
+    figcaption {
+      display: block;
+      padding-bottom: $bfs /2;
+      padding-top: $bfs;
+      margin-bottom: $bfs;
+      font-style: normal;
+      color: $mi-gruen;
+      border-top: dotted 1px $mi-gruen;
+      text-align: left;
+    }
+  }
+
+  td.pm {
+    background-color: $mi-blau;
+  }
+
+  td.spp {
+    background-color: $mi-gruen;
+  }
+
+  td.spmw,
+  td.spm {
+    background-color: $mi-pink;
+  }
+
+  td.pm-grau,
+  td.wpm {
+    background-color: lighten($mi-black, 50%);
+  }
+
+  .lighten {
+    * {
+      color: #aaa;
+    }
+  }
+}
+
+.zweispalter {
+  h2 {
+    border-top: dotted 1px $grey-light;
+    padding-top: $bfs;
+  }
+
+  .content {
+    @media (min-width: 999px) {
+      >* {
+        margin-left: 50% !important;
+      }
+
+      h3 {
+        font-size: $bfs;
+        font-weight: 700;
+        color: $mi-black;
+        line-height: 130%;
+      }
+
+      &>h1,
+      &>h2,
+      &>h3 {
+        margin-left: 0 !important;
+        float: left;
+        width: 48%;
+        padding-left: 20%;
+        margin-top: 0 !important;
+        text-align: right;
+        hyphens: none;
+      }
+
+      &>h4,
+      &>h5,
+      &>h6 {
+        font-weight: 600;
+        margin-top: $bfs;
+        margin-bottom: $bfs /2;
+      }
+
+      &>h1,
+      &>h2 {
+        /*border-top: dotted 1px #aaa; */
+        padding-top: $bfs;
+        text-align: left;
+        padding-right: 10%;
+        padding-left: 0;
+      }
+
+      &>h1+p,
+      &>h2+p {
+        margin-top: $bfs * 4 !important;
+      }
+
+      &>h2:not(:first-child) {
+        margin-top: $bfs *3 !important;
+      }
+    }
+  }
+}
+
+.modulbeschreibung {
+  h2 {
+    border-top: dotted 1px $grey-light;
+    padding-top: $bfs;
+  }
+
+  .content {}
+}
+
+.faq {
+  clear: both;
+}
+
+.toc {
+  border-left: solid 1px $mi-pink;
+
+  .menu-list {
+    padding-left: $bfs *2;
+  }
+}
+
+.is-small {
+  font-size: 80%;
+}
+
+.is-less-important {
+  opacity: 0.7;
+}
+
+.is-hidden {
+  display: none;
+}
+
+.more-button {
+  font-size: $bfs * 1.5 !important;
+  display: inline-block;
+  margin-left: $bfs /2;
+  transition: all 0.5s;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &.active {
+    transform: rotate(180deg);
+  }
+}
+
+#nomenklatur {
+  overflow-x: auto;
+
+  table {
+    max-width: 65rem;
+  }
+}
+
+@media (max-width: 999px) {
+
+  html,
+  body {
+
+    /*font-size: 60%;
+		line-height: 110%;*/
+    .content {
+      h1 {
+        font-size: $bfs * 1.4;
+        font-weight: 500;
+      }
+
+      h2 {
+        font-size: $bfs * 1.2;
+        font-weight: 500;
+      }
+
+      h3 {
+        font-size: $bfs;
+        font-weight: 700;
+      }
+
+      h4 {
+        font-size: $bfs;
+        font-weight: 600;
+      }
+
+      h5 {
+        font-size: $bfs;
+        font-weight: 600;
+      }
+
+      h6 {
+        font-size: $bfs;
+        font-weight: 600;
+      }
+    }
+  }
+}
+
+@media print {
+
+  section.hero,
+  .is-non-print {
+    display: none;
+  }
+}
+
+@media screen {
+  .is-print {
+    display: none;
+  }
+}
+
+// Settled on moving the import of syntax highlighting to the bottom of the CSS
+// ... Otherwise it really bloats up the top of the CSS file and makes it difficult to find the start
+//@import "highlights";
+@import "lib/svg-icons";
+
+.highlight {
+  background-color: $mi-pink;
+  color: #fff;
+  border: none;
+  box-shadow: none;
+  margin: 20px 0;
+  overflow: auto;
+  padding: 7px 7px 7px 10px;
+}
+
+pre code {
+  background-color: transparent;
+  color: #fff;
+  font-family: $family-monospace;
+}
+
+.codesnippet{
+  figure.highlight{
+    text-align: left;
+    background-color: $mi-grau;
+    color: #000;
+    margin: 0;
+    padding: 0;
+
+    code{
+      color: #000;
+    }
+  }
+}
+
+
+/* Für die fianle Version werden ein paar Angaben nicht gezeigt */
+
+.bearbeiten,
+.doc-status {
+  display: none;
+}
+
+.js-video {
+  height: 0;
+  padding-top: 25px;
+  padding-bottom: 56.5%;
+  position: relative;
+  overflow: hidden;
+}
+
+.js-video.widescreen {
+  padding-bottom: 56.34%;
+}
+
+.js-video.vimeo {
+  padding-top: 0;
+}
+
+.js-video embed,
+.js-video iframe,
+.js-video object,
+.js-video video {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}