added dark theme

crismancich · Apr 25, 2024 · b84a1c7 · b84a1c7
1 parent d8046e6
commit b84a1c7
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 11 deletions.
diff --git a/index.html b/index.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Connection Guide for Revolution Pi and Cumulocity</title>
+    <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>

diff --git a/styles.css b/styles.css
@@ -1,37 +1,44 @@
 /* styles.css */
 body {
     font-family: Arial, sans-serif;
+    background-color: #121212; /* Dark background */
+    color: #ffffff; /* Light text */
+    margin: 0;
+    padding: 20px; /* Add padding to the body for overall spacing */
 }
 
 h1, h2, h3 {
-    color: #333;
+    font-family: 'Ubuntu', sans-serif; /* Ubuntu font for headlines */
+    color: #FFD700; /* Gold color for headings */
 }
 
 .code-block {
-    position: relative;
-    background-color: #333;
-    color: #fff;
-    padding: 10px;
+    background-color: #333333; /* Slightly lighter dark background for contrast */
+    color: #ffffff;
+    padding: 15px; /* More padding inside code blocks */
     border-radius: 5px;
-    margin: 10px 0;
+    position: relative;
+    overflow: auto; /* Adds scroll to code blocks if needed */
+    margin-bottom: 20px; /* Space below code blocks */
 }
 
 code {
-    font-family: monospace;
+    font-family: 'Courier New', Courier, monospace;
 }
 
 .copy-btn {
     position: absolute;
     right: 10px;
     top: 10px;
-    padding: 5px 10px;
+    padding: 8px 16px;
     border: none;
     border-radius: 5px;
     cursor: pointer;
-    color: #333;
-    background-color: #fff;
+    background-color: #FFD700; /* Gold background for the button */
+    color: #333333; /* Dark text on button */
+    font-weight: bold;
 }
 
 .copy-btn:hover {
-    background-color: #eee;
+    background-color: #FFC107; /* Lighter gold on hover */
 }