feat: Merge ginger/oauth

This commit is contained in:
Jacob Taylor
2026-05-26 08:14:45 -07:00
parent 2e08ffe646
commit 8bea04b1ed
118 changed files with 6228 additions and 1308 deletions
+22
View File
@@ -0,0 +1,22 @@
html {
height: 100svh;
--bg: oklch(0.44 0.177 353.06);
background-color: var(--bg);
background-image: linear-gradient(180deg, var(--bg) 55%, black 100%);;
}
main {
margin-top: 20vh;
margin-left: 5%;
margin-right: 5%;
color: white;
font-family: monospace;
font-size: 1.3em;
line-height: 1.2;
}
em {
font-size: 1.35em;
font-weight: bold;
white-space: nowrap;
}
+165 -25
View File
@@ -9,6 +9,7 @@
--panel-bg: oklch(0.91 0.042 317.27);
--c1: oklch(0.44 0.177 353.06);
--c2: oklch(0.59 0.158 150.88);
--avatar-color: var(--c2);
--name-lightness: 0.45;
--background-lightness: 0.9;
@@ -26,8 +27,8 @@
@media (prefers-color-scheme: dark) {
color-scheme: dark;
--text-color: #fff;
--secondary: #888;
--text-color: #f5ebeb;
--secondary: #999;
--bg: oklch(0.15 0.042 317.27);
--panel-bg: oklch(0.24 0.03 317.27);
@@ -54,10 +55,13 @@
}
body {
display: grid;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
margin: 0;
padding: 0;
place-items: center;
min-height: 100vh;
color: var(--text-color);
@@ -73,6 +77,7 @@ html {
footer {
padding-inline: 0.25rem;
margin-top: 1rem;
height: max(fit-content, 2rem);
.logo {
@@ -83,12 +88,33 @@ footer {
p {
margin: 1rem 0;
a {
white-space: nowrap;
}
}
ul {
margin: 1rem 0;
}
section {
margin: 1rem 0;
}
em {
color: oklch(from var(--c2) var(--name-lightness) c h);
font-weight: bold;
font-style: normal;
&.negative {
color: red;
}
}
hr {
border-width: 1px;
border-color: var(--secondary);
}
small {
@@ -103,39 +129,59 @@ small.error {
margin-bottom: 0.5rem;
}
.panel {
--preferred-width: 12rem + 40dvw;
--maximum-width: 48rem;
width: min(clamp(24rem, var(--preferred-width), var(--maximum-width)), calc(100dvw - 3rem));
border-radius: var(--border-radius-lg);
background-color: var(--panel-bg);
padding-inline: 1.5rem;
padding-block: 1rem;
box-shadow: 0 0.25em 0.375em hsla(0, 0%, 0%, 0.1);
img.matrix-icon {
@media (prefers-color-scheme: dark) {
filter: invert();
}
}
&.narrow {
--preferred-width: 12rem + 20dvw;
--maximum-width: 36rem;
h1.with-matrix-icon {
display: flex;
align-items: center;
input, button {
width: 100%;
a:last-of-type {
margin-left: auto;
img {
height: 1em;
}
}
}
label {
display: block;
h1 a.back {
font-size: initial;
font-weight: initial;
}
input, button {
label {
display: block;
margin-bottom: 0.2em;
}
a, a:visited {
color: oklch(from var(--c1) var(--name-lightness) c h);
}
code {
color: oklch(from var(--secondary) var(--name-lightness) c h);
}
pre {
background-color: oklch(from var(--panel-bg) calc(l - 0.05) c h);
border-radius: var(--border-radius-sm);
padding: 8px;
}
input, button, a.button {
display: inline-block;
padding: 0.5em;
margin-bottom: 0.5em;
font-size: inherit;
font-family: inherit;
color: white;
line-height: normal;
color: var(--text-color);
text-decoration: none;
background-color: transparent;
border: none;
@@ -151,14 +197,36 @@ input {
}
}
button {
input[type="checkbox"] {
display: inline;
margin: 0;
width: auto !important;
}
button, a.button {
color: white;
background-color: var(--c1);
transition: opacity .2s;
text-align: center;
margin: 0.5rem 0;
&:enabled:hover {
opacity: 0.8;
cursor: pointer;
}
&:disabled {
color: lightgray;
background-color: gray;
}
&:not(:disabled) {
transition: linear color, background-color 0.1s;
}
&:visited {
color: white;
}
}
h1 {
@@ -166,6 +234,77 @@ h1 {
margin-bottom: 0.67em;
}
ul.bullet-separated {
display: inline-block;
margin: 0;
padding: 0;
li {
display: inline;
flex: 1;
list-style-type: none;
&:not(:first-child)::before {
content: "• ";
}
}
}
.fullwidth {
width: 100%;
margin-bottom: 0 !important;
}
.select-all {
user-select: all;
}
.panel {
--preferred-width: 12rem + 40dvw;
--maximum-width: 48rem;
--minimum-width: 32rem;
width: min(clamp(var(--minimum-width), var(--preferred-width), var(--maximum-width)), calc(100dvw - 3rem));
border-radius: var(--border-radius-lg);
background-color: var(--panel-bg);
padding-inline: 1.5rem;
padding-block: 1rem;
margin-top: 1em;
margin-bottom: auto;
box-shadow: 0 0.25em 0.375em hsla(0, 0%, 0%, 0.1);
&.middle {
margin-top: 0;
margin-bottom: 0;
}
&.narrow {
--preferred-width: 12rem + 20dvw;
--maximum-width: 36rem;
input, button, a.button {
width: 100%;
}
}
&:not(.narrow) form p {
margin-bottom: 0;
}
}
.project-name {
font-weight: bold;
text-decoration: none !important;
background: linear-gradient(
130deg,
oklch(from var(--c1) var(--name-lightness) c h),
oklch(from var(--c2) var(--name-lightness) c h)
);
background-clip: text;
color: transparent;
filter: brightness(1.2);
}
@media (max-width: 425px) {
main {
padding-block-start: 2rem;
@@ -175,11 +314,12 @@ h1 {
.panel {
border-radius: 0;
width: 100%;
margin-top: 0;
}
}
@media (max-width: 799px) {
input, button {
input, button, a.button {
width: 100%;
}
}
+27 -12
View File
@@ -11,12 +11,17 @@
font-size: calc(var(--avatar-size) * 0.5);
font-weight: 700;
line-height: calc(var(--avatar-size) - 2px);
user-select: none;
color: oklch(from var(--c1) calc(l + 0.2) c h);
background-color: var(--c1);
color: oklch(from var(--avatar-color) calc(l + 0.2) c h);
background-color: var(--avatar-color);
}
.user-card {
.red-avatar {
--avatar-color: var(--c1);
}
.card {
display: flex;
flex-direction: row;
align-items: center;
@@ -29,16 +34,26 @@
.info {
flex: 1 1;
p {
margin: 0;
.name {
font-weight: bold;
}
&.display-name {
font-weight: 700;
}
&:nth-of-type(2) {
color: var(--secondary);
}
.id {
color: var(--secondary);
font-weight: normal;
}
}
&.danger {
display: block;
background-color: oklch(from red 0.2 c h);
border: 1px dashed red;
}
}
.card-list {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 10px;
}
+8 -1
View File
@@ -2,12 +2,19 @@
font-family: monospace;
font-size: x-small;
font-weight: 700;
transform: translate(1rem, 1.6rem);
transform: translate(0rem, 2rem);
color: var(--secondary);
user-select: none;
margin: 0;
padding: 0;
background: none;
}
h1 {
display: flex;
align-items: center;
}
code {
white-space: pre-wrap;
}
+22
View File
@@ -0,0 +1,22 @@
.avatars {
justify-content: center;
display: flex;
flex-direction: row;
.separator {
align-self: center;
margin-inline: 1em;
color: var(--secondary);
font-size: x-large;
font-weight: bold;
user-select: none;
}
}
.identity {
margin-block: 1em;
color: var(--secondary);
font-size: small;
font-style: italic;
text-align: center;
}
+2 -10
View File
@@ -1,11 +1,3 @@
.project-name {
text-decoration: none;
background: linear-gradient(
130deg,
oklch(from var(--c1) var(--name-lightness) c h),
oklch(from var(--c2) var(--name-lightness) c h)
);
background-clip: text;
color: transparent;
filter: brightness(1.2);
.button {
margin: 0 !important;
}
+61
View File
@@ -0,0 +1,61 @@
.centered-links {
display: flex;
justify-content: space-between;
:last-child {
margin-left: auto;
}
}
.text-rule {
display: flex;
align-items: center;
text-align: center;
color: var(--secondary);
}
.text-rule::before, .text-rule::after {
content: '';
flex: 1;
border-bottom: 1px solid var(--secondary);
}
.text-rule:not(:empty)::before {
margin-right: 1rem;
}
.text-rule:not(:empty)::after {
margin-left: 1rem;
}
.username-input {
display: flex;
padding: 0.5em;
margin-bottom: 0.5em;
line-height: 1;
border-radius: var(--border-radius-sm);
border: 2px solid var(--secondary);
&:has(input:focus-visible) {
outline: 2px solid var(--c1);
border-color: transparent;
}
input {
flex: 1;
padding: 0;
margin: 0;
border: none;
outline: none;
}
span {
flex: 0;
color: var(--secondary);
&:first-of-type {
margin-inline-end: 0.5em;
}
}
}
+14
View File
@@ -0,0 +1,14 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 520 520" style="enable-background:new 0 0 520 520;" xml:space="preserve">
<path d="M13.7,11.9v496.2h35.7V520H0V0h49.4v11.9H13.7z"/>
<path d="M166.3,169.2v25.1h0.7c6.7-9.6,14.8-17,24.2-22.2c9.4-5.3,20.3-7.9,32.5-7.9c11.7,0,22.4,2.3,32.1,6.8
c9.7,4.5,17,12.6,22.1,24c5.5-8.1,13-15.3,22.4-21.5c9.4-6.2,20.6-9.3,33.5-9.3c9.8,0,18.9,1.2,27.3,3.6c8.4,2.4,15.5,6.2,21.5,11.5
c6,5.3,10.6,12.1,14,20.6c3.3,8.5,5,18.7,5,30.7v124.1h-50.9V249.6c0-6.2-0.2-12.1-0.7-17.6c-0.5-5.5-1.8-10.3-3.9-14.3
c-2.2-4.1-5.3-7.3-9.5-9.7c-4.2-2.4-9.9-3.6-17-3.6c-7.2,0-13,1.4-17.4,4.1c-4.4,2.8-7.9,6.3-10.4,10.8c-2.5,4.4-4.2,9.4-5,15.1
c-0.8,5.6-1.3,11.3-1.3,17v103.3h-50.9v-104c0-5.5-0.1-10.9-0.4-16.3c-0.2-5.4-1.3-10.3-3.1-14.9c-1.8-4.5-4.8-8.2-9-10.9
c-4.2-2.7-10.3-4.1-18.5-4.1c-2.4,0-5.6,0.5-9.5,1.6c-3.9,1.1-7.8,3.1-11.5,6.1c-3.7,3-6.9,7.3-9.5,12.9c-2.6,5.6-3.9,13-3.9,22.1
v107.6h-50.9V169.2H166.3z"/>
<path d="M506.3,508.1V11.9h-35.7V0H520v520h-49.4v-11.9H506.3z"/>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

+7
View File
@@ -0,0 +1,7 @@
const SLOWDOWN_TIMEOUT = 5 * 1000;
document.querySelectorAll(".slowdown").forEach((element) => element.setAttribute("disabled", ""));
setTimeout(() => {
document.querySelectorAll(".slowdown").forEach((element) => element.removeAttribute("disabled"));
}, SLOWDOWN_TIMEOUT);