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

Upgrade to Bulma CSS 1.0 and theme picker support

main
Noah Petherbridge 2024-03-30 13:49:36 -07:00
parent 535e96b491
commit 2d0fd25a08
11 changed files with 22548 additions and 8818 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -182,6 +182,7 @@ func Settings() http.HandlerFunc {
for _, field := range []string{
"hero-text-dark",
"card-lightness",
"website-theme",
} {
value := r.PostFormValue(field)
user.SetProfileField(field, value)

4
pkg/templates/template_vars.go
View File

@ -18,6 +18,7 @@ func MergeVars(r *http.Request, m map[string]interface{}) {
m["BuildDate"] = config.RuntimeBuildDate
m["Subtitle"] = config.Subtitle
m["YYYY"] = time.Now().Year()
m["WebsiteTheme"] = ""
if r == nil {
return
@ -55,6 +56,9 @@ func MergeUserVars(r *http.Request, m map[string]interface{}) {
m["LoggedIn"] = true
m["CurrentUser"] = user
// User website preferences
m["WebsiteTheme"] = user.GetProfileField("website-theme")
// Get user recent notifications.
/*notifPager := &models.Pagination{
Page: 1,

49
web/static/css/bulma-dark-theme.css Normal file
View File

@ -0,0 +1,49 @@
/* Forced dark theme for Bulma (custom created for nonshy) */
:root {
--bulma-white-on-scheme-l: 100%;
--bulma-white-on-scheme: hsla(var(--bulma-white-h), var(--bulma-white-s), var(--bulma-white-on-scheme-l), 1);
--bulma-black-on-scheme-l: 0%;
--bulma-black-on-scheme: hsla(var(--bulma-black-h), var(--bulma-black-s), var(--bulma-black-on-scheme-l), 1);
--bulma-light-on-scheme-l: 96%;
--bulma-light-on-scheme: hsla(var(--bulma-light-h), var(--bulma-light-s), var(--bulma-light-on-scheme-l), 1);
--bulma-dark-on-scheme-l: 56%;
--bulma-dark-on-scheme: hsla(var(--bulma-dark-h), var(--bulma-dark-s), var(--bulma-dark-on-scheme-l), 1);
--bulma-text-on-scheme-l: 54%;
--bulma-text-on-scheme: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-on-scheme-l), 1);
--bulma-primary-on-scheme-l: 41%;
--bulma-primary-on-scheme: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-on-scheme-l), 1);
--bulma-link-on-scheme-l: 73%;
--bulma-link-on-scheme: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-on-scheme-l), 1);
--bulma-info-on-scheme-l: 70%;
--bulma-info-on-scheme: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-on-scheme-l), 1);
--bulma-success-on-scheme-l: 53%;
--bulma-success-on-scheme: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-on-scheme-l), 1);
--bulma-warning-on-scheme-l: 53%;
--bulma-warning-on-scheme: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-on-scheme-l), 1);
--bulma-danger-on-scheme-l: 70%;
--bulma-danger-on-scheme: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-on-scheme-l), 1);
--bulma-scheme-brightness: dark;
--bulma-scheme-main-l: 9%;
--bulma-scheme-main-bis-l: 11%;
--bulma-scheme-main-ter-l: 13%;
--bulma-soft-l: 20%;
--bulma-bold-l: 90%;
--bulma-soft-invert-l: 90%;
--bulma-bold-invert-l: 20%;
--bulma-background-l: 14%;
--bulma-border-weak-l: 21%;
--bulma-border-l: 24%;
--bulma-text-weak-l: 53%;
--bulma-text-l: 71%;
--bulma-text-strong-l: 93%;
--bulma-text-title-l: 100%;
--bulma-hover-background-l-delta: 5%;
--bulma-active-background-l-delta: 10%;
--bulma-hover-border-l-delta: 10%;
--bulma-active-border-l-delta: 20%;
--bulma-hover-color-l-delta: 5%;
--bulma-active-color-l-delta: 10%;
--bulma-shadow-h: 0deg;
--bulma-shadow-s: 0%;
--bulma-shadow-l: 100%;
}

3
web/static/css/bulma-no-dark-mode.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
web/static/css/bulma-no-dark-mode.min.css.map Normal file
View File

File diff suppressed because one or more lines are too long

8816
web/static/css/bulma-prefers-dark.css
View File

File diff suppressed because it is too large Load Diff

22437
web/static/css/bulma.css vendored Normal file
View File

File diff suppressed because it is too large Load Diff

1
web/static/css/bulma.css.map Normal file
View File

File diff suppressed because one or more lines are too long

4
web/static/css/bulma.min.css vendored
View File

File diff suppressed because one or more lines are too long

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

@ -361,6 +361,47 @@
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>
</div>
<hr>
<!--
-- Profile Header Section
-->

9
web/templates/base.html
View File

@ -7,8 +7,15 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bulma theme CSS -->
{{if eq .WebsiteTheme "light"}}
<link rel="stylesheet" type="text/css" href="/static/css/bulma-no-dark-mode.min.css?build={{.BuildHash}}">
{{else if eq .WebsiteTheme "dark"}}
<link rel="stylesheet" type="text/css" href="/static/css/bulma.min.css?build={{.BuildHash}}">
<link rel="stylesheet" type="text/css" href="/static/css/bulma-prefers-dark.css?build={{.BuildHash}}" />
<link rel="stylesheet" type="text/css" href="/static/css/bulma-dark-theme.css?build={{.BuildHash}}">
{{else}}
<link rel="stylesheet" type="text/css" href="/static/css/bulma.min.css?build={{.BuildHash}}">
{{end}}
<link rel="stylesheet" href="/static/fontawesome-free-6.1.2-web/css/all.css">
<link rel="stylesheet" href="/static/css/theme.css?build={{.BuildHash}}">
<link rel="manifest" href="/manifest.json">