feat(client): add custom css for images

Author: hiroppy

README.md

@@ -136,6 +136,10 @@ The following properties are provided, but you can change the css directly if yo
   --base-align: center;
   --base-max-width: 1280px;
   --base-outer-margin: 24px;
+  --base-image-height: auto;
+  --base-image-width: 100%;
+  --base-image-border: none;
+  --base-image-border-radius: 0;
 
   --color-title: #464646;
   --color-base: #545454;

packages/client/assets/style/tags.css

@@ -67,6 +67,10 @@ li {
 
 img {
   margin: 0 auto;
+  border: var(--base-image-border);
+  border-radius: var(--base-image-border-radius);
+  height: var(--base-image-height);
+  width: var(--base-image-width);
 }
 
 ol {

packages/client/assets/style/variables.css

@@ -7,6 +7,10 @@
   --base-align: center;
   --base-max-width: 1280px;
   --base-outer-margin: 24px;
+  --base-image-height: auto;
+  --base-image-width: 100%;
+  --base-image-border: none;
+  --base-image-border-radius: 0;
 
   --h1-font-size: 5.6rem;
   --h1-font-weight: 300;

packages/client/src/components/Assistant.js

@@ -26,10 +26,6 @@ const itemCss = {
   color: '#3d3738',
 };
 
-const hrCss = {
-  margin: '4px 0',
-};
-
 const smallTitleCss = {
   borderBottom: '1px solid #ccc',
   marginBottom: '4px',

samples/debug/slides/02-file-loader.md

@@ -4,16 +4,16 @@
 
 <!-- block-start: column -->
 
-### from markdown
+### markdown
 
 ![js](../assets/js.jpg)
 
 <!-- block-end -->
 <!-- block-start: column -->
 
-### from html
+### html
 
-<img src="../assets/js.jpg" />
+<p><img src="../assets/js.jpg" /></p>
 
 <!-- block-end -->
 <!-- block-end -->