---
# System prepended metadata

title: Bob's reveal.js additional style set.

---

---
title: Bob's reveal.js additional style set.
description: Add `{%hackmd @bobchao/slide-style %}` in your reveal.js slide deck on HackMD
tag: theme
---
<style>

.reveal small { /* 無法理解為什麼 small 本來居然要上移*/
    vertical-align: middle;
    margin-top: -0.5em;
}

div.shortlist {
    width: 18em;
    text-align: left;
    margin: auto;
}

.onelinecard {
    display: inline-block;
    background: #fff;
    color: #000;
    padding: .2em;
    font-weight: bolder;
    font-size: 2em;
    border-radius: .2em;
    box-shadow: .2em .1em .5em rgba(0,0,0,.7);
}

.card {
    display: block;
    text-align: left;
    margin: 0 auto;
    max-width: 80%;
    background: #fff;
    color: #000;
    padding: .5em;
    font-weight: bolder;
    font-size: 1.6em;
    border-radius: .2em;
    box-shadow: .2em .1em .5em rgba(0,0,0,.7);
}

.card highlight-blue {
    color: #1b99e6;
}

/* <div class="hellocard">
 * 
 * # HELLO
 * my name is
 * ## your name
 * 
 * </div>
 */

div.hellocard {
    background: darkred;
    border-radius: .5em;
    padding: 0 0 1em;
    transform: rotate(3deg);
    box-shadow: .2em .1em .5em rgba(0,0,0,.7);
}
div.hellocard h1 {
    font-size: 4em;
    margin-bottom: -.2em
}
div.hellocard h2 {
    background: #ddd;
    color: #000;
    padding: 1em;
}


/* <!-- .slide: class="popquestion" -->
 * <div class="question">
 * Question
 * 
 * <span class="answer">Answer</span>
 * </div>
 */

section.popquestion h1 {
    font-size: 1.5em;
    position: absolute;
    top: 0em; left: 0.8em;
    border-bottom: 1px
}
section.popquestion .question {
    text-indent: -1.2em;
    text-align: left;
    margin: 10%;
}
section.popquestion .answer {
    text-indent: -1.2em;
    color: yellow;
}


/* <!-- .slide: class="principles" data-background="#616E77"-->
 * 
 * Principle #1
 * 
 * # <span>Smart</span> Words
 * 
 */

section.principles{
    text-align: left;
}

section.principles span {
    color: yellow;
}


.imgs4 {
    display: grid;
    grid-template-columns: repeat(4, auto);
}

img {
    border: 0 !important;
    background: transparent !important;
}

.column2 {
    column-count: 2;
    column-gap: 1em;
}

.reveal em {
    color: yellow;
    font-style: normal;
}

.reveal blockquote, q {
    width: 90%;
    font-style: normal;
    text-align: left;
    text-indent: -1em;
    background-color: transparent;
}

</style>