-
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
211 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,211 @@ | ||
| --- | ||
| title : 🎨 Customizing Marp Theme | ||
| date: '2024-06-25' | ||
| tags: ['Marp', 'CSS'] | ||
| draft: false | ||
| summary: I embarked on a journey to create a custom theme for Marp, an open-source presentation ecosystem. Leveraging the powerful features of Marp. | ||
| --- | ||
| <div className="grid place-items-center"> | ||
| <img | ||
| className="inline rounded-lg" | ||
| src="https://marp.app/og-images/the-story-of-marp-next.png" | ||
| alt="Marp" | ||
| width="700" | ||
| height="700" | ||
| /> | ||
| </div> | ||
|
|
||
| ## Introduction | ||
|
|
||
| Recently, I embarked on a journey to create a custom theme for Marp, an open-source presentation ecosystem. Leveraging the powerful features of Marp, I decided to enhance the default uncover theme by adding my unique styling touches. | ||
|
|
||
| ## The Uncover Theme | ||
|
|
||
| The uncover theme in Marp is known for its simplicity and elegance. However, I wanted to personalize it further to better suit my presentation style and preferences. My goal was to create a visually appealing and cohesive theme that would make my slides stand out. | ||
|
|
||
| ## Custom Styling | ||
|
|
||
| To achieve this, I applied a custom CSS to the uncover theme. Below is an example of the styles I added: | ||
|
|
||
| ```css | ||
| section { | ||
| font-size: 50px; | ||
| background: linear-gradient(135deg, #1c1f26 0%, #1a263a 100%); | ||
| } | ||
|
|
||
| h1 { | ||
| font-size: 70px; | ||
| } | ||
|
|
||
| h2 { | ||
| font-size: 40px; | ||
| } | ||
|
|
||
| h3 { | ||
| font-size: 35px; | ||
| } | ||
|
|
||
| p { | ||
| font-size: 27px; | ||
| } | ||
|
|
||
| ol, ul { | ||
| font-size: 27px; | ||
| margin-left: 20px; | ||
| } | ||
|
|
||
| li { | ||
| margin-bottom: 10px; | ||
| } | ||
|
|
||
| header, footer { | ||
| color: #eceff4; | ||
| } | ||
|
|
||
| pre code { | ||
| font-size: 30px; | ||
| line-height: 1.5; | ||
| background-color: #2e3440; | ||
| color: #d8dee9; | ||
| border-radius: 10px; | ||
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); | ||
| font-family: 'Courier New', Courier, monospace; | ||
| position: relative; | ||
| } | ||
|
|
||
| pre { | ||
| position: relative; | ||
| font-size: 24px; | ||
| line-height: 1.5; | ||
| padding: 40px 10px 10px; | ||
| background-color: #2e3440; | ||
| color: #d8dee9; | ||
| border-radius: 10px; | ||
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); | ||
| font-family: 'Courier New', Courier, monospace; | ||
| } | ||
|
|
||
| pre::before { | ||
| content: "Code"; | ||
| display: block; | ||
| background: #4c566a; | ||
| color: #eceff4; | ||
| padding: 10px; | ||
| border-radius: 10px 10px 0 0; | ||
| font-size: 30px; | ||
| font-weight: bold; | ||
| position: absolute; | ||
| top: -30px; | ||
| left: 0; | ||
| width: 100%; | ||
| box-sizing: border-box; | ||
| text-align: center; | ||
| } | ||
| ``` | ||
|
|
||
| ## Implementation | ||
|
|
||
| ```markdown | ||
| --- | ||
| marp: true | ||
| theme: uncover | ||
| class: invert | ||
| paginate: true | ||
| _paginate: false | ||
| header: Taufiqurrahman | ||
| footer: '[email protected] | 2024 | https://fiqgant.github.io' | ||
| _footer: '[email protected] | 2024 | https://fiqgant.github.io' | ||
| --- | ||
|
|
||
| <style> | ||
| section { | ||
| font-size: 50px; | ||
| background: linear-gradient(135deg, #1c1f26 0%, #1a263a 100%); | ||
| } | ||
|
|
||
| h1 { | ||
| font-size: 70px; | ||
| } | ||
|
|
||
| h2 { | ||
| font-size: 40px; | ||
| } | ||
|
|
||
| h3 { | ||
| font-size: 35px; | ||
| } | ||
|
|
||
| p { | ||
| font-size: 27px; | ||
| } | ||
|
|
||
| ol { | ||
| font-size: 27px; | ||
| margin-left: 20px; | ||
| } | ||
|
|
||
| ul { | ||
| font-size: 27px; | ||
| margin-left: 20px; | ||
| } | ||
|
|
||
| li { | ||
| margin-bottom: 10px; | ||
| } | ||
|
|
||
| header { | ||
| color: #eceff4; | ||
| } | ||
|
|
||
| footer { | ||
| color: #eceff4; | ||
| } | ||
|
|
||
|
|
||
| pre code { | ||
| font-size: 30px; | ||
| line-height: 1.5; | ||
| background-color: #2e3440; | ||
| color: #d8dee9; | ||
| border-radius: 10px; | ||
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); | ||
| font-family: 'Courier New', Courier, monospace; | ||
| position: relative; | ||
| } | ||
|
|
||
| pre { | ||
| position: relative; | ||
| font-size: 24px; | ||
| line-height: 1.5; | ||
| padding: 40px 10px 10px; | ||
| background-color: #2e3440; | ||
| color: #d8dee9; | ||
| border-radius: 10px; | ||
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); | ||
| font-family: 'Courier New', Courier, monospace; | ||
| } | ||
|
|
||
| pre::before { | ||
| content: "Code"; | ||
| display: block; | ||
| background: #4c566a; | ||
| color: #eceff4; | ||
| padding: 10px; | ||
| border-radius: 10px 10px 0 0; | ||
| font-size: 30px; | ||
| font-weight: bold; | ||
| position: absolute; | ||
| top: -30px; | ||
| left: 0; | ||
| width: 100%; | ||
| box-sizing: border-box; | ||
| text-align: center; | ||
| } | ||
| </style> | ||
|
|
||
|
|
||
| # Cloud Computing | ||
| ## Serverless Computing | ||
|
|
||
| --- | ||
| ``` |