diff --git a/src/components/OryNetworkCta/ory-network-cta.css b/src/components/OryNetworkCta/ory-network-cta.css new file mode 100644 index 000000000..9001d5fe0 --- /dev/null +++ b/src/components/OryNetworkCta/ory-network-cta.css @@ -0,0 +1,135 @@ +.ory-network-cta { + --ory-cyan-50: #ecfeff; + --ory-cyan-100: #cffafe; + --ory-cyan-500: #06b6d4; + --ory-cyan-900: #164e63; + --ory-gray-900: #0f172a; + + position: relative; + margin-top: 1em; + flex-shrink: 0; + max-height: var(--ory-network-cta-height); + background-color: var(--ory-cyan-500); +} + +.ory-network-cta:hover { + text-decoration: none; +} + +.ory-network-cta__background { + position: absolute; + inset: 0; +} + +.ory-network-cta__grid { + background: url("/img/bg-grid-cell-medium.svg") center; + position: absolute; + inset: 0; + z-index: 0; +} + +.ory-network-cta__gradient { + background: linear-gradient( + 164deg, + var(--ory-cyan-500) 64.41%, + transparent 100% + ); + position: absolute; + inset: 0; + z-index: 1; +} + +.ory-network-cta__content { + position: relative; + padding: 16px; + display: flex; + flex-direction: column; + gap: 16px; + justify-content: space-between; + height: 100%; + z-index: 10; +} + +.ory-network-cta__title-and-paragraph { + display: flex; + flex-direction: column; + gap: 16px; +} + +.ory-network-cta__title { + font-style: normal; + color: var(--ory-cyan-50); + font-size: 24px; + line-height: 100%; + font-weight: 600; +} + +.ory-network-cta__paragraph { + font-size: 16px; + line-height: 125%; + color: var(--ory-cyan-100); +} + +.ory-network-cta__button { + /* Will be overridden in sufficiently wide container queries */ + display: none; + + padding: 9px 15px; + background: var(--ory-cyan-50); + color: var(--ory-cyan-900); + font-weight: 500; + word-wrap: normal; +} + +.ory-network-cta__button:hover { + text-decoration: none; +} + +.ory-network-cta__inline-get-started { + display: block; +} + +@media (min-width: 1070px) { + .ory-network-cta__button { + display: block; + text-align: center; + } + + .ory-network-cta__inline-get-started { + display: none; + } +} + +@media (min-width: 1230px) { + .ory-network-cta__content { + padding: 24px; + gap: 48px; + } + + .ory-network-cta__title { + font-size: 26px; + line-height: 100%; + font-weight: 600; + } +} + +@media (min-width: 1370px) { + .ory-network-cta__paragraph { + font-size: 18px; + line-height: 150%; + } +} + +@media (min-width: 1450px) { + .ory-network-cta__content { + gap: 32px; + } + + .ory-network-cta__title { + font-size: 36px; + } + + .ory-network-cta__button { + padding: 12px 20px; + } +} diff --git a/src/components/OryNetworkCta/ory-network-cta.tsx b/src/components/OryNetworkCta/ory-network-cta.tsx new file mode 100644 index 000000000..a0563035e --- /dev/null +++ b/src/components/OryNetworkCta/ory-network-cta.tsx @@ -0,0 +1,41 @@ +import React from "react" +import "./ory-network-cta.css" + +const ctaVariants = [ + { + title: "Ory Network", + content: ( + <> + The most flexible and scalable way to manage identi­ties, + authen­tication, autho­rization and access control. + + ), + cta: "Explore Ory Network", + href: "https://www.ory.sh/network/?mtm_campaign=Docs-SideCta&mtm_kwd=variant-0", + }, +] + +export const OryNetworkCta = () => { + const { cta, content, title, href } = ctaVariants[0] + + return ( + +
+
+
+
+
+
+ {title} +

+ {content} + + {cta} -‍> + +

+
+
{cta}
+
+ + ) +} diff --git a/src/static/img/bg-grid-cell-medium.svg b/src/static/img/bg-grid-cell-medium.svg new file mode 100644 index 000000000..2d8f47c1d --- /dev/null +++ b/src/static/img/bg-grid-cell-medium.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/theme/TOC/index.css b/src/theme/TOC/index.css new file mode 100644 index 000000000..e98a451a1 --- /dev/null +++ b/src/theme/TOC/index.css @@ -0,0 +1,48 @@ +:root { + --ory-network-cta-height: 400px; +} + +.ory-toc-wrapper { + max-height: calc(100vh - (var(--ifm-navbar-height) + 2rem)); + overflow: auto; + position: sticky; + top: calc(var(--ifm-navbar-height) + 1rem); + display: flex; + flex-direction: column; +} + +/* +Selector for TOC wrapper only if the announcement banner +is active. +First part pins down the announcement banner, as its class +seems too fragile. Then select its siblings and therein the +TOC wrapper. + */ +#__docusaurus > div > [role="banner"] ~ * .ory-toc-wrapper { + max-height: calc( + 100vh - + ( + var(--ifm-navbar-height) + 2rem + + var(--docusaurus-announcement-bar-height) + ) + ); +} + +.ory-toc-wrapper > :first-child { + max-height: calc(100% - 5rem); + position: unset; + top: unset; + flex-shrink: 1; +} + +.kapa-widget-placeholder { + /* Kapa widget height */ + min-height: 80px; + /* + Our margin from bottom is 16px, kapa's margin is 20 px. + Compensate for the missing 4px + */ + margin-bottom: 4px; + /* Add usual margin around kapa */ + margin-top: 20px; +} diff --git a/src/theme/TOC/index.js b/src/theme/TOC/index.js new file mode 100644 index 000000000..cab82aa22 --- /dev/null +++ b/src/theme/TOC/index.js @@ -0,0 +1,14 @@ +import React from "react" +import TOC from "@theme-original/TOC" +import "./index.css" +import { OryNetworkCta } from "../../components/OryNetworkCta/ory-network-cta" + +export default function TOCWrapper(props) { + return ( +
+ + +
+
+ ) +}