nick12
/
hmn
forked from hmn/hmn
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix up remaining project colors

This commit is contained in:
Ben Visness 2021-08-28 07:14:49 -05:00
parent 73a20a9a93
commit a655fe96bc
6 changed files with 180 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
public/style.css
View File

@ -7595,13 +7595,13 @@ article code {
margin-right: auto;
margin-left: auto; }
header {
border-bottom: 2px solid #333; }
header .menu-bar {
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;

52
src/migration/migrations/2021-08-28T121228Z_ChangeHMNColors.go Normal file
View File

@ -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")
}

7
src/rawdata/scss/_core.scss
View File

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

4
src/templates/src/include/header.html
View File

@ -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">

2
src/templates/src/landing.html
View File

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

100
src/templates/src/project.css
View File

@ -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 }};
}
/*
TODO: Manually apply sensible tachyons classes to the elements styled below, then delete
all of this CSS.
*/
.bg-theme {
background-color: {{ $c | color2css }};
background-color: var(--theme-color);
}
/* {% if theme == "dark" %}
#search_form_input_homepage { color: #{% rgb_accent accent 0.65 %}; }
#search_form_input_homepage::-webkit-input-placeholder { color: #{% rgb_accent accent 0.65 %}; }
#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 %} */
.bg-theme-dim {
background-color: {{ $themeDim }};
background-color: var(--theme-color-dim);
}
/* {% if theme == "dark" %}
header .menu-bar .logo { background-color: #{% rgb_accent accent 0.23 %}; }
header .menu-bar .logo:hover { background-color: #{% rgb_accent accent 0.27 %}; }
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 %};
}
.bg-theme-dimmer {
background-color: {{ $themeDimmer }};
background-color: var(--theme-color-dimmer);
}
header #unfold-btn-fx { background-color: #{% rgb_accent accent 0.23 %}; }
header #unfold-btn-fx:hover { background-color: #{% rgb_accent accent 0.21 %}; }
.bg-theme-dimmest {
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%}; }
.blog .post:nth-of-type(even) { background-color:#{% rgb_accent accent 0.14 False 0.03 %}; }
{% else %}
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 %};
}
.bg-theme-dark {
background-color: {{ $themeDark }};
background-color: var(--theme-color-dark);
}
header #unfold-btn-fx { background-color: #{% rgb_accent accent 0.20 %}; }
header #unfold-btn-fx:hover { background-color: #{% rgb_accent accent 0.16 %}; }
.b--theme {
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 %}; }
.blog .post:nth-of-type(even) { background-color:#{% rgb_accent accent 0.94 False 0.2 %}; }
{% endif %} */
.b--theme-dim {
border-color: {{ $themeDim }};
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" }}");
}