- ${
- this.icon
- ? html`
`
- : ''
- }
+
+ ${when(
+ this.icon,
+ () => html``,
+ )}
${this.name}
diff --git a/src/components/Arbor/Button.ts b/src/components/Arbor/Button.ts
deleted file mode 100644
index 596f301..0000000
--- a/src/components/Arbor/Button.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import { LitElement, css, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-
-import '@components/EveLink';
-
-@customElement('arx-arbor-button')
-export class ArborButton extends LitElement {
- @property({ type: String }) href = '';
- @property({ type: String }) target = '';
- @property({ type: String }) rel = '';
- @property({ type: Boolean }) disabled = false;
-
- get hrefValue() {
- if (!this.href || this.disabled) return 'javascript:void(0)';
- return this.href;
- }
-
- static override styles = [
- css`
- arx-eve-link::part(link) {
- color: white;
- text-decoration: none;
- }
-
- arx-eve-link {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- background: var(--accent);
- border: none;
- padding: 0.75rem 0.75rem;
- border-radius: 0.25rem;
- text-decoration: none;
- font-size: 0.9rem;
- font-weight: 500;
- line-height: 1.2;
- cursor: pointer;
- transition: all 0.2s ease-in-out;
- box-shadow: var(--shadow-sm);
- gap: 5px;
- }
-
- arx-eve-link:hover {
- transform: translateY(-1px);
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
- background: color-mix(in oklch, var(--accent), black 15%);
- }
-
- arx-eve-link:focus {
- outline: none;
- box-shadow: var(--shadow-md);
- }
-
- arx-eve-link:active {
- transform: translateY(0);
- box-shadow: var(--shadow-md);
- }
-
- arx-eve-link.disabled {
- opacity: 0.6;
- cursor: not-allowed;
- }
- `,
- ];
-
- override render() {
- return html`
-
-
-
- `;
- }
-}
diff --git a/src/components/Arbor/ForumCategory.ts b/src/components/Arbor/ForumCategory.ts
index f9dd5e3..06609ba 100644
--- a/src/components/Arbor/ForumCategory.ts
+++ b/src/components/Arbor/ForumCategory.ts
@@ -1,6 +1,8 @@
import { LitElement, css, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
+import '@components/General/Button';
+
@customElement('arx-arbor-forum-category')
export class ArborForumCategory extends LitElement {
@property({ type: String }) override title = '';
@@ -9,21 +11,45 @@ export class ArborForumCategory extends LitElement {
static override styles = [
css`
.forum-category {
- background: oklch(100% 0 0);
- border-radius: 0.5rem;
- box-shadow: var(--shadow-xl);
- margin-block-end: 1.5rem;
+ background: var(--color-base-100);
+ border-radius: var(--radius-box);
+ border: var(--border) solid var(--color-base-300);
+ margin-block-end: 2rem;
+ box-shadow: calc(var(--depth) * 2px) calc(var(--depth) * 2px)
+ calc(var(--depth) * 4px)
+ oklch(from var(--color-base-content) l c h / 0.1),
+ calc(var(--depth) * -1px) calc(var(--depth) * -1px)
+ calc(var(--depth) * 3px)
+ oklch(from var(--color-base-100) l c h / 0.4);
+ overflow: hidden;
}
.category-header {
- background: var(--primary);
- color: oklch(100% 0 0);
- padding: 1rem 1.5rem;
- border-radius: 0.5rem 0.5rem 0 0;
- font-weight: 500;
+ background: var(--color-secondary);
+ color: var(--color-secondary-content);
+ padding: 1.25rem 1.75rem;
+ font-weight: 600;
+ font-size: 1.1rem;
+ letter-spacing: 0.01em;
display: flex;
justify-content: space-between;
align-items: center;
+ border-bottom: var(--border) solid var(--color-base-300);
+ }
+
+ ::slotted(:first-child) {
+ margin-top: 1rem;
+ }
+
+ ::slotted(:last-child) {
+ margin-bottom: 1rem;
+ }
+
+ .empty-state {
+ padding: 2rem 1.75rem;
+ color: var(--color-secondary);
+ font-style: italic;
+ text-align: center;
}
`,
];
@@ -33,12 +59,13 @@ export class ArborForumCategory extends LitElement {
- No topics...
+ No topics yet...
`;
diff --git a/src/components/Arbor/ForumPost.ts b/src/components/Arbor/ForumPost.ts
index aeab7c6..280c5b1 100644
--- a/src/components/Arbor/ForumPost.ts
+++ b/src/components/Arbor/ForumPost.ts
@@ -19,47 +19,50 @@ export class ForumPost extends LitElement {
.post {
display: flex;
flex-direction: row;
- border-radius: 16px;
- background: #ffffff;
- box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04),
- 0 1px 3px rgba(0, 0, 0, 0.03);
- margin-block-end: 0.75rem;
+ border-radius: var(--radius-box);
+ background: var(--color-base-100);
+ box-shadow: calc(var(--depth) * 2px) calc(var(--depth) * 2px)
+ calc(var(--depth) * 4px)
+ oklch(from var(--color-base-content) l c h / 0.1);
+ margin-block-end: 1rem;
overflow: hidden;
transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
isolation: isolate;
+ border: var(--border) solid var(--color-base-300);
will-change: transform;
+ }
- &:hover {
- transform: translateY(2px);
- box-shadow: 0 8px 28px rgba(0, 0, 0, 0.07),
- 0 2px 4px rgba(0, 0, 0, 0.04);
- }
+ .post:hover {
+ transform: translateY(-2px);
+ box-shadow: calc(var(--depth) * 3px) calc(var(--depth) * 3px)
+ calc(var(--depth) * 6px)
+ oklch(from var(--color-base-content) l c h / 0.15);
}
.post--highlighted {
position: relative;
border-inline-start: none;
+ }
- &::before {
- content: "";
- position: absolute;
- inset-inline-start: 0;
- top: 0;
- bottom: 0;
- width: 4px;
- background: #4361ee;
- border-radius: 4px 0 0 4px;
- }
+ .post--highlighted::before {
+ content: "";
+ position: absolute;
+ inset-inline-start: 0;
+ top: 0;
+ bottom: 0;
+ width: 4px;
+ background: var(--color-accent);
+ border-radius: 4px 0 0 4px;
}
.post__sidebar {
padding: clamp(1rem, 4vw, 1.5rem);
- border-right: 1px solid rgba(0, 0, 0, 0.06);
+ border-right: var(--border) solid var(--color-base-300);
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
- background: rgba(0, 0, 0, 0.01);
+ background: var(--color-base-200);
}
.post__main {
@@ -73,10 +76,8 @@ export class ForumPost extends LitElement {
display: flex;
align-items: center;
padding: 1rem clamp(1rem, 4vw, 1.5rem);
- border-bottom: 1px solid rgba(0, 0, 0, 0.06);
- background: rgba(0, 0, 0, 0.01);
- backdrop-filter: blur(8px);
- -webkit-backdrop-filter: blur(8px);
+ border-bottom: var(--border) solid var(--color-base-300);
+ background: var(--color-base-200);
}
.post__time {
@@ -84,17 +85,18 @@ export class ForumPost extends LitElement {
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
- color: rgba(0, 0, 0, 0.6);
+ color: var(--color-secondary);
font-weight: 500;
+ }
- & iconify-icon {
- color: rgba(0, 0, 0, 0.4);
- }
+ .post__time iconify-icon {
+ color: var(--color-secondary);
+ opacity: 0.7;
}
.post__permalink {
margin-inline-start: auto;
- color: #4361ee;
+ color: var(--color-accent);
border: none;
background: transparent;
cursor: pointer;
@@ -104,22 +106,16 @@ export class ForumPost extends LitElement {
display: grid;
place-items: center;
transition: all 0.2s ease;
+ }
- &:hover {
- background: rgba(67, 97, 238, 0.08);
- transform: scale(1.05);
- }
-
- &:focus-visible {
- outline: 2px solid #4361ee;
- outline-offset: 2px;
- }
+ .post__permalink:hover {
+ transform: scale(1.05);
}
.post__content {
padding: clamp(1.25rem, 5vw, 1.75rem);
line-height: 1.7;
- color: rgba(0, 0, 0, 0.87);
+ color: var(--color-base-content);
overflow-wrap: break-word;
flex: 1;
font-size: clamp(0.95rem, 2vw, 1rem);
@@ -129,90 +125,25 @@ export class ForumPost extends LitElement {
.post__actions {
display: flex;
padding: 0.75rem clamp(0.75rem, 3vw, 1.25rem);
- border-top: 1px solid rgba(0, 0, 0, 0.06);
+ border-top: var(--border) solid var(--color-base-300);
gap: clamp(0.5rem, 2vw, 0.75rem);
- background: rgba(0, 0, 0, 0.01);
- }
-
- .action-button {
- display: flex;
- align-items: center;
- gap: 0.5rem;
- padding: 0.5rem 0.75rem;
- border-radius: 10px;
- background: transparent;
- border: none;
- font-family: inherit;
- font-size: 0.875rem;
- font-weight: 500;
- color: rgba(0, 0, 0, 0.6);
- cursor: pointer;
- transition: all 0.2s ease;
-
- & iconify-icon {
- font-size: 1.25rem;
- }
-
- &:hover:not(:disabled) {
- background: rgba(0, 0, 0, 0.04);
- color: rgba(0, 0, 0, 0.87);
- transform: translateY(-1px);
- }
-
- &:focus-visible {
- outline: 2px solid rgba(0, 0, 0, 0.2);
- outline-offset: 1px;
- }
-
- &:active:not(:disabled) {
- transform: translateY(1px) scale(0.98);
- }
-
- &:disabled {
- opacity: 0.5;
- cursor: not-allowed;
- }
- }
-
- .action-button--primary {
- color: #4361ee;
-
- &:hover:not(:disabled) {
- background: rgba(67, 97, 238, 0.08);
- }
-
- &:focus-visible {
- outline-color: #4361ee;
- }
+ background: var(--color-base-200);
}
@media (max-width: 768px) {
.post {
flex-direction: column;
- margin-inline: -1rem;
- border-radius: 0;
margin-block-end: 1.5rem;
}
.post__sidebar {
border-right: none;
- border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+ border-bottom: var(--border) solid var(--color-base-300);
padding: 1rem;
flex-direction: row;
justify-content: flex-start;
gap: 1rem;
}
-
- .action-button {
- padding: 0.625rem;
- justify-content: center;
- flex: 1;
- border-radius: 10px;
-
- & span {
- display: none;
- }
- }
}
@media (max-width: 480px) {
@@ -290,13 +221,13 @@ export class ForumPost extends LitElement {
${formatDateTime(this.date)}
-
Last Block:
-
${this.lastBlock?.toLocaleString()}
+
+ ${this.lastBlock.height.toLocaleString()}
+
+
+
+ this.copyToClipboard(this.lastBlock!.id)}
+ >
+ ${this.formatBlockId(this.lastBlock.id)}
+
+
+
+
+ ${formatDateTime(this.lastBlock.timestamp * 1000)}
+
+
+
+
+ ${this.formatSize(this.lastBlock.size)}
+ (${this.lastBlock.tx_count.toLocaleString()} txs)
+
+
+ `;
+ }
+
+ override render() {
+ return html`
+
+
+ ${when(
+ this.error,
+ () => this.renderError(),
+ () =>
+ when(
+ this.isLoading && !this.lastBlock,
+ () => this.renderLoading(),
+ () => this.renderBlockData(),
+ ),
+ )}
`;
}
}
diff --git a/src/components/profiles/CardProfile.ts b/src/components/profiles/CardProfile.ts
index b1354fe..aa9cc57 100644
--- a/src/components/profiles/CardProfile.ts
+++ b/src/components/profiles/CardProfile.ts
@@ -2,6 +2,10 @@ import type { NDKUserProfile } from '@nostr-dev-kit/ndk';
import { getProfile } from '@utils/profileUtils';
import { LitElement, css, html } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
+import { when } from 'lit/directives/when.js';
+
+import '@components/EveLink';
+import '@components/General/Card';
@customElement('arx-nostr-card-profile')
export class CardProfile extends LitElement {
@@ -25,50 +29,82 @@ export class CardProfile extends LitElement {
static override styles = [
css`
- .card {
- padding: 1rem;
- border: 1px solid var(--border);
- border-radius: 8px;
- max-width: 300px;
- }
-
a {
- color: var(--primary);
+ color: var(--color-accent);
text-decoration: none;
display: inline-flex;
align-items: center;
- gap: 0.5rem;
+ gap: 0.75rem;
+ transition: all 0.2s ease;
}
h3 {
margin: 0;
font-size: 1.2rem;
+ color: var(--color-base-content);
+ font-weight: 600;
}
p {
margin: 0.25rem 0;
- color: var(--secondary);
+ color: var(--color-secondary);
font-size: 0.9rem;
}
.bio {
white-space: pre-line;
font-size: 0.9rem;
- color: var(--primary);
- margin: 0.5rem 0;
- padding-top: 0.5rem;
- border-top: 1px solid var(--border);
+ color: var(--color-base-content);
+ margin: 0.75rem 0 0.5rem;
+ padding-top: 0.75rem;
+ border-top: var(--border) solid var(--color-base-300);
+ line-height: 1.5;
}
.website-link {
display: block;
- margin-top: 0.5rem;
+ margin-top: 0.75rem;
font-size: 0.9rem;
- color: var(--accent);
+ color: var(--color-accent);
+ position: relative;
+ width: fit-content;
+ padding: 0.25rem 0;
+ }
+
+ .website-link::after {
+ content: "";
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 0;
+ height: var(--border);
+ background-color: var(--color-accent);
+ transition: width 0.25s ease;
}
.website-link:hover {
- text-decoration: underline;
+ color: oklch(from var(--color-accent) l calc(c * 1.1) h);
+ }
+
+ .website-link:hover::after {
+ width: 100%;
+ }
+
+ router-link {
+ display: flex;
+ align-items: center;
+ border-radius: calc(var(--radius-selector) / 2);
+ padding: 0.25rem;
+ transition: all 0.2s ease;
+ }
+
+ router-link:hover {
+ background-color: oklch(from var(--color-base-300) l c h / 0.5);
+ }
+
+ router-link:focus-visible {
+ outline: var(--border) solid var(--color-accent);
+ outline-offset: 2px;
}
`,
];
@@ -101,21 +137,31 @@ export class CardProfile extends LitElement {
override render() {
return html`
-
-
-
+
+
+
${this.displayName}
-
${this.firstLineOfAbout}
+ ${when(this.firstLineOfAbout, () => html`
${this.firstLineOfAbout}
`)}
-
+
-
${this.about}
-
-
- ${this.website}
-
-
+ ${when(this.about, () => html`
${this.about}
`)}
+ ${when(
+ this.website,
+ () => html`
+ ${this.website}
+ `,
+ )}
+
`;
}
}
diff --git a/src/components/profiles/LargeProfile.ts b/src/components/profiles/LargeProfile.ts
index c3f5944..f2b70dd 100644
--- a/src/components/profiles/LargeProfile.ts
+++ b/src/components/profiles/LargeProfile.ts
@@ -4,6 +4,8 @@ import { getProfile } from '@utils/profileUtils';
import { LitElement, css, html } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
+import '@components/EveLink';
+
@customElement('arx-nostr-large-profile')
export class LargeProfile extends LitElement {
@property() profile!: NDKUserProfile;
@@ -20,19 +22,58 @@ export class LargeProfile extends LitElement {
static override styles = [
css`
- a {
- color: var(--primary);
+ :host {
+ display: block;
+ }
+
+ arx-eve-link {
+ color: var(--color-base-content);
text-decoration: none;
- display: inline-flex;
+ display: flex;
align-items: center;
- gap: 0.5rem;
+ gap: 0.75rem;
+ padding: 0.75rem;
+ border-radius: var(--radius-selector);
+ transition: all 0.2s ease;
+ }
+
+ arx-eve-link:hover {
+ background-color: oklch(from var(--color-base-300) l c h / 0.5);
+ }
+
+ arx-eve-link:focus-visible {
+ outline: var(--border) solid var(--color-accent);
+ outline-offset: 2px;
+ }
+
+ h3 {
+ margin: 0 0 0.35rem 0;
+ font-size: 1.1rem;
+ font-weight: 600;
+ color: var(--color-base-content);
}
.bio {
white-space: pre-line;
font-size: 0.9rem;
- color: var(--primary);
- margin: 0.5rem 0;
+ color: var(--color-secondary);
+ margin: 0;
+ line-height: 1.4;
+ max-width: 24rem;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ }
+
+ arx-nostr-avatar {
+ flex-shrink: 0;
+ transition: transform 0.2s ease;
+ }
+
+ arx-eve-link:hover arx-nostr-avatar {
+ transform: scale(1.05);
}
`,
];
@@ -49,13 +90,16 @@ export class LargeProfile extends LitElement {
override render() {
return html`
-
-
+
+
${this.displayName}
${this.about}
-
+
`;
}
}
diff --git a/src/components/profiles/MediumProfile.ts b/src/components/profiles/MediumProfile.ts
index d25b8eb..a878ffb 100644
--- a/src/components/profiles/MediumProfile.ts
+++ b/src/components/profiles/MediumProfile.ts
@@ -22,12 +22,52 @@ export class MediumProfile extends LitElement {
static override styles = [
css`
- arx-eve-link::part(link) {
- color: var(--primary);
+ :host {
+ display: block;
+ }
+
+ arx-eve-link {
+ color: var(--color-base-content);
text-decoration: none;
- display: inline-flex;
+ display: flex;
align-items: center;
gap: 0.5rem;
+ padding: 0.5rem;
+ border-radius: var(--radius-selector);
+ transition: all 0.2s ease;
+ }
+
+ arx-eve-link:hover {
+ background-color: oklch(from var(--color-base-300) l c h / 0.5);
+ }
+
+ arx-eve-link:focus-visible {
+ outline: var(--border) solid var(--color-accent);
+ outline-offset: 2px;
+ }
+
+ .display-name {
+ font-weight: 500;
+ color: var(--color-base-content);
+ margin-bottom: 0.25rem;
+ }
+
+ .bio {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ font-size: 0.85rem;
+ color: var(--color-secondary);
+ max-width: 180px;
+ }
+
+ arx-nostr-avatar {
+ flex-shrink: 0;
+ transition: transform 0.2s ease;
+ }
+
+ arx-eve-link:hover arx-nostr-avatar {
+ transform: scale(1.05);
}
`,
];
diff --git a/src/components/profiles/ShortProfile.ts b/src/components/profiles/ShortProfile.ts
index d449fcf..9768181 100644
--- a/src/components/profiles/ShortProfile.ts
+++ b/src/components/profiles/ShortProfile.ts
@@ -18,12 +18,43 @@ export class ShortProfile extends LitElement {
static override styles = [
css`
- arx-eve-link::part(link) {
- color: var(--primary);
+ :host {
+ display: inline-block;
+ }
+
+ arx-eve-link {
+ color: var(--color-base-content);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
+ padding: 0.25rem 0.5rem;
+ border-radius: var(--radius-selector);
+ transition: all 0.2s ease;
+ white-space: nowrap;
+ }
+
+ arx-eve-link:hover {
+ background-color: oklch(from var(--color-base-300) l c h / 0.5);
+ }
+
+ arx-eve-link:focus-visible {
+ outline: var(--border) solid var(--color-accent);
+ outline-offset: 2px;
+ }
+
+ span {
+ font-weight: 500;
+ font-size: 0.95rem;
+ }
+
+ arx-nostr-avatar {
+ flex-shrink: 0;
+ transition: transform 0.2s ease;
+ }
+
+ arx-eve-link:hover arx-nostr-avatar {
+ transform: scale(1.05);
}
`,
];
diff --git a/src/index.html b/src/index.html
index 44a6910..5318948 100644
--- a/src/index.html
+++ b/src/index.html
@@ -2,7 +2,6 @@
-
diff --git a/src/main.ts b/src/main.ts
index c2324f2..001d8e7 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,5 +1,4 @@
-import './style.scss';
-
+import './style.css';
import '@components/ErrorView';
import '@components/NostrAvatar';
import '@components/LoadingView';
diff --git a/src/routes/404Page.ts b/src/routes/404Page.ts
index 2b7b267..a14c1c0 100644
--- a/src/routes/404Page.ts
+++ b/src/routes/404Page.ts
@@ -2,7 +2,9 @@ import { LitElement, css, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import type { RouteParams } from './router';
-import '@components/EveLink';
+import '@components/General/Button';
+import '@components/General/Card';
+import '@components/General/Fieldset';
@customElement('arx-404-page')
export class FourOhFourPage extends LitElement {
@@ -17,30 +19,27 @@ export class FourOhFourPage extends LitElement {
static override styles = [
css`
- .not-found {
+ :host {
display: flex;
align-items: center;
justify-content: center;
- font-family: "Inter", sans-serif;
- padding: 1rem;
- }
-
- .content {
- max-width: 600px;
- text-align: center;
+ font-family: system-ui, -apple-system, sans-serif;
+ padding: 2rem 1rem;
+ min-height: 80vh;
+ background-color: var(--color-base-100);
}
.error-container h1 {
margin: 0;
- }
-
- .error-container h1 * {
- position: relative;
- margin: 0 -20px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
.spinning-gear {
- animation: spin 5s linear infinite;
+ animation: spin 8s linear infinite;
+ font-size: 7rem;
+ margin: 0 -10px;
}
@keyframes spin {
@@ -52,37 +51,34 @@ export class FourOhFourPage extends LitElement {
}
}
- .path-container {
- background: rgba(255, 255, 255, 0.5);
- backdrop-filter: blur(10px);
- border: 1px solid rgba(255, 255, 255, 0.6);
- box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
- margin-bottom: 2rem;
- padding: 1rem;
- backdrop-filter: blur(10px);
- }
-
- .path-text {
- color: var(--secondary);
- margin: 0 0 0.5rem 0;
- font-size: 0.9rem;
+ arx-fieldset {
+ margin-top: 1rem;
+ text-align: center;
}
.path {
- font-family: "JetBrains Mono", monospace;
- color: var(--primary);
+ font-family: monospace;
+ color: var(--color-accent);
word-break: break-all;
- font-size: 1.1rem;
- padding: 0.5rem;
- background: rgba(0, 0, 0, 0.2);
- border-radius: 4px;
+ font-size: 1rem;
+ padding: 0.75rem;
+ background: oklch(from var(--color-base-content) l c h / 0.1);
+ border-radius: var(--radius-field);
display: inline-block;
max-width: 100%;
+ text-align: left;
}
h1 {
- font-size: 8rem;
+ font-size: 7rem;
font-weight: 800;
+ color: var(--color-base-content);
+ line-height: 1;
+ margin-bottom: 1rem;
+ }
+
+ .four {
+ padding: 0 0.25rem;
}
.message-text {
@@ -92,108 +88,100 @@ export class FourOhFourPage extends LitElement {
gap: 0.75rem;
}
- .message-text .inline-icon {
- font-size: 1.25rem;
- flex-shrink: 0;
- }
-
.status {
- font-size: 1.25rem;
- color: #94a3b8;
- margin: 1rem 0;
+ font-size: 1.5rem;
+ color: var(--color-base-content);
+ margin: 0.5rem 0;
+ font-weight: 600;
}
.sub-text {
- color: #64748b;
+ color: var(--color-secondary);
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
- margin-bottom: 2rem;
- }
-
- .inline-icon {
- font-size: 1.25rem;
+ margin-bottom: 2.5rem;
+ font-size: 1.1rem;
}
.actions {
display: flex;
- gap: 1rem;
+ gap: 1.25rem;
justify-content: center;
flex-wrap: wrap;
}
- .primary-button {
- display: flex;
- align-items: center;
- gap: 0.5rem;
- padding: 0.75rem 1.5rem;
- border-radius: 8px;
- font-weight: 600;
- transition: all 0.3s ease;
- text-decoration: none;
- background: var(--accent);
- color: white;
-
- &:hover {
- background: var(--secondary);
- transform: translateY(-2px);
+ @media (max-width: 640px) {
+ h1 {
+ font-size: 5rem;
}
- }
- arx-eve-link::part(link) {
- color: white;
- text-decoration: none;
+ .spinning-gear {
+ font-size: 5rem;
+ }
+
+ .status {
+ font-size: 1.25rem;
+ }
+
+ .sub-text {
+ font-size: 1rem;
+ }
+
+ .actions {
+ flex-direction: column;
+ align-items: center;
+ }
}
`,
];
override render() {
return html`
-
-
-
-
- 4
-
- 4
-
-
-
-
-
Page not found.
-
- The page you are looking for does not exist.
-
-
-
-
-
- Go back
-
-
-
- Home
-
+
+
+
+ 4
+
+ 4
+
+
+
+ ${this.path}
+
+
+
Page not found
+
+ The page you are looking for does not exist
+
+
`;
}
}
diff --git a/src/routes/Arbor/Home.ts b/src/routes/Arbor/Home.ts
index f939751..4d7e636 100644
--- a/src/routes/Arbor/Home.ts
+++ b/src/routes/Arbor/Home.ts
@@ -2,16 +2,13 @@ import { getSigner, ndk } from '@/ndk';
import { NDKEvent, type NDKKind, type NDKSubscription } from '@nostr-dev-kit/ndk';
import { LitElement, css, html } from 'lit';
import { customElement, state } from 'lit/decorators.js';
+import { map } from 'lit/directives/map.js';
+import { when } from 'lit/directives/when.js';
import '@components/Breadcrumbs';
import '@components/Arbor/ForumTopic';
import '@components/Arbor/ForumCategory';
-import '@components/Arbor/Button';
-import '@components/Prompt';
-
-import type { EvePrompt } from '@components/Prompt';
-import { map } from 'lit/directives/map.js';
-import { when } from 'lit/directives/when.js';
+import '@components/General/Prompt';
interface ForumTopic {
id: string;
@@ -164,9 +161,10 @@ export class ArborForum extends LitElement {
>
-
- New Category
-
+
Topic ID: ${this.topicId}
-
+ >
${this.error ? html` ${this.error}
` : null}
-
this.dispatchEvent(new CustomEvent('cancel'))}
?disabled=${this.isCreating}
- >
- Cancel
-
+ >
-
${this.isCreating ? 'Creating...' : 'Create'}
-
+
`;
diff --git a/src/routes/Arbor/NewTopic.ts b/src/routes/Arbor/NewTopic.ts
index f508e82..23f3403 100644
--- a/src/routes/Arbor/NewTopic.ts
+++ b/src/routes/Arbor/NewTopic.ts
@@ -3,6 +3,10 @@ import { NDKEvent } from '@nostr-dev-kit/ndk';
import { LitElement, css, html } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
+import '@components/General/Input';
+import '@components/General/Textarea';
+import '@components/General/Button';
+
@customElement('arx-arbor-topic-creator')
export class ArborTopicCreator extends LitElement {
@property({ type: String })
@@ -22,20 +26,6 @@ export class ArborTopicCreator extends LitElement {
display: block;
}
- input,
- textarea {
- width: 100%;
- margin-bottom: 1rem;
- padding: 0.5rem;
- border: 1px solid #ccc;
- border-radius: 4px;
- }
-
- textarea {
- min-height: 200px;
- resize: vertical;
- }
-
.error {
color: red;
margin-bottom: 1rem;
@@ -108,35 +98,34 @@ export class ArborTopicCreator extends LitElement {
return html`
Category ID: ${this.categoryId}
-
+ >
-
+ >
`;
}
diff --git a/src/routes/Arbor/TopicView.ts b/src/routes/Arbor/TopicView.ts
index 94e8fc3..f522906 100644
--- a/src/routes/Arbor/TopicView.ts
+++ b/src/routes/Arbor/TopicView.ts
@@ -5,7 +5,7 @@ import { customElement, property, state } from 'lit/decorators.js';
import '@components/Breadcrumbs';
import '@components/Arbor/ForumPost';
-import '@components/Arbor/Button';
+import '@components/General/Button';
import { map } from 'lit/directives/map.js';
import { when } from 'lit/directives/when.js';
@@ -34,23 +34,24 @@ export class ArborTopicView extends LitElement {
:host {
display: block;
margin: 0 auto;
- padding: 1rem;
- color: #1a1a1a;
- font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
.topic-container {
- background: #ffffff;
- border-radius: 12px;
- box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
+ background: var(--color-base-100);
+ border-radius: var(--radius-box);
+ border: var(--border) solid var(--color-base-300);
overflow: hidden;
margin-top: 1.5rem;
- border: 1px solid rgba(0, 0, 0, 0.08);
+ box-shadow: calc(var(--depth) * 2px) calc(var(--depth) * 2px)
+ calc(var(--depth) * 4px)
+ oklch(from var(--color-base-content) l c h / 0.1),
+ calc(var(--depth) * -1px) calc(var(--depth) * -1px)
+ calc(var(--depth) * 3px) oklch(from var(--color-base-100) l c h / 0.4);
}
.header {
- background: var(--primary);
- color: oklch(100% 0 0);
+ background: var(--color-secondary);
+ color: var(--color-secondary-content);
padding: 1.5rem 2rem;
font-weight: 600;
font-size: 1.25rem;
@@ -58,32 +59,54 @@ export class ArborTopicView extends LitElement {
justify-content: space-between;
align-items: center;
position: relative;
- text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+ text-shadow: 0 1px 2px oklch(from var(--color-base-content) l c h / 0.2);
letter-spacing: 0.01em;
+ border-bottom: var(--border) solid var(--color-base-300);
}
.posts-container {
display: flex;
flex-direction: column;
gap: 0;
- background: #f9f9f9;
+ background: var(--color-base-200);
padding: 1.5rem;
min-height: 300px;
}
.actions {
- background: #f9f9f9;
+ background: var(--color-base-200);
padding: 1.25rem 1.5rem;
display: flex;
justify-content: flex-end;
- border-top: 1px solid rgba(0, 0, 0, 0.06);
+ border-top: var(--border) solid var(--color-base-300);
}
.empty-state {
padding: 3rem;
text-align: center;
- color: #666;
+ color: var(--color-secondary);
font-style: italic;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 200px;
+ background: var(--color-base-100);
+ border-radius: var(--radius-field);
+ margin: 1rem 0;
+ border: var(--border) dashed var(--color-base-300);
+ }
+
+ arx-breadcrumbs {
+ margin-bottom: 1rem;
+ }
+
+ arx-forum-post {
+ border-bottom: var(--border) solid var(--color-base-300);
+ }
+
+ arx-forum-post:last-child {
+ border-bottom: none;
}
@media (max-width: 768px) {
@@ -108,6 +131,13 @@ export class ArborTopicView extends LitElement {
.header {
padding: 1rem;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 0.5rem;
+ }
+
+ .empty-state {
+ padding: 2rem 1rem;
}
}
`;
@@ -199,9 +229,9 @@ export class ArborTopicView extends LitElement {
-
`;
}
diff --git a/src/routes/Settings.ts b/src/routes/Settings.ts
new file mode 100644
index 0000000..cdcb210
--- /dev/null
+++ b/src/routes/Settings.ts
@@ -0,0 +1,181 @@
+import defaultAvatar from '@/default-avatar.png';
+import { getSigner, getUserProfile, ndk } from '@/ndk';
+import { NDKEvent, type NDKUserProfile } from '@nostr-dev-kit/ndk';
+import { LitElement, css, html } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { when } from 'lit/directives/when.js';
+
+import '@components/DateTimeSettings';
+import '@components/General/Input';
+import '@components/General/Button';
+import '@components/General/Fieldset';
+import '@components/General/Card';
+import '@components/Breadcrumbs';
+
+@customElement('arx-settings')
+export class EveSettings extends LitElement {
+ static override styles = css`
+ :host {
+ display: block;
+ font-family: var(--font-family, "Inter", system-ui, sans-serif);
+ margin: 0 auto;
+ line-height: 1.6;
+ color: var(--color-base-content);
+ background-color: var(--color-base-100);
+ }
+
+ .profile-image {
+ width: 140px;
+ height: 140px;
+ border-radius: 50%;
+ object-fit: cover;
+ border: calc(var(--border) * 2) solid var(--color-base-100);
+ box-shadow: calc(var(--depth) * 3px) calc(var(--depth) * 3px)
+ calc(var(--depth) * 6px)
+ oklch(from var(--color-base-content) l c h / 0.15),
+ calc(var(--depth) * -2px) calc(var(--depth) * -2px)
+ calc(var(--depth) * 4px) oklch(from var(--color-base-100) l c h / 0.6);
+ transition: transform 0.3s, box-shadow 0.3s;
+ margin: 0 auto;
+ }
+
+ .profile-image:hover {
+ transform: scale(1.05);
+ box-shadow: calc(var(--depth) * 4px) calc(var(--depth) * 4px)
+ calc(var(--depth) * 8px) oklch(from var(--color-accent) l c h / 0.3),
+ calc(var(--depth) * -2px) calc(var(--depth) * -2px)
+ calc(var(--depth) * 6px) oklch(from var(--color-base-100) l c h / 0.6);
+ }
+
+ .profile-header {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ }
+ `;
+
+ @state() private loading = true;
+ @state() private saving = false;
+ @state() private profile: NDKUserProfile | undefined;
+ @state() private error: string | undefined;
+ @state() private darkMode = false;
+
+ protected override async firstUpdated() {
+ try {
+ this.profile = await getUserProfile();
+ this.darkMode = localStorage.getItem('darkMode') === 'true';
+ this.loading = false;
+ } catch (err) {
+ this.error = 'Failed to load profile';
+ console.error(err);
+ this.loading = false;
+ }
+ }
+
+ private handleInputChange(e: Event) {
+ const target = e.target as HTMLInputElement;
+ this.profile = {
+ ...this.profile,
+ [target.name]: target.value,
+ };
+ }
+
+ private async saveProfile() {
+ if (this.saving) return;
+ this.saving = true;
+ try {
+ await getSigner();
+ const event = new NDKEvent(ndk);
+ event.kind = 0;
+ event.content = JSON.stringify(this.profile);
+ await event.sign();
+ await event.publish();
+ } catch (err) {
+ alert(err);
+ console.error(err);
+ } finally {
+ this.saving = false;
+ }
+ }
+
+ private toggleDarkMode() {
+ this.darkMode = !this.darkMode;
+ localStorage.setItem('darkMode', this.darkMode.toString());
+ document.body.classList.toggle('dark', this.darkMode);
+ }
+
+ override render() {
+ if (this.error) return html`
`;
+
+ if (this.loading) return html`
`;
+
+ const breadcrumbItems = [{ text: 'Home', href: '/' }, { text: 'Settings' }];
+
+ return html`
+
+
+
+ this.toggleDarkMode()}
+ >
+
+
+ ${when(
+ this.profile.picture,
+ () => html`
+
+ `,
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `;
+ }
+}
diff --git a/src/routes/router.ts b/src/routes/router.ts
index 7b3fb0b..235a129 100644
--- a/src/routes/router.ts
+++ b/src/routes/router.ts
@@ -1,6 +1,7 @@
import '@routes/404Page';
import '@routes/Home';
import '@routes/Profile';
+import '@routes/Settings';
import '@routes/Arbor/Home';
import '@routes/Arbor/NewTopic';
import '@routes/Arbor/TopicView';
@@ -10,6 +11,7 @@ import '@components/InitialSetup';
import { spread } from '@open-wc/lit-helpers';
import { LitElement, css } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
+import { keyed } from 'lit/directives/keyed.js';
import { type StaticValue, html, literal } from 'lit/static-html.js';
export interface RouteParams {
@@ -58,6 +60,11 @@ export default class EveRouter extends LitElement {
params: {},
component: literal`arx-arbor-post-creator`,
},
+ {
+ pattern: 'settings',
+ params: {},
+ component: literal`arx-settings`,
+ },
{
pattern: '404',
params: {},
@@ -85,25 +92,16 @@ export default class EveRouter extends LitElement {
overflow: hidden;
}
- input {
- width: 100%;
- }
-
- button {
- background: var(--primary);
- color: white;
- border: 1px solid var(--border);
- margin: 1rem 0;
- width: 100%;
- }
-
.window {
- max-width: 1200px;
overflow: auto;
+ }
+
+ .window-content {
+ max-width: 1200px;
+ overflow: visible;
height: 100%;
- position: relative;
- left: 50%;
- transform: translateX(-50%);
+ margin: 0 auto;
+ padding: 1rem;
}
`;
@@ -261,24 +259,29 @@ export default class EveRouter extends LitElement {
override render() {
if (!this.ccnSetup) return this.renderSetup();
return html`
-
0}
- ?canGoForward=${this.currentIndex < this.history.length - 1}
- url="eve://${this.currentPath}"
- @navigate=${(e: CustomEvent) => this.navigate(e.detail)}
- @go-back=${this.goBack}
- @go-forward=${this.goForward}
- title="Eve"
- >
+
0}
+ ?canGoForward=${this.currentIndex < this.history.length - 1}
+ url="eve://${this.currentPath}"
+ @navigate=${(e: CustomEvent) => this.navigate(e.detail)}
+ @go-back=${this.goBack}
+ @go-forward=${this.goForward}
+ title="Eve"
+ >
- <${this.currentRoute.component}
- ${spread(this.currentRoute.params)}
- path=${this.currentPath}
- @navigate=${this.navigate}
- @go-back=${this.goBack}
- @go-forward=${this.goForward}
- >
+ ${keyed(
+ this.currentRoute.params,
+ html`
+ <${this.currentRoute.component}
+ ${spread(this.currentRoute.params)}
+ path=${this.currentPath}
+ @navigate=${this.navigate}
+ @go-back=${this.goBack}
+ @go-forward=${this.goForward}
+ >
+ `,
+ )}
`;
diff --git a/src/style.css b/src/style.css
new file mode 100644
index 0000000..a6a8efb
--- /dev/null
+++ b/src/style.css
@@ -0,0 +1,90 @@
+:root {
+ --font-md: clamp(1.333rem, 1.5vw, 1.5rem);
+ --font-2xl: clamp(3.157rem, 3.6vw, 3.555rem);
+
+ --space-xs: clamp(0.5rem, 0.75vw, 0.75rem);
+ --space-sm: clamp(1rem, 1.5vw, 1.5rem);
+ --space-md: clamp(2rem, 3vw, 3rem);
+
+ --animation-curve: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+ --transition: 0.3s var(--animation-curve);
+
+ --color-base-100: oklch(98% 0.016 73.684);
+ --color-base-200: oklch(95% 0.038 75.164);
+ --color-base-300: oklch(90% 0.076 70.697);
+ --color-base-content: oklch(40% 0.123 38.172);
+
+ --color-primary: oklch(0% 0 0);
+ --color-primary-content: oklch(100% 0 0);
+
+ --color-secondary: oklch(22.45% 0.075 37.85);
+ --color-secondary-content: oklch(90% 0.076 70.697);
+
+ --color-accent: oklch(46.44% 0.111 37.85);
+ --color-accent-content: oklch(90% 0.076 70.697);
+
+ --color-neutral: oklch(55% 0.195 38.402);
+ --color-neutral-content: oklch(98% 0.016 73.684);
+
+ --color-info: oklch(42% 0.199 265.638);
+ --color-info-content: oklch(90% 0.076 70.697);
+ --color-success: oklch(43% 0.095 166.913);
+ --color-success-content: oklch(90% 0.076 70.697);
+ --color-warning: oklch(82% 0.189 84.429);
+ --color-warning-content: oklch(41% 0.112 45.904);
+ --color-error: oklch(70% 0.191 22.216);
+ --color-error-content: oklch(39% 0.141 25.723);
+
+ --radius-selector: 1rem;
+ --radius-field: 0.5rem;
+ --radius-box: 1rem;
+ --size-selector: 0.25rem;
+ --size-field: 0.25rem;
+ --border: 2px;
+ --depth: 1;
+ --noise: 1;
+}
+
+body.dark {
+ --color-base-100: oklch(28.822% 0.022 277.508);
+ --color-base-200: oklch(26.805% 0.02 277.508);
+ --color-base-300: oklch(24.787% 0.019 277.508);
+ --color-base-content: oklch(97.747% 0.007 106.545);
+ --color-primary: oklch(75.461% 0.183 346.812);
+ --color-primary-content: oklch(15.092% 0.036 346.812);
+ --color-secondary: oklch(74.202% 0.148 301.883);
+ --color-secondary-content: oklch(14.84% 0.029 301.883);
+ --color-accent: oklch(83.392% 0.124 66.558);
+ --color-accent-content: oklch(16.678% 0.024 66.558);
+ --color-neutral: oklch(39.445% 0.032 275.524);
+ --color-neutral-content: oklch(87.889% 0.006 275.524);
+ --color-info: oklch(88.263% 0.093 212.846);
+ --color-info-content: oklch(17.652% 0.018 212.846);
+ --color-success: oklch(87.099% 0.219 148.024);
+ --color-success-content: oklch(17.419% 0.043 148.024);
+ --color-warning: oklch(95.533% 0.134 112.757);
+ --color-warning-content: oklch(19.106% 0.026 112.757);
+ --color-error: oklch(68.22% 0.206 24.43);
+ --color-error-content: oklch(13.644% 0.041 24.43);
+ --radius-selector: 1rem;
+ --radius-field: 0.5rem;
+ --radius-box: 1rem;
+ --size-selector: 0.25rem;
+ --size-field: 0.25rem;
+ --border: 1px;
+ --depth: 0;
+ --noise: 0;
+}
+
+body {
+ background-color: var(--color-base-100);
+ color: var(--color-base-content);
+ font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+ line-height: 1.5;
+ box-sizing: border-box;
+ border: var(--border) solid var(--color-base-300);
+ border-radius: var(--radius-box);
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
+}
diff --git a/src/style.scss b/src/style.scss
deleted file mode 100644
index aeb05a0..0000000
--- a/src/style.scss
+++ /dev/null
@@ -1,443 +0,0 @@
-:root {
- --primary: oklch(25% 0.09 210);
- --secondary: oklch(from var(--primary) calc(l + 0.05) calc(c * 1.1) h);
- --accent: oklch(from var(--primary) calc(l + 0.35) calc(c + 0.15) h);
- --light: oklch(from var(--primary) 96% calc(c * 0.3) h);
- --dark: oklch(from var(--primary) 20% calc(c * 0.3) h);
- --border: oklch(from var(--primary) 80% calc(c * 0.5) h);
- --success: oklch(from var(--primary) 70% calc(c + 0.2) 142);
- --warning: oklch(from var(--primary) 85% calc(c + 0.2) 85);
- --error: oklch(from var(--primary) 65% calc(c + 0.2) 25);
-
- --shadow-color: oklch(from var(--primary) 20% calc(c * 0.3) h);
- --shadow-sm: 0 1px 2px rgba(var(--shadow-color), 0.1);
- --shadow-md: 0 2px 4px oklch(from var(--shadow-color) l c h / 0.1),
- 0 1px 2px oklch(from var(--shadow-color) l c h / 0.05);
- --shadow-lg: 0 4px 6px oklch(from var(--shadow-color) l c h / 0.1),
- 0 2px 4px oklch(from var(--shadow-color) l c h / 0.06);
- --shadow-xl: 0 10px 15px oklch(from var(--shadow-color) l c h / 0.1),
- 0 4px 6px oklch(from var(--shadow-color) l c h / 0.08);
-
- --font-xs: clamp(0.65rem, 0.7vw, 0.8rem);
- --font-sm: clamp(0.8rem, 0.9vw, 0.9rem);
- --font-base: clamp(1rem, 1.1vw, 1.125rem);
- --font-md: clamp(1.333rem, 1.5vw, 1.5rem);
- --font-lg: clamp(1.777rem, 2vw, 2rem);
- --font-xl: clamp(2.369rem, 2.7vw, 2.666rem);
- --font-2xl: clamp(3.157rem, 3.6vw, 3.555rem);
- --font-3xl: clamp(4.209rem, 4.8vw, 4.74rem);
-
- --space-xs: clamp(0.5rem, 0.75vw, 0.75rem);
- --space-sm: clamp(1rem, 1.5vw, 1.5rem);
- --space-md: clamp(2rem, 3vw, 3rem);
- --space-lg: clamp(3rem, 4.5vw, 4.5rem);
-
- --header-height: var(--font-2xl);
-}
-
-.window {
- display: grid;
- gap: 0;
- grid-template-rows: var(--header-height) 1fr;
- height: 100vh;
- width: 100vw;
- overflow: hidden;
-}
-
-header {
- background: rgba(255, 255, 255, 0.5);
- backdrop-filter: blur(10px);
- border: 1px solid rgba(255, 255, 255, 0.6);
- border-bottom-left-radius: 16px;
- border-bottom-right-radius: 16px;
- z-index: 999999;
- margin-bottom: var(--font-2xl);
- background: var(--primary);
- height: var(--font-2xl);
- font-size: var(--header-height);
- transition: all 0.3s ease;
- display: flex;
- align-items: center;
- padding: 0 var(--space-md);
-
- .search-container {
- flex: 1;
- position: relative;
-
- input {
- background: rgba(255, 255, 255, 0.5);
- backdrop-filter: blur(10px);
- border: 1px solid rgba(255, 255, 255, 0.6);
- border-radius: 16px;
- color: var(--light);
- width: 100%;
- text-align: center;
- cursor: text;
- font-size: 0.9rem;
- width: 100%;
- padding: var(--space-xs);
- text-align: center;
-
- &:not(:focus)::placeholder {
- color: var(--light);
- opacity: 1;
- }
-
- &:focus {
- background: rgba(0, 0, 0, 0.2);
- }
- }
- }
-
- .nav-buttons {
- display: flex;
- gap: var(--space-xs);
- padding-right: var(--space-xs);
-
- button {
- text-decoration: none;
- color: var(--light);
- background: rgba(255, 255, 255, 0.1);
- border: 1px solid rgba(255, 255, 255, 0.2);
- padding: var(--space-xs);
- border-radius: 100%;
- font-size: var(--font-md);
- backdrop-filter: blur(10px);
- display: flex;
- align-items: center;
- justify-content: center;
- transition: all 0.2s ease;
-
- &:hover {
- background: rgba(255, 255, 255, 0.2);
- }
-
- &.disabled {
- pointer-events: none;
- opacity: 0.5;
- }
- }
- }
-}
-
-::selection {
- background: oklch(from var(--accent) l c h / 0.2);
- color: var(--accent);
-}
-
-* {
- box-sizing: border-box;
- margin: 0;
- padding: 0;
-}
-
-body {
- font-family: "Inter var", system-ui, -apple-system, sans-serif;
- font-size: var(--font-base);
- line-height: 1.7;
- font-feature-settings: "liga" 1, "kern" 1, "calt" 1;
- text-rendering: optimizeLegibility;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-
- margin: 0;
- background: oklch(from var(--primary) 97% calc(c * 0.25) h);
- color: oklch(from var(--primary) 20% calc(c * 0.1) h);
- letter-spacing: -0.01em;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
- font-family: "Inter var", system-ui, sans-serif;
- font-weight: 700;
- line-height: 1.1;
- letter-spacing: -0.03em;
- background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- background-clip: text;
- margin: 0;
-}
-
-h1 {
- font-size: var(--font-2xl);
- font-weight: 800;
- letter-spacing: -0.04em;
-}
-
-h2 {
- font-size: var(--font-xl);
- font-weight: 700;
-}
-
-h3 {
- font-size: var(--font-lg);
- font-weight: 600;
-}
-
-section {
- max-width: 1200px;
- margin-inline: auto;
- padding-inline: 1rem;
- display: flex;
- justify-content: center;
- place-items: center;
- align-items: center;
-}
-
-ul,
-ol {
- margin: var(--space-sm) 0;
- padding-left: var(--space-md);
-
- & li {
- margin-bottom: var(--space-xs);
- position: relative;
- }
-
- & li::marker {
- color: var(--accent);
- }
-}
-
-code {
- font-family: "JetBrains Mono", "SF Mono", monospace;
- font-size: 0.9em;
- padding: 0.2em 0.4em;
- border-radius: 4px;
- background: oklch(from var(--primary) 97% calc(c * 0.15) h);
- border: 1px solid oklch(from var(--primary) 90% calc(c * 0.2) h);
-}
-
-blockquote {
- position: relative;
- padding: var(--space-md);
- border-radius: 1rem;
- background: linear-gradient(135deg,
- oklch(from var(--primary) calc(l + 0.02) calc(c * 0.8) h),
- oklch(from var(--secondary) calc(l + 0.02) calc(c * 0.8) h));
- backdrop-filter: blur(10px);
- box-shadow: var(--shadow-lg), inset 0 2px 4px oklch(from var(--primary) 100% 0 h / 0.1);
- color: var(--light);
-
- & p {
- font-size: var(--font-md);
- font-weight: 500;
- font-style: italic;
- line-height: 1.6;
- margin-bottom: var(--space-sm);
- color: var(--light);
- }
-
- &::before {
- position: absolute;
- font-family: Georgia, serif;
- opacity: 0.15;
- content: "❞";
- bottom: -1rem;
- right: 1rem;
- font-size: 5rem;
- color: var(--light);
- }
-}
-
-small {
- font-size: var(--font-xs);
- line-height: var(--leading-normal);
-}
-
-p {
- margin: 0 auto;
- margin-bottom: var(--space-md);
- max-width: 80ch;
- opacity: 0.9;
-}
-
-a {
- color: var(--accent);
- text-decoration: none;
- background-image: linear-gradient(transparent calc(100% - 2px),
- var(--accent) 2px);
- background-size: 0% 100%;
- background-repeat: no-repeat;
- transition: background-size 0.3s ease-in-out;
-
- &:hover {
- background-size: 100% 100%;
- }
-}
-
-hr {
- height: 5px;
- border: 0;
- margin: var(--space-md);
- background: linear-gradient(90deg,
- transparent,
- var(--primary) 20%,
- var(--accent) 50%,
- var(--primary) 80%,
- transparent);
- position: relative;
-
- &::after {
- content: "";
- position: absolute;
- width: 100%;
- height: 1px;
- background: inherit;
- top: 2px;
- filter: blur(2px);
- opacity: 0.7;
- }
-}
-
-.blurfade-enter-active {
- transition: all 0.5s ease-out;
-}
-
-.blurfade-leave-active {
- transition: all 0.25s cubic-bezier(1, 0.5, 0.8, 1);
-}
-
-.blurfade-enter-from,
-.blurfade-leave-to {
- overflow: hidden;
- position: fixed;
- width: 100vw;
- height: 100vh;
- left: 0;
- right: 0;
- top: 0;
- bottom: 0;
- transform: translate(0, 0) !important;
- transform-style: preserve-3d;
- z-index: 9999;
- opacity: 0;
- backdrop-filter: blur(1000px);
- filter: blur(1000px);
-}
-
-.w-full {
- width: 100%;
-}
-
-input {
- font-family: "Inter var", system-ui, -apple-system, sans-serif;
- font-size: var(--font-base);
- line-height: 1.7;
- color: oklch(from var(--primary) 20% calc(c * 0.1) h);
- background: oklch(from var(--primary) 97% calc(c * 0.25) h);
- border: 1px solid oklch(from var(--primary) 90% calc(c * 0.2) h);
- border-radius: 6px;
- padding: var(--space-xs) var(--space-sm);
- outline: none;
- transition: all 0.2s ease-in-out;
-
- &:focus {
- border-color: var(--accent);
- box-shadow: 0 0 0 3px oklch(from var(--accent) l c h / 0.2);
- }
-
- &:hover {
- border-color: oklch(from var(--primary) 80% calc(c * 0.3) h);
- }
-
- &::placeholder {
- color: oklch(from var(--primary) 60% calc(c * 0.2) h);
- opacity: 0.7;
- }
-
- &[type="submit"],
- &[type="button"] {
- background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
- color: var(--light);
- border: none;
- font-weight: 600;
- cursor: pointer;
-
- &:hover {
- background: linear-gradient(135deg, var(--secondary) 0%, var(--accent) 100%);
- }
-
- &:active {
- transform: scale(0.98);
- }
- }
-
- &[type="checkbox"],
- &[type="radio"] {
- width: 1.2em;
- height: 1.2em;
- accent-color: var(--accent);
- margin-right: var(--space-xs);
- }
-
- &[type="range"] {
- -webkit-appearance: none;
- appearance: none;
- background: transparent;
- cursor: pointer;
-
- &::-webkit-slider-runnable-track {
- height: 6px;
- background: oklch(from var(--primary) 90% calc(c * 0.2) h);
- border-radius: 3px;
- }
-
- &::-webkit-slider-thumb {
- -webkit-appearance: none;
- appearance: none;
- width: 16px;
- height: 16px;
- background: var(--accent);
- border-radius: 50%;
- margin-top: -5px;
- }
-
- &::-moz-range-track {
- height: 6px;
- background: oklch(from var(--primary) 90% calc(c * 0.2) h);
- border-radius: 3px;
- }
-
- &::-moz-range-thumb {
- width: 16px;
- height: 16px;
- background: var(--accent);
- border-radius: 50%;
- }
- }
-}
-
-textarea {
- font-family: "Inter var", system-ui, -apple-system, sans-serif;
- font-size: var(--font-base);
- line-height: 1.7;
- color: oklch(from var(--primary) 20% calc(c * 0.1) h);
- background: oklch(from var(--primary) 97% calc(c * 0.25) h);
- border: 1px solid oklch(from var(--primary) 90% calc(c * 0.2) h);
- border-radius: 6px;
- padding: var(--space-xs) var(--space-sm);
- outline: none;
- transition: all 0.2s ease-in-out;
- resize: vertical;
- min-height: 120px;
-
- &:focus {
- border-color: var(--accent);
- box-shadow: 0 0 0 3px oklch(from var(--accent) l c h / 0.2);
- }
-
- &:hover {
- border-color: oklch(from var(--primary) 80% calc(c * 0.3) h);
- }
-
- &::placeholder {
- color: oklch(from var(--primary) 60% calc(c * 0.2) h);
- opacity: 0.7;
- }
-}
\ No newline at end of file
diff --git a/src/utils/formatDateTime.ts b/src/utils/formatDateTime.ts
index 8cbc5a9..2b7010e 100644
--- a/src/utils/formatDateTime.ts
+++ b/src/utils/formatDateTime.ts
@@ -1,6 +1,8 @@
export default function formatDateTime(date: Date | string | number): string {
const properDate = new Date(date);
- return properDate.toLocaleString('en-US', {
+
+ const defaultOptions = {
+ locale: 'en-US',
weekday: 'short',
year: 'numeric',
month: 'long',
@@ -8,5 +10,27 @@ export default function formatDateTime(date: Date | string | number): string {
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
+ hour12: true,
+ };
+
+ let formattingOptions = defaultOptions;
+ const savedOptions = localStorage.getItem('dateTimeFormatOptions');
+
+ if (savedOptions)
+ try {
+ formattingOptions = { ...defaultOptions, ...JSON.parse(savedOptions) };
+ } catch (e) {
+ console.error('Failed to parse date format options from localStorage', e);
+ }
+
+ return properDate.toLocaleString(formattingOptions.locale, {
+ weekday: formattingOptions.weekday === '' ? undefined : formattingOptions.weekday,
+ year: formattingOptions.year === '' ? undefined : formattingOptions.year,
+ month: formattingOptions.month === '' ? undefined : formattingOptions.month,
+ day: formattingOptions.day === '' ? undefined : formattingOptions.day,
+ hour: formattingOptions.hour === '' ? undefined : formattingOptions.hour,
+ minute: formattingOptions.minute === '' ? undefined : formattingOptions.minute,
+ second: formattingOptions.second === '' ? undefined : formattingOptions.second,
+ hour12: formattingOptions.hour12,
});
}
diff --git a/src/utils/lastBlock.ts b/src/utils/lastBlock.ts
new file mode 100644
index 0000000..b2456f3
--- /dev/null
+++ b/src/utils/lastBlock.ts
@@ -0,0 +1,50 @@
+const MEMPOOL_API = 'https://mempool.space/api/blocks/tip';
+
+export interface LastBlock {
+ id: string;
+ height: number;
+ version: number;
+ timestamp: number;
+ tx_count: number;
+ size: number;
+ weight: number;
+ merkle_root: string;
+ previousblockhash: string;
+ mediantime: number;
+ nonce: number;
+ bits: number;
+ difficulty: number;
+ error?: string;
+}
+
+export async function getLastBlock(): Promise
{
+ try {
+ const response = await fetch(MEMPOOL_API);
+
+ if (!response.ok) {
+ throw new Error('Network response was not ok');
+ }
+
+ const data = await response.json();
+ const latestBlock = data[0];
+ if (!latestBlock) throw new Error('Failed to fetch block');
+ return latestBlock;
+ } catch (e) {
+ return {
+ id: '',
+ height: 0,
+ version: 0,
+ timestamp: 0,
+ tx_count: 0,
+ size: 0,
+ weight: 0,
+ merkle_root: '',
+ previousblockhash: '',
+ mediantime: 0,
+ nonce: 0,
+ bits: 0,
+ difficulty: 0,
+ error: e instanceof Error ? e.message : 'Failed to fetch block',
+ };
+ }
+}
diff --git a/src/utils/lastBlockHeight.ts b/src/utils/lastBlockHeight.ts
deleted file mode 100644
index 118e77c..0000000
--- a/src/utils/lastBlockHeight.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-const MEMPOOL_API = 'https://mempool.space/api/blocks/tip/height';
-
-export interface LastBlockHeight {
- height: number;
- error?: string;
-}
-
-export async function getLastBlockHeight(): Promise {
- try {
- const response = await fetch(MEMPOOL_API);
-
- if (!response.ok) {
- throw new Error('Network response was not ok');
- }
-
- const data = await response.text();
- return {
- height: Number.parseInt(data, 10),
- };
- } catch (e) {
- return {
- height: 0,
- error: e instanceof Error ? e.message : 'Failed to fetch block height',
- };
- }
-}