Skip to content

Commit 42fb285

Browse files
dbarondbaron
committed
[css-backgrounds-4] Regenerate with actually current bikeshed.
1 parent c371601 commit 42fb285

File tree

1 file changed

+145
-6
lines changed

1 file changed

+145
-6
lines changed

‎css-backgrounds-4/Overview.html‎

Lines changed: 145 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,33 @@
1313
};
1414
</style>
1515
<meta content="Bikeshed 1.0.0" name="generator">
16-
<style>
16+
<style>/* style-md-lists */
17+
18+
/* This is a weird hack for me not yet following the commonmark spec
19+
regarding paragraph and lists. */
20+
[data-md] > :first-child {
21+
margin-top: 0;
22+
}
23+
[data-md] > :last-child {
24+
margin-bottom: 0;
25+
}</style>
26+
<style>/* style-counters */
27+
28+
.issue:not(.no-marker)::before {
29+
content: "Issue " counter(issue);
30+
}
31+
32+
.example:not(.no-marker)::before {
33+
content: "Example";
34+
content: "Example " counter(example);
35+
}
36+
.invalid.example:not(.no-marker)::before,
37+
.illegal.example:not(.no-marker)::before {
38+
content: "Invalid Example";
39+
content: "Invalid Example" counter(example);
40+
}</style>
41+
<style>/* style-dfn-panel */
42+
1743
.dfn-panel {
1844
display: inline-block;
1945
position: absolute;
@@ -48,6 +74,114 @@
4874

4975
.dfn-paneled { cursor: pointer; }
5076
</style>
77+
<style>/* style-selflinks */
78+
79+
.heading, .issue, .note, .example, li, dt {
80+
position: relative;
81+
}
82+
a.self-link {
83+
position: absolute;
84+
top: 0;
85+
left: calc(-1 * (3.5rem - 26px));
86+
width: calc(3.5rem - 26px);
87+
height: 2em;
88+
text-align: center;
89+
border: none;
90+
transition: opacity .2s;
91+
opacity: .5;
92+
}
93+
a.self-link:hover {
94+
opacity: 1;
95+
}
96+
.heading > a.self-link {
97+
font-size: 83%;
98+
}
99+
li > a.self-link {
100+
left: calc(-1 * (3.5rem - 26px) - 2em);
101+
}
102+
dfn > a.self-link {
103+
top: auto;
104+
left: auto;
105+
opacity: 0;
106+
width: 1.5em;
107+
height: 1.5em;
108+
background: gray;
109+
color: white;
110+
font-style: normal;
111+
transition: opacity .2s, background-color .2s, color .2s;
112+
}
113+
dfn:hover > a.self-link {
114+
opacity: 1;
115+
}
116+
dfn > a.self-link:hover {
117+
color: black;
118+
}
119+
120+
a.self-link::before { content: "¶"; }
121+
.heading > a.self-link::before { content: "§"; }
122+
dfn > a.self-link::before { content: "#"; }</style>
123+
<style>/* style-autolinks */
124+
125+
.css.css, .property.property, .descriptor.descriptor {
126+
color: #005a9c;
127+
font-size: inherit;
128+
font-family: inherit;
129+
}
130+
.css::before, .property::before, .descriptor::before {
131+
content: "‘";
132+
}
133+
.css::after, .property::after, .descriptor::after {
134+
content: "’";
135+
}
136+
.property, .descriptor {
137+
/* Don't wrap property and descriptor names */
138+
white-space: nowrap;
139+
}
140+
.type { /* CSS value <type> */
141+
font-style: italic;
142+
}
143+
pre .property::before, pre .property::after {
144+
content: "";
145+
}
146+
[data-link-type="property"]::before,
147+
[data-link-type="propdesc"]::before,
148+
[data-link-type="descriptor"]::before,
149+
[data-link-type="value"]::before,
150+
[data-link-type="function"]::before,
151+
[data-link-type="at-rule"]::before,
152+
[data-link-type="selector"]::before,
153+
[data-link-type="maybe"]::before {
154+
content: "‘";
155+
}
156+
[data-link-type="property"]::after,
157+
[data-link-type="propdesc"]::after,
158+
[data-link-type="descriptor"]::after,
159+
[data-link-type="value"]::after,
160+
[data-link-type="function"]::after,
161+
[data-link-type="at-rule"]::after,
162+
[data-link-type="selector"]::after,
163+
[data-link-type="maybe"]::after {
164+
content: "’";
165+
}
166+
167+
[data-link-type].production::before,
168+
[data-link-type].production::after,
169+
.prod [data-link-type]::before,
170+
.prod [data-link-type]::after {
171+
content: "";
172+
}
173+
174+
[data-link-type=element],
175+
[data-link-type=element-attr] {
176+
font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
177+
font-size: .9em;
178+
}
179+
[data-link-type=element]::before { content: "<" }
180+
[data-link-type=element]::after { content: ">" }
181+
182+
[data-link-type=biblio] {
183+
white-space: pre;
184+
}</style>
51185
<body class="h-entry">
52186
<div class="head">
53187
<p data-fill-with="logo"><a class="logo" href="http://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" width="72"> </a> </p>
@@ -57,7 +191,7 @@ <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="cont
57191
<dl>
58192
<dt>This version:
59193
<dd><a class="u-url" href="https://drafts.csswg.org/css-backgrounds-4/">https://drafts.csswg.org/css-backgrounds-4/</a>
60-
<dt>Latest version:
194+
<dt>Latest published version:
61195
<dd><a href="https://www.w3.org/TR/css-backgrounds-4/">https://www.w3.org/TR/css-backgrounds-4/</a>
62196
<dt>Feedback:
63197
<dd><span><a href="mailto:www-style@w3.org?subject=%5Bcss-backgrounds%5D%20YOUR%20TOPIC%20HERE">www-style@w3.org</a> with subject line “<kbd>[css-backgrounds] <i data-lt="">… message topic …</i></kbd>” (<a href="http://lists.w3.org/Archives/Public/www-style/" rel="discussion">archives</a>)</span>
@@ -391,7 +525,7 @@ <h3 class="heading settled" data-level="3.1" id="corner-sizing"><span class="sec
391525
Corner Shape and Size: the corners shorthand</a> <a href="#ref-for-propdef-border-radius-3">(2)</a> <a href="#ref-for-propdef-border-radius-4">(3)</a></span></span></dfn>
392526
<tr class="value">
393527
<th>Value:
394-
<td class="prod">[ <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#length-value">&lt;length></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-3/#comb-one">|</a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value">&lt;percentage></a> ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-3/#mult-num-range">{1,4}</a> [ / [ <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#length-value">&lt;length></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-3/#comb-one">|</a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value">&lt;percentage></a> ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-3/#mult-num-range">{1,4}</a> ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-3/#mult-opt">?</a>
528+
<td class="prod">[ <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#length-value" title="Expands to: em | advance measure | ch | vmin | cm | pc | pixel unit | in | rem | q | vh | ex | pt | vw | vmax | mm">&lt;length></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-3/#comb-one">|</a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value">&lt;percentage></a> ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-3/#mult-num-range">{1,4}</a> [ / [ <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#length-value" title="Expands to: em | advance measure | ch | vmin | cm | pc | pixel unit | in | rem | q | vh | ex | pt | vw | vmax | mm">&lt;length></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-3/#comb-one">|</a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value">&lt;percentage></a> ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-3/#mult-num-range">{1,4}</a> ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-3/#mult-opt">?</a>
395529
<tr>
396530
<th>Initial:
397531
<td>0
@@ -606,8 +740,8 @@ <h3 class="heading settled" data-level="4.1" id="border-limit"><span class="secn
606740
corner. For the left and right (vertical) sides, draws the top/bottom
607741
portion, as specified. Distances are measured as for <a class="css" data-link-type="maybe" href="#valdef-border-limit-corners" id="ref-for-valdef-border-limit-corners-3">corners</a>.
608742
</dl>
609-
<div class="example" id="example-211cc22c">
610-
<a class="self-link" href="#example-211cc22c"></a>
743+
<div class="example" id="example-b1dc6000">
744+
<a class="self-link" href="#example-b1dc6000"></a>
611745
<p>The following example draws only the middle 50% of the sides.</p>
612746
<pre>box { border: solid; border-parts: sides 50% }</pre>
613747
<p>The following example draws only the curved parts of the corners.</p>
@@ -1285,13 +1419,18 @@ <h2 class="no-num no-ref heading settled" id="issues-index"><span class="content
12851419
<div class="issue">Should these properties be simplified to only accept <code>normal | [ &lt;length> | &lt;percentage> ] +</code>? <a href="#issue-14d9ac8f"> ↵ </a></div>
12861420
<div class="issue">Additions are a work in progress... here’s what we’re planning to add. :) <a href="#issue-faa8d599"> ↵ </a></div>
12871421
</div>
1288-
<script>
1422+
<script>/* script-dfn-panel */
1423+
12891424
document.body.addEventListener("click", function(e) {
12901425
var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
12911426
// Find the dfn element or panel, if any, that was clicked on.
12921427
var el = e.target;
12931428
var target;
12941429
while(el.parentElement) {
1430+
if(el.tagName == "A") {
1431+
// Clicked on a link; intercept this early in case it was nested in a <dfn>
1432+
return true;
1433+
}
12951434
if(el.tagName == "DFN") {
12961435
target = "dfn";
12971436
break;

0 commit comments

Comments
 (0)