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

Compare commits

base: tanner:2be883b19f46ba2feb562bcfd1c6c1dbcb972757
Branches Tags
tanner:master
tanner:columns
...
compare: tanner:b5b9e68df001d2b9a97d143eaffb5d521756f969
Branches Tags
tanner:master
tanner:columns

2 Commits
2be883b19f ... b5b9e68df0

Author SHA1 Message Date
Tanner Collin
b5b9e68df0 Remove darkmode selector 2021-05-30 05:08:37 +00:00
Tanner Collin
5bcad7eb77 Fix duplicate sidebar / topbar problem 2021-05-30 05:00:35 +00:00
5 changed files with 76 additions and 206 deletions
Show Stats Expand all files Collapse all files

6
publishconf.py
View File

@ -54,10 +54,10 @@ AUTHORS_SAVE_AS = ''
CATEGORIES_SAVE_AS = ''
TAGS_SAVE_AS = ''
INDEX_SAVE_AS = 'index.php'
INDEX_SAVE_AS = 'index.html'
ARTICLE_URL = '{slug}/'
ARTICLE_SAVE_AS = '{slug}/index.php'
ARTICLE_SAVE_AS = '{slug}/index.html'
PAGE_URL = '{slug}/'
PAGE_SAVE_AS = '{slug}/index.php'
PAGE_SAVE_AS = '{slug}/index.html'
PROD = True

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

@ -26,8 +26,10 @@
{% block info %}
Tanner Collin
<p class='theme-select'>
<a onClick="setTheme('light')">Light</a> / <a onClick="setTheme('dark')">Dark</a>
<p class="contact-icons">
<a href="mailto:site2@tannercollin.com" rel="noreferrer noopener"><img alt="email" src="/theme/mail.svg" width="20" height="20" /></a>
<a href="https://t.me/tannercollin" target="_blank" rel="noreferrer noopener"><img alt="telegram" src="/theme/telegram.svg" width="20" height="20" /></a>
<a href="https://github.com/tannercollin" target="_blank" rel="noreferrer noopener"><img alt="github" src="/theme/github.svg" width="20" height="20" /></a>
</p>
{% endblock %}
@ -39,10 +41,6 @@
<div class="content">
{% endif %}
<div class="topbar">
{{ info() }}
</div>
<p><a href="/">← Return to Home</a></p>
<header>
<h1>{{ article.title }}</h1>

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

@ -36,56 +36,22 @@
</style>
<script defer src="/theme/instant-page.js"></script>
<noscript>
<style type="text/css">
.theme-select {
display: none !important;
}
</style>
</noscript>
</head>
{% if PROD %}
<body class="<?php echo $themeClass; ?>">
{% else %}
<body>
{% endif %}
<body>
<div class="container">
<div class="bar">
{% block info %}
{% endblock %}
</div>
{%- macro info() -%}
{% block info %}{% endblock %}
{%- endmacro -%}
<div class="container">
<div class="sidebar">
{{ info() }}
{% block content %}
{% endblock %}
</div>
{% block content %}
{% endblock %}
</div>
<p class="copyright">
© 2012–2021 Tanner Collin
</p>
<script>
function setTheme(theme) {
console.log('Setting theme to', theme);
if (theme == 'dark') {
document.body.classList.add('dark');
document.body.classList.remove('light');
} else if (theme == 'light') {
document.body.classList.add('light');
document.body.classList.remove('dark');
}
document.cookie = 'theme=' + theme + '; Max-Age=31536000; Path=/; SameSite=Lax';
}
</script>
<p class="copyright">
© 2012–2021 Tanner Collin
</p>
</body>
</html>

8
themes/theme/templates/index.html
View File

@ -16,19 +16,11 @@
<a href="https://t.me/tannercollin" target="_blank" rel="noreferrer noopener"><img alt="telegram" src="/theme/telegram.svg" width="20" height="20" /></a>
<a href="https://github.com/tannercollin" target="_blank" rel="noreferrer noopener"><img alt="github" src="/theme/github.svg" width="20" height="20" /></a>
</p>
<p class='theme-select'>
<a onClick="setTheme('light')">Light</a> / <a onClick="setTheme('dark')">Dark</a>
</p>
</div>
{% endblock %}
{% block content %}
<div class="content index">
<div class="topbar">
{{ info() }}
</div>
<p>
Hi, I'm Tanner! I do firmware and web development in Calgary.
</p>

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

@ -46,77 +46,6 @@ pre {
text-align: center;
}
.theme-select {
font-size: 1rem;
margin-bottom: 0;
cursor: pointer;
}
.sidebar {
margin-top: 2px;
float: left;
width: 8rem;
text-align: right;
}
.sidebar .me {
width: 100%;
display: block;
}
.sidebar .info {
margin-top: 2rem;
}
.sidebar .contact-icons a {
border-bottom: none;
}
.sidebar .contact-icons img {
width: 1.25rem;
height: 1.25rem;
margin-left: 0.5rem;
}
.topbar {
display: table;
overflow: auto;
margin: auto;
margin-top: -0.5rem;
font-size: 1.5rem;
}
.topbar .me {
float: left;
height: 6.5rem;
width: auto;
}
.topbar .info {
float: left;
margin-top: -0.25rem;
margin-left: 1.5rem;
}
.topbar .contact-icons {
margin-left: 0.25rem;
margin-bottom: 0;
}
.topbar .contact-icons a {
border-bottom: none;
}
.topbar .contact-icons img {
width: 1.5rem;
height: 1.5rem;
margin-right: 1rem;
}
.topbar .theme-select {
margin-top: 0.5rem;
}
.toc {
float: right;
padding: 0.75rem;
@ -186,19 +115,72 @@ pre {
.content {
margin-left: 10rem;
}
.topbar {
display: none;
.bar {
margin-top: 2px;
float: left;
width: 8rem;
text-align: right;
}
.bar .me {
width: 100%;
display: block;
}
.bar .info {
margin-top: 2rem;
}
.bar .contact-icons a {
border-bottom: none;
}
.bar .contact-icons img {
width: 1.25rem;
height: 1.25rem;
margin-left: 0.5rem;
}
}
@media screen and (max-width:36rem) {
.sidebar {
display: none;
.bar {
display: table;
overflow: auto;
margin: auto;
margin-top: -0.5rem;
}
.bar .me {
float: left;
height: 6.5rem;
width: auto;
}
.bar .info {
float: left;
margin-top: -0.25rem;
margin-left: 1.5rem;
}
.bar .contact-icons {
margin-top: 1rem;
margin-left: 0.25rem;
margin-bottom: 0;
}
.bar .contact-icons a {
border-bottom: none;
}
.bar .contact-icons img {
width: 1.5rem;
height: 1.5rem;
margin-right: 1rem;
}
}
body {
background-color: #eee;
color: #000;
@ -225,75 +207,7 @@ pre {
color: #555;
}
body.dark {
background-color: #000;
color: #eee;
}
body.dark a {
color: #eee;
border-bottom: 1px solid #eee;
}
body.dark pre {
background-color: #222;
}
body.dark :not(pre)>code {
background-color: #222;
}
body.dark .toc {
background-color: #222;
}
body.dark .content p.metadata {
color: #aaa;
}
body.dark .content img {
filter: brightness(75%);
}
body.dark .contact-icons img {
filter: invert(1);
}
@media (prefers-color-scheme: dark) {
body.light {
background-color: #eee;
color: #000;
}
body.light a {
color: #000;
border-bottom: 1px solid #000;
}
body.light pre {
background-color: #ddd;
}
body.light :not(pre)>code {
background-color: #ddd;
}
body.light .toc {
background-color: #ddd;
}
body.light .content p.metadata {
color: #555;
}
body.light .contact-icons img {
filter: none;
}
body.light .content img {
filter: none;
}
body {
background-color: #000;
color: #eee;