summary refs log tree commit diff stats
path: root/geschichte/css/theme/source/dracula.scss
diff options
context:
space:
mode:
Diffstat (limited to 'geschichte/css/theme/source/dracula.scss')
-rw-r--r--geschichte/css/theme/source/dracula.scss132
1 files changed, 132 insertions, 0 deletions
diff --git a/geschichte/css/theme/source/dracula.scss b/geschichte/css/theme/source/dracula.scss
new file mode 100644
index 0000000..67fb59c
--- /dev/null
+++ b/geschichte/css/theme/source/dracula.scss
@@ -0,0 +1,132 @@
+/**
+ * Dracula Dark theme for reveal.js.
+ * Based on https://draculatheme.com
+ */
+
+
+// Default mixins and settings -----------------
+@import "../template/mixins";
+@import "../template/settings";
+// ---------------------------------------------
+
+
+
+// Include theme-specific fonts
+$systemFontsSansSerif: -apple-system,
+					   BlinkMacSystemFont,
+					   avenir next,
+					   avenir,
+					   segoe ui,
+					   helvetica neue,
+					   helvetica,
+					   Cantarell,
+					   Ubuntu,
+					   roboto,
+					   noto,
+					   arial,
+					   sans-serif;
+$systemFontsMono: Menlo,
+				  Consolas,
+				  Monaco,
+				  Liberation Mono,
+				  Lucida Console,
+				  monospace;
+
+/**
+ * Dracula colors by Zeno Rocha
+ * https://draculatheme.com/contribute
+ */
+html * {
+	color-profile: sRGB;
+	rendering-intent: auto;
+}
+
+$background: #282A36;
+$foreground: #F8F8F2;
+$selection: #44475A;
+$comment: #6272A4;
+$red: #FF5555;
+$orange: #FFB86C;
+$yellow: #F1FA8C;
+$green: #50FA7B;
+$purple: #BD93F9;
+$cyan: #8BE9FD;
+$pink: #FF79C6;
+
+
+
+// Override theme settings (see ../template/settings.scss)
+$mainColor: $foreground;
+$headingColor: $purple;
+$headingTextShadow: none;
+$headingTextTransform: none;
+$backgroundColor: $background;
+$linkColor: $pink;
+$linkColorHover: $cyan;
+$selectionBackgroundColor: $selection;
+$inlineCodeColor: $green;
+$listBulletColor: $cyan;
+
+$mainFont: $systemFontsSansSerif;
+$codeFont: "Fira Code", $systemFontsMono;
+
+// Change text colors against light slide backgrounds
+@include light-bg-text-color($background);
+
+// Theme template ------------------------------
+@import "../template/theme";
+// ---------------------------------------------
+
+// Define additional color effects based on Dracula spec
+// https://spec.draculatheme.com/
+:root {
+	--r-bold-color: #{$orange};
+	--r-italic-color: #{$yellow};
+	--r-inline-code-color: #{$inlineCodeColor};
+	--r-list-bullet-color: #{$listBulletColor};
+}
+
+.reveal strong, .reveal b {
+	color: var(--r-bold-color);
+}
+
+.reveal em, .reveal i, .reveal blockquote {
+	color: var(--r-italic-color);
+}
+
+.reveal code {
+	color: var(--r-inline-code-color);
+}
+
+// Dracula colored list bullets and numbers
+.reveal ul {
+	list-style: none;
+}
+
+.reveal ul li::before {
+	content: "•";
+	color: var(--r-list-bullet-color);
+	display: inline-block;
+	width: 1em;
+	margin-left: -1em
+}
+
+.reveal ol {
+	list-style: none;
+	counter-reset: li;
+}
+
+.reveal ol li::before {
+	content: counter(li) ".";
+	color: var(--r-list-bullet-color);
+	display: inline-block;
+	width: 2em;
+
+	margin-left: -2.5em;
+    margin-right: 0.5em;
+	text-align: right;
+}
+
+.reveal ol li {
+	counter-increment: li
+}