Fix scrrenshots

Author: shalvah

README.md

@@ -6,7 +6,7 @@
 Pastel is a PHP tool to generate beautiful documentation from Markdown. [Here's what the output looks like.](https://knuckleswtf.github.io/pastel)
 
 <p align="center">
-  <img src="./screenshots/pastel-screenshot-2.png">
+  <img src="./screenshots/pastel-screenshot-1.png">
 </p>
 
 This project is a fork of [Documentarian](https://github.com/knuckleswtf/pastel), which is itself a PHP port of [Slate](https://github.com/slatedocs/slate), the API documentation tool.

docs/css/style.css

@@ -964,4 +964,22 @@ html {
 
 .badge.badge-grey {
     background-color: grey;
+}
+
+.fancy-heading-panel {
+    background-color: lightgrey;
+    border-radius: 5px;
+    padding-left: 5px !important;
+    padding-top: 5px !important;
+    padding-bottom: 5px !important;
+    margin-left: 25px;
+    margin-right: 10px;
+    width: 47%;
+}
+
+@media screen and (max-width: 700px) {
+    .fancy-heading-panel {
+        width: 95%;
+    }
+
 }

docs/index.html

@@ -45,15 +45,15 @@
                             <li><a href='https://github.com/knuckleswtf/pastel'>Documentation powered by Pastel 🎨</a></li>
                     </ul>
             <ul class="toc-footer" id="last-updated">
-            <li>Last updated: April 10 2020</li>
+            <li>Last updated: April 11 2020</li>
         </ul>
 </div>
 <div class="page-wrapper">
     <div class="dark-box"></div>
     <div class="content">
         <h1>Introduction</h1>
 <p>Welcome to the Kittn API! You can use our API to can get information on various cats, kittens, and breeds in our database.</p>
-<p>As you scroll, you'll see code examples for working with the API in Bash, Ruby, Python, and JavaScript in the dark area to the right (or as part of the content on mobile), and you can switch the programming language of the examples with the tabs in the top right (or from the nav menu at the top left on mobile).</p>
+<p>As you scroll, you'll see code examples for working with the API in Bash, PHP, Python, and JavaScript in the dark area to the right (or as part of the content on mobile), and you can switch the programming language of the examples with the tabs in the top right (or from the nav menu at the top left on mobile).</p>
 <p>This example API documentation page was borrowed from <a href="https://github.com/slatedocs/slate">Slate</a> and generated with <a href="https://github.com/knuckleswtf/pastel">Pastel</a>. Feel free to edit it and use it as a base for your own API's documentation.</p>
 <h1>Authentication</h1>
 <blockquote>
@@ -127,7 +127,7 @@ <h2>Get All Kittens</h2>
 <p>This endpoint retrieves all kittens.</p>
 <h3>HTTP Request</h3>
 <p><small class="badge badge-green">GET</small> <strong><code>http://example.com/api/kittens</code></strong></p>
-<h3>Query Parameters</h3>
+<h4 class="fancy-heading-panel"><b>Query Parameters</b></h4>
 <p>
     <code><b>include_cats</b></code>&nbsp; <i>Default: <code>false</code></i>    
     <br>
@@ -170,7 +170,7 @@ <h2>Get a Specific Kitten</h2>
 <aside class="warning">Inside HTML code blocks like this one, you can't use Markdown, so use <code>&lt;code&gt;</code> blocks to denote code.</aside>
 <h3>HTTP Request</h3>
 <p><small class="badge badge-green">GET</small> <strong><code>http://example.com/kittens/&lt;ID&gt;</code></strong></p>
-<h3>URL Parameters</h3>
+<h4 class="fancy-heading-panel"><b>URL Parameters</b></h4>
 <p>
     <code><b>ID</b></code>
     <br>
@@ -202,7 +202,7 @@ <h2>Delete a Specific Kitten</h2>
 <p>This endpoint deletes a specific kitten.</p>
 <h3>HTTP Request</h3>
 <p><small class="badge badge-red">DELETE</small> <strong><code>http://example.com/kittens/&lt;ID&gt;</code></strong></p>
-<h3>URL Parameters</h3>
+<h4 class="fancy-heading-panel"><b>URL Parameters</b></h4>
 <p>
     <code><b>ID</b></code>
     <br>

screenshots/fancy-headings.png

@@ -141,7 +141,7 @@ This endpoint retrieves all kittens.
 
 <small class="badge badge-green">GET</small> **`http://example.com/api/kittens`**
 
-### Query Parameters
+<h4 class="fancy-heading-panel"><b>Query Parameters</b></h4>
 <p>
     <code><b>include_cats</b></code>&nbsp; <i>Default: <code>false</code></i>    
     <br>
@@ -205,7 +205,7 @@ This endpoint retrieves a specific kitten.
 
 <small class="badge badge-green">GET</small> **`http://example.com/kittens/<ID>`**
 
-### URL Parameters
+<h4 class="fancy-heading-panel"><b>URL Parameters</b></h4>
 <p>
     <code><b>ID</b></code>
     <br>
@@ -256,7 +256,7 @@ This endpoint deletes a specific kitten.
 
 <small class="badge badge-red">DELETE</small> **`http://example.com/kittens/<ID>`**
 
-### URL Parameters
+<h4 class="fancy-heading-panel"><b>URL Parameters</b></h4>
 <p>
     <code><b>ID</b></code>
     <br>