nonshy/website
nonshy/website
1
0
Fork 0
Code Issues 21 Pull Requests 1 Packages Projects Releases Wiki Activity

Iterate on color themes + Forum style fixes

Browse Source 
* Move the forum box colors into dedicated styles that are easier to
  override for the new theme colors.
* Updated the themes so forums and comment thread background cards now
  match your chosen style.
* Add yellow and orange theme variants.
This commit is contained in:
Noah Petherbridge 2024-11-24 13:22:28 -08:00
parent 391667a94c
commit d8593d89c0
30 changed files with 656 additions and 288 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
pkg/config/enum.go
View File

@ -83,7 +83,10 @@ var (
}
// Website theme color hue choices.
WebsiteThemeHueChoices = []Option{
WebsiteThemeHueChoices = []OptGroup{
{
Header: "Custom Themes",
Options: []Option{
{
Label: "Default (no added color; classic nonshy theme)",
Value: "",
@ -92,6 +95,31 @@ var (
Label: "nonshy blue & pink",
Value: "blue-pink",
},
},
},
{
Header: "Just a Splash of Color",
Options: []Option{
{
Label: "Burnt red",
Value: "red",
},
{
Label: "Harvest orange",
Value: "orange",
},
{
Label: "Golden yellow",
Value: "yellow",
},
{
Label: "Leafy green",
Value: "green",
},
{
Label: "Cool blue",
Value: "blue",
},
{
Label: "Pretty in pink",
Value: "pink",
@ -100,17 +128,7 @@ var (
Label: "Royal purple",
Value: "purple",
},
{
Label: "Cool blue",
Value: "blue",
},
{
Label: "Burnt red",
Value: "red",
},
{
Label: "Leafy green",
Value: "green",
},
}

4
pkg/controller/account/settings.go
View File

@ -196,11 +196,11 @@ func Settings() http.HandlerFunc {
// Website theme color: constrain to available options.
for _, field := range []struct {
Name string
Options []config.Option
Options []config.OptGroup
}{
{"website-theme-hue", config.WebsiteThemeHueChoices},
} {
value := utility.StringInOptions(
value := utility.StringInOptGroup(
r.PostFormValue(field.Name),
field.Options,
"",

14
pkg/utility/enum.go
View File

@ -13,3 +13,17 @@ func StringInOptions(v string, options []config.Option, orDefault string) string
}
return orDefault
}
// StringInOptGroup constrains a string value (posted by the user) to only be one
// of the available values in the Option list enum. Returns the string if OK, or
// else the default string.
func StringInOptGroup(v string, options []config.OptGroup, orDefault string) string {
for _, group := range options {
for _, option := range group.Options {
if v == option.Value {
return v
}
}
}
return orDefault
}

16
web/static/css/dark-theme.css
View File

@ -78,3 +78,19 @@ a.has-text-dark:hover {
background-color: #550;
color: #FFC;
}
/*
* Forum Color overrides for dark theme.
*/
.nonshy-forum-box-1 {
/* Outermost box: Forum or Thread top-level wrappers */
background-color: #163b27;
}
.nonshy-forum-box-2 {
/* Nested box: "Latest Post" on Forum-level views */
background-color: #144225;
}
.nonshy-forum-box-3 {
/* Nested box: Topics/Posts/Users/View counters */
background-color: #2c2812;
}

15
web/static/css/theme-blue-dark.css Normal file
View File

@ -0,0 +1,15 @@
/*
* Forum Color overrides for dark theme.
*/
.nonshy-forum-box-1 {
/* Outermost box: Forum or Thread top-level wrappers */
background-color: #18163b;
}
.nonshy-forum-box-2 {
/* Nested box: "Latest Post" on Forum-level views */
background-color: #142842;
}
.nonshy-forum-box-3 {
/* Nested box: Topics/Posts/Users/View counters */
background-color: #17122c;
}

15
web/static/css/theme-blue-pink-dark.css Normal file
View File

@ -0,0 +1,15 @@
/*
* Forum Color overrides for dark theme.
*/
.nonshy-forum-box-1 {
/* Outermost box: Forum or Thread top-level wrappers */
background-color: #3b1638;
}
.nonshy-forum-box-2 {
/* Nested box: "Latest Post" on Forum-level views */
background-color: #42143e;
}
.nonshy-forum-box-3 {
/* Nested box: Topics/Posts/Users/View counters */
background-color: #1e122c;
}

17
web/static/css/theme-blue-pink.css
View File

@ -6,3 +6,20 @@
--bulma-scheme-h: 299;
--bulma-scheme-s: 22%;
}
/*
* Forum Colors: with all the nested boxes, Bulma's default color scheme is
* too limited for a good experience.
*/
.nonshy-forum-box-1 {
/* Outermost box: Forum or Thread top-level wrappers */
background-color: #fbd1ff;
}
.nonshy-forum-box-2 {
/* Nested box: "Latest Post" on Forum-level views */
background-color: #ddd0f1;
}
.nonshy-forum-box-3 {
/* Nested box: Topics/Posts/Users/View counters */
background-color: #e7c2ff;
}

17
web/static/css/theme-blue.css
View File

@ -5,3 +5,20 @@
--bulma-link-l: 34%;
--bulma-scheme-h: 173;
}
/*
* Forum Colors: with all the nested boxes, Bulma's default color scheme is
* too limited for a good experience.
*/
.nonshy-forum-box-1 {
/* Outermost box: Forum or Thread top-level wrappers */
background-color: #d1f0ff;
}
.nonshy-forum-box-2 {
/* Nested box: "Latest Post" on Forum-level views */
background-color: #d6d9ff;
}
.nonshy-forum-box-3 {
/* Nested box: Topics/Posts/Users/View counters */
background-color: #c2d2ff;
}

15
web/static/css/theme-green-dark.css Normal file
View File

@ -0,0 +1,15 @@
/*
* Forum Color overrides for dark theme.
*/
.nonshy-forum-box-1 {
/* Outermost box: Forum or Thread top-level wrappers */
background-color: #193b16;
}
.nonshy-forum-box-2 {
/* Nested box: "Latest Post" on Forum-level views */
background-color: #2e4214;
}
.nonshy-forum-box-3 {
/* Nested box: Topics/Posts/Users/View counters */
background-color: #122c1f;
}

19
web/static/css/theme-green.css
View File

@ -4,4 +4,21 @@
--bulma-link-l: 18%;
--bulma-scheme-h: 95;
--bulma-link-text: #009900;
}
}
/*
* Forum Colors: with all the nested boxes, Bulma's default color scheme is
* too limited for a good experience.
*/
.nonshy-forum-box-1 {
/* Outermost box: Forum or Thread top-level wrappers */
background-color: #d1ffd1;
}
.nonshy-forum-box-2 {
/* Nested box: "Latest Post" on Forum-level views */
background-color: #e3f1d0;
}
.nonshy-forum-box-3 {
/* Nested box: Topics/Posts/Users/View counters */
background-color: #c2ffe8;
}

15
web/static/css/theme-orange-dark.css Normal file
View File

@ -0,0 +1,15 @@
/*
* Forum Color overrides for dark theme.
*/
.nonshy-forum-box-1 {
/* Outermost box: Forum or Thread top-level wrappers */
background-color: #3b2816;
}
.nonshy-forum-box-2 {
/* Nested box: "Latest Post" on Forum-level views */
background-color: #422a14;
}
.nonshy-forum-box-3 {
/* Nested box: Topics/Posts/Users/View counters */
background-color: #2c1912;
}

23
web/static/css/theme-orange.css Normal file
View File

@ -0,0 +1,23 @@
:root {
--bulma-primary-h: 39deg;
--bulma-link-h: 21deg;
--bulma-link-l: 39%;
--bulma-scheme-h: 34;
}
/*
* Forum Colors: with all the nested boxes, Bulma's default color scheme is
* too limited for a good experience.
*/
.nonshy-forum-box-1 {
/* Outermost box: Forum or Thread top-level wrappers */
background-color: #ffe2d1;
}
.nonshy-forum-box-2 {
/* Nested box: "Latest Post" on Forum-level views */
background-color: #f1e8d0;
}
.nonshy-forum-box-3 {
/* Nested box: Topics/Posts/Users/View counters */
background-color: #ffcbc2;
}

15
web/static/css/theme-pink-dark.css Normal file
View File

@ -0,0 +1,15 @@
/*
* Forum Color overrides for dark theme.
*/
.nonshy-forum-box-1 {
/* Outermost box: Forum or Thread top-level wrappers */
background-color: #3b1638;
}
.nonshy-forum-box-2 {
/* Nested box: "Latest Post" on Forum-level views */
background-color: #42143e;
}
.nonshy-forum-box-3 {
/* Nested box: Topics/Posts/Users/View counters */
background-color: #1e122c;
}

16
web/static/css/theme-pink.css
View File

@ -6,3 +6,19 @@
--bulma-scheme-s: 39%;
}
/*
* Forum Colors: with all the nested boxes, Bulma's default color scheme is
* too limited for a good experience.
*/
.nonshy-forum-box-1 {
/* Outermost box: Forum or Thread top-level wrappers */
background-color: #fbd1ff;
}
.nonshy-forum-box-2 {
/* Nested box: "Latest Post" on Forum-level views */
background-color: #ddd0f1;
}
.nonshy-forum-box-3 {
/* Nested box: Topics/Posts/Users/View counters */
background-color: #e7c2ff;
}

15
web/static/css/theme-purple-dark.css Normal file
View File

@ -0,0 +1,15 @@
/*
* Forum Color overrides for dark theme.
*/
.nonshy-forum-box-1 {
/* Outermost box: Forum or Thread top-level wrappers */
background-color: #37163b;
}
.nonshy-forum-box-2 {
/* Nested box: "Latest Post" on Forum-level views */
background-color: #3e1442;
}
.nonshy-forum-box-3 {
/* Nested box: Topics/Posts/Users/View counters */
background-color: #1e122c;
}

17
web/static/css/theme-purple.css
View File

@ -6,3 +6,20 @@
--bulma-scheme-h: 293;
--bulma-scheme-s: 23%;
}
/*
* Forum Colors: with all the nested boxes, Bulma's default color scheme is
* too limited for a good experience.
*/
.nonshy-forum-box-1 {
/* Outermost box: Forum or Thread top-level wrappers */
background-color: #f4d1ff;
}
.nonshy-forum-box-2 {
/* Nested box: "Latest Post" on Forum-level views */
background-color: #f1d0ef;
}
.nonshy-forum-box-3 {
/* Nested box: Topics/Posts/Users/View counters */
background-color: #d7c2ff;
}

15
web/static/css/theme-red-dark.css Normal file
View File

@ -0,0 +1,15 @@
/*
* Forum Color overrides for dark theme.
*/
.nonshy-forum-box-1 {
/* Outermost box: Forum or Thread top-level wrappers */
background-color: #3b1616;
}
.nonshy-forum-box-2 {
/* Nested box: "Latest Post" on Forum-level views */
background-color: #421d14;
}
.nonshy-forum-box-3 {
/* Nested box: Topics/Posts/Users/View counters */
background-color: #2c1912;
}

17
web/static/css/theme-red.css
View File

@ -5,3 +5,20 @@
--bulma-link-l: 30%;
--bulma-scheme-h: 0;
}
/*
* Forum Colors: with all the nested boxes, Bulma's default color scheme is
* too limited for a good experience.
*/
.nonshy-forum-box-1 {
/* Outermost box: Forum or Thread top-level wrappers */
background-color: #ffd1d1;
}
.nonshy-forum-box-2 {
/* Nested box: "Latest Post" on Forum-level views */
background-color: #f1d8d0;
}
.nonshy-forum-box-3 {
/* Nested box: Topics/Posts/Users/View counters */
background-color: #ffd0c2;
}

15
web/static/css/theme-yellow-dark.css Normal file
View File

@ -0,0 +1,15 @@
/*
* Forum Color overrides for dark theme.
*/
.nonshy-forum-box-1 {
/* Outermost box: Forum or Thread top-level wrappers */
background-color: #3b3516;
}
.nonshy-forum-box-2 {
/* Nested box: "Latest Post" on Forum-level views */
background-color: #423714;
}
.nonshy-forum-box-3 {
/* Nested box: Topics/Posts/Users/View counters */
background-color: #2c2c12;
}

25
web/static/css/theme-yellow.css Normal file
View File

@ -0,0 +1,25 @@
:root {
--bulma-primary-h: 59deg;
--bulma-primary-l: 51%;
--bulma-link-h: 57deg;
--bulma-link-l: 26%;
--bulma-scheme-h: 62;
--bulma-link-text: #999900;
}
/*
* Forum Colors: with all the nested boxes, Bulma's default color scheme is
* too limited for a good experience.
*/
.nonshy-forum-box-1 {
/* Outermost box: Forum or Thread top-level wrappers */
background-color: #ffe2d1;
}
.nonshy-forum-box-2 {
/* Nested box: "Latest Post" on Forum-level views */
background-color: #f1e8d0;
}
.nonshy-forum-box-3 {
/* Nested box: Topics/Posts/Users/View counters */
background-color: #ffcbc2;
}

17
web/static/css/theme.css
View File

@ -251,3 +251,20 @@ nav.navbar {
top: 4px;
right: 4px;
}
/*
* Forum Colors: with all the nested boxes, Bulma's default color scheme is
* too limited for a good experience.
*/
.nonshy-forum-box-1 {
/* Outermost box: Forum or Thread top-level wrappers */
background-color: #d1fff8;
}
.nonshy-forum-box-2 {
/* Nested box: "Latest Post" on Forum-level views */
background-color: #d0f1e2;
}
.nonshy-forum-box-3 {
/* Nested box: Topics/Posts/Users/View counters */
background-color: #ffedc2;
}

61
web/templates/account/settings.html
View File

@ -14,7 +14,7 @@
<div class="columns mt-4">
<div class="column is-one-quarter">
<div class="card">
<div class="card-header has-background-info">
<div class="card-header has-background-link">
<p class="card-header-title has-text-light">
<i class="fa fa-gear mr-2"></i>
Settings Menu
@ -344,29 +344,30 @@
</div>
<!-- Look & Feel -->
<div class="card mb-5" id="look">
<div id="look">
<form method="POST" action="/settings">
{{InputCSRF}}
<input type="hidden" name="intent" value="look">
<div class="card mb-5">
<header class="card-header has-background-link">
<p class="card-header-title has-text-light">
<i class="fa fa-palette pr-2"></i>
Look &amp; Feel
Website Theme
</p>
</header>
<div class="card-content">
<form method="POST" action="/settings">
<input type="hidden" name="intent" value="look">
{{InputCSRF}}
<p class="block">
On this screen, you may customize the visual appearance of your profile
page. You may set a custom color gradient for your header bar and personalize
the colors of your profile cards.
</p>
<!--
-- Website Theme Section
-->
<h2 class="subtitle">Website Theme <span class="tag is-success">New!</span></h2>
<p class="block">
You may set a custom theme to change the way the {{PrettyTitle}} website looks to you.
Choose between a Light and Dark variant, and set an optional accent color to apply a
new style to the entire website.
</p>
<h2 class="subtitle">Light or Dark Mode</h2>
<div class="field">
<label class="checkbox">
@ -398,7 +399,6 @@
This setting controls how the website theme will appear to you while logged in.
By default, the dark theme is used if your device prefers dark, but you can
manually override it to the Light or Dark themes above.
Remember to click "Save Look & Feel" below to see the change!
</p>
</div>
@ -409,11 +409,15 @@
<div class="select is-fullwidth">
<select name="website-theme-hue">
{{range .WebsiteThemeHueChoices}}
<optgroup label="{{.Header}}">
{{range .Options}}
<option value="{{.Value}}"
{{if eq ($User.GetProfileField "website-theme-hue") .Value}}selected{{end}}>
{{.Label}}
</option>
{{end}}
</optgroup>
{{end}}
</select>
</div>
<p class="help">
@ -422,7 +426,29 @@
</p>
</div>
<hr>
<div class="field">
<button type="submit" class="button is-primary">
<i class="fa fa-save mr-2"></i> Apply Website Theme
</button>
</div>
</div>
</div>
<div class="card mb-5">
<header class="card-header has-background-link">
<p class="card-header-title has-text-light">
<i class="fa fa-palette pr-2"></i>
My Profile Page Look &amp; Feel
</p>
</header>
<div class="card-content">
<p class="block">
On this screen, you may customize the visual appearance of your profile
page. You may set a custom color gradient for your header bar and personalize
the colors of your profile cards.
</p>
<!--
-- Profile Header Section
@ -604,9 +630,10 @@
<i class="fa fa-save mr-2"></i> Save Look &amp; Feel
</button>
</div>
</form>
</div>
</div>
</form>
</div>
<!-- Website Preferences -->
<div class="card mb-5" id="prefs">

17
web/templates/base.html
View File

@ -8,6 +8,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="/static/css/bulma.min.css?build={{.BuildHash}}">
<link rel="stylesheet" href="/static/css/theme.css?build={{.BuildHash}}">
<!-- Bulma theme CSS -->
{{- if eq .WebsiteTheme "light" -}}
<link rel="stylesheet" type="text/css" href="/static/css/bulma-no-dark-mode.min.css?build={{.BuildHash}}">
@ -17,12 +18,18 @@
<link rel="stylesheet" type="text/css" href="/static/css/nonshy-prefers-dark.css?build={{.BuildHash}}">
{{- end -}}
<!-- User theme hue -->
{{- if and .LoggedIn (.CurrentUser.GetProfileField "website-theme-hue") -}}
<link rel="stylesheet" type="text/css" href="/static/css/theme-{{.CurrentUser.GetProfileField "website-theme-hue"}}.css">
{{end}}
<!-- User theme hue -->
{{- if and .LoggedIn (.CurrentUser.GetProfileField "website-theme-hue") }}
{{- $WebsiteThemeHue := .CurrentUser.GetProfileField "website-theme-hue" }}
<link rel="stylesheet" type="text/css" href="/static/css/theme-{{$WebsiteThemeHue}}.css">
<!-- Dark theme mixin -->
{{- if or (eq .WebsiteTheme "dark") (ne .WebsiteTheme "light") -}}
<link rel="stylesheet" type="text/css" href="/static/css/theme-{{$WebsiteThemeHue}}-dark.css" {{if ne .WebsiteTheme "dark"}}media="(prefers-color-scheme: dark)"{{end}}>
{{- end -}}
{{- end -}}
<link rel="stylesheet" href="/static/fontawesome-free-6.6.0-web/css/all.css">
<link rel="stylesheet" href="/static/css/theme.css?build={{.BuildHash}}">
<link rel="manifest" href="/manifest.json">
<title>{{template "title" .}} - {{ .Title }}</title>
</head>

2
web/templates/chat.html
View File

@ -1,7 +1,7 @@
{{define "title"}}Chat Rooms{{end}}
{{define "content"}}
<div class="block">
<section class="hero is-light is-bold">
<section class="hero is-link is-bold">
<div class="hero-body">
<div class="container">
<div class="level">

8
web/templates/forum/board_index.html
View File

@ -1,7 +1,7 @@
{{define "title"}}{{.Forum.Title}}{{end}}
{{define "content"}}
<div class="block">
<section class="hero is-light is-success">
<section class="hero is-link is-bold">
<div class="hero-body">
<div class="container">
<div class="level">
@ -108,7 +108,7 @@
<div class="block p-2">
{{range .Threads}}
{{$Stats := $Root.ThreadMap.Get .ID}}
<div class="box has-background-success-light has-text-dark">
<div class="box nonshy-forum-box-1 has-text-dark">
<div class="columns">
<div class="column is-2 has-text-centered pt-0 pb-1">
<!-- Thread starter is blocked? -->
@ -171,7 +171,7 @@
<div class="column is-narrow pb-1 pt-0 px-1">
<div class="columns is-mobile">
<div class="column has-text-centered pr-1">
<div class="box p-2">
<div class="box nonshy-forum-box-3 p-2">
<p class="is-size-7">Replies</p>
{{if $Stats}}
{{$Stats.Replies}}
@ -181,7 +181,7 @@
</div>
</div>
<div class="column has-text-centered pl-1">
<div class="box p-2">
<div class="box nonshy-forum-box-3 p-2">
<p class="is-size-7">Views</p>
{{if $Stats}}
{{$Stats.Views}}

12
web/templates/forum/index.html
View File

@ -1,7 +1,7 @@
{{define "title"}}Forums{{end}}
{{define "content"}}
<div class="block">
<section class="hero is-light is-success">
<section class="hero is-link is-bold">
<div class="hero-body">
<div class="container">
<div class="level">
@ -154,7 +154,7 @@
{{else}}
{{range .Forums}}
{{$Stats := $Root.ForumMap.Get .ID}}
<div class="card block has-background-primary-light has-text-dark">
<div class="card block nonshy-forum-box-1 has-text-dark">
<div class="card-content">
<div class="columns">
<div class="column is-3 pt-0 pb-1">
@ -230,7 +230,7 @@
</div>
<div class="column py-1">
<div class="box has-background-success-light has-text-dark">
<div class="box nonshy-forum-box-2 has-text-dark">
<h2 class="subtitle mb-1 has-text-dark">Latest Post</h2>
{{if $Stats.RecentThread}}
<a href="/go/comment?id={{$Stats.RecentPost.ID}}">
@ -253,7 +253,7 @@
<div class="column is-3 py-1">
<div class="columns is-mobile is-gapless">
<div class="column has-text-centered mr-1">
<div class="box has-background-warning-light has-text-dark p-2">
<div class="box nonshy-forum-box-3 has-text-dark p-2">
<p class="is-size-7 has-text-dark">Topics</p>
{{if $Stats}}
{{$Stats.Threads}}
@ -263,7 +263,7 @@
</div>
</div>
<div class="column has-text-centered mx-1">
<div class="box has-background-warning-light has-text-dark p-2">
<div class="box nonshy-forum-box-3 has-text-dark p-2">
<p class="is-size-7 has-text-dark">Posts</p>
{{if $Stats}}
{{$Stats.Posts}}
@ -273,7 +273,7 @@
</div>
</div>
<div class="column has-text-centered ml-1">
<div class="box has-background-warning-light has-text-dark p-2">
<div class="box nonshy-forum-box-3 has-text-dark p-2">
<p class="is-size-7 has-text-dark">Users</p>
{{if $Stats}}
{{$Stats.Users}}

4
web/templates/forum/newest.html
View File

@ -1,7 +1,7 @@
{{define "title"}}Newest Posts - Forums{{end}}
{{define "content"}}
<div class="block">
<section class="hero is-light is-success">
<section class="hero is-link is-bold">
<div class="hero-body">
<h1 class="title">
<span class="icon mr-4"><i class="fa fa-comments"></i></span>
@ -91,7 +91,7 @@
<div class="p-4">
{{range .RecentPosts}}
{{$User := .Thread.Comment.User}}
<div class="card block has-background-link-light">
<div class="card block nonshy-forum-box-1">
<div class="card-content">
<div class="columns">
<div class="column is-narrow has-text-centered pt-0 pb-1">

2
web/templates/forum/search.html
View File

@ -1,7 +1,7 @@
{{define "title"}}Newest Posts - Forums{{end}}
{{define "content"}}
<div class="block">
<section class="hero is-light is-success">
<section class="hero is-link is-bold">
<div class="hero-body">
<h1 class="title">
<span class="icon mr-4"><i class="fa fa-comments"></i></span>

4
web/templates/forum/thread.html
View File

@ -1,7 +1,7 @@
{{define "title"}}{{.Thread.Title}} - {{.Forum.Title}}{{end}}
{{define "content"}}
<div class="block">
<section class="hero is-light is-success">
<section class="hero is-link is-bold">
<div class="hero-body">
<div class="container">
<div class="level">
@ -130,7 +130,7 @@
{{$Root := .}}
<div class="block p-2">
{{range $i, $c := .Comments}}
<div class="box has-background-link-light has-text-dark" id="p{{.ID}}">
<div class="box nonshy-forum-box-1 has-text-dark" id="p{{.ID}}">
<div class="columns">
<div class="column is-2 has-text-centered">
<!-- Thread starter is blocked? -->

2
web/templates/photo/permalink.html
View File

@ -277,7 +277,7 @@
</p>
{{else}}
{{range .Comments}}
<div class="box has-background-link-light has-text-dark" id="p{{.ID}}">
<div class="box nonshy-forum-box-1 has-text-dark" id="p{{.ID}}">
<div class="columns">
<div class="column is-2 has-text-centered">
<!-- User has no display name distinct from their username? -->