my-marp-themes/graph_paper.css at live · rnd195/my-marp-themes · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
/* @theme graph_paper */
/* author: rnd195 github.com/rnd195/ */
/* license: MIT github.com/rnd195/my-marp-themes/blob/live/licenses/LICENSE */

@import "default";
@import url("https://fonts.googleapis.com/css2?family=Work+Sans&display=swap");

:root {
  font-family: "Work Sans Regular", Arial;
  --main-color: #040014;
  --text-color: #121114;
  --bg-color-alt: #dadada;
  --mark-background: #98d6ff;
}


/* --- BACKGROUND --- */
section {
  background-color: #e3e3f1;
  background-size: 20px 20px;
  background-image:
    linear-gradient(#3f32af18 1px, transparent 1px),
    linear-gradient(to right, #ccc89536 1px, #d8d8e62d 1px);
}


/* --- TITLES --- */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--text-color);
}


/* --- TEXT CHANGES --- */
header {
  font-size: 0.7em;
  color: var(--text-color);
  border-bottom: 1px solid #040014;
}

footer {
  font-size: 0.7em;
  color: var(--text-color);
  border-top: 1px solid #040014;
}

code {
  background-color: #ffffff;
  font-size: 0.9em;
}

pre {
  background-color: #ffffff;
}

blockquote {
  background: #ffffff;
  border-left: 10px solid var(--main-color);
  margin: 0.5em;
  padding: 0.5em;
}

mark {
  background-color: var(--mark-background);
  padding: 0 2px 2px;
}


/* --- BOTTOM BAR --- */
section::after {
  font-size: 0.75em;
  /* From github.com/yhatt/marp/issues/263 */
  content: attr(data-marpit-pagination) " / " attr(data-marpit-pagination-total);
  color: var(--text-color);
}


/* --- TABLES --- */
table {
  display: block;
  margin: 0 auto;
}

th {
  background-color: #8ea2af;
  color: white;
}


/* --- CUSTOM CLASSES AND KEYWORDS --- */
/* <!-- _class: tinytext --> */
/* Makes p, ul, and blockquote text smaller to fit more text on a slide */
section.tinytext > p,
section.tinytext > ul,
section.tinytext > blockquote {
  font-size: 0.65em;
}

/* img keyword "center" */
/* Centers an image, from github.com/marp-team/marpit/issues/141#issuecomment-473204518 */
img[alt~="center"] {
  display: block;
  margin: 0 auto;
}