fix: use class names for tutorial images

docs/tutorial-create-new-site.md

@@ -5,7 +5,7 @@ title: Create a New Site
 
 In this section we'll get our Docusaurus site up and running for local development. The process takes less than a few minutes.
 
-<img alt="Docusaurus browser" src="/img/undraw_docusaurus_browser.svg" style="max-width: 400px; margin: 3rem auto"/>
+<img alt="Docusaurus browser" src="/img/undraw_docusaurus_browser.svg" class="docImage"/>
 
 ## Scaffold the Site
 

docs/tutorial-create-pages.md

@@ -5,7 +5,7 @@ title: Create Pages
 
 In this section we will learn about creating two new types of pages in Docusaurus, a regular page and a documentation page.
 
-<img alt="Docusaurus process" src="/img/undraw_docusaurus_process.svg" style="max-width: 400px; margin: 3rem auto"/>
+<img alt="Docusaurus process" src="/img/undraw_docusaurus_process.svg" class="docImage"/>
 
 ## Creating a Regular Page
 
@@ -38,7 +38,7 @@ module.exports = HelloWorld;
 
 React is being used as a templating engine for rendering static markup. You can leverage on the expressability of React to build rich web content. Learn more about creating pages [here](custom-pages).
 
-![Docusaurus React](/img/undraw_docusaurus_react.svg)
+<img alt="Docusaurus React" src="/img/undraw_docusaurus_react.svg" class="docImage"/>
 
 ## Create a Documentation Page
 

docs/tutorial-publish-site.md

@@ -3,7 +3,7 @@ id: tutorial-publish-site
 title: Publish the Site
 ---
 
-<img alt="Docusaurus Facebook" src="/img/undraw_docusaurus_fb.svg" style="max-width: 300px; margin: 3rem auto"/>
+<img alt="Docusaurus Facebook" src="/img/undraw_docusaurus_fb.svg" class="docImage"/>
 
 Next we'll learn how to publish the site to the WWW for everyone to browse! For the purpose of the tutorial, we'll use GitHub pages to host our website. But you can use any static file hosting service that you want, e.g. Netlify, Amazon S3, etc.
 

docs/tutorial-setup.md

@@ -5,7 +5,7 @@ title: Setting Up
 
 This tutorial is geared at first-time users who want detailed instructions on how to go from zero to a Docusaurus that is versioned. Let's start!
 
-<img alt="Docusaurus campfire" src="/img/undraw_docusaurus_mountain.svg" style="max-width: 600px; margin: 3rem auto"/>
+<img alt="Docusaurus campfire" src="/img/undraw_docusaurus_mountain.svg" class="docImage"/>
 
 ## Install Node.js
 

website-1.x/static/css/custom.css

@@ -185,3 +185,8 @@ table td:first-child > code {
     margin-bottom: 80px;
   }
 }
+
+.docImage {
+  margin: 3rem auto;
+  max-width: 400px;
+}