add css, next post feature
change favicon, add more readme, add extra example post, dark/light mode toggle
This commit is contained in:
1
templates/components/dark-mode-checkbox.html
Normal file
1
templates/components/dark-mode-checkbox.html
Normal file
@@ -0,0 +1 @@
|
||||
<input id="dark-mode" type="checkbox"/><label for="dark-mode"></label>
|
||||
35
templates/components/makoto-styling.html
Normal file
35
templates/components/makoto-styling.html
Normal 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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user