Merge pull request #186 from oleg-nenashev/wide-render

Add support for wide-screen docs landings and spec visualization

_docs/index.html

@@ -5,6 +5,7 @@
 crumbtitle: "Documentation"
 toc_rank: 1001
 permalink: /docs/
+docs-wide: true
 description: > 
     All of WireMock’s features are accessible via its REST (JSON) interface and its Java API.
     Additionally, stubs can be configured via JSON files. Read the full doc here.
@@ -15,7 +16,7 @@
         display: grid;
         margin-left: auto;
         margin-right: auto;
-        max-width: 61rem;
+        max-width: 160rem;
         gap: 1rem;
         grid-template-columns: repeat(auto-fill, 15rem);
         vertical-align: middle;

_layouts/docs.html

@@ -80,7 +80,7 @@
 
   </style>
 
-  <article class="page" itemscope itemtype="http://schema.org/CreativeWork">
+  <article class="{% if page.docs-wide %}page-wide{% else %}page{% endif %}" itemscope itemtype="http://schema.org/CreativeWork">
     {% if page.seo_title %}<meta itemprop="headline" content="{{ page.seo_title | markdownify | strip_html | strip_newlines | escape_once }}">{% endif %}
     {% if page.excerpt %}<meta itemprop="description" content="{{ page.excerpt | markdownify | strip_html | strip_newlines | escape_once }}">{% endif %}
     {% if page.date %}<meta itemprop="datePublished" content="{{ page.date | date: "%B %d, %Y" }}">{% endif %}

_sass/_page.scss

@@ -14,6 +14,10 @@
     @include breakpoint($x-large) {
         max-width: $x-large;
     }
+
+    @include breakpoint($x2-large) {
+        max-width: $x2-large;
+    }
 }
 
 .custom-doc-wrapper {
@@ -38,6 +42,11 @@
     }
 }
 
+.page-wide {
+    @extend .page;
+    @include suffix(0 of 12);
+}
+
 .page__title {
     margin-top: 0;
     line-height: 1;
@@ -142,6 +151,10 @@
             @include breakpoint($x-large) {
                 max-width: $x-large;
             }
+
+            @include breakpoint($x2-large) {
+                max-width: $x2-large;
+            }
         }
 
         .page__title,

_sass/_splash.scss

@@ -11,10 +11,21 @@
         border: none !important;
     }
 
-    width: 950px;
+    @include breakpoint($large) {
+        padding: 50px 0;
+    }
+
+    @include breakpoint($x-large) {
+        width: $x-large;
+    }
+
+    @include breakpoint($x2-large) {
+        width: $x2-large;
+    }
+
     margin-left: auto;
     margin-right: auto;
-    padding: 50px 0;
+
 
     h1 {
         font-family: "Ubuntu";

_sass/_variables.scss

@@ -121,6 +121,7 @@ $medium: 768px;
 $medium-wide: 900px;
 $large: 1024px;
 $x-large: 1280px;
+$x2-large: 1920px;
 
 /*
    Grid