add duke theme

lyyc199586 · Apr 8, 2024 · 8c0cc6b · 8c0cc6b
1 parent 4974685
commit 8c0cc6b
Show file tree

Hide file tree

Showing 5 changed files with 105 additions and 9 deletions.
diff --git a/slides.html b/slides.html
@@ -114,13 +114,14 @@
       margin-left: 2em;
     }  </style>
   <link rel="stylesheet" href="https://unpkg.com/reveal.js@^4//dist/theme/simple.css" id="theme">
-  <link rel="stylesheet" href="theme/beamer.css"/>
+  <link rel="stylesheet" href="theme/duke.css"/>
 </head>
 <body>
   <div class="reveal">
     <div class="slides">
 
-<section id="title-slide">
+<section id="title-slide" data-background-image="theme/logos/duke.png" data-background-position="50%
+50%" data-background-size="15%">
   <h1 class="title">MD Slides</h1>
   <p class="author">Yangyunchen Liu</p>
   <p class="institute">Duke University</p>
@@ -165,8 +166,8 @@ <h2>Columns</h2>
 <h1>Syntax</h1>
 
 </section>
-<section id="math-blocks" class="slide level2">
-<h2>Math blocks</h2>
+<section id="math-blocks" class="slide level2 logo">
+<h2 class="logo">Math blocks</h2>
 <p><span class="math display">\[\begin{equation}
   \begin{aligned}
   \dot{x} &amp;= \sigma(y-x) \\
@@ -175,8 +176,8 @@ <h2>Math blocks</h2>
   \end{aligned}
 \end{equation}\]</span></p>
 </section>
-<section id="code-blocks" class="slide level2">
-<h2>Code blocks</h2>
+<section id="code-blocks" class="slide level2 logo">
+<h2 class="logo">Code blocks</h2>
 <div class="sourceCode" id="cb1"><pre
 class="sourceCode r scrollable"><code class="sourceCode r"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="co">#| fig-height: 8</span></span>
 <span id="cb1-2"><a href="#cb1-2" aria-hidden="true" tabindex="-1"></a><span class="co">#| fig-align: center</span></span>

diff --git a/slides.md b/slides.md
@@ -14,7 +14,11 @@ height: 1080
 width: 1920
 slideNumber: true
 scrollable: true
-css: theme/beamer.css
+css: theme/duke.css
+title-slide-attributes:
+    data-background-image: theme/logos/duke.png
+    data-background-size: 15%
+    data-background-position: 50% 50%
 ---
 
 # H1 header
@@ -49,7 +53,7 @@ css: theme/beamer.css
 
 # Syntax
 
-## Math blocks
+## Math blocks {.logo}
 
 \begin{equation}
   \begin{aligned}
@@ -60,7 +64,7 @@ css: theme/beamer.css
 \end{equation}
 
 
-## Code blocks
+## Code blocks {.logo}
 
 ```{.r .scrollable}
 #| fig-height: 8

diff --git a/theme/duke.css b/theme/duke.css
@@ -0,0 +1,91 @@
+/* Fonts and Basic Styles */
+@font-face {
+  font-family: "Computer Modern";
+  src: url('./fonts/cmunss.ttf');
+}
+
+@font-face {
+  font-family: "Computer Modern Bold";
+  src: url('./fonts/cmunsx.ttf');
+  font-weight: bold;
+}
+
+@font-face {
+  font-family: "Computer Modern Italic";
+  src: url('./fonts/cmunsi.ttf');
+  font-style: italic, oblique;
+}
+
+/* Color Definitions */
+:root {
+  --oxfordblue: rgb(0, 32, 68);
+  --dukenavy: rgb(1, 33, 105);
+  --dukeroyal: rgb(0, 83, 155);
+  --bigred: rgb(217, 22, 0);
+  --glassgrey: rgb(220, 220, 220);
+  --darkred: rgb(255, 21, 0);
+  --aoenglish: rgb(0, 128, 0);
+  /* Converted from {rgb}{0.0,0.5,0.0} */
+}
+
+/* Applying Colors */
+.reveal .title,
+.reveal .subtitle,
+.reveal .author,
+.reveal .date,
+.reveal .institute,
+.reveal .section-title,
+.reveal .subsection-title,
+.reveal .frametitle,
+.reveal .page-number {
+  color: var(--dukenavy);
+}
+
+.slides {
+  outline-style: solid;
+  outline-offset: 1rem;
+  outline-width: 1px;
+  outline-color: var(--oxfordblue);
+}
+
+.reveal h1,
+.reveal h2,
+.reveal h3,
+.reveal h4,
+.reveal h5,
+.reveal h6 {
+  font-weight: normal !important;
+  margin-bottom: 1rem !important;
+  margin-left: 0.5rem !important;
+  margin-top: 0.5rem !important;
+  font-family: "Computer Modern";
+  color: var(--dukenavy);
+}
+
+.reveal {
+  background-color: var(--glassgrey);
+  color: black;
+  /* Assuming 'normal text' applies to general text color */
+}
+
+.reveal a {
+  color: var(--dukeroyal);
+  /* Assuming you want links in 'dukeroyal' */
+}
+
+/* Specific Block Styles (assuming custom classes for Reveal.js) */
+.reveal .title {
+  margin-bottom: 18rem !important;
+}
+
+.reveal .progress {
+  background: var(--glassgrey);
+  color: var(--dukeroyal);
+  height: 1%;
+}
+
+.scrollable {
+  overflow-y: auto !important;
+  overflow-x: hidden !important;
+  height: 100%;
+}
diff --git a/theme/logos/duke-foot.png b/theme/logos/duke-foot.png
diff --git a/theme/logos/duke.png b/theme/logos/duke.png