Style Fixes & highlight.js

- Add highlight.js for code blocks
- Specify docker code block language
- Add dracula theme to documentation
- Update color palette to work better in light mode
- Add extra colors to styles.css
- Style label, links, code, horizontal rule, and accordion

src/blog_docker.html

@@ -363,7 +363,7 @@
 						<code>network_mode: "host"</code>.
 					</p>
 					<pre>
-                        <code>
+                        <code class="yml">
 # docker-compose.yml
 version: "2"
 

src/common/header.html

@@ -26,6 +26,16 @@
 	crossorigin="anonymous"
 ></script>
 
+<!-- highlight.js -->
+<link
+	rel="stylesheet"
+	href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.3.1/styles/default.min.css"
+/>
+<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.3.1/highlight.min.js"></script>
+<script>
+	hljs.initHighlightingOnLoad();
+</script>
+
 <!-- Stylesheet -->
 <link rel="stylesheet" type="text/css" href="style/styles.css" />
 

src/common/header.txt

@@ -1 +1 @@
-document.write('<!--Required meta tags--> <meta charset="utf-8" /> <meta name="author" content="Sravan Balaji" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <!-- Bootstrap --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" /> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous" ></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous" ></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous" ></script> <!-- Stylesheet --> <link rel="stylesheet" type="text/css" href="style/styles.css" /> <!-- Favicon --> <link rel="icon" href="././assets/branding/favicon.ico" type="image/x-icon" /> ')
+document.write('<!--Required meta tags--> <meta charset="utf-8" /> <meta name="author" content="Sravan Balaji" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <!-- Bootstrap --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" /> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous" ></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous" ></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous" ></script> <!-- highlight.js --> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.3.1/styles/default.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.3.1/highlight.min.js"></script> <script> hljs.initHighlightingOnLoad(); </script> <!-- Stylesheet --> <link rel="stylesheet" type="text/css" href="style/styles.css" /> <!-- Favicon --> <link rel="icon" href="././assets/branding/favicon.ico" type="image/x-icon" /> ')

src/documentation.html

@@ -310,17 +310,31 @@
 					</div>
 					<div class="col-md-8">
 						<p>
-							I used the primary palette colors from
+							Light mode uses the primary palette colors from
 							<a
 								href="https://brand.umich.edu/design-resources/colors/"
 								target="_blank"
 								>University of Michigan Design Resources</a
 							>
-							and generated a cool color scheme using
+							and some generated colors from
 							<a
 								href="https://coolors.co/00274c-ffcb05-30c5ff-e8eef2-343434"
 								target="_blank"
 								>coolors</a
+							>
+							(shown in the image).
+						</p>
+
+						<p>
+							Dark mode uses the
+							<a
+								href="https://spec.draculatheme.com/#sec-Standard"
+								target="_blank"
+								>color palette</a
+							>
+							specified by
+							<a href="https://draculatheme.com/" target="_blank"
+								>Dracula theme</a
 							>.
 						</p>
 					</div>
@@ -350,7 +364,7 @@
 								href="https://hatchful.shopify.com/"
 								target="_blank"
 								>hatchful</a
-							>. My main purpose for this was to have a nice
+							>. The main purpose for this was to have a nice
 							looking favicon for my website on browsers as well
 							as for the home page icon in the navbar.
 						</p>
@@ -389,6 +403,13 @@
 									>University of Michigan's Website</a
 								>
 							</li>
+							<li>
+								<a
+									href="https://draculatheme.com/"
+									target="_blank"
+									>Dracula Theme</a
+								>
+							</li>
 						</ul>
 					</div>
 				</div>

src/style/styles.css

@@ -5,7 +5,9 @@
 :root[color-mode="light"] {
 	--primary-color: #ffcb05;
 	--secondary-color: #00274c;
-	--tertiary-color: #30c5ff;
+	--tertiary-color: #2f65a7;
+	--quaternary-color: #ffffff;
+	--quinary-color: #e83e8c;
 	--background-color: #e8eef2;
 	--font-color: #000000;
 }
@@ -14,7 +16,9 @@
 :root[color-mode="dark"] {
 	--primary-color: #bd93f9;
 	--secondary-color: #44475a;
-	--tertiary-color: #50fa7b;
+	--tertiary-color: #8be9fd;
+	--quaternary-color: #6272a4;
+	--quinary-color: #ff79c6;
 	--background-color: #282a36;
 	--font-color: #f8f8f2;
 }
@@ -28,6 +32,23 @@ body {
 	font-family: Arial, Verdana, Tahoma, sans-serif;
 }
 
+label {
+	color: var(--primary-color);
+}
+
+a {
+	color: var(--tertiary-color);
+}
+
+code {
+	color: var(--quinary-color);
+}
+
+hr {
+	border-color: var(--font-color);
+	opacity: 0.1;
+}
+
 /****************
  * Main Content *
  ****************/
@@ -138,6 +159,22 @@ body {
 	display: block;
 }
 
-label {
+.card {
-	color: var(--primary-color);
+	background-color: var(--background-color);
+}
+
+.card-header {
+	background-color: var(--secondary-color);
+}
+
+.card-body {
+	background-color: var(--quaternary-color);
+}
+
+.dropdown-menu {
+	background-color: var(--quaternary-color);
+}
+
+.dropdown-item {
+	color: var(--font-color);
 }