diff --git a/.gitignore b/.gitignore
index e1ad394..7258ec0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -16,3 +16,9 @@ local/backups
 /tmp
 *.exe
 .DS_Store
+
+# vim session saves
+Session.vim
+
+# tags files
+tags
diff --git a/public/style.css b/public/style.css
index 969a28b..6f628c4 100644
--- a/public/style.css
+++ b/public/style.css
@@ -540,7 +540,7 @@ input[type="url"],
   height: 100%;
   z-index: 100; }
 
-@media screen and (min-width: 30em) {
+@media screen and (min-width: 35em) {
   .aspect-ratio-ns {
     height: 0;
     position: relative; }
@@ -576,7 +576,7 @@ input[type="url"],
     height: 100%;
     z-index: 100; } }
 
-@media screen and (min-width: 30em) and (max-width: 60em) {
+@media screen and (min-width: 35em) and (max-width: 60em) {
   .aspect-ratio-m {
     height: 0;
     position: relative; }
@@ -679,13 +679,13 @@ img, video {
 .contain {
   background-size: contain !important; }
 
-@media screen and (min-width: 30em) {
+@media screen and (min-width: 35em) {
   .cover-ns {
     background-size: cover !important; }
   .contain-ns {
     background-size: contain !important; } }
 
-@media screen and (min-width: 30em) and (max-width: 60em) {
+@media screen and (min-width: 35em) and (max-width: 60em) {
   .cover-m {
     background-size: cover !important; }
   .contain-m {
@@ -737,7 +737,7 @@ img, video {
   background-repeat: no-repeat;
   background-position: center left; }
 
-@media screen and (min-width: 30em) {
+@media screen and (min-width: 35em) {
   .bg-center-ns {
     background-repeat: no-repeat;
     background-position: center center; }
@@ -754,7 +754,7 @@ img, video {
     background-repeat: no-repeat;
     background-position: center left; } }
 
-@media screen and (min-width: 30em) and (max-width: 60em) {
+@media screen and (min-width: 35em) and (max-width: 60em) {
   .bg-center-m {
     background-repeat: no-repeat;
     background-position: center center; }
@@ -807,7 +807,7 @@ img, video {
 .outline-0 {
   outline: 0; }
 
-@media screen and (min-width: 30em) {
+@media screen and (min-width: 35em) {
   .outline-ns {
     outline: 1px solid; }
   .outline-transparent-ns {
@@ -815,7 +815,7 @@ img, video {
   .outline-0-ns {
     outline: 0; } }
 
-@media screen and (min-width: 30em) and (max-width: 60em) {
+@media screen and (min-width: 35em) and (max-width: 60em) {
   .outline-m {
     outline: 1px solid; }
   .outline-transparent-m {
@@ -877,7 +877,7 @@ img, video {
   border-style: none;
   border-width: 0; }
 
-@media screen and (min-width: 30em) {
+@media screen and (min-width: 35em) {
   .ba-ns {
     border-style: solid;
     border-width: 1px; }
@@ -897,7 +897,7 @@ img, video {
     border-style: none;
     border-width: 0; } }
 
-@media screen and (min-width: 30em) and (max-width: 60em) {
+@media screen and (min-width: 35em) and (max-width: 60em) {
   .ba-m {
     border-style: solid;
     border-width: 1px; }
@@ -1204,7 +1204,7 @@ img, video {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0; }
 
-@media screen and (min-width: 30em) {
+@media screen and (min-width: 35em) {
   .br0-ns {
     border-radius: 0; }
   .br1-ns {
@@ -1232,7 +1232,7 @@ img, video {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0; } }
 
-@media screen and (min-width: 30em) and (max-width: 60em) {
+@media screen and (min-width: 35em) and (max-width: 60em) {
   .br0-m {
     border-radius: 0; }
   .br1-m {
@@ -1322,7 +1322,7 @@ img, video {
 .b--none {
   border-style: none; }
 
-@media screen and (min-width: 30em) {
+@media screen and (min-width: 35em) {
   .b--dotted-ns {
     border-style: dotted; }
   .b--dashed-ns {
@@ -1332,7 +1332,7 @@ img, video {
   .b--none-ns {
     border-style: none; } }
 
-@media screen and (min-width: 30em) and (max-width: 60em) {
+@media screen and (min-width: 35em) and (max-width: 60em) {
   .b--dotted-m {
     border-style: dotted; }
   .b--dashed-m {
@@ -1405,7 +1405,7 @@ img, video {
 .bl-0 {
   border-left-width: 0; }
 
-@media screen and (min-width: 30em) {
+@media screen and (min-width: 35em) {
   .bw0-ns {
     border-width: 0; }
   .bw1-ns {
@@ -1427,7 +1427,7 @@ img, video {
   .bl-0-ns {
     border-left-width: 0; } }
 
-@media screen and (min-width: 30em) and (max-width: 60em) {
+@media screen and (min-width: 35em) and (max-width: 60em) {
   .bw0-m {
     border-width: 0; }
   .bw1-m {
@@ -1497,7 +1497,7 @@ img, video {
 .shadow-5 {
   box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2); }
 
-@media screen and (min-width: 30em) {
+@media screen and (min-width: 35em) {
   .shadow-1-ns {
     box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2); }
   .shadow-2-ns {
@@ -1509,7 +1509,7 @@ img, video {
   .shadow-5-ns {
     box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2); } }
 
-@media screen and (min-width: 30em) and (max-width: 60em) {
+@media screen and (min-width: 35em) and (max-width: 60em) {
   .shadow-1-m {
     box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2); }
   .shadow-2-m {
@@ -1635,7 +1635,7 @@ img, video {
   bottom: 0;
   left: 0; }
 
-@media screen and (min-width: 30em) {
+@media screen and (min-width: 35em) {
   .top-0-ns {
     top: 0; }
   .left-0-ns {
@@ -1682,7 +1682,7 @@ img, video {
     bottom: 0;
     left: 0; } }
 
-@media screen and (min-width: 30em) and (max-width: 60em) {
+@media screen and (min-width: 35em) and (max-width: 60em) {
   .top-0-m {
     top: 0; }
   .left-0-m {
@@ -1807,7 +1807,7 @@ img, video {
 .cn {
   clear: none; }
 
-@media screen and (min-width: 30em) {
+@media screen and (min-width: 35em) {
   .cl-ns {
     clear: left; }
   .cr-ns {
@@ -1817,7 +1817,7 @@ img, video {
   .cn-ns {
     clear: none; } }
 
-@media screen and (min-width: 30em) and (max-width: 60em) {
+@media screen and (min-width: 35em) and (max-width: 60em) {
   .cl-m {
     clear: left; }
   .cr-m {
@@ -1903,7 +1903,7 @@ img, video {
   table-layout: fixed;
   width: 100%; }
 
-@media screen and (min-width: 30em) {
+@media screen and (min-width: 35em) {
   .dn-ns {
     display: none; }
   .di-ns {
@@ -1930,7 +1930,7 @@ img, video {
     table-layout: fixed;
     width: 100%; } }
 
-@media screen and (min-width: 30em) and (max-width: 60em) {
+@media screen and (min-width: 35em) and (max-width: 60em) {
   .dn-m {
     display: none; }
   .di-m {
@@ -2138,7 +2138,7 @@ img, video {
 .flex-shrink-1 {
   flex-shrink: 1; }
 
-@media screen and (min-width: 30em) {
+@media screen and (min-width: 35em) {
   .flex-ns {
     display: flex; }
   .inline-flex-ns {
@@ -2236,7 +2236,7 @@ img, video {
   .flex-shrink-1-ns {
     flex-shrink: 1; } }
 
-@media screen and (min-width: 30em) and (max-width: 60em) {
+@media screen and (min-width: 35em) and (max-width: 60em) {
   .flex-m {
     display: flex; }
   .inline-flex-m {
@@ -2468,7 +2468,7 @@ img, video {
 .fn {
   float: none; }
 
-@media screen and (min-width: 30em) {
+@media screen and (min-width: 35em) {
   .fl-ns {
     float: left;
     _display: inline; }
@@ -2478,7 +2478,7 @@ img, video {
   .fn-ns {
     float: none; } }
 
-@media screen and (min-width: 30em) and (max-width: 60em) {
+@media screen and (min-width: 35em) and (max-width: 60em) {
   .fl-m {
     float: left;
     _display: inline; }
@@ -2570,13 +2570,13 @@ code, .code {
 .fs-normal {
   font-style: normal; }
 
-@media screen and (min-width: 30em) {
+@media screen and (min-width: 35em) {
   .i-ns {
     font-style: italic; }
   .fs-normal-ns {
     font-style: normal; } }
 
-@media screen and (min-width: 30em) and (max-width: 60em) {
+@media screen and (min-width: 35em) and (max-width: 60em) {
   .i-m {
     font-style: italic; }
   .fs-normal-m {
@@ -2646,7 +2646,7 @@ code, .code {
 .fw9 {
   font-weight: 900; }
 
-@media screen and (min-width: 30em) {
+@media screen and (min-width: 35em) {
   .normal-ns {
     font-weight: normal; }
   .b-ns {
@@ -2670,7 +2670,7 @@ code, .code {
   .fw9-ns {
     font-weight: 900; } }
 
-@media screen and (min-width: 30em) and (max-width: 60em) {
+@media screen and (min-width: 35em) and (max-width: 60em) {
   .normal-m {
     font-weight: normal; }
   .b-m {
@@ -2819,7 +2819,7 @@ code, .code {
 .h-inherit {
   height: inherit; }
 
-@media screen and (min-width: 30em) {
+@media screen and (min-width: 35em) {
   .h1-ns {
     height: 1rem; }
   .h2-ns {
@@ -2855,7 +2855,7 @@ code, .code {
   .h-inherit-ns {
     height: inherit; } }
 
-@media screen and (min-width: 30em) and (max-width: 60em) {
+@media screen and (min-width: 35em) and (max-width: 60em) {
   .h1-m {
     height: 1rem; }
   .h2-m {
@@ -2947,7 +2947,7 @@ code, .code {
 .tracked-mega {
   letter-spacing: 0.25em; }
 
-@media screen and (min-width: 30em) {
+@media screen and (min-width: 35em) {
   .tracked-ns {
     letter-spacing: 0.1em; }
   .tracked-tight-ns {
@@ -2955,7 +2955,7 @@ code, .code {
   .tracked-mega-ns {
     letter-spacing: 0.25em; } }
 
-@media screen and (min-width: 30em) and (max-width: 60em) {
+@media screen and (min-width: 35em) and (max-width: 60em) {
   .tracked-m {
     letter-spacing: 0.1em; }
   .tracked-tight-m {
@@ -2991,7 +2991,7 @@ code, .code {
 .lh-copy {
   line-height: 1.5; }
 
-@media screen and (min-width: 30em) {
+@media screen and (min-width: 35em) {
   .lh-solid-ns {
     line-height: 1; }
   .lh-title-ns {
@@ -2999,7 +2999,7 @@ code, .code {
   .lh-copy-ns {
     line-height: 1.5; } }
 
-@media screen and (min-width: 30em) and (max-width: 60em) {
+@media screen and (min-width: 35em) and (max-width: 60em) {
   .lh-solid-m {
     line-height: 1; }
   .lh-title-m {
@@ -3114,7 +3114,7 @@ code, .code {
 .mw-none {
   max-width: none; }
 
-@media screen and (min-width: 30em) {
+@media screen and (min-width: 35em) {
   .mw-100-ns {
     max-width: 100%; }
   .mw1-ns {
@@ -3138,7 +3138,7 @@ code, .code {
   .mw-none-ns {
     max-width: none; } }
 
-@media screen and (min-width: 30em) and (max-width: 60em) {
+@media screen and (min-width: 35em) and (max-width: 60em) {
   .mw-100-m {
     max-width: 100%; }
   .mw1-m {
@@ -3303,7 +3303,7 @@ code, .code {
 .w-auto {
   width: auto; }
 
-@media screen and (min-width: 30em) {
+@media screen and (min-width: 35em) {
   .w1-ns {
     width: 1rem; }
   .w2-ns {
@@ -3355,7 +3355,7 @@ code, .code {
   .w-auto-ns {
     width: auto; } }
 
-@media screen and (min-width: 30em) and (max-width: 60em) {
+@media screen and (min-width: 35em) and (max-width: 60em) {
   .w1-m {
     width: 1rem; }
   .w2-m {
@@ -3505,7 +3505,7 @@ code, .code {
 .overflow-y-auto {
   overflow-y: auto; }
 
-@media screen and (min-width: 30em) {
+@media screen and (min-width: 35em) {
   .overflow-visible-ns {
     overflow: visible; }
   .overflow-hidden-ns {
@@ -3531,7 +3531,7 @@ code, .code {
   .overflow-y-auto-ns {
     overflow-y: auto; } }
 
-@media screen and (min-width: 30em) and (max-width: 60em) {
+@media screen and (min-width: 35em) and (max-width: 60em) {
   .overflow-visible-m {
     overflow: visible; }
   .overflow-hidden-m {
@@ -3606,7 +3606,7 @@ code, .code {
 .fixed {
   position: fixed; }
 
-@media screen and (min-width: 30em) {
+@media screen and (min-width: 35em) {
   .static-ns {
     position: static; }
   .relative-ns {
@@ -3616,7 +3616,7 @@ code, .code {
   .fixed-ns {
     position: fixed; } }
 
-@media screen and (min-width: 30em) and (max-width: 60em) {
+@media screen and (min-width: 35em) and (max-width: 60em) {
   .static-m {
     position: static; }
   .relative-m {
@@ -3707,7 +3707,7 @@ code, .code {
 .rotate-315 {
   transform: rotate(315deg); }
 
-@media screen and (min-width: 30em) {
+@media screen and (min-width: 35em) {
   .rotate-45-ns {
     transform: rotate(45deg); }
   .rotate-90-ns {
@@ -3723,7 +3723,7 @@ code, .code {
   .rotate-315-ns {
     transform: rotate(315deg); } }
 
-@media screen and (min-width: 30em) and (max-width: 60em) {
+@media screen and (min-width: 35em) and (max-width: 60em) {
   .rotate-45-m {
     transform: rotate(45deg); }
   .rotate-90-m {
@@ -4985,7 +4985,7 @@ input[type=submit]:not(.button-small), .notice {
   margin-left: 16rem;
   margin-right: 16rem; }
 
-@media screen and (min-width: 30em) {
+@media screen and (min-width: 35em) {
   .pa0-ns {
     padding: 0; }
   .pa1-ns {
@@ -5247,7 +5247,7 @@ input[type=submit]:not(.button-small), .notice {
     margin-left: 16rem;
     margin-right: 16rem; } }
 
-@media screen and (min-width: 30em) and (max-width: 60em) {
+@media screen and (min-width: 35em) and (max-width: 60em) {
   .pa0-m {
     padding: 0; }
   .pa1-m {
@@ -5895,7 +5895,7 @@ input[type=submit]:not(.button-small), .notice {
 .nt7 {
   margin-top: -16rem; }
 
-@media screen and (min-width: 30em) {
+@media screen and (min-width: 35em) {
   .na1-ns {
     margin: -0.25rem; }
   .na2-ns {
@@ -5967,7 +5967,7 @@ input[type=submit]:not(.button-small), .notice {
   .nt7-ns {
     margin-top: -16rem; } }
 
-@media screen and (min-width: 30em) and (max-width: 60em) {
+@media screen and (min-width: 35em) and (max-width: 60em) {
   .na1-m {
     margin: -0.25rem; }
   .na2-m {
@@ -6160,7 +6160,7 @@ input[type=submit]:not(.button-small), .notice {
 .no-underline {
   text-decoration: none; }
 
-@media screen and (min-width: 30em) {
+@media screen and (min-width: 35em) {
   .strike-ns {
     text-decoration: line-through; }
   .underline-ns {
@@ -6168,7 +6168,7 @@ input[type=submit]:not(.button-small), .notice {
   .no-underline-ns {
     text-decoration: none; } }
 
-@media screen and (min-width: 30em) and (max-width: 60em) {
+@media screen and (min-width: 35em) and (max-width: 60em) {
   .strike-m {
     text-decoration: line-through; }
   .underline-m {
@@ -6216,7 +6216,7 @@ input[type=submit]:not(.button-small), .notice {
 .tj {
   text-align: justify; }
 
-@media screen and (min-width: 30em) {
+@media screen and (min-width: 35em) {
   .tl-ns {
     text-align: left; }
   .tr-ns, .edit-form .edit-form-row > :first-child {
@@ -6226,7 +6226,7 @@ input[type=submit]:not(.button-small), .notice {
   .tj-ns {
     text-align: justify; } }
 
-@media screen and (min-width: 30em) and (max-width: 60em) {
+@media screen and (min-width: 35em) and (max-width: 60em) {
   .tl-m {
     text-align: left; }
   .tr-m {
@@ -6278,7 +6278,7 @@ input[type=submit]:not(.button-small), .notice {
 .ttn {
   text-transform: none; }
 
-@media screen and (min-width: 30em) {
+@media screen and (min-width: 35em) {
   .ttc-ns {
     text-transform: capitalize; }
   .ttl-ns {
@@ -6288,7 +6288,7 @@ input[type=submit]:not(.button-small), .notice {
   .ttn-ns {
     text-transform: none; } }
 
-@media screen and (min-width: 30em) and (max-width: 60em) {
+@media screen and (min-width: 35em) and (max-width: 60em) {
   .ttc-m {
     text-transform: capitalize; }
   .ttl-m {
@@ -6365,7 +6365,7 @@ input[type=submit]:not(.button-small), .notice {
 .f7 {
   font-size: 0.75rem; }
 
-@media screen and (min-width: 30em) {
+@media screen and (min-width: 35em) {
   .f-6-ns,
   .f-headline-ns {
     font-size: 6rem; }
@@ -6387,7 +6387,7 @@ input[type=submit]:not(.button-small), .notice {
   .f7-ns {
     font-size: 0.75rem; } }
 
-@media screen and (min-width: 30em) and (max-width: 60em) {
+@media screen and (min-width: 35em) and (max-width: 60em) {
   .f-6-m,
   .f-headline-m {
     font-size: 6rem; }
@@ -6469,7 +6469,7 @@ input[type=submit]:not(.button-small), .notice {
   overflow: hidden;
   text-overflow: ellipsis; }
 
-@media screen and (min-width: 30em) {
+@media screen and (min-width: 35em) {
   .measure-ns {
     max-width: 30em; }
   .measure-wide-ns {
@@ -6487,7 +6487,7 @@ input[type=submit]:not(.button-small), .notice {
     overflow: hidden;
     text-overflow: ellipsis; } }
 
-@media screen and (min-width: 30em) and (max-width: 60em) {
+@media screen and (min-width: 35em) and (max-width: 60em) {
   .measure-m {
     max-width: 30em; }
   .measure-wide-m {
@@ -6547,7 +6547,7 @@ input[type=submit]:not(.button-small), .notice {
 .ml-auto {
   margin-left: auto; }
 
-@media screen and (min-width: 30em) {
+@media screen and (min-width: 35em) {
   .center-ns {
     margin-right: auto;
     margin-left: auto; }
@@ -6556,7 +6556,7 @@ input[type=submit]:not(.button-small), .notice {
   .ml-auto-ns {
     margin-left: auto; } }
 
-@media screen and (min-width: 30em) and (max-width: 60em) {
+@media screen and (min-width: 35em) and (max-width: 60em) {
   .center-m {
     margin-right: auto;
     margin-left: auto; }
@@ -6595,7 +6595,7 @@ input[type=submit]:not(.button-small), .notice {
   /* IE6, IE7 */
   clip: rect(1px, 1px, 1px, 1px); }
 
-@media screen and (min-width: 30em) {
+@media screen and (min-width: 35em) {
   .clip-ns {
     position: fixed !important;
     _position: absolute !important;
@@ -6603,7 +6603,7 @@ input[type=submit]:not(.button-small), .notice {
     /* IE6, IE7 */
     clip: rect(1px, 1px, 1px, 1px); } }
 
-@media screen and (min-width: 30em) and (max-width: 60em) {
+@media screen and (min-width: 35em) and (max-width: 60em) {
   .clip-m {
     position: fixed !important;
     _position: absolute !important;
@@ -6638,7 +6638,7 @@ input[type=submit]:not(.button-small), .notice {
 .pre {
   white-space: pre; }
 
-@media screen and (min-width: 30em) {
+@media screen and (min-width: 35em) {
   .ws-normal-ns {
     white-space: normal; }
   .nowrap-ns {
@@ -6646,7 +6646,7 @@ input[type=submit]:not(.button-small), .notice {
   .pre-ns {
     white-space: pre; } }
 
-@media screen and (min-width: 30em) and (max-width: 60em) {
+@media screen and (min-width: 35em) and (max-width: 60em) {
   .ws-normal-m {
     white-space: normal; }
   .nowrap-m {
@@ -6684,7 +6684,7 @@ input[type=submit]:not(.button-small), .notice {
 .v-btm {
   vertical-align: bottom; }
 
-@media screen and (min-width: 30em) {
+@media screen and (min-width: 35em) {
   .v-base-ns {
     vertical-align: baseline; }
   .v-mid-ns {
@@ -6694,7 +6694,7 @@ input[type=submit]:not(.button-small), .notice {
   .v-btm-ns {
     vertical-align: bottom; } }
 
-@media screen and (min-width: 30em) and (max-width: 60em) {
+@media screen and (min-width: 35em) and (max-width: 60em) {
   .v-base-m {
     vertical-align: baseline; }
   .v-mid-m {
@@ -7357,7 +7357,7 @@ article code {
   flex-grow: 1;
   flex-shrink: 1; }
 
-@media screen and (min-width: 30em) {
+@media screen and (min-width: 35em) {
   .flex-fair-ns {
     flex-basis: 1px;
     flex-grow: 1;
@@ -7556,7 +7556,7 @@ article code {
 .hide-if-empty:empty {
   display: none !important; }
 
-@media screen and (min-width: 30em) {
+@media screen and (min-width: 35em) {
   .bi-avoid-ns {
     break-inside: avoid; }
   .cc-auto-ns {
@@ -7583,7 +7583,7 @@ article code {
     background-color: #f0f0f0;
     background-color: var(--dim-background); } }
 
-@media screen and (min-width: 30em) and (max-width: 60em) {
+@media screen and (min-width: 35em) and (max-width: 60em) {
   .bi-avoid-m {
     break-inside: avoid; }
   .cc-auto-m {
@@ -7658,7 +7658,7 @@ article code {
   margin-right: auto;
   margin-left: auto; }
 
-@media screen and (min-width: 30em) {
+@media screen and (min-width: 35em) {
   footer .list li:not(:last-child)::after {
     content: ' / '; } }
 
@@ -7741,7 +7741,7 @@ article code {
   border-width: 0px;
   border-bottom-width: 1px;
   padding-bottom: 0.5rem; }
-  @media screen and (min-width: 30em) {
+  @media screen and (min-width: 35em) {
     .optionbar {
       flex-direction: row;
       text-align: left;
@@ -7751,7 +7751,7 @@ article code {
     border-top-width: 1px;
     padding-bottom: 0;
     padding-top: 0.5rem; }
-    @media screen and (min-width: 30em) {
+    @media screen and (min-width: 35em) {
       .optionbar.bottom {
         padding-top: 0; } }
   .optionbar.center {
@@ -7759,7 +7759,7 @@ article code {
   .optionbar .options {
     display: flex;
     flex-direction: column; }
-    @media screen and (min-width: 30em) {
+    @media screen and (min-width: 35em) {
       .optionbar .options {
         flex-direction: row; } }
     
@@ -7869,6 +7869,28 @@ article code {
   --fade-color: #f8f8f8;
   --fade-color: var(--background-even-background); }
 
+.sr-only, .sr-focusable {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  word-wrap: normal !important;
+  transition: 0.2s all; }
+
+.sr-focusable:focus {
+  padding: 15px 10px;
+  height: auto;
+  width: auto;
+  background: var(--content-background);
+  clip: initial;
+  clip-path: initial;
+  z-index: 99999; }
+
 .userlist {
   text-align: center;
   width: 100%;
@@ -8075,7 +8097,7 @@ figure {
   color: var(--dimmer-color);
   font-style: italic; }
 
-@media screen and (min-width: 30em) {
+@media screen and (min-width: 35em) {
   #preview-container {
     max-height: calc(100vh - 20rem);
     overflow: auto; } }
@@ -8083,7 +8105,7 @@ figure {
 .edit-form .edit-form-row > :first-child {
   font-weight: 500; }
 
-@media screen and (min-width: 30em) {
+@media screen and (min-width: 35em) {
   .edit-form .edit-form-row .pt-input-ns {
     padding-top: 0.3rem; } }
 
@@ -8827,10 +8849,10 @@ header .hmn-logo {
   align-items: center;
   justify-content: center;
   color: white !important; }
-  @media screen and (min-width: 30em) {
+  @media screen and (min-width: 35em) {
     header .hmn-logo.big {
       width: 11.25rem; } }
-  @media screen and (min-width: 30em) {
+  @media screen and (min-width: 35em) {
     header .hmn-logo.small {
       width: 3.75rem;
       padding: 0.8rem;
@@ -8845,7 +8867,7 @@ header .hmn-logo {
 header .items {
   position: relative; }
 
-@media screen and (min-width: 30em) {
+@media screen and (min-width: 35em) {
   header .root-item {
     position: relative;
     height: 3.75rem; } }
@@ -8882,7 +8904,7 @@ header .submenu {
   min-width: 10rem;
   border-top-style: solid;
   border-bottom-style: solid; }
-  @media screen and (min-width: 30em) {
+  @media screen and (min-width: 35em) {
     header .submenu {
       border-top-style: none;
       border-left-style: solid;
@@ -8895,7 +8917,7 @@ header .submenu {
     z-index: 1;
     font-weight: bold;
     text-align: center; }
-    @media screen and (min-width: 30em) {
+    @media screen and (min-width: 35em) {
       header .submenu > a {
         text-align: left; } }
 
@@ -8903,6 +8925,9 @@ header .menu-bar {
   width: 100%;
   z-index: 10; }
 
+header #login-link {
+  cursor: pointer; }
+
 header #login-popup {
   background-color: #fbfbfb;
   background-color: var(--login-popup-background);
@@ -9452,7 +9477,7 @@ span.icon-rss::before {
     .timeline-item .avatar-icon.big {
       width: 3rem;
       height: 3rem; }
-      @media screen and (min-width: 30em) {
+      @media screen and (min-width: 35em) {
         .timeline-item .avatar-icon.big {
           width: 3.875rem;
           height: 3.875rem; } }
@@ -9467,7 +9492,7 @@ span.icon-rss::before {
 .timeline-modal .container {
   max-height: 100vh;
   max-width: 100%; }
-  @media screen and (min-width: 30em) {
+  @media screen and (min-width: 35em) {
     .timeline-modal .container {
       width: auto;
       max-width: calc(100% - 2rem);
diff --git a/public/visualjam2023/favicon-16x16.png b/public/visualjam2023/favicon-16x16.png
new file mode 100644
index 0000000..41346af
Binary files /dev/null and b/public/visualjam2023/favicon-16x16.png differ
diff --git a/public/visualjam2023/favicon-32x32.png b/public/visualjam2023/favicon-32x32.png
new file mode 100644
index 0000000..d3d57bf
Binary files /dev/null and b/public/visualjam2023/favicon-32x32.png differ
diff --git a/public/visualjam2023/logo.svg b/public/visualjam2023/logo.svg
new file mode 100644
index 0000000..740e1a5
--- /dev/null
+++ b/public/visualjam2023/logo.svg
@@ -0,0 +1,22 @@
+<svg width="461" height="280" viewBox="0 0 461 280" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22 0C9.84974 0 0 9.84974 0 22V258C0 270.15 9.84973 280 22 280H439C451.15 280 461 270.15 461 258V22C461 9.84974 451.15 0 439 0H22ZM36 14C23.8497 14 14 23.8497 14 36V236H447V36C447 23.8497 437.15 14 425 14H36Z" fill="white"/>
+<circle cx="56.5" cy="200.5" r="22.5" fill="white"/>
+<circle cx="101.5" cy="147.5" r="22.5" fill="white"/>
+<circle cx="183.5" cy="188.5" r="22.5" fill="white"/>
+<circle cx="183.5" cy="97.5" r="22.5" fill="white"/>
+<circle cx="83.5" cy="52.5" r="22.5" fill="white"/>
+<line x1="83.9476" y1="51.4415" x2="101.948" y2="146.442" stroke="white" stroke-width="6"/>
+<line x1="53.7131" y1="198.058" x2="98.7131" y2="145.058" stroke="white" stroke-width="6"/>
+<line x1="183.59" y1="99.544" x2="103.59" y2="149.544" stroke="white" stroke-width="6"/>
+<line x1="181.645" y1="190.677" x2="100.645" y2="149.677" stroke="white" stroke-width="6"/>
+<rect x="421" y="36" width="21" height="54" rx="5" transform="rotate(90 421 36)" fill="white"/>
+<rect x="361" y="65" width="21" height="54" rx="5" transform="rotate(90 361 65)" fill="white"/>
+<rect x="421" y="65" width="21" height="99" rx="5" transform="rotate(90 421 65)" fill="white"/>
+<rect x="361" y="94" width="21" height="99" rx="5" transform="rotate(90 361 94)" fill="white"/>
+<rect x="421" y="94" width="21" height="69" rx="5" transform="rotate(90 421 94)" fill="white"/>
+<rect x="361" y="123" width="21" height="69" rx="5" transform="rotate(90 361 123)" fill="white"/>
+<rect x="421" y="123" width="21" height="120" rx="5" transform="rotate(90 421 123)" fill="white"/>
+<rect x="361" y="152" width="21" height="120" rx="5" transform="rotate(90 361 152)" fill="white"/>
+<rect x="421" y="152" width="21" height="40" rx="5" transform="rotate(90 421 152)" fill="white"/>
+<rect x="361" y="181" width="21" height="40" rx="5" transform="rotate(90 361 181)" fill="white"/>
+</svg>
diff --git a/public/visualjam2023/opengraph.png b/public/visualjam2023/opengraph.png
new file mode 100644
index 0000000..0442d06
Binary files /dev/null and b/public/visualjam2023/opengraph.png differ
diff --git a/src/config/config.go.example b/src/config/config.go.example
index 15a4c71..5b2fd79 100644
--- a/src/config/config.go.example
+++ b/src/config/config.go.example
@@ -14,6 +14,7 @@ var Config = HMNConfig{
 	BaseUrl:     "http://handmade.local:9001",
 	LogLevel:    zerolog.TraceLevel, // InfoLevel is recommended for production
 	Postgres: PostgresConfig{
+  // the "db seed" command depends on this user existing in Postgres, so you'll want to make sure it exists when running locally.
 		User:     "hmn",
 		Password: "password",
 		Hostname: "localhost",
diff --git a/src/hmndata/jams.go b/src/hmndata/jams.go
index c8a717b..63d12bc 100644
--- a/src/hmndata/jams.go
+++ b/src/hmndata/jams.go
@@ -39,6 +39,15 @@ var WRJ2022 = Jam{
 	Slug: "WRJ2022",
 }
 
+var VJ2023 = Jam{
+	Event: Event{
+		StartTime: time.Date(2023, 4, 14, 0, 0, 0, 0, utils.Must1(time.LoadLocation("America/Los_Angeles"))),
+		EndTime:   time.Date(2023, 4, 16, 8, 0, 0, 0, utils.Must1(time.LoadLocation("America/Los_Angeles"))),
+	},
+	Name: "Visualization Jam 2023",
+	Slug: "VJ2023",
+}
+
 var HMS2022 = Event{
 	StartTime: time.Date(2022, 11, 16, 0, 0, 0, 0, utils.Must1(time.LoadLocation("America/Los_Angeles"))),
 	EndTime:   time.Date(2022, 11, 18, 0, 0, 0, 0, utils.Must1(time.LoadLocation("America/Los_Angeles"))),
diff --git a/src/hmnurl/urls.go b/src/hmnurl/urls.go
index 416053d..c8a550e 100644
--- a/src/hmnurl/urls.go
+++ b/src/hmnurl/urls.go
@@ -70,6 +70,13 @@ func BuildJamIndex2022() string {
 	return Url("/jam/2022", nil)
 }
 
+var RegexVisualizationJamIndex2023 = regexp.MustCompile("^/visualization-jam/2023$")
+
+func BuildVisualizationJamIndex2023() string {
+	defer CatchPanic()
+	return Url("/visualization-jam/2023", nil)
+}
+
 var RegexJamFeed2022 = regexp.MustCompile("^/jam/2022/feed$")
 
 func BuildJamFeed2022() string {
diff --git a/src/rawdata/scss/_core.scss b/src/rawdata/scss/_core.scss
index b66c5ac..69c8858 100644
--- a/src/rawdata/scss/_core.scss
+++ b/src/rawdata/scss/_core.scss
@@ -769,3 +769,31 @@ footer {
   @include usevar(background-color, background-even-background);
   @include usevar(--fade-color, background-even-background);
 }
+
+.sr-only {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  word-wrap: normal !important;
+  transition: 0.2s all;
+}
+
+.sr-focusable {
+  @extend .sr-only;
+
+  &:focus {
+    padding: 15px 10px;
+    height: auto;
+    width: auto;
+    background: var(--content-background);
+    clip: initial;
+    clip-path: initial;
+    z-index: 99999;
+  }
+}
diff --git a/src/rawdata/scss/_header.scss b/src/rawdata/scss/_header.scss
index b407291..3a403e0 100644
--- a/src/rawdata/scss/_header.scss
+++ b/src/rawdata/scss/_header.scss
@@ -122,6 +122,10 @@ header {
     z-index: 10;
   }
   
+  #login-link{
+    cursor: pointer;
+  }
+
   #login-popup {
     @include usevar(background-color, login-popup-background);
     @include usevar(color, fg-font-color);
diff --git a/src/rawdata/scss/tachyons/scss/_variables.scss b/src/rawdata/scss/tachyons/scss/_variables.scss
index 339230a..575eacc 100644
--- a/src/rawdata/scss/tachyons/scss/_variables.scss
+++ b/src/rawdata/scss/tachyons/scss/_variables.scss
@@ -136,8 +136,8 @@ $washed-red: #ffdfdf !default;
 
 // Custom Media Query Variables
 
-$breakpoint-not-small: 'screen and (min-width: 30em)' !default;
-$breakpoint-medium: 'screen and (min-width: 30em) and (max-width: 60em)' !default;
+$breakpoint-not-small: 'screen and (min-width: 35em)' !default;
+$breakpoint-medium: 'screen and (min-width: 35em) and (max-width: 60em)' !default;
 $breakpoint-large: 'screen and (min-width: 60em)' !default;
 
 /*
diff --git a/src/templates/src/include/header.html b/src/templates/src/include/header.html
index c90668f..a88bb25 100644
--- a/src/templates/src/include/header.html
+++ b/src/templates/src/include/header.html
@@ -1,4 +1,5 @@
 <header id="site-header" class="mb3 bb bw1 b--theme-dark">
+    <a href="#content-start" class="sr-focusable" id="content-jump">Jump to Content</a>
     <div class="user-options flex justify-center justify-end-ns relative">
         {{ if .User }}
             {{ if .User.IsStaff }}
@@ -70,8 +71,10 @@
                         <a href="{{ .Header.ProjectIndexUrl }}">Projects</a>
                     </div>
                     <div class="root-item">
-                        <a>Media <div class="dib svgicon ml1">{{ svg "chevron-down-thick" }}</div></a>
-                        <div class="submenu b--theme-dark">
+                        <a aria-expanded="false" aria-controls="media-submenu" class="menu-dropdown-js" href="#">
+                          Media <div class="dib svgicon ml1">{{ svg "chevron-down-thick" }}</div>
+                        </a>
+                        <div class="submenu b--theme-dark" id="media-submenu">
                             <a href="{{ .Header.ConferencesUrl }}">Conferences</a>
                             <a href="{{ .Header.PodcastUrl }}">Podcast</a>
                             <a href="{{ .Header.FishbowlUrl }}">Fishbowls</a>
@@ -82,8 +85,10 @@
                         <a href="{{ .Header.ForumsUrl }}">Forums</a>
                     </div>
                     <div class="root-item">
-                        <a>Resources <div class="dib svgicon ml1">{{ svg "chevron-down-thick" }}</div></a>
-                        <div class="submenu b--theme-dark">
+                        <a aria-expanded="false" aria-controls="resource-submenu" class="menu-dropdown-js" href="#">
+                          Resources <div class="dib svgicon ml1">{{ svg "chevron-down-thick" }}</div>
+                        </a>
+                        <div class="submenu b--theme-dark" id="resource-submenu">
                             <a href="{{ .Header.EducationUrl }}">Education</a>
                         </div>
                     </div>
@@ -96,7 +101,7 @@
         </div>
     </div>
 </header>
-
+<div id="content-start"></div>
 <script type="text/javascript">
     document.addEventListener("DOMContentLoaded", function() {
         const header = document.querySelector('#site-header');
@@ -132,15 +137,37 @@
             }
         }
 
+        // dropdown accessiblity 
+        { 
+          const dropdowns = document.querySelectorAll('.menu-dropdown-js');
+          
+          for(let i = 0; i < dropdowns.length; i++) {
+                let dropdown = dropdowns[i];
+                dropdown.addEventListener('click', e => {
+                e.preventDefault();
+                for(let j = 0; j < dropdowns.length; j++){
+                  let each = dropdowns[j];
+                  if(each != dropdown){
+                    each.setAttribute("aria-expanded", false);
+                  }
+                }
+                // getAttribute returns a string so we have to do it this way
+                var toSetTo = dropdown.getAttribute("aria-expanded") == "false" ? "true" : "false"; 
+                dropdown.setAttribute("aria-expanded", toSetTo);
+                console.log(dropdown);
+            }); 
+          }
+        }
+
         // set up login form
         {
             const loginPopup = document.getElementById("login-popup");
             const loginLink = document.getElementById("login-link");
 
             if (loginPopup !== null) {
-                loginLink.removeAttribute("href");
 
-                loginLink.onclick = () => {
+                loginLink.onclick = (e) => { 
+                    e.preventDefault();
                     loginPopup.classList.toggle("open");
                 }
             }
diff --git a/src/templates/src/layouts/visualization_jam_2023_base.html b/src/templates/src/layouts/visualization_jam_2023_base.html
new file mode 100644
index 0000000..d2569e6
--- /dev/null
+++ b/src/templates/src/layouts/visualization_jam_2023_base.html
@@ -0,0 +1,356 @@
+{{/*
+    This is a copy-paste from base.html because we want to preserve the unique
+    style of this page no matter what future changes we make to the base.
+*/}}
+<!DOCTYPE html{{ if .OpenGraphItems }} prefix="og: http://ogp.me/ns#"{{ end }}>
+<html lang="en-US">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <link rel="icon" type="image/png" sizes="16x16" href="{{ static "visualjam2023/favicon-16x16.png" }}">
+    <link rel="icon" type="image/png" sizes="32x32" href="{{ static "visualjam2023/favicon-32x32.png" }}">
+
+    {{ if .CanonicalLink }}<link rel="canonical" href="{{ .CanonicalLink }}">{{ end }}
+    {{ range .OpenGraphItems }}
+        {{ if .Property }}
+            <meta property="{{ .Property }}" content="{{ .Value }}" />
+        {{ else }}
+            <meta name="{{ .Name }}" content="{{ .Value }}" />
+        {{ end }}
+    {{ end }}
+    {{ if .Title }}
+        <title>{{ .Title }} | Handmade Network</title>
+    {{ else }}
+        <title>Handmade Network</title>
+    {{ end }}
+    <meta name="theme-color" content="#346ba6">
+
+    <script src="{{ static "js/templates.js" }}"></script>
+
+    <link rel="stylesheet" href="{{ static "fonts/mohave/stylesheet.css" }}">
+    <link href='https://fonts.googleapis.com/css?family=Fira+Sans:300,400,500,600' rel='stylesheet' type='text/css'>
+    <link href='https://fonts.googleapis.com/css?family=Fira+Mono:300,400,500,700' rel='stylesheet' type='text/css'>
+    <link rel="stylesheet" type="text/css" href="{{ static "style.css" }}">
+
+    <style>
+        /* Copy-paste from project.css yay */
+        {{ $c := hex2color "D10074" }}
+
+        {{ $themeDim := eq .Theme "dark" | ternary (lightness 0.35 $c) (lightness 0.75 $c) | color2css }}
+        {{ $themeDimmer := eq .Theme "dark" | ternary (lightness 0.3 $c) (lightness 0.8 $c) | color2css }}
+        {{ $themeDimmest := eq .Theme "dark" | ternary (lightness 0.2 $c) (lightness 0.85 $c) | color2css }}
+
+        {{ $themeDark := eq .Theme "dark" | ternary (lightness 0.30 $c) (lightness 0.35 $c) | color2css }}
+
+        {{ $linkColor := eq .Theme "dark" | ternary (lightness 0.55 $c) (lightness 0.35 $c) | color2css }}
+        {{ $linkHoverColor := eq .Theme "dark" | ternary (lightness 0.65 $c) (lightness 0.45 $c) | color2css }}
+
+        :root {
+            --content-background: #f8f8f8;
+            --card-background: rgba(255, 255, 255, 0.1);
+            --card-background-hover: rgba(255, 255, 255, 0.16);
+
+            --theme-color: {{ $c | color2css }};
+            --theme-color-dim: {{ $themeDim }};
+            --theme-color-dimmer: {{ $themeDimmer }};
+            --theme-color-dimmest: {{ $themeDimmest }};
+
+            --timeline-content-background: rgba(255, 255, 255, 0.1);
+        }
+
+        body {
+            background: linear-gradient( #D10074, #6E2C6B );
+            // background: linear-gradient( #34e89e, #0f3443); 
+        }
+
+        .user-options,
+        header form,
+        header .menu-bar .wiki,
+        header .menu-bar .library
+        {
+            display: none !important;
+        }
+
+        header {
+            border-bottom-color: white;
+            margin-bottom: 0 !important;
+        }
+
+        .hmn-logo {
+            background-color: rgba(255, 255, 255, 0.1) !important;
+        }
+
+        header a, footer a {
+            color: white !important;
+        }
+
+        header .submenu {
+            background-color: #D10074;
+        }
+
+        #top-container {
+            margin: 3rem 0;
+        }
+
+        #logo {
+            width: 16rem;
+        }
+
+        h1, h2, h3 {
+            font-family: 'MohaveHMN', sans-serif;
+            margin-bottom: 0;
+            font-weight: normal;
+        }
+
+        #title {
+            color: white;
+            font-size: 2.4rem;
+            line-height: 0.8;
+            margin-top: 2rem;
+            letter-spacing: -0.06rem;
+            text-transform: uppercase;
+        }
+
+        #dates {
+            font-variant: small-caps;
+            font-size: 1.6rem;
+            margin-top: 0.2rem;
+        }
+
+        #tagline {
+            font-size: 1rem;
+            margin-top: 1rem;
+            line-height: 1.4;
+        }
+
+        #top-container a {
+            color: white !important;
+            text-decoration: underline;
+        }
+
+        .actions {
+            margin-top: 1.5rem;
+        }
+
+        .actions a {
+            text-decoration: none !important;
+            line-height: 1.4;
+            font-weight: 500;
+
+            transition: background-color 50ms ease-in-out;
+            background-color:rgba(255, 255, 255, 0.1);
+        }
+
+        .actions a:hover {
+            background-color: rgba(255, 255, 255, 0.2);
+        }
+
+        .actions a:active {
+            background-color: rgba(255, 255, 255, 0.15);
+        }
+
+        .section {
+            font-size: 1rem;
+            line-height: 1.4;
+        }
+
+        .section h2 {
+            font-variant: small-caps;
+            font-size: 2.2rem;
+            line-height: 1.1;
+        }
+
+        .section h3 {
+            font-variant: small-caps;
+            font-size: 2rem;
+            line-height: 0.8;
+            margin-top: 1.4rem;
+        }
+
+        .section p {
+            margin-top: 1em;
+            margin-bottom: 1em;
+        }
+
+        .section a {
+            text-decoration: underline;
+        }
+
+        .emphasized {
+            padding-left: 1rem;
+            border-left: 0.3rem solid white;
+        }
+
+        .flex-fair {
+            flex-basis: 1px;
+            flex-grow: 1;
+            flex-shrink: 1;
+        }
+
+        ul {
+            list-style-type: disc;
+        }
+
+        li {
+            margin-top: 0.6rem;
+            margin-bottom: 0.6rem;
+        }
+
+        .section li p {
+            margin-top: 0.6rem;
+            margin-bottom: 0.6rem;
+        }
+
+        footer {
+            border-top: 2px solid white;
+            margin-top: 2rem;
+            text-align: center;
+        }
+
+        footer h2 {
+            text-transform: uppercase;
+        }
+
+        .showcase-item {
+            background-color: rgba(0, 0, 0, 0.2);
+            border-color: rgba(255, 255, 255, 0.5);
+        }
+        
+        .carousel-thinger {
+            position: absolute;
+            top: 0;
+            width: 6rem;
+            height: 100%;
+            background-color: rgba(255, 255, 255, 0.1); /* bg-white-10 */
+            border-radius: 0.5rem; /* br3 */
+            cursor: pointer;
+        }
+
+        .carousel-thinger.prev {
+            left: -7rem;
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+            background: linear-gradient(to left, rgba(255, 255, 255, 0.1), transparent);
+        }
+
+        .carousel-thinger.next {
+            right: -7rem;
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+            background: linear-gradient(to right, rgba(255, 255, 255, 0.1), transparent);
+        }
+
+        @media screen and (min-width: 30em) {
+            /* not small styles */
+
+            #top-container {
+                margin: 5.4rem 0;
+            }
+
+            #logo {
+                width: 31rem;
+            }
+
+            #title {
+                font-size: 5.2rem;
+                margin-top: 4rem;
+            }
+
+            #dates {
+                font-size: 2.8rem;
+            }
+
+            #tagline {
+                font-size: 1.2rem;
+                margin-top: 1.2rem;
+            }
+
+            .actions {
+                margin-top: 2.2rem;
+            }
+
+            .actions a {
+                font-size: 1.2rem;
+            }
+
+            .section h2 {
+                font-size: 3.4rem;
+            }
+
+            .section h3 {
+                font-size: 2.4rem;
+                margin-top: 1.6rem;
+            }
+        }
+
+        h3.mt0 {
+            margin-top: 0; /* ugh seriously */
+        }
+
+        .back-to-normal * {
+            font-family: "Fira Sans", sans-serif;
+        }
+
+        .back-to-normal h1,
+        .back-to-normal h2,
+        .back-to-normal h3,
+        .back-to-normal h4,
+        .back-to-normal h5 
+        {
+            font-weight: 500;
+            margin: 0;
+            margin-bottom: 0.5rem;
+            font-size: 1.5rem;
+            line-height: 1.25em;
+        }
+
+        .back-to-normal a {
+            text-decoration: none;
+        }
+
+        .snippet-project {
+            background-color: rgba(255, 255, 255, 0.1);
+            text-decoration: none !important;
+        }
+
+        /* More copy-paste from project.css */
+        .bg-theme {
+            background-color: {{ $c | color2css }};
+            background-color: var(--theme-color);
+        }
+
+        .bg-theme-dim {
+            background-color: {{ $themeDim }};
+            background-color: var(--theme-color-dim);
+        }
+
+        .bg-theme-dimmer {
+            background-color: {{ $themeDimmer }};
+            background-color: var(--theme-color-dimmer);
+        }
+
+        .bg-theme-dimmest {
+            background-color: {{ $themeDimmest }};
+            background-color: var(--theme-color-dimmest);
+        }
+    </style>
+
+    <script src="{{ static "js/carousel.js" }}"></script>
+</head>
+
+<body>
+    <div class="left white">
+        <div class="mt4-ns mw8 margin-center ph3-m ph4-l">
+            {{ template "header.html" . }}
+        </div>
+
+        {{ block "content" . }}{{ end }}
+
+        <div class="mw8 margin-center ph3-m ph4-l">
+            {{ template "footer.html" . }}
+        </div>
+    </div>
+</body>
+
+</html>
diff --git a/src/templates/src/visualization_jam_2023.html b/src/templates/src/visualization_jam_2023.html
new file mode 100644
index 0000000..bd6ea55
--- /dev/null
+++ b/src/templates/src/visualization_jam_2023.html
@@ -0,0 +1,447 @@
+{{ template "visualization_jam_2023_base.html" . }} {{ define "content" }} {{
+$discordInviteURL := "https://discord.gg/hmn" }}
+
+<style>
+  .projects {
+    display: grid;
+    grid-template-columns: 1fr;
+  }
+
+  @media screen and (min-width: 30em) {
+    /* not small styles */
+
+    .projects {
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+</style>
+
+<div id="top-container" class="flex flex-column items-center ph3">
+  <img id="logo" src="{{ static "visualjam2023/logo.svg" }}">
+  <h1 id="title">Visualization Jam</h1>
+  <h2 id="dates">April 14 - 16, 2O23</h2>
+  <div id="tagline" class="center">
+    A jam to see things in a new way. {{ if gt .DaysUntilEnd 0 }} {{ if eq
+    .DaysUntilStart 0 }}
+    <b>Happening now.</b>
+    {{ else if eq .DaysUntilStart 1 }}
+    <b>Starting tomorrow.</b>
+    {{ else }}
+    <b>In {{ .DaysUntilStart }} days.</b>
+    {{ end }} {{ end }}
+  </div>
+  <div class="actions flex justify-center">
+    {{ if gt .DaysUntilStart 0 }}
+    <a
+      class="ba b--white br2 pv2 pv3-ns ph3 ph4-ns"
+      target="_blank"
+      href="https://github.com/HandmadeNetwork/wishlist/discussions"
+      >Find a project</a
+    >
+    {{ else if gt .DaysUntilEnd 0 }} {{ if .SubmittedProjectUrl }}
+    <a
+      class="ba b--white br2 pv2 pv3-ns ph3 ph4-ns"
+      target="_blank"
+      href="{{ .SubmittedProjectUrl }}"
+      >Share your progress</a
+    >
+    {{ else }}
+    <a
+      class="ba b--white br2 pv2 pv3-ns ph3 ph4-ns ml3"
+      target="_blank"
+      href="{{ .ProjectSubmissionUrl }}"
+      >Create your project</a
+    >
+    {{ end }} {{ else }}
+    <a
+      class="ba b--white br2 pv2 pv3-ns ph3 ph4-ns ml3"
+      href="{{ .ShowcaseFeedUrl }}"
+      >See the results</a
+    >
+    {{ end }}
+    <a
+      class="ba b--white br2 pv2 pv3-ns ph3 ph4-ns ml3"
+      target="_blank"
+      href="{{ $discordInviteURL }}"
+      >Join the Discord</a
+    >
+  </div>
+</div>
+
+<div class="section mw8 margin-center ph3 ph4-l mv4">
+  <h1>
+    TODO: Needs copy -- guessing we'll use some of the images that Ben has
+    marked as TODO TODO TODO in the copy doc.
+  </h1>
+</div>
+
+{{ if eq .DaysUntilEnd 0 }}
+<div class="section bg-black-20 pv4 overflow-hidden">
+  <div class="mw8 margin-center ph3 ph4-l">
+    <h2>Submitted projects</h2>
+    <div class="mt3 projects g3 back-to-normal">
+      {{ range .JamProjects }} {{ template "project_card.html" projectcarddata .
+      "" }} {{ end }}
+    </div>
+    <div class="actions flex justify-center">
+      <a
+        class="ba b--white br2 pv2 pv3-ns ph3 ph4-ns ml3"
+        href="{{ .ShowcaseFeedUrl }}"
+        >See all updates</a
+      >
+    </div>
+  </div>
+</div>
+{{ else if and (eq .DaysUntilStart 0) (not (eq .ShowcaseJson "[]")) }}
+<div id="showcase-outer-container" class="bg-black-20 pt4 pb3 pb4-ns">
+  <div class="section mw8 margin-center ph3 ph4-l">
+    {{ if gt .DaysUntilEnd 0 }}
+    <h2>Recent updates</h2>
+    <p>
+      These screenshots and videos were shared by jam participants in
+      <b>#project-showcase</b> on our
+      <a href="{{ $discordInviteURL }}" target="_blank">Discord</a>. Join us and
+      share what you're working on!
+      <a class="b" href="{{ .ShowcaseFeedUrl }}">See all ➜</a>
+    </p>
+    {{ else }}
+    <h2>Community showcase</h2>
+    <p>
+      These screenshots and videos were shared by jam participants in
+      <b>#project-showcase</b> on our
+      <a href="https://discord.gg/hmn" target="_blank">Discord</a> during the
+      jam. Join us and chat about your favorites!
+    </p>
+    {{ end }}
+    <div id="showcase-container" class="mw8 center-layout mh2 mh0-ns"></div>
+    <div class="actions flex justify-center">
+      <a
+        class="ba b--white br2 pv2 pv3-ns ph3 ph4-ns ml3"
+        target="_blank"
+        href="{{ .ShowcaseFeedUrl }}"
+        >See all</a
+      >
+    </div>
+  </div>
+</div>
+
+{{ template "showcase_templates.html" }}
+<!-- Copy-pasted and mangled from showcase.html  -->
+<script>
+  const ROW_HEIGHT = 300;
+  const ITEM_SPACING = 4;
+
+  const showcaseItems = JSON.parse("{{ .ShowcaseJson }}");
+  const addThumbnailFuncs = new Array(showcaseItems.length);
+
+  const showcaseOuterContainer = document.querySelector(
+    "#showcase-outer-container"
+  );
+  let showcaseContainer = document.querySelector("#showcase-container");
+
+  // showcaseOuterContainer.classList.toggle('dn', showcaseItems.length === 0);
+
+  const itemElements = []; // array of arrays
+  for (let i = 0; i < showcaseItems.length; i++) {
+    const item = showcaseItems[i];
+
+    const [itemEl, addThumbnail] = makeShowcaseItem(item);
+    itemEl.container.setAttribute("data-index", i);
+    itemEl.container.setAttribute("data-date", item.date);
+
+    addThumbnailFuncs[i] = addThumbnail;
+
+    itemElements.push(itemEl.container);
+  }
+
+  function layout() {
+    const width = showcaseContainer.getBoundingClientRect().width;
+    showcaseContainer = emptyElement(showcaseContainer);
+
+    function addRow(itemEls, rowWidth, container) {
+      const totalSpacing = ITEM_SPACING * (itemEls.length - 1);
+      const scaleFactor = width / Math.max(rowWidth, width);
+
+      const row = document.createElement("div");
+      row.classList.add("flex");
+      row.classList.toggle("justify-between", rowWidth >= width);
+      row.style.marginBottom = `${ITEM_SPACING}px`;
+
+      for (const itemEl of itemEls) {
+        const index = parseInt(itemEl.getAttribute("data-index"), 10);
+        const item = showcaseItems[index];
+
+        const aspect = item.width / item.height;
+        const baseWidth = aspect * ROW_HEIGHT * scaleFactor;
+        const actualWidth = baseWidth - totalSpacing / itemEls.length;
+
+        itemEl.style.width = `${actualWidth}px`;
+        itemEl.style.height = `${scaleFactor * ROW_HEIGHT}px`;
+        itemEl.style.marginRight = `${ITEM_SPACING}px`;
+
+        row.appendChild(itemEl);
+      }
+
+      container.appendChild(row);
+    }
+
+    let rowItemEls = [];
+    let rowWidth = 0;
+    let numRows = 0;
+
+    for (const itemEl of itemElements) {
+      const index = parseInt(itemEl.getAttribute("data-index"), 10);
+      const item = showcaseItems[index];
+
+      const aspect = item.width / item.height;
+      rowWidth += aspect * ROW_HEIGHT;
+
+      rowItemEls.push(itemEl);
+
+      if (rowWidth > width) {
+        addRow(rowItemEls, rowWidth, showcaseContainer);
+        numRows += 1;
+        if (numRows == 3) {
+          return;
+        }
+
+        rowItemEls = [];
+        rowWidth = 0;
+      }
+    }
+
+    addRow(rowItemEls, rowWidth, showcaseContainer);
+  }
+
+  function loadImages() {
+    const items = showcaseContainer.querySelectorAll(".showcase-item");
+    for (const item of items) {
+      const i = parseInt(item.getAttribute("data-index"), 10);
+      addThumbnailFuncs[i]();
+    }
+  }
+
+  layout();
+  layout(); // scrollbars are fun!!
+
+  loadImages();
+
+  window.addEventListener("resize", () => {
+    layout();
+  });
+</script>
+{{ end }}
+
+<div class="pt4 pb3 pb4-ns">
+  <div class="section mw8 margin-center ph3 ph4-l">
+    <h2>How to participate</h2>
+    <p>
+      The jam takes place from Friday, April 14 through Sunday, April 16. Here's
+      how you can participate:
+    </p>
+
+    <div class="{{ if gt .DaysUntilStart 0 }}emphasized{{ end }}">
+      <h3>Pick a project and form a team.</h3>
+      <p>
+        Pick something to visualize! Maybe it’s some weird data structure you
+        want to debug. Maybe it’s a map of your codebase. Maybe it’s your sleep
+        schedule. Whatever it is, make a Handmade Network project for it
+      </p>
+    </div>
+
+    <div
+      class="{{ if and (eq .DaysUntilStart 0) (gt .DaysUntilEnd 1) }}emphasized{{ end }}"
+    >
+      <h3>Jam.</h3>
+      <p>
+        {{ if and (eq .DaysUntilStart 0) (not .SubmittedProjectUrl) }}
+        <a href="{{ .ProjectSubmissionUrl }}" target="_blank"
+          ><b>Create a Handmade Network project</b></a
+        >
+        {{ else }} After the jam starts, create a Handmade Network project {{
+        end }} to track your work. Then, build your program! Share your work in
+        progress in #project-showcase on
+        <a href="{{ $discordInviteURL }}" target="_blank">Discord</a>, or
+        directly from your project page. Chat with other jammers in #jam too.
+      </p>
+    </div>
+
+    <div class="{{ if eq .DaysUntilEnd 1 }}emphasized{{ end }}">
+      <h3>Submit your work!</h3>
+      <p>
+        <b>Your Handmade Network project is your submission.</b> Fill out the
+        project description, making sure to explain the goals of the project and
+        how it improves on what came before. Also consider posting an update
+        with video of your program in action!
+      </p>
+      {{ if and (eq .DaysUntilStart 0) (gt .DaysUntilEnd 0) }}
+      <p>
+        Submissions close
+        <b><span class="countdown" data-deadline="{{ .EndTimeUnix }}"></span></b
+        >.
+      </p>
+      {{ else if eq .DaysUntilEnd 0 }}
+      <p>
+        <b>Submissions are now closed.</b>
+      </p>
+      {{ end }}
+    </div>
+  </div>
+</div>
+
+<div class="bg-black-20 pt4 pb3 pb4-ns">
+  <div class="section mw8 margin-center ph3 ph4-l">
+    <h2>Rules</h2>
+    <ul>
+      <li>
+        Any tech is allowed, but we encourage you to use only use what you
+        really need. If you want some lightweight templates to get you started,
+        check out our
+        <a
+          href="https://github.com/HandmadeNetwork/jam_templates"
+          target="_blank"
+          >app templates</a
+        >.
+      </li>
+      <li>
+        You may work solo or in a team. (But we encourage you to work with a
+        team!)
+      </li>
+      <li>Submit your work by the end of the day on April 16.</li>
+    </ul>
+    <p>
+      There are no explicit winners, but we will be selecting a few of our
+      favorite projects to highlight in a recap stream following the jam.
+    </p>
+
+    <h3>Submission rules</h3>
+    <p>
+      <b
+        >{{ with .SubmittedProjectUrl }}
+        <a href="{{ . }}" target="_blank">Your Handmade Network project</a>
+        {{ else }} Your Handmade Network project {{ end }} is your
+        submission.</b
+      >
+      We will be looking at the project's description and any extra updates you
+      share toward the end of the jam.
+    </p>
+    <ul>
+      <li>
+        Explain the project's goals and how it improves on what came before.
+        Also share some closing thoughts - did it turn out how you hoped? What
+        did you learn? If you continue the project, what will you do
+        differently?
+      </li>
+      <li>
+        <b
+          >Your description must contain multiple screenshots of your software
+          in action.</b
+        >
+        You should ideally also share a project update with a demo video. We
+        recommend Mārtiņš Možeiko's
+        <a href="https://wcap.handmade.network/" target="_blank">wcap</a> for
+        recording desktop video on Windows. On Mac, just press ⌘-Option-5 and
+        record a video, or use QuickTime.
+      </li>
+      <li>
+        If at all possible, please provide a way for people to either build or
+        download your program.
+      </li>
+    </ul>
+  </div>
+</div>
+
+<div class="pt4">
+  <div class="flex-ns flex-row-ns mw8 margin-center ph3 ph4-l">
+    <div class="section flex-fair mb4 mb0-ns">
+      <h2>Make it by hand.</h2>
+      <p>
+        The Handmade ethos and Handmade community are software development
+        superpowers. Don't be afraid to question your foundations and rebuild
+        what needs rebuilding. The community is here to help you take on those
+        challenges and do what others might consider impossible.
+      </p>
+      <p>
+        Of course, this is a jam, so focus on what matters to your project.
+        There are many excellent libraries in the community that can save you
+        time and help you focus on your core ideas. Don't be afraid to use them.
+        But don't be afraid to do your own thing if they're holding you back.
+      </p>
+    </div>
+    <div class="section flex-fair ml4-m ml5-l">
+      <h2>Don't just rebuild. Reinvent.</h2>
+      <p>
+        This is a chance to build something <em>truly new</em>. Learn from
+        previous work, but don't settle for “the same, but better”. It would be
+        a huge shame to spend a week building nothing more than a clone of the
+        same broken software we use today.
+      </p>
+      <p>
+        This is where working with a team can really help. Bounce ideas off each
+        other, do some research, and brainstorm before the jam starts. The
+        software you end up building might be pretty different from your
+        original ideas.
+      </p>
+      <p>In the end, this is a jam. Get weird and try something different.</p>
+    </div>
+  </div>
+</div>
+
+<script>
+  const carouselContainer = document.querySelector(".carousel-container");
+  if (carouselContainer) {
+    const { next, prev } = initCarousel(carouselContainer, {
+      onChange() {
+        if (carouselContainer.getBoundingClientRect().top < 0) {
+          carouselContainer.scrollIntoView({ behavior: "smooth" });
+        }
+      },
+    });
+
+    document
+      .querySelector(".carousel-thinger.next")
+      .addEventListener("click", () => {
+        next();
+      });
+    document
+      .querySelector(".carousel-thinger.prev")
+      .addEventListener("click", () => {
+        prev();
+      });
+  }
+</script>
+
+<script>
+  for (const countdown of document.querySelectorAll(".countdown")) {
+    const deadline = countdown.getAttribute("data-deadline");
+    const deadlineDate = new Date(parseInt(deadline, 10) * 1000);
+
+    function updateCountdown() {
+      const remainingMs = deadlineDate.getTime() - new Date().getTime();
+      const remainingMinutes = remainingMs / 1000 / 60;
+      const remainingHours = remainingMinutes / 60;
+      const remainingDays = remainingHours / 24; // no daylight savings transitions during the jam mmkay
+
+      let str = "imminently";
+      if (remainingMinutes < 60) {
+        str = `in ${Math.ceil(remainingMinutes)} ${
+          remainingMinutes === 1 ? "minute" : "minutes"
+        }`;
+      } else if (remainingHours < 24) {
+        str = `in ${Math.ceil(remainingHours)} ${
+          remainingHours === 1 ? "hour" : "hours"
+        }`;
+      } else {
+        str = `in ${Math.ceil(remainingDays)} ${
+          remainingDays === 1 ? "day" : "days"
+        }`;
+      }
+
+      countdown.innerText = str;
+    }
+
+    updateCountdown();
+    setInterval(updateCountdown, 1000 * 60);
+  }
+</script>
+{{ end }}
diff --git a/src/website/routes.go b/src/website/routes.go
index 11f0e13..f5e5424 100644
--- a/src/website/routes.go
+++ b/src/website/routes.go
@@ -59,6 +59,7 @@ func NewWebsiteRoutes(conn *pgxpool.Pool) http.Handler {
 	hmnOnly.GET(hmnurl.RegexJamIndex2021, JamIndex2021)
 	hmnOnly.GET(hmnurl.RegexJamIndex2022, JamIndex2022)
 	hmnOnly.GET(hmnurl.RegexJamFeed2022, JamFeed2022)
+	hmnOnly.GET(hmnurl.RegexVisualizationJamIndex2023, VisualizationIndex2023)
 
 	hmnOnly.GET(hmnurl.RegexStaffRolesIndex, StaffRolesIndex)
 	hmnOnly.GET(hmnurl.RegexStaffRole, StaffRole)
diff --git a/src/website/visualization-jam.go b/src/website/visualization-jam.go
new file mode 100644
index 0000000..9d04221
--- /dev/null
+++ b/src/website/visualization-jam.go
@@ -0,0 +1,118 @@
+package website
+
+import (
+	"net/http"
+	//	"time"
+
+	"git.handmade.network/hmn/hmn/src/hmndata"
+	"git.handmade.network/hmn/hmn/src/hmnurl"
+	"git.handmade.network/hmn/hmn/src/oops"
+	"git.handmade.network/hmn/hmn/src/templates"
+	// "git.handmade.network/hmn/hmn/src/utils"
+)
+
+func VisualizationIndex2023(c *RequestContext) ResponseData {
+	var res ResponseData
+
+	daysUntilStart := daysUntil(hmndata.VJ2023.StartTime)
+	daysUntilEnd := daysUntil(hmndata.VJ2023.EndTime)
+
+	baseData := getBaseDataAutocrumb(c, hmndata.VJ2023.Name)
+	baseData.OpenGraphItems = []templates.OpenGraphItem{
+		{Property: "og:site_name", Value: "Handmade.Network"},
+		{Property: "og:type", Value: "website"},
+		// TODO:
+		{Property: "og:image", Value: hmnurl.BuildPublic("visualjam2023/opengraph.png", true)},
+		{Property: "og:description", Value: "See things in a new way. April 14 - 16."},
+		{Property: "og:url", Value: hmnurl.BuildJamIndex()},
+	}
+
+	type JamPageData struct {
+		templates.BaseData
+		DaysUntilStart, DaysUntilEnd int
+		StartTimeUnix, EndTimeUnix   int64
+
+		SubmittedProjectUrl  string
+		ProjectSubmissionUrl string
+		ShowcaseFeedUrl      string
+		ShowcaseJson         string
+
+		JamProjects []templates.Project
+	}
+
+	var showcaseItems []templates.TimelineItem
+	submittedProjectUrl := ""
+
+	if c.CurrentUser != nil {
+		projects, err := hmndata.FetchProjects(c, c.Conn, c.CurrentUser, hmndata.ProjectsQuery{
+			OwnerIDs: []int{c.CurrentUser.ID},
+			JamSlugs: []string{hmndata.VJ2023.Slug},
+			Limit:    1,
+		})
+		if err != nil {
+			return c.ErrorResponse(http.StatusInternalServerError, oops.New(err, "failed to fetch jam projects for current user"))
+		}
+		if len(projects) > 0 {
+			urlContext := hmndata.UrlContextForProject(&projects[0].Project)
+			submittedProjectUrl = urlContext.BuildHomepage()
+		}
+	}
+
+	jamProjects, err := hmndata.FetchProjects(c, c.Conn, c.CurrentUser, hmndata.ProjectsQuery{
+		JamSlugs: []string{hmndata.VJ2023.Slug},
+	})
+	if err != nil {
+		return c.ErrorResponse(http.StatusInternalServerError, oops.New(err, "failed to fetch jam projects for current user"))
+	}
+
+	pageProjects := make([]templates.Project, 0, len(jamProjects))
+	for _, p := range jamProjects {
+		pageProjects = append(pageProjects, templates.ProjectAndStuffToTemplate(&p, hmndata.UrlContextForProject(&p.Project).BuildHomepage(), c.Theme))
+	}
+
+	projectIds := make([]int, 0, len(jamProjects))
+	for _, jp := range jamProjects {
+		projectIds = append(projectIds, jp.Project.ID)
+	}
+
+	if len(projectIds) > 0 {
+		snippets, err := hmndata.FetchSnippets(c, c.Conn, c.CurrentUser, hmndata.SnippetQuery{
+			ProjectIDs: projectIds,
+			Limit:      12,
+		})
+		if err != nil {
+			return c.ErrorResponse(http.StatusInternalServerError, oops.New(err, "failed to fetch snippets for jam showcase"))
+		}
+		showcaseItems = make([]templates.TimelineItem, 0, len(snippets))
+		for _, s := range snippets {
+			timelineItem := SnippetToTimelineItem(&s.Snippet, s.Asset, s.DiscordMessage, s.Projects, s.Owner, c.Theme, false)
+			if timelineItem.CanShowcase {
+				showcaseItems = append(showcaseItems, timelineItem)
+			}
+		}
+	}
+
+	showcaseJson := templates.TimelineItemsToJSON(showcaseItems)
+
+	res.MustWriteTemplate("visualization_jam_2023.html", JamPageData{
+		BaseData:             baseData,
+		DaysUntilStart:       daysUntilStart,
+		DaysUntilEnd:         daysUntilEnd,
+		StartTimeUnix:        hmndata.VJ2023.StartTime.Unix(),
+		EndTimeUnix:          hmndata.VJ2023.EndTime.Unix(),
+		ProjectSubmissionUrl: hmnurl.BuildProjectNewJam(),
+		SubmittedProjectUrl:  submittedProjectUrl,
+		ShowcaseFeedUrl:      hmnurl.BuildJamFeed2022(),
+		ShowcaseJson:         showcaseJson,
+		JamProjects:          pageProjects,
+	}, c.Perf)
+	return res
+}
+
+// func daysUntil(t time.Time) int {
+// 	d := t.Sub(time.Now())
+// 	if d < 0 {
+// 		d = 0
+// 	}
+// 	return int(utils.DurationRoundUp(d, 24*time.Hour) / (24 * time.Hour))
+// }