hmn
/
hmn
4
Fork 10
Code Issues 59 Pull Requests 1 Releases 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

136
public/style.css
View File

@ -7595,31 +7595,31 @@ article code {
margin-right: auto; margin-right: auto;
margin-left: auto; } margin-left: auto; }
header { header .menu-bar {
border-bottom: 2px solid #333; } width: 100%;
header .menu-bar { z-index: 10; }
width: 100%; header .menu-bar .hmdev-logo {
z-index: 10; } background-image: url("/public/logo_nounder.svg"); }
header .menu-bar .hmdev-logo { header .menu-bar .hmdev-logo.project {
background-image: url("/public/logo_nounder.svg"); } background-image: url("/public/logo_net.svg"); }
header .menu-bar .hmdev-logo .underscore { header .menu-bar .hmdev-logo .underscore {
background-image: url("/public/logo_underscore.svg"); } background-image: url("/public/logo_underscore.svg"); }
header .menu-bar .items a { header .menu-bar .items a {
font-weight: bold; } font-weight: bold; }
header .menu-bar .items a.patreon { header .menu-bar .items a.patreon {
float: right; float: right;
height: 30px; height: 30px;
padding-top: 18px; padding-top: 18px;
display: inline-block; } display: inline-block; }
header .menu-bar .items a h1 { header .menu-bar .items a h1 {
display: inline; } display: inline; }
header .menu-bar .hmdev-logo { header .menu-bar .hmdev-logo {
width: 100%; } width: 100%; }
@media screen and (min-width: 30em) { @media screen and (min-width: 30em) {
header .menu-bar .hmdev-logo { header .menu-bar .hmdev-logo {
width: 11.25rem; } } width: 11.25rem; } }
header .menu-bar .hmdev-logo.project { header .menu-bar .hmdev-logo.project {
width: 70px; } width: 70px; }
@keyframes logo-blink { @keyframes logo-blink {
from { from {
@ -7632,48 +7632,50 @@ header {
opacity: 0.0; } opacity: 0.0; }
to { to {
opacity: 1.0; } } opacity: 1.0; } }
header .menu-bar .logo { header .menu-bar .logo {
height: 3.75rem; height: 3.75rem;
background-color: #333; margin: 0px;
margin: 0px; padding: 0px; }
padding: 0px; } header .menu-bar .underscore {
header .menu-bar .underscore { width: 100%;
width: 100%; height: 100%;
height: 100%; animation: logo-blink 1s infinite alternate;
animation: logo-blink 1s infinite alternate; -webkit-animation: logo-blink 1s infinite alternate ease-in-out; }
-webkit-animation: logo-blink 1s infinite alternate ease-in-out; } header .menu-bar .logo, header .menu-bar .underscore {
header .menu-bar .logo, header .menu-bar .underscore { background-size: 8.75rem;
background-size: 8.75rem; background-repeat: no-repeat;
background-repeat: no-repeat; background-position: center center; }
background-position: center center; }
header .user-options { header .user-options {
position: relative; } position: relative; }
header .login, header .register {
text-align: center; } header .login, header .register {
header #login-popup { text-align: center; }
background-color: #fbfbfb;
background-color: var(--login-popup-background); header #login-popup {
color: black; background-color: #fbfbfb;
color: var(--fg-font-color); background-color: var(--login-popup-background);
border-width: 1px; color: black;
border-style: dashed; color: var(--fg-font-color);
visibility: hidden; border-width: 1px;
position: absolute; border-style: dashed;
z-index: 12; visibility: hidden;
margin-top: 10px; position: absolute;
right: 0px; z-index: 12;
top: 20px; margin-top: 10px;
width: 290px; right: 0px;
max-height: 0px; top: 20px;
overflow: hidden; width: 290px;
opacity: 0; max-height: 0px;
transition: all 0.2s; } overflow: hidden;
header #login-popup.open { opacity: 0;
max-height: 170px; transition: all 0.2s; }
opacity: 1; header #login-popup.open {
visibility: visible; } max-height: 170px;
header #login-popup label { opacity: 1;
padding-right: 10px; } visibility: visible; }
header #login-popup label {
padding-right: 10px; }
@media screen and (min-width: 30em) { @media screen and (min-width: 30em) {
footer .list li:not(:last-child)::after { footer .list li:not(:last-child)::after {

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 { header {
border-bottom: 2px solid #333;
.menu-bar { .menu-bar {
width: 100%; width: 100%;
z-index: 10; z-index: 10;
@ -445,6 +443,10 @@ header {
.hmdev-logo { .hmdev-logo {
background-image: url("/public/logo_nounder.svg"); background-image: url("/public/logo_nounder.svg");
&.project {
background-image:url("/public/logo_net.svg");
}
.underscore { .underscore {
background-image: url("/public/logo_underscore.svg"); background-image: url("/public/logo_underscore.svg");
} }
@ -511,7 +513,6 @@ header {
.logo { .logo {
height: px2rem(60px); height: px2rem(60px);
background-color: #333;
margin: 0px; margin: 0px;
padding: 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"> <div class="user-options flex justify-center justify-end-ns">
{{ if .User }} {{ if .User }}
{{ if .User.IsStaff }} {{ if .User.IsStaff }}
@ -33,7 +33,7 @@
</div> </div>
<div class="menu-bar flex flex-column flex-row-l justify-between {{ if .IsProjectPage }}project{{ end }}"> <div class="menu-bar flex flex-column flex-row-l justify-between {{ if .IsProjectPage }}project{{ end }}">
<div class="flex flex-column flex-row-ns"> <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> <div class="underscore"></div>
</a> </a>
<div class="items flex items-center justify-center justify-start-ns"> <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" . }} {{ template "base.html" . }}
{{ define "extrahead" }} {{ 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"> <style type="text/css">
{{ $base := . }} {{ $base := . }}
{{ range $col := .PostColumns }} {{ range $col := .PostColumns }}

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

@ -1,8 +1,13 @@
{{ $c := hex2color .Color }} {{ $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 }} {{ $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 }} {{ $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 }} {{ $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 }} {{ $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 }} {{ $linkHoverColor := eq .Theme "dark" | ternary (lightness 0.65 $c) (lightness 0.45 $c) | color2css }}
@ -12,8 +17,12 @@
--theme-color-dimmer: {{ $themeDimmer }}; --theme-color-dimmer: {{ $themeDimmer }};
--theme-color-dimmest: {{ $themeDimmest }}; --theme-color-dimmest: {{ $themeDimmest }};
--theme-color-dark: {{ $themeDark }};
--link-color: {{ $linkColor }}; --link-color: {{ $linkColor }};
--link-color-hover: {{ $linkHoverColor }}; --link-hover-color: {{ $linkHoverColor }};
--input-lite-border: {{ $linkColor }};
} }
.accent { .accent {
@ -46,54 +55,55 @@ a:hover, button:hover, .button:hover, input[type=button]:hover, input[type=submi
background-color: {{ .PostBgColor }}; 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 { :root {
--background-even-background: {{ .PostBgColor }}; --background-even-background: {{ .PostBgColor }};
@ -101,10 +111,6 @@ all of this CSS.
/* Assets */ /* Assets */
header .menu-bar .hmdev-logo.project {
background-image:url("{{ static "logo_net.svg" }}");
}
.half.light { .half.light {
background-image:url("{{ statictheme "light" "accent_top_a.svg" }}"); background-image:url("{{ statictheme "light" "accent_top_a.svg" }}");
} }