summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--_posts/processPosts.js14
-rw-r--r--posts.css18
-rw-r--r--posts.html9
-rw-r--r--posts/tag_books.html34
-rw-r--r--posts/tag_food.html34
-rw-r--r--posts/tag_programming.html34
6 files changed, 136 insertions, 7 deletions
diff --git a/_posts/processPosts.js b/_posts/processPosts.js
index d4b2a2e..15cf4e5 100644
--- a/_posts/processPosts.js
+++ b/_posts/processPosts.js
@@ -7,6 +7,18 @@ const tags = [
{
id: 'personal',
title: 'Personal 👨'
+ },
+ {
+ id: 'programming',
+ title: 'Programming 💻'
+ },
+ {
+ id: 'books',
+ title: 'Books 📖'
+ },
+ {
+ id: 'food',
+ title: 'Food 🍲'
}
]
@@ -119,7 +131,7 @@ function createPostPage(outputFile, postFilter) {
<h2>Tags</h2>
<div id='tag_list'>
- ${tags.map(createTag)}
+ ${tags.map(createTag).join('\n')}
</div>
</section`}
diff --git a/posts.css b/posts.css
index 58204c3..e9e5abc 100644
--- a/posts.css
+++ b/posts.css
@@ -1,14 +1,20 @@
#tag_list {
width: 100%;
- display: flex;
- flex-direction: row;
- align-items: center;
- column-gap: 4px;
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ column-gap: 8px;
+ row-gap: 8px
}
-#tag_list > button {
- padding: 8px;
+#tag_list button {
+ padding: 16px;
cursor: pointer;
+ border: 1px solid transparent;
+ border-radius: 3px;
+ font-family: inherit;
+ font-size: 16px;
+ width: 100%;
+ height: 100%;
}
#post_list {
diff --git a/posts.html b/posts.html
index 14a691c..36ef212 100644
--- a/posts.html
+++ b/posts.html
@@ -29,6 +29,15 @@
<a href="/posts/tag_personal.html"><button id="personal">Personal 👨</button></a>
+
+ <a href="/posts/tag_programming.html"><button id="programming">Programming 💻</button></a>
+
+
+ <a href="/posts/tag_books.html"><button id="books">Books 📖</button></a>
+
+
+ <a href="/posts/tag_food.html"><button id="food">Food 🍲</button></a>
+
</div>
</section
diff --git a/posts/tag_books.html b/posts/tag_books.html
new file mode 100644
index 0000000..332900c
--- /dev/null
+++ b/posts/tag_books.html
@@ -0,0 +1,34 @@
+
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta charset="utf-8">
+ <link rel="stylesheet" href="/index.css">
+ <link rel="stylesheet" href="/posts.css">
+ <title>Matthew Kosarek</title>
+ <link rel="shortcut icon" href="/favicon/favicon.ico" type="image/x-icon">
+ </head>
+ <body>
+ <header>
+ <h1>Matthew Kosarek</h1>
+ <nav>
+ <ul>
+ <li><a href='/'>&#127969; Home</a></li>
+ <li><a href='/resume.html'>&#128216; CV</a></li>
+ <li><a href="https://www.linkedin.com/in/matthew-kosarek/">🏢 LinkedIn</a></li>
+ <li><a href='/posts.html'>&#128221; Posts</a></li>
+ </ul>
+ </nav>
+ </header>
+
+
+
+ <section>
+ <h2>Posts</h2>
+ <ul id='post_list'>
+
+ </ul>
+ </section>
+ </body>
+</html>
diff --git a/posts/tag_food.html b/posts/tag_food.html
new file mode 100644
index 0000000..332900c
--- /dev/null
+++ b/posts/tag_food.html
@@ -0,0 +1,34 @@
+
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta charset="utf-8">
+ <link rel="stylesheet" href="/index.css">
+ <link rel="stylesheet" href="/posts.css">
+ <title>Matthew Kosarek</title>
+ <link rel="shortcut icon" href="/favicon/favicon.ico" type="image/x-icon">
+ </head>
+ <body>
+ <header>
+ <h1>Matthew Kosarek</h1>
+ <nav>
+ <ul>
+ <li><a href='/'>&#127969; Home</a></li>
+ <li><a href='/resume.html'>&#128216; CV</a></li>
+ <li><a href="https://www.linkedin.com/in/matthew-kosarek/">🏢 LinkedIn</a></li>
+ <li><a href='/posts.html'>&#128221; Posts</a></li>
+ </ul>
+ </nav>
+ </header>
+
+
+
+ <section>
+ <h2>Posts</h2>
+ <ul id='post_list'>
+
+ </ul>
+ </section>
+ </body>
+</html>
diff --git a/posts/tag_programming.html b/posts/tag_programming.html
new file mode 100644
index 0000000..332900c
--- /dev/null
+++ b/posts/tag_programming.html
@@ -0,0 +1,34 @@
+
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta charset="utf-8">
+ <link rel="stylesheet" href="/index.css">
+ <link rel="stylesheet" href="/posts.css">
+ <title>Matthew Kosarek</title>
+ <link rel="shortcut icon" href="/favicon/favicon.ico" type="image/x-icon">
+ </head>
+ <body>
+ <header>
+ <h1>Matthew Kosarek</h1>
+ <nav>
+ <ul>
+ <li><a href='/'>&#127969; Home</a></li>
+ <li><a href='/resume.html'>&#128216; CV</a></li>
+ <li><a href="https://www.linkedin.com/in/matthew-kosarek/">🏢 LinkedIn</a></li>
+ <li><a href='/posts.html'>&#128221; Posts</a></li>
+ </ul>
+ </nav>
+ </header>
+
+
+
+ <section>
+ <h2>Posts</h2>
+ <ul id='post_list'>
+
+ </ul>
+ </section>
+ </body>
+</html>