Update dark theme (#72)

* Add gitignore and static icons

* Add social icons bar

* Add more social icons, fix styling for header

* Fix dark theme bug

* Remove AWS icon

* Add math typesetting to readme features

* Templatize social icons

* Add documentation and fix menu icon

* Add more icons in example site

* Fix lang in code blocks

* Fix codeblocks lang and use twitch icon

* Reduce spacing around and between social icons

* Fix icon sizing

* Hard code width and height

* Fix language in code blocks

* Update language

* Update Readme

* Add screenshot

* Update screenshots

* Update dark theme primary color

* Fixes related to dark theme

Co-authored-by: Yash Mehrotra <yashmehrotra95@gmail.com>

exampleSite/content/posts/markdown-syntax.md

@@ -125,16 +125,3 @@ Tables aren't part of the core Markdown spec, but Hugo supports them out-of-the-
 * Dairy
   * Milk
   * Cheese
-
-## Other Elements — abbr, sub, sup, kbd, mark
-
-<abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format.
-
-H<sub>2</sub>O
-
-X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
-
-Press <kbd><kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd></kbd> to end the session.
-
-Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.
-

exampleSite/content/posts/theme-documentation-advanced.md

@@ -112,10 +112,10 @@ Add your own JavaScript or CSS by putting them in the `static/` folder and impor
 
 ```toml
 [params]
-  customHeadHTML = """
+  customHeadHTML = '''
     <script>console.log("Custom script or import");</script>
     <script src="/js/custom.js"></script>
-  """
+  '''
 ```
 
 ### Analytics
@@ -128,9 +128,9 @@ Giving users the freedom to add anything in the HTML via config.toml seemed like
 
 ```toml
 [params]
-  customHeadHTML = """
+  customHeadHTML = '''
     <script async defer data-website-id="website-id" src="https://analytics.example.com/script.js"></script>
-  """
+  '''
 ```
 
 ### Katex
@@ -139,7 +139,7 @@ Katex is a math typesetting library for the web which lets you write beautiful e
 
 ```toml
 [params]
-  customHeadHTML = """
+  customHeadHTML = '''
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.13.16/dist/katex.min.css" integrity="sha384-6LkG2wmY8FK9E0vU9OOr8UvLwsaqUg9SETfpq4uTCN1agNe8HRdE9ABlk+fVx6gZ" crossorigin="anonymous">
 
     <!-- The loading of KaTeX is deferred to speed up page rendering -->
@@ -148,7 +148,7 @@ Katex is a math typesetting library for the web which lets you write beautiful e
     <!-- To automatically render math in text elements, include the auto-render extension: -->
     <script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.16/dist/contrib/auto-render.min.js" integrity="sha384-vZTG03m+2yp6N6BNi5iM4rW4oIwk5DfcNdFfxkk9ZWpDriOkXX8voJBFrAO7MpVl" crossorigin="anonymous"
         onload="renderMathInElement(document.body);"></script>
-  """
+  '''
 ```
 
 > Note: Make sure you use the latest version of katex and use the correct script tags as described in [their documentation](https://katex.org/docs/browser.html)

static/css/dark.css

@@ -1,7 +1,8 @@
 :root {
-  --dark-primary-color: 32, 32, 32;
+  --dark-primary-color: 34, 39, 46;
+  --dark-secondary-color: #2d333b;
+  --dark-tertiary-color: #646464;
   --dark-text-color: white;
-  --dark-secondary-color: #555;
 }
 
 html {
@@ -67,8 +68,13 @@ table th {
   border-bottom-color: var(--dark-secondary-color);
 }
 
-:not(pre) > code {
+code,
+pre {
   background-color: var(--dark-secondary-color) !important;
+}
+
+:not(pre) > code {
+  background-color: var(--dark-tertiary-color) !important;
   color: var(--dark-text-color);
 }
 

static/css/main.css

@@ -3,6 +3,7 @@
 
   --light-primary-color: 255, 255, 255;
   --light-secondary-color: #dddddd;
+  --light-tertiary-color: #272822;
   --light-text-color: black;
 }
 
@@ -230,7 +231,7 @@ a:hover .feather-sun {
 /* CODE BLOCKS */
 code,
 pre {
-  background-color: #272822 !important;
+  background-color: var(--light-tertiary-color);
   box-sizing: border-box;
   color: white;
 }