feat(client): add custom css for images

hiroppy · Feb 2, 2021 · 30d615c · 30d615c
1 parent 8da3771
commit 30d615c
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 7 deletions.
diff --git a/README.md b/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;

diff --git a/packages/client/assets/style/tags.css b/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 {

diff --git a/packages/client/assets/style/variables.css b/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;

diff --git a/packages/client/src/components/Assistant.js b/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',

diff --git a/samples/debug/slides/02-file-loader.md b/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 -->