Skip to content

Commit a923c80

Browse files
codehagcodehag
committed
new feature list
1 parent 5be87ba commit a923c80

10 files changed

+197
-100
lines changed

‎_data/stage3.yml

+2
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,8 @@
4646
});
4747
});
4848
}
49+
resources:
50+
- https://github.com/tc39/proposal-dynamic-import
4951

5052
- title: Legacy RegExp features in JavaScript
5153
description: This is a specification draft for the legacy (deprecated) RegExp features in JavaScript, i.e., static properties of the constructor like RegExp.$1 as well as the RegExp.prototype.compile method.

‎_includes/intro.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
<section class="intro">
2-
<div class="g-row">
1+
<section >
2+
<div class="g-row intro">
33
<div class="g-col-4">
44
<h2 class="section-headline">TC39</h2>
55
<p>

‎_includes/proposals.html

+57-54
Original file line numberDiff line numberDiff line change
@@ -9,70 +9,73 @@ <h3>Stage 3</h3>
99
</i>
1010
{% for proposal in site.data.stage3 %}
1111
<section class="featurelist__item">
12-
<header class="featurelist__item__intro" tabindex="0">
13-
<h4>{{ proposal.title }}</h4>
14-
{% if proposal.description %}
15-
<p>{{ proposal.description }}</p>
16-
{% endif %}
17-
</header>
18-
<section class="featurelist__item__info" aria-hidden="true" tabindex="-1">
19-
<div>
20-
<div>
21-
<h5>Status</h5>
22-
<ul class="featurelist__item__status">
23-
<li class="featurelist__item__owner">
24-
<p>Author(s)</p>
25-
{% if proposal.authors | size %}
26-
<p>{{ proposal.authors | join: ", " }}</p>
27-
{% else %}
28-
<p>–</p>
29-
{% endif %}
30-
</li>
31-
<li class="featurelist__item__owner">
32-
<p>Champion(s)</p>
33-
{% if proposal.champions | size %}
34-
<p>{{ proposal.champions | join: ", " }}</p>
35-
{% else %}
36-
<p>–</p>
12+
<section class="">
13+
<header class="featurelist__item__intro" tabindex="0">
14+
{% for url in proposal.resources %}
15+
<section class="g-row">
16+
<h4 class="featurelist__item__title flex-grow">
17+
<a href="{{ url }}">{{ proposal.title }}</a>
18+
</h4>
19+
{% endfor %}
20+
<section class="featurelist__item__tags flex-shrink" tabindex="-1">
21+
<ul class="featurelist__item__status">
22+
{% if proposal.presented | size %}
23+
{% for presentation in proposal.presented %}
24+
<li class="featurelist__item__presented">
25+
<a href="{{ presentation.url }}">{{ presentation.date }}</a>
26+
</li>
27+
{% endfor %}
3728
{% endif %}
38-
</li>
39-
<li class="featurelist__item__tests">
40-
<p>Test(s)</p>
4129
{% if proposal.tests | size %}
42-
<p>{% for url in proposal.tests %}<a href="{{ url }}">{{ url }}</a>{% endfor %}</p>
43-
{% else %}
44-
<p>–</p>
30+
{% for url in proposal.tests %}
31+
<li class="featurelist__item__tests">
32+
<a href="{{ url }}">Tests</a>
33+
</li>
34+
{% endfor %}
4535
{% endif %}
46-
</li>
47-
<li class="featurelist__item__spec">
48-
<p>Specification</p>
4936
{% if proposal.specification %}
50-
<a href="{{ proposal.specification }}">{{ proposal.specification }}</a>
51-
{% else %}
52-
<p>–</p>
37+
<li class="featurelist__item__spec">
38+
<a href="{{ proposal.specification }}">Specification</a>
39+
</li>
5340
{% endif %}
54-
</li>
55-
</ul>
56-
</div>
57-
{% if proposal.example %}
41+
</ul>
42+
</section>
43+
</section>
44+
<section class="featurelist__item__author">
45+
{% if proposal.authors | size %}
46+
Author(s):
47+
{{ proposal.authors | join: ", " }}
48+
{% endif %}
49+
{% if proposal.champions | size %}
50+
|
51+
Champion(s):
52+
{{ proposal.champions | join: ", " }}
53+
{% else %}
54+
{% endif %}
55+
</section>
56+
{% if proposal.description %}
57+
<section class="featurelist__item__desc">{{ proposal.description }}</section>
58+
{% endif %}
59+
{% if proposal.example %}
60+
<div class="featurelist__item__example">Show Example</div>
61+
{% endif %}
62+
<section class="featurelist__item__info" tabindex="-1">
63+
{% if proposal.example %}
5864
<div>
59-
<h5>Example</h5>
60-
<pre><code class="js">{{ proposal.example }}</code></pre>
65+
<div>
66+
<pre><code class="js">{{ proposal.example }}</code></pre>
67+
</div>
6168
</div>
62-
{% endif %}
63-
</div>
64-
{% if proposal.resources | size %}
65-
<h5>Developer Resources</h5>
66-
<ul class="featurelist__item__ressources">
67-
{% for url in proposal.resources %}
68-
<li>
69-
<a href="{{ url }}">{{ url }}</a>
70-
</li>
71-
{% endfor %}
72-
</ul>
7369
{% endif %}
70+
</section>
71+
</header>
7472
</section>
7573
</section>
7674
{% endfor %}
7775
</div>
76+
<section class="featurelist__more">
77+
<a href="https://github.com/tc39/proposals">
78+
See more proposals
79+
</a>
80+
</section>
7881
</section>

‎_layouts/default.html

-6
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,6 @@ <h1 class="page-title">Specifying JavaScript.</h1>
2323
{% include intro.html %}
2424
{% include proposals.html %}
2525
</section>
26-
<section class="footer">
27-
<span class="footer-item">
28-
<a href="https://github.com/tc39" class="btn menu-btn">GitHub</a>
29-
</span>
30-
31-
</section>
3226
</main>
3327

3428
<div class="popup">

‎_sass/_content.scss

+4
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,10 @@
2727
@media (min-width: $bp-tablet) {
2828
padding: 130px 0;
2929

30+
.section-headline {
31+
border-bottom: none;
32+
}
33+
3034
h3 {
3135
margin-left: -40px;
3236
margin-right: -40px;

‎_sass/_featurelist.scss

+106-33
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,75 @@
11
.featurelist {
22
&__item {
3+
background-color: white;
34
border-bottom: 1px solid $color-spacer;
5+
font-size: 0.9em;
46
margin-bottom: 1.125rem;
7+
padding: 0 1rem 0 1rem;
58
&__intro {
69
cursor: pointer;
7-
h4::before {
8-
background: url(../img/menu-down.svg) no-repeat 50%;
9-
background-size: 1.5rem;
10-
content: "";
11-
display: block;
12-
float: right;
13-
height: 1.5rem;
14-
margin-left: 0.5rem;
15-
transition: transform 600ms ease;
16-
width: 1.5rem;
17-
.open & {
18-
transform: rotateX(180deg);
19-
}
20-
[dir="rtl"] & {
21-
float: left;
22-
margin-left: 0;
23-
margin-right: 0.5rem;
24-
}
25-
}
2610
}
2711
&__info {
2812
max-height: 0;
2913
overflow: hidden;
3014
transition: max-height 600ms ease;
3115
}
16+
&__tests {
17+
background-color: $tag-tests;
18+
border: 2px solid $tag-tests;
19+
border-radius: 10px;
20+
}
21+
&__spec {
22+
background-color: $tag-spec;
23+
border: 2px solid $tag-spec;
24+
border-radius: 10px;
25+
}
26+
&__presented {
27+
background-color: $tag-presented;
28+
border: 2px solid $tag-presented;
29+
border-radius: 10px;
30+
}
31+
&__impl {
32+
background-color: $tag-presented;
33+
border: 2px solid $tag-presented;
34+
border-radius: 10px;
35+
}
36+
&__ressources {
37+
a {
38+
word-break: break-all;
39+
}
40+
}
3241
&__status {
42+
clear: both;
43+
float: left;
44+
font-size: 0.8em;
3345
list-style: none;
46+
margin-top: 0;
3447
padding: 0;
35-
li {
36-
align-items: flex-start;
37-
display: flex;
38-
flex-wrap: wrap;
39-
justify-content: space-between;
40-
padding: 0.5rem;
41-
&:nth-of-type(odd) {
42-
background: #eee;
43-
}
44-
}
4548
a {
4649
word-break: break-all;
4750
}
51+
li {
52+
display: inline-block;
53+
margin-top: 0.5rem;
54+
opacity: 0.5;
55+
padding-left: 0.5rem;
56+
padding-right: 0.5rem;
57+
&:hover {
58+
opacity: 1;
59+
}
60+
a {
61+
color: white;
62+
text-decoration: none;
63+
}
64+
}
4865
p {
4966
margin: 0;
5067
}
51-
}
52-
&__ressources {
53-
a {
54-
word-break: break-all;
68+
@media (min-width: $bp-tablet) {
69+
clear: none;
70+
float: right;
71+
margin-top: 0.5rem;
72+
padding: 0 5px;
5573
}
5674
}
5775
.no-js &:focus-within &__info {
@@ -60,11 +78,66 @@
6078
.no-js &:focus-within &__intro h4::after {
6179
transform: rotateX(180deg);
6280
}
81+
&__desc {
82+
clear: both;
83+
display: block;
84+
margin: 1em 0 1em 0;
85+
padding: 0;
86+
}
87+
&__authors {
88+
display: block;
89+
font-size: 1.1em;
90+
}
91+
&__author {
92+
clear: both;
93+
color: grey;
94+
margin: 0;
95+
padding-top: 0;
96+
}
97+
&__example {
98+
display: inline-block;
99+
margin-bottom: 1rem;
100+
&::before {
101+
background: url(../img/menu-down.svg) no-repeat 20%;
102+
background-size: 1.2rem;
103+
content: "";
104+
display: block;
105+
float: right;
106+
height: 1.2em;
107+
margin-left: 0.5rem;
108+
transition: transform 600ms ease;
109+
width: 1.2rem;
110+
.open & {
111+
transform: rotateX(180deg);
112+
}
113+
[dir="rtl"] & {
114+
float: left;
115+
margin-left: 0;
116+
margin-right: 0.5rem;
117+
}
118+
}
119+
}
120+
h4 {
121+
display: inline-block;
122+
float: left;
123+
font-size: 1.6em;
124+
margin-bottom: 0.5em;
125+
margin-top: 1em;
126+
padding-bottom: 0;
127+
padding-top: 0;
128+
word-wrap: anywhere;
129+
a {
130+
text-decoration: none;
131+
}
132+
}
63133
}
64134
&__desc {
65135
display: block;
66136
font-size: 1.1em;
67137
margin-bottom: 4.5em;
68138
margin-top: 2em;
69139
}
140+
&__more {
141+
text-align: center;
142+
}
70143
}

‎_sass/_grid.scss

+16-1
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,31 @@
1-
.g-row {
1+
.intro {
22
margin: 0 ($grid-gutter / -2) (2 * $grid-gutter);
33
[class*="g-col-"] {
44
padding: 0 $grid-gutter / 2;
55
}
6+
}
7+
.g-row {
68
@media (min-width: $bp-tablet) {
79
display: flex;
810
flex-direction: row;
11+
.flex-grow {
12+
flex-grow: 1;
13+
}
14+
.flex-shrink {
15+
flex-shrink: 1;
16+
}
17+
.g-col-2 {
18+
flex: 0 0 200px;
19+
}
920
.g-col-4 {
1021
flex: 0 0 percentage(4/12);
1122
}
1223
.g-col-8 {
1324
flex: 0 0 percentage(8/12);
1425
}
26+
.g-col-10 {
27+
flex: 0 0 percentage(10/12);
28+
flex-grow: 2;
29+
}
1530
}
1631
}

‎_sass/_layout.scss

+1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ body {
1515
}
1616

1717
.main {
18+
background-color: $color-bg;
1819
margin: 0 auto;
1920
max-width: 1280px;
2021
padding: 0 ($grid-gutter / 2);

0 commit comments

Comments
 (0)