Responsive: Fix callout handling and default side

Author: nginx-jack

assets/css/v2/style.css

@@ -42,10 +42,10 @@
   --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;
+  --text-content-width-iphone-13: 30em;
+  --text-content-width-mbp-14: 40em;
+  --text-content-width-mbp-16: 50em;
+  --text-content-width-4k-display: 50em;
   --codeblock-comment-diff: 2rem;
   --codeblock-comment-space-between: 10px;
   --codeblock-horizontal-line-length: 2rem;
@@ -334,6 +334,7 @@ nav {
   grid-column: 1 / -1;
 }
 
+/* The default main-layout */
 .main-layout {
   display: grid;
   grid-template-columns: 1fr;
@@ -365,20 +366,21 @@ nav {
   width: 100%;
 }
 
-@media (min-width: 1185px) {
-  .main-layout {
+/* TODO: Maybe too soon to get rid of sidebar? */
+@media (max-width: 95em) {
+  .base-layout {
     display: grid;
-    grid-template-columns: var(--sidebar-width) 1fr;
+    grid-template-rows: repeat(2, auto);
     column-gap: var(--component-gap);
   }
-}
-@media (max-width: 1184px) {
+
   .sidebar-layout {
     display: none;
   }
 }
 
-@media (min-width: 1512px) {
+/* Will not drop to single column until as late as possible */
+@media (min-width: 64em) {
   /* Macbook Pro 14 */
   .base-layout {
     display: grid;
@@ -417,7 +419,7 @@ nav {
   }
 }
 
-@media (min-width: 1728px) {
+@media (min-width: 103em) {
   /* Macbook Pro 16 */
   .content-layout {
     display: grid;
@@ -436,7 +438,7 @@ nav {
   }
 }
 
-@media (min-width: 2560px) {
+@media (min-width: 113em) {
   /* 4k Desktop */
   .content-layout {
     display: grid;
@@ -1081,9 +1083,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: 64em) {
+  blockquote.side-callout {
+    grid-column: 2 !important;
+    align-self: start;
+  }
 }
 
 blockquote > div > * {
@@ -1095,6 +1100,10 @@ blockquote ul {
   margin: 0 0 1rem 1rem;
 }
 
+li > blockquote {
+  margin: var(--flow-gap) 0 0 0;
+}
+
 /* Tabs */
 .tabs-container {
   /* border-bottom: 1px solid black; */

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 -->