cadence/out-of-your-element
cadence/out-of-your-element
3
7
Fork 3
Code Issues 11 Pull requests 2 Releases 22 Activity

Revert to Stacks 2.5.4

Browse source 
2.5.5 has a regression where the a.s-btn:visited style looks bad.
I can update again when they fix it.
https://github.com/StackExchange/Stacks/pull/1879
This commit is contained in:
Cadence Ember 2025-02-22 12:35:04 +13:00
parent 31cf91d778
commit fb38db5d23
4 changed files with 53 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

8
package-lock.json generated
View file

@ -18,7 +18,7 @@
"@cloudrac3r/pngjs": "^7.0.3",
"@cloudrac3r/pug": "^4.0.4",
"@cloudrac3r/turndown": "^7.1.4",
"@stackoverflow/stacks": "^2.5.7",
"@stackoverflow/stacks": "^2.5.4",
"@stackoverflow/stacks-icons": "^6.0.2",
"ansi-colors": "^4.1.3",
"better-sqlite3": "^11.1.2",
@ -926,9 +926,9 @@
"dev": true
},
"node_modules/@stackoverflow/stacks": {
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/@stackoverflow/stacks/-/stacks-2.7.0.tgz",
"integrity": "sha512-nn4tow6oTsYlpKwOcpPeKclFMvn0Py+rWCZppRWqcEVl9w2+U+nU7QyKsLzySvSFgXoo5hrBPWp5t7AlNVmF0A==",
"version": "2.5.4",
"resolved": "https://registry.npmjs.org/@stackoverflow/stacks/-/stacks-2.5.4.tgz",
"integrity": "sha512-k11SesaE+bZXNoa7IDinkpmu1BgVq7xIV1Gl1fZ5SM00hPi2S/vCyjIupLvJbSt1PAJTlnpBoUIM1ubb0Y7qFg==",
"license": "MIT",
"dependencies": {
"@hotwired/stimulus": "^3.2.2",

2
package.json
View file

@ -27,7 +27,7 @@
"@cloudrac3r/pngjs": "^7.0.3",
"@cloudrac3r/pug": "^4.0.4",
"@cloudrac3r/turndown": "^7.1.4",
"@stackoverflow/stacks": "^2.5.7",
"@stackoverflow/stacks": "^2.5.4",
"@stackoverflow/stacks-icons": "^6.0.2",
"ansi-colors": "^4.1.3",
"better-sqlite3": "^11.1.2",

2
src/web/pug/guild_access_denied.pug
View file

@ -6,7 +6,7 @@ block body
!= icons.Spots.SpotEmptyXL
p You need to log in to manage your servers.
.d-flex.jc-center.g8
a.s-btn.s-btn__icon.s-btn__featured.s-btn__filled(href=rel("/oauth"))
a.s-btn.s-btn__icon.s-btn__blurple.s-btn__filled(href=rel("/oauth"))
!= icons.Icons.IconDiscord
= ` Log in with Discord`
a.s-btn.s-btn__icon.s-btn__matrix.s-btn__filled(href=rel("/log-in-with-matrix"))

73
src/web/pug/includes/template.pug
View file

@ -9,6 +9,49 @@ mixin guild(guild)
ul.s-user-card--awards
li #{discord.guildChannelMap.get(guild.id).filter(c => [0, 5, 15, 16].includes(discord.channels.get(c).type)).length} channels
mixin define-theme(name, h, s, l)
style.
:root {
--#{name}-h: #{h};
--#{name}-s: #{s};
--#{name}-l: #{l};
--#{name}: var(--#{name}-400);
--#{name}-100: hsl(var(--#{name}-h), calc(var(--#{name}-s) + 0 * 1%), clamp(70%, calc(var(--#{name}-l) + 50 * 1%), 95%));
--#{name}-200: hsl(var(--#{name}-h), calc(var(--#{name}-s) + 0 * 1%), clamp(55%, calc(var(--#{name}-l) + 35 * 1%), 90%));
--#{name}-300: hsl(var(--#{name}-h), calc(var(--#{name}-s) + 0 * 1%), clamp(35%, calc(var(--#{name}-l) + 15 * 1%), 75%));
--#{name}-400: hsl(var(--#{name}-h), calc(var(--#{name}-s) + 0 * 1%), clamp(20%, calc(var(--#{name}-l) + 0 * 1%), 60%));
--#{name}-500: hsl(var(--#{name}-h), calc(var(--#{name}-s) + 0 * 1%), clamp(15%, calc(var(--#{name}-l) + -14 * 1%), 45%));
--#{name}-600: hsl(var(--#{name}-h), calc(var(--#{name}-s) + 0 * 1%), clamp(5%, calc(var(--#{name}-l) + -26 * 1%), 30%));
}
mixin define-themed-button(name, theme)
style.
.s-btn.s-btn__#{name} {
--_bu-bg-active: var(--#{theme}-300);
--_bu-bg-hover: var(--#{theme}-200);
--_bu-bg-selected: var(--#{theme}-300);
--_bu-fc: var(--#{theme}-500);
--_bu-fc-active: var(--_bu-fc);
--_bu-fc-hover: var(--#{theme}-500);
--_bu-fc-selected: var(--#{theme}-600);
--_bu-filled-bc: transparent;
--_bu-filled-bc-selected: var(--_bu-filled-bc);
--_bu-filled-bg: var(--#{theme}-400);
--_bu-filled-bg-active: var(--#{theme}-500);
--_bu-filled-bg-hover: var(--#{theme}-500);
--_bu-filled-bg-selected: var(--#{theme}-600);
--_bu-filled-fc: var(--white);
--_bu-filled-fc-active: var(--_bu-filled-fc);
--_bu-filled-fc-hover: var(--_bu-filled-fc);
--_bu-filled-fc-selected: var(--_bu-filled-fc);
--_bu-outlined-bc: var(--#{theme}-400);
--_bu-outlined-bc-selected: var(--#{theme}-500);
--_bu-outlined-bg-selected: var(--_bu-bg-selected);
--_bu-outlined-fc-selected: var(--_bu-fc-selected);
--_bu-number-fc: var(--white);
--_bu-number-fc-filled: var(--#{theme});
}
doctype html
html(lang="en")
head
@ -30,34 +73,12 @@ html(lang="en")
--_ts-multiple-bg: var(--green-400);
--_ts-multiple-fc: var(--white);
}
.s-btn.s-btn__matrix {
--_bu-bg-active: var(--black-300);
--_bu-bg-hover: var(--black-200);
--_bu-bg-selected: var(--black-300);
--_bu-fc: var(--black-500);
--_bu-fc-active: var(--_bu-fc);
--_bu-fc-hover: var(--black-500);
--_bu-fc-selected: var(--black-600);
--_bu-filled-bc: transparent;
--_bu-filled-bc-selected: var(--_bu-filled-bc);
--_bu-filled-bg: var(--black-400);
--_bu-filled-bg-active: var(--black-500);
--_bu-filled-bg-hover: var(--black-500);
--_bu-filled-bg-selected: var(--black-600);
--_bu-filled-fc: var(--white);
--_bu-filled-fc-active: var(--_bu-filled-fc);
--_bu-filled-fc-hover: var(--_bu-filled-fc);
--_bu-filled-fc-selected: var(--_bu-filled-fc);
--_bu-outlined-bc: var(--black-400);
--_bu-outlined-bc-selected: var(--black-500);
--_bu-outlined-bg-selected: var(--_bu-bg-selected);
--_bu-outlined-fc-selected: var(--_bu-fc-selected);
--_bu-number-fc: var(--white);
--_bu-number-fc-filled: var(--black);
}
.s-btn__dropdown:has(+ :popover-open) {
background-color: var(--theme-topbar-item-background-hover, var(--black-200)) !important;
}
+define-theme("blurple", "236", "84%", "64%")
+define-themed-button("blurple", "blurple")
+define-themed-button("matrix", "black")
body.themed.theme-system
header.s-topbar
.s-topbar--skip-link(href="#content") Skip to main content
@ -72,7 +93,7 @@ html(lang="en")
!= icons.Icons.IconSpeechBubble
= ` Log in with Matrix`
if !session.data.userID
a.s-btn.s-btn__icon.s-btn__featured.s-btn__outlined.as-center(href=rel("/oauth"))
a.s-btn.s-btn__icon.s-btn__blurple.s-btn__outlined.as-center(href=rel("/oauth"))
!= icons.Icons.IconDiscord
= ` Log in with Discord`
if guild_id && managed.has(guild_id) && discord.guilds.has(guild_id)