Bam that's the rest of the todo list

public/style.css

@@ -7472,9 +7472,6 @@ article code {
 .h1-5 {
   height: 1.5rem; }
 
-.pre-line {
-  white-space: pre-line; }
-
 .fira {
   font-family: "Fira Sans", sans-serif; }
 
@@ -9396,6 +9393,9 @@ span.icon-rss::before {
         .timeline-item .avatar-icon.big {
           width: 3.875rem;
           height: 3.875rem; } }
+  .timeline-item .timeline-content-box {
+    background-color: rgba(0, 0, 0, 0.2);
+    background-color: var(--timeline-content-background); }
     .timeline-item .timeline-content-box > * {
       display: block;
       max-width: 100%;

public/themes/dark/theme.css

@@ -288,6 +288,7 @@ pre, code, .codeblock {
   --forum-diff-insert-border-color: #30591b;
   --card-background: #282828;
   --card-background-hover: #333;
+  --timeline-content-background: rgba(255, 255, 255, 0.06);
   --irc-border-color: #333;
   --irc-tab-current-shadow: 0px 0px 5px #000 inset;
   --irc-tab-close-button-color: #bbb;

public/themes/light/theme.css

@@ -306,6 +306,7 @@ pre, code, .codeblock {
   --forum-diff-insert-border-color: #5baa3f;
   --card-background: #e8e8e8;
   --card-background-hover: #f0f0f0;
+  --timeline-content-background: rgba(0, 0, 0, 0.2);
   --irc-border-color: #ddd;
   --irc-tab-current-shadow: 0px 0px 5px #bbb inset;
   --irc-tab-close-button-color: #fff;

src/parsing/parsing.go

@@ -4,6 +4,7 @@ import (
 	"bytes"
 
 	"github.com/yuin/goldmark/parser"
+	"github.com/yuin/goldmark/renderer/html"
 
 	"github.com/yuin/goldmark"
 	highlighting "github.com/yuin/goldmark-highlighting"
@@ -42,6 +43,7 @@ var DiscordMarkdown = makeGoldmark(
 		Previews: false,
 		Embeds:   false,
 	})...),
+	goldmark.WithRendererOptions(html.WithHardWraps()),
 )
 
 func ParseMarkdown(source string, md goldmark.Markdown) string {

src/rawdata/scss/_core.scss

@@ -337,10 +337,6 @@ article code {
 	height: 1.5rem;
 }
 
-.pre-line {
-	white-space: pre-line;
-}
-
 .fira {
   font-family: "Fira Sans", sans-serif;
 }

src/rawdata/scss/_timeline.scss

@@ -18,19 +18,23 @@
         }
     }
 
-    .timeline-content-box > * {
+    .timeline-content-box {
+        @include usevar(background-color, timeline-content-background);
+
+        > * {
             display: block;
             max-width: 100%;
             max-height: 80vh;
         }
     
-    .timeline-content-box.embed {
+        &.embed {
             @extend .aspect-ratio, .aspect-ratio--16x9;
     
             > iframe {
                 @extend .aspect-ratio--object;
             }
         }
+    }
 }
 
 .timeline-modal {

src/rawdata/scss/themes/dark/_variables.scss

@@ -99,6 +99,8 @@ $vars: (
   card-background: #282828,
   card-background-hover: #333,
 
+  timeline-content-background: rgba(255, 255, 255, 0.06),
+
   irc-border-color: #333,
   irc-tab-current-shadow: 0px 0px 5px #000 inset,
   irc-tab-close-button-color: #bbb,

src/rawdata/scss/themes/light/_variables.scss

@@ -99,6 +99,8 @@ $vars: (
   card-background: #e8e8e8,
   card-background-hover: #f0f0f0,
 
+  timeline-content-background: rgba(0, 0, 0, 0.2),
+
   irc-border-color: #ddd,
   irc-tab-current-shadow: 0px 0px 5px #bbb inset,
   irc-tab-close-button-color: #fff,

src/templates/src/include/showcase_templates.html

@@ -27,7 +27,7 @@
 				<a class="user" data-tmpl="userLink"></a>
 				<a data-tmpl="date" class="datetime tr" style="flex: 1 1 auto;"></a>
 			</div>
-			<div class="pre-line overflow-auto" data-tmpl="description">
+			<div class="overflow-auto" data-tmpl="description">
 				Unknown description
 			</div>
 			<div data-tmpl="projects" class="pt2 flex g2"></div>

src/templates/src/include/timeline_item.html

@@ -38,7 +38,7 @@
 
 	{{ if .Description }}
 		<div class="mt3 overflow-hidden relative {{ if .TruncateDescription }}mh-5{{ end }}">
-			<div class="post-content pre-line">{{ trim .Description }}</div>
+			<div class="post-content">{{ trim .Description }}</div>
 			{{ if .TruncateDescription }}
 				<div class="excerpt-fade absolute w-100 h4 bottom-0 z-999"></div>
 			{{ end }}
@@ -51,7 +51,7 @@
 	{{ end }}
 
 	{{ range .EmbedMedia }}
-		<div class="timeline-content-box mt3 {{ if eq .Type mediaembed }}embed{{ end }}">
+		<div class="timeline-content-box mt3 {{ if eq .Type mediaembed }}embed{{ end }} br2 overflow-hidden flex justify-center">
 			{{ if eq .Type mediaimage }}
 				<img src="{{ .AssetUrl }}">
 			{{ else if eq .Type mediavideo }}

src/templates/src/layouts/wheeljam_2022_base.html

@@ -55,6 +55,8 @@
             --theme-color-dim: {{ $themeDim }};
             --theme-color-dimmer: {{ $themeDimmer }};
             --theme-color-dimmest: {{ $themeDimmest }};
+
+            --timeline-content-background: rgba(255, 255, 255, 0.1);
         }
 
         body {

src/templates/src/wheeljam_2022_index.html

@@ -279,8 +279,8 @@
             <div class="{{ if and (eq .DaysUntilStart 0) (gt .DaysUntilEnd 1) }}emphasized{{ end }}">
                 <h3>Jam.</h3>
                 <p>
-                    {{ if eq .DaysUntilStart 0 }}
-                        <a href="{{ or .SubmittedProjectUrl .ProjectSubmissionUrl }}" target="_blank"><b>Create a Handmade Network project</b></a>
+                    {{ 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 }}