Cleanup

src/scss/pirati/buttons.scss

-// Buttons
-.btn-icon {
-    display: inline-block;
-    transition: $transition;
-    text-decoration: none;
-
-    .btn-wrap {
-        justify-content: space-between;
-        align-items: center;
-        height: 45px;
-        display: flex;
-
-        .text {
-            display: block;
-            padding: 10px 36px;
-            box-sizing: border-box;
-            font-weight: 400;
-            font-size: 1.1rem;
-            text-align: center;
-        }
-
-        .icon {
-            width: 45px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            height: 100%;
-            transition: $transition;
-            i {
-                line-height: 1rem;
-            }
-            img {
-                width: auto;
-                height: 19px;
-                opacity: 0.9;
-            }
-
-            svg {
-                width: 19px;
-            }
-        }
-
-    }
-}
-
-.btn-big {
-    display: inline-block;
-    color: #FFF;
-    background: #000;
-    transition: $transition;
-    text-decoration: none;
-
-    .btn-wrap {
-        justify-content: space-between;
-        align-items: center;
-        height: auto;
-        display: flex;
-        padding: 29px 29px 22px;
-
-        .text {
-            display: block;
-            box-sizing: border-box;
-            font-weight: 400;
-            font-size: 35px;
-            font-family: "Bebas Neue", cursive;
-            text-transform: uppercase;
-
-            @media (max-width: 768px) {
-                font-size: 20px;
-            }
-        }
-
-        .icon {
-            width: 45px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            height: 100%;
-            font-size: 30px;
-            transition: $transition;
-            background: none!important;
-            border:none!important;
-
-            img {
-                width: auto;
-                height: 42px;
-                opacity: 0.9;
-            }
-            svg {
-                height: 40px;
-                width: 40px;
-            }
-        }
-    }
-    &:hover {
-        color: #FFF;
-        text-decoration: none;
-        .icon {
-            background:none!important;
-        }
-    }
-}
-
-.btn-basic {
-    display: inline-block;
-    text-align: center;
-    min-width: 130px;
-    transition: $transition;
-    text-decoration: none;
-
-    .text {
-        display: block;
-        padding: 10px 23px;
-        box-sizing: border-box;
-        font-weight: 400;
-        font-size: 1.1rem;
-    }
-}
-
-.big {
-    &.btn-icon {
-        width: 340px;
-        .btn-wrap {
-            height: 82px;
-
-            .text {
-                padding: 10px 45px;
-                font-size: 1.2rem;
-                flex-grow: 1;
-            }
-
-            .icon {
-                width: 82px;
-            }
-        }
-        @media(max-width:500px) {
-            width: 280px;
-        }
-    }
-
-}
-
-.btn-arrow {
-    display: inline-block;
-    text-align: center;
-    transition: 200ms;
-    text-decoration: none;
-    width: 44px;
-    height: 44px;
-    vertical-align: top;
-    line-height: 44px;
-    i {
-
-    }
-}
-
-// Green color button
-.c-green {
-    background: #29bc51;
-    color: #FFF;
-
-    .icon {
-        border-left: 1px solid #22a244;
-        background: #26b34b;
-    }
-
-    &:hover {
-        color: #FFF;
-        background: #000;
-        text-decoration: none;
-
-        .icon {
-            border-left: 1px solid #212121;
-            background: #000;
-
-            svg {
-                fill: #FFF;
-                path {
-                    fill: #FFF;
-                }
-            }
-            i {
-                color: #FFF;
-                
-            }
-        }
-    }
-}
-
-// White color button
-.c-white {
-    background: #FFF;
-    color: #000;
-
-    .icon {
-        border-left: 1px solid #000;
-        background: #FFF;
-    }
-
-    &:hover {
-        color: #FFF;
-        background: #000;
-        text-decoration: none;
-
-        .icon {
-            border-left: 1px solid #212121;
-            background: #000;
-
-            svg, i {
-                color: #FFF;
-                fill: #FFF;
-            }
-        }
-    }
-}
-
-// Black color button
-.c-black {
-    background: #000;
-    color: #FFF;
-
-    .icon {
-        border-left: 1px solid #000;
-        background: #303030;
-        border-right: 1px solid #e2e2e226;
-        svg {
-            fill: #FFF;
-        }
-    }
-
-    &:hover {
-        color: #000;
-        background: $extraLightGrey;
-        text-decoration: none;
-        .text {
-            color: #000;
-        }
-        .icon {
-            border-left: 1px solid #e6e6e6;
-            background: $extraLightGrey;
-
-            svg {
-                fill: #000;
-                path {
-                    fill: #000;
-                }
-            }
-            i {
-                color: #000;
-                
-            }
-        }
-    }
-}
-
-// Red color button
-.c-red {
-    background: $red;
-    color: #FFF;
-
-    .icon {
-        border-left: 1px solid #ea4248;
-        background: #e03438;
-        border-right: 1px solid #e2e2e226;
-    }
-    &:hover {
-        color: #FFF;
-        background: #000;
-        text-decoration: none;
-
-        .icon {
-            border-left: 1px solid #212121;
-            background: #000;
-
-            svg {
-                fill: #FFF;
-                path {
-                    fill: #FFF;
-                }
-            }
-            i {
-                color: #FFF;
-                
-            }
-        }
-    }
-}
-
-// Grey color button
-.c-grey {
-    background: #F0F0F0;
-    color: #000;
-
-    .icon {
-        border-left: 1px solid #000;
-        background: #303030;
-        border-right: 1px solid #e2e2e226;
-    }
-    &:hover {
-        color: #FFF;
-        background: #000;
-        text-decoration: none;
-        .icon {
-            border-left: 1px solid #212121;
-            background: #000;
-
-            svg {
-                fill: #FFF;
-                path {
-                    fill: #FFF;
-                }
-            }
-            i {
-                color: #FFF;
-                
-            }
-        }
-    }
-}
-
-// Blue facebook color button
-.c-fb {
-    background: #1978f3;
-    color: #FFF;
-}
-
-// If you want to stretch the button to parent width
-.stretch {
-    display: block;
-}
-
-// Cta buttons - variant b
-.cta-btn {
-    border: none;
-    outline: none;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    background-color: #000000;
-    display: inline-block;
-
-    @include transition(background-color 0.2s);
-
-    &:hover {
-        text-decoration: none;
-        background: #191919;
-
-        .arrow {
-            &:before {
-                left: 60%;
-            }
-        }
-    }
-
-    p {
-        font-family: 'Roboto Condensed', sans-serif;
-        color: #ffffff;
-        font-size: 1.2rem;
-        padding: 10px 30px;
-        display: inline-block;
-        vertical-align: middle;
-        margin: 0px;
-    }
-
-    .arrow {
-        display: inline-block;
-        vertical-align: middle;
-        background-color: #191919;
-        border-left: 1px solid #303030;
-        position: relative;
-        width: 47px;
-        height: 47px;
-
-        &:before {
-            content: "";
-            position: absolute;
-            left: 50%;
-            top: 50%;
-            transform: translate(-50%, -50%) rotate(-45deg);
-            width: 7px;
-            height: 7px;
-            position: absolute;
-            border-right: 2px solid #ffffff;
-            border-bottom: 2px solid #ffffff;
-
-            @include transition(left 0.2s);
-        }
-    }
-}
-
-.cta-btn2 {
-    border: none;
-    outline: none;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    background-color: #F3F3F3;
-    display: inline-block;
-
-    @include transition(background-color 0.2s);
-
-    font-family: 'Roboto Condensed', sans-serif;
-    color: #000000;
-    font-size: 1.2rem;
-    padding: 10px 30px;
-    display: inline-block;
-    vertical-align: middle;
-    margin: 0px;
-
-    &:hover {
-        text-decoration: none;
-        color: #000000;
-        background-color: #e4e4e4;
-    }
-}
\ No newline at end of file

src/scss/pirati/common.scss

-// ----------------- GLOBAL
-:root {
-    font-size: 15px;
-}
-body {
-    margin: 0;
-    font-family: 'Roboto Condensed', sans-serif;
-    font-weight: 300;
-}
-
-// Container
-.container-fluid {
-    max-width: 1366px;
-}
-
-// Resets and settings of tags
-ul {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    margin-left: 1.5rem;
-    li {
-        position: relative;
-        font-family: 'Roboto', sans-serif;
-        &:before {
-            font-style: normal;
-            font-variant: normal;
-            text-rendering: auto;
-            -webkit-font-smoothing: antialiased;
-            font-family: "Font Awesome 5 Pro";
-            content: "\f45c";
-            position: absolute;
-            font-size: 6px;
-            top: 7px;
-            margin: auto;
-            height: 12px;
-            color: #000;
-            left: -12px;
-            font-weight: 600;
-        }
-        a {
-            font-family: 'Roboto', sans-serif;
-        }
-    }
-}
-
-
-
-img {
-    max-width: 100%;
-}
-
-
-
-hr {
-    border-top: 1px solid #f6f6f6;
-    margin: 1.5rem 0;
-}
-
-main {
-    //overflow: hidden;
-}
-
-table {
-    border: 1px solid #eee;
-
-    thead {
-        tr {
-            th {
-                padding: 13px 21px;
-                background: #000;
-                color: #FFF;
-                font-weight: 400;
-            }
-        }
-    }
-
-    tbody {
-        /*empty*/
-        tr {
-            /*empty*/
-            td {
-                padding: 13px 21px;
-                border-bottom: 1px solid #eee;
-                border-left: 1px solid #eee;
-            }
-
-            &:nth-child(even) {
-                /*empty*/
-                td {
-                    /*empty*/
-                }
-            }
-
-            &:nth-child(odd) {
-                background: #f9f9f9;
-
-                td {
-                    /*empty*/
-                }
-            }
-        }
-    }
-}
-figure {
-    position: relative;
-
-    img {
-        display: block;
-        margin-left: auto;
-        margin-right: auto;
-        max-width: 100%;
-        width: auto;
-    }
-
-    figcaption {
-        position: absolute;
-        z-index: 2;
-        font-family: 'Roboto', sans-serif;
-        font-weight: 300;
-        color: #ffffff;
-        left: 20px;
-        bottom: 20px;
-    }
-}
-
-.only-mobile {
-    display: none;
-
-    @media (max-width: 991px) {
-        display: block;
-    }
-}
-
-.only-desktop {
-    @media (max-width: 991px) {
-        display: none;
-    }
-}
-
-@function background($imageKey) {
-    @if map-has-key($image-list, $imageKey) {
-        @return map-get($image-list, $imageKey);
-    }
-
-    @warn "Unknown path:  `#{$imageKey}`";
-
-    @return null;
-}
-
-/*MIXINS*/
-@mixin transition($transition...) {
-    -moz-transition: $transition;
-    -o-transition: $transition;
-    -webkit-transition: $transition;
-    transition: $transition;
-}
-
-@mixin transition-property($property...) {
-    -moz-transition-property: $property;
-    -o-transition-property: $property;
-    -webkit-transition-property: $property;
-    transition-property: $property;
-}
-
-@mixin transition-duration($duration...) {
-    -moz-transition-property: $duration;
-    -o-transition-property: $duration;
-    -webkit-transition-property: $duration;
-    transition-property: $duration;
-}
-
-@mixin transition-timing-function($timing...) {
-    -moz-transition-timing-function: $timing;
-    -o-transition-timing-function: $timing;
-    -webkit-transition-timing-function: $timing;
-    transition-timing-function: $timing;
-}
-
-@mixin transition-delay($delay...) {
-    -moz-transition-delay: $delay;
-    -o-transition-delay: $delay;
-    -webkit-transition-delay: $delay;
-    transition-delay: $delay;
-}
-
-@mixin background-size($size) {
-    -webkit-background-size: $size;
-    -moz-background-size: $size;
-    -o-background-size: $size;
-    background-size: $size;
-}
-
-@mixin gradient($direction, $startcolor, $endcolor) {
-    background-image: linear-gradient(to $direction, $startcolor 0%, $endcolor 100%);
-    background-image: -o-linear-gradient($direction, $startcolor 0%, $endcolor 100%);
-    background-image: -moz-linear-gradient($direction, $startcolor 0%, $endcolor 100%);
-    background-image: -webkit-linear-gradient($direction, $startcolor 0%, $endcolor 100%);
-    background-image: -ms-linear-gradient($direction, $startcolor 0%, $endcolor 100%);
-}
-
-/*custom style for DIVIDER*/
-
-/*Ellipsis style*/
-.ellip {
-    display: block;
-    height: 100%;
-}
-
-.ellip-line {
-    display: inline-block;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    word-wrap: normal;
-    max-width: 100%;
-}
-
-.ellip,
-.ellip-line {
-    position: relative;
-    overflow: hidden;
-}
-
-.onboard-banner {
-    background: #f4f5f7;
-    padding: 27px;
-    display: flex;
-    justify-content:
-            space-between;
-    flex-wrap: wrap;
-    border: 1px solid #e8e9eb;
-
-    .left {
-        width: 48%;
-    }
-
-    .right {
-        width: 48%;
-        margin-top: -27px;
-        margin-bottom: -27px;
-        text-align: center;
-        display: flex;
-        align-items: flex-end;
-
-        .flag {
-            /*empty*/
-        }
-    }
-    @media(max-width: 768px) {
-        .left {
-            width: 100%;
-        }
-        .right {
-            display: none;
-        }
-    }
-}
\ No newline at end of file

src/scss/pirati/footer.scss

-// ----------------- FOOTER
-footer {
-    .copyleft {
-        transform: matrix(-1, 0, 0, 1, 0, 0) !important;
-        display: inline-block;
-    }
-    .footer-nav {
-        ul {
-            margin-top: 26px;
-            margin-left: 30px;
-
-            li {
-                margin-bottom: 7px;
-
-                a {
-                    color: $lightGrey;
-                }
-
-                &:last-child {
-                    margin-bottom: 0;
-                }
-                &:before {
-                    display: none;
-                }
-            }
-        }
-    }
-
-    .footer-title {
-        font-size: 1.3rem;
-        text-transform: uppercase;
-        color: #FFF;
-        display: block;
-    }
-
-    .footer-first {
-        background: $lightBlack;
-
-        .top {
-            border-bottom: 1px solid #343434;
-            @media (max-width: 576px) {
-                padding: 23px 0 3px;
-            }
-        }
-
-        .bottom {
-
-            .footer-nav {
-                ul {
-                    margin-top: 0;
-
-                    li {
-                        margin: 0;
-                    }
-                }
-            }
-
-            @media (max-width: 991px) {
-                padding: 16px 0 15px;
-
-                .footer-nav {
-                    ul {
-                        margin: 0;
-                    }
-                }
-            }
-        }
-    }
-
-    .footer-second {
-        background: #000;
-
-        @media (max-width: 991px) {
-            padding: 33px 0;
-
-            .btn-basic {
-                width: 100%;
-                margin-top: 20px;
-                height: 52px;
-
-                .text {
-                    font-weight: 300;
-                    padding: 14px 31px;
-                }
-            }
-        }
-    }
-
-    .footer-logo {
-        img {
-            width: 168px;
-        }
-
-        p {
-            margin-top: 34px;
-            color: $lightGrey;
-            max-width: 82%;
-        }
-
-        @media (max-width: 991px) {
-            margin-bottom: 29px;
-            order: -2;
-
-            p {
-                display: none;
-            }
-        }
-
-        @media (max-width: 576px) {
-            img {
-                width: 106px;
-            }
-        }
-    }
-
-    .footer-nav {
-        .footer-title {
-            text-align: center;
-        }
-
-        @media (max-width: 991px) {
-            .footer-title {
-                text-align: left;
-                position: relative;
-                padding: 12px 0 11px;
-                border-bottom: 1px solid #a7a7a730;
-
-                &:after {
-                    @include render-icon;
-
-                    position: absolute;
-                    content: "\f078";
-                    right: 4px;
-                    font-size: 14px;
-                    top: 19px;
-                }
-            }
-
-            ul {
-                margin: 0;
-                display: none;
-                padding: 11px 0 5px;
-            }
-        }
-
-        &.last {
-            .footer-title {
-                border: none;
-            }
-        }
-    }
-
-    .footer-cta {
-        display: flex;
-        flex-wrap: wrap;
-        flex-direction: column;
-        align-items: flex-end;
-
-        @media (max-width: 991px) {
-            order: -1;
-        }
-
-        .footer-socials {
-            flex-grow: 1;
-
-            a {
-                color: #FFF;
-                margin-right: 9px;
-            }
-        }
-
-        .link {
-            margin-bottom: 13px;
-            color: $lightGrey;
-            font-size: 14px;
-        }
-
-        @media (max-width: 991px) {
-            align-items: flex-start;
-        }
-
-        @media (max-width: 576px) {
-            .footer-socials {
-                margin-bottom: 18px;
-            }
-
-            .link {
-                margin-bottom: 23px;
-            }
-
-            .btn-icon {
-                width: 100%;
-                margin-bottom: 33px;
-
-                .text {
-                    text-align: center;
-                    width: 100%;
-                    font-weight: 300;
-                }
-
-                .icon {
-                    width: 64px;
-                }
-            }
-        }
-    }
-
-    .footer-profile {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-
-        .left {
-            border-radius: 100%;
-            width: 50px;
-            text-align: center;
-
-            img {
-                display: block;
-                max-width: inherit;
-            }
-        }
-
-        .right {
-            text-align: left;
-            margin-left: 20px;
-
-            .name {
-                color: #FFF;
-                font-size: 1.1rem;
-                font-weight: 400;
-            }
-
-            .email {
-                color: $lightGrey;
-                display: inline-block;
-                width: 100%;
-
-                @media (max-width: 1200px) {
-                    i {
-                        display: none;
-                    }
-                }
-            }
-        }
-
-        @media (max-width: 991px) {
-            justify-content: left;
-            margin-bottom: 10px;
-            padding-right: 50px;
-
-            .left {
-                img {
-                    max-width: 47px;
-                }
-            }
-
-            .right {
-                margin-left: 24px;
-
-                .email {
-                    i {
-                        display: none;
-                    }
-                }
-            }
-
-            &:after {
-                @include render-icon;
-
-                position: absolute;
-                content: "\f0e0";
-                right: 16px;
-                font-size: 21px;
-                top: 8px;
-                font-weight: 900;
-                color: #929292;
-            }
-        }
-    }
-}
\ No newline at end of file

src/scss/pirati/mixins.scss

-/*MIXINS*/
-@mixin transition($transition...) {
-    -moz-transition: $transition;
-    -o-transition: $transition;
-    -webkit-transition: $transition;
-    transition: $transition;
-}
-
-@mixin transition-property($property...) {
-    -moz-transition-property: $property;
-    -o-transition-property: $property;
-    -webkit-transition-property: $property;
-    transition-property: $property;
-}
-
-@mixin transition-duration($duration...) {
-    -moz-transition-property: $duration;
-    -o-transition-property: $duration;
-    -webkit-transition-property: $duration;
-    transition-property: $duration;
-}
-
-@mixin transition-timing-function($timing...) {
-    -moz-transition-timing-function: $timing;
-    -o-transition-timing-function: $timing;
-    -webkit-transition-timing-function: $timing;
-    transition-timing-function: $timing;
-}
-
-@mixin transition-delay($delay...) {
-    -moz-transition-delay: $delay;
-    -o-transition-delay: $delay;
-    -webkit-transition-delay: $delay;
-    transition-delay: $delay;
-}
-
-@mixin background-size($size) {
-    -webkit-background-size: $size;
-    -moz-background-size: $size;
-    -o-background-size: $size;
-    background-size: $size;
-}
-
-@mixin gradient($direction, $startcolor, $endcolor) {
-    background-image: linear-gradient(to $direction, $startcolor 0%, $endcolor 100%);
-    background-image: -o-linear-gradient($direction, $startcolor 0%, $endcolor 100%);
-    background-image: -moz-linear-gradient($direction, $startcolor 0%, $endcolor 100%);
-    background-image: -webkit-linear-gradient($direction, $startcolor 0%, $endcolor 100%);
-    background-image: -ms-linear-gradient($direction, $startcolor 0%, $endcolor 100%);
-}
-
-// Render fontawesome icons
-@mixin render-icon {
-    font-style: normal;
-    font-variant: normal;
-    text-rendering: auto;
-    -webkit-font-smoothing: antialiased;
-    font-family: "Font Awesome 5 Pro";
-}
\ No newline at end of file

src/scss/pirati/pagination.scss

-.paging {
-    .paging-wrapper {
-        .page-btn {
-            font-family: 'Roboto Condensed', sans-serif;
-            font-weight: 700;
-            background-color: #F3F3F3;
-            color: #1d1d1d;
-            width: 42px;
-            height: 42px;
-            display: inline-block;
-            vertical-align: top;
-            line-height: 42px;
-            text-decoration: none;
-            margin-left: 1px;
-            margin-right: 1px;
-
-            @include transition(background-color 0.2s, color 0.2s);
-
-            &.active {
-                background-color: #1d1d1d;
-                color: #F3F3F3;
-            }
-
-            &:hover {
-                background-color: #1d1d1d;
-                color: #F3F3F3;
-            }
-        }
-
-        .prev-next-page {
-            background-color: #F3F3F3;
-            color: #1d1d1d;
-            display: inline-block;
-            vertical-align: top;
-
-            @include transition(background-color 0.2s, color 0.2s);
-
-            &:hover {
-                background-color: #1d1d1d;
-                color: #F3F3F3;
-
-                .arrow {
-                    &.next {
-                        &:before {
-                            left: 60%;
-                            border-right: 2px solid #F3F3F3;
-                            border-bottom: 2px solid #F3F3F3;
-                        }
-                    }
-
-                    &.prev {
-                        &:before {
-                            left: 40%;
-                            border-top: 2px solid #F3F3F3;
-                            border-left: 2px solid #F3F3F3;
-                        }
-                    }
-                }
-            }
-
-            p {
-                font-family: 'Roboto Condensed', sans-serif;
-                font-weight: 700;
-                padding: 9px 16px;
-                display: inline-block;
-                vertical-align: middle;
-                margin: 0px;
-            }
-
-            .arrow {
-                display: inline-block;
-                vertical-align: middle;
-                position: relative;
-                width: 42px;
-                height: 42px;
-
-                &.next {
-                    border-left: 1px solid rgba(171, 171, 171, 0.1);
-
-                    &:before {
-                        content: "";
-                        position: absolute;
-                        left: 50%;
-                        top: 50%;
-                        transform: translate(-50%, -50%) rotate(-45deg);
-                        width: 7px;
-                        height: 7px;
-                        position: absolute;
-                        border-right: 2px solid #1d1d1d;
-                        border-bottom: 2px solid #1d1d1d;
-
-                        @include transition(left 0.2s, border-color 0.2s);
-                    }
-                }
-
-                &.prev {
-                    border-right: 1px solid rgba(171, 171, 171, 0.1);
-
-                    &:before {
-                        content: "";
-                        position: absolute;
-                        left: 50%;
-                        top: 50%;
-                        transform: translate(-50%, -50%) rotate(-45deg);
-                        width: 7px;
-                        height: 7px;
-                        position: absolute;
-                        border-top: 2px solid #1d1d1d;
-                        border-left: 2px solid #1d1d1d;
-
-                        @include transition(left 0.2s, border-color 0.2s);
-                    }
-                }
-            }
-        }
-    }
-}
\ No newline at end of file

src/scss/pirati/typography.scss

-// Global headline settings
-h1, h2, h3, h4, h5, h6 {
-    font-family: $bebas;
-    text-transform: uppercase;
-}
-body {
-    font-size: 0.9333rem;
-}
-
-p {
-    font-size: 1rem;
-    font-family: 'Roboto', sans-serif;
-    font-weight: 400;
-    line-height: 1.6rem;
-    margin: 0;
-    padding: 0;
-}
-
-a {
-    cursor: pointer;
-    text-decoration: none;
-    transition: $transition;
-    color: $grey;
-
-    &:hover {
-        text-decoration: underline;
-        color: inherit;
-    }
-}
-
-b {
-    font-weight: 600;
-}
-blockquote {
-    font-family: 'Roboto', sans-serif;
-    font-size: .88rem;
-    line-height: 1.4rem;
-    font-style: italic;
-    font-weight: 500;
-    color: #0e0e0e;
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-    width: 78%;
-    padding-left: 30px;
-    border-left: 2px solid #0e0e0e;
-    margin-top: 0px;
-    margin-bottom: 0px;
-
-    @media screen and (max-width: 475px) {
-        padding-left: 18px;
-    }
-}
-// Bold Headlines with bebas neue font
-.headline-maxi {
-    font-size: 6rem;
-    line-height: 6rem;
-
-    @media (max-width: 576px) {
-        font-size: 3.4rem;
-        line-height: 3.4rem;
-
-        br {
-            display: none;
-        }
-    }
-}
-
-.headline-big {
-    font-size: 4.6rem;
-    line-height: 4.6rem;
-    @media (max-width: 576px) {
-        font-size: 2.7rem;
-        line-height: 2.7rem;
-
-        br {
-            display: none;
-        }
-    }
-}
-
-.headline-normal {
-    font-size: 2.7rem;
-    line-height: 2.7rem;
-
-    @media (max-width: 576px) {
-        font-size: 2.1rem;
-        line-height: 2.1rem;
-
-        br {
-            display: none;
-        }
-    }
-}
-
-// Thin subtitle
-
-.subtitle-maxi {
-    font-family: 'Roboto Condensed', sans-serif;
-    font-weight: 500;
-    font-size: 2rem;
-    text-transform: none;
-}
-
-.subtitle-big {
-    font-family: 'Roboto Condensed', sans-serif;
-    font-weight: 500;
-    font-size: 1.87rem;
-    text-transform: none;
-}
-
-.subtitle-normal {
-    font-family: 'Roboto Condensed', sans-serif;
-    font-weight: 300;
-    font-size: 1.2rem;
-}
-
-
-
-// Spacings
-
-// Small
-.sp-1 {
-    padding-top: 1.5rem;
-    padding-bottom: 1.5rem;
-
-}
-// Medium
-.sp-2 {
-    padding-top: 3rem;
-    padding-bottom: 3rem;
-}
-// Large
-.sp-3 {
-    padding-top: 4.5rem;
-    padding-bottom: 4.5rem;
-}
-
-.sp-t-1 {
-    padding-top: 1.5rem;
-}
-.sp-t-2 {
-    padding-top: 3rem;
-}
-.sp-t-3 {
-    padding-top: 4.5rem;
-}
-
-
-.sp-b-1 {
-    padding-bottom: 1.5rem;
-}
-.sp-b-2 {
-    padding-bottom: 3rem;
-}
-.sp-b-3 {
-    padding-bottom: 4.5rem;
-}
-
-@media(max-width:768px) {
-    // Small
-    .sp-1 {
-        padding-top: 1rem;
-        padding-bottom: 1rem;
-
-    }
-    // Medium
-    .sp-2 {
-        padding-top: 1.8rem;
-        padding-bottom: 1.8rem;
-    }
-    // Large
-    .sp-3 {
-        padding-top: 3rem;
-        padding-bottom: 3rem;
-    }
-
-    .sp-t-1 {
-        padding-top: 1rem;
-    }
-    .sp-t-2 {
-        padding-top: 1.8rem;
-    }
-    .sp-t-3 {
-        padding-top: 3rem;
-    }
-
-
-    .sp-b-1 {
-        padding-bottom: 1rem;
-    }
-    .sp-b-2 {
-        padding-bottom: 1.8rem;
-    }
-    .sp-b-3 {
-        padding-bottom: 3rem;
-    }
-}
\ No newline at end of file

src/scss/variables.scss

-// Colors
-$extraLightGrey: #f3f3f3;
-$lightGrey: #adadad;
-$grey: #4c4c4c;
-$lightBlack: #202020;
-$black: #000000;
-$red: #d6151b;
-$fbBlue: #067ceb;
-$green: #29bc51;
-
-// Fonts
-$roboto: 'Roboto Condensed', sans-serif;
-$bebas: 'Bebas Neue', cursive;
-
-// Transition duration
-$transition: 200ms;

templates/includes/button.html.ep

-<button type="button" class="btn btn-<%= $c->stash->{class} // 'secondary' %>">
-<i class="fa fa-play-<%= $icon %>"></i> <%= $label %>
-</button>

templates/index.html.ep

-% layout 'default';
-% title 'Piratské vysílání';
-
-<table id="Streams"
-    data-detail-view="true"
-    data-detail-view-icon="false"
-    data-detail-view-by-click="true"
-    data-detail-formatter="streamInfo"
-    data-detail-filter="streamInfoAllowed"
-    data-row-style="rowStyle"
-    data-url="/streams">
-  <thead>
-    <tr>
-      <th data-field="id" data-width="30" data-formatter="statusFormatter"></th>
-      <th data-field="name" data-width="70" data-width-unit="%">Stream</th>
-      <th data-field="publish_user_name" data-width="30" data-width-unit="%">Vysílá</th>
-    </tr>
-  </thead>
-</table>
-
-<script>
-var expandedRows = 0;
-
-$('#Streams').bootstrapTable({
-    onExpandRow:   function () { ++expandedRows },
-    onCollapseRow: function () { --expandedRows },
-    onClickRow: function (row) {
-        if ( row.is_live ) {
-            window.location.href = '/play/' + row.key;
-        }
-    },
-});
-
-function streamInfoAllowed(index, row) {
-%   if ( $c->is_user_authenticated) {
-    return row.is_live ? 0 : 1;
-%   } else {
-    return 0;
-%   }
-}
-
-function streamInfo(index, row, element) {
-   $.ajax({
-       url: '/streams/' + row.id,
-       type: 'get',
-       success: function(response){
-           element.html(response)
-       }
-   });
-}
-
-function rowStyle(row, index) {
-    var classes = ''
-
-    if ( row.is_live ) {
-        classes = 'Live'
-    }
-
-    return { classes: classes }
-}
-
-function statusFormatter(value, row) {
-    if (row.is_live ) {
-        return '<i class="fa fa-play-circle"></i>';
-    }
-    else if (row.is_writeable ) {
-        return '<i class="fa fa-video"></i>';
-    }
-    else {
-        return '';
-    }
-}
-
-setInterval(
-    function() {
-        if ( expandedRows == 0 ) {
-            $('#Streams').bootstrapTable('refresh', {silent: true})
-        }
-    },
-    5000
-);
-
-
-</script>