first commit

.gitignore

@@ -0,0 +1 @@
+*.pdf

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "markdown.marp.themes": [
+        "./themes/cybertopia.css"
+    ]
+}

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2024 Alexandre ZANNI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

README.md

@@ -0,0 +1,62 @@
+# Cybertopia theme for Marp
+
+> A dark theme for [Marp](https://marp.app/) / [Marpit](https://marpit.marp.app/) slides ecosystem
+
+🗒️|📷
+---|---
+Example of title page with image|![](assets/demo1.png)
+Example of text|![](assets/demo2.png)
+Example of code block|![](assets/demo3.png)
+
+## Installation
+
+After the installation is complete, your slide frontmatter should at least contain this:
+
+```md
+---
+marp: true
+theme: cybertopia
+class: invert
+---
+```
+
+### For VS Code / Code OSS / VSCodium
+
+1. You already have [Marp for VS Code](https://github.com/marp-team/marp-vscode) installed.
+2. Open VS Code settings (<kdb>CTRL</kdb> + <kdb>,</kdb>).
+3. Search `markdown.marp.themes` and clikc `Add element`.
+4. Add this link: https://raw.githubusercontent.com/noraj/cybertopia-marp/master/themes/cybertopia.css.
+
+Alternatively, you can also edit `.vscode/settings.json` on a per project basis, and add this if the theme was copied locally…
+
+```json
+{
+    "markdown.marp.themes": [
+        "./themes/cybertopia.css"
+    ]
+}
+```
+
+… or this if you want to fetch the theme remotly:
+
+```json
+{
+    "markdown.marp.themes": [
+        "https://raw.githubusercontent.com/noraj/cybertopia-marp/master/themes/cybertopia.css"
+    ]
+}
+```
+
+### For Marp CLI
+
+To use the theme with [Marp CLI](https://github.com/marp-team/marp-cli):
+
+1. Either clone the repository somewhere `https://github.com/noraj/cybertopia-marp.git` or download a [Github ZIP archive](https://github.com/noraj/cybertopia-marp/archive/master.zip) and uncompress it.
+2. Copy `themes/cybertopia.css` file to your marp project.
+3. When using the Marp CLI, you may have to specify the theme you are using with the `--theme cybertopia.css` option.
+
+For example, on this repository:
+
+- Live rendering: `marp ./slides.md -s -I ./`
+- Generate HTML: `marp ./slides.md --theme-set ./themes -o index.html`
+- Generate PDF: `marp ./slides.md --theme-set ./themes --pdf --allow-local-files`

slides.md

@@ -0,0 +1,96 @@
+---
+marp: true
+theme: cybertopia
+class: invert
+paginate: true
+header: '**Marp presentation example** - **Alexandre ZANNI** aka **noraj**'
+footer: '30/09/204 - XYZCon 2024'
+---
+
+# noraj theme
+
+![](assets/noraj.svg)
+
+---
+
+## Sub-title
+
+Hello, world!
+
+---
+
+###### emoji
+
+😃💎💎❤️🔥
+
+---
+
+**image filters**
+
+![blur:10px](assets/noraj.svg) ![brightness:1.5](assets/noraj.svg) ![opacity:.5](assets/noraj.svg)
+![grayscale](assets/noraj.svg) ![hue-rotate:180deg](assets/noraj.svg) ![invert:100%](assets/noraj.svg)
+
+---
+
+background image
+
+![bg](https://i.imgur.com/jBB1vtZ.jpeg)
+
+---
+
+![bg left:33%](https://picsum.photos/1080?image=28)
+
+split background
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg vertical](https://fakeimg.pl/1920x360/02c797/fff/?text=vertical)
+![bg](https://fakeimg.pl/1920x360/019f78/fff/?text=split)
+![bg](https://fakeimg.pl/1920x360/01775a/fff/?text=background)
+
+---
+
+## Bullet list
+
+- One
+- Two
+- Three
+
+---
+
+## Fragmented list
+
+* One
+* Two
+* Three
+
+---
+
+**bold** _italic_
+
+link: https://github.com/noraj
+
+> blockquote Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+---
+
+code, Ruby
+
+```ruby
+# The Greeter class
+class Greeter
+  def initialize(name)
+    @name = name.capitalize
+  end
+
+  def salute
+    puts "Hello #{@name}!"
+  end
+end
+
+g = Greeter.new("world")
+g.salute
+```

themes/cybertopia.css

@@ -0,0 +1,171 @@
+/* @theme cybertopia */
+
+@import 'uncover';
+
+/* Background */
+:root.invert {
+  --noraj: #02c797;
+  --color-background: #000000;
+  --color-background-code: #101010;
+  --color-background-paginate: rgba(2, 199, 151, 0.05);
+  --color-foreground: #ffffff;
+  --color-highlight: var(--noraj);
+  --color-highlight-hover: color-mix(#ffffff, var(--noraj), 25%);
+  --color-highlight-heading: color-mix(var(--color-background), var(--noraj), 20%);
+  --color-header: rgba(255, 255, 255, 0.4);
+  --color-header-shadow: rgba(0, 0, 0, 0.8);
+  /* highlight.js colors - Cybertopia Saturated theme - https://github.com/noraj/cybertopia-highlightjs */
+  --hljs-bg: #101010;
+  --hljs-mono-1: #abb2bf;
+  --hljs-mono-3: #5c6370;
+  --hljs-hue-1: #5AF202;
+  --hljs-hue-2: #08B7FD;
+  --hljs-hue-3: #E917FD;
+  --hljs-hue-4: #02c797;
+  --hljs-hue-5: #E30202;
+  --hljs-hue-6: #FD9926;
+  --hljs-hue-6-2: #ffea00;
+  --hljs-hue-7: #35FD56;
+
+  /* xo background */
+  background: radial-gradient(circle at top left,transparent 9%, var(--color-background-code) 10% ,var(--color-background-code) 15% , transparent 16%) , radial-gradient(circle at bottom left,transparent 9%, var(--color-background-code) 10% ,var(--color-background-code) 15% , transparent 16%), radial-gradient(circle at top right ,transparent 9%, var(--color-background-code) 10% ,var(--color-background-code) 15% , transparent 16%) , radial-gradient(circle at bottom right,transparent 9%, var(--color-background-code) 10% ,var(--color-background-code) 15% , transparent 16%),radial-gradient(circle, transparent 25%, var(--color-background) 26%),linear-gradient(45deg, transparent 46%, var(--color-background-code) 47%, var(--color-background-code) 52%, transparent 53%), linear-gradient(135deg, transparent 46%, var(--color-background-code) 47%, var(--color-background-code) 52%, transparent 53%);
+  background-size: 3em 3em;
+  background-color: var(--color-background);
+}
+
+/* Titles */
+:root.invert h1,h2,h3,h4,h5,h6 {
+  color: #ffffff;
+  backdrop-filter: blur(8px);
+  border: 5px solid var(--noraj);
+}
+
+/* Capitalize sub-titles */
+:root.invert h2,h3 {
+  text-transform: capitalize;
+}
+
+/* Links */
+:root.invert a {
+  color: var(--noraj);
+}
+
+/* Unordered lists */
+:root ul, :root.invert ul {
+  color: #ffffff;
+  list-style-type: none;
+  backdrop-filter: blur(20px);
+}
+
+:root ul li::before, :root.invert ul li::before {
+  content: "\2688";
+  color: var(--noraj);
+  /*font-weight: bold;*/
+  display: inline-block;
+  width: 1em;
+  margin-left: -1em;
+}
+
+/* Ordered lists */
+:root ol, :root.invert ol {
+  /*color: var(--noraj);*/
+  backdrop-filter: blur(20px);
+}
+
+/* All texts */
+:root p:only-child , :root.invert p:only-child {
+  backdrop-filter: blur(20px);
+}
+
+/* Header & Footer */
+:root header, :root.invert header {
+  color: #c6c6c6;
+}
+:root footer, :root.invert footer {
+  color:#c6c6c6;
+  backdrop-filter: blur(20px);
+}
+
+/* Pagination */
+section::after {
+  color: var(--noraj);
+}
+
+/* highlight.js support - Cybertopia Saturated theme - https://github.com/noraj/cybertopia-highlightjs */
+pre code.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 1em
+}
+code.hljs {
+  padding: 3px 5px
+}
+.hljs {
+  color: var(--hljs-mono-1);
+  background: var(--hljs-bg)
+}
+.hljs-comment,
+.hljs-quote {
+  color: var(--hljs-mono-3);
+  font-style: italic
+}
+.hljs-doctag,
+.hljs-keyword,
+.hljs-formula {
+  color: var(--hljs-hue-3)
+}
+.hljs-section,
+.hljs-name,
+.hljs-selector-tag,
+.hljs-deletion,
+.hljs-subst {
+  color: var(--hljs-hue-5)
+}
+.hljs-literal {
+  color: var(--hljs-hue-1)
+}
+.hljs-string,
+.hljs-regexp,
+.hljs-addition,
+.hljs-attribute,
+.hljs-meta .hljs-string {
+  color: var(--hljs-hue-4)
+}
+.hljs-attr,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-type,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo,
+.hljs-number,
+.hljs-punctuation {
+  color: var(--hljs-hue-6)
+}
+.hljs-symbol,
+.hljs-bullet,
+.hljs-link,
+.hljs-meta,
+.hljs-selector-id,
+.hljs-title,
+.hljs-property,
+.hljs-tag {
+  color: var(--hljs-hue-2)
+}
+.hljs-built_in,
+.hljs-title.class_,
+.hljs-class .hljs-title {
+  color: var(--hljs-hue-6-2)
+}
+.hljs-emphasis {
+  font-style: italic
+}
+.hljs-strong {
+  font-weight: bold
+}
+.hljs-link {
+  text-decoration: underline
+}
+.hljs-params, .hljs-operator {
+  color: var(--hljs-hue-7)
+}