aboutsummaryrefslogtreecommitdiff
path: root/docs
diff options
context:
space:
mode:
Diffstat (limited to 'docs')
-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
5 files changed, 247 insertions, 215 deletions
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 {