commit 2460a3fea2eda13283354eac2bf6b7beb97ac2da (patch)
parent 4aa39698391e14bf3c7d16bc9ba447b9fd168687
Author: Alex Karle <alex@karle.co>
Date: Sun, 21 Jun 2020 21:02:06 -0400
style: Replace /home/akarle with real header
This commit replaces the temporary /home/akarle header with a more
appealing/clean nav bar that has my name in it.
That way, you know who you're hearing from, and there isn't this obscure
nerdy reference at the top of the site.
Used media queries to stack the flex box when it gets too small. Looks
nice on both mobile and desktop!
Diffstat:
8 files changed, 31 insertions(+), 25 deletions(-)
diff --git a/content/03-24-20-domain-name.html b/content/03-24-20-domain-name.html
@@ -1,4 +1,4 @@
-<!-- {% include=post-head %} -->
+<!-- {% include=head %} -->
<h3>Mar. 24, 2020: What's in a (domain) name?</h3>
<p>
diff --git a/content/12-19-19-a-new-hope.html b/content/12-19-19-a-new-hope.html
@@ -1,4 +1,4 @@
-<!-- {% include=post-head %} -->
+<!-- {% include=head %} -->
<h3>Dec. 19, 2019: A New Hope</h3>
<p>
diff --git a/content/index.html b/content/index.html
@@ -1,13 +1,5 @@
<!-- {% include=head %} -->
-<div id="nav">
- <a href="index.html">[Home]</a>
- <a href="thoughts.html"> Thoughts </a>
- <a href="http://euchre.live"> Euchre </a>
-</div>
-
-<!-- {% include=title %} -->
-
<h3>About me:</h3>
<p>
Hi, I'm Alex! I'm a software engineer living in the Boston area.
diff --git a/content/style.css b/content/style.css
@@ -13,6 +13,22 @@ body {
}
}
+@media only screen and (min-width: 600px) and (max-width: 991px) {
+ #content {
+ width: 80%;
+ margin: 0 auto;
+ }
+}
+
+@media only screen and (min-width: 600px) {
+ header {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ }
+}
+
a:link {
color: #0a7899;
}
@@ -30,15 +46,14 @@ a:visited {
}
-#nav {
+header {
text-align: center;
- margin-bottom: 20px;
+ margin-bottom: 3em;
}
#nav > a {
color: dimgray;
text-decoration: none;
- padding: 1em;
}
h1.path {
diff --git a/content/thoughts.html b/content/thoughts.html
@@ -1,4 +1,4 @@
-<!-- {% include=post-head %} -->
+<!-- {% include=head %} -->
<h3>A collection of thoughts.</h3>
<p style="color:grey">(Because I couldn't commit to calling it a blog)</p>
diff --git a/templates/head.tmpl b/templates/head.tmpl
@@ -10,3 +10,13 @@
<body>
<!-- Put content in centered column -->
<div id="content">
+ <header>
+ <h2 id="top-name">Alex Karle</h2>
+ <div id="nav">
+ <a href="index.html">Home</a>
+ |
+ <a href="thoughts.html">Thoughts</a>
+ |
+ <a href="http://euchre.live">Euchre</a>
+ </div>
+ </header>
diff --git a/templates/post-head.tmpl b/templates/post-head.tmpl
@@ -1,9 +0,0 @@
-<!-- {% include=head %} -->
-
-<div id="nav">
- <a href="index.html"> Home </a>
- <a href="thoughts.html">[Thoughts]</a>
- <a href="http://euchre.live"> Euchre </a>
-</div>
-
-<!-- {% include=title %} -->
diff --git a/templates/title.tmpl b/templates/title.tmpl
@@ -1,2 +0,0 @@
-<h1 class="path">/home/akarle</h1>
-<h1 class="path">------------</h1>
