@courtneyring/components-library 1.0.20 → 1.0.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
:root{--overlay-font-size: clamp(1rem, 2.5cqw, 2.25rem)}._hero_1f1qw_5{display:flex;align-items:center;justify-content:center;width:100%;background-size:cover;background-position:center;background-repeat:no-repeat;height:100svh;padding:clamp(16px,4vh,48px)}._overlay_1f1qw_17{display:flex;align-items:center;justify-content:center;flex-direction:column;background-color:var(--color-primary-dark)}@supports not rgb(from var(--color-primary-dark) r g b / .8){._overlay_1f1qw_17{background-color:rgb(from var(--color-primary-dark) r g b/.9)}}._overlay_1f1qw_17{color:var(--color-white);padding:4%;text-align:center;position:relative;width:auto;aspect-ratio:4/5;max-height:85%;max-width:90%;min-width:60%;padding:clamp(16px,4vw,48px)}._eyebrow_1f1qw_42{font-size:var(--overlay-font-size);text-transform:uppercase;letter-spacing:3px;font-weight:300}._title_1f1qw_49{display:flex;flex-direction:column}._title_1f1qw_49,._title_1f1qw_49>*{font-family:var(--font-secondary);font-size:clamp(2.75rem,8cqw,9.5rem);line-height:1.2;margin-top:0}._eyebrow_1f1qw_42,._title_1f1qw_49{margin-bottom:20px}._subtitle_1f1qw_67{font-size:var(--overlay-font-size);letter-spacing:3px}._subtitle_1f1qw_67>p{text-transform:uppercase}._subtitle_1f1qw_67>p,._subtitle_1f1qw_67 i{margin-bottom:10px;margin-top:0;font-weight:300}@media (min-width: 390px){._overlay_1f1qw_17{aspect-ratio:10/16}._title_1f1qw_49,._title_1f1qw_49>*{line-height:1.2}._eyebrow_1f1qw_42,._title_1f1qw_49{margin-bottom:30px}}@media (min-width: 390px) and (orientation: landscape){._overlay_1f1qw_17{aspect-ratio:16/9;max-width:85%;padding:4%}._title_1f1qw_49{flex-direction:row}._eyebrow_1f1qw_42,._title_1f1qw_49{margin-bottom:10px}}@media (min-width: 625px) and (orientation: portrait){._title_1f1qw_49,._title_1f1qw_49>*{line-height:1.2}._overlay_1f1qw_17{aspect-ratio:4/5;max-width:80%}._subtitle_1f1qw_67,._eyebrow_1f1qw_42{font-size:20px}}@media (min-width: 800px) and (orientation: landscape){._eyebrow_1f1qw_42,._title_1f1qw_49{margin-bottom:15px}}@media (min-width: 992px) and (orientation: landscape){._eyebrow_1f1qw_42,._title_1f1qw_49{margin-bottom:30px}}
|
|
@@ -2,17 +2,17 @@
|
|
|
2
2
|
import { jsx as t, jsxs as c } from "react/jsx-runtime";
|
|
3
3
|
import s from "../../utils/parse.js";
|
|
4
4
|
import "react";
|
|
5
|
-
import '../../assets/OverlayHero.css';const
|
|
6
|
-
hero:
|
|
7
|
-
overlay:
|
|
8
|
-
eyebrow:
|
|
9
|
-
title:
|
|
10
|
-
subtitle:
|
|
11
|
-
}, v = ({ text: y, image:
|
|
5
|
+
import '../../assets/OverlayHero.css';const n = "_hero_1f1qw_5", _ = "_overlay_1f1qw_17", d = "_eyebrow_1f1qw_42", m = "_title_1f1qw_49", h = "_subtitle_1f1qw_67", e = {
|
|
6
|
+
hero: n,
|
|
7
|
+
overlay: _,
|
|
8
|
+
eyebrow: d,
|
|
9
|
+
title: m,
|
|
10
|
+
subtitle: h
|
|
11
|
+
}, v = ({ text: y, image: l, pos: a, eyebrow: r, title: i, subtitle: o }) => /* @__PURE__ */ t(
|
|
12
12
|
"div",
|
|
13
13
|
{
|
|
14
14
|
className: e.hero,
|
|
15
|
-
style: { backgroundImage: `url(${
|
|
15
|
+
style: { backgroundImage: `url(${l})`, backgroundPosition: a },
|
|
16
16
|
children: /* @__PURE__ */ c("div", { className: e.overlay, children: [
|
|
17
17
|
r && /* @__PURE__ */ t("p", { className: e.eyebrow, children: r }),
|
|
18
18
|
/* @__PURE__ */ t("h1", { className: e.title, children: s(i) }),
|
|
@@ -5,17 +5,17 @@ import { useState as l, useEffect as c } from "react";
|
|
|
5
5
|
import '../../assets/Toolbar.css';const h = "_toolbar_17thg_1", m = {
|
|
6
6
|
toolbar: h
|
|
7
7
|
}, g = () => {
|
|
8
|
-
const [
|
|
9
|
-
|
|
8
|
+
const [t, n] = l(!1), s = d(), r = (e) => {
|
|
9
|
+
e.code === "KeyI" && (e.preventDefault(), e.stopPropagation(), n(!t));
|
|
10
10
|
};
|
|
11
|
-
return c(() => (window.addEventListener("keyup",
|
|
11
|
+
return c(() => (window.addEventListener("keyup", r), () => window.removeEventListener("keyup", r)), [t]), t ? /* @__PURE__ */ o("div", { className: m.toolbar, children: [
|
|
12
12
|
/* @__PURE__ */ o("div", { children: [
|
|
13
13
|
"Width: ",
|
|
14
|
-
|
|
14
|
+
s.innerWidth
|
|
15
15
|
] }),
|
|
16
16
|
/* @__PURE__ */ o("div", { children: [
|
|
17
17
|
"Height: ",
|
|
18
|
-
|
|
18
|
+
s.innerHeight
|
|
19
19
|
] })
|
|
20
20
|
] }) : /* @__PURE__ */ i(a, {});
|
|
21
21
|
};
|