From 04cce1956b2bdca387edcb3d3250eb5d6c3257e6 Mon Sep 17 00:00:00 2001 From: Neil Brommer Date: Fri, 15 Dec 2017 21:09:10 -0800 Subject: [PATCH] Add a dark mode --- .gitignore | 2 ++ bootstrap/.gitkeep | 0 contact.html | 55 +++++++++++++++++++++---------- css/main.css | 34 ++++++++++++++++++- font-awesome/.gitkeep | 0 index.html | 76 +++++++++++++++++++++++++++++++------------ js/.gitkeep | 0 js/main.js | 69 +++++++++++++++++++++++++++++++++++++++ links.html | 70 ++++++++++++++++++++++----------------- resume.html | 59 +++++++++++++++++++++------------ 10 files changed, 278 insertions(+), 87 deletions(-) delete mode 100644 bootstrap/.gitkeep delete mode 100644 font-awesome/.gitkeep delete mode 100644 js/.gitkeep create mode 100644 js/main.js diff --git a/.gitignore b/.gitignore index 3707feb..40f3e97 100644 --- a/.gitignore +++ b/.gitignore @@ -21,3 +21,5 @@ info\.php PHPMailer/ \.vscode/ + +lib/ diff --git a/bootstrap/.gitkeep b/bootstrap/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/contact.html b/contact.html index 3432234..f5dd84c 100644 --- a/contact.html +++ b/contact.html @@ -13,26 +13,38 @@ - - - + + + + + + - - - + + + + + + + + + + + + @@ -58,11 +70,18 @@ + + @@ -108,11 +127,13 @@ - - - - - + + + + + + diff --git a/css/main.css b/css/main.css index 60a24ff..bf715e1 100644 --- a/css/main.css +++ b/css/main.css @@ -22,7 +22,7 @@ a:not(.nav-link):not(.navbar-brand) { } a:hover:not(.nav-link):not(.navbar-brand) { - color: var(--main-light-color) !important; + color: var(--main-light-color); } li.col-md-6 { @@ -48,3 +48,35 @@ li.col-md-6 { .full-height { height: 100%; } + +.jumbo-dark { + background-color: #2b3136; +} + +.a-dark { + color: var(--main-light-color) !important; +} + +.a-dark:hover { + color: white !important; +} + +.transition { + -webkit-transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out, border 0.25s ease-in-out; + -moz-transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out, border 0.25s ease-in-out; + -o-transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out, border 0.25s ease-in-out; + transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out, border 0.25s ease-in-out; +} + +.card.bg-dark { + border-color: rgba(255, 255, 255, 0.125); +} + +.dark.form-control { + background-color: rgb(81, 89, 107); + border-color: rgb(60, 66, 80); +} + +.dark.form-control:focus { + box-shadow: 0 0 0 .2rem rgba(255,255,255,.5); +} diff --git a/font-awesome/.gitkeep b/font-awesome/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/index.html b/index.html index 44777c4..469dda5 100644 --- a/index.html +++ b/index.html @@ -10,16 +10,28 @@ Neil Brommer - + - - - + + + + + + - - - + + + + + + + + + + + + + + + + + + + +
@@ -79,6 +112,11 @@

+ + +

Snippets

@@ -114,7 +152,8 @@

Resume

-

My resume +

My + resume

Sensitive information has been removed from this public version

PDF @@ -122,16 +161,13 @@
+ + +
- - - - - - - diff --git a/js/.gitkeep b/js/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..4830a13 --- /dev/null +++ b/js/main.js @@ -0,0 +1,69 @@ +var theme = window.localStorage.getItem("theme"); +if (theme != null && theme == "true") + $("body").addClass("bg-dark"); + +$(document).ready(function () { + $("#btnTheme").click(function () { + if ($("#btnTheme").hasClass("btn-light")) { + transitionLight(); + } else { + transitionDark(); + } + }); + + var theme = window.localStorage.getItem("theme"); + if (theme != null && theme == "true") + setDark(); +}); + +function checkTheme() { + if (theme != null && theme == "true") + setDark(); +} + +function transitionDark() { + $("body").addClass("transition bg-dark text-white"); + $(".card").addClass("transition bg-dark text-white"); + $(".jumbotron").addClass("transition jumbo-dark text-white"); + $(".form-control").addClass("transition dark"); + $("a:not(.navbar-brand):not(.nav-link)").addClass("transition a-dark"); + + setInterval(function () { + $("a:not(.navbar-brand):not(.nav-link)").removeClass("transition"); + $(".form-control").removeClass("transition"); + }, 250); + + $("#btnTheme").removeClass("btn-dark").addClass("transition btn-light"); + $("#themeText").replaceWith($("").attr("id", "themeText").addClass("fas fa-sun")); + + window.localStorage.setItem("theme", "true"); +} + +function transitionLight() { + $("body").addClass("transition").removeClass("bg-dark text-white"); + $(".card").addClass("transition").removeClass("bg-dark text-white"); + $(".jumbotron").addClass("transition").removeClass("jumbo-dark text-white"); + $(".form-control").addClass("transition").removeClass("dark"); + $("a:not(.navbar-brand):not(.nav-link)").addClass("transition").removeClass("a-dark"); + + setInterval(function () { + $("a:not(.navbar-brand):not(.nav-link)").removeClass("transition"); + $(".form-control").removeClass("transition"); + }, 500); + + $("#btnTheme").removeClass("btn-light").addClass("transition btn-dark"); + $("#themeText").replaceWith($("").attr("id", "themeText").addClass("fas fa-moon")); + + window.localStorage.setItem("theme", "false"); +} + +function setDark() { + $("body").addClass("bg-dark text-white"); + $(".card").addClass("bg-dark text-white"); + $(".jumbotron").addClass("jumbo-dark text-white"); + $(".form-control").addClass("dark"); + $("a:not(.navbar-brand):not(.nav-link)").addClass("a-dark"); + + $("#btnTheme").removeClass("btn-dark").addClass("btn-light"); + $("#themeText").replaceWith($("").attr("id", "themeText").addClass("fas fa-sun")); +} diff --git a/links.html b/links.html index 93c69ca..58ee3ff 100644 --- a/links.html +++ b/links.html @@ -13,13 +13,24 @@ - - - + + + + + + - - - + + + + + + + + + + + - - + + + + diff --git a/resume.html b/resume.html index 8c09bce..b54ee0d 100644 --- a/resume.html +++ b/resume.html @@ -13,21 +13,32 @@ - - - + + + + + + - - - + + + + + + + + + + + - - - -
@@ -167,6 +177,15 @@

+ + + + + + + +