|
36 | 36 | --sidebar-width: 24rem;
|
37 | 37 | --sidebar-line-width: 11.5px;
|
38 | 38 | --side-gutter-width: 20rem;
|
39 |
| - --table-top-bottom-spacing: 3rem; |
| 39 | + --table-top-bottom-spacing: 1rem; |
40 | 40 | --table-row-space-between: 1.5rem;
|
41 | 41 | --table-min-column-spacing-narrow: 1.5rem;
|
42 | 42 | --table-min-column-spacing-wide: 0.75rem;
|
|
55 | 55 | --codeblock-line-box-side-length: 4px;
|
56 | 56 | --component-gap: 3.5rem;
|
57 | 57 | --overflow-gutter-extension: 1rem;
|
58 |
| -} |
59 |
| -body { |
| 58 | + |
| 59 | + --flow-gap: 1rem; |
| 60 | +} |
| 61 | + |
| 62 | +html, |
| 63 | +body, |
| 64 | +p, |
| 65 | +ol, |
| 66 | +ul, |
| 67 | +li, |
| 68 | +dl, |
| 69 | +dt, |
| 70 | +dd, |
| 71 | +blockquote, |
| 72 | +figure, |
| 73 | +fieldset, |
| 74 | +legend, |
| 75 | +textarea, |
| 76 | +pre, |
| 77 | +iframe, |
| 78 | +hr, |
| 79 | +h1, |
| 80 | +h2, |
| 81 | +h3, |
| 82 | +h4, |
| 83 | +h5, |
| 84 | +h6 { |
60 | 85 | margin: 0;
|
| 86 | + padding: 0; |
61 | 87 | }
|
62 | 88 |
|
63 | 89 | @supports (font-variation-settings: normal) {
|
|
91 | 117 | font-weight: 400;
|
92 | 118 | }
|
93 | 119 |
|
| 120 | +ul, |
| 121 | +ol { |
| 122 | + padding: 0; |
| 123 | + margin: 0; |
| 124 | +} |
| 125 | + |
| 126 | +ul li, |
| 127 | +ol li { |
| 128 | + margin-bottom: 0.5rem; |
| 129 | +} |
| 130 | + |
| 131 | +ul li:last-child, |
| 132 | +ol li:last-child { |
| 133 | + margin-bottom: 0; |
| 134 | +} |
| 135 | + |
94 | 136 | /* layout */
|
95 | 137 | header {
|
96 | 138 | margin: 2rem 2rem 0 2rem;
|
@@ -261,6 +303,7 @@ nav {
|
261 | 303 | grid-template-columns: var(--text-content-width-iphone-13) 1fr;
|
262 | 304 | margin-top: 2rem;
|
263 | 305 | grid-auto-rows: max-content;
|
| 306 | + grid-gap: var(--flow-gap); |
264 | 307 | }
|
265 | 308 |
|
266 | 309 | .text-content > :not(.wide) {
|
@@ -793,7 +836,7 @@ main {
|
793 | 836 | }
|
794 | 837 |
|
795 | 838 | p {
|
796 |
| - margin: 0 0 1.5rem 0; |
| 839 | + margin: 0; |
797 | 840 | line-height: 1.5rem;
|
798 | 841 | }
|
799 | 842 |
|
@@ -836,12 +879,12 @@ a:hover {
|
836 | 879 |
|
837 | 880 | h1 {
|
838 | 881 | font-size: 2rem;
|
839 |
| - margin: 0 0 2rem 0; |
| 882 | + margin: 0 0 1rem 0; |
840 | 883 | }
|
841 | 884 |
|
842 | 885 | h2 {
|
843 | 886 | font-size: 1.5rem;
|
844 |
| - margin: 0 0 1rem 0; |
| 887 | + margin: 1rem 0 .75rem 0; |
845 | 888 | }
|
846 | 889 |
|
847 | 890 | /* tables */
|
@@ -910,7 +953,7 @@ table hr {
|
910 | 953 | blockquote {
|
911 | 954 | border: 1px solid var(--color-foreground);
|
912 | 955 | padding: 1rem;
|
913 |
| - margin: 0 -1rem; |
| 956 | + margin: 1rem -1rem; |
914 | 957 |
|
915 | 958 | /* solid 3px drop shadow */
|
916 | 959 | box-shadow: 3px 3px 0px var(--color-shadow);
|
@@ -959,6 +1002,15 @@ blockquote.side-callout {
|
959 | 1002 | grid-row: span 2;
|
960 | 1003 | }
|
961 | 1004 |
|
| 1005 | +blockquote > div > * { |
| 1006 | + margin: 0 0 var(--flow-gap) 0; |
| 1007 | +} |
| 1008 | + |
| 1009 | +blockquote ol, |
| 1010 | +blockquote ul { |
| 1011 | + margin: 0 0 1rem 1rem; |
| 1012 | +} |
| 1013 | + |
962 | 1014 | /* Tabs */
|
963 | 1015 | .tabs-container {
|
964 | 1016 | /* border-bottom: 1px solid black; */
|
@@ -1037,6 +1089,7 @@ blockquote.side-callout {
|
1037 | 1089 | border: 1px solid var(--color-tabs-divider);
|
1038 | 1090 | border-bottom: 1px solid black;
|
1039 | 1091 | padding: 10px;
|
| 1092 | + margin-bottom: 0; |
1040 | 1093 |
|
1041 | 1094 | a {
|
1042 | 1095 | text-decoration: none;
|
@@ -1066,6 +1119,7 @@ blockquote.side-callout {
|
1066 | 1119 |
|
1067 | 1120 | .tab-content {
|
1068 | 1121 | border-bottom: 1px solid black;
|
| 1122 | + padding-bottom: 1rem; |
1069 | 1123 |
|
1070 | 1124 | .tab-pane {
|
1071 | 1125 | display: none;
|
@@ -1096,17 +1150,13 @@ blockquote.side-callout {
|
1096 | 1150 | margin-top: -1.5rem;
|
1097 | 1151 | }
|
1098 | 1152 |
|
1099 |
| -li .code-block { |
1100 |
| - /* For indented code blocks, move 1rem back to align code with text from heading */ |
1101 |
| - margin-left: -1rem; |
1102 |
| -} |
1103 |
| - |
1104 | 1153 | .highlight-v2 {
|
1105 | 1154 | border-top: 1px solid #cccccc;
|
1106 | 1155 | border-bottom: 1px solid #cccccc;
|
1107 | 1156 | overflow-x: scroll;
|
1108 | 1157 | scrollbar-width: none;
|
1109 | 1158 | line-height: 1.3rem;
|
| 1159 | + padding: 1rem 0; |
1110 | 1160 | }
|
1111 | 1161 |
|
1112 | 1162 | .highlight-v2.single-line {
|
@@ -1140,6 +1190,11 @@ li .code-block {
|
1140 | 1190 | position: relative;
|
1141 | 1191 | }
|
1142 | 1192 |
|
| 1193 | +ol .code-container, |
| 1194 | +ul .code-container { |
| 1195 | + margin-top: 0.75rem; |
| 1196 | +} |
| 1197 | + |
1143 | 1198 | .code-container:hover {
|
1144 | 1199 | .code-copy-button {
|
1145 | 1200 | display: block;
|
|
0 commit comments