diff --git a/README.md b/README.md index 3523552a..50aacac3 100644 --- a/README.md +++ b/README.md @@ -187,7 +187,7 @@ docs_url_prefix = "ecosystem/finance" The `qiskit_sphinx_theme` extension defines the below custom directives for you to use in RST, if you'd like. See `example_docs/docs/sphinx_guide/custom_directives.rst` for examples of how to use them. * `qiskit-card` -* `qiskit-call-to-action-item` +* `qiskit-call-to-action-item` and `qiskit-call-to-action-grid` ![Screenshot of examples of custom directives](https://github.com/Qiskit/qiskit_sphinx_theme/assets/14852634/9c672417-6451-4547-bc36-10709f7f3880) diff --git a/example_docs/docs/sphinx_guide/custom_directives.rst b/example_docs/docs/sphinx_guide/custom_directives.rst index f5a72cb3..7e2b8f72 100644 --- a/example_docs/docs/sphinx_guide/custom_directives.rst +++ b/example_docs/docs/sphinx_guide/custom_directives.rst @@ -5,42 +5,30 @@ Custom Directives qiskit-call-to-action-item ========================== -.. raw:: html +.. qiskit-call-to-action-grid:: -
-
+ .. qiskit-call-to-action-item:: + :header: Go back to qiskit.org! + :description: That's a cool site too :) + :button_link: https://qiskit.org + :button_text: qiskit.org -.. qiskit-call-to-action-item:: - :header: Go back to qiskit.org! - :description: That's a cool site too :) - :button_link: https://qiskit.org - :button_text: qiskit.org + .. qiskit-call-to-action-item:: + :header: CTA #2 + :description: Call me, maybe? + :button_link: https://qiskit.org + :button_text: qiskit.org -.. qiskit-call-to-action-item:: - :header: CTA #2 - :description: Call me, maybe? - :button_link: https://qiskit.org - :button_text: qiskit.org - -.. qiskit-call-to-action-item:: - :header: CTA #3 - :description: No really, call me! - :button_link: https://qiskit.org - :button_text: qiskit.org - -.. raw:: html - -
-
+ .. qiskit-call-to-action-item:: + :header: CTA #3 + :description: No really, call me! + :button_link: https://qiskit.org + :button_text: qiskit.org qiskit-card =========== -.. - Note: To get the `image` working locally, we have to use a relative link like `../`. In - production, it should simply be `_static/ibm_qlab.png. - .. qiskit-card:: :header: IBM Quantum Lab :card_description: Build quantum applications and experiments with Qiskit in a cloud programming environment. diff --git a/src/qiskit_sphinx_theme/directives.py b/src/qiskit_sphinx_theme/directives.py index a3a848dd..c5379c97 100644 --- a/src/qiskit_sphinx_theme/directives.py +++ b/src/qiskit_sphinx_theme/directives.py @@ -24,7 +24,8 @@ def setup(app: sphinx.application.Sphinx) -> None: app.add_directive(QiskitCardDirective.NAME, QiskitCardDirective) - app.add_directive(CallToActionItemDirective.NAME, CallToActionItemDirective) + app.add_directive(QiskitCallToActionItemDirective.NAME, QiskitCallToActionItemDirective) + app.add_directive(QiskitCallToActionGridDirective.NAME, QiskitCallToActionGridDirective) class QiskitCardDirective(Directive): @@ -62,7 +63,7 @@ def run(self) -> list[nodes.paragraph]: return [card] -class CallToActionItemDirective(Directive): +class QiskitCallToActionItemDirective(Directive): NAME = "qiskit-call-to-action-item" option_spec = { @@ -83,12 +84,10 @@ def run(self) -> list[nodes.paragraph]: callout_rst = f""" .. raw:: html -
-
-

{header}

-

{description}

- {button_text} -
+
+

{header}

+

{description}

+ {button_text}
""" @@ -96,3 +95,16 @@ def run(self) -> list[nodes.paragraph]: callout = nodes.paragraph() self.state.nested_parse(callout_list, self.content_offset, callout) return [callout] + + +class QiskitCallToActionGridDirective(Directive): + NAME = "qiskit-call-to-action-grid" + + has_content = True + + def run(self) -> list[nodes.Element]: + outer_div_open = nodes.raw("", '
', format="html") + outer_div_close = nodes.raw("", "
", format="html") + node = nodes.Element() + self.state.nested_parse(self.content, self.content_offset, node) + return [outer_div_open, *node, outer_div_close] diff --git a/src/qiskit_sphinx_theme/pytorch/static/css/theme.css b/src/qiskit_sphinx_theme/pytorch/static/css/theme.css index c5fc9788..41bf67f9 100644 --- a/src/qiskit_sphinx_theme/pytorch/static/css/theme.css +++ b/src/qiskit_sphinx_theme/pytorch/static/css/theme.css @@ -11668,23 +11668,31 @@ div.qiskit-card:hover .qiskit-card-image-container { * qiskit-call-to-action * ------------------------------------------------------------------------------- */ -article.pytorch-article .tutorials-callout-container { +.qiskit-call-to-action-grid { padding-bottom: 50px; + display: flex; + flex-wrap: wrap; + margin-right: -15px; + margin-left: -15px; } -article.pytorch-article .tutorials-callout-container .col-md-6 { - padding-bottom: 10px; -} -article.pytorch-article .tutorials-callout-container .text-container { - padding: 10px 0px 30px 0px; - padding-bottom: 10px; + +.qiskit-call-to-action-item { + flex: 0 0 50%; + max-width: 50%; + position: relative; + width: 100%; + min-height: 1px; + padding: 10px 15px 20px 15px; } -article.pytorch-article .tutorials-callout-container .text-container .body-paragraph { + +div.qiskit-call-to-action-item p { color: #666666; font-weight: 300; font-size: 1.125rem; line-height: 1.875rem; } -article.pytorch-article .tutorials-callout-container .btn.callout-button { + +.qiskit-call-to-action-item a { font-size: 1.125rem; border-radius: 0; border: none; @@ -11693,28 +11701,39 @@ article.pytorch-article .tutorials-callout-container .btn.callout-button { font-weight: 400; position: relative; letter-spacing: 0.25px; + + background-size: 8px 14px; + background-position: center right 12px; + background-image: url("../images/chevron-right-purple.svg"); + background-repeat: no-repeat; + + display: inline-block; + text-align: center; + white-space: nowrap; + vertical-align: middle; + user-select: none; + padding: 0.375rem 0.75rem; + padding-right: 2em; + line-height: 1.5; } -@media screen and (min-width: 768px) { - article.pytorch-article .tutorials-callout-container .btn.callout-button:after { - content: ""; - display: block; - width: 0; - height: 1px; - position: absolute; - bottom: 0; - left: 0; - background-color: #8B34FC; - -webkit-transition: width .250s ease-in-out; - transition: width .250s ease-in-out; - } - article.pytorch-article .tutorials-callout-container .btn.callout-button:hover:after { - width: 100%; - } + +.qiskit-call-to-action-item a::after { + content: ""; + display: block; + width: 0; + height: 1px; + position: absolute; + bottom: 0; + left: 0; + background-color: #8B34FC; + transition: width .250s ease-in-out; } -article.pytorch-article .tutorials-callout-container .btn.callout-button a { - color: inherit; + +.qiskit-call-to-action-item a:hover::after { + width: 100%; } + .pytorch-container { margin: 0 auto; padding: 0 1.875rem;