feat(client): add custom css

Author: hiroppy

packages/client/assets/style/code.css

@@ -31,6 +31,5 @@ pre[class*='language-'] {
   pre > code[class*='language-'],
   pre[class*='language-'] {
     font-size: 1.8rem !important;
-    width: min-content;
   }
 }

packages/client/assets/style/common.css

@@ -115,12 +115,6 @@ h1 {
   }
 }
 
-@media (min-width: 850px) {
-  .slide-box {
-    margin: auto 24px;
-  }
-}
-
 h1 span {
   font-style: italic;
 }

packages/client/assets/style/customize.css

@@ -25,14 +25,22 @@
 .swiper-slide {
   display: flex;
   align-items: center;
+  text-align: center;
   justify-content: center;
   overflow-y: auto;
 }
 
-.slide-box {
+.slide-internal-box {
   padding: 16px 0;
-  text-align: center;
+  text-align: inherit;
   max-width: 100%;
   margin: auto;
   min-width: 320px;
+  width: 80%;
+}
+
+@media (min-width: 850px) {
+  .slide-internal-box {
+    margin: auto 24px;
+  }
 }

packages/client/src/components/SlideCore.js

@@ -57,13 +57,14 @@ export const SlideCore = ({ slides, onChangeSlideIndex }) => (
       <SwiperSlide
         key={i /* mdx-loaderでhash作成 */}
         className={classnames(
+          'slide-box',
           'slide-background',
           fusumaProps.classes,
           fusumaProps.sectionTitle ? 'section-title' : undefined
         )}
         data-hash={`slide-${i + 1}`}
       >
-        <div className="slide-box slide-background">
+        <div className="slide-internal-box slide-background">
           <Slide />
         </div>
       </SwiperSlide>

samples/advanced/.fusumarc.yml

@@ -6,3 +6,5 @@ slide:
   code:
     languages:
       - yaml
+build:
+  useCashe: false

samples/debug/components/Hello.js

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export const Hello = () => <h3>hello from js</h3>;