From 9f88ce1223680f952fea8135d62baecbb190888e Mon Sep 17 00:00:00 2001
From: Ben Visness <bvisness@gmail.com>
Date: Sat, 6 Aug 2022 23:12:23 -0500
Subject: [PATCH] something something colors

---
 .../src/include/showcase_templates.html       |  2 +-
 src/templates/src/include/snippet_edit.html   |  2 +-
 src/templates/src/include/timeline_item.html  |  2 +-
 .../src/layouts/wheeljam_2022_base.html       | 43 +++++++++++++++++++
 src/templates/src/wheeljam_2022_feed.html     |  5 +++
 5 files changed, 51 insertions(+), 3 deletions(-)

diff --git a/src/templates/src/include/showcase_templates.html b/src/templates/src/include/showcase_templates.html
index 2730fea..d63affa 100644
--- a/src/templates/src/include/showcase_templates.html
+++ b/src/templates/src/include/showcase_templates.html
@@ -41,7 +41,7 @@
 </template>
 
 <template id="project_link">
-<a data-tmpl="root" class="flex flex-row items-center bg-theme-dimmer ph2 pv1 br2">
+<a data-tmpl="root" class="snippet-project flex flex-row items-center bg-theme-dimmer ph2 pv1 br2">
 	<img data-tmpl="logo" class="db mr1 br1 h1-5" />
 	<div data-tmpl="name"></div>
 </a>
diff --git a/src/templates/src/include/snippet_edit.html b/src/templates/src/include/snippet_edit.html
index 1292af1..6c18c26 100644
--- a/src/templates/src/include/snippet_edit.html
+++ b/src/templates/src/include/snippet_edit.html
@@ -57,7 +57,7 @@
 		<input data-tmpl="projectId" type="hidden" name="project_id" />
 		<img data-tmpl="projectLogo" class="db mr1 br1 h1-5"/>
 		<div data-tmpl="projectName"></div>
-		<a data-tmpl="removeButton" class="ml1" href="javascript:;">&#10006;</a>
+		<a data-tmpl="removeButton" class="ml2 mr1" href="javascript:;">&#10006;</a>
 	</div>
 </template>
 <script>
diff --git a/src/templates/src/include/timeline_item.html b/src/templates/src/include/timeline_item.html
index c0d0cde..cad2fc9 100644
--- a/src/templates/src/include/timeline_item.html
+++ b/src/templates/src/include/timeline_item.html
@@ -71,7 +71,7 @@
 	{{ with .Projects }}
 		<div class="mt3 flex g2 projects">
 			{{ range $i, $proj := . }}
-				<a data-projid="{{ $proj.ID }}" href="{{ $proj.Url }}" class="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 br2">
 					<img src="{{ $proj.Logo }}" class="db mr1 br1 h1-5" />
 					<div>{{ $proj.Name }}</div>
 				</a>
diff --git a/src/templates/src/layouts/wheeljam_2022_base.html b/src/templates/src/layouts/wheeljam_2022_base.html
index 8b7bd26..1e8c55e 100644
--- a/src/templates/src/layouts/wheeljam_2022_base.html
+++ b/src/templates/src/layouts/wheeljam_2022_base.html
@@ -34,10 +34,27 @@
     <link rel="stylesheet" type="text/css" href="{{ static "style.css" }}">
 
     <style>
+        /* Copy-paste from project.css yay */
+        {{ $c := hex2color "346ba6" }}
+
+        {{ $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 }};
         }
 
         body {
@@ -288,6 +305,32 @@
         .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>
diff --git a/src/templates/src/wheeljam_2022_feed.html b/src/templates/src/wheeljam_2022_feed.html
index 59dfd69..72e96af 100644
--- a/src/templates/src/wheeljam_2022_feed.html
+++ b/src/templates/src/wheeljam_2022_feed.html
@@ -2,6 +2,11 @@
 
 {{ define "content" }}
     <style>
+        :root {
+            --theme-color: white;
+            --theme-color-dimmer: rgba(255, 255, 255, 0.1);
+        }
+
         #title {
             margin-top: 0;
         }