Man whatever

public/style.css

@@ -7162,17 +7162,17 @@ code {
   --dim-color: #333;
   --dimmer-color: #999;
   --dimmest-color: #bbb;
-  --theme-color: #666;
+  --theme-color: #b1b1b1;
-  --theme-color-dim: #aaa;
+  --theme-color-dim: #c0c0c0;
-  --theme-color-dimmer: #bbb;
+  --theme-color-dimmer: #dddddd;
-  --theme-color-dimmest: #ccc;
+  --theme-color-dimmest: #f0f0f0;
   --theme-color-dark: #666;
   --theme-color-light: #666;
   --main-background-color: #f8f8f8;
   --main-background-color-transparent: rgba(#f8f8f8, 0);
-  --card-background: #494949;
+  --card-background: #ebebeb;
-  --card-background-hover: #333;
+  --card-background-hover: #f1f1f1;
-  --card-background-transparent: #242424D8;
+  --card-background-transparent: #ebebeb00;
   --bg-1: #f8f8f8;
   --bg-2: #e8e8e8;
   --bg-3: #d8d8d8;
@@ -7213,7 +7213,7 @@ code {
     --main-background-color-transparent: rgba(#202020, 0);
     --card-background: #494949;
     --card-background-hover: #333;
-    --card-background-transparent: #242424D8;
+    --card-background-transparent: #24242400;
     --bg-1: #1f1f1f;
     --bg-2: #2f2f2f;
     --bg-3: #494949;

src/rawdata/scss/vars.css

@@ -19,10 +19,10 @@ $breakpoint-large: screen and (min-width: 60em)
     --dimmest-color: #bbb;
 
     /* Default theme colors in case the project.css is busted */
-    --theme-color: #666;
+    --theme-color: #b1b1b1;
-    --theme-color-dim: #aaa;
+    --theme-color-dim: #c0c0c0;
-    --theme-color-dimmer: #bbb;
+    --theme-color-dimmer: #dddddd;
-    --theme-color-dimmest: #ccc;
+    --theme-color-dimmest: #f0f0f0;
 
     --theme-color-dark: #666;
     --theme-color-light: #666;
@@ -30,9 +30,9 @@ $breakpoint-large: screen and (min-width: 60em)
     --main-background-color: #f8f8f8;
     --main-background-color-transparent: rgba(#f8f8f8, 0);
 
-    --card-background: #494949;
+    --card-background: #ebebeb;
-    --card-background-hover: #333;
+    --card-background-hover: #f1f1f1;
-    --card-background-transparent: #242424D8;
+    --card-background-transparent: #ebebeb00;
 
     --bg-1: #f8f8f8;
     --bg-2: #e8e8e8;
@@ -89,7 +89,7 @@ $breakpoint-large: screen and (min-width: 60em)
         /* --card-background: #282828; */
         --card-background: #494949;
         --card-background-hover: #333;
-        --card-background-transparent: #242424D8;
+        --card-background-transparent: #24242400;
 
         --bg-1: #1f1f1f;
         --bg-2: #2f2f2f;

src/templates/src/include/timeline_item.html

@@ -3,7 +3,7 @@
 	<div class="flex items-center">
 		{{ if .OwnerAvatarUrl }}
 			<a class="flex flex-shrink-0" href="{{ .OwnerUrl }}">
-				<img class="avatar avatar-user {{ if not .SmallInfo }}big{{ end }} {{ if .SmallInfo }}mr2{{ else }}mr3{{ end }}" src="{{ .OwnerAvatarUrl }}" />
+				<img class="avatar avatar-user {{ if .SmallInfo }}avatar-small mr2{{ else }}mr3{{ end }}" src="{{ .OwnerAvatarUrl }}" />
 			</a>
 		{{ end }}
 
@@ -37,7 +37,7 @@
 	{{/* content */}}
 
 	{{ range .EmbedMedia }}
-		<div class="timeline-content-box mt3 {{ if eq .Type mediaembed }}embed{{ end }} br2 overflow-hidden flex {{ if not (eq .Type mediaunknown) }}timeline-item-bg justify-center{{ end }}">
+		<div class="timeline-content-box mt3 {{ if eq .Type mediaembed }}embed{{ end }} overflow-hidden flex {{ if not (eq .Type mediaunknown) }}timeline-item-bg justify-center{{ end }}">
 			{{ if eq .Type mediaimage }}
 				<img src="{{ .AssetUrl }}">
 			{{ else if eq .Type mediavideo }}
@@ -51,7 +51,7 @@
 			{{ else if eq .Type mediaembed }}
 				{{ .EmbedHTML }}
 			{{ else }}
-				<div class="project-card br2 pv1 ph2">
+				<div class="project-card pv1 ph2">
 					<a href="{{ .AssetUrl }}" target="_blank">{{ .Filename }} ({{ filesize .FileSize }})</a>
 				</div>
 			{{ end }}
@@ -75,7 +75,7 @@
 	{{ with .Projects }}
 		<div class="mt3 flex g2 projects">
 			{{ range $i, $proj := . }}
-				<a data-projid="{{ $proj.ID }}" href="{{ $proj.Url }}" class="snippet-project flex flex-row items-center bg-theme-dimmer ph2 pv1 br2">
+				<a data-projid="{{ $proj.ID }}" href="{{ $proj.Url }}" class="snippet-project flex flex-row items-center bg-theme-dimmer ph2 pv1">
 					<img src="{{ $proj.Logo }}" class="db mr1 br1 h1-5" />
 					<div>{{ $proj.Name }}</div>
 				</a>

src/templates/src/style_test.html

@@ -210,5 +210,11 @@ int main() {
         </div>
     </div>
 
-    <div class="h5"></div>
+    <h1 class="mt3 mb2">Timeline items</h1>
+
+    <div class="hmn-form pa3 ba b--theme-dim flex flex-column g3">
+        {{ range .TestTimelineItems }}
+            {{ template "timeline_item.html" . }}
+        {{ end }}
+    </div>
 </body>

src/templates/types.go

@@ -337,8 +337,7 @@ type TimelineItem struct {
 	Description    template.HTML
 	RawDescription string
 
-	PreviewMedia TimelineItemMedia
+	EmbedMedia []TimelineItemMedia
-	EmbedMedia   []TimelineItemMedia
 
 	SmallInfo           bool
 	AllowTitleWrap      bool

src/website/debug.go

@@ -1,7 +1,111 @@
 package website
 
+import (
+	"time"
+
+	"git.handmade.network/hmn/hmn/src/templates"
+)
+
 func StyleTest(c *RequestContext) ResponseData {
+	type tmpl struct {
+		TestTimelineItems []templates.TimelineItem
+	}
+
 	var res ResponseData
-	res.MustWriteTemplate("style_test.html", nil, c.Perf)
+	res.MustWriteTemplate("style_test.html", tmpl{
+		TestTimelineItems: []templates.TimelineItem{
+			// Forum post
+			{
+				OwnerName:      "Cool User",
+				OwnerAvatarUrl: templates.UserAvatarDefaultUrl("dark"),
+				Date:           time.Now().Add(-5 * time.Second),
+				Breadcrumbs: []templates.Breadcrumb{
+					{Name: "Project"},
+					{Name: "Forums"},
+					{Name: "Subforum"},
+				},
+				TypeTitle: "New forum post",
+				Title:     "How can I a website?",
+			},
+			// Blog post
+			// Snippet
+			{
+				SmallInfo:         true,
+				OwnerName:         "Cool User",
+				OwnerAvatarUrl:    templates.UserAvatarDefaultUrl("dark"),
+				Date:              time.Date(2022, 3, 20, 13, 32, 54, 0, time.UTC),
+				Url:               "test",
+				DiscordMessageUrl: "test",
+				EmbedMedia: []templates.TimelineItemMedia{
+					{
+						Type:     templates.TimelineItemMediaTypeImage,
+						AssetUrl: "https://assets.media.handmade.network/32ff3e7e-1d9c-4740-a062-1f8bec2e44cf/unknown.png",
+					},
+				},
+			},
+			// Snippet with embed
+			{
+				SmallInfo:         true,
+				OwnerName:         "Cool User",
+				OwnerAvatarUrl:    templates.UserAvatarDefaultUrl("dark"),
+				Date:              time.Date(2021, 4, 3, 1, 44, 54, 0, time.UTC),
+				Url:               "test",
+				DiscordMessageUrl: "test",
+				EmbedMedia: []templates.TimelineItemMedia{
+					youtubeMediaItem("FN9hZcTB16g"),
+				},
+				Projects: []templates.Project{
+					{Name: "Cool Project", Logo: templates.UserAvatarDefaultUrl("light")},
+				},
+			},
+			// Snippet with two images & multiple projects
+			{
+				SmallInfo:         true,
+				OwnerName:         "Cool User",
+				OwnerAvatarUrl:    templates.UserAvatarDefaultUrl("dark"),
+				Date:              time.Now().Add(-2 * 24 * time.Hour),
+				Url:               "test",
+				DiscordMessageUrl: "test",
+				EmbedMedia: []templates.TimelineItemMedia{
+					{
+						Type:     templates.TimelineItemMediaTypeImage,
+						AssetUrl: "https://assets.media.handmade.network/979d8850-f6b6-44b4-984e-93be82eb492b/PBR_WIP_20240620_01.png",
+					},
+					{
+						Type:     templates.TimelineItemMediaTypeImage,
+						AssetUrl: "https://assets.media.handmade.network/4cd4335d-c977-464b-994c-bda5a9b44b09/PBR_WIP_20240619_01.png",
+					},
+				},
+				Projects: []templates.Project{
+					{Name: "Cool Project", Logo: templates.UserAvatarDefaultUrl("light")},
+					{Name: "Uncool Project"},
+				},
+			},
+			// Snippet with a video and an image
+			{
+				SmallInfo:         true,
+				OwnerName:         "Cool User",
+				OwnerAvatarUrl:    templates.UserAvatarDefaultUrl("dark"),
+				Date:              time.Now().Add(-2 * time.Hour),
+				Url:               "test",
+				DiscordMessageUrl: "test",
+				EmbedMedia: []templates.TimelineItemMedia{
+					{
+						Type:     templates.TimelineItemMediaTypeImage,
+						AssetUrl: "https://assets.media.handmade.network/979d8850-f6b6-44b4-984e-93be82eb492b/PBR_WIP_20240620_01.png",
+					},
+					{
+						Type:     templates.TimelineItemMediaTypeImage,
+						AssetUrl: "https://assets.media.handmade.network/4cd4335d-c977-464b-994c-bda5a9b44b09/PBR_WIP_20240619_01.png",
+					},
+				},
+				Projects: []templates.Project{
+					{Name: "Cool Project", Logo: templates.UserAvatarDefaultUrl("light")},
+					{Name: "Uncool Project"},
+				},
+			},
+			// Snippet with every type of embed at once
+		},
+	}, c.Perf)
 	return res
 }