aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--docs/index.html83
-rw-r--r--script/showPost.js9
-rw-r--r--style.css112
3 files changed, 204 insertions, 0 deletions
diff --git a/docs/index.html b/docs/index.html
new file mode 100644
index 0000000..e800005
--- /dev/null
+++ b/docs/index.html
@@ -0,0 +1,83 @@
1
2<!DOCTYPE html>
3<html lang=en>
4<head>
5<link rel=stylesheet href=../style.css>
6<meta charset=UTF-8>
7<title>n</title>
8
9<script>
10function showPost(id) {
11 let post = document.getElementById(id);
12 if (post.style.display == "none") {
13 post.style.display = "block";
14 } else {
15 post.style.display = "none";
16 }
17}
18
19</script> </head>
20
21<body>
22<div class=black-circle>
23 <h1 class=heading>n</h1>
24</div>
25<div class=posts>
26
27
28 <div class="post">
29 <div class="date">30/07 2019</div>
30 <a href="#another_post_to_test_date.md" class="post-link" onClick="showPost('another_post_to_test_date.md')">Another Post To Test Date</a>
31 <div id="another_post_to_test_date.md" class="post-text" style="display: none">
32 <p>this posts tests chronological arrangement of items</p>
33 <a href="#another_post_to_test_date.md" class="post-end-link" onClick="showPost('another_post_to_test_date.md')">↑ Collapse</a>
34 <div class=separator></div>
35 </div>
36 </div>
37
38 <div class="post">
39 <div class="date">30/07 2019</div>
40 <a href="#z_is_the_latest_post.md" class="post-link" onClick="showPost('z_is_the_latest_post.md')">Z Is The Latest Post</a>
41 <div id="z_is_the_latest_post.md" class="post-text" style="display: none">
42 <p>this is the latest post,
43hope it shows up at the top</p>
44 <a href="#z_is_the_latest_post.md" class="post-end-link" onClick="showPost('z_is_the_latest_post.md')">↑ Collapse</a>
45 <div class=separator></div>
46 </div>
47 </div>
48
49 <div class="post">
50 <div class="date">30/07 2019</div>
51 <a href="#get_better_at_yanking_and_putting_in_vim.md" class="post-link" onClick="showPost('get_better_at_yanking_and_putting_in_vim.md')">Get Better At Yanking And Putting In Vim</a>
52 <div id="get_better_at_yanking_and_putting_in_vim.md" class="post-text" style="display: none">
53 <ol>
54<li><p>reselecting previously selected text (i use this to fix botched selections):</p>
55
56<pre><code>gv &quot; :h gv for more
57 &quot; you can use `o` in visual mode to go to the `Other` end of the selection
58 &quot; use a motion to fix the selection
59</code></pre></li>
60<li><p>reselecting previously yanked text:</p>
61
62<pre><code>`[v`]
63`[ &quot; marks the beginning of the previously yanked text :h `[
64`] &quot; marks the end :h `]
65 v &quot; visual select everything in between
66
67nnoremap gb `[v`] &quot; &quot;a quick map to perform the above
68</code></pre></li>
69<li><p>pasting and indenting text (in one go):</p>
70
71<pre><code>]p &quot; put (p) and adjust indent to current line
72]P &quot; put the text before the cursor (P) and adjust indent to current line
73</code></pre></li>
74</ol>
75 <a href="#get_better_at_yanking_and_putting_in_vim.md" class="post-end-link" onClick="showPost('get_better_at_yanking_and_putting_in_vim.md')">↑ Collapse</a>
76 <div class=separator></div>
77 </div>
78 </div>
79
80</div>
81</body>
82</html>
83
diff --git a/script/showPost.js b/script/showPost.js
new file mode 100644
index 0000000..07a9719
--- /dev/null
+++ b/script/showPost.js
@@ -0,0 +1,9 @@
1function showPost(id) {
2 let post = document.getElementById(id);
3 if (post.style.display == "none") {
4 post.style.display = "block";
5 } else {
6 post.style.display = "none";
7 }
8}
9
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..fd07289
--- /dev/null
+++ b/style.css
@@ -0,0 +1,112 @@
1:root {
2 --cyan: #00FECA;
3 --pink: #FF2079;
4 --black: #212121;
5 --light-black: #535353;
6 --white: #ffffff;
7 --dark-white: #d4d4d4;
8}
9
10body {
11 font-family: sans;
12 background-color: var(--white);
13 color: var(--black);
14 font-size: 18px;
15 padding: 0;
16 padding-top: 2rem;
17 text-align: center;
18}
19
20.posts {
21 text-align: left;
22 display: inline-block;
23 width: 100%;
24}
25
26@media only screen and (min-width: 1000px) {
27 .posts {
28 text-align: left;
29 display: inline-block;
30 width: 60%;
31 }
32}
33
34
35.post {
36 margin: 2rem;
37}
38
39hr {
40 color: var(--light-black);
41}
42
43.date {
44 font-weight: 400;
45 font-size: 0.8rem;
46 color: var(--light-black);
47}
48
49.separator {
50 margin: 0;
51 margin-top: 1rem;
52 margin-bottom: 1rem;
53 border-top: 1px solid var(--dark-white);
54}
55
56.black-circle {
57 margin:0 auto;
58 width: 10rem;
59 height: 10rem;
60 border: 0px solid transparent;
61 border-radius: 50%;
62 background-color: var(--black);
63}
64
65.heading {
66 margin:0 auto;
67 color: var(--white);
68 text-align: center;
69 font-size: 120px;
70 font-family: 'Iosevka Term', sans-serif;
71 text-shadow: 0.25rem 0rem var(--cyan), -0.25rem 0rem var(--pink);
72 line-height: 8.5rem;
73 font-style: italic;
74}
75
76a, a:hover, a:visited, a:active {
77 text-decoration: none;
78 transition: ease 0.2s;
79}
80
81a:hover, a:active {
82 background-color: var(--dark-white);
83}
84
85.post-link {
86 color: var(--black);
87 font-family: sans-serif;
88 font-weight: 600;
89 font-size: 1rem;
90 text-decoration: none;
91 text-decoration-skip: objects edges box-decoration;
92}
93
94.post-end-link, .post-end-link:hover, .post-end-link:visited, .post-end-link:active {
95 text-decoration: none;
96 color: var(--light-black);
97 text-shadow: none;
98}
99
100.post-text {
101 font-size: 14px;
102}
103
104pre, code {
105 background-color: var(--dark-white);
106 color: var(--black);
107}
108
109pre {
110 padding: 1rem;
111 overflow: auto;
112}
generated by cgit v1.2.3 (git 2.25.1) at 2024-12-26 17:56:23 +0000