Page MenuHomeSealhub
Files F10360778

No OneTemporary
Actions

View Options

diff --git a/src/back/elements/button.css b/src/back/elements/button.css
new file mode 100644
index 0000000..90ea757
--- /dev/null
+++ b/src/back/elements/button.css
@@ -0,0 +1,21 @@
+.button {
+ padding: 8px 16px;
+ display: inline-block;
+ text-decoration: none;
+ margin: 4px;
+ cursor: pointer;
+
+ &:hover {
+ filter: brightness(1.1);
+ }
+}
+
+.button--color-accent1 {
+ background-color: var(--color-brand-accent);
+ color: var(--color-brand-text-on-accent);
+}
+
+.button--color-accent2 {
+ background-color: var(--color-brand-accent2);
+ color: var(--color-brand-text-on-accent2);
+}
diff --git a/src/back/elements/button.ts b/src/back/elements/button.ts
new file mode 100644
index 0000000..381b553
--- /dev/null
+++ b/src/back/elements/button.ts
@@ -0,0 +1,16 @@
+export const button_variants = ["accent1", "accent2"] as const;
+type variant = (typeof button_variants)[number];
+
+export function button({
+ text,
+ href,
+ variant,
+}: {
+ text: string;
+ href: string;
+ variant: variant;
+}): JSX.Element {
+ return /* HTML */ `<a class="button button--color-${variant}" href="${href}">
+ ${text}
+ </a>`;
+}
diff --git a/src/back/global_styles/vars.css b/src/back/global_styles/vars.css
index 169d1c5..968baaa 100644
--- a/src/back/global_styles/vars.css
+++ b/src/back/global_styles/vars.css
@@ -1,55 +1,57 @@
:root {
--default-font-color: #222;
--secondary: #55a4b4;
--secondary-light-01: #a4d2db;
--secondary-dark-01: #5294a1;
--secondary-dark-02: #3c7c88;
--alto-gray: #e0e0e0;
--dove-gray: #6f6e6e;
--faint-gray: #ededed;
--main: #6d4477;
--main-dark-01: #62386c;
--main-dark-02: #56335d;
--main-dark-03: #4a2a52;
--main-dark-04: #55335d;
--main-light-01: #744d7e;
--main-light-02: #8b7192;
--main-light-03: #a686af;
--main-bg-text: #fff;
--main-bg-text-secondary: hsl(286.4, 15.5%, 86.2%);
--main-dark-02-bg-secondary: #b5a2ba;
--wild-sand: #f6f6f6;
--london-hue: #beadc3;
--wild-sand-bg-text: #000;
--white-bg-text: #6f6e6e;
--white-bg-text-secondary: #000;
--white-bg-text-gray: #565656;
--white-bg-link: #404f6e;
--white-on-darker-bg-text: #fff;
/*px / 24 = N rem*/
--container-width: 50rem;
/* Fonts */
- --font-sans-serif: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
- helvetica neue, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif;
+ --font-sans-serif: "Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont,
+ avenir next, avenir, segoe ui, helvetica neue, Cantarell, Ubuntu, roboto, noto,
+ helvetica, arial, sans-serif;
+
--font-slab-serif: "Zilla Slab", serif;
--font-serif: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman,
Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji,
Segoe UI Symbol;
--font-mono: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
--font-industrial: Anton;
--font-headings: var(--font-sans-serif);
--font-short-text: var(--font-sans-serif);
--font-long-text: var(--font-serif);
}
diff --git a/src/back/jdd-components/hero/hero.css b/src/back/jdd-components/hero/hero.css
new file mode 100644
index 0000000..f3b37fc
--- /dev/null
+++ b/src/back/jdd-components/hero/hero.css
@@ -0,0 +1,63 @@
+.hero {
+ padding: 16px;
+ text-align: center;
+
+ h1 {
+ margin-top: 0;
+ font-size: 48px;
+
+ &.hero__title--color-normal {
+ color: inherit;
+ }
+
+ &.hero__title--color-accent1 {
+ color: var(--color-brand-accent);
+ }
+
+ &.hero__title--color-accent2 {
+ color: var(--color-brand-accent2);
+ }
+
+ @container (max-width: 420px) {
+ font-size: 32px;
+ }
+ }
+
+ .hero__subtitle {
+ font-size: 32px;
+
+ @container (max-width: 420px) {
+ font-size: 24px;
+ }
+ }
+
+ h1,
+ .hero__subtitle {
+ text-wrap: balance;
+ }
+
+ &.hero--color-text-fg-on-text-bg {
+ background-color: var(--color-brand-text-bg);
+ color: var(--color-brand-text-fg);
+ }
+
+ &.hero--color-text-accent-on-text-bg {
+ background-color: var(--color-brand-text-bg);
+ color: var(--color-brand-text-accent);
+ }
+
+ &.hero--color-text-accent2-on-text-bg {
+ background-color: var(--color-brand-text-bg);
+ color: var(--color-brand-text-accent2);
+ }
+
+ &.hero--color-text-on-accent-on-accent {
+ background-color: var(--color-brand-accent);
+ color: var(--color-brand-text-on-accent);
+ }
+
+ &.hero--color-text-on-accent2-on-accent2 {
+ background-color: var(--color-brand-accent2);
+ color: var(--color-brand-text-on-accent2);
+ }
+}
diff --git a/src/back/jdd-components/hero/hero.jdd.tsx b/src/back/jdd-components/hero/hero.jdd.tsx
new file mode 100644
index 0000000..f86fb3a
--- /dev/null
+++ b/src/back/jdd-components/hero/hero.jdd.tsx
@@ -0,0 +1,60 @@
+import { TempstreamJSX } from "tempstream";
+import type {
+ ComponentToHTMLArgs,
+ ExtractStructuredComponentArgumentsParsed,
+ JDDContext,
+} from "@sealcode/jdd";
+import { Component, ComponentArguments } from "@sealcode/jdd";
+import { button, button_variants } from "src/back/elements/button.js";
+
+const component_arguments = {
+ color: new ComponentArguments.Enum([
+ "text-fg-on-text-bg",
+ "text-accent-on-text-bg",
+ "text-accent2-on-text-bg",
+ "text-on-accent-on-accent",
+ "text-on-accent2-on-accent2",
+ ]),
+ title: new ComponentArguments.ShortText(),
+ title_color: new ComponentArguments.Enum(["normal", "accent1", "accent2"] as const),
+ subtitle: new ComponentArguments.ShortText(),
+ content: new ComponentArguments.Markdown(),
+ buttons: new ComponentArguments.List(
+ new ComponentArguments.Structured({
+ text: new ComponentArguments.ShortText(),
+ href: new ComponentArguments.ShortText(),
+ variant: new ComponentArguments.Enum(button_variants),
+ })
+ ),
+} as const;
+
+export class Hero extends Component<typeof component_arguments> {
+ getArguments() {
+ return component_arguments;
+ }
+
+ getTitle(
+ _: JDDContext,
+ args: ExtractStructuredComponentArgumentsParsed<typeof component_arguments>
+ ) {
+ return args.title || null;
+ }
+
+ async toHTML({
+ args: { title, title_color, subtitle, content, color, buttons },
+ classes,
+ jdd_context: { render_markdown, language },
+ }: ComponentToHTMLArgs<typeof component_arguments>): Promise<string> {
+ classes.push(`hero--color-${color}`);
+ return (
+ <div class={["hero", ...classes]}>
+ <h1 class={[`hero__title--color-${title_color}`]}>{title}</h1>
+ <span class={["hero__subtitle"]}>{subtitle}</span>
+ <div class={["hero__content"]}>{render_markdown(language, content)}</div>
+ <div class={["hero__buttons"]}>
+ {buttons.map((button_data) => button(button_data))}
+ </div>
+ </div>
+ );
+ }
+}
diff --git a/src/fonts.json b/src/fonts.json
index f2121dd..9d70f9e 100644
--- a/src/fonts.json
+++ b/src/fonts.json
@@ -1,10 +1,10 @@
{
"googleFonts": {
"families": {
- "Ubuntu": true,
+ "Atkinson Hyperlegible": true,
"Libre Baskerville": true,
"Ubuntu Mono": true,
"Anton": true
}
}
}
diff --git a/src/main.css b/src/main.css
index 2575764..6616a52 100644
--- a/src/main.css
+++ b/src/main.css
@@ -1,49 +1,49 @@
html {
background: var(--color-brand-canvas);
- font-family: Ubuntu, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI",
- "Segoe UI Emoji", "Segoe UI Symbol", "Lato", "Helvetica Neue", Helvetica, Arial,
- sans-serif;
+ font-family: "Atkinson Hyperlegible", -apple-system, system-ui, BlinkMacSystemFont,
+ "Segoe UI", "Segoe UI Emoji", "Segoe UI Symbol", "Lato", "Helvetica Neue",
+ Helvetica, Arial, sans-serif;
font-size: 14px;
}
body {
max-width: 1024px;
margin: 1rem auto;
background: var(--color-brand-text-bg);
color: var(--color-brand-text-fg);
padding: 1rem;
}
.delete-button {
height: 1rem;
padding: 0;
line-height: 0;
padding: 0.5rem;
}
.nav-logo {
display: flex;
align-items: center;
}
nav a:not(:visited) {
color: var(--primary-accent-color);
}
.form-input__wrapper--control-type__photo {
display: flex;
flex-flow: row wrap;
label {
width: 100%;
}
}
body.jdd-editor {
margin: 0 !important;
padding: 0 !important;
}
a {
color: var(--color-brand-link-fg);
}

File Metadata

Mime Type
text/x-diff
Expires
Sat, Nov 8, 08:38 (1 d, 9 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
1034370
Default Alt Text
(7 KB)

Event Timeline