Fix up remaining project colors

public/style.css

@@ -7595,13 +7595,13 @@ article code {
   margin-right: auto;
   margin-left: auto; }
 
-header {
+header .menu-bar {
-  border-bottom: 2px solid #333; }
-  header .menu-bar {
   width: 100%;
   z-index: 10; }
   header .menu-bar .hmdev-logo {
     background-image: url("/public/logo_nounder.svg"); }
+    header .menu-bar .hmdev-logo.project {
+      background-image: url("/public/logo_net.svg"); }
     header .menu-bar .hmdev-logo .underscore {
       background-image: url("/public/logo_underscore.svg"); }
   header .menu-bar .items a {
@@ -7634,7 +7634,6 @@ header {
     opacity: 1.0; } }
   header .menu-bar .logo {
     height: 3.75rem;
-      background-color: #333;
     margin: 0px;
     padding: 0px; }
   header .menu-bar .underscore {
@@ -7646,11 +7645,14 @@ header {
     background-size: 8.75rem;
     background-repeat: no-repeat;
     background-position: center center; }
-  header .user-options {
+
+header .user-options {
   position: relative; }
-  header .login, header .register {
+
+header .login, header .register {
   text-align: center; }
-  header #login-popup {
+
+header #login-popup {
   background-color: #fbfbfb;
   background-color: var(--login-popup-background);
   color: black;

src/migration/migrations/2021-08-28T121228Z_ChangeHMNColors.go

@@ -0,0 +1,52 @@
+package migrations
+
+import (
+	"context"
+	"time"
+
+	"git.handmade.network/hmn/hmn/src/migration/types"
+	"git.handmade.network/hmn/hmn/src/oops"
+	"github.com/jackc/pgx/v4"
+)
+
+func init() {
+	registerMigration(ChangeHMNColors{})
+}
+
+type ChangeHMNColors struct{}
+
+func (m ChangeHMNColors) Version() types.MigrationVersion {
+	return types.MigrationVersion(time.Date(2021, 8, 28, 12, 12, 28, 0, time.UTC))
+}
+
+func (m ChangeHMNColors) Name() string {
+	return "ChangeHMNColors"
+}
+
+func (m ChangeHMNColors) Description() string {
+	return "Change the colors for the HMN project"
+}
+
+func (m ChangeHMNColors) Up(ctx context.Context, tx pgx.Tx) error {
+	tag, err := tx.Exec(ctx, `
+		UPDATE handmade_project
+		SET
+			color_1 = 'ab4c47',
+			color_2 = 'a5467d'
+		WHERE
+			slug = 'hmn'
+	`)
+	if err != nil {
+		return oops.New(err, "failed to update HMN colors")
+	}
+
+	if tag.RowsAffected() != 1 {
+		return oops.New(nil, "was supposed to update only HMN, but updated %d projects instead", tag.RowsAffected())
+	}
+
+	return nil
+}
+
+func (m ChangeHMNColors) Down(ctx context.Context, tx pgx.Tx) error {
+	panic("Implement me")
+}

src/rawdata/scss/_core.scss

@@ -436,8 +436,6 @@ article code {
 }
 
 header {
-  border-bottom: 2px solid #333;
-
   .menu-bar {
     width: 100%;
     z-index: 10;
@@ -445,6 +443,10 @@ header {
     .hmdev-logo {
       background-image: url("/public/logo_nounder.svg");
 
+      &.project {
+        background-image:url("/public/logo_net.svg");
+      }
+
       .underscore {
         background-image: url("/public/logo_underscore.svg");
       }
@@ -511,7 +513,6 @@ header {
 
     .logo {
       height: px2rem(60px);
-      background-color: #333;
       margin: 0px;
       padding: 0px;
     }

src/templates/src/include/header.html

@@ -1,4 +1,4 @@
-<header class="mb3">
+<header class="mb3 bb bw1 b--theme-dark">
     <div class="user-options flex justify-center justify-end-ns">
         {{ if .User }}
             {{ if .User.IsStaff }}
@@ -33,7 +33,7 @@
     </div>
 	<div class="menu-bar flex flex-column flex-row-l justify-between {{ if .IsProjectPage }}project{{ end }}">
         <div class="flex flex-column flex-row-ns">
-            <a href="{{ .Header.HMNHomepageUrl }}" class="logo hmdev-logo">
+            <a href="{{ .Header.HMNHomepageUrl }}" class="logo hmdev-logo bg-theme-dark">
                 <div class="underscore"></div>
             </a>
             <div class="items flex items-center justify-center justify-start-ns">

src/templates/src/landing.html

@@ -1,8 +1,6 @@
 {{ template "base.html" . }}
 
 {{ define "extrahead" }}
-<link rel="stylesheet" type="text/css" href="{{ static "landing.css" }}"/>
-<script type="text/javascript" src="{{ static "util.js" }}"></script>
 <style type="text/css">
     {{ $base := . }}
     {{ range $col := .PostColumns }}

src/templates/src/project.css

@@ -1,8 +1,13 @@
 {{ $c := hex2color .Color }}
+
+{{/* Theme "dim" colors tend more toward the background value (lighter or darker) */}}
 {{ $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 }}
 
+{{/* Theme "dark" colors are always darker in value, regardless of light or dark theme. */}}
+{{ $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 }}
 
@@ -12,8 +17,12 @@
     --theme-color-dimmer: {{ $themeDimmer }};
     --theme-color-dimmest: {{ $themeDimmest }};
 
+    --theme-color-dark: {{ $themeDark }};
+
     --link-color: {{ $linkColor }};
-    --link-color-hover: {{ $linkHoverColor }};
+    --link-hover-color: {{ $linkHoverColor }};
+
+    --input-lite-border: {{ $linkColor }};
 }
 
 .accent {
@@ -46,54 +55,55 @@ a:hover, button:hover, .button:hover, input[type=button]:hover, input[type=submi
     background-color: {{ .PostBgColor }};
 }
 
-/*
+.bg-theme {
-TODO: Manually apply sensible tachyons classes to the elements styled below, then delete
+    background-color: {{ $c | color2css }};
-all of this CSS.
+    background-color: var(--theme-color);
-*/
+}
 
-/* {% if theme == "dark" %}
+.bg-theme-dim {
-    #search_form_input_homepage { color: #{% rgb_accent accent 0.65 %}; }
+    background-color: {{ $themeDim }};
-    #search_form_input_homepage::-webkit-input-placeholder { color: #{% rgb_accent accent 0.65 %}; }
+    background-color: var(--theme-color-dim);
-    #search_form_input_homepage:-moz-placeholder { color: #{% rgb_accent accent 0.65 %}; }
+}
-    #search_form_input_homepage::-moz-placeholder { color: #{% rgb_accent accent 0.65 %}; }
-    #search_form_input_homepage:-ms-input-placeholder { color: #{% rgb_accent accent 0.65 %}; }
-{% else %}
-    #search_form_input_homepage { color: #{% rgb_accent accent 0.25 %}; }
-    #search_form_input_homepage::-webkit-input-placeholder { color: #{% rgb_accent accent 0.25 %}; }
-    #search_form_input_homepage:-moz-placeholder { color: #{% rgb_accent accent 0.25 %}; }
-    #search_form_input_homepage::-moz-placeholder { color: #{% rgb_accent accent 0.25 %}; }
-    #search_form_input_homepage:-ms-input-placeholder { color: #{% rgb_accent accent 0.25 %}; }
-{% endif %} */
 
-/* {% if theme == "dark" %}
+.bg-theme-dimmer {
-    header .menu-bar .logo { background-color: #{% rgb_accent accent 0.23 %}; }
+    background-color: {{ $themeDimmer }};
-    header .menu-bar .logo:hover { background-color: #{% rgb_accent accent 0.27 %}; }
+    background-color: var(--theme-color-dimmer);
-    header { border-bottom-color:#{% rgb_accent accent 0.33 %}; }
+}
-    .post .action.button { border-bottom-color:#{% rgb_accent accent 0.33 %}; }
-    :root {
-        --input-lite-border: #{% rgb_accent accent 0.33 %};
-    }
 
-    header #unfold-btn-fx { background-color: #{% rgb_accent accent 0.23 %}; }
+.bg-theme-dimmest {
-    header #unfold-btn-fx:hover { background-color: #{% rgb_accent accent 0.21 %}; }
+    background-color: {{ $themeDimmest }};
+    background-color: var(--theme-color-dimmest);
+}
 
-    .forum .thread:nth-of-type(odd) { background-color:#{% rgb_accent accent 0.14 False 0.03%}; }
+.bg-theme-dark {
-    .blog .post:nth-of-type(even) { background-color:#{% rgb_accent accent 0.14 False 0.03 %}; }
+    background-color: {{ $themeDark }};
-{% else %}
+    background-color: var(--theme-color-dark);
-    header .menu-bar .logo { background-color: #{% rgb_accent accent 0.25 True %}; }
+}
-    header .menu-bar .logo:hover { background-color: #{% rgb_accent accent 0.28 True %}; }
-    header { border-bottom-color:#{% rgb_accent accent 0.18 %}; }
-    .post .action.button { border-bottom-color:#{% rgb_accent accent 0.25 True %}; }
-    :root {
-        --input-lite-border: #{% rgb_accent accent 0.25 True %};
-    }
 
-    header #unfold-btn-fx { background-color: #{% rgb_accent accent 0.20 %}; }
+.b--theme {
-    header #unfold-btn-fx:hover { background-color: #{% rgb_accent accent 0.16 %}; }
+    border-color: {{ $c | color2css }};
+    border-color: var(--theme-color);
+}
 
-    .forum .thread:nth-of-type(odd) { background-color:#{% rgb_accent accent 0.94 False 0.2 %}; }
+.b--theme-dim {
-    .blog .post:nth-of-type(even) { background-color:#{% rgb_accent accent 0.94 False 0.2 %}; }
+    border-color: {{ $themeDim }};
-{% endif %} */
+    border-color: var(--theme-color-dim);
+}
+
+.b--theme-dimmer {
+    border-color: {{ $themeDimmer }};
+    border-color: var(--theme-color-dimmer);
+}
+
+.b--theme-dimmest {
+    border-color: {{ $themeDimmest }};
+    border-color: var(--theme-color-dimmest);
+}
+
+.b--theme-dark {
+    border-color: {{ $themeDark }};
+    border-color: var(--theme-color-dark);
+}
 
 :root {
     --background-even-background: {{ .PostBgColor }};
@@ -101,10 +111,6 @@ all of this CSS.
 
 /* Assets */
 
-header .menu-bar .hmdev-logo.project {
-    background-image:url("{{ static "logo_net.svg" }}");
-}
-
 .half.light {
     background-image:url("{{ statictheme "light" "accent_top_a.svg" }}");
 }