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

Fix duplicate sidebar / topbar problem

Browse Source
This commit is contained in:
Tanner Collin 2021-05-30 05:00:35 +00:00
parent 2be883b19f
commit 5bcad7eb77
4 changed files with 70 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -26,6 +26,11 @@
{% block info %}
Tanner Collin
<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>
<p class='theme-select'>
<a onClick="setTheme('light')">Light</a> / <a onClick="setTheme('dark')">Dark</a>
</p>
@ -39,10 +44,6 @@
<div class="content">
{% endif %}
<div class="topbar">
{{ info() }}
</div>
<p><a href="/">← Return to Home</a></p>
<header>
<h1>{{ article.title }}</h1>

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

@ -52,13 +52,10 @@
<body>
{% endif %}
{%- macro info() -%}
{% block info %}{% endblock %}
{%- endmacro -%}
<div class="container">
<div class="sidebar">
{{ info() }}
<div class="bar">
{% block info %}
{% endblock %}
</div>
{% block content %}

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

@ -24,11 +24,6 @@
{% 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>

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

@ -52,71 +52,6 @@ pre {
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,14 +121,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;
}
.bar .theme-select {
margin-top: 0.5rem;
}
}