Improve css

assets/sass/libs/_vars.scss

@@ -24,8 +24,8 @@ $size: (
 $font: (
   family: ('Roboto', Helvetica, sans-serif),
   family-fixed: ('Courier New', monospace),
-  weight: 400,
+  weight: 300,
-  weight-bold: 500
+  weight-bold: 400
 );
 
 // Palette.
@@ -51,5 +51,5 @@ $palette: (
 
 //pictures startpage
 $picture-startpage: (
-  scroll-1: url(../images/home/abschnitt1.jpeg),
+  scroll-1: url(/images/home/abschnitt1.jpeg),
 );

assets/sass/main.scss

@@ -1,8 +1,8 @@
 @import 'libs/vars';
 @import 'libs/functions';
 @import 'libs/mixins';
-@import url("../css/font-awesome.min.css");
+@import url("/css/font-awesome.min.css");
-@import url("../fonts/roboto.css");
+@import url("/fonts/roboto.css");
 @import url("https://c3woc.de/css/spacestatus.css");
 @import "libs/skel";
 @import 'parts/startpage';
@@ -17,7 +17,7 @@ Modified by Toolbox Bodensee e.V.
 @include skel-breakpoints((
   xlarge: '(max-width: 1680px)',
   large: '(max-width: 1280px)',
-  medium: '(max-width: 980px)',
+  medium: '(max-width: 1100px)',
   small: '(max-width: 933px)',
   xsmall: '(max-width: 480px)'
 ));
@@ -32,7 +32,7 @@ Modified by Toolbox Bodensee e.V.
   }
 
   @else if $point == tablet {
-    @media (max-width: 980px) { @content ; }
+    @media (max-width: 1100px) { @content ; }
   }
 
   @else if $point == phablet {
@@ -116,4 +116,4 @@ $size-wrapper-pad-lr: 3em;
 @import 'parts/footer';
 @import 'parts/project';
 @import 'parts/col';
-
+@import 'parts/youtube';

assets/sass/parts/_banner.scss

@@ -2,7 +2,7 @@
 #banner {
   background-attachment: fixed;
   background-color: _palette(accent2);
-  background-image: url('../../images/banner.jpg');
+  background-image: url('/images/banner.jpg');
   background-position: center center;
   background-size: cover;
   box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.25);
@@ -86,10 +86,6 @@
       h2 {
         font-size: 2.5em;
         margin: 0;
-
-        @include breakpoint(phablet) {
-          font-size: 1.5em;
-        }
       }
 
       p {
@@ -99,13 +95,12 @@
     }
 
     .image {
-      border-radius: 0;
+      border-radius: 100%;
       display: inline-block;
-      height: 19em;
+      height: 18em;
       margin-left: 3em;
-      margin-top: 2em;
       vertical-align: middle;
-      width: 19em;
+      width: 18em;
 
       @include breakpoint(tablet) {
         margin: 0;
@@ -117,7 +112,7 @@
       }
 
       img {
-        border-radius: 0;
+        border-radius: 100%;
         display: block;
         width: 100%;
       }
@@ -130,4 +125,3 @@ body.is-touch {
     background-attachment: scroll;
   }
 }
-

assets/sass/parts/_button.scss

@@ -21,10 +21,6 @@ input[type="button"],
   text-decoration: none;
   white-space: nowrap;
 
-  @include breakpoint(mobileonly) {
-    padding: 0;
-  }
-
   &:hover,
   &:active {
     box-shadow: inset 0 0 0 1px _palette(accent1);
@@ -45,6 +41,8 @@ input[type="button"],
     display: block;
     margin: 0 0 (_size(element-margin) * 0.5) 0;
     width: 100%;
+    height: auto;
+    white-space: normal;
   }
 
   &.small {

assets/sass/parts/_col.scss

@@ -1,12 +1,43 @@
 /* Columns */
-@for $i from 2 through 5 {
+.col-2 {
-  .col-#{$i} {
+  column-count: 2;
-    column-count: $i;
   column-gap: 1vw;
-
+  height:auto;
   > .button {
     padding: 0;
   }
+  &.long {
+    @include breakpoint(phablet) {
+      column-count: 1;
+    }
   }
 }
 
+.col-3 {
+  column-count: 3;
+  column-gap: 1vw;
+  height:auto;
+  > .button {
+    padding: 0;
+  }
+  @include breakpoint(phablet) {
+    column-count: 2;
+  }
+  &.long {
+    @include breakpoint(phablet) {
+      column-count: 1;
+    }
+  }
+}
+
+.col-4 {
+  column-count: 4;
+  column-gap: 1vw;
+  height:auto;
+  > .button {
+    padding: 0;
+  }
+  @include breakpoint(phablet) {
+    column-count: 2;
+  }
+}

assets/sass/parts/_goto-next.scss

@@ -14,7 +14,7 @@
   z-index: 1;
 
   &::before {
-    background-image: url('images/arrow.svg');
+    background-image: url('/css/images/arrow.svg');
     background-position: center center;
     background-repeat: no-repeat;
     background-size: contain;
@@ -35,4 +35,3 @@
     }
   }
 }
-

assets/sass/parts/_image.scss

@@ -56,5 +56,13 @@
   &.mapid {
     height: 70vh;
   }
+  &.lightgallery {
+    width: 33%;
+    @include breakpoint(tablet) {
+      width: 49%;
+    }
+    @include breakpoint(phablet) {
+      width: 100%;
+    }
+  }
 }
-

assets/sass/parts/_list.scss

@@ -159,4 +159,3 @@ ul {
 dl {
   margin: 0 0 _size(element-margin) 0;
 }
-

assets/sass/parts/_project.scss

@@ -1,5 +1,5 @@
 .project {
-  height: 420px;
+  height: 600px;
 }
 
 .teaser {

assets/sass/parts/_spotlight.scss

@@ -142,13 +142,8 @@
       height: 101%;
       padding: $size-wrapper-pad-tb $size-wrapper-pad-lr;
       top: 0;
-      width: 28em;
+      width: 30em;
       min-width: 25%;
-
-      @include breakpoint(laptop) {
-        padding: $size-wrapper-pad-tb $size-wrapper-pad-lr;
-        width: 25em;
-      }
     }
   }
 

assets/sass/parts/_table.scss

@@ -1,12 +1,9 @@
 /* Table */
-.table-wrapper {
-  -webkit-overflow-scrolling: touch;
-  overflow-x: auto;
-}
-
 table {
   margin: 0 0 _size(element-margin) 0;
   width: 100%;
+  word-wrap:break-word;
+  table-layout: fixed;
 
   tbody {
     tr {
@@ -71,5 +68,34 @@ table {
       border-top: 0;
     }
   }
+
+  ul {
+    margin: 0 0 0 0;
   }
 
+  @include breakpoint(mobileonly) {
+    td {
+      width:100%;
+      display: block;
+      margin:10px 0px;
+      text-align: center;
+    }
+  }
+}
+
+.table-wrapper {
+  -webkit-overflow-scrolling: touch;
+  overflow-x: auto;
+  &.code {
+    border-radius: 5px;
+    font-style: italic;
+    table {
+      margin: 0 0 0 0;
+      tbody {
+        tr {
+          border: 0;
+        }
+      }
+    }
+  }
+}

assets/sass/parts/_youtube.scss

@@ -0,0 +1,51 @@
+.youtube {
+    background-color: #000;
+    margin-bottom: 30px;
+    position: relative;
+    padding-top: 56.25%;
+    overflow: hidden;
+    cursor: pointer;
+}
+.youtube img {
+    width: 100%;
+    top: -16.82%;
+    left: 0;
+    opacity: 0.7;
+}
+.youtube .play-button {
+    width: 90px;
+    height: 60px;
+    background-color: #333;
+    box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
+    z-index: 1;
+    opacity: 0.8;
+    border-radius: 6px;
+}
+.youtube .play-button:before {
+    content: "";
+    border-style: solid;
+    border-width: 15px 0 15px 26.0px;
+    border-color: transparent transparent transparent #fff;
+}
+.youtube img,
+.youtube .play-button {
+    cursor: pointer;
+}
+.youtube img,
+.youtube iframe,
+.youtube .play-button,
+.youtube .play-button:before {
+    position: absolute;
+}
+.youtube .play-button,
+.youtube .play-button:before {
+    top: 50%;
+    left: 50%;
+    transform: translate3d( -50%, -50%, 0 );
+}
+.youtube iframe {
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+}