Ellpeck/Web
1
0
Fork 0
Code Issues Pull requests Releases Activity Actions

dark mode

Browse source
This commit is contained in:
Ellpeck 2018-12-30 02:26:56 +01:00
parent b8db5a6b72
commit b92948525b
12 changed files with 78 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
dark.css Normal file
View file

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

10
index.html
View file

@ -31,6 +31,8 @@
<body data-spy="scroll" data-target="#navbar"> <body data-spy="scroll" data-target="#navbar">
<!-- Navbar --> <!-- Navbar -->
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light rounded-bottom" id="navbar"> <nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light rounded-bottom" id="navbar">
<script src="scripts/navbar.js"></script>
<!-- Navbar brand and logo --> <!-- Navbar brand and logo -->
<a class="navbar-brand mb-0 h1" href="#"> <a class="navbar-brand mb-0 h1" href="#">
<img src="res/logo.png" width="40" height="40" alt=""> Ellpeck.de <img src="res/logo.png" width="40" height="40" alt=""> Ellpeck.de
@ -43,12 +45,18 @@
<!-- Navbar content --> <!-- Navbar content -->
<div class="collapse navbar-collapse" id="navbar-content"> <div class="collapse navbar-collapse" id="navbar-content">
<div class="navbar-nav"> <div class="navbar-nav mr-auto">
<a class="nav-item nav-link" href="#projects">Projects</a> <a class="nav-item nav-link" href="#projects">Projects</a>
<a class="nav-item nav-link" href="#social">Social</a> <a class="nav-item nav-link" href="#social">Social</a>
<a class="nav-item nav-link" href="#about">About</a> <a class="nav-item nav-link" href="#about">About</a>
<a class="nav-item nav-link" href="#support">Support Me</a> <a class="nav-item nav-link" href="#support">Support Me</a>
</div> </div>
<span class="navbar-text">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="dark-mode">
<label class="custom-control-label" for="dark-mode">Dark Mode</label>
</div>
</span>
</div> </div>
</nav> </nav>

BIN
res/social/email_dark.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
res/social/github_dark.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5.1 KiB

BIN
res/social/reddit_dark.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
res/support/amazon.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 54 KiB

After

Width:  |  Height:  |  Size: 54 KiB

BIN
res/support/amazon_dark.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 54 KiB

23
scripts/main.js
View file

@ -1,3 +1,8 @@
let dark = getCookie("dark") === "true";
if (dark) {
document.write('<link rel="stylesheet" href="dark.css">')
}
$(function () { $(function () {
let openModals = function (hash) { let openModals = function (hash) {
if (hash.length > 1) { if (hash.length > 1) {
@ -18,4 +23,22 @@ $(function () {
$('#blobheart').on('click', function () { $('#blobheart').on('click', function () {
$('#navbar-image').attr('src', 'res/heart.png'); $('#navbar-image').attr('src', 'res/heart.png');
}); });
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);
}

5
scripts/navbar.js Normal file
View file

@ -0,0 +1,5 @@
if (dark) {
let navbar = $("#navbar");
navbar.removeClass("navbar-light bg-light");
navbar.addClass("navbar-dark bg-dark");
}

2
scripts/projects.js
View file

@ -42,7 +42,7 @@ for (project of projects) {
let links = project['links']; let links = project['links'];
if (links) { if (links) {
for (let name in links) { for (let name in links) {
p += '<a href="' + links[name] + '" class="card-link btn btn-outline-info rounded-0">' + name + '</a>'; p += '<a href="' + links[name] + '" class="card-link btn ' + (dark ? "btn-outline-light" : "btn-outline-info") + ' rounded-0">' + name + '</a>';
} }
} }

20
scripts/social.js
View file

@ -1,6 +1,7 @@
const socials = [{ const socials = [{
'name': 'Email', 'name': 'Email',
'link': 'mailto:me@ellpeck.de' 'link': 'mailto:me@ellpeck.de',
'darkIcon': true
}, },
{ {
'name': 'Discord', 'name': 'Discord',
@ -9,9 +10,11 @@ const socials = [{
{ {
'name': 'Twitter', 'name': 'Twitter',
'link': 'https://twitter.com/Ellpeck' 'link': 'https://twitter.com/Ellpeck'
}, { },
{
'name': 'GitHub', 'name': 'GitHub',
'link': 'https://github.com/Ellpeck/' 'link': 'https://github.com/Ellpeck/',
'darkIcon': true
}, },
{ {
'name': 'YouTube', 'name': 'YouTube',
@ -21,10 +24,10 @@ const socials = [{
'name': 'Twitch', 'name': 'Twitch',
'link': 'http://twitch.tv/ellpeck' 'link': 'http://twitch.tv/ellpeck'
}, },
{ {
'name': 'Reddit', 'name': 'Reddit',
'link': 'https://www.reddit.com/user/Ellpeck/' 'link': 'https://www.reddit.com/user/Ellpeck/',
'darkIcon': true
}, },
{ {
'name': 'Instagram', 'name': 'Instagram',
@ -50,8 +53,11 @@ const socials = [{
let s = ''; let s = '';
for (social of socials) { for (social of socials) {
s += '<a class="btn btn-light social-button rounded-0" href="' + social['link'] + '"">'; s += '<a class="btn ' + (dark ? "btn-dark" : "btn-light") + ' social-button rounded-0" href="' + social['link'] + '"">';
s += '<img class="social-image" src="res/social/' + social['name'].toLowerCase() + '.png" alt="">'; let icon = social['name'].toLowerCase();
if (dark && social['darkIcon'])
icon += '_dark';
s += '<img class="social-image" src="res/social/' + icon + '.png" alt="">';
s += social['name']; s += social['name'];
s += '</a>' s += '</a>'
} }

4
scripts/support.js
View file

@ -14,7 +14,7 @@ const support = [{
'name': 'Send me a gift', '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.', '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', 'link': 'https://ellpeck.de/wishlist',
'icon': 'amazon' 'icon': dark ? 'amazon_dark' : 'amazon'
} }
]; ];
@ -23,7 +23,7 @@ for (way of support) {
sp += '<div class="row align-items-center">'; sp += '<div class="row align-items-center">';
sp += '<div class="col-md-auto">'; sp += '<div class="col-md-auto">';
sp += '<a class="btn btn-light support-button rounded-0" href="' + way['link'] + '"><img src="res/support/' + way['icon'] + '.png" class="support-image" alt="">' + way['name'] + '</a>'; sp += '<a class="btn ' + (dark ? "btn-dark" : "btn-light") + ' support-button rounded-0" href="' + way['link'] + '"><img src="res/support/' + way['icon'] + '.png" class="support-image" alt="">' + way['name'] + '</a>';
sp += '</div>'; sp += '</div>';
sp += '<div class="col support-desc">'; sp += '<div class="col support-desc">';