swedbank-pay-design-guide-jekyll-theme 1.9.0 → 1.9.5

data/_sass/card.scss

@@ -59,6 +59,7 @@
         display: flex;
         flex-direction: column;
         margin-bottom: 1.25rem;
+        font-size: 1rem;
 
         .h4 {
             margin-top: 0;

data/_sass/front-page.scss

@@ -1,8 +1,9 @@
 @import 'colors.scss';
 @import 'fonts.scss';
+@import 'breakpoints.scss';
 
 $front-page-padding: 0 4rem;
-$front-page-max-width: 1280px;
+$front-page-max-width: 1312px;
 
 @mixin row-cards {
     >[class*='col-'] {
@@ -49,77 +50,87 @@ $front-page-max-width: 1280px;
 }
 
 .front-page {
+    margin: 3rem 2rem 0;
     position: relative;
     display: flex;
     flex-direction: column;
     align-items: center;
+    
+    .front-page-top {
+        position: relative;
+        padding: 4rem 4rem 2rem;
+        width: 100%;
+        margin-bottom: 3rem;
+        max-width: 1432px;
+        background-color: $dark-brown;
+        z-index: 0;
+        border-radius: 1rem;
+        min-height: 33rem;
 
-    .front-page-container {
-        max-width: $front-page-max-width;
-        margin: $front-page-padding;
-
-        .front-page-top {
-            padding-top: 4rem;
-            width: 100%;
+        .front-page-hero {
+            position: relative;
+            max-width: 38rem;
             margin-bottom: 3rem;
+            z-index: 1;
 
-            &:before {
-                content: "";
-                display: block;
-                position: absolute;
-                top: 0;
-                left: 0;
-                background-color: $dark-brown;
-                width: 100%;
-                height: 34rem;
-                z-index: 0;
+            h3 {
+                color: $yellow;
+                font-family: $headline;
+                margin-bottom: 0;
             }
 
-            .front-page-hero {
-                position: relative;
-                max-width: 35rem;
-                margin-bottom: 3.5rem;
-                z-index: 1;
+            p {
+                color: $white;
+                font-size: 1.125rem;
+            }
 
-                h3 {
-                    color: $yellow;
-                    font-family: $headline;
-                    margin-bottom: 0;
-                }
+            .front-page-hero-name {
+                font-family: $mono;
+                font-weight: bold;
+                font-size: 2rem;
+                color: $yellow;
+                margin-bottom: 1rem;
 
-                p {
+                span {
                     color: $white;
-                    font-size: 1.125rem;
                 }
+            }
+
+        }
 
-                .front-page-hero-name {
-                    font-family: $mono;
-                    font-weight: bold;
-                    font-size: 2rem;
-                    color: $yellow;
-                    margin-bottom: 1rem;
+        .front-page-intro-cards {
+            h2 {
+                color: $white;
 
-                    span {
-                        color: $white;
-                    }
+                .header-anchor {
+                    display: none;
                 }
+            }
 
+            .row {
+                @include row-cards();
             }
+        }
 
+        @media screen and (min-width: $breakpoint-xxl) {
+            margin-bottom: 10rem;
+            
             .front-page-intro-cards {
-                h2 {
-                    color: $white;
-
-                    .header-anchor {
-                        display: none;
-                    }
-                }
-
-                .row {
-                    @include row-cards();
-                }
+                position: absolute;
+                left: 0;
+                width: 100%;
+                padding: 0 4rem;
             }
         }
+    }
+    .front-page-container {
+        max-width: $front-page-max-width;
+        margin: $front-page-padding;
+        position: relative;
+
+        @media screen and (max-width: $breakpoint-md) {
+            margin: 0;
+        }
 
         .front-page-merchants {
             margin-bottom: 3.75rem;
@@ -221,19 +232,7 @@ $front-page-max-width: 1280px;
         height: 22.5rem;
         background-color: $dark-brown;
         text-decoration: none;
-
-        &:hover,
-        &:focus {
-            .front-page-demoshop-link {
-                background-color: $white;
-                color: $brown;
-
-                .h3 {
-                    color: $brown;
-                }
-
-            }
-        }
+        border-radius: 1rem;
 
         &:after {
             display: none;
@@ -249,17 +248,29 @@ $front-page-max-width: 1280px;
 
             .h2 {
                 color: $white;
-
-                span {
-                    color: $yellow;
-                }
             }
 
             .demoshop-text-description {
                 color: $white;
-                width: 45%;
-                height: 4.5rem;
+                width: 40%;
+                min-height: 4.5rem;
+                font-size: 1rem;
+
             }
+            
+        }
+
+        @media screen and (max-width: $breakpoint-md) {
+            padding-top: 3rem;
+            height: 18rem;
+
+            .front-page-demoshop-text {
+                .demoshop-text-description {
+                    width: 100%;
+                    min-height: 2.25rem;
+                }
+            }
+
         }
 
         .front-page-demoshop-link {
@@ -274,6 +285,21 @@ $front-page-max-width: 1280px;
             box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.15);
             max-width: $front-page-max-width;
             width: 100%;
+            cursor: pointer;
+
+            a::after{
+                content: '';
+            }
+            
+            &:hover,
+            &:focus {
+                background-color: $white;
+                color: $brown;
+            
+                .h3 {
+                    color: $brown;
+                }
+            }
 
             .demoshop-link-img {
                 display: flex;
@@ -281,6 +307,7 @@ $front-page-max-width: 1280px;
                 position: absolute;
                 bottom: -1rem;
                 right: 3%;
+                pointer-events: none;
 
                 .demoshop-link-img-web {
                     width: 26.5rem;
@@ -297,8 +324,6 @@ $front-page-max-width: 1280px;
                 }
             }
 
-
-
             .h3 {
                 color: $white;
                 padding-right: 1rem;
@@ -306,6 +331,18 @@ $front-page-max-width: 1280px;
                 margin: 0;
             }
         }
+
+        @media screen and (min-width: $breakpoint-xxl) {
+            .front-page-demoshop-text {
+                margin-bottom: 1rem;
+            }
+
+            .front-page-demoshop-link {
+                .demoshop-link-img {
+                    bottom: -2rem;
+                }
+            }
+        }
     }
 
 

data/_sass/sidebar.scss

@@ -6,14 +6,13 @@
             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;
+                margin-top: 1.5rem;
+                margin-bottom: 1.25rem;
             }
 
             span {
@@ -30,6 +29,37 @@
             }
         }
 
+        .search-container {
+            box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.15);
+            border-radius: 0.125rem;
+
+            &:focus-within {
+                outline: -webkit-focus-ring-color auto 0.5px;
+            }
+
+            .search-input {
+                color: $medium-brown;
+                font-size: 0.875rem;
+                border: none;
+                padding: 0.375rem;
+                
+                &:focus {
+                    color: $brown;
+                    outline: none
+                }
+            }
+
+            i {
+                display: block;
+                color: $brown;
+
+                &:hover {
+                    color: $turquoise-link;
+                }
+            }
+
+        }
+
         .main-nav-ul {
             .nav-group {
                 .nav-ul {

data/_sass/swedbank-pay-design-guide-theme.scss

@@ -1,11 +1,13 @@
 @import 'colors.scss';
 @import 'fonts.scss';
 @import 'variables.scss';
+@import 'breakpoints.scss';
 
 @import 'card.scss';
 @import 'code-view.scss';
 @import 'front-page.scss';
 @import 'heading.scss';
+@import 'accordion-table.scss';
 @import 'paragraph-highlight.scss';
 @import 'sidebar.scss';
 @import 'title-header.scss';
@@ -17,8 +19,11 @@ img {
     max-width: 100%;
 }
 
-.table {
+body {
+    font-size: 1.125rem;
+}
 
+.table {
     th,
     td {
         >.material-icons {
@@ -287,4 +292,20 @@ a[href ^='https://']:not([href *='{{ site.url }}']):after {
             font-size: 1rem !important;
         }
     }
+
+    .github {
+        opacity: .5;
+        position: absolute;
+        right: 4rem;
+        top: 4rem;
+        transition: opacity .3s;
+    }
+
+    a.github:after {
+        display: none;
+    }
+
+    a.github:hover {
+        opacity: 1;
+    }
 }

data/_sass/title-header.scss

@@ -32,6 +32,9 @@
                 margin-right: 0.5rem;
             }
         }
+        a {
+            color: #43d0dd;
+        }
     }
 
 

data/_sass/variables.scss

@@ -1 +1 @@
-$max-width: 704px;
+$max-width: 880px;

data/assets/css/pygments-autumn.css

@@ -36,7 +36,7 @@
 .highlight .nf { color: #00aa00 } /* Name.Function */
 .highlight .nn { color: #00aaaa; text-decoration: underline } /* Name.Namespace */
 .highlight .nt { color: #1e90ff; font-weight: bold } /* Name.Tag */
-.highlight .nv { color: #aa0000 } /* Name.Variable */
+.highlight .nv { color: #e07088 } /* Name.Variable */
 .highlight .ow { color: #0000aa } /* Operator.Word */
 .highlight .w { color: #bbbbbb } /* Text.Whitespace */
 .highlight .mb { color: #009999 } /* Literal.Number.Bin */

data/lib/gem_version.rb

@@ -4,7 +4,7 @@ module Gem
   # Gem Specification
   class Specification
     def self.gem_version
-      '1.9.0'
+      '1.9.5'
     end
   end
 end

data/lib/regex_capture_filter.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+require 'liquid'
+
+# Jekyll
+module Jekyll
+  # Adds a 'regex_capture' filter to Liquid. Performs a regular expression match
+  # on the provided string and returns the capture as an array. Example usage:
+  # {{ html | regex_capture: 'id="([^"]+)"' | first }}
+  module RegexCaptureFilter
+    def regex_capture(str, regex)
+      match = /#{regex}/.match(str)
+      match ? match.captures : []
+    end
+  end
+end
+
+Liquid::Template.register_filter(Jekyll::RegexCaptureFilter)

data/lib/sidebar.rb

@@ -1,4 +1,4 @@
-# frozen_string_literal: false
+# frozen_string_literal: true
 
 require 'jekyll'
 require 'nokogiri'
@@ -14,35 +14,27 @@ module SwedbankPay
     class << self
       attr_reader :pages
 
-      def init
-        @pages_hash = {}
-      end
-
-      def pre_render(jekyll_page)
-        sidebar_page = SidebarPage.new(jekyll_page)
-        @pages_hash[sidebar_page.path] = sidebar_page
+      def pre_render(site)
+        Jekyll.logger.debug('           Sidebar: pre_render')
+        @parser = SidebarParser.new(site)
+        @pages = SidebarTreeBuilder.new(@parser.pages)
+        Jekyll.logger.debug("           Sidebar: #{@pages.inspect}")
       end
 
-      def post_write(site)
-        parser = SidebarParser.new(site)
-        pages = parser.parse(@pages_hash)
-        @pages = SidebarTreeBuilder.new(pages)
-        Jekyll.logger.debug("           Sidebar: #{@pages.inspect}")
-        renderer = SidebarRenderer.new
-        renderer.render(@pages)
+      def post_write
+        @sidebar_renderer = SidebarRenderer.new(@pages)
+        @parser.parse(@pages)
+        Jekyll.logger.debug('           Sidebar: post_write')
+        @sidebar_renderer.render
       end
     end
   end
 end
 
-SwedbankPay::Sidebar.init
-
 Jekyll::Hooks.register :site, :pre_render do |site, _|
-  site.pages.each do |page|
-    SwedbankPay::Sidebar.pre_render page
-  end
+  SwedbankPay::Sidebar.pre_render site
 end
 
-Jekyll::Hooks.register :site, :post_write do |site|
-  SwedbankPay::Sidebar.post_write site
+Jekyll::Hooks.register :site, :post_write do
+  SwedbankPay::Sidebar.post_write
 end