Responsive: Fix callout handling and default side

Use `minmax` to manage content and side-callout column
Remove device specific media queries

Author: nginx-jack

assets/css/v2/style.css

@@ -32,6 +32,13 @@
   --color-callout-important-primary: 0.36 0 0;
   --color-callout-important-shadow: 0.23 0 0 / 7.06%;
 
+  /* vars for the primary grid setup */
+  --grid-sidebar: 24rem;
+  --grid-content: minmax(34rem, 50rem);
+  --grid-content-mobile: minmax(20rem, 50rem);
+  --grid-side-callout: minmax(18rem, 26rem);
+  --grid-column-gutter: 3.5rem;
+
   --code-copy-icon-height: 1rem;
   --code-copy-icon-width: 1rem;
   --breadcrumb-max-height: 54px;
@@ -48,18 +55,13 @@
   --table-min-column-spacing-wide: 0.75rem;
   --table-header-bottom-spacing: 1rem;
   --table-line-height: 1px;
-  --text-content-width-iphone-13: 30rem;
-  --text-content-width-mbp-14: 40rem;
-  --text-content-width-mbp-16: 50rem;
-  --text-content-width-4k-display: 60rem;
   --codeblock-comment-diff: 2rem;
   --codeblock-comment-space-between: 10px;
   --codeblock-horizontal-line-length: 2rem;
   --codeblock-horizontal-line-overflow: 0.25rem;
   --codeblock-border-thickness: 1px;
   --codeblock-code-section-padding-left: 1rem;
   --codeblock-line-box-side-length: 4px;
-  --component-gap: 3.5rem;
   --overflow-gutter-extension: 1rem;
 
   --flow-gap: 1rem;
@@ -134,7 +136,7 @@ h6 {
 
 /* header */
 p {
-  font-weight: 400;
+  font-weight: 350;
 }
 
 ul,
@@ -304,7 +306,7 @@ nav {
 
 .content-layout {
   display: grid;
-  grid-template-columns: var(--text-content-width-iphone-13) 1fr;
+  grid-template-columns: 1fr 1fr;
   grid-template-rows: var(--breadcrumb-max-height) 1fr;
   z-index: 1;
   margin-top: 2rem;
@@ -340,6 +342,7 @@ nav {
   grid-column: 1 / -1;
 }
 
+/* The default main-layout */
 .main-layout {
   display: grid;
   grid-template-columns: 1fr;
@@ -353,10 +356,12 @@ nav {
 .text-content {
   grid-column: 1 / -1;
   display: grid;
-  grid-template-columns: var(--text-content-width-iphone-13) 1fr;
+  grid-template-columns: var(--grid-content-mobile);
+  column-gap: var(--grid-column-gutter);
   margin-top: 2rem;
   grid-auto-rows: max-content;
-  grid-gap: var(--flow-gap);
+  row-gap: var(--flow-gap);
+  justify-content: center;
 }
 
 .text-content > :not(.wide) {
@@ -371,33 +376,29 @@ nav {
   width: 100%;
 }
 
-@media (min-width: 1185px) {
-  .main-layout {
+@media (max-width: 88rem) {
+  .base-layout {
     display: grid;
-    grid-template-columns: var(--sidebar-width) 1fr;
-    column-gap: var(--component-gap);
+    grid-template-rows: repeat(2, auto);
+    column-gap: var(--grid-column-gutter);
   }
-}
-@media (max-width: 1184px) {
+
   .sidebar-layout {
     display: none;
   }
 }
 
-@media (min-width: 1512px) {
-  /* Macbook Pro 14 */
+@media (min-width: 88em) {
   .base-layout {
     display: grid;
     grid-template-rows: repeat(2, auto);
-    column-gap: var(--component-gap);
+    column-gap: var(--grid-column-gutter);
     max-width: 100%;
   }
 
   .text-content {
-    grid-template-columns: var(--text-content-width-mbp-14) var(
-        --side-gutter-width
-      );
-    column-gap: var(--component-gap);
+    grid-template-columns: var(--grid-content) var(--grid-side-callout);
+    column-gap: var(--grid-column-gutter);
   }
 
   .text-content > :not(.wide) {
@@ -407,59 +408,20 @@ nav {
   .main-layout {
     display: grid;
     grid-template-columns: var(--sidebar-width) 1fr;
-    column-gap: var(--component-gap);
+    column-gap: var(--grid-column-gutter);
   }
 
   .content-layout {
     display: grid;
-    grid-template-columns: var(--text-content-width-mbp-14) var(
-        --side-gutter-width
-      );
-    column-gap: var(--component-gap);
+    grid-template-columns: var(--grid-content) var(--grid-side-callout);
+    column-gap: var(--grid-column-gutter);
   }
 
   .content-layout .side-gutter {
     grid-column-start: 2;
   }
 }
 
-@media (min-width: 1728px) {
-  /* Macbook Pro 16 */
-  .content-layout {
-    display: grid;
-    grid-template-columns: var(--text-content-width-mbp-16) var(
-        --side-gutter-width
-      );
-    column-gap: var(--component-gap);
-  }
-
-  .text-content {
-    grid-template-columns: var(--text-content-width-mbp-16) var(
-        --side-gutter-width
-      );
-    column-gap: var(--component-gap);
-    align-items: start;
-  }
-}
-
-@media (min-width: 2560px) {
-  /* 4k Desktop */
-  .content-layout {
-    display: grid;
-    grid-template-columns: var(--text-content-width-4k-display) var(
-        --side-gutter-width
-      );
-    column-gap: var(--component-gap);
-  }
-
-  .text-content {
-    grid-template-columns: var(--text-content-width-4k-display) var(
-        --side-gutter-width
-      );
-    column-gap: var(--component-gap);
-  }
-}
-
 .list-page {
   --flow-gap: .5rem;
 
@@ -934,7 +896,7 @@ button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon {
 /* content */
 main {
   flex: 1;
-  min-width: 30rem;
+  min-width: 20rem;
   margin: 0 2rem 2rem 2rem;
 }
 
@@ -1100,9 +1062,12 @@ blockquote p:last-child {
   margin: 0 auto;
 }
 
-blockquote.side-callout {
-  grid-column: 2 !important;
-  grid-row: span 2;
+/* Maintain the split column for as long as possible */
+@media (min-width: 67rem) {
+  blockquote.side-callout {
+    grid-column: 2 !important;
+    align-self: start;
+  }
 }
 
 blockquote > div > * {
@@ -1114,6 +1079,10 @@ blockquote ul {
   margin: 0 0 1rem 1rem;
 }
 
+li > blockquote {
+  margin: var(--flow-gap) 0 0 0;
+}
+
 blockquote.call-out {
   padding: 0.5rem;
 

exampleSite/content/test-product/call-out/call-out-code-blocks.md

@@ -6,7 +6,28 @@ weight: 200
 ---
 
 
-## Code Block Multi line
+## Code Block Multi line with callout
+
+
+Start the Docker container to connect it to NGINX One. Replace `YOUR_NGINX_ONE_DATA_PLANE_KEY_HERE` with your data plane key and `VERSION_TAG` with the version tag you pulled.
+
+**For NGINX Plus R33 or later**:
+
+- Use the `NGINX_LICENSE_JWT` variable to pass your JWT license. Replace `YOUR_JWT_HERE` with your JWT.
+
+For more details, see About subscription licenses
+
+```sh
+sudo docker run \
+--env=NGINX_LICENSE_JWT="YOUR_JWT_HERE" \
+--env=NGINX_AGENT_SERVER_GRPCPORT=443 \
+--env=NGINX_AGENT_SERVER_HOST=agent.connect.nginx.com \
+--env=NGINX_AGENT_SERVER_TOKEN="YOUR_NGINX_ONE_DATA_PLANE_KEY_HERE" \
+--env=NGINX_AGENT_TLS_ENABLE=true \
+--restart=always \
+--runtime=runc \
+-d private-registry.nginx.com/nginx-plus/agent:<VERSION_TAG>
+```
 
 {{<call-out "" "Example:" "" >}}
 To start the container with the `debian` image:
@@ -27,12 +48,11 @@ sudo docker run \
 
 ## Code Block Single line
 
-{{<call-out "" "Example:" "" >}}
+
 How to read load nginx config
 
 ```sh
 nginx -s reload
 ```
 
-{{</call-out>}}
 

exampleSite/content/test-product/call-out/call-out-code-lists.md

@@ -29,4 +29,18 @@ weight: 200
   - Add a configuration to the config sync group, so all instances inherit it.
   - Add the instances in a separate operation.
 
-  Your instances should synchronize with your desired configuration within 30 seconds. {{< /note >}}
+  Your instances should synchronize with your desired configuration within 30 seconds. {{< /note >}}
+
+
+## Callout within list
+
+1. Open the JSON Web Token file you downloaded from [MyF5](https://my.f5.com/manage/s/subscriptions) and copy its contents. 
+
+   {{<call-out "tip" "Copying the JWT token" "" >}} Make sure there are **no extra characters or spaces** when copying the contents of the JWT token: they can invalidate the token and cause 401 errors during authentication.{{</call-out>}}
+
+2. Log in to the Docker registry using the contents of the JSON Web Token file:
+
+   ```bash
+   docker login private-registry.nginx.com --username=<JWT_CONTENTS> --password=none
+   ```
+

exampleSite/content/test-product/call-out/call-out-side.md

@@ -0,0 +1,51 @@
+---
+description: Callout - Side
+title: Callout - Side
+weight: 200
+---
+
+## Text is longer than callout
+This is some text that should be along the left of the call out.
+This assumes the callout text is shorter than the text in the callout.
+If the text in the paragraph is shorter than the callout, it's likely
+the content needs to be re-written.
+
+{{<call-out "tip side-callout" "Tip for Automated Reporting" >}}
+I am some call out text. Look at me go!
+{{</call-out>}}
+
+## Text is shorter than callout
+
+This is some text that should be along the left of the call out.
+This assumes the callout text is shorter than the text in the callout.
+If the text in the paragraph is shorter than the callout, it's likely
+the content needs to be re-written.
+
+{{<call-out "tip side-callout" "Tip for Automated Reporting" >}}
+I am some call out text. Look at me go!
+{{</call-out>}}
+
+## Very long callout with short text
+
+Short Text
+
+{{<call-out "tip side-callout" "Tip for Automated Reporting" >}}
+If you add multiple instances to a single config sync group, simultaneously (with automation), follow these steps. Your instances will inherit your desired configuration:
+
+Create a config sync group.
+Add a configuration to the config sync group, so all instances inherit it.
+Add the instances in a separate operation.
+Your instances should synchronize with your desired configuration within 30 seconds.
+{{</call-out>}}
+
+
+## Non-side call out
+
+This is some text that should be along the left of the call out.
+This assumes the callout text is shorter than the text in the callout.
+If the text in the paragraph is shorter than the callout, it's likely
+the content needs to be re-written.
+
+{{<call-out "tip inline-callout" "Tip for Automated Reporting" >}}
+I am some call out text. Look at me go!
+{{</call-out>}}

layouts/shortcodes/call-out.html

@@ -2,9 +2,9 @@
 {{ $sideOption := "side-callout" }}
 {{ $inlineOption := "inline-callout" }}
 
-<!-- Add default option for callouts that are "inline" if one is not provided -->
-{{ if and (not (strings.Contains $class $inlineOption)) (not (strings.Contains $class $sideOption)) }}
-{{ $class = printf "%s %s" $class $inlineOption }}
+<!-- Add default option for callouts that are "sideline" if one is not provided -->
+{{ if and (not (strings.Contains $class $sideOption)) (not (strings.Contains $class $inlineOption)) }}
+{{ $class = printf "%s %s" $class $sideOption }}
 {{ end }}
 
 <!-- Blockquote element with a class that is the first parameter passed to the shortcode -->