marp-theia-theme/theia.css at main · LRNZ09/marp-theia-theme · 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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
/*!
 * Marp / Marpit customizable theme.
 *
 * @theme theia
 * @author Lorenzo Pieri
 */

/* Theme import */
@import "gaia";

/* Font import */
@import 'https://fonts.bunny.net/css?family=source-code-pro:400,700|source-sans-pro:400,700&display=swap';

/* Variables using Gaia-compatible names */
:root {
  /* Colors */
  --color-light: #FFFFFF;     /* White */
  --color-dark: #000000;      /* Black */
  --color-primary: #6633FF;   /* Indigo */
  --color-secondary: #E1FF00; /* Neon Yellow */

  /* Fonts */
  --font-default: "Source Sans Pro", sans-serif;
  --font-mono: "Source Code Pro", monospace;
}

/* Top bar stripe */
section::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px;
  background-color: var(--color-highlight);
}

/* Section */
section {
  --color-background: light-dark(var(--color-light), var(--color-dark));
  --color-foreground: light-dark(var(--color-dark), var(--color-light));
  --color-highlight: light-dark(var(--color-primary), var(--color-secondary));
  --color-background-stripe: color-mix(
    in srgb,
    var(--color-foreground) 5%,
    transparent
  );
  --color-dimmed: color-mix(
    in srgb,
    var(--color-foreground) 90%,
    var(--color-background)
  );

  color-scheme: light;
  font-family: var(--font-default);
  letter-spacing: 1.05px;
  line-height: 1.25;
  padding: 50px;
}

/* Variant-specific section variables */
section.lead {
  --color-background: var(--color-primary);
  --color-highlight: var(--color-light);

  color-scheme: dark;
  background: linear-gradient(
    45deg,
    var(--color-primary),
    var(--color-secondary)
  );
}

section.invert {
  color-scheme: dark;
}

/* Code */
code {
  border-radius: 0.25em;
  font-family: var(--font-mono);
}

pre {
  border-left: 4px solid var(--color-highlight);
  font-family: var(--font-mono);
}

/* Blockquotes */
blockquote {
  padding: 0.75em 1em;
  background-color: var(--color-background-stripe);
  border-left: 4px solid var(--color-highlight);
  font-style: italic;
}

/* Header and footer */
header::before,
footer::before {
  content: "";
  display: inline-block;
  width: 40px;
  height: 2px;
  margin-right: 8px;
  background-color: var(--color-highlight);
  vertical-align: middle;
}

header,
footer {
  font-size: large;
  font-weight: bold;
  text-transform: uppercase;
}

/* Pagination */
section::after {
  content: attr(data-marpit-pagination) " / " attr(data-marpit-pagination-total);
  position: absolute;
  font-size: large;
}