From 09148db83bbe0496cd43bb7bf06758719e844156 Mon Sep 17 00:00:00 2001
From: Oleg Nenashev <o.v.nenashev@gmail.com>
Date: Thu, 28 Sep 2023 13:52:45 +0200
Subject: [PATCH] Add support for wide docs pages

---
 _docs/index.html      |  3 ++-
 _layouts/docs.html    |  2 +-
 _sass/_page.scss      | 13 +++++++++++++
 _sass/_variables.scss |  1 +
 4 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/_docs/index.html b/_docs/index.html
index df0ef586..9ace5128 100644
--- a/_docs/index.html
+++ b/_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;
diff --git a/_layouts/docs.html b/_layouts/docs.html
index cb81c121..914017ef 100644
--- a/_layouts/docs.html
+++ b/_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 %}
diff --git a/_sass/_page.scss b/_sass/_page.scss
index f2f86a9e..84b87541 100644
--- a/_sass/_page.scss
+++ b/_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,
diff --git a/_sass/_variables.scss b/_sass/_variables.scss
index eb70c704..229c3328 100644
--- a/_sass/_variables.scss
+++ b/_sass/_variables.scss
@@ -121,6 +121,7 @@ $medium: 768px;
 $medium-wide: 900px;
 $large: 1024px;
 $x-large: 1280px;
+$x2-large: 1920px;
 
 /*
    Grid