feat(client): add left and right classes

Author: hiroppy

packages/client/assets/style/customize.css

@@ -2,14 +2,12 @@
   display: flex;
 }
 
-.katex-html {
-  display: none;
+.left {
+  text-align: left;
 }
 
-.qr {
-  width: var(--qr-code-image-size);
-  height: var(--qr-code-image-size);
-  margin: 0 auto;
+.right {
+  text-align: right;
 }
 
 .swiper-container {
@@ -57,3 +55,13 @@
     align-self: flex-start;
   }
 } */
+
+.katex-html {
+  display: none;
+}
+
+.qr {
+  width: var(--qr-code-image-size);
+  height: var(--qr-code-image-size);
+  margin: 0 auto;
+}

packages/client/src/components/Assistant.js

@@ -107,6 +107,14 @@ export const Assistant = () => (
                   title: 'Slide Background',
                   content: <code>{`.slide-background`}</code>,
                 },
+                {
+                  title: 'Align Left',
+                  content: <code>{`.left`}</code>,
+                },
+                {
+                  title: 'Align Right',
+                  content: <code>{`.right`}</code>,
+                },
               ]}
             />
           </Item>

samples/themes/slides/slides.mdx

@@ -39,7 +39,7 @@ slide:
 ```
 
 <!-- block-end -->
-<!-- block-start: column -->
+<!-- block-start: column, left -->
 
 Fusuma is an open-source, created by [@hiroppy](https://twitter.com/about_hiroppy). Fusuma provides development, production, presentation mode, and so on. Users code only Markdown and styles if needed. The purpose is to focus on creating slides, so Fusuma supports optimization and improvement SEO. And also Fusuma has a presenter mode, and practice mode which users can record voice and actions. Have a fun time!
 
@@ -84,7 +84,7 @@ module.exports = {
 ```
 
 <!-- block-end -->
-<!-- block-start: column -->
+<!-- block-start: column, left -->
 
 webpack is an open-source JavaScript module bundler. It is made primarily for JavaScript, but it can transform front-end assets such as HTML, CSS, and images if the corresponding loaders are included. webpack takes modules with dependencies and generates static assets representing those modules. Webpack takes the dependencies and generates a dependency graph allowing web developers to use a modular approach for their web application development purposes. It can be used from the command line, or can be configured using a config file which is named webpack.config.js. This file is used to define rules, plugins, etc., for a project.
 
@@ -120,7 +120,7 @@ module.exports = (api) => {
 ```
 
 <!-- block-end -->
-<!-- block-start: column -->
+<!-- block-start: column, left -->
 
 Babel is a free and open-source JavaScript transcompiler that is mainly used to convert ECMAScript 2015+ (ES6+) code into a backwards compatible version of JavaScript that can be run by older JavaScript engines. Babel is a popular tool for using the newest features of the JavaScript programming language. Developers can use new JavaScript language features by using Babel to convert their source code into versions of JavaScript that evolving browsers are able to process. The core version of Babel was downloaded 5 million times a month as of 2016, increasing to 16 million times per week as of 2019.
 
@@ -159,7 +159,7 @@ server.listen(port, hostname, () => {
 ```
 
 <!-- block-end -->
-<!-- block-start: column -->
+<!-- block-start: column, left -->
 
 Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the Chrome V8 engine and executes JavaScript code outside a web browser. Node.js lets developers use JavaScript to write command line tools and for server-side scripting—running scripts server-side to produce dynamic web page content before the page is sent to the user's web browser. Consequently, Node.js represents a "JavaScript everywhere" paradigm, unifying web-application development around a single programming language, rather than different languages for server-side and client-side scripts.
 

samples/themes/style.css

@@ -3,10 +3,6 @@
 /* @import '../../packages/client/assets/style/themes/babel.css'; */
 /* @import '../../packages/client/assets/style/themes/node.css'; */
 
-.column:last-child {
-  text-align: left;
-}
-
 /* --------- */
 .pop {
   --color-title: #e53498;