Minor changes

docs/layouts/default.js

@@ -134,10 +134,17 @@ module.exports = async ({ title, content, head }) => html`
       margin-top: 20px;
     }
 
+    img {
+      border-radius: 10px;
+    }
+
     .code {
       background-color: black; 
       color: #76FF03; 
       padding: 2px;
+      padding-left: 4px;
+      padding-right: 4px;
+      border-radius: 5px;
     }
 
     .badge {
@@ -148,6 +155,12 @@ module.exports = async ({ title, content, head }) => html`
       margin-left: 10px;
       border-radius: 5px;
     }
+
+    .tip {
+      border-left: 3px solid white; 
+      border-radius: 3px; 
+      padding-left: 20px;
+    }
   </style>
   <hr style="margin-top: 40px;">
   <footer>

docs/pages/docs/advanced-setup/index.js

@@ -12,7 +12,7 @@ const page = () => html`
     A <code class="code">layout</code> is a template that contains our application shell which our <code class="code">page</code>
     templates get injected into. Create a folder called "layouts", this is where our layouts will be stored.
   </p>
-  <small class="code">layouts/default.js</small>
+  <small>layouts/default.js</small>
   <pre>
     <code class="lang-javascript">
       module.exports = ({ title, content }) => &#96;
@@ -36,7 +36,7 @@ const page = () => html`
   <p>
     A <code class="code">page</code> is a template that contains your page content. All page templates are stored in the pages folder.
   </p>
-  <small class="code">pages/index.js</small>
+  <small>pages/index.js</small>
   <pre>
     <code class="lang-javascript">
       const page = ({ text }) => &#96;
@@ -73,6 +73,7 @@ const page = () => html`
       Build time: 49.934ms
     </code>
   </pre>
+  <p class="tip">Use the <code class="code">--dev</code> to enable builds in development mode</p>
   <h2 id="using-static-assets-like-css-and-js">Step 4: Using static assets like CSS and JS</h2>
   <p>
     If you have static assets like CSS, JS, Images and etc... You can create a folder called <code class="code">public</code> in the root of the project.

docs/pages/index.js

@@ -3,7 +3,7 @@ const html = require('html-template-tag');
 const page = () => html`
   <h1>🎈 Hydrogen</h1>
   <p>A super lightweight static-site generator built with <span style="color: #007acc">TypeScript</span> 😻 Uses 🔥 <a style="color: #ff2f2f;" href="https://lit-html.polymer-project.org">lit-html</a> inspired templates for super performant template generation.</p>
-  <p style="border-left: 3px solid white; border-radius: 3px; padding-left: 20px;"><i>Compile a ton of templates in under ~150ms</i></p>
+  <p class="tip"><i>Compile a ton of templates in under ~150ms</i></p>
   <center>
     <img style="margin: 20px; border-radius: 10px;" src="https://qph.fs.quoracdn.net/main-qimg-706f37c5cbc54e415892478836e8acb5.webp">
   </center>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "hydrogen-cli",
   "description": "Voted the world's lightest static-site generator built with TypeScript ❤ It uses 🔥 lit-html inspired templating for super duper performant template generation",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "author": "Shailen Naidoo",
   "bin": {
     "hydrogen": "./bin/run"