Modified: trunk/Websites/webkit.org/ChangeLog (254307 => 254308)
--- trunk/Websites/webkit.org/ChangeLog 2020-01-09 23:27:00 UTC (rev 254307)
+++ trunk/Websites/webkit.org/ChangeLog 2020-01-09 23:33:51 UTC (rev 254308)
@@ -1,5 +1,38 @@
2020-01-09 Jon Davis <[email protected]>
+ Add styles to support Web Inspector reference articles
+ https://bugs.webkit.org/show_bug.cgi?id=206032
+
+ Reviewed by Devin Rousso.
+
+ * wp-content/themes/webkit/style.css:
+ (main h1,):
+ (main h1):
+ (article .meta .updated):
+ (article .bodycopy,):
+ (.image):
+ (p .image,):
+ (.image.block):
+ (.image img):
+ (.widescreen .image):
+ (.image.slice-top > picture > img):
+ (.image.slice-right > picture > img):
+ (.image.slice-bottom > picture > img):
+ (.image.slice-left > picture > img):
+ (.flex):
+ (.flex.center):
+ (figure.widescreen):
+ (article picture):
+ (article picture > img):
+ (.single-web_inspector_page .landing-link):
+ (.single-web_inspector_page .landing-link:hover):
+ (@media(prefers-color-scheme:dark) article .invert-brightness,):
+ (@media(prefers-color-scheme:dark) .table-of-contents label:after):
+ (article h1,): Deleted.
+ (article .bodycopy): Deleted.
+
+2020-01-09 Jon Davis <[email protected]>
+
Fix redundant anchor tags when generating table of contents
https://bugs.webkit.org/show_bug.cgi?id=206016
Modified: trunk/Websites/webkit.org/wp-content/themes/webkit/style.css (254307 => 254308)
--- trunk/Websites/webkit.org/wp-content/themes/webkit/style.css 2020-01-09 23:27:00 UTC (rev 254307)
+++ trunk/Websites/webkit.org/wp-content/themes/webkit/style.css 2020-01-09 23:33:51 UTC (rev 254308)
@@ -1389,6 +1389,7 @@
display: table;
}
+main h1,
article h1,
article h1 a {
margin: 0 auto 3rem;
@@ -1402,6 +1403,10 @@
color: var(--text-color-heading);
}
+main h1 {
+ text-align: left;
+}
+
article h2 {
font-size: 3.2rem;
line-height: 1.09375;
@@ -1598,6 +1603,13 @@
font-style: italic;
}
+article .meta .updated {
+ text-align: right;
+ font-size: 1.2rem;
+ font-style: italic;
+ text-transform: uppercase;
+}
+
article .two-columns {
columns: 2;
column-gap: 6rem;
@@ -1626,7 +1638,8 @@
box-sizing: border-box;
}
-article .bodycopy {
+article .bodycopy,
+article .meta {
width: 66%;
margin: 0 auto;
position: relative;
@@ -1721,6 +1734,58 @@
padding-bottom: 3rem;
}
+.image {
+ padding: var(--image-padding) var(--image-padding) 0;
+ --image-padding: 0.5em;
+}
+
+p .image,
+li .image {
+ --image-padding: 0;
+}
+
+.image.block {
+ display: block;
+}
+
+.image img {
+ border-color: hsl(0, 0%, 90.6%);
+ border-color: var(--article-border-color);
+ border-style: solid;
+ border-width: 0px;
+}
+
+.widescreen .image {
+ display: inline-block;
+}
+
+.image.slice-top > picture > img {
+ border-top-width: 1px;
+}
+
+.image.slice-right > picture > img {
+ border-right-width: 1px;
+}
+
+.image.slice-bottom > picture > img {
+ border-bottom-width: 1px;
+}
+
+.image.slice-left > picture > img {
+ border-left-width: 1px;
+}
+
+.flex {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ margin-top: 1em;
+}
+
+.flex.center {
+ justify-content: center;
+}
+
article .mattewhite:not(.widescreen) {
border: 1px solid hsl(0, 0%, 90.6%);
border-color: var(--article-border-color);
@@ -1752,6 +1817,7 @@
width: 100vw;
left: 50%;
transform: translate(-50%);
+ clear: both;
}
figure.widescreen img,
@@ -1783,6 +1849,16 @@
margin-left: -3rem;
}
+article picture {
+ max-width: 100%;
+}
+
+article picture > img {
+ max-width: 100%;
+ max-height: 100%;
+}
+
+
article video.alignleft,
article video.alignright {
max-width: 50%;
@@ -1852,6 +1928,21 @@
width: 100%;
}
+/** Web Inspector Pages **/
+.single-web_inspector_page .landing-link {
+ display: block;
+ text-align: left;
+ font-size: 1.3rem;
+ text-transform: uppercase;
+ color: var(--link-color);
+ color: hsl(200, 100%, 40%);
+ margin-bottom: 0;
+}
+
+.single-web_inspector_page .landing-link:hover {
+ text-decoration: underline;
+}
+
/** Load Effects **/
@keyframes fade-in {
@@ -2511,7 +2602,6 @@
}
@media only screen and (max-width: 415px) {
-
.nextrouter-copy {
font-size: 1.7rem;
letter-spacing: -0.016rem;
@@ -2617,7 +2707,7 @@
@media(prefers-color-scheme:dark) {
article .invert-brightness,
- figure img {
+ figure > img {
filter: url(#invertLightness);
}
@@ -2637,6 +2727,10 @@
a.readmore {
background-image: url('images/chevron-dark.svg');
}
+
+ .table-of-contents label:after {
+ filter: invert(100%);
+ }
}
#template {
