update theme

README.md

@@ -13,5 +13,10 @@ A template for creating a presentation with Quarto and reveal.js
 
   - This should trigger a build on the `gh-pages` branch which should be published to https://developmentseed.github.io/{repo_name}
 
+## Custom theme
+- By default the theme is set to reveal.js `white` theme. For a dark theme try `black` in the yaml header of `index.md`.
+- [styles.css](./styles.css) has css rules for some of the style elements which allows us to orange things up a bit.
+
+
 ## Local development
 You can run a local preview of the presentation with `quarto preview`. This will load a live preview of the presentation as you work on it.

index.md

@@ -2,17 +2,18 @@
 title: "Presentation Template"
 subtitle: "Create beautiful interactive slide decks with Reveal.js"
 format:
-  revealjs: 
+  revealjs:
+    center: false
     slide-number: true
     chalkboard: 
       buttons: false
     preview-links: auto
     logo: images/logo_no_text.png
-    footer: <https://developmentseed.org>
-    theme: white # try black for dark theme
+    footer: "[developmentseed.org](https://developmentseed.org)"
+    theme: black # try black for dark theme
     css: styles.css    
     navigation-mode: vertical
-    controls-layout: edges
+    controls-layout: bottom-right
     controls-tutorial: true
 ---
 

styles.css

@@ -1,22 +1,18 @@
 /* css styles */
-/*:root {*/
-/*  /* Main colors */
-*/
-/*  --r-background-color: #443f3f;*/
-/*  --r-main-color: #fff;*/
-/*  --r-selection-background-color: #cf3f02;*/
-/*  --r-selection-color: #fff;*/
-/*}*/
-
-/*.reveal {*/
-/*  /*background: #443f3f;*/*/
-/*  color: #fff;*/
-/*}*/
 
 .reveal a:hover {
   color: #ff4f02;
 }
 
+/* More specific selectors for footer links */
+.reveal .footer a {
+  color: #cf3f02 !important;
+}
+
+.reveal .footer a:hover {
+  color: #cf3f02 !important;
+}
+
 /* Progress bar */
 .reveal .progress {
   background: rgba(207, 63, 2, 0.2);
@@ -42,3 +38,36 @@
   background: #cf3f02;
   color: #fff;
 }
+
+/* Navigation controls */
+.controls button {
+  color: #cf3f02 !important;
+}
+
+.controls button:hover {
+  color: #a33302 !important; /* assuming this is your hover color */
+}
+
+.controls .controls-arrow:before,
+.controls .controls-arrow:after {
+  background-color: #cf3f02;
+}
+
+.controls .controls-arrow:hover:before,
+.controls .controls-arrow:hover:after {
+  background-color: #a33302; /* assuming this is your hover color */
+}
+
+/* Logo in top-left */
+.reveal .slide-logo {
+  display: block;
+  position: fixed;
+  bottom: unset !important;
+  right: unset !important;
+  top: 5px;
+  left: 12px;
+  height: 60px !important;
+  width: 60px !important;
+  max-width: unset !important;
+  max-height: unset !important;
+}