chore: Style website (#1783)

* chore: Style code blocks

* chore: fix codeblocks causing the other content to extend beyond the viewport

Author: joeyguerra

docs/assets/stylesheets/application.css

@@ -127,7 +127,10 @@ mark {
     font-style: italic;
     font-weight: bold;
 }
-
+code {
+    white-space: pre-wrap;
+    word-break: break-word;
+}
 pre,
 code,
 kbd,
@@ -136,17 +139,6 @@ samp {
     font-size: 1em;
 }
 
-pre {
-    white-space: pre;
-    white-space: pre-wrap;
-    word-wrap: normal;
-    padding: 16px;
-    overflow: auto;
-    line-height: 1.45;
-    background-color: #f7f7f7;
-    border-radius: 3px;
-}
-
 q {
     quotes: none;
 }
@@ -441,7 +433,6 @@ header.clearfix h1 {
     color: #333;
     font-family: Politica;
     font-size: 72px;
-    letter-spacing: -5px;
     margin: 0 12px;
     position: relative;
     text-transform: uppercase;
@@ -453,7 +444,7 @@ header.clearfix h1 span {
     font-family: 'HandOfSeanRegular';
     font-size: 14px;
     font-weight: normal;
-    left: 144px;
+    left: 156px;
     letter-spacing: -1px;
     position: absolute;
     top: 32px;
@@ -583,7 +574,7 @@ header.clearfix p {
 .about {
     color: #666;
     line-height: 24px;
-    padding: 1rem;
+    padding: 1rem 5rem;
     width: 100%;
     display: flex;
     flex-direction: row;
@@ -601,6 +592,7 @@ header.clearfix p {
 @media (max-width: 920px) {
     .about {
         flex-direction: column;
+        padding: 1rem 3rem;
     }
     .about aside,
     .about article {
@@ -710,7 +702,6 @@ header.clearfix p {
     display: flex;
     padding: 0 2rem;
 }
-
 .docs .container .main h2 {
     border-bottom: 1px solid #eee;
     padding-bottom: 0.8rem;

docs/docs.md

@@ -48,6 +48,7 @@ Hubot>
 Changing your Hubot instances name will reduce confusion down the road, so set the `--name` argument in the `hubot` command:
 
 ```json
+
 {
 ...
     "scripts": {

docs/layouts/docs.html

@@ -15,6 +15,8 @@
         <meta property="og:url" content="{{ permalink }}" />
         <meta property="og:site_name" content="Hubot" />
         <meta property="og:image" content="https://hubotio.github.io/hubot/assets/images/screenshots/dangerroom-full.png" />
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/default.min.css">
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script>
         <script type="application/ld+json">
             {"image":"https://hubotio.github.io/hubot/assets/images/screenshots/dangerroom-full.png","headline":"Hubot","@type":"WebSite","publisher":{"@type":"Organization","logo":{"@type":"ImageObject","url":"https://hubotio.github.io/hubot/assets/images/screenshots/dangerroom-full.png"}},"url":"https://hubotio.github.io/hubot/","description":"Hubot is your friendly robot sidekick. Install him in your company to dramatically improve employee efficiency.","name":"Hubot","@context":"https://schema.org"}
         </script>
@@ -55,7 +57,7 @@ <h1>Hubot Documentation</h1>
                     </ul>
                 </nav>
                 <main>
-                    {{> @partial-block }}
+{{> @partial-block }}
                 </main>
             </section>
         </div>
@@ -64,4 +66,5 @@ <h1>Hubot Documentation</h1>
             <p class="right">Built with &lt;3 by friends of Hubot</p>
         </footer>
     </body>
+    <script>hljs.highlightAll()</script>
 </html>