something something colors

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>

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>

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>

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>

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;
         }