Merge pull request #35 from htmlcsstoimage/jumbo

Jumbo Docs & Cleanup

Author: mscoutermarsh

_config.yml

@@ -92,7 +92,7 @@ aux_links:
   "Get an API Key":
     - "https://htmlcsstoimage.com"
   "Demo":
-    - "https://htmlcsstoimage.com/demo"
+    - "https://htmlcsstoimage.com/#demo"
 
 # Exclude from processing.
 # The following items will not be processed, by default.

_includes/additional_parameters.md

@@ -10,7 +10,12 @@
 | **block_consent_banners**   | `Boolean` | When set to `true`, automatically blocks cookie consent banners and popups on websites. Most useful for URL screenshots. [Learn more](/guides/advanced/blocking-cookie-banners/). |
 | **viewport_width**   | `Integer` | Set the width of Chrome's viewport. This will disable automatic cropping. Both height and width parameters must be set if using either. [Learn more](/getting-started/setting-height-and-width/). |
 | **viewport_height**   | `Integer` | Set the height of Chrome's viewport. This will disable automatic cropping. Both height and width parameters must be set if using either. [Learn more](/getting-started/setting-height-and-width/). |
+| **viewport_mobile** | `Boolean` | Set Chrome's viewport to emulate a mobile device. |
+| **viewport_landscape**| `Boolean` | Set Chrome's viewport to landscape mode. |
+| **viewport_touch** | `Boolean` | Set Chrome's viewport to support touch events. |
 | **color_scheme**   | `String` | Set Chrome to render in `light` or `dark` mode. Affects websites using `prefers-color-scheme`. [Learn more](/parameters/color_scheme/). |
 | **timezone**   | `String` | Render your image with Chrome set to a specified timezone. Use IANA timezone identifiers like `America/New_York`. [Learn more](/parameters/timezone/). |
 | **disable_twemoji**   | `Boolean` | Twemoji is used by default to render emoji consistently. Set to `true` to use native emoji fonts instead. |
 | **proxy_id**   | `String` | Route the render's outbound traffic through one of your [HTTP proxies](/guides/advanced/proxies/) configured in the dashboard. Available on the 10k images/month plan or higher. |
+| **jumbo_max_width**   | `Integer` | Maximum output width when rendering a [jumbo image](/guides/advanced/jumbo-images/) (up to 80,000px). Must be set together with `jumbo_max_height`. Consumes extra renders. |
+| **jumbo_max_height**   | `Integer` | Maximum output height when rendering a [jumbo image](/guides/advanced/jumbo-images/) (up to 80,000px). Must be set together with `jumbo_max_width`. Consumes extra renders. |

_includes/intro.md

@@ -5,7 +5,7 @@
 Generate a png, jpg or webp images with {{ include.language }}. Renders exactly like Google Chrome.
 {: .fs-6 .fw-300 }
 
-[Live demo](https://htmlcsstoimage.com/demo){: .btn .btn-primary .fs-5 .mb-4 .mb-md-0 .mr-2 target="_blank" }
+[Live demo](https://htmlcsstoimage.com/#demo){: .btn .btn-primary .fs-5 .mb-4 .mb-md-0 .mr-2 target="_blank" }
 [Get an API Key](https://htmlcsstoimage.com){: .btn .fs-5 .mb-4 .mb-md-0 target="_blank" }
 <hr>
 

_sass/custom/custom.scss

@@ -314,7 +314,7 @@ img {
 
 @media (min-width: 1200px) {
   .main {
-    max-width: none !important;
+    max-width: 1200px !important;
   }
 
   .main-content-wrap {
@@ -335,7 +335,7 @@ img {
 .content-with-toc > .main-content {
   flex: 1;
   min-width: 0;
-  max-width: 750px;
+  
 
   @media (max-width: 800px) {
     max-width: 100%;

_sass/layout.scss

@@ -20,6 +20,7 @@
 }
 
 .main {
+  flex-grow: 1;
   @include mq(md) {
     position: relative;
     max-width: $content-width;

changelog.md

@@ -366,7 +366,7 @@ August 16, 2020
 We've rebuilt the live demo. Now you can preview your HTML/CSS as you edit it. Then click the *image* button to see it converted into an image.
 This makes it much easier to prototype your images inside a browser.
 
-- [HTML/CSS to Image Demo](https://htmlcsstoimage.com/demo)
+- [HTML/CSS to Image Demo](https://htmlcsstoimage.com/#demo)
 
 <hr>
 ### Ruby Client released

example-code/c.md

@@ -14,7 +14,7 @@ description: >-
 Generate png, jpg or webp images with C# and .NET. Renders exactly like Google Chrome.
 {: .fs-6 .fw-300 }
 
-[Live demo](https://htmlcsstoimage.com/demo){: .btn .btn-primary .fs-5 .mb-4 .mb-md-0 .mr-2 target="_blank" }
+[Live demo](https://htmlcsstoimage.com/#demo){: .btn .btn-primary .fs-5 .mb-4 .mb-md-0 .mr-2 target="_blank" }
 [Get an API Key](https://htmlcsstoimage.com){: .btn .fs-5 .mb-4 .mb-md-0 target="_blank" }
 <hr>
 

example-code/curl.md

@@ -14,7 +14,7 @@ description: >-
 Generate a png, jpg or webp images from your terminal with cURL.
 {: .fs-4 .fw-300 }
 
-[Live demo](https://htmlcsstoimage.com/demo){: .btn .btn-primary .fs-5 .mb-4 .mb-md-0 .mr-2 target="_blank" }
+[Live demo](https://htmlcsstoimage.com/#demo){: .btn .btn-primary .fs-5 .mb-4 .mb-md-0 .mr-2 target="_blank" }
 [Get an API Key](https://htmlcsstoimage.com){: .btn .fs-5 .mb-4 .mb-md-0 target="_blank" }
 <hr>
 

example-code/google-apps-script.md

@@ -14,7 +14,7 @@ description: >-
 Generate a png, jpg or webp images with Google Apps Script.
 {: .fs-4 .fw-300 }
 
-[Live demo](https://htmlcsstoimage.com/demo){: .btn .btn-primary .fs-5 .mb-4 .mb-md-0 .mr-2 target="_blank" }
+[Live demo](https://htmlcsstoimage.com/#demo){: .btn .btn-primary .fs-5 .mb-4 .mb-md-0 .mr-2 target="_blank" }
 [Get an API Key](https://htmlcsstoimage.com){: .btn .fs-5 .mb-4 .mb-md-0 target="_blank" }
 <hr>
 

example-code/index.md

@@ -14,7 +14,7 @@ description: >-
 To get started quickly, take a look at our example code for generating images.
 {: .fs-4 .fw-300 }
 
-[Live demo](https://htmlcsstoimage.com/demo){: .btn .btn-primary .fs-5 .mb-4 .mb-md-0 .mr-2 }
+[Live demo](https://htmlcsstoimage.com/#demo){: .btn .btn-primary .fs-5 .mb-4 .mb-md-0 .mr-2 }
 [Get an API Key](https://htmlcsstoimage.com){: .btn .fs-5 .mb-4 .mb-md-0 }
 
 {% include hint.md title="Using an AI coding assistant?" text="Skip writing code entirely. Connect our [MCP Server](/integrations/mcp/) to generate images directly from Cursor or Claude Code." %}