---
# System prepended metadata

title: '[v2] Get started to slide with PastLeo theme'
tags: [slide]

---

---
title: '[v2] Get started to slide with PastLeo theme'
tags: slide
type: slide
slideOptions:
  spotlight:
    enabled: true
    size: 80
    presentingCursor: "default"
    toggleSpotlightOnMouseDown: false
    spotlightOnKeyPressAndHold: 90 # 按著 'z' 啟動聚光燈
    initialPresentationMode: true
    disablingUserSelect: false
    fadeInAndOut: 500
  allottedMinutes: 5  # 簡報時間分鐘數

# 複製這段 meta YAML 到頂端，並且在 meta YAML 下方加上 {%hackmd BJqmTNgxD %} 引入 style

# ![some-alt.](url) => 無邊框, 陰影圖片

# flex 左右排版:
# <div class="d-flex">
# <div class="flex-1">
#
# 內容，佔 1/3
#
# </div>
# <div class="flex-2">
#
# 內容，佔 2/3
#
# </div>
# </div>

---

<style id='reveal-style'>
.reveal {
  background: #ecffe4;
}
.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6, .reveal p, .reveal li {
  color: #004a1b;
  text-transform: none;
  font-family: "Noto Sans", Helvetica, sans-serif;
}
.reveal a { color: #beg005a98; }
.reveal img { max-height: 50vh; }
.reveal img[alt$=.] {
  background: none;
  border: none;
  box-shadow: none;
}
.reveal .notes { display: none; }
#doc .notes {
  border: 1px solid #7cf5a4;
  background: black;
  color: #7cf5a4;
  padding: 25px 10px 0px;
  opacity: 0.8;
}

.reveal pre, .reveal code {
  font-family: "Source Code Pro", monospace;
  color: black;
}
.reveal pre {
  font-size: 0.75em;
}
.reveal code {
  background: #fff;
  padding: 0.5rem;
  border-radius: 0.25em;
}
</style>

<style id='reveal-ext'>
.reveal img[alt$=\.] {
  background: none;
  border: none;
  box-shadow: none;
}
.reveal .d-flex {
  display: flex;
  align-items: center;
}
.reveal .flex-1 {
  flex: 1;
}
.reveal .flex-2 {
  flex: 2;
}
.reveal .flex-3 {
  flex: 3;
}
</style>

<style id='xcode-highlight'>
.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  background: #fff;
  color: black;
}

.hljs-function,
.token.function,
.hljs-punctuation,
.token.punctuation,
.hljs-operator,
.token.operator,
.hljs-constant,
.token.constant
{
  color: black;
}

.hljs-comment,
.token.comment,
.hljs-quote,
.token.quote
{
  color: #006a00;
}

.hljs-keyword,
.token.keyword,
.hljs-selector-tag,
.token.selector-tag,
.hljs-literal,
.token.literal
{
  color: #aa0d91;
}

.hljs-name,
.token.name
{
  color: #008;
}

.hljs-variable,
.token.variable,
.hljs-template-variable,
.token.template-variable
{
  color: #660;
}

.hljs-string,
.token.string
{
  color: #c41a16;
}

.hljs-regexp,
.token.regexp,
.hljs-link,
.token.link
{
  color: #080;
}

.hljs-title,
.token.title,
.hljs-tag,
.token.tag,
.hljs-symbol,
.token.symbol,
.hljs-bullet,
.token.bullet,
.hljs-number,
.token.number,
.hljs-meta,
.token.meta
{
  color: #1c00cf;
}

.hljs-section,
.token.section,
.hljs-class .hljs-title,
.token.class-name,
.hljs-type,
.token.type,
.hljs-attr,
.token.attr,
.hljs-built_in,
.token.built_in,
.hljs-builtin-name,
.token.builtin-name,
.hljs-params,
.token.params
{
  color: #5c2699;
}

.hljs-attribute,
.token.attribute,
.hljs-subst,
.token.subst
{
  color: #000;
}

.hljs-formula,
.token.formula
{
  background-color: #eee;
  font-style: italic;
}

.hljs-addition
.token.addition
{
  background-color: #baeeba;
}

.hljs-deletion,
.token.deletion
{
  background-color: #ffc8bd;
}

.hljs-selector-id,
.token.selector-id,
.hljs-selector-class,
.token.selector-class
{
  color: #9b703f;
}

.hljs-doctag,
.token.doctag,
.hljs-strong,
.token.strong
{
  font-weight: bold;
}

.hljs-emphasis
.token.emphasis
{
  font-style: italic;
}
</style>

<style id='progress'>
.progress > div {
  background-color: #7da06f !important;
}
</style>