update docs

Author: PrajwolAmatya

README.md

@@ -65,7 +65,13 @@ presenter: <name-of-the-presenter>
 logo: <path-to-logo>
 color: <font-color-for-slide-title>
 footer: <footer-content>
-aboutUs: <content-for-about-us-slide>
+aboutUs:
+    - title: <about-us-title1>
+      text: <text-for-title1>
+    - title: <about-us-title2>
+      text: <text-for-title2>
+    - title: <about-us-title3>
+      text: <text-for-title3>
 ---
 ```
 
@@ -75,10 +81,12 @@ These are the supported metadata required for the presentation template.
 |------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------|
 | `slide`          | Default slide for presentation. Most used slide template can be given in the default metadata.                                                             |
 | `presenter`      | Name of the presenter.                                                                                                                                     |
-| `logo`           | Logo of the company. Logo appears on the top right corner of the slide                                                                                     |
+| `logo`           | Logo appears on the top right corner of the slide. The logo path should be relative to the markdown file.                                                  |
 | `color`          | Font color of the slide title.                                                                                                                             |
 | `footer`         | Content to be shown in the footer of the slide.                                                                                                            |
 | `aboutUs`        | Column wise content to be shown in the about-us slide. Use this metadata only if about-us slide is used for the presentation. More [here](#slide-about-us) |
+| `aboutUs:title`  | Title for each column in about-us slide.                                                                                                                   |
+| `aboutUs:text`   | Text under each title for column in about-us slide.                                                                                                        |
 
 Following the front matter, create slides as described in [Creating Presentation](#creating-presentation)
 
@@ -107,10 +115,16 @@ default metadata, so you don't need to add the slide metadata in every slide.
 | `cover`               | This slide template can be used for cover slide                 | `::slide:cover`               |
 | `title-content`       | The slide with title and content (content can be image as well) | `::slide:title-content`       |
 | `title-content-image` | The slide with title, and content in left and image in right    | `::slide:title-content-image` |
-| `about-us`            | The slide with company info (e.g., Values, mission, Vision)     | `::slide:about-us`            |
+| `about-us`            | The slide with about-us info (e.g., Values, mission, Vision)    | `::slide:about-us`            |
 
 #### Slide "Cover"
 
+Code:
+
+```markdown
+# TITLE ::slide:cover
+```
+
 Preview:
 
 ```text
@@ -127,13 +141,15 @@ Preview:
 └────────────────────────────────────────────────────┘
 ```
 
+#### Slide "title-content"
+
 Code:
 
 ```markdown
-# TITLE ::slide:cover
-```
+# TITLE ::slide:title-content
 
-#### Slide "title-content"
+CONTENT
+```
 
 Preview:
 
@@ -151,15 +167,17 @@ Preview:
 └────────────────────────────────────────────────────┘
 ```
 
+Image can also be included in the content of the slide.
+
 Code:
 
 ```markdown
-# TITLE ::slide:title-content
+# TITLE ::slide:title-image
 
 CONTENT
-```
 
-Image can also be included in the content of the slide.
+![This is image description](./image.png)
+```
 
 Preview:
 
@@ -177,18 +195,18 @@ Preview:
 └────────────────────────────────────────────────────┘
 ```
 
+#### Slide "title-content-image"
+
 Code:
 
 ```markdown
-# TITLE ::slide:title-image
+# TITLE ::slide:title-content-image
 
 CONTENT
 
-![This is image description](./image.png)
+![This is image description](image.png)
 ```
 
-#### Slide "title-content-image"
-
 Preview:
 
 ```text
@@ -205,17 +223,29 @@ Preview:
 └────────────────────────────────────────────────────┘
 ```
 
+#### Slide "about-us"
+
 Code:
 
 ```markdown
-# TITLE ::slide:title-content-image
+# TITLE ::slide:about-us
 
 CONTENT
-
-![This is image description](image.png)
 ```
 
-#### Slide "about-us"
+The `title` and `text` can be provided via default metadat in front matter as:
+
+```markdown
+---
+aboutUs:
+  - title: Title 1
+    text: Some text under title 1
+  - title: Title 2
+    text: Some text under title 2
+  - title: Title 3
+    text: Some text under title 3
+---
+```
 
 Preview:
 
@@ -237,28 +267,6 @@ Preview:
 └────────────────────────────────────────────────────┘
 ```
 
-Code:
-
-```markdown
-# TITLE ::slide:about-us
-
-CONTENT
-```
-
-The `title` and `text` can be provided via default metadat in front matter as:
-
-```markdown
----
-aboutUs:
-  - title: Title 1
-    text: Some text under title 1
-  - title: Title 2
-    text: Some text under title 2
-  - title: Title 3
-    text: Some text under title 3
----
-```
-
 ## Development
 
 > [!IMPORTANT] When switching between OpenCloud and oCIS, make sure to clean the browser cache!

src/App.vue

@@ -380,6 +380,12 @@ function setFontColor() {
   slideContainer.value.querySelectorAll('.title p, h1').forEach((el) => {
     el.style.color = color
   })
+  slideContainer.value.querySelectorAll('.about-us-text').forEach((el) => {
+    el.style.backgroundColor = color
+  })
+  slideContainer.value.querySelectorAll('.info-box h3').forEach((el) => {
+    el.style.color = color
+  })
 }
 function applyTemplateIfNeeded() {
   const frontMatter = getFrontMatterFromMarkdown()

src/css/templates.css

@@ -171,7 +171,6 @@ footer {
 }
 
 .about-us-text {
-    background-color: rgba(32, 67, 79, 0.8);
     width: 100%;
     color: #fff;
     text-align: center;
@@ -192,13 +191,12 @@ footer {
 }
 
 .info-box h3 {
-    color: #20434f;
     margin: 10px 0;
 }
 
 .divider {
     width: 1px;
-    background-color: #20434f;
+    background-color: #000000;
     opacity: 0.5;
     align-self: stretch;
 }