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-face {
font-family: 'Apparatus SIL'; font-family: 'Apparatus SIL';
src: url('AppSILR.ttf') format('truetype'); src: url('AppSILR.ttf') format('truetype');
font-display: swap;
} }
@font-face { @font-face {
font-family: 'Apparatus SIL'; font-family: 'Apparatus SIL';
font-style: italic; font-style: italic;
src: url('AppSILI.ttf') format('truetype'); src: url('AppSILI.ttf') format('truetype');
font-display: swap;
} }
@font-face { @font-face {
font-family: 'Apparatus SIL'; font-family: 'Apparatus SIL';
font-weight: bold; font-weight: bold;
src: url('AppSILB.ttf') format('truetype'); src: url('AppSILB.ttf') format('truetype');
font-display: swap;
} }
@font-face { @font-face {
font-family: 'Apparatus SIL'; font-family: 'Apparatus SIL';
font-weight: bold; font-weight: bold;
font-style: italic; font-style: italic;
src: url('AppSILBI.ttf') format('truetype'); src: url('AppSILBI.ttf') format('truetype');
font-display: swap;
} }
@font-face { @font-face {
font-family: 'Lato'; font-family: 'Lato';
font-style: italic; font-style: italic;
font-weight: 400; font-weight: 400;
src: local('Lato Italic'), local('Lato-Italic'), url('Lato-Italic.ttf') format('truetype'); src: local('Lato Italic'), local('Lato-Italic'), url('Lato-Italic.ttf') format('truetype');
font-display: swap;
} }
@font-face { @font-face {
font-family: 'Lato'; font-family: 'Lato';
font-style: italic; font-style: italic;
font-weight: 700; font-weight: 700;
src: local('Lato Bold Italic'), local('Lato-BoldItalic'), url('Lato-BoldItalic.ttf') format('truetype'); src: local('Lato Bold Italic'), local('Lato-BoldItalic'), url('Lato-BoldItalic.ttf') format('truetype');
font-display: swap;
} }
@font-face { @font-face {
font-family: 'Lato'; font-family: 'Lato';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'), url('Lato-Regular.ttf') format('truetype'); src: local('Lato Regular'), local('Lato-Regular'), url('Lato-Regular.ttf') format('truetype');
font-display: swap;
} }
@font-face { @font-face {
font-family: 'Lato'; font-family: 'Lato';
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 700;
src: local('Lato Bold'), local('Lato-Bold'), url('Lato-Bold.ttf') format('truetype'); 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" %} {% extends "base.html" %}
{% block content %} {% block content %}
<p><a href="/">← Return to Home</a></p>
<header> <header>
<h1>{{ article.title }}</h1> <h1>{{ article.title }}</h1>
<div class="summary"> <div class="summary">

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

@ -16,7 +16,7 @@
<body> <body>
<div class="container"> <div class="container">
<div class="sidebar"> <div class="sidebar">
<img src="/theme/me.jpg" /> <img src="/theme/me.jpg" alt="A picture of me smiling" />
<p> <p>
Tanner Collin Tanner Collin
</p> </p>
@ -24,14 +24,25 @@
<div class="content"> <div class="content">
<div class="topbar"> <div class="topbar">
<p> <p>
<img src="/theme/logo.png" /> <img src="/theme/logo.png" alt="My name in handwriting" />
</p> </p>
</div> </div>
{% block content %} {% block content %}
{% endblock %} {% endblock %}
</div> </div>
</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> </html>

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

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