fix(client): add prefix for colors

hiroppy · Feb 1, 2021 · 71acc07 · 71acc07
1 parent 9fd4f62
commit 71acc07
Show file tree

Hide file tree

Showing 11 changed files with 107 additions and 76 deletions.
diff --git a/README.md b/README.md
@@ -79,7 +79,7 @@ When `npx fusuma start` is executed, fusuma will create slides as follows then s
 | :----------------------------------------------: | :---------------------------------: |
 | ![](./site/docs/assets/procedure-screenshot.png) | ![](./site/docs/assets/sidebar.png) |
 
-👉 https://hiroppy.github.io/fusuma/plain/
+👉 [the demo](https://hiroppy.github.io/fusuma/plain/)
 
 [Getting Started/Preparation](https://hiroppy.github.io/fusuma/docs/getting-started/preparation)
 
@@ -95,17 +95,7 @@ Fusuma offers the following themes also users can customize them because this is
 | :----------------------------------------: | :--------------------------------------: | :-------------------------------------: |
 | ![](./site/docs/assets/themes/webpack.png) | ![](./site/docs/assets/themes/babel.png) | ![](./site/docs/assets/themes/node.png) |
 
-↑ [the sample slides for these themes](https://hiroppy.github.io/fusuma/themes/)
-
-```css
-/* the default theme */
-:root {
-  --title-color: #464646;
-  --base-color: #545454;
-  --background-color: #f5f5f5;
-  --link-color: #3498db;
-}
-```
+👉 [the demo](https://hiroppy.github.io/fusuma/themes/)
 
 ## Markdown and MDX
 
@@ -132,6 +122,47 @@ export const Sample = () => <p>Hello from jsx!!</p>;
 
 [Getting Started/Creating Your Slide](https://hiroppy.github.io/fusuma/docs/getting-started/creating-your-slide)
 
+## Customize styles
+
+The following properties are provided, but you can change the css directly if you want.
+
+<details>
+
+```css
+:root {
+  --base-font-family: 'Roboto', 'San Francisco', helvetica, arial, sans-serif;
+  --base-font-size: 2.4rem;
+  --base-font-weight: 300;
+  --base-align: center;
+  --base-max-slide-size: 1280px;
+
+  --color-title: #464646;
+  --color-base: #545454;
+  --color-background: #f5f5f5;
+  --color-link: #3498db;
+
+  --h1-font-size: 5.6rem;
+  --h1-font-weight: 300;
+  --h2-font-size: 4rem;
+  --h2-font-weight: 300;
+  --h3-font-size: 3.6rem;
+  --h3-font-weight: 300;
+  --h4-font-size: 3rem;
+  --h4-font-weight: 300;
+  --h5-font-size: 2.4rem;
+  --h5-font-weight: 600;
+  --h6-font-size: 2rem;
+  --h6-font-weight: 600;
+
+  --code-align: auto;
+  --code-font-size: 1.8rem;
+
+  --qr-code-image-size: 320px;
+}
+```
+
+</details>
+
 ## Presenter Mode
 
 [Modes/Presenter](https://hiroppy.github.io/fusuma/docs/modes/presenter)

diff --git a/packages/client/assets/style/customize.css b/packages/client/assets/style/customize.css
@@ -26,9 +26,9 @@
 }
 
 .slide-box {
-  color: var(--base-color);
+  color: var(--color-base);
   text-align: var(--base-align);
-  background: var(--background-color);
+  background: var(--color-background);
 }
 
 .slide-internal-box {

diff --git a/packages/client/assets/style/sidebar.css b/packages/client/assets/style/sidebar.css
@@ -1,12 +1,12 @@
 :root {
-  --color-cyan: #7bb7fa;
-  --color-white: #f5f5f5;
-  --color-black: #373a47;
+  --sidebar-color-cyan: #7bb7fa;
+  --sidebar-color-white: #f5f5f5;
+  --sidebar-color-black: #373a47;
 }
 
 .btn-sidebar {
   bottom: 20px;
-  color: var(--color-white);
+  color: var(--sidebar-color-white);
   cursor: pointer;
   fill: #abc;
   font-size: 32px !important;
@@ -21,7 +21,7 @@
 }
 
 .bm-menu {
-  background: var(--color-black);
+  background: var(--sidebar-color-black);
   padding: 16px;
 }
 
@@ -48,7 +48,7 @@
 
 .sidebar-social {
   & > a {
-    color: var(--color-cyan);
+    color: var(--sidebar-color-cyan);
   }
 }
 
@@ -81,7 +81,7 @@
     }
 
     & > a {
-      color: var(--color-cyan);
+      color: var(--sidebar-color-cyan);
 
       &:not(:first-child) {
         margin-top: 4px;

diff --git a/packages/client/assets/style/tags.css b/packages/client/assets/style/tags.css
@@ -130,9 +130,9 @@ ul {
 /* themes */
 h1,
 h2 {
-  color: var(--title-color);
+  color: var(--color-title);
 }
 
 a {
-  color: var(--link-color);
+  color: var(--color-link);
 }
diff --git a/packages/client/assets/style/themes/babel.css b/packages/client/assets/style/themes/babel.css
@@ -1,8 +1,8 @@
 /* https://babeljs.io/ */
 
 :root {
-  --title-color: #f5da55;
-  --base-color: #f1f1f1;
-  --background-color: #3b3c38;
-  --link-color: hsla(0, 0%, 100%, 0.8);
+  --color-title: #f5da55;
+  --color-base: #f1f1f1;
+  --color-background: #3b3c38;
+  --color-link: hsla(0, 0%, 100%, 0.8);
 }
diff --git a/packages/client/assets/style/themes/default.css b/packages/client/assets/style/themes/default.css
@@ -1,6 +1,6 @@
 :root {
-  --title-color: #464646;
-  --base-color: #545454;
-  --background-color: #f5f5f5;
-  --link-color: #3498db;
+  --color-title: #464646;
+  --color-base: #545454;
+  --color-background: #f5f5f5;
+  --color-link: #3498db;
 }
diff --git a/packages/client/assets/style/themes/node.css b/packages/client/assets/style/themes/node.css
@@ -1,8 +1,8 @@
 /* https://nodejs.org/ */
 
 :root {
-  --title-color: #99cc7d;
-  --base-color: #f2f2f2;
-  --background-color: #2c3437;
-  --link-color: #84ba64;
+  --color-title: #99cc7d;
+  --color-base: #f2f2f2;
+  --color-background: #2c3437;
+  --color-link: #84ba64;
 }
diff --git a/packages/client/assets/style/themes/pop.css b/packages/client/assets/style/themes/pop.css
@@ -1,6 +1,6 @@
 :root {
-  --title-color: #e53498;
-  --base-color: #1c1235;
-  --background-color: #e5e5e5;
-  --link-color: #6f4dca;
+  --color-title: #e53498;
+  --color-base: #1c1235;
+  --color-background: #e5e5e5;
+  --color-link: #6f4dca;
 }
diff --git a/packages/client/assets/style/themes/webpack.css b/packages/client/assets/style/themes/webpack.css
@@ -1,8 +1,8 @@
 /* https://webpack.js.org/ */
 
 :root {
-  --title-color: #8dd6f9;
-  --base-color: #fff;
-  --background-color: #2b3a42;
-  --link-color: #86a5ba;
+  --color-title: #8dd6f9;
+  --color-base: #fff;
+  --color-background: #2b3a42;
+  --color-link: #86a5ba;
 }
diff --git a/samples/intro/style.css b/samples/intro/style.css
@@ -8,7 +8,7 @@
   --skin-color: #ffcc99;
   --color: #7bb7fa;
 
-  --title-color: #3498db;
+  --color-title: #3498db;
 }
 
 h2 {

diff --git a/samples/themes/style.css b/samples/themes/style.css
@@ -5,24 +5,24 @@
 
 h1,
 h2 {
-  color: var(--title-color);
+  color: var(--color-title);
 }
 
 a {
-  color: var(--link-color);
+  color: var(--color-link);
 }
 
 .slide-background {
   /* set the default background */
-  background: var(--background-color);
+  background: var(--color-background);
 }
 
 .slide-box {
   /* set the default align */
   text-align: center;
 
   /* set the default font-color */
-  color: var(--base-color);
+  color: var(--color-base);
 }
 
 .column:last-child {
@@ -31,73 +31,73 @@ a {
 
 /* --------- */
 .pop {
-  --title-color: #e53498;
-  --base-color: #1c1235;
-  --background-color: #e5e5e5;
-  --link-color: #6f4dca;
+  --color-title: #e53498;
+  --color-base: #1c1235;
+  --color-background: #e5e5e5;
+  --color-link: #6f4dca;
 
   & h1 {
-    color: var(--title-color);
+    color: var(--color-title);
   }
   & h2 {
-    color: var(--title-color);
+    color: var(--color-title);
   }
 
   & a {
-    color: var(--link-color);
+    color: var(--color-link);
   }
 }
 
 .webpack {
-  --title-color: #8dd6f9;
-  --base-color: #fff;
-  --background-color: #2b3a42;
-  --link-color: #86a5ba;
+  --color-title: #8dd6f9;
+  --color-base: #fff;
+  --color-background: #2b3a42;
+  --color-link: #86a5ba;
 
   & h1 {
-    color: var(--title-color);
+    color: var(--color-title);
   }
   & h2 {
-    color: var(--title-color);
+    color: var(--color-title);
   }
 
   & a {
-    color: var(--link-color);
+    color: var(--color-link);
   }
 }
 
 .babel {
-  --title-color: #f5da55;
-  --base-color: #f1f1f1;
-  --background-color: #3b3c38;
-  --link-color: hsla(0, 0%, 100%, 0.8);
+  --color-title: #f5da55;
+  --color-base: #f1f1f1;
+  --color-background: #3b3c38;
+  --color-link: hsla(0, 0%, 100%, 0.8);
 
   & h1 {
-    color: var(--title-color);
+    color: var(--color-title);
   }
   & h2 {
-    color: var(--title-color);
+    color: var(--color-title);
   }
 
   & a {
-    color: var(--link-color);
+    color: var(--color-link);
   }
 }
 
 .node {
-  --title-color: #99cc7d;
-  --base-color: #f2f2f2;
-  --background-color: #2c3437;
-  --link-color: #84ba64;
+  --color-title: #99cc7d;
+  --color-base: #f2f2f2;
+  --color-background: #2c3437;
+  --color-link: #84ba64;
 
   & h1 {
-    color: var(--title-color);
+    color: var(--color-title);
   }
   & h2 {
-    color: var(--title-color);
+    color: var(--color-title);
   }
 
   & a {
-    color: var(--link-color);
+    color: var(--color-link);
   }
 }