global: add CSS class to mockup screenshot

reanahub · Sep 15, 2023 · 3659eb3 · 3659eb3
1 parent e76a6a2
commit 3659eb3
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 1 deletion.
diff --git a/docs/advanced-usage/access-control/private-docker-registries/index.md b/docs/advanced-usage/access-control/private-docker-registries/index.md
@@ -12,7 +12,7 @@ Go to the _Project members_ tab of your CERN GitLab repository web interface
 [reana](https://gitlab.cern.ch/reana) service account as a collaborator with
 the "Reporter" role:
 
-![gitlab-authorize-reana](../../../images/gitlab-private-docker-registry.png)
+![gitlab-authorize-reana](../../../images/gitlab-private-docker-registry.png){.screenshot-browser-mockup}
 
 This will ensure that the REANA platform will be able to access your private
 repositories and pull your images.

diff --git a/docs/images/window-buttons-for-mockup.png b/docs/images/window-buttons-for-mockup.png
diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
@@ -173,3 +173,15 @@ pre > code > .gp {
     -webkit-user-select: none;
     user-select: none;
 }
+
+img.screenshot-browser-mockup {
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2), 0 0 2px rgba(0, 0, 0, 0.4);
+    border-radius: 4px;
+    background:
+        url('../images/window-buttons-for-mockup.png') no-repeat left top,
+        #333; /* Dark background for browser bar */
+    padding-top: 20px; /* This assumes the window bar height is 20px. Adjust if needed */
+    background-size: auto 20px, 100%;
+    margin: 10px;
+    max-width: calc(100% - 20px);
+}
diff --git a/mkdocs.yml b/mkdocs.yml
@@ -46,6 +46,7 @@ markdown_extensions:
   - pymdownx.highlight
   - pymdownx.details # collapsible admonitions
   - pymdownx.superfences # allows nesting of code blocks inside admonitions
+  - attr_list
 
 # Plugins
 plugins: