Skip to content

Commit ed7a82a

Browse files
chase-moskalchase-moskal
committed
glowup: incredi vibes
1 parent 75d36c9 commit ed7a82a

File tree

8 files changed

+154
-41
lines changed

8 files changed

+154
-41
lines changed

‎README.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11

2-
# 🫒 Olive
2+
# 🫒 Olive Support
33
> *Customer support, but good.*
44
5+
https://olive.e280.org/
6+

‎assets/bg.webp‎

40.6 KB
Loading

‎s/index.html.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {ssg, html} from "@e280/scute"
44
const title = "Olive Support"
55
const domain = "olive.e280.org"
66
const favicon = "/assets/olive.png"
7-
const description = "Customer support, but it's good."
7+
const description = "Customer support, but it's good"
88

99
export default ssg.page(import.meta.url, async orb => ({
1010
title,
@@ -16,7 +16,7 @@ export default ssg.page(import.meta.url, async orb => ({
1616
socialCard: {
1717
title,
1818
description,
19-
themeColor: "#636B2F",
19+
themeColor: "#A1C33F",
2020
siteName: domain,
2121
image: `https://${domain}${favicon}`,
2222
},
@@ -33,7 +33,7 @@ export default ssg.page(import.meta.url, async orb => ({
3333
<section>
3434
<img class=logo src="/assets/olive.png" alt=""/>
3535
<h1>Olive Support</h1>
36-
<p>Simple secure customer support.</p>
36+
<p>Customer support, but less terrible</p>
3737
<p class=version>v${orb.packageVersion()}</p>
3838
</section>
3939
</olive-app>

‎s/main.css‎

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@
77
--link: cyan;
88
--prime: #A1C33F;
99
--special: yellow;
10-
--bg: #313422;
10+
--bg: #14150f;
11+
--plate: #3a4625;
1112
}
1213
}
1314

@@ -22,6 +23,10 @@
2223
::-webkit-scrollbar-track { background: transparent; }
2324
::-webkit-scrollbar-thumb { background: #333; border-radius: 1em; }
2425
::-webkit-scrollbar-thumb:hover { background: #444; }
26+
* {
27+
scrollbar-width: thin;
28+
scrollbar-color: #333 transparent;
29+
}
2530

2631
a {
2732
color: var(--link);
@@ -31,7 +36,7 @@
3136
color: color-mix(in srgb, var(--link), purple 30%);
3237
}
3338

34-
&:hover {
39+
&:is(:hover, :focus-visible) {
3540
color: color-mix(in srgb, var(--link), white 10%);
3641
text-decoration: underline;
3742
}
@@ -48,7 +53,12 @@
4853
font-family: "Alan Sans", sans-serif;
4954
font-size: 12px;
5055
color: var(--prime);
56+
--bgcover: color-mix(in lch, transparent, var(--bg) 92%);
5157
background: var(--bg);
58+
background:
59+
linear-gradient(to bottom, var(--bgcover), var(--bgcover)),
60+
var(--bg) url("/assets/bg.webp");
61+
background-repeat: repeat;
5262
text-shadow: 0.1em 0.1em 0.2em #0008;
5363
}
5464
}
@@ -67,20 +77,22 @@
6777
max-width: 100%;
6878
max-height: 100%;
6979

70-
background: #0002;
71-
border-bottom: 1px solid #fff2;
80+
background: color-mix(in lch, transparent, var(--plate) 50%);
81+
border-top: 1px solid #fff3;
7282
border-radius: clamp(0em, calc(5vw - 3em), 2em);
73-
box-shadow:
74-
inset 0.1em 0.2em 3em #0004,
75-
0.1em 0.2em 2em #0002;
83+
box-shadow: 0.3em 0.5em 2em #0004;
7684

7785
section {
7886
display: flex;
7987
flex-direction: column;
8088
justify-content: center;
8189
align-items: center;
90+
text-align: center;
91+
8292
gap: 1em;
8393
height: 100%;
94+
padding: 1em;
95+
8496
&::before, &::after {
8597
content: "";
8698
display: block;
@@ -100,6 +112,7 @@
100112

101113
h1 {
102114
font-size: 3em;
115+
font-weight: bold;
103116
text-shadow: 0 0 0.5em color-mix(in lch, var(--prime), #fff4 80%);
104117
}
105118

‎s/ui/app/component.ts‎

Lines changed: 26 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {Router} from "../router.js"
66
import styleCss from "./style.css.js"
77
import {Context} from "../context.js"
88
import themeCss from "../theme.css.js"
9+
import {Taglines} from "./utils/taglines.js"
910
import menu2Svg from "../icons/tabler/menu-2.svg.js"
1011
import {DashboardView} from "../pages/dashboard/view.js"
1112

@@ -15,19 +16,27 @@ export class OliveApp extends (view.component(use => {
1516
const context = use.once(() => new Context())
1617
const router = use.once(() => new Router(
1718
[/^$/, () => DashboardView.props(context).children(html`<slot></slot>`).render()],
18-
[/^#\/a\/$/, () => html`account`],
19-
[/^#\/o\/$/, () => html`orglist`],
20-
[/^#\/o\/(\w+)$/, orgId => html`org ${orgId}`],
21-
[/^#\/c\/$/, () => html`chatlist`],
22-
[/^#\/c\/(\w+)$/, chatId => html`chat ${chatId}`],
19+
[/^#\/account$/, () => html`account`],
20+
[/^#\/orgs$/, () => html`orglist`],
21+
[/^#\/org\/(\w+)$/, orgId => html`org ${orgId}`],
22+
[/^#\/chats$/, () => html`chatlist`],
23+
[/^#\/chat\/(\w+)$/, chatId => html`chat ${chatId}`],
2324
[/.*/, () => html`404 not found`],
2425
))
2526

2627
const {hash} = router
2728
const $navOpen = use.signal(false)
29+
const taglines = use.once(() => new Taglines())
2830

29-
const toggleNav = () => $navOpen(!$navOpen())
30-
const closeNav = () => $navOpen(false)
31+
const toggleNav = async(force?: boolean) => {
32+
const value = force === undefined
33+
? !$navOpen()
34+
: force
35+
if (value) await taglines.nextTagline()
36+
await $navOpen(value)
37+
}
38+
39+
const closeNav = () => toggleNav(false)
3140

3241
const renderLink = (label: string, url: string, isActive: boolean) => html`
3342
<a
@@ -40,20 +49,23 @@ export class OliveApp extends (view.component(use => {
4049

4150
return html`
4251
<nav ?data-open="${$navOpen()}">
43-
<button theme=icon @click="${toggleNav}">${menu2Svg}</button>
52+
<button theme=icon @click="${() => toggleNav()}">${menu2Svg}</button>
4453
<div class=navplate ?inert="${!$navOpen()}">
4554
<header>
4655
<img alt="" src="/assets/olive.png"/>
4756
<div>
48-
<h1>Olive Support <small>v${context.version}</small></h1>
49-
<p>Simple secure customer support.</p>
57+
<h1>
58+
<strong>Olive Support</strong>
59+
<small>v${context.version}</small>
60+
</h1>
61+
<p>${taglines.$tagline()}</p>
5062
</div>
5163
</header>
5264
<div class=links>
53-
${renderLink("Dashboard", "#/", hash === "")}
54-
${renderLink("Account", "#/a/", hash.startsWith("#/a/"))}
55-
${renderLink("Orgs", "#/o/", hash.startsWith("#/a/"))}
56-
${renderLink("Chats", "#/c/", hash.startsWith("#/c/"))}
65+
${renderLink("🫒 Dashboard", "#/", hash === "")}
66+
${renderLink("👤 Account", "#/account", hash.startsWith("#/account"))}
67+
${renderLink("🏛 Orgs", "#/orgs", hash.startsWith("#/orgs"))}
68+
${renderLink("💬 Chats", "#/chats", hash.startsWith("#/chats"))}
5769
</div>
5870
</div>
5971
</nav>

‎s/ui/app/style.css.ts‎

Lines changed: 47 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,8 @@ nav {
3636
}
3737
3838
> .navplate {
39-
font-size: 1.5em;
40-
background: #0004;
39+
background: var(--plate);
40+
box-shadow: 0.3em 0.4em 1em #0006;
4141
border-bottom-right-radius: 1em;
4242
overflow: hidden;
4343
@@ -46,40 +46,68 @@ nav {
4646
align-items: center;
4747
gap: 1em;
4848
padding: 1em;
49-
background: #fff4;
49+
background: #0004;
5050
5151
img {
52-
width: 4em;
53-
max-width: 20%;
52+
width: 3em;
53+
max-width: 16%;
5454
height: auto;
55+
filter: drop-shadow(0.1em 0.1em 0.2em #0004);
5556
}
5657
57-
small {
58-
position: relative;
59-
bottom: 0.2em;
60-
font-weight: normal;
61-
font-size: 0.5em;
62-
color: var(--special);
58+
h1 {
59+
font-size: 1em;
60+
strong {
61+
font-size: 1.5em;
62+
font-weight: bold;
63+
}
64+
small {
65+
position: relative;
66+
bottom: 0.2em;
67+
font-weight: normal;
68+
color: var(--special);
69+
}
6370
}
6471
}
6572
6673
.links {
6774
display: flex;
6875
flex-direction: column;
69-
align-items: start;
70-
gap: 1em;
71-
padding: 1em 20%;
76+
gap: 0.5em;
77+
78+
a {
79+
color: var(--prime);
80+
font-weight: bold;
81+
font-size: 1.5em;
82+
border-left: 0.2em solid #fff2;
83+
padding: 0.3em 1em;
84+
background: #fff1;
85+
86+
&:is(:hover, :focus-visible) {
87+
color: color-mix(in oklab, var(--prime), white 20%);
88+
border-left-color: #fff4;
89+
background: #fff2;
90+
}
91+
92+
&[data-active] {
93+
color: white;
94+
border-left-color: color-mix(in oklab, var(--prime), white 50%);
95+
background: #fff3;
96+
}
97+
}
7298
}
7399
}
74100
75101
&:not([data-open]) {
76102
transform: translateX(-100%);
103+
.navplate { box-shadow: none; }
77104
}
78105
}
79106
80107
main {
81108
padding-top: 4em;
82109
height: 100%;
110+
overflow-y: auto;
83111
}
84112
85113
.blanket {
@@ -92,11 +120,14 @@ main {
92120
background var(--anim) linear,
93121
backdrop-filter var(--anim) linear;
94122
95-
96123
&[data-active] {
97124
pointer-events: all;
98125
backdrop-filter: blur(1em);
99-
background: #0004;
126+
background: color-mix(
127+
in oklab,
128+
color-mix(in oklab, var(--plate), var(--bg) 80%),
129+
transparent 10%
130+
);
100131
}
101132
}
102133

‎s/ui/app/utils/taglines.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
2+
import {signal} from "@e280/strata"
3+
import {Dispenser} from "@e280/stz"
4+
5+
export class Taglines {
6+
dispenser = new Dispenser(() => [
7+
"Customer support, but less terrible",
8+
"Customer support, but it's good",
9+
"Simple, secure, and easy",
10+
"We're here to help",
11+
"Support without surveillance",
12+
"Encrypted end-to-end",
13+
"Sane support software",
14+
])
15+
16+
$tagline = signal(this.dispenser.takeRandom())
17+
18+
async nextTagline() {
19+
await this.$tagline.set(this.dispenser.takeRandom())
20+
}
21+
}
22+

‎s/ui/theme.css.ts‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,39 @@ export default css`
55
66
${cssReset}
77
8+
* {
9+
padding: 0;
10+
margin: 0;
11+
box-sizing: border-box;
12+
}
13+
14+
::-webkit-scrollbar { width: 4px; }
15+
::-webkit-scrollbar-track { background: transparent; }
16+
::-webkit-scrollbar-thumb { background: #333; border-radius: 1em; }
17+
::-webkit-scrollbar-thumb:hover { background: #444; }
18+
* {
19+
scrollbar-width: thin;
20+
scrollbar-color: #333 transparent;
21+
}
22+
23+
a {
24+
color: var(--link);
25+
text-decoration: none;
26+
27+
&:visited {
28+
color: color-mix(in srgb, var(--link), purple 30%);
29+
}
30+
31+
&:is(:hover, :focus-visible) {
32+
color: color-mix(in srgb, var(--link), white 10%);
33+
text-decoration: underline;
34+
}
35+
36+
&:active {
37+
color: color-mix(in srgb, var(--link), white 50%);
38+
}
39+
}
40+
841
button[theme="icon"] {
942
background: transparent;
1043
border: none;

0 commit comments

Comments
 (0)