|
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;
|
|
56 | 56 | --component-gap: 3.5rem;
|
57 | 57 | --overflow-gutter-extension: 1rem;
|
58 | 58 | }
|
59 |
| -body { |
| 59 | + |
| 60 | +html, |
| 61 | +body, |
| 62 | +p, |
| 63 | +ol, |
| 64 | +ul, |
| 65 | +li, |
| 66 | +dl, |
| 67 | +dt, |
| 68 | +dd, |
| 69 | +blockquote, |
| 70 | +figure, |
| 71 | +fieldset, |
| 72 | +legend, |
| 73 | +textarea, |
| 74 | +pre, |
| 75 | +iframe, |
| 76 | +hr, |
| 77 | +h1, |
| 78 | +h2, |
| 79 | +h3, |
| 80 | +h4, |
| 81 | +h5, |
| 82 | +h6 { |
60 | 83 | margin: 0;
|
| 84 | + padding: 0; |
61 | 85 | }
|
62 | 86 |
|
63 | 87 | @supports (font-variation-settings: normal) {
|
|
91 | 115 | font-weight: 400;
|
92 | 116 | }
|
93 | 117 |
|
| 118 | +ul, |
| 119 | +ol { |
| 120 | + padding: 0; |
| 121 | + margin: 0; |
| 122 | +} |
| 123 | + |
| 124 | +ul li, |
| 125 | +ol li { |
| 126 | + margin-bottom: 0.5rem; |
| 127 | +} |
| 128 | + |
| 129 | +ul li:last-child, |
| 130 | +ol li:last-child { |
| 131 | + margin-bottom: 0; |
| 132 | +} |
| 133 | + |
94 | 134 | /* layout */
|
95 | 135 | header {
|
96 | 136 | margin: 2rem 2rem 0 2rem;
|
@@ -261,6 +301,7 @@ nav {
|
261 | 301 | grid-template-columns: var(--text-content-width-iphone-13) 1fr;
|
262 | 302 | margin-top: 2rem;
|
263 | 303 | grid-auto-rows: max-content;
|
| 304 | + grid-gap: 1rem; |
264 | 305 | }
|
265 | 306 |
|
266 | 307 | .text-content > :not(.wide) {
|
@@ -793,7 +834,7 @@ main {
|
793 | 834 | }
|
794 | 835 |
|
795 | 836 | p {
|
796 |
| - margin: 0 0 1.5rem 0; |
| 837 | + margin: 0; |
797 | 838 | line-height: 1.5rem;
|
798 | 839 | }
|
799 | 840 |
|
@@ -836,12 +877,12 @@ a:hover {
|
836 | 877 |
|
837 | 878 | h1 {
|
838 | 879 | font-size: 2rem;
|
839 |
| - margin: 0 0 2rem 0; |
| 880 | + margin: 0 0 1rem 0; |
840 | 881 | }
|
841 | 882 |
|
842 | 883 | h2 {
|
843 | 884 | font-size: 1.5rem;
|
844 |
| - margin: 0 0 1rem 0; |
| 885 | + margin: 1rem 0 .75rem 0; |
845 | 886 | }
|
846 | 887 |
|
847 | 888 | /* tables */
|
@@ -910,7 +951,7 @@ table hr {
|
910 | 951 | blockquote {
|
911 | 952 | border: 1px solid var(--color-foreground);
|
912 | 953 | padding: 1rem;
|
913 |
| - margin: 0 -1rem; |
| 954 | + margin: 1rem -1rem; |
914 | 955 |
|
915 | 956 | /* solid 3px drop shadow */
|
916 | 957 | box-shadow: 3px 3px 0px var(--color-shadow);
|
@@ -959,6 +1000,13 @@ blockquote.side-callout {
|
959 | 1000 | grid-row: span 2;
|
960 | 1001 | }
|
961 | 1002 |
|
| 1003 | +/* blockquote doesn't have an internal grid |
| 1004 | +so grid-gap won't handle the spacing */ |
| 1005 | +blockquote ol, |
| 1006 | +blockquote ul { |
| 1007 | + margin: 0 0 1rem 1rem; |
| 1008 | +} |
| 1009 | + |
962 | 1010 | /* Tabs */
|
963 | 1011 | .tabs-container {
|
964 | 1012 | /* border-bottom: 1px solid black; */
|
@@ -1037,6 +1085,7 @@ blockquote.side-callout {
|
1037 | 1085 | border: 1px solid var(--color-tabs-divider);
|
1038 | 1086 | border-bottom: 1px solid black;
|
1039 | 1087 | padding: 10px;
|
| 1088 | + margin-bottom: 0; |
1040 | 1089 |
|
1041 | 1090 | a {
|
1042 | 1091 | text-decoration: none;
|
@@ -1066,6 +1115,7 @@ blockquote.side-callout {
|
1066 | 1115 |
|
1067 | 1116 | .tab-content {
|
1068 | 1117 | border-bottom: 1px solid black;
|
| 1118 | + padding-bottom: 1rem; |
1069 | 1119 |
|
1070 | 1120 | .tab-pane {
|
1071 | 1121 | display: none;
|
@@ -1096,17 +1146,13 @@ blockquote.side-callout {
|
1096 | 1146 | margin-top: -1.5rem;
|
1097 | 1147 | }
|
1098 | 1148 |
|
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 | 1149 | .highlight-v2 {
|
1105 | 1150 | border-top: 1px solid #cccccc;
|
1106 | 1151 | border-bottom: 1px solid #cccccc;
|
1107 | 1152 | overflow-x: scroll;
|
1108 | 1153 | scrollbar-width: none;
|
1109 | 1154 | line-height: 1.3rem;
|
| 1155 | + padding: 1rem 0; |
1110 | 1156 | }
|
1111 | 1157 |
|
1112 | 1158 | .highlight-v2.single-line {
|
@@ -1140,6 +1186,11 @@ li .code-block {
|
1140 | 1186 | position: relative;
|
1141 | 1187 | }
|
1142 | 1188 |
|
| 1189 | +ol .code-container, |
| 1190 | +ul .code-container { |
| 1191 | + margin-top: 0.75rem; |
| 1192 | +} |
| 1193 | + |
1143 | 1194 | .code-container:hover {
|
1144 | 1195 | .code-copy-button {
|
1145 | 1196 | display: block;
|
|
0 commit comments