aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAkshay <[email protected]>2021-05-23 06:25:09 +0100
committerAkshay <[email protected]>2021-05-23 06:25:09 +0100
commit26765a8c4eb7ed9c86c6f6a9fc690f57920efcd4 (patch)
tree1de32146d92a9cfb19dc76b5a2163fa59870ae31
parenta3bf62f0a8f0eaee56bc7e7a05133017153dbd67 (diff)
update art page
Diffstat
-rw-r--r--art.esh49
-rw-r--r--art/b4.pngbin0 -> 26240 bytes
-rw-r--r--art/isopod.pngbin0 -> 30768 bytes
-rw-r--r--docs/art/b4.pngbin0 -> 26240 bytes
-rw-r--r--docs/art/index.html379
-rw-r--r--docs/art/isopod.pngbin0 -> 30768 bytes
-rw-r--r--docs/index.html10
-rw-r--r--docs/style.css73
-rwxr-xr-xgenerate.sh48
-rw-r--r--scripts.sh16
10 files changed, 328 insertions, 247 deletions
diff --git a/art.esh b/art.esh
new file mode 100644
index 0000000..9a72b75
--- /dev/null
+++ b/art.esh
@@ -0,0 +1,49 @@
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <link rel="stylesheet" href="/style.css">
5 <link rel="stylesheet" href="/syntax.css">
6 <meta charset="UTF-8">
7 <meta name="viewport" content="initial-scale=1">
8 <meta content="#ffffff" name="theme-color">
9 <meta name="HandheldFriendly" content="true">
10 <meta property="og:title" content="Art · peppe.rs">
11 <meta property="og:type" content="website">
12 <meta property="og:description" content="a static site {for, by, about} me ">
13 <meta property="og:url" content="https://peppe.rs">
14 <link rel="icon" type="image/x-icon" href="/favicon.png">
15 <title>Art · peppe.rs</title>
16 <body>
17 <div class="posts">
18 <a href="/" class="post-end-link">Home</a>
19 <span>/</span>
20 <a href="/posts" class="post-end-link">Art</a>
21 <h1>Art</h1>
22 <div class="separator"></div>
23 <div id="photos">
24 <%
25 source ./scripts.sh
26 for f in `ls -t ./art`; do
27cat << XXX
28<a href="/art/$f">
29 <div class="photo-container">
30 <img src="/art/$f">
31 <div class="photo-overlay">
32 <div class="photo-text">
33 <div class="photo-title">$(title_wrapper $f)</div>
34 <div class="photo-date">$(date -r "./art/$f" "+%d/%m — %Y")</div>
35 </div>
36 </div>
37 </div>
38</a>
39XXX
40 done
41 %>
42 </div>
43 <div class="separator"></div>
44 <a href="/" class="post-end-link">Home</a>
45 <span>/</span>
46 <a href="/posts" class="post-end-link">Art</a>
47 </div>
48 </body>
49</html>
diff --git a/art/b4.png b/art/b4.png
new file mode 100644
index 0000000..6216193
--- /dev/null
+++ b/art/b4.png
Binary files differ
diff --git a/art/isopod.png b/art/isopod.png
new file mode 100644
index 0000000..510483a
--- /dev/null
+++ b/art/isopod.png
Binary files differ
diff --git a/docs/art/b4.png b/docs/art/b4.png
new file mode 100644
index 0000000..6216193
--- /dev/null
+++ b/docs/art/b4.png
Binary files differ
diff --git a/docs/art/index.html b/docs/art/index.html
index bf489c4..1a24c62 100644
--- a/docs/art/index.html
+++ b/docs/art/index.html
@@ -1,216 +1,175 @@
1<!DOCTYPE html> 1<!DOCTYPE html>
2<html lang="en"> 2<html lang="en">
3<head> 3 <head>
4<link rel="stylesheet" href="/style.css"> 4 <link rel="stylesheet" href="/style.css">
5<link rel="alternate" type="application/atom+xml" title="nerdypepper's micro musings" href="/index.xml"> 5 <link rel="stylesheet" href="/syntax.css">
6<meta charset="UTF-8"> 6 <meta charset="UTF-8">
7<meta name="viewport" content="initial-scale=1"> 7 <meta name="viewport" content="initial-scale=1">
8<meta content="#ffffff" name="theme-color"> 8 <meta content="#ffffff" name="theme-color">
9<meta name="HandheldFriendly" content="true"> 9 <meta name="HandheldFriendly" content="true">
10<meta property="og:title" content="nerdypepper"> 10 <meta property="og:title" content="Art · peppe.rs">
11<meta property="og:type" content="website"> 11 <meta property="og:type" content="website">
12<meta property="og:description" content="nerdypepper's micro musings"> 12 <meta property="og:description" content="a static site {for, by, about} me ">
13<meta property="og:url" content="https://peppe.rs"> 13 <meta property="og:url" content="https://peppe.rs">
14<link rel="icon" type="image/x-icon" href="/favicon.png"> 14 <link rel="icon" type="image/x-icon" href="/favicon.png">
15<title>peppe.rs</title> 15 <title>Art · peppe.rs</title>
16 <body> 16 <body>
17 <div class="posts"> 17 <div class="posts">
18 <div class="post"> 18 <a href="/" class="post-end-link">Home</a>
19 <a href="/" class="post-end-link">Home</a> 19 <span>/</span>
20 <span>/</span> 20 <a href="/posts" class="post-end-link">Art</a>
21 <a class="post-end-link">Art</a> 21 <h1>Art</h1>
22 22 <div class="separator"></div>
23 <h1>Art</h1> 23 <div id="photos">
24 <div class="separator"></div> 24 <a href="/art/b4.png">
25 <table> 25 <div class="photo-container">
26 26 <img src="/art/b4.png">
27 <tr> 27 <div class="photo-overlay">
28 <td class=table-post> 28 <div class="photo-text">
29 <div class="date"> 29 <div class="photo-title">B4</div>
30 14/05 — 2021 30 <div class="photo-date">22/05 — 2021</div>
31 </div> 31 </div>
32 <a href="/art/wraith.png" class="post-link"> 32 </div>
33 <span class="post-link">Wraith</span> 33 </div>
34 </a> 34</a>
35 </td> 35<a href="/art/isopod.png">
36 <td class="table-stats"> 36 <div class="photo-container">
37 <a href="/art/wraith.png"> 37 <img src="/art/isopod.png">
38 <img src="/art/wraith.png" height="50px"> 38 <div class="photo-overlay">
39 </a> 39 <div class="photo-text">
40 </td> 40 <div class="photo-title">Isopod</div>
41 </tr> 41 <div class="photo-date">22/05 — 2021</div>
42 42 </div>
43 <tr> 43 </div>
44 <td class=table-post> 44 </div>
45 <div class="date"> 45</a>
46 08/05 — 2021 46<a href="/art/wraith.png">
47 </div> 47 <div class="photo-container">
48 <a href="/art/antique.png" class="post-link"> 48 <img src="/art/wraith.png">
49 <span class="post-link">Antique</span> 49 <div class="photo-overlay">
50 </a> 50 <div class="photo-text">
51 </td> 51 <div class="photo-title">Wraith</div>
52 <td class="table-stats"> 52 <div class="photo-date">14/05 — 2021</div>
53 <a href="/art/antique.png"> 53 </div>
54 <img src="/art/antique.png" height="50px"> 54 </div>
55 </a> 55 </div>
56 </td> 56</a>
57 </tr> 57<a href="/art/antique.png">
58 58 <div class="photo-container">
59 <tr> 59 <img src="/art/antique.png">
60 <td class=table-post> 60 <div class="photo-overlay">
61 <div class="date"> 61 <div class="photo-text">
62 06/05 — 2021 62 <div class="photo-title">Antique</div>
63 </div> 63 <div class="photo-date">08/05 — 2021</div>
64 <a href="/art/grimoire.png" class="post-link"> 64 </div>
65 <span class="post-link">Grimoire</span> 65 </div>
66 </a> 66 </div>
67 </td> 67</a>
68 <td class="table-stats"> 68<a href="/art/grimoire.png">
69 <a href="/art/grimoire.png"> 69 <div class="photo-container">
70 <img src="/art/grimoire.png" height="50px"> 70 <img src="/art/grimoire.png">
71 </a> 71 <div class="photo-overlay">
72 </td> 72 <div class="photo-text">
73 </tr> 73 <div class="photo-title">Grimoire</div>
74 74 <div class="photo-date">06/05 — 2021</div>
75 <tr> 75 </div>
76 <td class=table-post> 76 </div>
77 <div class="date"> 77 </div>
78 01/05 — 2021 78</a>
79 </div> 79<a href="/art/beret_beaver.png">
80 <a href="/art/beret_beaver.png" class="post-link"> 80 <div class="photo-container">
81 <span class="post-link">Beret Beaver</span> 81 <img src="/art/beret_beaver.png">
82 </a> 82 <div class="photo-overlay">
83 </td> 83 <div class="photo-text">
84 <td class="table-stats"> 84 <div class="photo-title">Beret Beaver</div>
85 <a href="/art/beret_beaver.png"> 85 <div class="photo-date">01/05 — 2021</div>
86 <img src="/art/beret_beaver.png" height="50px"> 86 </div>
87 </a> 87 </div>
88 </td> 88 </div>
89 </tr> 89</a>
90 90<a href="/art/aviator_owl.png">
91 <tr> 91 <div class="photo-container">
92 <td class=table-post> 92 <img src="/art/aviator_owl.png">
93 <div class="date"> 93 <div class="photo-overlay">
94 01/05 — 2021 94 <div class="photo-text">
95 </div> 95 <div class="photo-title">Aviator Owl</div>
96 <a href="/art/aviator_owl.png" class="post-link"> 96 <div class="photo-date">01/05 — 2021</div>
97 <span class="post-link">Aviator Owl</span> 97 </div>
98 </a>
99 </td>
100 <td class="table-stats">
101 <a href="/art/aviator_owl.png">
102 <img src="/art/aviator_owl.png" height="50px">
103 </a>
104 </td>
105 </tr>
106
107 <tr>
108 <td class=table-post>
109 <div class="date">
110 01/05 — 2021
111 </div>
112 <a href="/art/monocle_rabbit.png" class="post-link">
113 <span class="post-link">Monocle Rabbit</span>
114 </a>
115 </td>
116 <td class="table-stats">
117 <a href="/art/monocle_rabbit.png">
118 <img src="/art/monocle_rabbit.png" height="50px">
119 </a>
120 </td>
121 </tr>
122
123 <tr>
124 <td class=table-post>
125 <div class="date">
126 26/03 — 2021
127 </div>
128 <a href="/art/ramen_noodles.png" class="post-link">
129 <span class="post-link">Ramen Noodles</span>
130 </a>
131 </td>
132 <td class="table-stats">
133 <a href="/art/ramen_noodles.png">
134 <img src="/art/ramen_noodles.png" height="50px">
135 </a>
136 </td>
137 </tr>
138
139 <tr>
140 <td class=table-post>
141 <div class="date">
142 22/02 — 2021
143 </div>
144 <a href="/art/please_do_not_feed_the_animals.png" class="post-link">
145 <span class="post-link">Please Do Not Feed The Animals</span>
146 </a>
147 </td>
148 <td class="table-stats">
149 <a href="/art/please_do_not_feed_the_animals.png">
150 <img src="/art/please_do_not_feed_the_animals.png" height="50px">
151 </a>
152 </td>
153 </tr>
154
155 <tr>
156 <td class=table-post>
157 <div class="date">
158 25/04 — 2020
159 </div>
160 <a href="/art/moonshine.png" class="post-link">
161 <span class="post-link">Moonshine</span>
162 </a>
163 </td>
164 <td class="table-stats">
165 <a href="/art/moonshine.png">
166 <img src="/art/moonshine.png" height="50px">
167 </a>
168 </td>
169 </tr>
170
171 <tr>
172 <td class=table-post>
173 <div class="date">
174 09/04 — 2020
175 </div>
176 <a href="/art/onigiri.png" class="post-link">
177 <span class="post-link">Onigiri</span>
178 </a>
179 </td>
180 <td class="table-stats">
181 <a href="/art/onigiri.png">
182 <img src="/art/onigiri.png" height="50px">
183 </a>
184 </td>
185 </tr>
186
187 <tr>
188 <td class=table-post>
189 <div class="date">
190 17/01 — 2020
191 </div>
192 <a href="/art/the_observer.png" class="post-link">
193 <span class="post-link">The Observer</span>
194 </a>
195 </td>
196 <td class="table-stats">
197 <a href="/art/the_observer.png">
198 <img src="/art/the_observer.png" height="50px">
199 </a>
200 </td>
201 </tr>
202 </table>
203 <div class="separator"></div>
204 <div class="footer">
205 <a href="https://github.com/nerdypepper">Github</a> ·
206 <a rel="me" href="https://freeradical.zone/@NerdyPepper">Mastodon</a> ·
207 <a href="mailto:[email protected]">Mail</a> ·
208 <a href="https://linkedin.com/in/nerdypepper">LinkedIn</a> ·
209 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">
210 <img class="footimgs" src="https://d33wubrfki0l68.cloudfront.net/94387e9d77fbc8b4360db81e72603ecba3df94a7/632bc/static/cc.svg">
211 </a>
212 </div> 98 </div>
99 </div>
100</a>
101<a href="/art/monocle_rabbit.png">
102 <div class="photo-container">
103 <img src="/art/monocle_rabbit.png">
104 <div class="photo-overlay">
105 <div class="photo-text">
106 <div class="photo-title">Monocle Rabbit</div>
107 <div class="photo-date">01/05 — 2021</div>
108 </div>
213 </div> 109 </div>
214</div> 110 </div>
215</body> 111</a>
112<a href="/art/ramen_noodles.png">
113 <div class="photo-container">
114 <img src="/art/ramen_noodles.png">
115 <div class="photo-overlay">
116 <div class="photo-text">
117 <div class="photo-title">Ramen Noodles</div>
118 <div class="photo-date">26/03 — 2021</div>
119 </div>
120 </div>
121 </div>
122</a>
123<a href="/art/please_do_not_feed_the_animals.png">
124 <div class="photo-container">
125 <img src="/art/please_do_not_feed_the_animals.png">
126 <div class="photo-overlay">
127 <div class="photo-text">
128 <div class="photo-title">Please Do Not Feed The Animals</div>
129 <div class="photo-date">22/02 — 2021</div>
130 </div>
131 </div>
132 </div>
133</a>
134<a href="/art/moonshine.png">
135 <div class="photo-container">
136 <img src="/art/moonshine.png">
137 <div class="photo-overlay">
138 <div class="photo-text">
139 <div class="photo-title">Moonshine</div>
140 <div class="photo-date">25/04 — 2020</div>
141 </div>
142 </div>
143 </div>
144</a>
145<a href="/art/onigiri.png">
146 <div class="photo-container">
147 <img src="/art/onigiri.png">
148 <div class="photo-overlay">
149 <div class="photo-text">
150 <div class="photo-title">Onigiri</div>
151 <div class="photo-date">09/04 — 2020</div>
152 </div>
153 </div>
154 </div>
155</a>
156<a href="/art/the_observer.png">
157 <div class="photo-container">
158 <img src="/art/the_observer.png">
159 <div class="photo-overlay">
160 <div class="photo-text">
161 <div class="photo-title">The Observer</div>
162 <div class="photo-date">17/01 — 2020</div>
163 </div>
164 </div>
165 </div>
166</a>
167
168 </div>
169 <div class="separator"></div>
170 <a href="/" class="post-end-link">Home</a>
171 <span>/</span>
172 <a href="/posts" class="post-end-link">Art</a>
173 </div>
174 </body>
216</html> 175</html>
diff --git a/docs/art/isopod.png b/docs/art/isopod.png
new file mode 100644
index 0000000..510483a
--- /dev/null
+++ b/docs/art/isopod.png
Binary files differ
diff --git a/docs/index.html b/docs/index.html
index f5edd3a..b692299 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -78,15 +78,15 @@
78 <tr> 78 <tr>
79 <td class=table-post> 79 <td class=table-post>
80 <div class="date"> 80 <div class="date">
81 14/05 — 2021 81 22/05 — 2021
82 </div> 82 </div>
83 <a href="/art/wraith.png" class="post-link"> 83 <a href="/art/b4.png" class="post-link">
84 <span class="post-link">Wraith</span> 84 <span class="post-link">B4</span>
85 </a> 85 </a>
86 </td> 86 </td>
87 <td class="table-stats"> 87 <td class="table-stats">
88 <a href="/art/wraith.png"> 88 <a href="/art/b4.png">
89 <img src="/art/wraith.png" height="50px"> 89 <img src="/art/b4.png" height="50px">
90 </a> 90 </a>
91 </td> 91 </td>
92 </tr> 92 </tr>
diff --git a/docs/style.css b/docs/style.css
index cdcb2d0..70ce31e 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -168,16 +168,89 @@ pre > code {
168 color: var(--black); 168 color: var(--black);
169} 169}
170 170
171/* art stuff */
172#photos {
173 -webkit-column-count: 3;
174 -webkit-column-gap: 12px;
175 -moz-column-count: 3;
176 -moz-column-gap: 12px;
177 column-count: 3;
178 column-gap: 12px;
179}
180
181#photos img {
182 /* Just in case there are inline attributes */
183 width: 100% !important;
184 height: auto !important;
185 border: 0px;
186 border-radius: 0.4rem;
187 box-shadow: none;
188}
189
190.photo-container {
191 position: relative;
192 width: 100%;
193 margin-bottom: 12px;
194}
195
196.photo-overlay {
197 line-height: 0;
198 position: absolute;
199 top: 0;
200 bottom: 0;
201 left: 0;
202 right: 0;
203 width: 100% !important;
204 height: auto !important;
205 opacity: 0;
206 transition: .3s ease;
207 background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.0));
208 border-radius: 0.4rem;
209}
210
211.photo-text {
212 line-height: 1;
213 padding: 12px;
214 color: white;
215}
216
217.photo-title {
218 font-size: 1rem;
219 color: white;
220}
221
222.photo-date {
223 margin-top: 0.2rem;
224 font-size: 0.6rem;
225 color: white;
226}
227
228.photo-container:hover .photo-overlay {
229 opacity: 1;
230}
231
232/* end of art stuff */
233
171@media only screen and (min-width: 1080px) { 234@media only screen and (min-width: 1080px) {
172 .posts { 235 .posts {
173 max-width: 650px; 236 max-width: 650px;
174 } 237 }
238 #photos {
239 -moz-column-count: 3;
240 -webkit-column-count: 3;
241 column-count: 3;
242 }
175} 243}
176 244
177@media only screen and (min-width: 1400px) { 245@media only screen and (min-width: 1400px) {
178 .posts { 246 .posts {
179 max-width: 650px; 247 max-width: 650px;
180 } 248 }
249 #photos {
250 -moz-column-count: 3;
251 -webkit-column-count: 3;
252 column-count: 3;
253 }
181} 254}
182 255
183.posts { 256.posts {
diff --git a/generate.sh b/generate.sh
index 91c5e3b..83f5c88 100755
--- a/generate.sh
+++ b/generate.sh
@@ -6,21 +6,7 @@ INDEX_BLOG_COUNT=0
6INDEX_ART_LIMIT=1 6INDEX_ART_LIMIT=1
7INDEX_ART_COUNT=0 7INDEX_ART_COUNT=0
8 8
9title_wrapper() { 9source ./scripts.sh
10 # remove extension
11 # snake to title case
12 echo "$1" | sed -E -e "s/\..+$//g" -e "s/_(.)/ \u\1/g" -e "s/^(.)/\u\1/g"
13}
14
15read_time() {
16 minu="$(eva -f 1 $1/150 | xargs)"
17 echo "$minu"
18}
19
20height() {
21 cm="$(eva -f 2 $1*18*0.0222 | xargs)"
22 echo "$cm"
23}
24 10
25link_wrapper() { 11link_wrapper() {
26 # 1 - id 12 # 1 - id
@@ -133,7 +119,7 @@ mkdir -p docs/art
133cp -r ./art/* docs/art/ 119cp -r ./art/* docs/art/
134 120
135 121
136cat << EOF | tee ./docs/posts/index.html ./docs/art/index.html ./docs/index.html > /dev/null 122cat << EOF | tee ./docs/posts/index.html ./docs/index.html > /dev/null
137<!DOCTYPE html> 123<!DOCTYPE html>
138<html lang="en"> 124<html lang="en">
139<head> 125<head>
@@ -210,7 +196,7 @@ for f in $posts; do
210 mkdir -p "docs/posts/$id" 196 mkdir -p "docs/posts/$id"
211 esh \ 197 esh \
212 -o "docs/posts/$id/index.html" \ 198 -o "docs/posts/$id/index.html" \
213 "./post.esh" \ 199 post.esh \
214 file="$file" \ 200 file="$file" \
215 date="$post_date" \ 201 date="$post_date" \
216 title="$post_title" \ 202 title="$post_title" \
@@ -223,25 +209,22 @@ echo "$(more_links posts)" >> ./docs/index.html
223echo "$(recent_link Art)" >> ./docs/index.html 209echo "$(recent_link Art)" >> ./docs/index.html
224 210
225# art 211# art
226echo -ne "
227 <h1>Art</h1>
228 <div class=\"separator\"></div>
229 <table>
230 " >> ./docs/art/index.html
231 212
232echo 213echo
233echo "[+] ART" 214echo "[+] ART"
234 215
235for f in $art; do 216esh \
236 file="./art/"$f 217 -o "docs/art/index.html" \
237 id="${file##*/}" 218 art.esh
238 art_title=$(title_wrapper "$id")
239 art_date=$(date -r "$file" "+%d/%m — %Y")
240 art_post=$(art_block "$f" "$art_title" "$art_date")
241 echo "[~] $art_title"
242 echo -ne "$art_post" >> docs/art/index.html
243 219
220for f in $art; do
244 if [[ $INDEX_ART_COUNT -lt $INDEX_ART_LIMIT ]]; then 221 if [[ $INDEX_ART_COUNT -lt $INDEX_ART_LIMIT ]]; then
222 file="./art/"$f
223 id="${file##*/}"
224 art_title=$(title_wrapper "$id")
225 art_date=$(date -r "$file" "+%d/%m — %Y")
226 art_post=$(art_block "$f" "$art_title" "$art_date")
227 echo "[~] $art_title"
245 echo -ne "$art_post" >> ./docs/index.html 228 echo -ne "$art_post" >> ./docs/index.html
246 ((INDEX_ART_COUNT+=1)) 229 ((INDEX_ART_COUNT+=1))
247 fi 230 fi
@@ -250,12 +233,13 @@ done
250echo "$(more_links art)" >> ./docs/index.html 233echo "$(more_links art)" >> ./docs/index.html
251 234
252# generate rss feeds 235# generate rss feeds
253echo "generating RSS feeds ..." 236echo
237echo "[+] Generating RSS feeds ..."
254esh \ 238esh \
255 -o "./docs/index.xml" \ 239 -o "./docs/index.xml" \
256 "rss.esh" 240 "rss.esh"
257 241
258cat << EOF | tee -a ./docs/posts/index.html ./docs/art/index.html ./docs/index.html > /dev/null 242cat << EOF | tee -a ./docs/posts/index.html ./docs/index.html > /dev/null
259 </table> 243 </table>
260 <div class="separator"></div> 244 <div class="separator"></div>
261 <div class="footer"> 245 <div class="footer">
diff --git a/scripts.sh b/scripts.sh
new file mode 100644
index 0000000..bd0e49d
--- /dev/null
+++ b/scripts.sh
@@ -0,0 +1,16 @@
1title_wrapper() {
2 # remove extension
3 # snake to title case
4 echo "$1" | sed -E -e "s/\..+$//g" -e "s/_(.)/ \u\1/g" -e "s/^(.)/\u\1/g"
5}
6
7read_time() {
8 minu="$(eva -f 1 $1/150 | xargs)"
9 echo "$minu"
10}
11
12height() {
13 cm="$(eva -f 2 $1*18*0.0222 | xargs)"
14 echo "$cm"
15}
16
generated by cgit v1.2.3 (git 2.25.1) at 2024-04-30 07:34:17 +0100