tanner/personal-site
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add darkmode

Browse Source
This commit is contained in:
Tanner Collin 2020-06-09 19:40:38 +00:00
parent 5abcd6f672
commit b8f02d92da
7 changed files with 62 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
themes/theme/static/darkmode-js.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

56
themes/theme/static/fonts/fonts.css
View File

@ -1,51 +1,59 @@
@font-face {
font-family: 'Apparatus SIL';
src: url('AppSILR.ttf') format('truetype');
font-family: 'Apparatus SIL';
src: url('AppSILR.ttf') format('truetype');
font-display: swap;
}
@font-face {
font-family: 'Apparatus SIL';
font-family: 'Apparatus SIL';
font-style: italic;
src: url('AppSILI.ttf') format('truetype');
src: url('AppSILI.ttf') format('truetype');
font-display: swap;
}
@font-face {
font-family: 'Apparatus SIL';
font-family: 'Apparatus SIL';
font-weight: bold;
src: url('AppSILB.ttf') format('truetype');
src: url('AppSILB.ttf') format('truetype');
font-display: swap;
}
@font-face {
font-family: 'Apparatus SIL';
font-family: 'Apparatus SIL';
font-weight: bold;
font-style: italic;
src: url('AppSILBI.ttf') format('truetype');
src: url('AppSILBI.ttf') format('truetype');
font-display: swap;
}
@font-face {
font-family: 'Lato';
font-style: italic;
font-weight: 400;
src: local('Lato Italic'), local('Lato-Italic'), url('Lato-Italic.ttf') format('truetype');
font-family: 'Lato';
font-style: italic;
font-weight: 400;
src: local('Lato Italic'), local('Lato-Italic'), url('Lato-Italic.ttf') format('truetype');
font-display: swap;
}
@font-face {
font-family: 'Lato';
font-style: italic;
font-weight: 700;
src: local('Lato Bold Italic'), local('Lato-BoldItalic'), url('Lato-BoldItalic.ttf') format('truetype');
font-family: 'Lato';
font-style: italic;
font-weight: 700;
src: local('Lato Bold Italic'), local('Lato-BoldItalic'), url('Lato-BoldItalic.ttf') format('truetype');
font-display: swap;
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'), url('Lato-Regular.ttf') format('truetype');
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'), url('Lato-Regular.ttf') format('truetype');
font-display: swap;
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 700;
src: local('Lato Bold'), local('Lato-Bold'), url('Lato-Bold.ttf') format('truetype');
font-family: 'Lato';
font-style: normal;
font-weight: 700;
src: local('Lato Bold'), local('Lato-Bold'), url('Lato-Bold.ttf') format('truetype');
font-display: swap;
}

BIN
themes/theme/static/logo-black.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.9 KiB

BIN
themes/theme/static/logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.9 KiB

After

Width:  |  Height:  |  Size: 42 KiB

1
themes/theme/templates/article.html
View File

@ -1,6 +1,7 @@
{% extends "base.html" %}
{% block content %}
<p><a href="/">← Return to Home</a></p>
<header>
<h1>{{ article.title }}</h1>
<div class="summary">

17
themes/theme/templates/base.html
View File

@ -16,7 +16,7 @@
<body>
<div class="container">
<div class="sidebar">
<img src="/theme/me.jpg" />
<img src="/theme/me.jpg" alt="A picture of me smiling" />
<p>
Tanner Collin
</p>
@ -24,14 +24,25 @@
<div class="content">
<div class="topbar">
<p>
<img src="/theme/logo.png" />
<img src="/theme/logo.png" alt="My name in handwriting" />
</p>
</div>
{% block content %}
{% endblock %}
</div>
</div>
</body>
<script src="/theme/darkmode-js.min.js"></script>
<script>
const options = {
bottom: '16px',
right: '16px',
buttonColorDark: '#666',
buttonColorLight: '#aaa',
label: '🌙',
};
new Darkmode(options).showWidget();
</script>
</body>
</html>

16
themes/theme/templates/style.css
View File

@ -49,6 +49,7 @@ pre {
}
.content .topbar img {
filter: invert(100%);
width: 14rem;
height: auto;
}
@ -90,8 +91,7 @@ pre {
}
.content ul {
padding-left: 0;
list-style-position: inside;
padding-left: 1.1rem;
}
.content li {
@ -127,3 +127,15 @@ pre {
display: none;
}
}
.darkmode-toggle {
z-index: 500;
}
.darkmode--activated .content img {
filter: brightness(75%);
}
.darkmode--activated video {
mix-blend-mode: difference;
}