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

Add darkmode

Browse Source
columns
Tanner Collin 4 years ago
parent 5abcd6f672
commit b8f02d92da
7 changed files with 62 additions and 29 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      themes/theme/static/darkmode-js.min.js
  2. 56
      themes/theme/static/fonts/fonts.css
  3. BIN
      themes/theme/static/logo-black.png
  4. BIN
      themes/theme/static/logo.png
  5. 1
      themes/theme/templates/article.html
  6. 17
      themes/theme/templates/base.html
  7. 16
      themes/theme/templates/style.css

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

File diff suppressed because one or more lines are too long

56
themes/theme/static/fonts/fonts.css
Unescape 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
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
Unescape 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
Unescape 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
Unescape 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;
}

Write Preview
Loading…
Cancel
Save