sravan/sravanbalaji.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Style Fixes & highlight.js

Browse Source 
- 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
This commit is contained in:
Sravan Balaji
2020-10-24 18:48:12 -04:00
parent a2d4b78a37
commit 3e1d17c406
6 changed files with 77 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/branding/color_palette.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 43 KiB

2
src/blog_docker.html
View File

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

10
src/common/header.html
View File

@@ -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" />

2
src/common/header.txt
View File

@@ -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" /> ')

27
src/documentation.html
View File

@@ -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>

45
src/style/styles.css
View File

@@ -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 {
color: var(--primary-color);
.card {
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);
}