add css, next post feature

change favicon, add more readme, add extra example post, dark/light mode toggle
This commit is contained in:
jetstream0
2023-07-31 22:54:05 -07:00
parent c041f77b88
commit db4f5fea22
16 changed files with 257 additions and 29 deletions

View File

@@ -0,0 +1 @@
<input id="dark-mode" type="checkbox"/><label for="dark-mode"></label>

View File

@@ -0,0 +1,35 @@
<style>
blockquote {
margin: 0;
margin: 8px 0px;
padding: 4px 8px 4px 0px;
border-left: 8px solid #727272;
padding-left: 8px;
}
.code-block, code {
font-family: 'Courier New', Courier, monospace;
font-size: 1rem;
}
.code-block {
color: #222;
background-color: #d8d8d8;
padding: 2px 4px;
word-break: break-all;
border-radius: 3px;
}
img {
max-width: 85%;
}
table {
border-collapse: collapse;
}
th, td {
padding: 2px 5px;
border: 1px solid black;
}
</style>

View File

@@ -1 +1 @@
<a href="/" style="position: absolute; left: 10px; top: 10px;"><- Get me outta here!</a>
<a id="return" href="/"><= Get me outta here!</a>

View File

@@ -5,17 +5,26 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>prussia fan club</title>
<link rel="icon" type="image/png" href="/favicon.ico">
<link rel="stylesheet" href="/styles/global.css">
<link rel="stylesheet" href="/styles/index.css">
</head>
<body>
<div>
<ul>
[[ for:posts:post ]]
[[ component:post-listing ]]
[[ endfor ]]
</ul>
</div>
<div>
<p>This is my blog. I also have a <a href="https://prussia.dev">portfolio</a>, <a href="https://prussia.dev/retro">retro style personal website</a>, and a place where you can <a href="https://prussia.dev/sample">hire me</a>.</p>
[[ component:dark-mode-checkbox ]]
<div id="main">
<div>
<input id="fancy-title" type="checkbox"/><label for="fancy-title">Fancy Title</label>
<br>
<h2>prussiafan.club</h2>
<br>
<p>This is my blog. I also have a <a href="https://prussia.dev">portfolio</a>, <a href="https://prussia.dev/retro">retro style personal website</a>, and a place where you can <a href="https://prussia.dev/sample">hire me</a>.</p>
</div>
<div>
<ul>
[[ for:posts:post ]]
[[ component:post-listing ]]
[[ endfor ]]
</ul>
</div>
</div>
</body>
</html>

View File

@@ -5,17 +5,20 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>[[ post.title ]]</title>
<link rel="icon" type="image/png" href="/favicon.ico">
<link rel="stylesheet" href="/styles/global.css">
<link rel="stylesheet" href="/styles/post.css">
</head>
<body>
[[ component:return ]]
<div>
[[ component:dark-mode-checkbox ]]
<div id="main">
<div id="post-info">
<h1>[[ post.title ]]</h1>
<div>
<span><span [[ if:author_expected ]]title="(obviously)"[[ endif ]]>By [[ post.author ]]</span> | <span>[[ post.date ]]</span> [[ if:post.tags_exist ]]| <span>[[ for:post.tags:tag:index:max ]]<a href="/tags/[[ tag ]]">[[ tag ]]</a>[[ if:index:!max ]], [[ endif ]][[ endfor ]]</span>[[ endif ]]</span>
</div>
</div>
<input id="show-md" type="checkbox"/><label for="html">Show MD</label>
<input id="show-md" type="checkbox"/><label for="show-md">Show MD</label>
<div id="post-html">
[[ html:post.html ]]
</div>
@@ -27,6 +30,12 @@
[[ endif ]]
[[ endfor ]]
</div>
[[ if:post.slug:!next_post.slug ]]
<div id="next-post-container">
<a href="/posts/[[ next_post.slug ]]">Next Post: [[ next_post.title ]]</a>
</div>
[[ endif ]]
[[ component:makoto-styling ]]
</div>
</body>
</html>

View File

@@ -5,17 +5,22 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>"[[ tag ]]" posts</title>
<link rel="icon" type="image/png" href="/favicon.ico">
<link rel="stylesheet" href="/styles/global.css">
</head>
<body>
<div>
<h2>Search for posts with tag "[[ tag ]]"</h2>
</div>
<div>
<ul>
[[ for:posts:post ]]
[[ component:post-listing ]]
[[ endfor ]]
</ul>
[[ component:return ]]
[[ component:dark-mode-checkbox ]]
<div id="main">
<div>
<h2>Search for posts with tag "[[ tag ]]"</h2>
</div>
<div>
<ul>
[[ for:posts:post ]]
[[ component:post-listing ]]
[[ endfor ]]
</ul>
</div>
</div>
</body>
</html>