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