Fix duplicate sidebar / topbar problem

3 years ago · 5bcad7eb77
parent 2be883b19f
commit 5bcad7eb77
4 changed files with 70 additions and 84 deletions
--- a/themes/theme/templates/article.html
+++ b/themes/theme/templates/article.html
@ -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>
--- a/themes/theme/templates/base.html
+++ b/themes/theme/templates/base.html
@ -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 %}
--- a/themes/theme/templates/index.html
+++ b/themes/theme/templates/index.html
@ -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>
--- a/themes/theme/templates/style.css
+++ b/themes/theme/templates/style.css
@ -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;
 	}
 }