swedbank-pay-design-guide-jekyll-theme 1.5.1.pre.article.pre.no.pre.main0001

data/_assets/scss/code-view.scss

@@ -0,0 +1,13 @@
+@import 'colors.scss';
+
+.code-view {
+    .code-view-table {
+        .code-view-code {
+
+            .nc,
+            .nf {
+                color: $code-green;
+            }
+        }
+    }
+}

data/_assets/scss/colors.scss

@@ -0,0 +1,19 @@
+$yellow: #fdc129;
+$light-turquoise: #ebf8f2;
+$apricot: #fbf2ea;
+$pink: #efb7b6;
+$brand-info: #4572c0;
+$brand-info-light: #e8eff9;
+$brand-success: #51971b;
+$brand-success-light: #f2f7eb;
+$turquoise: #31a3ae;
+$turquoise-link: #257886;
+$brown: #512b2b;
+$dark-brown: #493c3b;
+$medium-brown: #72605e;
+$white: #fff;
+$card-pink: #c5569a;
+$background-gray: #ebE7E2;
+$background-front-page: #fefcfa;
+$code-green: #9c6;
+$black: #222;

data/_assets/scss/fonts.scss

@@ -0,0 +1,2 @@
+$headline: "Swedbank Headline", "Arial", sans-serif;
+$mono: "Akkurat Mono", monospace;

data/_assets/scss/front-page.scss

@@ -0,0 +1,312 @@
+@import 'colors.scss';
+@import 'fonts.scss';
+
+$front-page-padding: 0 4rem;
+$front-page-max-width: 1280px;
+
+@mixin row-cards {
+    >[class*='col-'] {
+        display: flex;
+    }
+}
+
+@mixin front-page-cards ($color) {
+    margin-bottom: 4rem;
+
+    .row {
+        @include row-cards();
+
+        &>:first-child {
+            &:before {
+                content: "";
+                position: absolute;
+                bottom: 0;
+                left: -0.5rem;
+                width: 3.5rem;
+                height: 2.5rem;
+                background-color: $color;
+                background-image: radial-gradient($color 20%, $background-front-page 20%);
+                background-position: 0 0;
+                background-size: 0.45rem 0.5rem;
+            }
+        }
+
+        &>:last-child {
+            &:before {
+                content: "";
+                position: absolute;
+                top: 1rem;
+                right: -0.25rem;
+                width: 3.5rem;
+                height: 2.5rem;
+                background-color: $color;
+                background-image: radial-gradient($color 20%, $background-front-page 20%);
+                background-position: 0 0;
+                background-size: 0.45rem 0.5rem;
+            }
+        }
+    }
+}
+
+.front-page {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .front-page-container {
+        max-width: $front-page-max-width;
+        margin: $front-page-padding;
+
+        .front-page-top {
+            padding-top: 4rem;
+            width: 100%;
+            margin-bottom: 3rem;
+
+            &:before {
+                content: "";
+                display: block;
+                position: absolute;
+                top: 0;
+                left: 0;
+                background-color: $dark-brown;
+                width: 100%;
+                height: 34rem;
+                z-index: 0;
+            }
+
+            .front-page-hero {
+                position: relative;
+                max-width: 35rem;
+                margin-bottom: 3.5rem;
+                z-index: 1;
+
+                h3 {
+                    color: $yellow;
+                    font-family: $headline;
+                    margin-bottom: 0;
+                }
+
+                p {
+                    color: $white;
+                    font-size: 1.125rem;
+                }
+
+                .front-page-hero-name {
+                    font-family: $mono;
+                    font-weight: bold;
+                    font-size: 2rem;
+                    color: $yellow;
+                    margin-bottom: 1rem;
+
+                    span {
+                        color: $white;
+                    }
+                }
+
+            }
+
+            .front-page-intro-cards {
+                h2 {
+                    color: $white;
+
+                    .header-anchor {
+                        display: none;
+                    }
+                }
+
+                .row {
+                    @include row-cards();
+                }
+            }
+        }
+
+        .front-page-merchants {
+            margin-bottom: 3.75rem;
+
+            .merchants-container {
+                display: flex;
+                flex-wrap: wrap;
+
+                .merchant-link {
+                    display: flex;
+                    align-items: center;
+                    height: 2rem;
+                    margin: 0.25rem 2rem 1rem 0;
+                }
+            }
+        }
+
+
+        .front-page-cards-sdk {
+            @include front-page-cards($turquoise);
+        }
+
+        .front-page-cards-module {
+            @include front-page-cards($card-pink);
+        }
+
+
+        .front-page-release-notes {
+            margin-bottom: 4rem;
+
+            .release-notes-container {
+                margin-top: 2.5rem;
+
+                .row {
+                    border-bottom: 1px solid $background-gray;
+                    margin-bottom: 2rem;
+                    padding-bottom: 1rem;
+
+                    .release-notes-date {
+                        color: $medium-brown;
+                    }
+
+                }
+            }
+        }
+
+        .front-page-cards-extra {
+            @include front-page-cards($yellow);
+        }
+
+        .front-page-contact {
+            display: none; // Not currently in use
+            // display: flex;
+
+            .front-page-contact-content {
+                background-color: $dark-brown;
+                width: 100%;
+                min-height: 13.5rem;
+                padding: 3.5rem 4rem;
+
+                h2 {
+                    color: $white;
+                    margin-bottom: 1.5rem;
+
+
+                    .header-anchor {
+                        display: none;
+                    }
+                }
+
+                p {
+                    color: $white;
+                }
+
+                .btn {
+                    width: 18rem;
+                    justify-content: center;
+                    margin: 1rem 0;
+
+                    &:focus,
+                    &:focus,
+                    &:hover {
+                        color: $medium-brown;
+                    }
+                }
+            }
+
+        }
+    }
+
+    .front-page-demoshop {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: $front-page-padding;
+        padding-top: 4rem;
+        margin-bottom: 4rem;
+        width: 100%;
+        height: 22.5rem;
+        background-color: $dark-brown;
+        text-decoration: none;
+
+        &:hover,
+        &:focus {
+            .front-page-demoshop-link {
+                background-color: $white;
+                color: $brown;
+
+                .h3 {
+                    color: $brown;
+                }
+
+            }
+        }
+
+        &:after {
+            display: none;
+            content: none;
+        }
+
+        .front-page-demoshop-text {
+            display: flex;
+            flex-direction: column;
+            margin-bottom: 2rem;
+            max-width: $front-page-max-width;
+            width: 100%;
+
+            .h2 {
+                color: $white;
+
+                span {
+                    color: $yellow;
+                }
+            }
+
+            .demoshop-text-description {
+                color: $white;
+                width: 45%;
+                height: 4.5rem;
+            }
+        }
+
+        .front-page-demoshop-link {
+            display: flex;
+            position: relative;
+            color: $white;
+            text-decoration: none;
+            background-color: $medium-brown;
+            align-items: center;
+            height: 4.625rem;
+            border-radius: 2px;
+            box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.15);
+            max-width: $front-page-max-width;
+            width: 100%;
+
+            .demoshop-link-img {
+                display: flex;
+                align-items: center;
+                position: absolute;
+                bottom: -1rem;
+                right: 3%;
+
+                .demoshop-link-img-web {
+                    width: 26.5rem;
+                    height: 15.125rem;
+                    border-radius: 2px;
+                    box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.15);
+                }
+
+                .demoshop-link-img-mobile {
+                    height: 15.125rem;
+                    border-radius: 2px;
+                    box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.15);
+                    margin-right: 1rem;
+                }
+            }
+
+
+
+            .h3 {
+                color: $white;
+                padding-right: 1rem;
+                padding-left: 1.5rem;
+                margin: 0;
+            }
+        }
+    }
+
+
+}

data/_assets/scss/heading.scss

@@ -0,0 +1,79 @@
+@import 'colors.scss';
+
+.heading-line {
+    position: relative;
+
+    &:after {
+        content: "";
+        position: absolute;
+        bottom: -0.75rem;
+        left: 0;
+        width: 4rem;
+        height: 4px;
+        background-color: $yellow;
+        border-radius: 0.625rem;
+    }
+
+    &.heading-line-white {
+        &:after {
+            background-color: $white;
+        }
+    }
+
+    &.heading-line-green {
+        &:after {
+            background-color: $brand-success;
+        }
+    }
+
+    &.heading-line-sdk {
+        &:after {
+            background-color: $turquoise;
+        }
+    }
+
+    &.heading-line-module {
+        &:after {
+            background-color: $card-pink;
+        }
+    }
+
+    &.heading-line-long {
+        &:after {
+            width: 7rem;
+        }
+    }
+}
+
+
+h1>a.header-anchor,
+h2>a.header-anchor,
+h3>a.header-anchor,
+h4>a.header-anchor,
+h5>a.header-anchor,
+h6>a.header-anchor {
+    color: #ebf8f2;
+    text-decoration: none;
+}
+
+h1:hover>a.header-anchor,
+h2:hover>a.header-anchor,
+h3:hover>a.header-anchor,
+h4:hover>a.header-anchor,
+h5:hover>a.header-anchor,
+h6:hover>a.header-anchor {
+    color: #8acdc3;
+}
+
+h1>a.header-anchor:hover,
+h2>a.header-anchor:hover,
+h3>a.header-anchor:hover,
+h4>a.header-anchor:hover,
+h5>a.header-anchor:hover,
+h6>a.header-anchor:hover {
+    color: #257886;
+}
+
+a.header-anchor::before {
+    content: '#';
+}

data/_assets/scss/paragraph-highlight.scss

@@ -0,0 +1,8 @@
+@import 'colors.scss';
+
+.paragraph-highlight {
+    margin: 2rem 0;
+    padding: 0.25rem 0;
+    padding-left: 1.5rem;
+    border-left: 2px solid $yellow;
+}

data/_assets/scss/sidebar.scss

@@ -0,0 +1,72 @@
+@import 'colors.scss';
+
+.sidebar {
+    .sidebar-nav {
+        .sidebar-header {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            margin-bottom: 2.5rem;
+            margin-top: 2rem;
+            text-decoration: none;
+            color: #512b2b;
+
+            img {
+                width: 120px;
+                margin-top: -1rem;
+            }
+
+            span {
+                color: #fdc129;
+            }
+
+            .sidebar-header-text {
+                margin-top: -0.5rem;
+                font-size: 1.125rem;
+                line-height: 1.5rem;
+                color: $black;
+                font-family: "Akkurat Mono", monospace;
+                white-space: nowrap;
+            }
+        }
+
+        .main-nav-ul {
+            .nav-group {
+                .nav-ul {
+                    .nav-subgroup {
+                        &.active {
+                            >.nav-subgroup-heading {
+                                a {
+                                    color: #257886;
+                                    font-weight: 700;
+                                }
+                            }
+                        }
+
+                        .nav-subgroup-heading {
+                            padding: 0;
+
+                            i {
+                                padding: 0.5rem 0;
+                            }
+
+                            a {
+                                color: #512b2b;
+                                padding: .5rem;
+                                font-size: 1rem;
+                                line-height: 1.5rem;
+                                text-decoration: none;
+                                width: 100%;
+
+                                &:hover,
+                                &:focus {
+                                    color: #257886;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}