Skip to content

Commit d30f27f

Browse files
nginx-jacknginx-jack
committed
Responsive: Fix callout handling and default side
Use `minmax` to manage content and side-callout column Remove device specific media queries
1 parent a7a0de8 commit d30f27f

File tree

5 files changed

+129
-75
lines changed

5 files changed

+129
-75
lines changed

‎assets/css/v2/style.css

+37-68
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,13 @@
3232
--color-callout-important-primary: 0.36 0 0;
3333
--color-callout-important-shadow: 0.23 0 0 / 7.06%;
3434

35+
/* vars for the primary grid setup */
36+
--grid-sidebar: 24rem;
37+
--grid-content: minmax(34rem, 50rem);
38+
--grid-content-mobile: minmax(20rem, 50rem);
39+
--grid-side-callout: minmax(18rem, 26rem);
40+
--grid-column-gutter: 3.5rem;
41+
3542
--code-copy-icon-height: 1rem;
3643
--code-copy-icon-width: 1rem;
3744
--breadcrumb-max-height: 54px;
@@ -48,18 +55,13 @@
4855
--table-min-column-spacing-wide: 0.75rem;
4956
--table-header-bottom-spacing: 1rem;
5057
--table-line-height: 1px;
51-
--text-content-width-iphone-13: 30rem;
52-
--text-content-width-mbp-14: 40rem;
53-
--text-content-width-mbp-16: 50rem;
54-
--text-content-width-4k-display: 60rem;
5558
--codeblock-comment-diff: 2rem;
5659
--codeblock-comment-space-between: 10px;
5760
--codeblock-horizontal-line-length: 2rem;
5861
--codeblock-horizontal-line-overflow: 0.25rem;
5962
--codeblock-border-thickness: 1px;
6063
--codeblock-code-section-padding-left: 1rem;
6164
--codeblock-line-box-side-length: 4px;
62-
--component-gap: 3.5rem;
6365
--overflow-gutter-extension: 1rem;
6466

6567
--flow-gap: 1rem;
@@ -134,7 +136,7 @@ h6 {
134136

135137
/* header */
136138
p {
137-
font-weight: 400;
139+
font-weight: 350;
138140
}
139141

140142
ul,
@@ -304,7 +306,7 @@ nav {
304306

305307
.content-layout {
306308
display: grid;
307-
grid-template-columns: var(--text-content-width-iphone-13) 1fr;
309+
grid-template-columns: 1fr 1fr;
308310
grid-template-rows: var(--breadcrumb-max-height) 1fr;
309311
z-index: 1;
310312
margin-top: 2rem;
@@ -340,6 +342,7 @@ nav {
340342
grid-column: 1 / -1;
341343
}
342344

345+
/* The default main-layout */
343346
.main-layout {
344347
display: grid;
345348
grid-template-columns: 1fr;
@@ -353,10 +356,12 @@ nav {
353356
.text-content {
354357
grid-column: 1 / -1;
355358
display: grid;
356-
grid-template-columns: var(--text-content-width-iphone-13) 1fr;
359+
grid-template-columns: var(--grid-content-mobile);
360+
column-gap: var(--grid-column-gutter);
357361
margin-top: 2rem;
358362
grid-auto-rows: max-content;
359-
grid-gap: var(--flow-gap);
363+
row-gap: var(--flow-gap);
364+
justify-content: center;
360365
}
361366

362367
.text-content > :not(.wide) {
@@ -371,33 +376,29 @@ nav {
371376
width: 100%;
372377
}
373378

374-
@media (min-width: 1185px) {
375-
.main-layout {
379+
@media (max-width: 88rem) {
380+
.base-layout {
376381
display: grid;
377-
grid-template-columns: var(--sidebar-width) 1fr;
378-
column-gap: var(--component-gap);
382+
grid-template-rows: repeat(2, auto);
383+
column-gap: var(--grid-column-gutter);
379384
}
380-
}
381-
@media (max-width: 1184px) {
385+
382386
.sidebar-layout {
383387
display: none;
384388
}
385389
}
386390

387-
@media (min-width: 1512px) {
388-
/* Macbook Pro 14 */
391+
@media (min-width: 88em) {
389392
.base-layout {
390393
display: grid;
391394
grid-template-rows: repeat(2, auto);
392-
column-gap: var(--component-gap);
395+
column-gap: var(--grid-column-gutter);
393396
max-width: 100%;
394397
}
395398

396399
.text-content {
397-
grid-template-columns: var(--text-content-width-mbp-14) var(
398-
--side-gutter-width
399-
);
400-
column-gap: var(--component-gap);
400+
grid-template-columns: var(--grid-content) var(--grid-side-callout);
401+
column-gap: var(--grid-column-gutter);
401402
}
402403

403404
.text-content > :not(.wide) {
@@ -407,59 +408,20 @@ nav {
407408
.main-layout {
408409
display: grid;
409410
grid-template-columns: var(--sidebar-width) 1fr;
410-
column-gap: var(--component-gap);
411+
column-gap: var(--grid-column-gutter);
411412
}
412413

413414
.content-layout {
414415
display: grid;
415-
grid-template-columns: var(--text-content-width-mbp-14) var(
416-
--side-gutter-width
417-
);
418-
column-gap: var(--component-gap);
416+
grid-template-columns: var(--grid-content) var(--grid-side-callout);
417+
column-gap: var(--grid-column-gutter);
419418
}
420419

421420
.content-layout .side-gutter {
422421
grid-column-start: 2;
423422
}
424423
}
425424

426-
@media (min-width: 1728px) {
427-
/* Macbook Pro 16 */
428-
.content-layout {
429-
display: grid;
430-
grid-template-columns: var(--text-content-width-mbp-16) var(
431-
--side-gutter-width
432-
);
433-
column-gap: var(--component-gap);
434-
}
435-
436-
.text-content {
437-
grid-template-columns: var(--text-content-width-mbp-16) var(
438-
--side-gutter-width
439-
);
440-
column-gap: var(--component-gap);
441-
align-items: start;
442-
}
443-
}
444-
445-
@media (min-width: 2560px) {
446-
/* 4k Desktop */
447-
.content-layout {
448-
display: grid;
449-
grid-template-columns: var(--text-content-width-4k-display) var(
450-
--side-gutter-width
451-
);
452-
column-gap: var(--component-gap);
453-
}
454-
455-
.text-content {
456-
grid-template-columns: var(--text-content-width-4k-display) var(
457-
--side-gutter-width
458-
);
459-
column-gap: var(--component-gap);
460-
}
461-
}
462-
463425
.list-page {
464426
--flow-gap: .5rem;
465427

@@ -934,7 +896,7 @@ button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon {
934896
/* content */
935897
main {
936898
flex: 1;
937-
min-width: 30rem;
899+
min-width: 20rem;
938900
margin: 0 2rem 2rem 2rem;
939901
}
940902

@@ -1100,9 +1062,12 @@ blockquote p:last-child {
11001062
margin: 0 auto;
11011063
}
11021064

1103-
blockquote.side-callout {
1104-
grid-column: 2 !important;
1105-
grid-row: span 2;
1065+
/* Maintain the split column for as long as possible */
1066+
@media (min-width: 67rem) {
1067+
blockquote.side-callout {
1068+
grid-column: 2 !important;
1069+
align-self: start;
1070+
}
11061071
}
11071072

11081073
blockquote > div > * {
@@ -1114,6 +1079,10 @@ blockquote ul {
11141079
margin: 0 0 1rem 1rem;
11151080
}
11161081

1082+
li > blockquote {
1083+
margin: var(--flow-gap) 0 0 0;
1084+
}
1085+
11171086
blockquote.call-out {
11181087
padding: 0.5rem;
11191088

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

+23-3
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,28 @@ weight: 200
66
---
77

88

9-
## Code Block Multi line
9+
## Code Block Multi line with callout
10+
11+
12+
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.
13+
14+
**For NGINX Plus R33 or later**:
15+
16+
- Use the `NGINX_LICENSE_JWT` variable to pass your JWT license. Replace `YOUR_JWT_HERE` with your JWT.
17+
18+
For more details, see About subscription licenses
19+
20+
```sh
21+
sudo docker run \
22+
--env=NGINX_LICENSE_JWT="YOUR_JWT_HERE" \
23+
--env=NGINX_AGENT_SERVER_GRPCPORT=443 \
24+
--env=NGINX_AGENT_SERVER_HOST=agent.connect.nginx.com \
25+
--env=NGINX_AGENT_SERVER_TOKEN="YOUR_NGINX_ONE_DATA_PLANE_KEY_HERE" \
26+
--env=NGINX_AGENT_TLS_ENABLE=true \
27+
--restart=always \
28+
--runtime=runc \
29+
-d private-registry.nginx.com/nginx-plus/agent:<VERSION_TAG>
30+
```
1031

1132
{{<call-out "" "Example:" "" >}}
1233
To start the container with the `debian` image:
@@ -27,12 +48,11 @@ sudo docker run \
2748

2849
## Code Block Single line
2950

30-
{{<call-out "" "Example:" "" >}}
51+
3152
How to read load nginx config
3253

3354
```sh
3455
nginx -s reload
3556
```
3657

37-
{{</call-out>}}
3858

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

+15-1
Original file line numberDiff line numberDiff line change
@@ -29,4 +29,18 @@ weight: 200
2929
- Add a configuration to the config sync group, so all instances inherit it.
3030
- Add the instances in a separate operation.
3131

32-
Your instances should synchronize with your desired configuration within 30 seconds. {{< /note >}}
32+
Your instances should synchronize with your desired configuration within 30 seconds. {{< /note >}}
33+
34+
35+
## Callout within list
36+
37+
1. Open the JSON Web Token file you downloaded from [MyF5](https://my.f5.com/manage/s/subscriptions) and copy its contents.
38+
39+
{{<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>}}
40+
41+
2. Log in to the Docker registry using the contents of the JSON Web Token file:
42+
43+
```bash
44+
docker login private-registry.nginx.com --username=<JWT_CONTENTS> --password=none
45+
```
46+

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

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
---
2+
description: Callout - Side
3+
title: Callout - Side
4+
weight: 200
5+
---
6+
7+
## Text is longer than callout
8+
This is some text that should be along the left of the call out.
9+
This assumes the callout text is shorter than the text in the callout.
10+
If the text in the paragraph is shorter than the callout, it's likely
11+
the content needs to be re-written.
12+
13+
{{<call-out "tip side-callout" "Tip for Automated Reporting" >}}
14+
I am some call out text. Look at me go!
15+
{{</call-out>}}
16+
17+
## Text is shorter than callout
18+
19+
This is some text that should be along the left of the call out.
20+
This assumes the callout text is shorter than the text in the callout.
21+
If the text in the paragraph is shorter than the callout, it's likely
22+
the content needs to be re-written.
23+
24+
{{<call-out "tip side-callout" "Tip for Automated Reporting" >}}
25+
I am some call out text. Look at me go!
26+
{{</call-out>}}
27+
28+
## Very long callout with short text
29+
30+
Short Text
31+
32+
{{<call-out "tip side-callout" "Tip for Automated Reporting" >}}
33+
If you add multiple instances to a single config sync group, simultaneously (with automation), follow these steps. Your instances will inherit your desired configuration:
34+
35+
Create a config sync group.
36+
Add a configuration to the config sync group, so all instances inherit it.
37+
Add the instances in a separate operation.
38+
Your instances should synchronize with your desired configuration within 30 seconds.
39+
{{</call-out>}}
40+
41+
42+
## Non-side call out
43+
44+
This is some text that should be along the left of the call out.
45+
This assumes the callout text is shorter than the text in the callout.
46+
If the text in the paragraph is shorter than the callout, it's likely
47+
the content needs to be re-written.
48+
49+
{{<call-out "tip inline-callout" "Tip for Automated Reporting" >}}
50+
I am some call out text. Look at me go!
51+
{{</call-out>}}

‎layouts/shortcodes/call-out.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22
{{ $sideOption := "side-callout" }}
33
{{ $inlineOption := "inline-callout" }}
44

5-
<!-- Add default option for callouts that are "inline" if one is not provided -->
6-
{{ if and (not (strings.Contains $class $inlineOption)) (not (strings.Contains $class $sideOption)) }}
7-
{{ $class = printf "%s %s" $class $inlineOption }}
5+
<!-- Add default option for callouts that are "sideline" if one is not provided -->
6+
{{ if and (not (strings.Contains $class $sideOption)) (not (strings.Contains $class $inlineOption)) }}
7+
{{ $class = printf "%s %s" $class $sideOption }}
88
{{ end }}
99

1010
<!-- Blockquote element with a class that is the first parameter passed to the shortcode -->

0 commit comments

Comments
 (0)