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

68
pkg/config/enum.go
View File

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

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

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

@ -5,4 +5,21 @@
--bulma-link-l: 50%; --bulma-link-l: 50%;
--bulma-scheme-h: 299; --bulma-scheme-h: 299;
--bulma-scheme-s: 22%; --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

@ -4,4 +4,21 @@
--bulma-link-h: 200deg; --bulma-link-h: 200deg;
--bulma-link-l: 34%; --bulma-link-l: 34%;
--bulma-scheme-h: 173; --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-link-l: 18%;
--bulma-scheme-h: 95; --bulma-scheme-h: 95;
--bulma-link-text: #009900; --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%; --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

@ -5,4 +5,21 @@
--bulma-link-l: 45%; --bulma-link-l: 45%;
--bulma-scheme-h: 293; --bulma-scheme-h: 293;
--bulma-scheme-s: 23%; --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

@ -4,4 +4,21 @@
--bulma-link-h: 12deg; --bulma-link-h: 12deg;
--bulma-link-l: 30%; --bulma-link-l: 30%;
--bulma-scheme-h: 0; --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

@ -250,4 +250,21 @@ nav.navbar {
position: absolute; position: absolute;
top: 4px; top: 4px;
right: 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;
} }

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

@ -14,7 +14,7 @@
<div class="columns mt-4"> <div class="columns mt-4">
<div class="column is-one-quarter"> <div class="column is-one-quarter">
<div class="card"> <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"> <p class="card-header-title has-text-light">
<i class="fa fa-gear mr-2"></i> <i class="fa fa-gear mr-2"></i>
Settings Menu Settings Menu
@ -344,268 +344,295 @@
</div> </div>
<!-- Look & Feel --> <!-- Look & Feel -->
<div class="card mb-5" id="look"> <div id="look">
<header class="card-header has-background-link"> <form method="POST" action="/settings">
<p class="card-header-title has-text-light"> {{InputCSRF}}
<i class="fa fa-palette pr-2"></i> <input type="hidden" name="intent" value="look">
Look &amp; Feel
</p>
</header>
<div class="card-content"> <div class="card mb-5">
<form method="POST" action="/settings"> <header class="card-header has-background-link">
<input type="hidden" name="intent" value="look"> <p class="card-header-title has-text-light">
{{InputCSRF}} <i class="fa fa-palette pr-2"></i>
Website Theme
<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>
<div class="field">
<label class="checkbox">
<input type="radio"
name="website-theme"
value=""
{{if eq (.CurrentUser.GetProfileField "website-theme") ""}}checked{{end}}>
Automatically match my device's theme
</label>
</div>
<div class="field">
<label class="checkbox">
<input type="radio"
name="website-theme"
value="light"
{{if eq (.CurrentUser.GetProfileField "website-theme") "light"}}checked{{end}}>
Always use the light theme
</label>
</div>
<div class="field">
<label class="checkbox">
<input type="radio"
name="website-theme"
value="dark"
{{if eq (.CurrentUser.GetProfileField "website-theme") "dark"}}checked{{end}}>
Always use the dark theme
</label>
<p class="help">
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> </p>
</div> </header>
<div class="field"> <div class="card-content">
<label class="label" for="website-theme-hue"> <!--
Accent color <span class="tag is-success">New!</span> -- Website Theme Section
</label> -->
<div class="select is-fullwidth"> <p class="block">
<select name="website-theme-hue"> You may set a custom theme to change the way the {{PrettyTitle}} website looks to you.
{{range .WebsiteThemeHueChoices}} Choose between a Light and Dark variant, and set an optional accent color to apply a
<option value="{{.Value}}" new style to the entire website.
{{if eq ($User.GetProfileField "website-theme-hue") .Value}}selected{{end}}> </p>
{{.Label}}
</option> <h2 class="subtitle">Light or Dark Mode</h2>
{{end}}
</select> <div class="field">
<label class="checkbox">
<input type="radio"
name="website-theme"
value=""
{{if eq (.CurrentUser.GetProfileField "website-theme") ""}}checked{{end}}>
Automatically match my device's theme
</label>
</div> </div>
<p class="help"> <div class="field">
Select an "accent color" for the website theme. Mix and match these with <label class="checkbox">
the Light and Dark themes! Some accent colors really pop on the dark theme. <input type="radio"
name="website-theme"
value="light"
{{if eq (.CurrentUser.GetProfileField "website-theme") "light"}}checked{{end}}>
Always use the light theme
</label>
</div>
<div class="field">
<label class="checkbox">
<input type="radio"
name="website-theme"
value="dark"
{{if eq (.CurrentUser.GetProfileField "website-theme") "dark"}}checked{{end}}>
Always use the dark theme
</label>
<p class="help">
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.
</p>
</div>
<div class="field">
<label class="label" for="website-theme-hue">
Accent color <span class="tag is-success">New!</span>
</label>
<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">
Select an "accent color" for the website theme. Mix and match these with
the Light and Dark themes! Some accent colors really pop on the dark theme.
</p>
</div>
<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> </p>
</div> </header>
<hr> <div class="card-content">
<!-- <p class="block">
-- Profile Header Section 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
<h2 class="subtitle">Profile Header</h2> the colors of your profile cards.
</p>
<div class="field"> <!--
<label class="label">Preview</label> -- Profile Header Section
</div> -->
<h2 class="subtitle">Profile Header</h2>
<!-- Header preview hero, should be similar to profile page. --> <div class="field">
<div class="hero is-link is-bold mb-4" id="header-hero-preview"> <label class="label">Preview</label>
<div class="hero-body p-4"> </div>
<div class="container">
<div class="columns is-mobile is-gapless mt-1 mb-6">
<div class="column is-narrow has-text-centered">
<figure class="profile-photo is-inline-block" style="width: auto; height: auto">
{{template "avatar-48x48" .CurrentUser}}
</figure>
</div>
<div class="column mx-2"> <!-- Header preview hero, should be similar to profile page. -->
<strong>{{.CurrentUser.NameOrUsername}}</strong> <div class="hero is-link is-bold mb-4" id="header-hero-preview">
</div> <div class="hero-body p-4">
<div class="container">
{{if and .LoggedIn (not .IsPrivate)}} <div class="columns is-mobile is-gapless mt-1 mb-6">
<div class="column is-narrow"> <div class="column is-narrow has-text-centered">
<div class="box"> <figure class="profile-photo is-inline-block" style="width: auto; height: auto">
<div style="width: 16px;"></div> {{template "avatar-48x48" .CurrentUser}}
</figure>
</div> </div>
<div class="column mx-2">
<strong>{{.CurrentUser.NameOrUsername}}</strong>
</div>
{{if and .LoggedIn (not .IsPrivate)}}
<div class="column is-narrow">
<div class="box">
<div style="width: 16px;"></div>
</div>
</div>
{{end}}<!-- if .LoggedIn -->
</div> </div>
{{end}}<!-- if .LoggedIn -->
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="field"> <div class="field">
<label class="label">Header Gradient</label> <label class="label">Header Gradient</label>
<div class="columns is-mobile"> <div class="columns is-mobile">
<div class="column is-narrow"> <div class="column is-narrow">
<input type="color" class="color" <input type="color" class="color"
id="hero-color-start" id="hero-color-start"
name="hero-color-start" name="hero-color-start"
{{if ($User.GetProfileField "hero-color-start")}} {{if ($User.GetProfileField "hero-color-start")}}
value="{{$User.GetProfileField "hero-color-start"}}" value="{{$User.GetProfileField "hero-color-start"}}"
{{else}} {{else}}
value="{{template "--prof-colorA"}}" value="{{template "--prof-colorA"}}"
{{end}} {{end}}
>
</div>
<div class="column is-narrow">
<input type="color" class="color"
id="hero-color-end"
name="hero-color-end"
{{if ($User.GetProfileField "hero-color-end")}}
value="{{$User.GetProfileField "hero-color-end"}}"
{{else}}
value="{{template "--prof-colorB"}}"
{{end}}
>
</div>
<div class="column">
<label class="checkbox">
<input type="checkbox"
id="hero-text-dark"
name="hero-text-dark"
value="true"
{{if eq (.CurrentUser.GetProfileField "hero-text-dark") "true"}}checked{{end}}
> >
Dark text </div>
</label> <div class="column is-narrow">
<input type="color" class="color"
id="hero-color-end"
name="hero-color-end"
{{if ($User.GetProfileField "hero-color-end")}}
value="{{$User.GetProfileField "hero-color-end"}}"
{{else}}
value="{{template "--prof-colorB"}}"
{{end}}
>
</div>
<div class="column">
<label class="checkbox">
<input type="checkbox"
id="hero-text-dark"
name="hero-text-dark"
value="true"
{{if eq (.CurrentUser.GetProfileField "hero-text-dark") "true"}}checked{{end}}
>
Dark text
</label>
</div>
</div> </div>
</div> </div>
</div>
<hr> <hr>
<!-- <!--
-- Profile Page Section -- Profile Page Section
--> -->
<h2 class="subtitle">Profile Page</h2> <h2 class="subtitle">Profile Page</h2>
<div class="card block" id="profile-card-preview"> <div class="card block" id="profile-card-preview">
<div class="card-header"> <div class="card-header">
<p class="card-header-title">Card Colors</p> <p class="card-header-title">Card Colors</p>
</div>
<div class="card-body">
<table class="table is-fullwidth">
<tr>
<td>
<strong>Lightness</strong>
</td>
<td>
<div class="select is-fullwidth">
<select id="card-lightness" name="card-lightness">
<option value="">Automatic</option>
<option value="light"{{if eq ($User.GetProfileField "card-lightness") "light"}} selected{{end}}>Light theme (black on white)</option>
<option value="dark"{{if eq ($User.GetProfileField "card-lightness") "dark"}} selected{{end}}>Dark theme (white on black)</option>
</select>
</div>
</td>
</tr>
<tr>
<td class="is-narrow">
<strong>Card Title BG</strong>
</td>
<td>
<input type="color"
id="card-title-bg"
name="card-title-bg"
{{if ($User.GetProfileField "card-title-bg")}}
value="{{$User.GetProfileField "card-title-bg"}}"
{{else}}
value="{{template "--prof-card-bg"}}"
{{end}}
>
</td>
</tr>
<tr>
<td>
<strong>Card Title FG</strong>
</td>
<td>
<input type="color"
id="card-title-fg"
name="card-title-fg"
{{if ($User.GetProfileField "card-title-fg")}}
value="{{$User.GetProfileField "card-title-fg"}}"
{{else}}
value="{{template "--prof-card-fg"}}"
{{end}}
>
</td>
</tr>
<tr>
<td>
<strong>Link Color</strong>
</td>
<td>
<input type="color"
id="card-link-color"
name="card-link-color"
{{if ($User.GetProfileField "card-link-color")}}
value="{{$User.GetProfileField "card-link-color"}}"
{{else}}
value="{{template "--prof-link-fg"}}"
{{end}}
>
<a href="#" onclick="return false" class="ml-2">
Example
<i class="fa fa-link"></i>
</a>
</td>
</tr>
</table>
</div>
</div> </div>
<div class="card-body">
<table class="table is-fullwidth"> <div class="field">
<tr> <label class="label">
<td> Reset Styles
<strong>Lightness</strong> </label>
</td> <label class="checkbox">
<td> <input type="checkbox"
<div class="select is-fullwidth"> name="reset"
<select id="card-lightness" name="card-lightness"> value="true">
<option value="">Automatic</option> Reset to default style
<option value="light"{{if eq ($User.GetProfileField "card-lightness") "light"}} selected{{end}}>Light theme (black on white)</option> </label>
<option value="dark"{{if eq ($User.GetProfileField "card-lightness") "dark"}} selected{{end}}>Dark theme (white on black)</option> <p class="help">
</select> If you'd like to reset all your page styles to their default, check
</div> this box and click Save below.
</td> </p>
</tr> </div>
<tr>
<td class="is-narrow"> <div class="field">
<strong>Card Title BG</strong> <button type="submit" class="button is-primary">
</td> <i class="fa fa-save mr-2"></i> Save Look &amp; Feel
<td> </button>
<input type="color"
id="card-title-bg"
name="card-title-bg"
{{if ($User.GetProfileField "card-title-bg")}}
value="{{$User.GetProfileField "card-title-bg"}}"
{{else}}
value="{{template "--prof-card-bg"}}"
{{end}}
>
</td>
</tr>
<tr>
<td>
<strong>Card Title FG</strong>
</td>
<td>
<input type="color"
id="card-title-fg"
name="card-title-fg"
{{if ($User.GetProfileField "card-title-fg")}}
value="{{$User.GetProfileField "card-title-fg"}}"
{{else}}
value="{{template "--prof-card-fg"}}"
{{end}}
>
</td>
</tr>
<tr>
<td>
<strong>Link Color</strong>
</td>
<td>
<input type="color"
id="card-link-color"
name="card-link-color"
{{if ($User.GetProfileField "card-link-color")}}
value="{{$User.GetProfileField "card-link-color"}}"
{{else}}
value="{{template "--prof-link-fg"}}"
{{end}}
>
<a href="#" onclick="return false" class="ml-2">
Example
<i class="fa fa-link"></i>
</a>
</td>
</tr>
</table>
</div> </div>
</div> </div>
</div>
<div class="field"> </form>
<label class="label">
Reset Styles
</label>
<label class="checkbox">
<input type="checkbox"
name="reset"
value="true">
Reset to default style
</label>
<p class="help">
If you'd like to reset all your page styles to their default, check
this box and click Save below.
</p>
</div>
<div class="field">
<button type="submit" class="button is-primary">
<i class="fa fa-save mr-2"></i> Save Look &amp; Feel
</button>
</div>
</form>
</div>
</div> </div>
<!-- Website Preferences --> <!-- Website Preferences -->

17
web/templates/base.html
View File

@ -8,6 +8,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <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" type="text/css" href="/static/css/bulma.min.css?build={{.BuildHash}}">
<link rel="stylesheet" href="/static/css/theme.css?build={{.BuildHash}}">
<!-- Bulma theme CSS --> <!-- Bulma theme CSS -->
{{- if eq .WebsiteTheme "light" -}} {{- if eq .WebsiteTheme "light" -}}
<link rel="stylesheet" type="text/css" href="/static/css/bulma-no-dark-mode.min.css?build={{.BuildHash}}"> <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}}"> <link rel="stylesheet" type="text/css" href="/static/css/nonshy-prefers-dark.css?build={{.BuildHash}}">
{{- end -}} {{- end -}}
<!-- User theme hue --> <!-- User theme hue -->
{{- if and .LoggedIn (.CurrentUser.GetProfileField "website-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"> {{- $WebsiteThemeHue := .CurrentUser.GetProfileField "website-theme-hue" }}
{{end}} <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/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"> <link rel="manifest" href="/manifest.json">
<title>{{template "title" .}} - {{ .Title }}</title> <title>{{template "title" .}} - {{ .Title }}</title>
</head> </head>

2
web/templates/chat.html
View File

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

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

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

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

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

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

@ -1,7 +1,7 @@
{{define "title"}}Newest Posts - Forums{{end}} {{define "title"}}Newest Posts - Forums{{end}}
{{define "content"}} {{define "content"}}
<div class="block"> <div class="block">
<section class="hero is-light is-success"> <section class="hero is-link is-bold">
<div class="hero-body"> <div class="hero-body">
<h1 class="title"> <h1 class="title">
<span class="icon mr-4"><i class="fa fa-comments"></i></span> <span class="icon mr-4"><i class="fa fa-comments"></i></span>
@ -91,7 +91,7 @@
<div class="p-4"> <div class="p-4">
{{range .RecentPosts}} {{range .RecentPosts}}
{{$User := .Thread.Comment.User}} {{$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="card-content">
<div class="columns"> <div class="columns">
<div class="column is-narrow has-text-centered pt-0 pb-1"> <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 "title"}}Newest Posts - Forums{{end}}
{{define "content"}} {{define "content"}}
<div class="block"> <div class="block">
<section class="hero is-light is-success"> <section class="hero is-link is-bold">
<div class="hero-body"> <div class="hero-body">
<h1 class="title"> <h1 class="title">
<span class="icon mr-4"><i class="fa fa-comments"></i></span> <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 "title"}}{{.Thread.Title}} - {{.Forum.Title}}{{end}}
{{define "content"}} {{define "content"}}
<div class="block"> <div class="block">
<section class="hero is-light is-success"> <section class="hero is-link is-bold">
<div class="hero-body"> <div class="hero-body">
<div class="container"> <div class="container">
<div class="level"> <div class="level">
@ -130,7 +130,7 @@
{{$Root := .}} {{$Root := .}}
<div class="block p-2"> <div class="block p-2">
{{range $i, $c := .Comments}} {{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="columns">
<div class="column is-2 has-text-centered"> <div class="column is-2 has-text-centered">
<!-- Thread starter is blocked? --> <!-- Thread starter is blocked? -->

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

@ -277,7 +277,7 @@
</p> </p>
{{else}} {{else}}
{{range .Comments}} {{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="columns">
<div class="column is-2 has-text-centered"> <div class="column is-2 has-text-centered">
<!-- User has no display name distinct from their username? --> <!-- User has no display name distinct from their username? -->