diff --git a/dark.css b/dark.css new file mode 100644 index 0000000..44b993c --- /dev/null +++ b/dark.css @@ -0,0 +1,24 @@ +body { + color: #d8d8d8; + background-color: #222222; +} + +.jumbotron { + background-color: #34373a; +} + +.list-display { + background-color: #404142; +} + +.card { + background-color: #3d3d3d !important; +} + +.text-muted { + color: #979797 !important; +} + +.footer { + background-color: #404142; +} \ No newline at end of file diff --git a/index.html b/index.html index e7ea769..397e2ea 100644 --- a/index.html +++ b/index.html @@ -31,6 +31,8 @@ diff --git a/res/social/email_dark.png b/res/social/email_dark.png new file mode 100644 index 0000000..e0db4c9 Binary files /dev/null and b/res/social/email_dark.png differ diff --git a/res/social/github_dark.png b/res/social/github_dark.png new file mode 100644 index 0000000..e918de5 Binary files /dev/null and b/res/social/github_dark.png differ diff --git a/res/social/reddit_dark.png b/res/social/reddit_dark.png new file mode 100644 index 0000000..eebebf9 Binary files /dev/null and b/res/social/reddit_dark.png differ diff --git a/res/support/amazon.png b/res/support/amazon.png index bbaee29..d2540bd 100644 Binary files a/res/support/amazon.png and b/res/support/amazon.png differ diff --git a/res/support/amazon_dark.png b/res/support/amazon_dark.png new file mode 100644 index 0000000..0518909 Binary files /dev/null and b/res/support/amazon_dark.png differ diff --git a/scripts/main.js b/scripts/main.js index 36538c5..58c952e 100644 --- a/scripts/main.js +++ b/scripts/main.js @@ -1,3 +1,8 @@ +let dark = getCookie("dark") === "true"; +if (dark) { + document.write('') +} + $(function () { let openModals = function (hash) { if (hash.length > 1) { @@ -18,4 +23,22 @@ $(function () { $('#blobheart').on('click', function () { $('#navbar-image').attr('src', 'res/heart.png'); }); -}); \ No newline at end of file + + let mode = $('#dark-mode'); + mode.prop('checked', dark); + mode.on('click', function () { + var date = new Date(); + date.setTime(date.getTime() + (365 * 24 * 60 * 60 * 1000)); + document.cookie = "dark=" + $(this).prop('checked') + ";expires=" + date.toUTCString(); + location.reload(); + }); +}); + +function getCookie(key) { + let c = document.cookie; + if (!c) + return undefined; + let start = c.indexOf(key + "=") + key.length + 1; + let end = c.indexOf(";", start); + return c.substring(start, end < 0 ? c.length : end); +} \ No newline at end of file diff --git a/scripts/navbar.js b/scripts/navbar.js new file mode 100644 index 0000000..cf8b513 --- /dev/null +++ b/scripts/navbar.js @@ -0,0 +1,5 @@ +if (dark) { + let navbar = $("#navbar"); + navbar.removeClass("navbar-light bg-light"); + navbar.addClass("navbar-dark bg-dark"); +} \ No newline at end of file diff --git a/scripts/projects.js b/scripts/projects.js index 7a42597..c27580a 100644 --- a/scripts/projects.js +++ b/scripts/projects.js @@ -42,7 +42,7 @@ for (project of projects) { let links = project['links']; if (links) { for (let name in links) { - p += '' + name + ''; + p += '' + name + ''; } } diff --git a/scripts/social.js b/scripts/social.js index ab34711..b7241d5 100644 --- a/scripts/social.js +++ b/scripts/social.js @@ -1,6 +1,7 @@ const socials = [{ 'name': 'Email', - 'link': 'mailto:me@ellpeck.de' + 'link': 'mailto:me@ellpeck.de', + 'darkIcon': true }, { 'name': 'Discord', @@ -9,9 +10,11 @@ const socials = [{ { 'name': 'Twitter', 'link': 'https://twitter.com/Ellpeck' - }, { + }, + { 'name': 'GitHub', - 'link': 'https://github.com/Ellpeck/' + 'link': 'https://github.com/Ellpeck/', + 'darkIcon': true }, { 'name': 'YouTube', @@ -21,10 +24,10 @@ const socials = [{ 'name': 'Twitch', 'link': 'http://twitch.tv/ellpeck' }, - { 'name': 'Reddit', - 'link': 'https://www.reddit.com/user/Ellpeck/' + 'link': 'https://www.reddit.com/user/Ellpeck/', + 'darkIcon': true }, { 'name': 'Instagram', @@ -50,8 +53,11 @@ const socials = [{ let s = ''; for (social of socials) { - s += ''; - s += ''; + s += ''; + let icon = social['name'].toLowerCase(); + if (dark && social['darkIcon']) + icon += '_dark'; + s += ''; s += social['name']; s += '' } diff --git a/scripts/support.js b/scripts/support.js index 9536a37..7889910 100644 --- a/scripts/support.js +++ b/scripts/support.js @@ -14,7 +14,7 @@ const support = [{ 'name': 'Send me a gift', 'desc': 'If you want to make a nice surprise, then you can get me something from my Amazon wishlist. I update it fairly regularly and items I want most are generally closer to the top. Keep in mind that the link goes to the German Amazon page, but for most products, you can just change the link a bit and it\'ll come up with the same. Please don\'t get me anything expensive, though.', 'link': 'https://ellpeck.de/wishlist', - 'icon': 'amazon' + 'icon': dark ? 'amazon_dark' : 'amazon' } ]; @@ -23,7 +23,7 @@ for (way of support) { sp += '
'; sp += '
'; - sp += '' + way['name'] + ''; + sp += '' + way['name'] + ''; sp += '
'; sp += '
';