kuba/strona-czynna
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

More consistent styles

Browse Source
This commit is contained in:
Kuba Orlik 2025-02-15 15:58:05 +01:00
parent 5a309f6f68
commit 2c167bacbc
9 changed files with 148 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/back/colors.ts
View File

@ -7,13 +7,13 @@ export const colors: Record<string, Record<string, string>> = {
purple: "#B10DC9", purple: "#B10DC9",
fuchsia: "#F012BE", fuchsia: "#F012BE",
maroon: "#85144b", maroon: "#85144b",
red: "#ff4136", red: "#fb2e38",
orange: "#ff851b", orange: "#ff851b",
yellow: "#ffdc00", yellow: "#ffdc00",
olive: "#3d9970", olive: "#3d9970",
green: "#2ecc40", green: "#58fe54",
lime: "#01ff70", lime: "#01ff70",
black: "#111111", black: "#1a1a1a",
gray: "#aaaaaa", gray: "#aaaaaa",
}, },
}; };
@ -31,15 +31,15 @@ colors.brand = {};
// "text-accent2" is same as above, but based on the second accent color // "text-accent2" is same as above, but based on the second accent color
// "text-on-accent" - what color text should be when put on a background colored with accent color // "text-on-accent" - what color text should be when put on a background colored with accent color
// "text-on-accent2" - what color text should be when put on a background colored with accent2 color // "text-on-accent2" - what color text should be when put on a background colored with accent2 color
colors.brand["canvas"] = "#fff"; colors.brand["canvas"] = "#000";
colors.brand["text-bg"] = "#f6f6f6"; colors.brand["text-bg"] = colors.basic!.black!;
colors.brand["text-fg"] = colors.basic!.black!; colors.brand["text-fg"] = "#fff";
colors.brand["accent"] = "#5294A1"; colors.brand["accent"] = colors.basic!.red!;
colors.brand["accent2"] = "#65397C"; colors.brand["accent2"] = "#000";
colors.brand["text-accent"] = colors.brand.accent!; colors.brand["text-accent"] = colors.brand.accent!;
colors.brand["text-accent2"] = colors.brand["accent2"]!; colors.brand["text-accent2"] = colors.basic!.green!;
colors.brand["text-on-accent"] = "#fff"; colors.brand["text-on-accent"] = "#fff";
colors.brand["text-on-accent2"] = "#fff"; colors.brand["text-on-accent2"] = colors.basic!.green!;
// configure hue variance across the shades of the same main color. // configure hue variance across the shades of the same main color.
const hue_step = -4; const hue_step = -4;

1
src/back/defaultHead.tsx
View File

@ -56,7 +56,6 @@ export function defaultHead({
as="font" as="font"
type="font/woff2" type="font/woff2"
/> />
<link rel="preload" href="/Exotc350DmBdEU-subset.ttf" as="font" type="font/ttf" />
<script defer src="/dist/bundle.js?v=${start_timestamp}"></script> <script defer src="/dist/bundle.js?v=${start_timestamp}"></script>
${metaImage ? `<meta property="og:image" content="${metaImage}" />` : ""} ${metaImage ? `<meta property="og:image" content="${metaImage}" />` : ""}
${[ ${[

11
src/back/global_styles/vars.css
View File

@ -40,6 +40,15 @@
--container-width: 50rem; --container-width: 50rem;
/* Fonts */ /* Fonts */
--font-sans-serif: "Inter UI", sans-serif; --font-sans-serif: -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-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-headings: var(--font-sans-serif);
--font-short-text: var(--font-sans-serif);
--font-long-text: var(--font-serif);
} }

2
src/back/jdd-components/autoscrolling-images/autoscrolling-images.css
View File

@ -18,7 +18,7 @@
} }
.autoscrolling-images__title { .autoscrolling-images__title {
font-family: Exotc350DmBdEU; font-family: var(--font-headings);
font-size: 32px; font-size: 32px;
color: var(--color-brand-text-accent); color: var(--color-brand-text-accent);
margin: 0; margin: 0;

3
src/back/jdd-components/autoscrolling-images/autoscrolling-images.jdd.tsx
View File

@ -126,7 +126,6 @@ export class AutoscrollingImages extends Component<typeof component_arguments> {
const radioButtonIdPrefix = "r" + Math.floor(100 + Math.random() * 900); const radioButtonIdPrefix = "r" + Math.floor(100 + Math.random() * 900);
const radioButton_name = `autoscrolling-images__radio--${radioButtonIdPrefix}`; const radioButton_name = `autoscrolling-images__radio--${radioButtonIdPrefix}`;
const titleUpperCase = title.toUpperCase();
return ( return (
<div <div
@ -163,7 +162,7 @@ export class AutoscrollingImages extends Component<typeof component_arguments> {
data-carousel-id-prefix={radioButtonIdPrefix} data-carousel-id-prefix={radioButtonIdPrefix}
> >
<div class="autoscrolling-images__title-wrapper"> <div class="autoscrolling-images__title-wrapper">
<h2 class="autoscrolling-images__title">{titleUpperCase}</h2> <h2 class="autoscrolling-images__title">{title}</h2>
</div> </div>
<div class="autoscrolling-images__carousel-container"> <div class="autoscrolling-images__carousel-container">

20
src/back/jdd-components/dynamic-grid/dynamic-grid.css
View File

@ -8,13 +8,13 @@
align-items: stretch; align-items: stretch;
list-style: none; list-style: none;
padding: 0; padding: 0;
border-bottom: 1px solid var(--color-brand-text-bg-62); border-bottom: 1px solid var(--color-brand-text-bg);
margin-bottom: 36px; margin-bottom: 36px;
.tabs-menu-button { .tabs-menu-button {
display: flex; display: flex;
margin-bottom: -1px; margin-bottom: -1px;
border: 1px solid var(--color-brand-text-fg-07); border: 1px solid var(--color-brand-text-bg);
background: var(--color-brand-text-fg-08); background: var(--color-brand-text-bg);
color: var(--color-brand-text-fg); color: var(--color-brand-text-fg);
font-size: 12px; font-size: 12px;
transition: border 200ms, color 200ms; transition: border 200ms, color 200ms;
@ -55,7 +55,7 @@
.tile-content { .tile-content {
position: absolute; position: absolute;
background-color: var(--color-brand-text-fg-08); background-color: var(--color-brand-text-bg);
width: 100%; width: 100%;
opacity: 0.9; opacity: 0.9;
padding: 8px; padding: 8px;
@ -173,13 +173,13 @@
min-width: 240px; min-width: 240px;
line-height: 23px; line-height: 23px;
font-size: 16px; font-size: 16px;
&.dark { &.accent {
background-color: var(--color-brand-accent-02); background-color: var(--color-brand-accent);
--text-color: var(--color-brand-accent); --text-color: var(--color-brand-text-on-accent);
} }
&.bright { &.accent2 {
background-color: var(--color-brand-text-bg); background-color: var(--color-brand-accent2);
--text-color: var(--color-brand-accent); --text-color: var(--color-brand-text-on-accent2);
} }
} }
} }

8
src/back/jdd-components/dynamic-grid/dynamic-grid.jdd.tsx
View File

@ -50,7 +50,7 @@ const component_arguments = {
"Button 2", "Button 2",
"Button 3", "Button 3",
]), ]),
color: new ComponentArguments.Enum(["dark", "bright"] as const), color: new ComponentArguments.Enum(["accent", "accent2"] as const),
link: new ComponentArguments.ShortText(), link: new ComponentArguments.ShortText(),
}) })
), ),
@ -143,10 +143,10 @@ export class DynamicGrid extends Component<typeof component_arguments> {
classes, classes,
index, index,
}: ComponentToHTMLArgs<typeof component_arguments>, }: ComponentToHTMLArgs<typeof component_arguments>,
tab_style_when_active = `border-bottom-color: #fff; tab_style_when_active = `border-bottom-color: var(--color-brand-canvas);
border-top-color: var(--color-brand-accent-04); border-top-color: var(--color-brand-accent-04);
background: #fff; background: var(--color-brand-canvas);
color: #222;` color: var(--color-brand-text-fg);`
): FlatTemplatable { ): FlatTemplatable {
const { value: id } = generate_id.next(); const { value: id } = generate_id.next();
return ( return (

2
src/back/jdd-components/tekst/tekst.css
View File

@ -1,5 +1,5 @@
.tekst.markdown { .tekst.markdown {
font-family: Poppins, sans-serif; font-family: var(--font-long-text);
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
color: #0d4d69; color: #0d4d69;

222
src/colors.css
View File

@ -1,6 +1,6 @@
/* DO NOT EDIT! This file is automatically generated by sealgen */ /* DO NOT EDIT! This file is automatically generated by sealgen */
:root { :root {
--color-brand-canvas: #fff; --color-brand-canvas: #000;
--color-brand-canvas-00: #000000; --color-brand-canvas-00: #000000;
--color-brand-canvas-01: #1a1a1a; --color-brand-canvas-01: #1a1a1a;
--color-brand-canvas-02: #333333; --color-brand-canvas-02: #333333;
@ -11,72 +11,72 @@
--color-brand-canvas-07: #b3b3b3; --color-brand-canvas-07: #b3b3b3;
--color-brand-canvas-08: #cccccc; --color-brand-canvas-08: #cccccc;
--color-brand-canvas-09: #e6e6e6; --color-brand-canvas-09: #e6e6e6;
--color-brand-text-bg: #f6f6f6; --color-brand-text-bg: #1a1a1a;
--color-brand-text-bg-00: #0f0f0f; --color-brand-text-bg-00: #000000;
--color-brand-text-bg-01: #292929; --color-brand-text-bg-01: #1a1a1a;
--color-brand-text-bg-02: #424242; --color-brand-text-bg-02: #333333;
--color-brand-text-bg-03: #5c5c5c; --color-brand-text-bg-03: #4d4d4d;
--color-brand-text-bg-04: #757575; --color-brand-text-bg-04: #666666;
--color-brand-text-bg-05: #8f8f8f; --color-brand-text-bg-05: #808080;
--color-brand-text-bg-06: #a8a8a8; --color-brand-text-bg-06: #999999;
--color-brand-text-bg-07: #c2c2c2; --color-brand-text-bg-07: #b3b3b3;
--color-brand-text-bg-08: #dbdbdb; --color-brand-text-bg-08: #cccccc;
--color-brand-text-bg-09: #f5f5f5; --color-brand-text-bg-09: #e6e6e6;
--color-brand-text-fg: #111111; --color-brand-text-fg: #fff;
--color-brand-text-fg-00: #121212; --color-brand-text-fg-00: #000000;
--color-brand-text-fg-01: #2b2b2b; --color-brand-text-fg-01: #1a1a1a;
--color-brand-text-fg-02: #454545; --color-brand-text-fg-02: #333333;
--color-brand-text-fg-03: #5e5e5e; --color-brand-text-fg-03: #4d4d4d;
--color-brand-text-fg-04: #787878; --color-brand-text-fg-04: #666666;
--color-brand-text-fg-05: #919191; --color-brand-text-fg-05: #808080;
--color-brand-text-fg-06: #ababab; --color-brand-text-fg-06: #999999;
--color-brand-text-fg-07: #c4c4c4; --color-brand-text-fg-07: #b3b3b3;
--color-brand-text-fg-08: #dedede; --color-brand-text-fg-08: #cccccc;
--color-brand-text-fg-09: #f7f7f7; --color-brand-text-fg-09: #e6e6e6;
--color-brand-accent: #5294a1; --color-brand-accent: #fb2e38;
--color-brand-accent-00: #0b141e; --color-brand-accent-00: #290e00;
--color-brand-accent-01: #193143; --color-brand-accent-01: #5c1a00;
--color-brand-accent-02: #294f65; --color-brand-accent-02: #8f1f00;
--color-brand-accent-03: #3b7087; --color-brand-accent-03: #c21d00;
--color-brand-accent-04: #4e92a6; --color-brand-accent-04: #f51400;
--color-brand-accent-05: #71abb7; --color-brand-accent-05: #fe2d2a;
--color-brand-accent-06: #95c1c6; --color-brand-accent-06: #fc5f67;
--color-brand-accent-07: #b8d5d6; --color-brand-accent-07: #fb939f;
--color-brand-accent-08: #d9e8e7; --color-brand-accent-08: #fcc5cf;
--color-brand-accent-09: #f9fbfb; --color-brand-accent-09: #fef5f8;
--color-brand-accent2: #65397c; --color-brand-accent2: #000;
--color-brand-accent2-00: #110713; --color-brand-accent2-00: #000000;
--color-brand-accent2-01: #301637; --color-brand-accent2-01: #1a1a1a;
--color-brand-accent2-02: #4b2659; --color-brand-accent2-02: #333333;
--color-brand-accent2-03: #63387a; --color-brand-accent2-03: #4d4d4d;
--color-brand-accent2-04: #794c9a; --color-brand-accent2-04: #666666;
--color-brand-accent2-05: #8d69b0; --color-brand-accent2-05: #808080;
--color-brand-accent2-06: #a38dbf; --color-brand-accent2-06: #999999;
--color-brand-accent2-07: #bcafcf; --color-brand-accent2-07: #b3b3b3;
--color-brand-accent2-08: #d6d0e1; --color-brand-accent2-08: #cccccc;
--color-brand-accent2-09: #f1f0f5; --color-brand-accent2-09: #e6e6e6;
--color-brand-text-accent: #5294a1; --color-brand-text-accent: #fb2e38;
--color-brand-text-accent-00: #0b141e; --color-brand-text-accent-00: #290e00;
--color-brand-text-accent-01: #193143; --color-brand-text-accent-01: #5c1a00;
--color-brand-text-accent-02: #294f65; --color-brand-text-accent-02: #8f1f00;
--color-brand-text-accent-03: #3b7087; --color-brand-text-accent-03: #c21d00;
--color-brand-text-accent-04: #4e92a6; --color-brand-text-accent-04: #f51400;
--color-brand-text-accent-05: #71abb7; --color-brand-text-accent-05: #fe2d2a;
--color-brand-text-accent-06: #95c1c6; --color-brand-text-accent-06: #fc5f67;
--color-brand-text-accent-07: #b8d5d6; --color-brand-text-accent-07: #fb939f;
--color-brand-text-accent-08: #d9e8e7; --color-brand-text-accent-08: #fcc5cf;
--color-brand-text-accent-09: #f9fbfb; --color-brand-text-accent-09: #fef5f8;
--color-brand-text-accent2: #65397c; --color-brand-text-accent2: #58fe54;
--color-brand-text-accent2-00: #110713; --color-brand-text-accent2-00: #001f0e;
--color-brand-text-accent2-01: #301637; --color-brand-text-accent2-01: #00521f;
--color-brand-text-accent2-02: #4b2659; --color-brand-text-accent2-02: #00852a;
--color-brand-text-accent2-03: #63387a; --color-brand-text-accent2-03: #00b82e;
--color-brand-text-accent2-04: #794c9a; --color-brand-text-accent2-04: #00eb2b;
--color-brand-text-accent2-05: #8d69b0; --color-brand-text-accent2-05: #1fff39;
--color-brand-text-accent2-06: #a38dbf; --color-brand-text-accent2-06: #52ff5a;
--color-brand-text-accent2-07: #bcafcf; --color-brand-text-accent2-07: #87fe85;
--color-brand-text-accent2-08: #d6d0e1; --color-brand-text-accent2-08: #bffeb9;
--color-brand-text-accent2-09: #f1f0f5; --color-brand-text-accent2-09: #eefeeb;
--color-brand-text-on-accent: #fff; --color-brand-text-on-accent: #fff;
--color-brand-text-on-accent-00: #000000; --color-brand-text-on-accent-00: #000000;
--color-brand-text-on-accent-01: #1a1a1a; --color-brand-text-on-accent-01: #1a1a1a;
@ -88,17 +88,17 @@
--color-brand-text-on-accent-07: #b3b3b3; --color-brand-text-on-accent-07: #b3b3b3;
--color-brand-text-on-accent-08: #cccccc; --color-brand-text-on-accent-08: #cccccc;
--color-brand-text-on-accent-09: #e6e6e6; --color-brand-text-on-accent-09: #e6e6e6;
--color-brand-text-on-accent2: #fff; --color-brand-text-on-accent2: #58fe54;
--color-brand-text-on-accent2-00: #000000; --color-brand-text-on-accent2-00: #001f0e;
--color-brand-text-on-accent2-01: #1a1a1a; --color-brand-text-on-accent2-01: #00521f;
--color-brand-text-on-accent2-02: #333333; --color-brand-text-on-accent2-02: #00852a;
--color-brand-text-on-accent2-03: #4d4d4d; --color-brand-text-on-accent2-03: #00b82e;
--color-brand-text-on-accent2-04: #666666; --color-brand-text-on-accent2-04: #00eb2b;
--color-brand-text-on-accent2-05: #808080; --color-brand-text-on-accent2-05: #1fff39;
--color-brand-text-on-accent2-06: #999999; --color-brand-text-on-accent2-06: #52ff5a;
--color-brand-text-on-accent2-07: #b3b3b3; --color-brand-text-on-accent2-07: #87fe85;
--color-brand-text-on-accent2-08: #cccccc; --color-brand-text-on-accent2-08: #bffeb9;
--color-brand-text-on-accent2-09: #e6e6e6; --color-brand-text-on-accent2-09: #eefeeb;
--color-basic-blue: #0074d9; --color-basic-blue: #0074d9;
--color-basic-blue-00: #00040f; --color-basic-blue-00: #00040f;
--color-basic-blue-01: #001642; --color-basic-blue-01: #001642;
@ -154,17 +154,17 @@
--color-basic-maroon-07: #e283ca; --color-basic-maroon-07: #e283ca;
--color-basic-maroon-08: #eaaedf; --color-basic-maroon-08: #eaaedf;
--color-basic-maroon-09: #f4d7f0; --color-basic-maroon-09: #f4d7f0;
--color-basic-red: #ff4136; --color-basic-red: #fb2e38;
--color-basic-red-00: #050200; --color-basic-red-00: #290e00;
--color-basic-red-01: #381600; --color-basic-red-01: #5c1a00;
--color-basic-red-02: #6b2200; --color-basic-red-02: #8f1f00;
--color-basic-red-03: #9e2800; --color-basic-red-03: #c21d00;
--color-basic-red-04: #d12600; --color-basic-red-04: #f51400;
--color-basic-red-05: #ff2205; --color-basic-red-05: #fe2d2a;
--color-basic-red-06: #ff4238; --color-basic-red-06: #fc5f67;
--color-basic-red-07: #fd6d70; --color-basic-red-07: #fb939f;
--color-basic-red-08: #fca1a9; --color-basic-red-08: #fcc5cf;
--color-basic-red-09: #fdd3d9; --color-basic-red-09: #fef5f8;
--color-basic-orange: #ff851b; --color-basic-orange: #ff851b;
--color-basic-orange-00: #1a1400; --color-basic-orange-00: #1a1400;
--color-basic-orange-01: #4d3800; --color-basic-orange-01: #4d3800;
@ -198,17 +198,17 @@
--color-basic-olive-07: #9fd0b0; --color-basic-olive-07: #9fd0b0;
--color-basic-olive-08: #c3dfcb; --color-basic-olive-08: #c3dfcb;
--color-basic-olive-09: #e5f0e7; --color-basic-olive-09: #e5f0e7;
--color-basic-green: #2ecc40; --color-basic-green: #58fe54;
--color-basic-green-00: #052915; --color-basic-green-00: #001f0e;
--color-basic-green-01: #0c5528; --color-basic-green-01: #00521f;
--color-basic-green-02: #157f36; --color-basic-green-02: #00852a;
--color-basic-green-03: #1fa841; --color-basic-green-03: #00b82e;
--color-basic-green-04: #2acf49; --color-basic-green-04: #00eb2b;
--color-basic-green-05: #55d864; --color-basic-green-05: #1fff39;
--color-basic-green-06: #81df85; --color-basic-green-06: #52ff5a;
--color-basic-green-07: #ace8ab; --color-basic-green-07: #87fe85;
--color-basic-green-08: #d6f2d4; --color-basic-green-08: #bffeb9;
--color-basic-green-09: #fcfefb; --color-basic-green-09: #eefeeb;
--color-basic-lime: #01ff70; --color-basic-lime: #01ff70;
--color-basic-lime-00: #000000; --color-basic-lime-00: #000000;
--color-basic-lime-01: #003324; --color-basic-lime-01: #003324;
@ -220,17 +220,17 @@
--color-basic-lime-07: #6bfa96; --color-basic-lime-07: #6bfa96;
--color-basic-lime-08: #9efab3; --color-basic-lime-08: #9efab3;
--color-basic-lime-09: #cffcd7; --color-basic-lime-09: #cffcd7;
--color-basic-black: #111111; --color-basic-black: #1a1a1a;
--color-basic-black-00: #121212; --color-basic-black-00: #000000;
--color-basic-black-01: #2b2b2b; --color-basic-black-01: #1a1a1a;
--color-basic-black-02: #454545; --color-basic-black-02: #333333;
--color-basic-black-03: #5e5e5e; --color-basic-black-03: #4d4d4d;
--color-basic-black-04: #787878; --color-basic-black-04: #666666;
--color-basic-black-05: #919191; --color-basic-black-05: #808080;
--color-basic-black-06: #ababab; --color-basic-black-06: #999999;
--color-basic-black-07: #c4c4c4; --color-basic-black-07: #b3b3b3;
--color-basic-black-08: #dedede; --color-basic-black-08: #cccccc;
--color-basic-black-09: #f7f7f7; --color-basic-black-09: #e6e6e6;
--color-basic-gray: #aaaaaa; --color-basic-gray: #aaaaaa;
--color-basic-gray-00: #121212; --color-basic-gray-00: #121212;
--color-basic-gray-01: #2b2b2b; --color-basic-gray-01: #2b2b2b;