feat(client): add some options

Author: hiroppy

README.md

@@ -134,7 +134,8 @@ The following properties are provided, but you can change the css directly if yo
   --base-font-size: 2.4rem;
   --base-font-weight: 300;
   --base-align: center;
-  --base-max-slide-size: 1280px;
+  --base-max-width: 1280px;
+  --base-outer-margin: 24px;
 
   --color-title: #464646;
   --color-base: #545454;

packages/client/assets/style/code.css

@@ -13,7 +13,6 @@ pre[class*='language-'] {
   min-width: 50%;
   max-width: 100%;
   width: fit-content;
-  margin: var(--code-align, auto);
 }
 
 code {

packages/client/assets/style/customize.css

@@ -20,23 +20,22 @@
 .swiper-slide {
   display: flex;
   align-items: center;
-  text-align: center;
-  justify-content: center;
+  justify-content: var(--base-align);
   overflow-y: auto;
-}
-
-.slide-box {
   color: var(--color-base);
   text-align: var(--base-align);
   background: var(--color-background);
   position: relative;
 }
 
 .slide-internal-box {
-  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  padding: var(--base-outer-margin);
   text-align: inherit;
-  max-width: var(--base-max-slide-size);
-  margin: auto;
+  align-items: center;
+  justify-content: var(--base-align);
+  max-width: var(--base-max-width);
   min-width: 320px;
   z-index: 2;
 }

packages/client/assets/style/grid.css

@@ -4,6 +4,7 @@
   flex-wrap: wrap;
   margin-left: auto;
   margin-right: auto;
+  max-width: 100%;
 }
 
 .grid:after {

packages/client/assets/style/variables.css

@@ -5,7 +5,8 @@
   --base-font-size: 2.4rem;
   --base-font-weight: 300;
   --base-align: center;
-  --base-max-slide-size: 1280px;
+  --base-max-size: 1280px;
+  --base-outer-margin: 24px;
 
   --h1-font-size: 5.6rem;
   --h1-font-weight: 300;

packages/client/src/components/SlideCore.js

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

packages/fusuma/src/configs/templates/style.css

@@ -13,7 +13,8 @@
 /* --base-font-size: 2.4rem; */
 /* --base-font-weight: 300; */
 /* --base-align: center; */
-/* --base-max-slide-size: 1280px; */
+/* --base-max-width: 1280px; */
+/* --base-outer-margin: 24px; */
 /* --code-font-size: 1.8rem; */
 /* --h1-font-size: 5.6rem; */
 /* --h2-font-size: 5.6rem; */

samples/themes/style.css

@@ -17,14 +17,6 @@ a {
   background: var(--color-background);
 }
 
-.slide-box {
-  /* set the default align */
-  text-align: center;
-
-  /* set the default font-color */
-  color: var(--color-base);
-}
-
 .column:last-child {
   text-align: left;
 }