Add support for wide docs pages

wiremock · Sep 28, 2023 · 09148db · 09148db
1 parent fa31fd5
commit 09148db
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -121,6 +121,7 @@ $medium: 768px;
 $medium-wide: 900px;
 $large: 1024px;
 $x-large: 1280px;
+$x2-large: 1920px;
 
 /*
    Grid