PageSourceSearch

https://imperialoctopus.com/

html imperialoctopus.com collected 2026-09-24 14:45:02 UTC 33,405 bytes, 1,986 lines download raw bytes

1<!doctype html>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16<!-- `site.alt_lang` can specify a language different from the UI -->
17<html lang="en" >
18  <head>
19  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
20  <meta name="theme-color" media="(prefers-color-scheme: light)" content="#f7f7f7">
21  <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1b1b1e">
22  <meta name="mobile-web-app-capable" content="yes">
23  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
24  <meta
25    name="viewport"
26    content="width=device-width, user-scalable=no initial-scale=1, shrink-to-fit=no, viewport-fit=cover"
27  ><!-- Setup Open Graph image -->
28
29  
30
31  <!-- Begin Jekyll SEO tag v2.8.0 -->
32<meta name="generator" content="Jekyll v4.4.1" />
33<meta property="og:title" content="Zoey Child" />
34<meta property="og:locale" content="en" />
35<link rel="canonical" href="https://imperialoctopus.com/" />
36<meta property="og:url" content="https://imperialoctopus.com/" />
37<meta property="og:site_name" content="Zoey Child" />
38<meta property="og:type" content="website" />
39<link rel="next" href="https://imperialoctopus.com/page2" />
40<meta name="twitter:card" content="summary" />
41<meta property="twitter:title" content="Zoey Child" />
42<script type="application/ld+json">
43{"@context":"https://schema.org","@type":"WebSite","headline":"Zoey Child","name":"Zoey Child","sameAs":["https://cupoftea.social/@imperialoctopus","https://codeberg.org/imperialoctopus"],"url":"https://imperialoctopus.com/"}</script>
43
44<!-- End Jekyll SEO tag -->
45
46
47  <title>Zoey Child
48  </title>
49
50  <!--
51  The Favicons for Web, Android, Microsoft, and iOS (iPhone and iPad) Apps
52  Generated by: https://realfavicongenerator.net/
53-->
54
55
56
57<link rel="apple-touch-icon" sizes="180x180" href="/assets/img/favicons/apple-touch-icon.png">
58<link rel="icon" type="image/png" sizes="32x32" href="/assets/img/favicons/favicon-32x32.png">
59<link rel="icon" type="image/png" sizes="16x16" href="/assets/img/favicons/favicon-16x16.png">
60
61  <link rel="manifest" href="/assets/img/favicons/site.webmanifest">
62
63<link rel="shortcut icon" href="/assets/img/favicons/favicon.ico">
64<meta name="apple-mobile-web-app-title" content="Zoey Child">
65<meta name="application-name" content="Zoey Child">
66<meta name="msapplication-TileColor" content="#da532c">
67<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
68<meta name="theme-color" content="#ffffff">
69
70
71  <!-- Resource Hints -->
72  
73    
74      
75        <link rel="preconnect" href="https://fonts.googleapis.com" >
76      
77        <link rel="dns-prefetch" href="https://fonts.googleapis.com" >
78      
79    
80      
81        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
82      
83        <link rel="dns-prefetch" href="https://fonts.gstatic.com" >
84      
85    
86      
87        <link rel="preconnect" href="https://cdn.jsdelivr.net" >
88      
89        <link rel="dns-prefetch" href="https://cdn.jsdelivr.net" >
90      
91    
92  
93
94  <!-- Bootstrap -->
95  
96    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
97  
98
99  <!-- Theme style -->
100  <link rel="stylesheet" href="/assets/css/jekyll-theme-chirpy.css">
101
102  <!-- Web Font -->
103  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Source+Sans+Pro:wght@400;600;700;900&display=swap">
104
105  <!-- Font Awesome Icons -->
106  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css">
107
108  <!-- 3rd-party Dependencies -->
109
110  
111
112  
113    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/loading-attribute-polyfill.min.css">
114  
115
116  
117
118  <!-- Scripts -->
119
120  
120<script src="/assets/js/dist/theme.min.js"></script>
120
121
122  <!-- JS selector for site. -->
123
124<!-- commons -->
125
126
127
128<!-- layout specified -->
129
130
131  
132
133  
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149  
150    
151
152    
153
154  
155
156  
157    
158
159    
160
161  
162
163  
164    
165
166    
167
168  
169
170  
171    
172
173    
174
175  
176
177  
178    
179
180    
181
182  
183
184  
185    
186
187    
188
189  
190
191
192
193  
193<script defer src="https://cdn.jsdelivr.net/combine/npm/[email protected]/dest/simple-jekyll-search.min.js,npm/[email protected]/dist/loading-attribute-polyfill.umd.min.js,npm/[email protected]/dayjs.min.js,npm/[email protected]/locale/en.js,npm/[email protected]/plugin/relativeTime.js,npm/[email protected]/plugin/localizedFormat.js"></script>
193
194
195
196
197
198
199
200
201<script defer src="/assets/js/dist/home.min.js"></script>
201
202
203
204
205<!-- Pageviews -->
206
207
208
209  
210
211  <!-- A placeholder to allow defining custom metadata -->
212
213</head>
214
215
216  <body>
217    <!-- The Side Bar -->
218
219<aside aria-label="Sidebar" id="sidebar" class="d-flex flex-column align-items-end">
220  <header class="profile-wrapper">
221    <a href="/" id="avatar" class="rounded-circle"><img src="/assets/img/pyramid2.png" width="112" height="112" alt="avatar" onerror="this.style.display='none'"></a>
222
223    <a class="site-title d-block" href="/">Zoey Child</a>
224    <p class="site-subtitle fst-italic mb-0">imperialoctopus</p>
225  </header>
226  <!-- .profile-wrapper -->
227
228  <nav class="flex-column flex-grow-1 w-100 ps-0">
229    <ul class="nav">
230      <!-- home -->
231      <li class="nav-item active">
232        <a href="/" class="nav-link">
233          <i class="fa-fw fas fa-home"></i>
234          <span>HOME</span>
235        </a>
236      </li>
237      <!-- the real tabs -->
238      
239        <li class="nav-item">
240          <a href="/categories/" class="nav-link">
241            <i class="fa-fw fas fa-stream"></i>
242            
243
244            <span>CATEGORIES</span>
245          </a>
246        </li>
247        <!-- .nav-item -->
248      
249        <li class="nav-item">
250          <a href="/tags/" class="nav-link">
251            <i class="fa-fw fas fa-tags"></i>
252            
253
254            <span>TAGS</span>
255          </a>
256        </li>
257        <!-- .nav-item -->
258      
259        <li class="nav-item">
260          <a href="/archives/" class="nav-link">
261            <i class="fa-fw fas fa-archive"></i>
262            
263
264            <span>ARCHIVES</span>
265          </a>
266        </li>
267        <!-- .nav-item -->
268      
269        <li class="nav-item">
270          <a href="/about/" class="nav-link">
271            <i class="fa-fw fas fa-info-circle"></i>
272            
273
274            <span>
274ABOUT</span>
275          </a>
276        </li>
277        <!-- .nav-item -->
278      
279    </ul>
280  </nav>
281
282  <div class="sidebar-bottom d-flex flex-wrap  align-items-center w-100">
283    
284      <button type="button" class="btn btn-link nav-link" aria-label="Switch Mode" id="mode-toggle">
285        <i class="fas fa-adjust"></i>
286      </button>
287
288      
289        <span class="icon-border"></span>
290      
291    
292
293    
294      
295
296      
297        <a
298          href="https://github.com/"
299          aria-label="github"
300          
301
302          
303            target="_blank"
304            
305          
306
307          
308
309          
310            rel="noopener noreferrer"
311          
312        >
313          <i class="fab fa-github"></i>
314        </a>
315      
316    
317      
318
319      
320        <a
321          href="https://twitter.com/"
322          aria-label="twitter"
323          
324
325          
326            target="_blank"
327            
328          
329
330          
331
332          
333            rel="noopener noreferrer"
334          
335        >
336          <i class="fa-brands fa-x-twitter"></i>
337        </a>
338      
339    
340      
341
342      
343        <a
344          href="javascript:location.href = 'mailto:' + ['imperialoctopus','gmail.com'].join('@')"
345          aria-label="email"
346          
347
348          
349
350          
351
352          
353        >
354          <i class="fas fa-envelope"></i>
355        </a>
356      
357    
358      
359
360      
361        <a
362          href="/feed.xml"
363          aria-label="rss"
364          
365
366          
367
368          
369
370          
371        >
372          <i class="fas fa-rss"></i>
373        </a>
374      
375    
376  </div>
377  <!-- .sidebar-bottom -->
378</aside>
379<!-- #sidebar -->
380
381
382    <div id="main-wrapper" class="d-flex justify-content-center">
383      <div class="container d-flex flex-column px-xxl-5">
384        <!-- The Top Bar -->
385
386<header id="topbar-wrapper" aria-label="Top Bar">
387  <div
388    id="topbar"
389    class="d-flex align-items-center justify-content-between px-lg-3 h-100"
390  >
391    <nav id="breadcrumb" aria-label="Breadcrumb">
392      
393
394      
395        <!-- index page -->
396        <span>Home</span>
397
398      
399    </nav>
400    <!-- endof #breadcrumb -->
401
402    <button type="button" id="sidebar-trigger" class="btn btn-link">
403      <i class="fas fa-bars fa-fw"></i>
404    </button>
405
406    <div id="topbar-title">
407      Zoey Child
408    </div>
409
410    <button type="button" id="search-trigger" class="btn btn-link">
411      <i class="fas fa-search fa-fw"></i>
412    </button>
413
414    <search id="search" class="align-items-center ms-3 ms-lg-0">
415      <i class="fas fa-search fa-fw"></i>
416      <input
417        class="form-control"
418        id="search-input"
419        type="search"
420        aria-label="search"
421        autocomplete="off"
422        placeholder="Search..."
423      >
424    </search>
425    <button type="button" class="btn btn-link text-decoration-none" id="search-cancel">Cancel</button>
426  </div>
427</header>
428
429
430        <div class="row flex-grow-1">
431          <main aria-label="Main Content" class="col-12 col-lg-11 col-xl-9 px-md-4">
432            
433              <!-- Refactor the HTML structure -->
434
435
436
437<!--
438  In order to allow a wide table to scroll horizontally,
439  we suround the markdown table with `<div class="table-wrapper">` and `</div>`
440-->
441
442
443
444<!--
445  Fixed kramdown code highlight rendering:
446  https://github.com/penibelst/jekyll-compress-html/issues/101
447  https://github.com/penibelst/jekyll-compress-html/issues/71#issuecomment-188144901
448-->
449
450
451
452<!-- Change the icon of checkbox -->
453
454
455
456<!-- Handle images -->
457
458
459
460
461  
462  
463
464  
465    
466      
467      
468    
469
470    
471    
472
473    
474
475    
476    
477
478    
479    
480    
481
482    
483      
484
485      
486      
487      
488
489      
490    
491      
492
493      
494      
495      
496
497      
498    
499
500    <!-- take out classes -->
501    
502
503    
504    
505
506    
507
508    
509      
510    
511
512    <!-- lazy-load images -->
513    
514
515    
516      <!-- create the image wrapper -->
517      
518
519      
520      
521
522    
523
524    <!-- combine -->
525    
526  
527    
528
529    
530    
531
532    
533
534    
535    
536
537    
538    
539    
540
541    
542      
543
544      
545      
546      
547
548      
549    
550      
551
552      
553      
554      
555
556      
557    
558
559    <!-- take out classes -->
560    
561
562    
563    
564
565    
566
567    
568      
569    
570
571    <!-- lazy-load images -->
572    
573
574    
575      <!-- create the image wrapper -->
576      
577
578      
579      
580
581    
582
583    <!-- combine -->
584    
585  
586    
587
588    
589    
590
591    
592
593    
594    
595
596    
597    
598    
599
600    
601      
602
603      
604      
605      
606
607      
608    
609      
610
611      
612      
613      
614
615      
616    
617
618    <!-- take out classes -->
619    
620
621    
622    
623
624    
625
626    
627      
628    
629
630    <!-- lazy-load images -->
631    
632
633    
634      <!-- create the image wrapper -->
635      
636
637      
638      
639
640    
641
642    <!-- combine -->
643    
644  
645    
646
647    
648    
649
650    
651
652    
653    
654
655    
656    
657    
658
659    
660      
661
662      
663      
664      
665
666      
667    
668      
669
670      
671      
672      
673
674      
675    
676
677    <!-- take out classes -->
678    
679
680    
681    
682
683    
684
685    
686      
687    
688
689    <!-- lazy-load images -->
690    
691
692    
693      <!-- create the image wrapper -->
694      
695
696      
697      
698
699    
700
701    <!-- combine -->
702    
703  
704    
705
706    
707    
708
709    
710
711    
712    
713
714    
715    
716    
717
718    
719      
720
721      
722      
723      
724
725      
726    
727      
728
729      
730      
731      
732
733      
734    
735
736    <!-- take out classes -->
737    
738
739    
740    
741
742    
743
744    
745      
746    
747
748    <!-- lazy-load images -->
749    
750
751    
752      <!-- create the image wrapper -->
753      
754
755      
756      
757
758    
759
760    <!-- combine -->
761    
762  
763    
764
765    
766    
767
768    
769
770    
771    
772
773    
774    
775    
776
777    
778      
779
780      
781      
782      
783
784      
785    
786      
787
788      
789      
790      
791
792      
793    
794
795    <!-- take out classes -->
796    
797
798    
799    
800
801    
802
803    
804      
805    
806
807    <!-- lazy-load images -->
808    
809
810    
811      <!-- create the image wrapper -->
812      
813
814      
815      
816
817    
818
819    <!-- combine -->
820    
821  
822    
823
824    
825    
826
827    
828
829    
830    
831
832    
833    
834    
835
836    
837      
838
839      
840      
841      
842
843      
844    
845      
846
847      
848      
849      
850
851      
852    
853
854    <!-- take out classes -->
855    
856
857    
858    
859
860    
861
862    
863      
864    
865
866    <!-- lazy-load images -->
867    
868
869    
870      <!-- create the image wrapper -->
871      
872
873      
874      
875
876    
877
878    <!-- combine -->
879    
880  
881    
882
883    
884    
885
886    
887
888    
889    
890
891    
892    
893    
894
895    
896      
897
898      
899      
900      
901
902      
903    
904      
905
906      
907      
908      
909
910      
911    
912
913    <!-- take out classes -->
914    
915
916    
917    
918
919    
920
921    
922      
923    
924
925    <!-- lazy-load images -->
926    
927
928    
929      <!-- create the image wrapper -->
930      
931
932      
933      
934
935    
936
937    <!-- combine -->
938    
939  
940
941  
942
943
944<!-- Add header for code snippets -->
945
946
947
948<!-- Create heading anchors -->
949
950
951
952
953
954  
955  
956
957  
958
959  
960  
961
962  
963
964  
965  
966
967  
968
969  
970  
971
972  
973
974
975
976
977<!-- return -->
978
979
980
981
982
983
984
985
986
987<!-- Get pinned posts on current page -->
988
989
990
991
992
993
994<!-- Get normal posts on current page -->
995
996
997
998
999
1000<div id="post-list" class="flex-grow-1 px-xl-1">
1001  
1002    <article class="card-wrapper card">
1003      <a href="/posts/morning-princess/" class="post-preview row g-0 flex-md-row-reverse">
1004        
1005
1006        
1007          
1008          
1009
1010          
1011
1012          
1013
1014          
1015
1016          <div class="col-md-5">
1017            <div class="preview-img  shimmer"><img src="/assets/img/morning-princess.png" alt="Preview Image"  loading="lazy"></div>
1018          </div>
1019
1020          
1021        
1022
1023        <div class="col-md-7">
1024          <div class="card-body d-flex flex-column">
1025            <h1 class="card-title my-2 mt-md-0">Morning Princess</h1>
1026
1027            <div class="card-text content mt-0 mb-3">
1028              <p>Text UI-based character sheet for D&amp;D 5e.</p>
1029            </div>
1030
1031            <div class="post-meta flex-grow-1 d-flex align-items-end">
1032              <div class="me-auto">
1033                <!-- posted date -->
1034                <i class="far fa-calendar fa-fw me-1"></i>
1035                <!--
1036  Date format snippet
1037  See: ${JS_ROOT}/utils/locale-dateime.js
1038-->
1039
1040
1041
1042
1043<time
1044  
1045  data-ts="1723503600"
1046  data-df="ll"
1047  
1048>
1049  Aug 13, 2024
1050</time>
1051
1052
1053                <!-- categories -->
1054                
1055                  <i class="far fa-folder-open fa-fw me-1"></i>
1056                  <span class="categories">
1057                    
1058                      TTRPG
1059                  </span>
1060                
1061              </div>
1062
1063              
1064                <div class="pin ms-1">
1065                  <i class="fas fa-thumbtack fa-fw"></i>
1066                  <span></span>
1067                </div>
1068              
1069            </div>
1070            <!-- .post-meta -->
1071          </div>
1072          <!-- .card-body -->
1073        </div>
1074      </a>
1075    </article>
1076  
1077    <article class="card-wrapper card">
1078      <a href="/posts/worlds-to-follow/" class="post-preview row g-0 flex-md-row-reverse">
1079        
1080
1081        
1082          
1083          
1084
1085          
1086
1087          
1088
1089          
1090
1091          <div class="col-md-5">
1092            <div class="preview-img  shimmer"><img src="/assets/img/worlds-to-follow.png" alt="Preview Image"  loading="lazy"></div>
1093          </div>
1094
1095          
1096        
1097
1098        <div class="col-md-7">
1099          <div class="card-body d-flex flex-column">
1100            <h1 class="card-title my-2 mt-md-0">Worlds to Follow</h1>
1101
1102            <div class="card-text content mt-0 mb-3">
1103              <p>A classless, magic-focused tabletop role-playing game, designed to be mostly setting-agnostic.</p>
1104            </div>
1105
1106            <div class="post-meta flex-grow-1 d-flex align-items-end">
1107              <div class="me-auto">
1108                <!-- posted date -->
1109                <i class="far fa-calendar fa-fw me-1"></i>
1110                <!--
1111  Date format snippet
1112  See: ${JS_ROOT}/utils/locale-dateime.js
1113-->
1114
1115
1116
1117
1118<time
1119  
1120  data-ts="1707177600"
1121  data-df="ll"
1122  
1123>
1124  Feb  6, 2024
1125</time>
1126
1127
1128                <!-- categories -->
1129                
1130                  <i class="far fa-folder-open fa-fw me-1"></i>
1131                  <span class="categories">
1132                    
1133                      Original Games,
1134                      TTRPG
1135                  </span>
1136                
1137              </div>
1138
1139              
1140                <div class="pin ms-1">
1141                  <i class="fas fa-thumbtack fa-fw"></i>
1142                  <span></span>
1143                </div>
1144              
1145            </div>
1146            <!-- .post-meta -->
1147          </div>
1148          <!-- .card-body -->
1149        </div>
1150      </a>
1151    </article>
1152  
1153    <article class="card-wrapper card">
1154      <a href="/posts/wriggle/" class="post-preview row g-0 flex-md-row-reverse">
1155        
1156
1157        
1158          
1159          
1160
1161          
1162
1163          
1164
1165          
1166
1167          <div class="col-md-5">
1168            <div class="preview-img  shimmer"><img src="/assets/img/wriggle.png" alt="Preview Image"  loading="lazy"></div>
1169          </div>
1170
1171          
1172        
1173
1174        <div class="col-md-7">
1175          <div class="card-body d-flex flex-column">
1176            <h1 class="card-title my-2 mt-md-0">Wriggle</h1>
1177
1178            <div class="card-text content mt-0 mb-3">
1179              <p>Terminal text UI framework written in Dart.</p>
1180            </div>
1181
1182            <div class="post-meta flex-grow-1 d-flex align-items-end">
1183              <div class="me-auto">
1184                <!-- posted date -->
1185                <i class="far fa-calendar fa-fw me-1"></i>
1186                <!--
1187  Date format snippet
1188  See: ${JS_ROOT}/utils/locale-dateime.js
1189-->
1190
1191
1192
1193
1194<time
1195  
1196  data-ts="1714604400"
1197  data-df="ll"
1198  
1199>
1200  May  2, 2024
1201</time>
1202
1203
1204                <!-- categories -->
1205                
1206              </div>
1207
1208              
1209            </div>
1210            <!-- .post-meta -->
1211          </div>
1212          <!-- .card-body -->
1213        </div>
1214      </a>
1215    </article>
1216  
1217    <article class="card-wrapper card">
1218      <a href="/posts/miyuki-vector/" class="post-preview row g-0 flex-md-row-reverse">
1219        
1220
1221        
1222
1223        <div class="col-md-12">
1224          <div class="card-body d-flex flex-column">
1225            <h1 class="card-title my-2 mt-md-0">Miyuki Vector</h1>
1226
1227            <div class="card-text content mt-0 mb-3">
1228              <p>First-person movement shooter based around creating your own abilities with a node-based programming interface.</p>
1229            </div>
1230
1231            <div class="post-meta flex-grow-1 d-flex align-items-end">
1232              <div class="me-auto">
1233                <!-- posted date -->
1234                <i class="far fa-calendar fa-fw me-1"></i>
1235                <!--
1236  Date format snippet
1237  See: ${JS_ROOT}/utils/locale-dateime.js
1238-->
1239
1240
1241
1242
1243<time
1244  
1245  data-ts="1679529600"
1246  data-df="ll"
1247  
1248>
1249  Mar 23, 2023
1250</time>
1251
1252
1253                <!-- categories -->
1254                
1255                  <i class="far fa-folder-open fa-fw me-1"></i>
1256                  <span class="categories">
1257                    
1258                      Original Games
1259                  </span>
1260                
1261              </div>
1262
1263              
1264            </div>
1265            <!-- .post-meta -->
1266          </div>
1267          <!-- .card-body -->
1268        </div>
1269      </a>
1270    </article>
1271  
1272    <article class="card-wrapper card">
1273      <a href="/posts/counter-panel/" class="post-preview row g-0 flex-md-row-reverse">
1274        
1275
1276        
1277          
1278          
1279
1280          
1281
1282          
1283
1284          
1285
1286          <div class="col-md-5">
1287            <div class="preview-img  shimmer"><img src="/assets/img/counter-panel.png" alt="Preview Image"  loading="lazy"></div>
1288          </div>
1289
1290          
1291        
1292
1293        <div class="col-md-7">
1294          <div class="card-body d-flex flex-column">
1295            <h1 class="card-title my-2 mt-md-0">People Counter</h1>
1296
1297            <div class="card-text content mt-0 mb-3">
1298              <p>Server software and admin frontend for the Tring Together People Counter app.</p>
1299            </div>
1300
1301            <div class="post-meta flex-grow-1 d-flex align-items-end">
1302              <div class="me-auto">
1303                <!-- posted date -->
1304                <i class="far fa-calendar fa-fw me-1"></i>
1305                <!--
1306  Date format snippet
1307  See: ${JS_ROOT}/utils/locale-dateime.js
1308-->
1309
1310
1311
1312
1313<time
1314  
1315  data-ts="1670976000"
1316  data-df="ll"
1317  
1318>
1319  Dec 14, 2022
1320</time>
1321
1322
1323                <!-- categories -->
1324                
1325              </div>
1326
1327              
1328            </div>
1329            <!-- .post-meta -->
1330          </div>
1331          <!-- .card-body -->
1332        </div>
1333      </a>
1334    </article>
1335  
1336    <article class="card-wrapper card">
1337      <a href="/posts/chess-offline/" class="post-preview row g-0 flex-md-row-reverse">
1338        
1339
1340        
1341          
1342          
1343
1344          
1345
1346          
1347
1348          
1349
1350          <div class="col-md-5">
1351            <div class="preview-img  shimmer"><img src="/assets/img/chess-offline.png" alt="Preview Image"  loading="lazy"></div>
1352          </div>
1353
1354          
1355        
1356
1357        <div class="col-md-7">
1358          <div class="card-body d-flex flex-column">
1359            <h1 class="card-title my-2 mt-md-0">Chess Offline</h1>
1360
1361            <div class="card-text content mt-0 mb-3">
1362              <p>Cross-platform chess app for two people to play chess locally.</p>
1363            </div>
1364
1365            <div class="post-meta flex-grow-1 d-flex align-items-end">
1366              <div class="me-auto">
1367                <!-- posted date -->
1368                <i class="far fa-calendar fa-fw me-1"></i>
1369                <!--
1370  Date format snippet
1371  See: ${JS_ROOT}/utils/locale-dateime.js
1372-->
1373
1374
1375
1376
1377<time
1378  
1379  data-ts="1661036400"
1380  data-df="ll"
1381  
1382>
1383  Aug 21, 2022
1384</time>
1385
1386
1387                <!-- categories -->
1388                
1389                  <i class="far fa-folder-open fa-fw me-1"></i>
1390                  <span class="categories">
1391                    
1392                      Board Games
1393                  </span>
1394                
1395              </div>
1396
1397              
1398            </div>
1399            <!-- .post-meta -->
1400          </div>
1401          <!-- .card-body -->
1402        </div>
1403      </a>
1404    </article>
1405  
1406    <article class="card-wrapper card">
1407      <a href="/posts/dog-breed-game/" class="post-preview row g-0 flex-md-row-reverse">
1408        
1409
1410        
1411          
1412          
1413
1414          
1415
1416          
1417
1418          
1419
1420          <div class="col-md-5">
1421            <div class="preview-img  shimmer"><img src="/assets/img/dog-breed-game.png" alt="Preview Image"  loading="lazy"></div>
1422          </div>
1423
1424          
1425        
1426
1427        <div class="col-md-7">
1428          <div class="card-body d-flex flex-column">
1429            <h1 class="card-title my-2 mt-md-0">Dog Breed Game</h1>
1430
1431            <div class="card-text content mt-0 mb-3">
1432              <p>Cross-platform game to teach vet students to identify breeds of dog.</p>
1433            </div>
1434
1435            <div class="post-meta flex-grow-1 d-flex align-items-end">
1436              <div class="me-auto">
1437                <!-- posted date -->
1438                <i class="far fa-calendar fa-fw me-1"></i>
1439                <!--
1440  Date format snippet
1441  See: ${JS_ROOT}/utils/locale-dateime.js
1442-->
1443
1444
1445
1446
1447<time
1448  
1449  data-ts="1654556400"
1450  data-df="ll"
1451  
1452>
1453  Jun  7, 2022
1454</time>
1455
1456
1457                <!-- categories -->
1458                
1459                  <i class="far fa-folder-open fa-fw me-1"></i>
1460                  <span class="categories">
1461                    
1462                      Veterinary
1463                  </span>
1464                
1465              </div>
1466
1467              
1468            </div>
1469            <!-- .post-meta -->
1470          </div>
1471          <!-- .card-body -->
1472        </div>
1473      </a>
1474    </article>
1475  
1476    <article class="card-wrapper card">
1477      <a href="/posts/mine-pi/" class="post-preview row g-0 flex-md-row-reverse">
1478        
1479
1480        
1481
1482        <div class="col-md-12">
1483          <div class="card-body d-flex flex-column">
1484            <h1 class="card-title my-2 mt-md-0">MinePi</h1>
1485
1486            <div class="card-text content mt-0 mb-3">
1487              <p>MinePi is a Minecraft mod that lets you send signals to your Raspberry Pi using redstone.</p>
1488            </div>
1489
1490            <div class="post-meta flex-grow-1 d-flex align-items-end">
1491              <div class="me-auto">
1492                <!-- posted date -->
1493                <i class="far fa-calendar fa-fw me-1"></i>
1494                <!--
1495  Date format snippet
1496  See: ${JS_ROOT}/utils/locale-dateime.js
1497-->
1498
1499
1500
1501
1502<time
1503  
1504  data-ts="1615075200"
1505  data-df="ll"
1506  
1507>
1508  Mar  7, 2021
1509</time>
1510
1511
1512                <!-- categories -->
1513                
1514              </div>
1515
1516              
1517            </div>
1518            <!-- .post-meta -->
1519          </div>
1520          <!-- .card-body -->
1521        </div>
1522      </a>
1523    </article>
1524  
1525    <article class="card-wrapper card">
1526      <a href="/posts/people-counter/" class="post-preview row g-0 flex-md-row-reverse">
1527        
1528
1529        
1530          
1531          
1532
1533          
1534
1535          
1536
1537          
1538
1539          <div class="col-md-5">
1540            <div class="preview-img  shimmer"><img src="/assets/img/people-counter.png" alt="Preview Image"  loading="lazy"></div>
1541          </div>
1542
1543          
1544        
1545
1546        <div class="col-md-7">
1547          <div class="card-body d-flex flex-column">
1548            <h1 class="card-title my-2 mt-md-0">People Counter</h1>
1549
1550            <div class="card-text content mt-0 mb-3">
1551              <p>Web app to count people entering a location from multiple entrances.</p>
1552            </div>
1553
1554            <div class="post-meta flex-grow-1 d-flex align-items-end">
1555              <div class="me-auto">
1556                <!-- posted date -->
1557                <i class="far fa-calendar fa-fw me-1"></i>
1558                <!--
1559  Date format snippet
1560  See: ${JS_ROOT}/utils/locale-dateime.js
1561-->
1562
1563
1564
1565
1566<time
1567  
1568  data-ts="1608336000"
1569  data-df="ll"
1570  
1571>
1572  Dec 19, 2020
1573</time>
1574
1575
1576                <!-- categories -->
1577                
1578              </div>
1579
1580              
1581            </div>
1582            <!-- .post-meta -->
1583          </div>
1584          <!-- .card-body -->
1585        </div>
1586      </a>
1587    </article>
1588  
1589    <article class="card-wrapper card">
1590      <a href="/posts/codenames-offline/" class="post-preview row g-0 flex-md-row-reverse">
1591        
1592
1593        
1594          
1595          
1596
1597          
1598
1599          
1600
1601          
1602
1603          <div class="col-md-5">
1604            <div class="preview-img  shimmer"><img src="/assets/img/codenames-offline.png" alt="Preview Image"  loading="lazy"></div>
1605          </div>
1606
1607          
1608        
1609
1610        <div class="col-md-7">
1611          <div class="card-body d-flex flex-column">
1612            <h1 class="card-title my-2 mt-md-0">Codenames Offline</h1>
1613
1614            <div class="card-text content mt-0 mb-3">
1615              <p>Digital version of the board game Codenames designed to be played in person with a tablet.</p>
1616            </div>
1617
1618            <div class="post-meta flex-grow-1 d-flex align-items-end">
1619              <div class="me-auto">
1620                <!-- posted date -->
1621                <i class="far fa-calendar fa-fw me-1"></i>
1622                <!--
1623  Date format snippet
1624  See: ${JS_ROOT}/utils/locale-dateime.js
1625-->
1626
1627
1628
1629
1630<time
1631  
1632  data-ts="1602025200"
1633  data-df="ll"
1634  
1635>
1636  Oct  7, 2020
1637</time>
1638
1639
1640                <!-- categories -->
1641                
1642                  <i class="far fa-folder-open fa-fw me-1"></i>
1643                  <span class="categories">
1644                    
1645                      Board Games
1646                  </span>
1647                
1648              </div>
1649
1650              
1651            </div>
1652            <!-- .post-meta -->
1653          </div>
1654          <!-- .card-body -->
1655        </div>
1656      </a>
1657    </article>
1658  
1659</div>
1660<!-- #post-list -->
1661
1662
1663  <!-- The paginator for post list on HomgPage. -->
1664
1665<nav aria-label="Page Navigation">
1666  <ul class="pagination align-items-center mt-4 mb-0">
1667    <!-- left arrow -->
1668    
1669
1670    <li class="page-item disabled">
1671      <a class="page-link" href="#" aria-label="previous-page">
1672        <i class="fas fa-angle-left"></i>
1673      </a>
1674    </li>
1675
1676    <!-- page numbers -->
1677    
1678    
1679
1680    
1681      
1682      
1683      
1684      
1685      
1686
1687      
1688
1689      
1690        <!-- show number -->
1691        <li class="page-item  active">
1692          <a
1693            class="page-link"
1694            href="/"
1695          >1</a>
1696        </li>
1697      
1698    
1699      
1700      
1701      
1702      
1703      
1704
1705      
1706
1707      
1708        <!-- show number -->
1709        <li class="page-item ">
1710          <a
1711            class="page-link"
1712            href="/page2"
1713          >2</a>
1714        </li>
1715      
1716    
1717
1718    <!-- mobile pagination -->
1719    <li class="page-index align-middle">
1720      <span>1</span>
1721      <span class="text-muted">/ 2</span>
1722    </li>
1723
1724    <!-- right arrow -->
1725    
1726
1727    <li class="page-item ">
1728      <a class="page-link" href="/page2" aria-label="next-page">
1729        <i class="fas fa-angle-right"></i>
1730      </a>
1731    </li>
1732  </ul>
1733</nav>
1734<!-- .pagination -->
1735
1736
1737
1738
1739            
1740          </main>
1741
1742          <!-- panel -->
1743          <aside aria-label="Panel" id="panel-wrapper" class="col-xl-3 ps-2 text-muted">
1744            <div class="access">
1745              <!-- Get 5 last posted/updated posts -->
1746
1747
1748
1749
1750
1751
1752
1753
1754
1755
1756
1757
1758
1759
1760  <section id="access-lastmod">
1761    <h2 class="panel-heading">Recently Updated</h2>
1762    <ul class="content list-unstyled ps-0 pb-1 ms-1 mt-2">
1763      
1764        
1765        
1766        
1767        <li class="text-truncate lh-lg">
1768          <a href="/posts/counter-panel/">People Counter</a>
1769        </li>
1770      
1771        
1772        
1773        
1774        <li class="text-truncate lh-lg">
1775          <a href="/posts/hexal/">Hexal</a>
1776        </li>
1777      
1778        
1779        
1780        
1781        <li class="text-truncate lh-lg">
1782          <a href="/posts/wriggle/">Wriggle</a>
1783        </li>
1784      
1785        
1786        
1787        
1788        <li class="text-truncate lh-lg">
1789          <a href="/posts/morning-princess/">Morning Princess</a>
1790        </li>
1791      
1792        
1793        
1794        
1795        <li class="text-truncate lh-lg">
1796          <a href="/posts/gcbgc-website/">GCBGC Website</a>
1797        </li>
1798      
1799    </ul>
1800  </section>
1801  <!-- #access-lastmod -->
1802
1803
1804              <!-- The trending tags list -->
1805
1806
1807
1808
1809
1810
1811
1812
1813
1814
1815
1816
1817
1818
1819
1820
1821
1822
1823            </div>
1824
1825            
1826          </aside>
1827        </div>
1828
1829        <div class="row">
1830          <!-- tail -->
1831          <div id="tail-wrapper" class="col-12 col-lg-11 col-xl-9 px-md-4">
1832            
1833
1834            <!-- The Footer -->
1835
1836<footer
1837  aria-label="Site Info"
1838  class="
1839    d-flex flex-column justify-content-center text-muted
1840    flex-lg-row justify-content-lg-between align-items-lg-center pb-lg-3
1841  "
1842>
1843  <p>©
1844    <time>2025</time>
1845
1846    
1847      <a href="https://cupoftea.social/@imperialoctopus">Zoey Child</a>.
1848    
1849
1850    
1851      <span
1852        data-bs-toggle="tooltip"
1853        data-bs-placement="top"
1854        title="Except where otherwise noted, the blog posts on this site are licensed under the Creative Commons Attribution 4.0 International (CC BY 4.0) License by the author."
1855      >Some rights reserved.</span>
1856    
1857  </p>
1858
1859  <p>Using the <a
1860        data-bs-toggle="tooltip"
1861        data-bs-placement="top"
1862        title="v7.3.1"
1863        href="https://github.com/cotes2020/jekyll-theme-chirpy"
1864        target="_blank"
1865        rel="noopener"
1866      >Chirpy</a> theme for <a href="https://jekyllrb.com" target="_blank" rel="noopener">Jekyll</a>.
1867  </p>
1868</footer>
1869
1870          </div>
1871        </div>
1872
1873        <!-- The Search results -->
1874
1875<div id="search-result-wrapper" class="d-flex justify-content-center d-none">
1876  <div class="col-11 content">
1877    <div id="search-hints">
1878      <!-- The trending tags list -->
1879
1880
1881
1882
1883
1884
1885
1886
1887
1888
1889
1890
1891
1892
1893
1894
1895
1896
1897    </div>
1898    <div id="search-results" class="d-flex flex-wrap justify-content-center text-muted mt-3"></div>
1899  </div>
1900</div>
1901
1902      </div>
1903
1904      <aside aria-label="Scroll to Top">
1905        <button id="back-to-top" type="button" class="btn btn-lg btn-box-shadow">
1906          <i class="fas fa-angle-up"></i>
1907        </button>
1908      </aside>
1909    </div>
1910
1911    <div id="mask" class="d-none position-fixed w-100 h-100 z-1"></div>
1912
1913    
1914      <aside
1915  id="notification"
1916  class="toast"
1917  role="alert"
1918  aria-live="assertive"
1919  aria-atomic="true"
1920  data-bs-animation="true"
1921  data-bs-autohide="false"
1922>
1923  <div class="toast-header">
1924    <button
1925      type="button"
1926      class="btn-close ms-auto"
1927      data-bs-dismiss="toast"
1928      aria-label="Close"
1929    ></button>
1930  </div>
1931  <div class="toast-body text-center pt-0">
1932    <p class="px-2 mb-3">A new version of content is available.</p>
1933    <button type="button" class="btn btn-primary" aria-label="Update">
1934      Update
1935    </button>
1936  </div>
1937</aside>
1938
1939    
1940
1941    <!-- Embedded scripts -->
1942
1943    
1944
1945    <!--
1946  Jekyll Simple Search loader
1947  See: <https://github.com/christian-fei/Simple-Jekyll-Search>
1948-->
1949
1950
1951
1952
1953
1954<script>
1955  
1956  document.addEventListener('DOMContentLoaded', () => {
1957    SimpleJekyllSearch({
1958      searchInput: document.getElementById('search-input'),
1959      resultsContainer: document.getElementById('search-results'),
1960      json: '/assets/js/data/search.json',
1961      searchResultTemplate: '  <article class="px-1 px-sm-2 px-lg-4 px-xl-0">    <header>      <h2><a href="{url}">{title}</a></h2>      <div class="post-meta d-flex flex-column flex-sm-row text-muted mt-1 mb-1">        {categories}        {tags}      </div>    </header>    <p>{snippet}</p>  </article>',
1962      noResultsText: '<p class="mt-5">Oops! No results found.</p>',
1963      templateMiddleware: function(prop, value, template) {
1964        if (prop === 'categories') {
1965          if (value === '') {
1966            return `${value}`;
1967          } else {
1968            return `<div class="me-sm-4"><i class="far fa-folder fa-fw"></i>${value}</div>`;
1969          }
1970        }
1971
1972        if (prop === 'tags') {
1973          if (value === '') {
1974            return `${value}`;
1975          } else {
1976            return `<div><i class="fa fa-tag fa-fw"></i>${value}</div>`;
1977          }
1978        }
1979      }
1980    });
1981  });
1982</script>
1982
1983
1984  </body>
1985</html>
1986

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.