mirror of
https://github.com/samuele-cozzi/obsidian-marp-slides.git
synced 2026-07-22 07:40:25 +00:00
feat: Features/docs base (#56)
* docs * [CodeFactor] Apply fixes --------- Co-authored-by: codefactor-io <support@codefactor.io>
This commit is contained in:
samuele-cozzi
GitHub
parent
d283075645
commit
6a8076b888
40 changed files with 3916 additions and 40 deletions
11
.gitpod.yml
Normal file
11
.gitpod.yml
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
# This configuration file was automatically generated by Gitpod.
|
||||
# Please adjust to your needs (see https://www.gitpod.io/docs/introduction/learn-gitpod/gitpod-yaml)
|
||||
# and commit this file to your remote git repository to share the goodness with others.
|
||||
|
||||
# Learn more from ready-to-use templates: https://www.gitpod.io/docs/introduction/getting-started/quickstart
|
||||
|
||||
tasks:
|
||||
- init: npm install && npm run build
|
||||
command: npm run dev
|
||||
|
||||
|
||||
|
|
@ -10,9 +10,9 @@
|
|||
|
||||
Marp Slides is very simple & powerful slide deck extension for [Obsidian](href="https://obsidian.md") based on [Marp](https://marp.app/)
|
||||
|
||||
|
||||
|
||||
|
||||
Please refer **[marp](https://marp.app/)** for more details of Marp ecosystem.
|
||||
Please refer **[marp](https://marp.app/)** for more details of Marp ecosystem. Refer to **[docs](https://samuele-cozzi.github.io/obsidian-marp-slides/)** for more marp obsidian plugin
|
||||
|
||||
See the documentation of [Marpit Markdown](https://marpit.marp.app/markdown) and [the features of Marp Core](https://github.com/marp-team/marp-core#features) about how to write.
|
||||
Marp have powerful tools for Markdown Slides: [Marpit Framework](https://marpit.marp.app/), [CLI tool](https://github.com/marp-team/marp-cli), [Web interface](https://web.marp.app/) and so on.
|
||||
|
|
@ -34,8 +34,3 @@ Marp have powerful tools for Markdown Slides: [Marpit Framework](https://marpit.
|
|||
- [plugin obsidian development docs](https://marcus.se.net/obsidian-plugin-docs/)
|
||||
- [marp vs code](https://github.com/marp-team/marp-vscode)
|
||||
- [obsidian api](https://github.com/obsidianmd/obsidian-api)
|
||||
|
||||
## tools
|
||||
|
||||
- [svg editor](https://www.svgviewer.dev/s/20183/slideshow-3)
|
||||
- [release please](https://www.conventionalcommits.org/en/v1.0.0/)
|
||||
|
|
|
|||
13
docs/00.index.md
Normal file
13
docs/00.index.md
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
# Index
|
||||
|
||||
## Getting Started
|
||||
|
||||
- [Setup Vault](10.GettingStarted.md#setup-vault)
|
||||
- [Marp Syntax](10.GettingStarted.md#marp-syntax)
|
||||
- [First Deck](10.GettingStarted.md#first-deck)
|
||||
|
||||
## Features
|
||||
|
||||
- [Slides Preview](SlidesPreview.md)
|
||||
- [Slides Export](SlidesExport.md)
|
||||
- [Slides Custom Theme](SlidesCustomTheme.md)
|
||||
57
docs/10.GettingStarted.md
Normal file
57
docs/10.GettingStarted.md
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
# Getting Started
|
||||
|
||||
## Setup Vault
|
||||
|
||||
Obsidian is a powerful note-taking app that allows users to create and organize their notes and ideas in a highly customizable and intuitive interface. Setting up Obsidian for optimal use requires a few key steps to ensure that you can get the most out of the app's features and capabilities.
|
||||
|
||||
The first step in setting up Obsidian is to create a vault, which is essentially a container for all of your notes and files. This can be done by simply creating a new folder on your computer and selecting it as your vault location within the app's settings. Once your vault is set up, you can start creating notes and organizing them into folders and subfolders as needed.
|
||||
|
||||
Next, it's important to customize Obsidian's settings to fit your workflow and preferences. This includes adjusting things like the default font and theme, enabling or disabling various plugins, and configuring hotkeys and other shortcuts for quick access to frequently used features.
|
||||
|
||||
|
||||
|
||||
### Settings
|
||||
|
||||
#### Chrome Path
|
||||
|
||||
Sets the custom path for Chrome or Chromium-based browser to export PDF, PPTX, and image. If it\'s empty, Marp will find out the installed Google Chrome / Chromium / Microsoft Edge.
|
||||
|
||||
#### Theme Path
|
||||
|
||||
Local paths to additional [theme CSS](https://marpit.marp.app/theme-css) for Marp core and Marpit framework. The rule for paths is following Markdown: Styles.
|
||||
|
||||
## Marp Syntax
|
||||
|
||||
Here are some of the key elements of Marp's syntax, along with references to their official documentation:
|
||||
|
||||
- Markdown: Marp uses standard Markdown syntax for formatting text, including headings, lists, links, images, and more. For a comprehensive guide to Markdown syntax, see the official documentation: https://www.markdownguide.org/basic-syntax/
|
||||
|
||||
- Slide separators: To create a new slide in Marp, you simply insert three hyphens (---) between two lines of text. You can also use three equal signs (===) to create a separator between slides. For more information on slide separators, see: https://marpit.marp.app/markdown#slide-separators
|
||||
|
||||
- Code blocks: Marp supports syntax highlighting for code blocks, which can be useful for technical presentations. To create a code block, simply indent the text by four spaces, or use triple backticks (`) to enclose the code. For more information on code blocks, see: https://marpit.marp.app/markdown#code-blocks
|
||||
|
||||
- Themes: Marp comes with a range of built-in themes for styling your presentations. You can also create your own custom themes using CSS. To apply a theme to your presentation, simply add a theme directive to the first line of your Markdown file. For more information on themes, see: https://marpit.marp.app/theme-css
|
||||
|
||||
- Speaker notes: Marp allows you to add speaker notes to your presentation, which are visible only to the presenter. To create speaker notes, simply add text inside the square brackets ([ ]) following a slide separator. For more information on speaker notes, see: https://marpit.marp.app/markdown#speaker-notes
|
||||
|
||||
These are just a few examples of Marp's syntax. For more detailed information and examples, you can refer to Marp's official documentation: https://marpit.marp.app/
|
||||
|
||||
## First Deck
|
||||
|
||||
When creating a presentation, it's important to plan out your content and structure in advance to ensure that your message is clear and engaging. One way to do this is to break your presentation into a series of slides that each convey a specific point or idea.
|
||||
|
||||
|
||||
|
||||
Here are some tips for creating effective slides in Marp:
|
||||
|
||||
1. First, start by writing your first slide. This slide should introduce your topic and grab your audience's attention. Keep it concise and to the point, and consider using a bold or eye-catching font to make it stand out.
|
||||
|
||||
2. Next, preview your slides to get a sense of the overall flow and structure of your presentation. Marp allows you to view your slides in real-time as you write, so you can see how each slide looks as you go.
|
||||
|
||||
3. For your second slide, consider adding a picture to help illustrate your point. Marp allows you to easily add images to your slides, and you can even set them as the background for your slide for added impact.
|
||||
|
||||
4. When designing your slides, don't forget to add a footer that includes your name, the date, and the title of your presentation. This helps to give your presentation a professional look and feel, and also makes it easier for your audience to keep track of where they are in the presentation.
|
||||
|
||||
5. Finally, consider changing the theme of your presentation to give it a unique and polished look. Marp comes with a range of built-in themes to choose from, or you can create your own custom theme using CSS for a truly personalized touch.
|
||||
|
||||
By following these tips and using Marp's simple and intuitive syntax, you can create engaging and effective presentations that captivate your audience and convey your message with clarity and impact.
|
||||
|
|
@ -2,4 +2,6 @@
|
|||
|
||||
Marp for Obsidian lets you preview your Marp Markdown in real time, allowing you to instantly view changes as you make them! With this feature, you can quickly refine and perfect your Markdown documents.
|
||||
|
||||
|
||||
|
||||
The preview of the content of active Markdow editor, use the ribbon icon or execute command from the Command Palette (<kbd>Ctrl/Cmd+P</kbd> + 'Slide Preview')
|
||||
|
|
@ -4,6 +4,8 @@ We have integrated [Marp CLI](https://github.com/marp-team/marp-cli/) to export
|
|||
|
||||
To export the content of active Markdown editor execute command from the Command Palette (<kbd>Ctrl/Cmd+P</kbd>).
|
||||
|
||||
|
||||
|
||||
## Supported file types
|
||||
|
||||
- **HTML** Basic export
|
||||
|
|
@ -3,6 +3,8 @@
|
|||
You can register and use [custom theme CSS for Marpit](https://marpit.marp.app/theme-css) / [Marp Core](https://github.com/marp-team/marp-core/tree/main/themes#readme) by setting `ThemePath`, that includes relative paths to local files in the current vault.
|
||||
The registered theme can use by specifying theme name in [`theme` global directive](https://marpit.marp.app/directives?id=theme).
|
||||
|
||||
|
||||
|
||||
Theme.css:
|
||||
|
||||
```css
|
||||
20
docs/30.Examples.md
Normal file
20
docs/30.Examples.md
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
# Examples
|
||||
|
||||
## Vault Setup
|
||||
|
||||
- clone and open
|
||||
- install marp community plugin
|
||||
- configure obsidian
|
||||
- configure theme
|
||||
|
||||
|
||||
|
||||
## Example Vault
|
||||
|
||||
We have created a dedicated Obsidian vault for testing the plugin and Marp presentations. It is a great way to explore the full potential of these tool without impacting your main vault or risking any data loss or corruption. By using a separate vault for testing, you can experiment freely and make changes without worrying about affecting your existing notes and files.
|
||||
|
||||
To set up a lab Obsidian vault, you can clone the [plugin repository](https://github.com/samuele-cozzi/obsidian-marp-slides) and open the vault folder with obsidian.
|
||||
|
||||
|
||||
|
||||
One area where the lab vault can be especially useful is in testing Marp presentations. Marp is an open-source tool that allows users to create professional-looking presentations using simple Markdown syntax. By building and testing Marp presentations within your lab Obsidian vault, you can experiment with different formatting options and see how your presentations look and feel in a safe and isolated environment.
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
# Index
|
||||
|
||||
## Features
|
||||
|
||||
- [Slides Preview](SlidesPreview.md)
|
||||
- [Slides Export](SlidesExport.md)
|
||||
- [Slides Custom Theme](SlidesCustomTheme.md)
|
||||
BIN
docs/pictures/DeckPreview.gif
Normal file
BIN
docs/pictures/DeckPreview.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 492 KiB |
BIN
docs/pictures/Examples.gif
Normal file
BIN
docs/pictures/Examples.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 485 KiB |
BIN
docs/pictures/Export.gif
Normal file
BIN
docs/pictures/Export.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 504 KiB |
BIN
docs/pictures/FirstDeck.gif
Normal file
BIN
docs/pictures/FirstDeck.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 867 KiB |
BIN
docs/pictures/Screenshot 2023-03-09 213346.png
Normal file
BIN
docs/pictures/Screenshot 2023-03-09 213346.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
BIN
docs/pictures/Settings.png
Normal file
BIN
docs/pictures/Settings.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
BIN
docs/pictures/Theme.gif
Normal file
BIN
docs/pictures/Theme.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 178 KiB |
BIN
docs/pictures/VaultSettings.gif
Normal file
BIN
docs/pictures/VaultSettings.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 198 KiB |
|
|
@ -4,8 +4,7 @@
|
|||
"version": "0.28.2",
|
||||
"minAppVersion": "0.15.0",
|
||||
"description": "Create markdown-based Marp presentations in Obsidian",
|
||||
"author": "Obsidian",
|
||||
"author": "samuele-cozzi",
|
||||
"authorUrl": "https://samuele-cozzi.web.app/",
|
||||
"fundingUrl": "https://buymeacoffee.com",
|
||||
"isDesktopOnly": true
|
||||
}
|
||||
2
package-lock.json
generated
2
package-lock.json
generated
|
|
@ -6,7 +6,7 @@
|
|||
"packages": {
|
||||
"": {
|
||||
"name": "obsidian-marp-slides",
|
||||
"version": "0.26.0",
|
||||
"version": "0.28.2",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@marp-team/marp-cli": "^2.4.0",
|
||||
|
|
|
|||
6
vault/Themes.md
Normal file
6
vault/Themes.md
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
- [marp-themes · GitHub Topics](https://github.com/topics/marp-themes)
|
||||
|
||||
- [matsubara0507/marp-themes: Theme for Marp Next (github.com)](https://github.com/matsubara0507/marp-themes)
|
||||
- [kaisugi/marp-theme-academic: Academic Presentation Slides with Marp (github.com)](https://github.com/kaisugi/marp-theme-academic)
|
||||
- [johannesdewit/marp-theme-universiteit-leiden: Unofficial Leiden University theme for producing easy slides with Marp || Officieus Universiteit Leiden thema om gemakkelijk presentaties te maken met Marp (github.com)](https://github.com/johannesdewit/marp-theme-universiteit-leiden)
|
||||
-
|
||||
BIN
vault/attachments/kenkyu_woman_seikou.png
Normal file
BIN
vault/attachments/kenkyu_woman_seikou.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 109 KiB |
BIN
vault/samples themes/Theme Sample Academic.pdf
Normal file
BIN
vault/samples themes/Theme Sample Academic.pdf
Normal file
Binary file not shown.
BIN
vault/samples themes/Theme Sample Border.pdf
Normal file
BIN
vault/samples themes/Theme Sample Border.pdf
Normal file
Binary file not shown.
BIN
vault/samples themes/Theme Sample Dracula.pdf
Normal file
BIN
vault/samples themes/Theme Sample Dracula.pdf
Normal file
Binary file not shown.
164
vault/samples themes/Theme Sample.md
Normal file
164
vault/samples themes/Theme Sample.md
Normal file
|
|
@ -0,0 +1,164 @@
|
|||
---
|
||||
theme: border
|
||||
size: 16:9
|
||||
header: title of presentation
|
||||
_header: ''
|
||||
footer: footer
|
||||
_footer: ''
|
||||
paginate: true
|
||||
_paginate: false
|
||||
# backgroundColor: #ddd
|
||||
# backgroundImage: url('https://marp.app/assets/hero-background.svg')
|
||||
---
|
||||
<!-- _class: title -->
|
||||
<!-- _class: lead -->
|
||||
|
||||
# Title
|
||||
|
||||
---
|
||||
|
||||
# Agenda
|
||||
|
||||
1. text
|
||||
1. text
|
||||
1. text
|
||||
1. text
|
||||
|
||||
---
|
||||
|
||||
# Section
|
||||
|
||||
Text
|
||||
|
||||
---
|
||||
|
||||
# Introduction
|
||||
|
||||
Text
|
||||
|
||||
---
|
||||
|
||||
# Text
|
||||
|
||||
text
|
||||
|
||||
---
|
||||
|
||||
# Two Columns
|
||||
|
||||
## column 1
|
||||
|
||||
text
|
||||
|
||||
## column 2
|
||||
|
||||
text
|
||||
|
||||
---
|
||||
|
||||
# Two Columns with Picture
|
||||
|
||||
## column 1
|
||||
|
||||
text
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Three Columns
|
||||
|
||||
## column 1
|
||||
|
||||
text
|
||||
|
||||
## column 2
|
||||
|
||||
text
|
||||
|
||||
## column 3
|
||||
|
||||
text
|
||||
|
||||
---
|
||||
|
||||
# Basic Block List
|
||||
|
||||
- text
|
||||
- text
|
||||
- text
|
||||
- text
|
||||
- text
|
||||
---
|
||||
|
||||
# Picture
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Table
|
||||
|
||||
| text | text | text | text |
|
||||
|---|---|---|---|
|
||||
| text | text | text | text |
|
||||
| text | text | text | text |
|
||||
| text | text | text | text |
|
||||
|
||||
---
|
||||
|
||||
# Quote
|
||||
|
||||
> Quote of the day
|
||||
|
||||
---
|
||||
|
||||
# Code
|
||||
|
||||
``` javascript
|
||||
var foo = ""
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
# Long Code
|
||||
|
||||
``` javascript
|
||||
var foo = ""
|
||||
var foo = ""
|
||||
var foo = ""
|
||||
var foo = ""
|
||||
var foo = ""
|
||||
var foo = ""
|
||||
var foo = ""
|
||||
var foo = ""
|
||||
var foo = ""
|
||||
var foo = ""
|
||||
var foo = ""
|
||||
var foo = ""
|
||||
var foo = ""
|
||||
var foo = ""
|
||||
var foo = ""
|
||||
var foo = ""
|
||||
var foo = ""
|
||||
var foo = ""
|
||||
var foo = ""
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
# Math
|
||||
|
||||
Text text .....:
|
||||
|
||||
$$ I_{xx}=\int\int_Ry^2f(x,y)\cdot{}dydx $$
|
||||
|
||||
Text text .....:
|
||||
|
||||
$$
|
||||
f(x) = \int_{-\infty}^\infty
|
||||
\hat f(\xi)\,e^{2 \pi i \xi x}
|
||||
\,d\xi
|
||||
$$
|
||||
|
||||
Conclusion
|
||||
82
vault/samples/Academic.md
Normal file
82
vault/samples/Academic.md
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
---
|
||||
theme: academic
|
||||
paginate: true
|
||||
math: latex
|
||||
---
|
||||
|
||||
<!-- _class: lead -->
|
||||
# Create lab presentation slides with Marp
|
||||
|
||||
#### ~Let's graduate from Beamer~
|
||||
|
||||
<br>
|
||||
|
||||
**Author Taro**
|
||||
Hogehoge Laboratory M2
|
||||
YYYY/MM/DD
|
||||
|
||||
---
|
||||
|
||||
<!-- _header: table of contents -->
|
||||
|
||||
1. First of all
|
||||
1. Code block
|
||||
1. Formula
|
||||
1. Figure
|
||||
|
||||
---
|
||||
|
||||
<!-- _header: Introduction -->
|
||||
|
||||
- Marp is software for creating **slides** in **Markdown**.
|
||||
- Basic Markdown syntax is supported.
|
||||
- You can move to the next page just by putting `---` in Markdown. $^1$
|
||||
|
||||
> 1: Marp is developed according to the Markdown specification called CommonMark, so the "footnote" grammar (using `[^1]`), which is not included in CommonMark, is not provided. Therefore, by referring to https://github.com/marp-team/marp/discussions/150#discussioncomment-1302384, a pseudo-footnote was realized.
|
||||
|
||||
---
|
||||
|
||||
<!-- _header: code block -->
|
||||
|
||||
```python
|
||||
import torch
|
||||
print(torch.cuda.is_available())
|
||||
```
|
||||
|
||||
You can write a code block like this.
|
||||
|
||||
```python
|
||||
from transformers import AutoModelForMaskedLM, AutoTokenizer
|
||||
model = AutoModelForMaskedLM.from_pretrained("cl-tohoku/bert-base-japanese-whole-word-masking")
|
||||
tokenizer = AutoTokenizer.from_pretrained("cl-tohoku/bert-base-japanese-whole-word-masking")
|
||||
|
||||
inputs = tokenizer.encode_plus("I'm very [MASK]", return_tensors='pt')
|
||||
outputs = model(**inputs)
|
||||
tokenizer.convert_ids_to_tokens(outputs.logits[0][1:-1].argmax(axis=-1))
|
||||
```
|
||||
|
||||
The width is automatically adjusted (see [Auto-scaling](https://github.com/marp-team/marp-core#auto-scaling-features) in the document).
|
||||
|
||||
---
|
||||
|
||||
<!-- _header: formula -->
|
||||
|
||||
$$I_{xx}=\int\int_Ry^2f(x,y)\cdot{}dydx$$
|
||||
|
||||
$$
|
||||
f(x) = \int_{-\infty}^\infty
|
||||
\hat f(\xi)\,e^{2 \pi i \xi x}
|
||||
\,d\xi
|
||||
$$
|
||||
|
||||
You can write the formula like this. Of course you can also use inline $\LaTeX$.
|
||||
You can also use emojis :smile:
|
||||
|
||||
---
|
||||
|
||||
<!-- _header: Figure -->
|
||||
|
||||
1. First, right-click to download the image (`kenkyu_woman_seikou.png`) from [This Irasutoya link](https://www.irasutoya.com/2018/10/blog-post_723.html).
|
||||
2. Create a directory named `images` in this directory with Markdown, and place the image you downloaded earlier. You are now ready to go.
|
||||
|
||||
|
||||
54
vault/samples/Beamer.md
Normal file
54
vault/samples/Beamer.md
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
---
|
||||
marp: true
|
||||
theme: beamer
|
||||
paginate: true
|
||||
size: 16:9
|
||||
header: This is a header
|
||||
footer: This is a footer
|
||||
title: Marp custom themes
|
||||
---
|
||||
<!-- _class: title -->
|
||||
|
||||
# A very long title of my beamer presentation
|
||||
<br/>
|
||||
|
||||
Author's name
|
||||
University of XYZ
|
||||
2022-26-03
|
||||
(Only normal text is centered now)
|
||||
|
||||
---
|
||||
|
||||
# A normal slide
|
||||
|
||||
# H1 again
|
||||
## H2
|
||||
### H3
|
||||
- bullet
|
||||
> quote
|
||||
```
|
||||
code
|
||||
```
|
||||
text
|
||||
|
||||
---
|
||||
# Title page ad hoc fix
|
||||
|
||||
If the title of your presentation is too long and the border intersects with the text underneath, use the following
|
||||
|
||||
```html
|
||||
# Title
|
||||
<br/>
|
||||
<!-- empty line here --->
|
||||
Author's name
|
||||
University of XYZ
|
||||
...
|
||||
```
|
||||
make sure to leave an empty line below the `<br/>` tag
|
||||
|
||||
---
|
||||
<!-- _class: tinytext -->
|
||||
# Tinytext class
|
||||
|
||||
- use `<!-- _class: tinytext -->` to make some text tiny
|
||||
- might be useful for References
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
---
|
||||
theme: default
|
||||
---
|
||||
|
||||
# First Slide
|
||||
|
||||
---
|
||||
|
||||
# Second Slide
|
||||
|
||||
## subtitle
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Third Slide
|
||||
|
||||
## second subtitle
|
||||
Binary file not shown.
23
vault/samples/Sample 1.md
Normal file
23
vault/samples/Sample 1.md
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
---
|
||||
theme: default
|
||||
footer: Samuele Cozzi
|
||||
---
|
||||
|
||||
# First Slide
|
||||
|
||||
---
|
||||
|
||||
# Second Slide
|
||||
|
||||
## subtitle
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Third Slide
|
||||
|
||||
## second subtitle
|
||||
|
||||
|
||||
|
||||
98
vault/themes/academic.css
Normal file
98
vault/themes/academic.css
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
/* @theme academic */
|
||||
|
||||
@import 'gaia';
|
||||
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap');
|
||||
|
||||
:root {
|
||||
--color-background: #fff;
|
||||
--color-foreground: #333;
|
||||
--color-highlight: #800000;
|
||||
}
|
||||
|
||||
section {
|
||||
background-image: none;
|
||||
font-family: 'Noto Sans JP', sans-serif;
|
||||
padding-top: 90px;
|
||||
padding-left: 40px;
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
/* https://github.com/marp-team/marpit/issues/271 */
|
||||
section::after {
|
||||
font-weight: 700;
|
||||
content: attr(data-marpit-pagination) '/' attr(data-marpit-pagination-total);
|
||||
}
|
||||
|
||||
ul ul {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
section.lead h1 {
|
||||
color: #800000;
|
||||
text-align: left;
|
||||
}
|
||||
section.lead h1 strong {
|
||||
-webkit-text-stroke: 1px #800000;
|
||||
}
|
||||
section.lead h2 {
|
||||
color: #800000;
|
||||
text-align: left;
|
||||
}
|
||||
section.lead h2 strong {
|
||||
-webkit-text-stroke: 1px #800000;
|
||||
}
|
||||
section.lead h3 {
|
||||
color: #800000;
|
||||
text-align: left;
|
||||
}
|
||||
section.lead h3 strong {
|
||||
-webkit-text-stroke: 1px #800000;
|
||||
}
|
||||
section.lead h4 {
|
||||
color: #800000;
|
||||
text-align: left;
|
||||
}
|
||||
section.lead h4 strong {
|
||||
-webkit-text-stroke: 1px #800000;
|
||||
}
|
||||
section.lead h5 {
|
||||
color: #800000;
|
||||
text-align: left;
|
||||
}
|
||||
section.lead h5 strong {
|
||||
-webkit-text-stroke: 1px #800000;
|
||||
}
|
||||
section.lead p {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: #800000;
|
||||
color: #fff;
|
||||
font-size: 1em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
max-width: 90%;
|
||||
border-top: 0.1em dashed #555;
|
||||
font-size: 60%;
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
}
|
||||
blockquote::before {
|
||||
content: "";
|
||||
}
|
||||
blockquote::after {
|
||||
content: "";
|
||||
}
|
||||
|
||||
img[alt~="center"] {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: 'Source Code Pro', monospace;
|
||||
}
|
||||
126
vault/themes/beamer.css
Normal file
126
vault/themes/beamer.css
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
/* @theme beamer */
|
||||
|
||||
@import "default";
|
||||
|
||||
:root {
|
||||
font-family: "CMU Sans Serif", "Segoe UI", Helvetica, sans-serif;
|
||||
--beamer-main: #1f38c5;
|
||||
--beamer-secondary: #141414;
|
||||
}
|
||||
|
||||
section {
|
||||
background-color: #ffffff;
|
||||
/* bottom two-coloured bar in base64 svg */
|
||||
background-image:
|
||||
url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB3aWR0aD0iMjUwbW0iCiAgIGhlaWdodD0iNS4zNTQ1NjcxbW0iCiAgIHZpZXdCb3g9IjAgMCAyNTAgNS4zNTQ1NjcxIgogICB2ZXJzaW9uPSIxLjEiCiAgIGlkPSJzdmc1IgogICBpbmtzY2FwZTp2ZXJzaW9uPSIxLjEuMSAoM2JmNWFlMGQyNSwgMjAyMS0wOS0yMCkiCiAgIHNvZGlwb2RpOmRvY25hbWU9ImJhci5zdmciCiAgIHhtbG5zOmlua3NjYXBlPSJodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy9uYW1lc3BhY2VzL2lua3NjYXBlIgogICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHNvZGlwb2RpOm5hbWVkdmlldwogICAgIGlkPSJuYW1lZHZpZXc3IgogICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIKICAgICBib3JkZXJjb2xvcj0iIzY2NjY2NiIKICAgICBib3JkZXJvcGFjaXR5PSIxLjAiCiAgICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIKICAgICBpbmtzY2FwZTpwYWdlb3BhY2l0eT0iMC4wIgogICAgIGlua3NjYXBlOnBhZ2VjaGVja2VyYm9hcmQ9IjAiCiAgICAgaW5rc2NhcGU6ZG9jdW1lbnQtdW5pdHM9Im1tIgogICAgIHNob3dncmlkPSJmYWxzZSIKICAgICBzaG93Z3VpZGVzPSJmYWxzZSIKICAgICBmaXQtbWFyZ2luLXRvcD0iMCIKICAgICBmaXQtbWFyZ2luLWxlZnQ9IjAiCiAgICAgZml0LW1hcmdpbi1yaWdodD0iMCIKICAgICBmaXQtbWFyZ2luLWJvdHRvbT0iMCIKICAgICBpbmtzY2FwZTp6b29tPSIwLjc0MTE4OTY1IgogICAgIGlua3NjYXBlOmN4PSI1NjQuNjMyODIiCiAgICAgaW5rc2NhcGU6Y3k9IjkyLjQxODk5MiIKICAgICBpbmtzY2FwZTp3aW5kb3ctd2lkdGg9IjE2ODQiCiAgICAgaW5rc2NhcGU6d2luZG93LWhlaWdodD0iOTQ3IgogICAgIGlua3NjYXBlOndpbmRvdy14PSIxMTQiCiAgICAgaW5rc2NhcGU6d2luZG93LXk9IjMwIgogICAgIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjAiCiAgICAgaW5rc2NhcGU6Y3VycmVudC1sYXllcj0ibGF5ZXIxIgogICAgIHVuaXRzPSJtbSIKICAgICB3aWR0aD0iMjY0bW0iIC8+CiAgPGRlZnMKICAgICBpZD0iZGVmczIiIC8+CiAgPGcKICAgICBpbmtzY2FwZTpsYWJlbD0iVnJzdHZhIDEiCiAgICAgaW5rc2NhcGU6Z3JvdXBtb2RlPSJsYXllciIKICAgICBpZD0ibGF5ZXIxIgogICAgIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMC4zNDczNTUsLTkxLjAyNzY0OSkiPgogICAgPHJlY3QKICAgICAgIHN0eWxlPSJmaWxsOiMxNDE0MTQ7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLXdpZHRoOjAuNDIyOTk5IgogICAgICAgaWQ9InJlY3QzMSIKICAgICAgIHdpZHRoPSIxMjUiCiAgICAgICBoZWlnaHQ9IjUuMzU0NTY3MSIKICAgICAgIHg9IjIwLjM0NzM1NSIKICAgICAgIHk9IjkxLjAyNzY0OSIgLz4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0iZmlsbDojMWYzOGM1O2ZpbGwtb3BhY2l0eToxO3N0cm9rZS13aWR0aDowLjU3Mjc5OSIKICAgICAgIGQ9Im0gMTQ1LjM0NzM1LDkzLjcwNDkzMyB2IC0yLjY3NzI4NCBoIDYyLjUgNjIuNSB2IDIuNjc3Mjg0IDIuNjc3MjgyIGggLTYyLjUgLTYyLjUgeiIKICAgICAgIGlkPSJwYXRoMzk0IiAvPgogIDwvZz4KPC9zdmc+Cg==);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center bottom;
|
||||
background-size: 150% 1em;
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
header {
|
||||
font-size: 0.6em;
|
||||
/* this text-align is important */
|
||||
text-align: right;
|
||||
/* I don't like this absolute positioning, but it works */
|
||||
position: absolute;
|
||||
top: 96.2%;
|
||||
width: 100%;
|
||||
right: 0;
|
||||
left: -51%;
|
||||
color: white;
|
||||
}
|
||||
|
||||
footer {
|
||||
font-size: 0.6em;
|
||||
position: absolute;
|
||||
/* this text-align is important */
|
||||
text-align: left;
|
||||
top: 96.2%;
|
||||
width: 100%;
|
||||
right: 0;
|
||||
left: 50.8%;
|
||||
color: white;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: #141414;
|
||||
}
|
||||
|
||||
/* only apply to the first occurrence of h1 */
|
||||
h1:nth-of-type(1) {
|
||||
font-family: "CMU Bright", "Segoe UI Semibold";
|
||||
color: #ffffff;
|
||||
background-color: var(--beamer-main);
|
||||
border-top: 0.3em solid var(--beamer-main);
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 1.5em;
|
||||
text-indent: 0.5em;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: rgba(100, 100, 100, 0.2);
|
||||
}
|
||||
|
||||
/* formatting page numbers */
|
||||
section::after {
|
||||
font-size: 0.6em;
|
||||
/* https://github.com/yhatt/marp/issues/263 */
|
||||
content: attr(data-marpit-pagination) ' / ' attr(data-marpit-pagination-total);
|
||||
position: absolute;
|
||||
text-align: right;
|
||||
top: 96.2%;
|
||||
width: 100%;
|
||||
right: 0;
|
||||
left: -0.5em;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* inline math was too large wrt text */
|
||||
.katex {
|
||||
font: normal 1.05em KaTeX_Main, 'Times New Roman', serif
|
||||
}
|
||||
|
||||
/* the "center" keyword centers the image - may break, careful */
|
||||
img[alt~="center"] {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* || SECTION CLASS: title */
|
||||
/* title page - only to be used as for a single slide */
|
||||
/* <!-- _class: title --> */
|
||||
section.title>h1 {
|
||||
font-family: "CMU Bright", "Segoe UI Semibold";
|
||||
color: #ffffff;
|
||||
background-color: var(--beamer-main);
|
||||
border-radius: 25px;
|
||||
text-align: center;
|
||||
top: 25%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 80%;
|
||||
padding-bottom: 0.2em;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* remake this to be positioned with respect to h1 */
|
||||
section.title>p {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
top: 35px;
|
||||
}
|
||||
|
||||
/* || SECTION CLASS: tinytext */
|
||||
/* new class that makes p, ul, and blockquote text smaller */
|
||||
/* might be useful for the References slide, use <!-- _class: tinytext --> */
|
||||
section.tinytext>p, section.tinytext>ul, section.tinytext>blockquote {
|
||||
font-size: 0.65em;
|
||||
}
|
||||
62
vault/themes/border.css
Normal file
62
vault/themes/border.css
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
/* @theme border */
|
||||
|
||||
@import "default";
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
|
||||
|
||||
:root {
|
||||
font-family: Inter, Helvetica, Arial;
|
||||
--border-color: #303030;
|
||||
--text-color: #0a0a0a;
|
||||
--bg-color-alt: #dadada;
|
||||
--mark-bg: #ffef92;
|
||||
}
|
||||
|
||||
section {
|
||||
background-image: linear-gradient(to bottom right, #f7f7f7 0%, #d3d3d3 100%);
|
||||
border: 1.3em solid var(--border-color);
|
||||
outline: 1em solid #ffffff;
|
||||
outline-offset: -0.5em;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: rgba(100, 100, 100, 0.2);
|
||||
}
|
||||
|
||||
/* https://github.com/yhatt/marp/issues/263 */
|
||||
section::after {
|
||||
font-size: 0.75em;
|
||||
content: attr(data-marpit-pagination) ' / ' attr(data-marpit-pagination-total);
|
||||
}
|
||||
|
||||
/* the "center" keyword centers the image - may break, careful */
|
||||
img[alt~="center"] {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
background: var(--bg-color-alt);
|
||||
border-left: 10px solid var(--border-color);
|
||||
margin: 0.5em;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
/* taken from the Fluent Typora theme github.com/li3zhen1/Fluent-Typora */
|
||||
mark {
|
||||
background-color: var(--mark-bg);
|
||||
border-radius: 4px;
|
||||
margin-left: 2px;
|
||||
margin-right: 2px;
|
||||
padding: 0px 4px 2px;
|
||||
}
|
||||
|
||||
/* || SECTION CLASS: tinytext */
|
||||
/* new class that makes p, ul, and blockquote text smaller */
|
||||
/* might be useful for the References slide, use <!-- _class: tinytext --> */
|
||||
section.tinytext>p, section.tinytext>ul, section.tinytext>blockquote {
|
||||
font-size: 0.65em;
|
||||
}
|
||||
1788
vault/themes/colors.css
Normal file
1788
vault/themes/colors.css
Normal file
File diff suppressed because it is too large
Load diff
330
vault/themes/dracula.css
Normal file
330
vault/themes/dracula.css
Normal file
|
|
@ -0,0 +1,330 @@
|
|||
@charset "UTF-8";
|
||||
/*!
|
||||
* Marp Dracula theme.
|
||||
* @theme dracula
|
||||
* @author Daniel Nicolas Gisolfi
|
||||
*
|
||||
* @auto-scaling true
|
||||
* @size 4:3 960px 720px
|
||||
* @size 16:9 1280px 720px
|
||||
*/
|
||||
|
||||
@import url("https://fonts.googleapis.com/css?family=Lato:400,900|IBM+Plex+Sans:400,700");
|
||||
|
||||
:root {
|
||||
--dracula-background: #282a36;
|
||||
--dracula-current-line: #44475a;
|
||||
--dracula-foreground: #f8f8f2;
|
||||
--dracula-comment: #6272a4;
|
||||
--dracula-cyan: #8be9fd;
|
||||
--dracula-green: #50fa7b;
|
||||
--dracula-orange: #ffb86c;
|
||||
--dracula-pink: #ff79c6;
|
||||
--dracula-purple:#bd93f9;
|
||||
--dracula-red: #ff5555;
|
||||
--dracula-yellow: #f1fa8c;
|
||||
}
|
||||
|
||||
.hljs {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 0.5em;
|
||||
background: var(--dracula-background);
|
||||
}
|
||||
|
||||
/* Dracula Foreground */
|
||||
.hljs,
|
||||
.hljs-subst,
|
||||
.hljs-typing,
|
||||
.hljs-variable,
|
||||
.hljs-template-variable {
|
||||
color: var(--dracula-foreground);
|
||||
}
|
||||
|
||||
/* Dracula Comment */
|
||||
.hljs-comment,
|
||||
.hljs-quote,
|
||||
.hljs-deletion {
|
||||
color: var(--dracula-comment);
|
||||
}
|
||||
|
||||
/* Dracula Cyan */
|
||||
.hljs-meta .hljs-doctag,
|
||||
.hljs-built_in,
|
||||
.hljs-selector-tag,
|
||||
.hljs-section,
|
||||
.hljs-link,
|
||||
.hljs-class {
|
||||
color: var(--dracula-cyan);
|
||||
}
|
||||
|
||||
|
||||
/* Dracula Green */
|
||||
.hljs-title {
|
||||
color: var(--dracula-green);
|
||||
}
|
||||
|
||||
/* Dracula Orange */
|
||||
.hljs-params {
|
||||
color: var(--dracula-orange);
|
||||
}
|
||||
|
||||
/* Dracula Pink */
|
||||
.hljs-keyword {
|
||||
color: var(--dracula-pink);
|
||||
}
|
||||
|
||||
/* Dracula Purple */
|
||||
.hljs-literal,
|
||||
.hljs-number {
|
||||
color: var(--dracula-purple);
|
||||
}
|
||||
|
||||
/* Dracula Red */
|
||||
.hljs-regexp {
|
||||
color: var(--dracula-red);
|
||||
}
|
||||
|
||||
/* Dracula Yellow */
|
||||
.hljs-string,
|
||||
.hljs-name,
|
||||
.hljs-type,
|
||||
.hljs-attr,
|
||||
.hljs-symbol,
|
||||
.hljs-bullet,
|
||||
.hljs-addition,
|
||||
.hljs-template-tag {
|
||||
color: var(--dracula-yellow);
|
||||
}
|
||||
|
||||
.hljs-keyword,
|
||||
.hljs-selector-tag,
|
||||
.hljs-literal,
|
||||
.hljs-title,
|
||||
.hljs-section,
|
||||
.hljs-doctag,
|
||||
.hljs-type,
|
||||
.hljs-name,
|
||||
.hljs-strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-params,
|
||||
.hljs-emphasis {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
svg[data-marp-fitting=svg] {
|
||||
max-height: 580px;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 0.5em 0 0;
|
||||
color: var(--dracula-pink);
|
||||
}
|
||||
h1 strong,
|
||||
h2 strong,
|
||||
h3 strong,
|
||||
h4 strong,
|
||||
h5 strong,
|
||||
h6 strong {
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.8em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
p,
|
||||
blockquote {
|
||||
margin: 1em 0 0;
|
||||
}
|
||||
|
||||
ul > li,
|
||||
ol > li {
|
||||
margin: 0.3em 0 0;
|
||||
color: var(--dracula-cyan);
|
||||
}
|
||||
ul > li > p,
|
||||
ol > li > p {
|
||||
margin: 0.6em 0 0;
|
||||
}
|
||||
|
||||
code {
|
||||
display: inline-block;
|
||||
font-family: "IBM Plex Mono", monospace;
|
||||
font-size: 0.8em;
|
||||
letter-spacing: 0;
|
||||
margin: -0.1em 0.15em;
|
||||
padding: 0.1em 0.2em;
|
||||
vertical-align: baseline;
|
||||
color: var(--dracula-green);
|
||||
}
|
||||
|
||||
pre {
|
||||
display: block;
|
||||
margin: 1em 0 0;
|
||||
min-height: 1em;
|
||||
overflow: visible;
|
||||
}
|
||||
pre code {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
min-width: 100%;
|
||||
padding: 0.5em;
|
||||
font-size: 0.7em;
|
||||
}
|
||||
pre code svg[data-marp-fitting=svg] {
|
||||
max-height: calc(580px - 1em);
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 1em 0 0;
|
||||
padding: 0 1em;
|
||||
position: relative;
|
||||
color: var(--dracula-orange);
|
||||
}
|
||||
blockquote::after, blockquote::before {
|
||||
content: "“";
|
||||
display: block;
|
||||
font-family: "Times New Roman", serif;
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
color: var(--dracula-green);
|
||||
}
|
||||
blockquote::before {
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
blockquote::after {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
blockquote > *:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
mark {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
table {
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
margin: 1em 0 0;
|
||||
}
|
||||
table th,
|
||||
table td {
|
||||
padding: 0.2em 0.4em;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
section {
|
||||
font-size: 35px;
|
||||
font-family: "IBM Plex Sans";
|
||||
line-height: 1.35;
|
||||
letter-spacing: 1.25px;
|
||||
padding: 70px;
|
||||
color: var(--dracula-foreground);
|
||||
background-color: var(--dracula-background);
|
||||
}
|
||||
section > *:first-child,
|
||||
section > header:first-child + * {
|
||||
margin-top: 0;
|
||||
}
|
||||
section a,
|
||||
section mark {
|
||||
color: var(--dracula-red);
|
||||
}
|
||||
section code {
|
||||
background: var(--dracula-current-line);
|
||||
color: var(--dracula-current-green);
|
||||
}
|
||||
section h1 strong,
|
||||
section h2 strong,
|
||||
section h3 strong,
|
||||
section h4 strong,
|
||||
section h5 strong,
|
||||
section h6 strong {
|
||||
color: var(--dracula-current-line);
|
||||
}
|
||||
section pre > code {
|
||||
background: var(--dracula-current-line);
|
||||
}
|
||||
section header,
|
||||
section footer,
|
||||
section section::after,
|
||||
section blockquote::before,
|
||||
section blockquote::after {
|
||||
color: var(--dracula-comment);
|
||||
}
|
||||
section table th,
|
||||
section table td {
|
||||
border-color: var(--dracula-current-line);
|
||||
}
|
||||
section table thead th {
|
||||
background: var(--dracula-current-line);
|
||||
color: var(--dracula-yellow);
|
||||
}
|
||||
section table tbody > tr:nth-child(even) td,
|
||||
section table tbody > tr:nth-child(even) th {
|
||||
background: var(--dracula-current-line);
|
||||
}
|
||||
|
||||
header,
|
||||
footer,
|
||||
section::after {
|
||||
box-sizing: border-box;
|
||||
font-size: 66%;
|
||||
height: 70px;
|
||||
line-height: 50px;
|
||||
overflow: hidden;
|
||||
padding: 10px 25px;
|
||||
position: absolute;
|
||||
color: var(--dracula-comment);
|
||||
}
|
||||
|
||||
header {
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
footer {
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
section::after {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
font-size: 80%;
|
||||
}
|
||||
|
|
@ -23,7 +23,7 @@ section {
|
|||
color: #28a745; }
|
||||
section pre {
|
||||
display: block;
|
||||
margin: 1em 0 0 0;
|
||||
margin: 1em 0 0;
|
||||
min-height: 1em;
|
||||
overflow: visible; }
|
||||
section pre code {
|
||||
|
|
@ -57,5 +57,3 @@ section.lead {
|
|||
|
||||
section.split div.split {
|
||||
columns: 2; }
|
||||
|
||||
/*# sourceMappingURL=github.css.map */
|
||||
66
vault/themes/gradient.css
Normal file
66
vault/themes/gradient.css
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
/* @theme gradient */
|
||||
|
||||
@import "default";
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
|
||||
|
||||
:root {
|
||||
font-family: Inter, Helvetica, Arial;
|
||||
}
|
||||
|
||||
section {
|
||||
background-color: #ffffff;
|
||||
background-image: linear-gradient(40deg, #e2bee2ad 0%, #a7e1e7ad 100%);
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: #842174;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #9d30a6;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: rgba(146, 146, 146, 0.2);
|
||||
}
|
||||
|
||||
pre {
|
||||
background-color: #ece1ecad;
|
||||
}
|
||||
|
||||
/* https://github.com/yhatt/marp/issues/263 */
|
||||
section::after {
|
||||
font-size: 0.75em;
|
||||
content: attr(data-marpit-pagination) ' / ' attr(data-marpit-pagination-total);
|
||||
}
|
||||
|
||||
/* the "center" keyword centers the image - may break, careful */
|
||||
img[alt~="center"] {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* || SECTION CLASS: blue */
|
||||
section.blue {
|
||||
background-color: #ffffff;
|
||||
background-image: linear-gradient(to bottom right, #cadaf7 0%, #87a7e4 100%);
|
||||
}
|
||||
|
||||
section.blue>h1, section.blue>h2, section.blue>h3, section.blue>h4, section.blue>h5, section.blue>h6 {
|
||||
color: #214484;
|
||||
}
|
||||
|
||||
section.blue>a {
|
||||
color: #303ca6;
|
||||
}
|
||||
|
||||
section.blue::after, section.blue>footer, section.blue>header {
|
||||
color: #303ca6;
|
||||
}
|
||||
|
||||
/* || SECTION CLASS: tinytext */
|
||||
/* new class that makes p, ul, and blockquote text smaller */
|
||||
/* might be useful for the References slide, use <!-- _class: tinytext --> */
|
||||
section.tinytext>p, section.tinytext>ul, section.tinytext>blockquote {
|
||||
font-size: 0.65em;
|
||||
}
|
||||
473
vault/themes/haskell.css
Normal file
473
vault/themes/haskell.css
Normal file
|
|
@ -0,0 +1,473 @@
|
|||
@charset "UTF-8";
|
||||
/*!
|
||||
* Marp / Marpit Haskell theme.
|
||||
*
|
||||
* @theme haskell
|
||||
* @author MATSUBARA Nobutada
|
||||
* @size 4:3 960px 720px
|
||||
* @size 16:9 1280px 720px
|
||||
*/
|
||||
@import url("https://fonts.googleapis.com/css?family=Lato:400,900|Roboto+Mono:400,700");
|
||||
@import url("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.8/styles/github.min.css");
|
||||
svg[data-marp-fitting='svg'] {
|
||||
max-height: 580px; }
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 0.5em 0 0; }
|
||||
h1 strong,
|
||||
h2 strong,
|
||||
h3 strong,
|
||||
h4 strong,
|
||||
h5 strong,
|
||||
h6 strong {
|
||||
font-weight: inherit; }
|
||||
|
||||
h1 {
|
||||
font-size: 1.8em; }
|
||||
|
||||
h2 {
|
||||
font-size: 1.5em; }
|
||||
|
||||
h3 {
|
||||
font-size: 1.3em; }
|
||||
|
||||
h4 {
|
||||
font-size: 1.1em; }
|
||||
|
||||
h5 {
|
||||
font-size: 1em; }
|
||||
|
||||
h6 {
|
||||
font-size: 0.9em; }
|
||||
|
||||
p,
|
||||
blockquote {
|
||||
margin: 1em 0 0; }
|
||||
|
||||
ul > li,
|
||||
ol > li {
|
||||
margin: 0.3em 0 0; }
|
||||
ul > li > p,
|
||||
ol > li > p {
|
||||
margin: 0.6em 0 0; }
|
||||
|
||||
code {
|
||||
display: inline-block;
|
||||
font-family: 'NasuM', 'Roboto Mono', monospace;
|
||||
font-size: 0.8em;
|
||||
letter-spacing: 0;
|
||||
margin: -0.1em 0.15em;
|
||||
padding: 0.1em 0.2em;
|
||||
vertical-align: baseline; }
|
||||
|
||||
pre {
|
||||
display: block;
|
||||
margin: 1em 0 0;
|
||||
min-height: 1em;
|
||||
overflow: visible; }
|
||||
pre code {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
min-width: 100%;
|
||||
padding: 0.5em;
|
||||
font-size: 0.7em; }
|
||||
pre code svg[data-marp-fitting='svg'] {
|
||||
max-height: calc(580px - 1em); }
|
||||
|
||||
blockquote {
|
||||
margin: 1em 0 0;
|
||||
padding: 0 1em;
|
||||
position: relative; }
|
||||
blockquote::after, blockquote::before {
|
||||
content: '“';
|
||||
display: block;
|
||||
font-family: 'Times New Roman', serif;
|
||||
font-weight: bold;
|
||||
position: absolute; }
|
||||
blockquote::before {
|
||||
top: 0;
|
||||
left: 0; }
|
||||
blockquote::after {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
transform: rotate(180deg); }
|
||||
blockquote > *:first-child {
|
||||
margin-top: 0; }
|
||||
|
||||
mark {
|
||||
background: transparent; }
|
||||
|
||||
table {
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
margin: 1em 0 0; }
|
||||
table th,
|
||||
table td {
|
||||
padding: 0.2em 0.4em;
|
||||
border-width: 1px;
|
||||
border-style: solid; }
|
||||
|
||||
section {
|
||||
background-image: linear-gradient(135deg, rgba(136, 136, 136, 0), rgba(136, 136, 136, 0.02) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.05));
|
||||
font-size: 28px;
|
||||
font-family: '源真ゴシック', 'ヒラギノ角ゴ Pro W3', 'Lato', 'Avenir Next', 'Avenir', 'Trebuchet MS', 'Segoe UI', sans-serif;
|
||||
line-height: 1.35;
|
||||
letter-spacing: 1.25px;
|
||||
padding: 70px;
|
||||
color: #323232;
|
||||
background-color: #FFFFFF;
|
||||
background: ""; }
|
||||
section > *:first-child,
|
||||
section > header:first-child + * {
|
||||
margin-top: 0; }
|
||||
section a,
|
||||
section mark {
|
||||
color: #5d4f85; }
|
||||
section code {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
color: #323232; }
|
||||
section h1 strong,
|
||||
section h2 strong,
|
||||
section h3 strong,
|
||||
section h4 strong,
|
||||
section h5 strong,
|
||||
section h6 strong {
|
||||
color: #5d4f85; }
|
||||
section h1 img,
|
||||
section h2 img,
|
||||
section h3 img,
|
||||
section h4 img,
|
||||
section h5 img,
|
||||
section h6 img {
|
||||
display: block;
|
||||
margin: auto; }
|
||||
section pre > code {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
color: #323232; }
|
||||
section header,
|
||||
section footer,
|
||||
section section::after,
|
||||
section blockquote::before,
|
||||
section blockquote::after {
|
||||
color: #5b5b5b; }
|
||||
section table th,
|
||||
section table td {
|
||||
border-color: #323232; }
|
||||
section table thead th {
|
||||
background: #323232;
|
||||
color: #FFFFFF; }
|
||||
section table tbody > tr:nth-child(odd) td,
|
||||
section table tbody > tr:nth-child(odd) th {
|
||||
background: rgba(50, 50, 50, 0.1); }
|
||||
section.invert {
|
||||
color: #FFFFFF;
|
||||
background-color: #323232;
|
||||
background: ""; }
|
||||
section.invert a,
|
||||
section.invert mark {
|
||||
color: #DB83ED; }
|
||||
section.invert code {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
color: #FFFFFF; }
|
||||
section.invert h1 strong,
|
||||
section.invert h2 strong,
|
||||
section.invert h3 strong,
|
||||
section.invert h4 strong,
|
||||
section.invert h5 strong,
|
||||
section.invert h6 strong {
|
||||
color: #DB83ED; }
|
||||
section.invert h1 img,
|
||||
section.invert h2 img,
|
||||
section.invert h3 img,
|
||||
section.invert h4 img,
|
||||
section.invert h5 img,
|
||||
section.invert h6 img {
|
||||
display: block;
|
||||
margin: auto; }
|
||||
section.invert pre > code {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
color: #FFFFFF; }
|
||||
section.invert header,
|
||||
section.invert footer,
|
||||
section.invert section::after,
|
||||
section.invert blockquote::before,
|
||||
section.invert blockquote::after {
|
||||
color: #d6d6d6; }
|
||||
section.invert table th,
|
||||
section.invert table td {
|
||||
border-color: #FFFFFF; }
|
||||
section.invert table thead th {
|
||||
background: #FFFFFF;
|
||||
color: #323232; }
|
||||
section.invert table tbody > tr:nth-child(odd) td,
|
||||
section.invert table tbody > tr:nth-child(odd) th {
|
||||
background: rgba(255, 255, 255, 0.1); }
|
||||
section.haskell {
|
||||
color: #FFFFFF;
|
||||
background-color: #5d4f85;
|
||||
background: url("https://raw.githubusercontent.com/haskell-infra/hl/master/static/img/pattern.png"); }
|
||||
section.haskell a,
|
||||
section.haskell mark {
|
||||
color: #DB83ED; }
|
||||
section.haskell code {
|
||||
background: rgba(235, 228, 243, 0.25);
|
||||
color: #FFFFFF; }
|
||||
section.haskell h1 strong,
|
||||
section.haskell h2 strong,
|
||||
section.haskell h3 strong,
|
||||
section.haskell h4 strong,
|
||||
section.haskell h5 strong,
|
||||
section.haskell h6 strong {
|
||||
color: #DB83ED; }
|
||||
section.haskell h1 img,
|
||||
section.haskell h2 img,
|
||||
section.haskell h3 img,
|
||||
section.haskell h4 img,
|
||||
section.haskell h5 img,
|
||||
section.haskell h6 img {
|
||||
display: block;
|
||||
margin: auto; }
|
||||
section.haskell pre > code {
|
||||
background: rgba(235, 228, 243, 0.25);
|
||||
color: #FFFFFF; }
|
||||
section.haskell header,
|
||||
section.haskell footer,
|
||||
section.haskell section::after,
|
||||
section.haskell blockquote::before,
|
||||
section.haskell blockquote::after {
|
||||
color: #dfdce7; }
|
||||
section.haskell table th,
|
||||
section.haskell table td {
|
||||
border-color: #FFFFFF; }
|
||||
section.haskell table thead th {
|
||||
background: #FFFFFF;
|
||||
color: #5d4f85; }
|
||||
section.haskell table tbody > tr:nth-child(odd) td,
|
||||
section.haskell table tbody > tr:nth-child(odd) th {
|
||||
background: rgba(255, 255, 255, 0.1); }
|
||||
section.lead {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center; }
|
||||
section.lead h1,
|
||||
section.lead h2,
|
||||
section.lead h3,
|
||||
section.lead h4,
|
||||
section.lead h5,
|
||||
section.lead h6 {
|
||||
text-align: center; }
|
||||
section.lead h1 svg[data-marp-fitting='svg'],
|
||||
section.lead h2 svg[data-marp-fitting='svg'],
|
||||
section.lead h3 svg[data-marp-fitting='svg'],
|
||||
section.lead h4 svg[data-marp-fitting='svg'],
|
||||
section.lead h5 svg[data-marp-fitting='svg'],
|
||||
section.lead h6 svg[data-marp-fitting='svg'] {
|
||||
--preserve-aspect-ratio: xMidYMid meet; }
|
||||
section.lead p {
|
||||
text-align: center; }
|
||||
section.lead blockquote > h1,
|
||||
section.lead blockquote > h2,
|
||||
section.lead blockquote > h3,
|
||||
section.lead blockquote > h4,
|
||||
section.lead blockquote > h5,
|
||||
section.lead blockquote > h6,
|
||||
section.lead blockquote > p {
|
||||
text-align: left; }
|
||||
section.lead blockquote svg[data-marp-fitting='svg']:not([data-marp-fitting-math]) {
|
||||
--preserve-aspect-ratio: xMinYMin meet; }
|
||||
section.lead ul > li > p,
|
||||
section.lead ol > li > p {
|
||||
text-align: left; }
|
||||
section.lead table {
|
||||
margin-left: auto;
|
||||
margin-right: auto; }
|
||||
section.lead-invert {
|
||||
color: #FFFFFF;
|
||||
background-color: #323232;
|
||||
background: "";
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center; }
|
||||
section.lead-invert a,
|
||||
section.lead-invert mark {
|
||||
color: #DB83ED; }
|
||||
section.lead-invert code {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
color: #FFFFFF; }
|
||||
section.lead-invert h1 strong,
|
||||
section.lead-invert h2 strong,
|
||||
section.lead-invert h3 strong,
|
||||
section.lead-invert h4 strong,
|
||||
section.lead-invert h5 strong,
|
||||
section.lead-invert h6 strong {
|
||||
color: #DB83ED; }
|
||||
section.lead-invert h1 img,
|
||||
section.lead-invert h2 img,
|
||||
section.lead-invert h3 img,
|
||||
section.lead-invert h4 img,
|
||||
section.lead-invert h5 img,
|
||||
section.lead-invert h6 img {
|
||||
display: block;
|
||||
margin: auto; }
|
||||
section.lead-invert pre > code {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
color: #FFFFFF; }
|
||||
section.lead-invert header,
|
||||
section.lead-invert footer,
|
||||
section.lead-invert section::after,
|
||||
section.lead-invert blockquote::before,
|
||||
section.lead-invert blockquote::after {
|
||||
color: #d6d6d6; }
|
||||
section.lead-invert table th,
|
||||
section.lead-invert table td {
|
||||
border-color: #FFFFFF; }
|
||||
section.lead-invert table thead th {
|
||||
background: #FFFFFF;
|
||||
color: #323232; }
|
||||
section.lead-invert table tbody > tr:nth-child(odd) td,
|
||||
section.lead-invert table tbody > tr:nth-child(odd) th {
|
||||
background: rgba(255, 255, 255, 0.1); }
|
||||
section.lead-invert h1,
|
||||
section.lead-invert h2,
|
||||
section.lead-invert h3,
|
||||
section.lead-invert h4,
|
||||
section.lead-invert h5,
|
||||
section.lead-invert h6 {
|
||||
text-align: center; }
|
||||
section.lead-invert h1 svg[data-marp-fitting='svg'],
|
||||
section.lead-invert h2 svg[data-marp-fitting='svg'],
|
||||
section.lead-invert h3 svg[data-marp-fitting='svg'],
|
||||
section.lead-invert h4 svg[data-marp-fitting='svg'],
|
||||
section.lead-invert h5 svg[data-marp-fitting='svg'],
|
||||
section.lead-invert h6 svg[data-marp-fitting='svg'] {
|
||||
--preserve-aspect-ratio: xMidYMid meet; }
|
||||
section.lead-invert p {
|
||||
text-align: center; }
|
||||
section.lead-invert blockquote > h1,
|
||||
section.lead-invert blockquote > h2,
|
||||
section.lead-invert blockquote > h3,
|
||||
section.lead-invert blockquote > h4,
|
||||
section.lead-invert blockquote > h5,
|
||||
section.lead-invert blockquote > h6,
|
||||
section.lead-invert blockquote > p {
|
||||
text-align: left; }
|
||||
section.lead-invert blockquote svg[data-marp-fitting='svg']:not([data-marp-fitting-math]) {
|
||||
--preserve-aspect-ratio: xMinYMin meet; }
|
||||
section.lead-invert ul > li > p,
|
||||
section.lead-invert ol > li > p {
|
||||
text-align: left; }
|
||||
section.lead-invert table {
|
||||
margin-left: auto;
|
||||
margin-right: auto; }
|
||||
section.lead-haskell {
|
||||
color: #FFFFFF;
|
||||
background-color: #5d4f85;
|
||||
background: url("https://raw.githubusercontent.com/haskell-infra/hl/master/static/img/pattern.png");
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center; }
|
||||
section.lead-haskell a,
|
||||
section.lead-haskell mark {
|
||||
color: #DB83ED; }
|
||||
section.lead-haskell code {
|
||||
background: rgba(235, 228, 243, 0.25);
|
||||
color: #FFFFFF; }
|
||||
section.lead-haskell h1 strong,
|
||||
section.lead-haskell h2 strong,
|
||||
section.lead-haskell h3 strong,
|
||||
section.lead-haskell h4 strong,
|
||||
section.lead-haskell h5 strong,
|
||||
section.lead-haskell h6 strong {
|
||||
color: #DB83ED; }
|
||||
section.lead-haskell h1 img,
|
||||
section.lead-haskell h2 img,
|
||||
section.lead-haskell h3 img,
|
||||
section.lead-haskell h4 img,
|
||||
section.lead-haskell h5 img,
|
||||
section.lead-haskell h6 img {
|
||||
display: block;
|
||||
margin: auto; }
|
||||
section.lead-haskell pre > code {
|
||||
background: rgba(235, 228, 243, 0.25);
|
||||
color: #FFFFFF; }
|
||||
section.lead-haskell header,
|
||||
section.lead-haskell footer,
|
||||
section.lead-haskell section::after,
|
||||
section.lead-haskell blockquote::before,
|
||||
section.lead-haskell blockquote::after {
|
||||
color: #dfdce7; }
|
||||
section.lead-haskell table th,
|
||||
section.lead-haskell table td {
|
||||
border-color: #FFFFFF; }
|
||||
section.lead-haskell table thead th {
|
||||
background: #FFFFFF;
|
||||
color: #5d4f85; }
|
||||
section.lead-haskell table tbody > tr:nth-child(odd) td,
|
||||
section.lead-haskell table tbody > tr:nth-child(odd) th {
|
||||
background: rgba(255, 255, 255, 0.1); }
|
||||
section.lead-haskell h1,
|
||||
section.lead-haskell h2,
|
||||
section.lead-haskell h3,
|
||||
section.lead-haskell h4,
|
||||
section.lead-haskell h5,
|
||||
section.lead-haskell h6 {
|
||||
text-align: center; }
|
||||
section.lead-haskell h1 svg[data-marp-fitting='svg'],
|
||||
section.lead-haskell h2 svg[data-marp-fitting='svg'],
|
||||
section.lead-haskell h3 svg[data-marp-fitting='svg'],
|
||||
section.lead-haskell h4 svg[data-marp-fitting='svg'],
|
||||
section.lead-haskell h5 svg[data-marp-fitting='svg'],
|
||||
section.lead-haskell h6 svg[data-marp-fitting='svg'] {
|
||||
--preserve-aspect-ratio: xMidYMid meet; }
|
||||
section.lead-haskell p {
|
||||
text-align: center; }
|
||||
section.lead-haskell blockquote > h1,
|
||||
section.lead-haskell blockquote > h2,
|
||||
section.lead-haskell blockquote > h3,
|
||||
section.lead-haskell blockquote > h4,
|
||||
section.lead-haskell blockquote > h5,
|
||||
section.lead-haskell blockquote > h6,
|
||||
section.lead-haskell blockquote > p {
|
||||
text-align: left; }
|
||||
section.lead-haskell blockquote svg[data-marp-fitting='svg']:not([data-marp-fitting-math]) {
|
||||
--preserve-aspect-ratio: xMinYMin meet; }
|
||||
section.lead-haskell ul > li > p,
|
||||
section.lead-haskell ol > li > p {
|
||||
text-align: left; }
|
||||
section.lead-haskell table {
|
||||
margin-left: auto;
|
||||
margin-right: auto; }
|
||||
|
||||
header,
|
||||
footer,
|
||||
section::after {
|
||||
box-sizing: border-box;
|
||||
font-size: 66%;
|
||||
height: 70px;
|
||||
line-height: 50px;
|
||||
overflow: hidden;
|
||||
padding: 10px 25px;
|
||||
position: absolute; }
|
||||
|
||||
header {
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0; }
|
||||
|
||||
footer {
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0; }
|
||||
|
||||
section::after {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
font-size: 80%; }
|
||||
68
vault/themes/iggg.css
Normal file
68
vault/themes/iggg.css
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
@charset "UTF-8";
|
||||
/*!
|
||||
* Marp / Marpit IGGG theme.
|
||||
*
|
||||
* @theme iggg
|
||||
* @author MATSUBARA Nobutada
|
||||
* @size 4:3 960px 720px
|
||||
* @size 16:9 1280px 720px
|
||||
*/
|
||||
@import url("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/styles/github.min.css");
|
||||
section {
|
||||
background-color: white;
|
||||
color: #323232;
|
||||
font-size: 28px;
|
||||
line-height: 1.35;
|
||||
letter-spacing: 1.25px;
|
||||
padding: 70px;
|
||||
font-family: '源真ゴシック', 'ヒラギノ角ゴ Pro W3', 'Lato', 'Avenir Next', 'Avenir', 'Trebuchet MS', 'Segoe UI', sans-serif; }
|
||||
section > *:first-child {
|
||||
margin-top: -0.5em;
|
||||
margin-bottom: 0; }
|
||||
section strong {
|
||||
color: #1b7aca; }
|
||||
section pre {
|
||||
display: block;
|
||||
margin: 1em 0 0;
|
||||
min-height: 1em;
|
||||
overflow: visible; }
|
||||
section pre code {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
min-width: 100%;
|
||||
padding: 0.5em;
|
||||
font-size: 0.7em;
|
||||
background-color: rgba(0, 0, 0, 0.1); }
|
||||
section code {
|
||||
display: inline-block;
|
||||
font-family: 'NasuM', 'Roboto Mono', monospace;
|
||||
font-size: 0.8em;
|
||||
letter-spacing: 0;
|
||||
margin: -0.1em 0.15em;
|
||||
padding: 0.1em 0.2em;
|
||||
vertical-align: baseline;
|
||||
background-color: rgba(0, 0, 0, 0.1); }
|
||||
section ul > li,
|
||||
section ol > li {
|
||||
margin: 0.3em 0 0; }
|
||||
section ul > li > p,
|
||||
section ol > li > p {
|
||||
margin: 0.6em 0 0; }
|
||||
section img[alt~="center"] {
|
||||
display: block;
|
||||
margin: 0 auto; }
|
||||
|
||||
section.lead {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
text-align: center; }
|
||||
section.lead > *:first-child {
|
||||
margin-top: 0; }
|
||||
|
||||
section.split div.column {
|
||||
display: table-cell;
|
||||
columns: 2; }
|
||||
section.split div.column h3 {
|
||||
break-before: column; }
|
||||
463
vault/themes/olive.css
Normal file
463
vault/themes/olive.css
Normal file
|
|
@ -0,0 +1,463 @@
|
|||
@charset "UTF-8";
|
||||
/*!
|
||||
* Marp / Marpit Olive theme.
|
||||
*
|
||||
* @theme olive
|
||||
* @author MATSUBARA Nobutada
|
||||
* @size 4:3 960px 720px
|
||||
* @size 16:9 1280px 720px
|
||||
*/
|
||||
@import url("https://fonts.googleapis.com/css?family=Lato:400,900|Roboto+Mono:400,700");
|
||||
@import url("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.8/styles/github.min.css");
|
||||
svg[data-marp-fitting='svg'] {
|
||||
max-height: 580px; }
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 0.5em 0 0; }
|
||||
h1 strong,
|
||||
h2 strong,
|
||||
h3 strong,
|
||||
h4 strong,
|
||||
h5 strong,
|
||||
h6 strong {
|
||||
font-weight: inherit; }
|
||||
|
||||
h1 {
|
||||
font-size: 1.8em; }
|
||||
|
||||
h2 {
|
||||
font-size: 1.5em; }
|
||||
|
||||
h3 {
|
||||
font-size: 1.3em; }
|
||||
|
||||
h4 {
|
||||
font-size: 1.1em; }
|
||||
|
||||
h5 {
|
||||
font-size: 1em; }
|
||||
|
||||
h6 {
|
||||
font-size: 0.9em; }
|
||||
|
||||
p,
|
||||
blockquote {
|
||||
margin: 1em 0 0; }
|
||||
|
||||
ul > li,
|
||||
ol > li {
|
||||
margin: 0.3em 0 0; }
|
||||
ul > li > p,
|
||||
ol > li > p {
|
||||
margin: 0.6em 0 0; }
|
||||
|
||||
code {
|
||||
display: inline-block;
|
||||
font-family: 'NasuM', 'Roboto Mono', monospace;
|
||||
font-size: 0.8em;
|
||||
letter-spacing: 0;
|
||||
margin: -0.1em 0.15em;
|
||||
padding: 0.1em 0.2em;
|
||||
vertical-align: baseline; }
|
||||
|
||||
pre {
|
||||
display: block;
|
||||
margin: 1em 0 0;
|
||||
min-height: 1em;
|
||||
overflow: visible; }
|
||||
pre code {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
min-width: 100%;
|
||||
padding: 0.5em;
|
||||
font-size: 0.7em; }
|
||||
pre code svg[data-marp-fitting='svg'] {
|
||||
max-height: calc(580px - 1em); }
|
||||
|
||||
blockquote {
|
||||
margin: 1em 0 0;
|
||||
padding: 0 1em;
|
||||
position: relative; }
|
||||
blockquote::after, blockquote::before {
|
||||
content: '“';
|
||||
display: block;
|
||||
font-family: 'Times New Roman', serif;
|
||||
font-weight: bold;
|
||||
position: absolute; }
|
||||
blockquote::before {
|
||||
top: 0;
|
||||
left: 0; }
|
||||
blockquote::after {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
transform: rotate(180deg); }
|
||||
blockquote > *:first-child {
|
||||
margin-top: 0; }
|
||||
|
||||
mark {
|
||||
background: transparent; }
|
||||
|
||||
table {
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
margin: 1em 0 0; }
|
||||
table th,
|
||||
table td {
|
||||
padding: 0.2em 0.4em;
|
||||
border-width: 1px;
|
||||
border-style: solid; }
|
||||
|
||||
section {
|
||||
background-image: linear-gradient(135deg, rgba(136, 136, 136, 0), rgba(136, 136, 136, 0.02) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.05));
|
||||
font-size: 28px;
|
||||
font-family: '源真ゴシック', 'ヒラギノ角ゴ Pro W3', 'Lato', 'Avenir Next', 'Avenir', 'Trebuchet MS', 'Segoe UI', sans-serif;
|
||||
line-height: 1.35;
|
||||
letter-spacing: 1.25px;
|
||||
padding: 70px;
|
||||
color: #FFF2DD;
|
||||
background-color: #4e4f53; }
|
||||
section > *:first-child,
|
||||
section > header:first-child + * {
|
||||
margin-top: 0; }
|
||||
section a,
|
||||
section mark {
|
||||
color: #CCA551; }
|
||||
section code {
|
||||
background: #dcd1c1;
|
||||
color: #4e4f53; }
|
||||
section h1 strong,
|
||||
section h2 strong,
|
||||
section h3 strong,
|
||||
section h4 strong,
|
||||
section h5 strong,
|
||||
section h6 strong {
|
||||
color: #CCA551; }
|
||||
section h1 img,
|
||||
section h2 img,
|
||||
section h3 img,
|
||||
section h4 img,
|
||||
section h5 img,
|
||||
section h6 img {
|
||||
display: block;
|
||||
margin: auto; }
|
||||
section pre > code {
|
||||
background: #FFF2DD; }
|
||||
section header,
|
||||
section footer,
|
||||
section section::after,
|
||||
section blockquote::before,
|
||||
section blockquote::after {
|
||||
color: #dcd1c1; }
|
||||
section table th,
|
||||
section table td {
|
||||
border-color: #FFF2DD; }
|
||||
section table thead th {
|
||||
background: #FFF2DD;
|
||||
color: #4e4f53; }
|
||||
section table tbody > tr:nth-child(odd) td,
|
||||
section table tbody > tr:nth-child(odd) th {
|
||||
background: rgba(255, 242, 221, 0.1); }
|
||||
section.invert {
|
||||
color: #4e4f53;
|
||||
background-color: #FFF2DD; }
|
||||
section.invert a,
|
||||
section.invert mark {
|
||||
color: #CCA551; }
|
||||
section.invert code {
|
||||
background: #71706f;
|
||||
color: #FFF2DD; }
|
||||
section.invert h1 strong,
|
||||
section.invert h2 strong,
|
||||
section.invert h3 strong,
|
||||
section.invert h4 strong,
|
||||
section.invert h5 strong,
|
||||
section.invert h6 strong {
|
||||
color: #CCA551; }
|
||||
section.invert h1 img,
|
||||
section.invert h2 img,
|
||||
section.invert h3 img,
|
||||
section.invert h4 img,
|
||||
section.invert h5 img,
|
||||
section.invert h6 img {
|
||||
display: block;
|
||||
margin: auto; }
|
||||
section.invert pre > code {
|
||||
background: #4e4f53; }
|
||||
section.invert header,
|
||||
section.invert footer,
|
||||
section.invert section::after,
|
||||
section.invert blockquote::before,
|
||||
section.invert blockquote::after {
|
||||
color: #71706f; }
|
||||
section.invert table th,
|
||||
section.invert table td {
|
||||
border-color: #4e4f53; }
|
||||
section.invert table thead th {
|
||||
background: #4e4f53;
|
||||
color: #FFF2DD; }
|
||||
section.invert table tbody > tr:nth-child(odd) td,
|
||||
section.invert table tbody > tr:nth-child(odd) th {
|
||||
background: rgba(78, 79, 83, 0.1); }
|
||||
section.olive {
|
||||
color: #4e4f53;
|
||||
background-color: #CCA551; }
|
||||
section.olive a,
|
||||
section.olive mark {
|
||||
color: #FFF2DD; }
|
||||
section.olive code {
|
||||
background: #676053;
|
||||
color: #CCA551; }
|
||||
section.olive h1 strong,
|
||||
section.olive h2 strong,
|
||||
section.olive h3 strong,
|
||||
section.olive h4 strong,
|
||||
section.olive h5 strong,
|
||||
section.olive h6 strong {
|
||||
color: #FFF2DD; }
|
||||
section.olive h1 img,
|
||||
section.olive h2 img,
|
||||
section.olive h3 img,
|
||||
section.olive h4 img,
|
||||
section.olive h5 img,
|
||||
section.olive h6 img {
|
||||
display: block;
|
||||
margin: auto; }
|
||||
section.olive pre > code {
|
||||
background: #4e4f53; }
|
||||
section.olive header,
|
||||
section.olive footer,
|
||||
section.olive section::after,
|
||||
section.olive blockquote::before,
|
||||
section.olive blockquote::after {
|
||||
color: #676053; }
|
||||
section.olive table th,
|
||||
section.olive table td {
|
||||
border-color: #4e4f53; }
|
||||
section.olive table thead th {
|
||||
background: #4e4f53;
|
||||
color: #CCA551; }
|
||||
section.olive table tbody > tr:nth-child(odd) td,
|
||||
section.olive table tbody > tr:nth-child(odd) th {
|
||||
background: rgba(78, 79, 83, 0.1); }
|
||||
section.lead {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center; }
|
||||
section.lead h1,
|
||||
section.lead h2,
|
||||
section.lead h3,
|
||||
section.lead h4,
|
||||
section.lead h5,
|
||||
section.lead h6 {
|
||||
text-align: center; }
|
||||
section.lead h1 svg[data-marp-fitting='svg'],
|
||||
section.lead h2 svg[data-marp-fitting='svg'],
|
||||
section.lead h3 svg[data-marp-fitting='svg'],
|
||||
section.lead h4 svg[data-marp-fitting='svg'],
|
||||
section.lead h5 svg[data-marp-fitting='svg'],
|
||||
section.lead h6 svg[data-marp-fitting='svg'] {
|
||||
--preserve-aspect-ratio: xMidYMid meet; }
|
||||
section.lead p {
|
||||
text-align: center; }
|
||||
section.lead blockquote > h1,
|
||||
section.lead blockquote > h2,
|
||||
section.lead blockquote > h3,
|
||||
section.lead blockquote > h4,
|
||||
section.lead blockquote > h5,
|
||||
section.lead blockquote > h6,
|
||||
section.lead blockquote > p {
|
||||
text-align: left; }
|
||||
section.lead blockquote svg[data-marp-fitting='svg']:not([data-marp-fitting-math]) {
|
||||
--preserve-aspect-ratio: xMinYMin meet; }
|
||||
section.lead ul > li > p,
|
||||
section.lead ol > li > p {
|
||||
text-align: left; }
|
||||
section.lead table {
|
||||
margin-left: auto;
|
||||
margin-right: auto; }
|
||||
section.lead-invert {
|
||||
color: #4e4f53;
|
||||
background-color: #FFF2DD;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center; }
|
||||
section.lead-invert a,
|
||||
section.lead-invert mark {
|
||||
color: #CCA551; }
|
||||
section.lead-invert code {
|
||||
background: #71706f;
|
||||
color: #FFF2DD; }
|
||||
section.lead-invert h1 strong,
|
||||
section.lead-invert h2 strong,
|
||||
section.lead-invert h3 strong,
|
||||
section.lead-invert h4 strong,
|
||||
section.lead-invert h5 strong,
|
||||
section.lead-invert h6 strong {
|
||||
color: #CCA551; }
|
||||
section.lead-invert h1 img,
|
||||
section.lead-invert h2 img,
|
||||
section.lead-invert h3 img,
|
||||
section.lead-invert h4 img,
|
||||
section.lead-invert h5 img,
|
||||
section.lead-invert h6 img {
|
||||
display: block;
|
||||
margin: auto; }
|
||||
section.lead-invert pre > code {
|
||||
background: #4e4f53; }
|
||||
section.lead-invert header,
|
||||
section.lead-invert footer,
|
||||
section.lead-invert section::after,
|
||||
section.lead-invert blockquote::before,
|
||||
section.lead-invert blockquote::after {
|
||||
color: #71706f; }
|
||||
section.lead-invert table th,
|
||||
section.lead-invert table td {
|
||||
border-color: #4e4f53; }
|
||||
section.lead-invert table thead th {
|
||||
background: #4e4f53;
|
||||
color: #FFF2DD; }
|
||||
section.lead-invert table tbody > tr:nth-child(odd) td,
|
||||
section.lead-invert table tbody > tr:nth-child(odd) th {
|
||||
background: rgba(78, 79, 83, 0.1); }
|
||||
section.lead-invert h1,
|
||||
section.lead-invert h2,
|
||||
section.lead-invert h3,
|
||||
section.lead-invert h4,
|
||||
section.lead-invert h5,
|
||||
section.lead-invert h6 {
|
||||
text-align: center; }
|
||||
section.lead-invert h1 svg[data-marp-fitting='svg'],
|
||||
section.lead-invert h2 svg[data-marp-fitting='svg'],
|
||||
section.lead-invert h3 svg[data-marp-fitting='svg'],
|
||||
section.lead-invert h4 svg[data-marp-fitting='svg'],
|
||||
section.lead-invert h5 svg[data-marp-fitting='svg'],
|
||||
section.lead-invert h6 svg[data-marp-fitting='svg'] {
|
||||
--preserve-aspect-ratio: xMidYMid meet; }
|
||||
section.lead-invert p {
|
||||
text-align: center; }
|
||||
section.lead-invert blockquote > h1,
|
||||
section.lead-invert blockquote > h2,
|
||||
section.lead-invert blockquote > h3,
|
||||
section.lead-invert blockquote > h4,
|
||||
section.lead-invert blockquote > h5,
|
||||
section.lead-invert blockquote > h6,
|
||||
section.lead-invert blockquote > p {
|
||||
text-align: left; }
|
||||
section.lead-invert blockquote svg[data-marp-fitting='svg']:not([data-marp-fitting-math]) {
|
||||
--preserve-aspect-ratio: xMinYMin meet; }
|
||||
section.lead-invert ul > li > p,
|
||||
section.lead-invert ol > li > p {
|
||||
text-align: left; }
|
||||
section.lead-invert table {
|
||||
margin-left: auto;
|
||||
margin-right: auto; }
|
||||
section.lead-olive {
|
||||
color: #4e4f53;
|
||||
background-color: #CCA551;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center; }
|
||||
section.lead-olive a,
|
||||
section.lead-olive mark {
|
||||
color: #FFF2DD; }
|
||||
section.lead-olive code {
|
||||
background: #676053;
|
||||
color: #CCA551; }
|
||||
section.lead-olive h1 strong,
|
||||
section.lead-olive h2 strong,
|
||||
section.lead-olive h3 strong,
|
||||
section.lead-olive h4 strong,
|
||||
section.lead-olive h5 strong,
|
||||
section.lead-olive h6 strong {
|
||||
color: #FFF2DD; }
|
||||
section.lead-olive h1 img,
|
||||
section.lead-olive h2 img,
|
||||
section.lead-olive h3 img,
|
||||
section.lead-olive h4 img,
|
||||
section.lead-olive h5 img,
|
||||
section.lead-olive h6 img {
|
||||
display: block;
|
||||
margin: auto; }
|
||||
section.lead-olive pre > code {
|
||||
background: #4e4f53; }
|
||||
section.lead-olive header,
|
||||
section.lead-olive footer,
|
||||
section.lead-olive section::after,
|
||||
section.lead-olive blockquote::before,
|
||||
section.lead-olive blockquote::after {
|
||||
color: #676053; }
|
||||
section.lead-olive table th,
|
||||
section.lead-olive table td {
|
||||
border-color: #4e4f53; }
|
||||
section.lead-olive table thead th {
|
||||
background: #4e4f53;
|
||||
color: #CCA551; }
|
||||
section.lead-olive table tbody > tr:nth-child(odd) td,
|
||||
section.lead-olive table tbody > tr:nth-child(odd) th {
|
||||
background: rgba(78, 79, 83, 0.1); }
|
||||
section.lead-olive h1,
|
||||
section.lead-olive h2,
|
||||
section.lead-olive h3,
|
||||
section.lead-olive h4,
|
||||
section.lead-olive h5,
|
||||
section.lead-olive h6 {
|
||||
text-align: center; }
|
||||
section.lead-olive h1 svg[data-marp-fitting='svg'],
|
||||
section.lead-olive h2 svg[data-marp-fitting='svg'],
|
||||
section.lead-olive h3 svg[data-marp-fitting='svg'],
|
||||
section.lead-olive h4 svg[data-marp-fitting='svg'],
|
||||
section.lead-olive h5 svg[data-marp-fitting='svg'],
|
||||
section.lead-olive h6 svg[data-marp-fitting='svg'] {
|
||||
--preserve-aspect-ratio: xMidYMid meet; }
|
||||
section.lead-olive p {
|
||||
text-align: center; }
|
||||
section.lead-olive blockquote > h1,
|
||||
section.lead-olive blockquote > h2,
|
||||
section.lead-olive blockquote > h3,
|
||||
section.lead-olive blockquote > h4,
|
||||
section.lead-olive blockquote > h5,
|
||||
section.lead-olive blockquote > h6,
|
||||
section.lead-olive blockquote > p {
|
||||
text-align: left; }
|
||||
section.lead-olive blockquote svg[data-marp-fitting='svg']:not([data-marp-fitting-math]) {
|
||||
--preserve-aspect-ratio: xMinYMin meet; }
|
||||
section.lead-olive ul > li > p,
|
||||
section.lead-olive ol > li > p {
|
||||
text-align: left; }
|
||||
section.lead-olive table {
|
||||
margin-left: auto;
|
||||
margin-right: auto; }
|
||||
|
||||
header,
|
||||
footer,
|
||||
section::after {
|
||||
box-sizing: border-box;
|
||||
font-size: 66%;
|
||||
height: 70px;
|
||||
line-height: 50px;
|
||||
overflow: hidden;
|
||||
padding: 10px 25px;
|
||||
position: absolute; }
|
||||
|
||||
header {
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0; }
|
||||
|
||||
footer {
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0; }
|
||||
|
||||
section::after {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
font-size: 80%; }
|
||||
Loading…
Reference in a new issue