diff --git a/_data/stage3.yml b/_data/stage3.yml index 66c5c8f2..0e56b594 100644 --- a/_data/stage3.yml +++ b/_data/stage3.yml @@ -46,6 +46,8 @@ }); }); } + resources: + - https://github.com/tc39/proposal-dynamic-import - title: Legacy RegExp features in JavaScript 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. diff --git a/_includes/intro.html b/_includes/intro.html index 1f0cf2ca..c75a54b0 100644 --- a/_includes/intro.html +++ b/_includes/intro.html @@ -1,5 +1,5 @@ -
-
+
+

TC39

diff --git a/_includes/proposals.html b/_includes/proposals.html index 74852534..2c2bae46 100644 --- a/_includes/proposals.html +++ b/_includes/proposals.html @@ -9,70 +9,73 @@

Stage 3

{% for proposal in site.data.stage3 %}
-
-

{{ proposal.title }}

- {% if proposal.description %} -

{{ proposal.description }}

- {% endif %} -
- +
+
+ {% if proposal.authors | size %} + Author(s): + {{ proposal.authors | join: ", " }} + {% endif %} + {% if proposal.champions | size %} + | + Champion(s): + {{ proposal.champions | join: ", " }} + {% else %} + {% endif %} +
+ {% if proposal.description %} +
{{ proposal.description }}
+ {% endif %} + {% if proposal.example %} +
Show Example
+ {% endif %} +
+ {% if proposal.example %}
-
Example
- 
{{ proposal.example }}
+
+ 
{{ proposal.example }}
+
- {% endif %} -
- {% if proposal.resources | size %} -
Developer Resources
-
    - {% for url in proposal.resources %} -
  • - {{ url }} -
    • - {% endfor %} -
{% endif %} +
+
{% endfor %} +
+ + See more proposals + +
diff --git a/_layouts/default.html b/_layouts/default.html index 4cc87eca..d17388da 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -23,12 +23,6 @@

Specifying JavaScript.

{% include intro.html %} {% include proposals.html %} -
- - GitHub - - -
diff --git a/_sass/_content.scss b/_sass/_content.scss index d59ac767..2ad8593d 100644 --- a/_sass/_content.scss +++ b/_sass/_content.scss @@ -27,6 +27,10 @@ @media (min-width: $bp-tablet) { padding: 130px 0; + .section-headline { + border-bottom: none; + } + h3 { margin-left: -40px; margin-right: -40px; diff --git a/_sass/_featurelist.scss b/_sass/_featurelist.scss index 50a09353..352889cc 100644 --- a/_sass/_featurelist.scss +++ b/_sass/_featurelist.scss @@ -1,57 +1,108 @@ .featurelist { &__item { + background-color: white; border-bottom: 1px solid $color-spacer; + font-size: 0.9em; margin-bottom: 1.125rem; + padding: 0 1rem 0 1rem; &__intro { cursor: pointer; - h4::before { - background: url(../img/menu-down.svg) no-repeat 50%; - background-size: 1.5rem; - content: ""; - display: block; - float: right; - height: 1.5rem; - margin-left: 0.5rem; - transition: transform 600ms ease; - width: 1.5rem; - .open & { - transform: rotateX(180deg); - } - [dir="rtl"] & { - float: left; - margin-left: 0; - margin-right: 0.5rem; - } - } } &__info { max-height: 0; overflow: hidden; transition: max-height 600ms ease; } + &__ressources { + a { + word-break: break-all; + } + } &__status { + clear: both; + float: left; + font-size: 0.8em; list-style: none; + margin-top: 0; padding: 0; - li { - align-items: flex-start; - display: flex; - flex-wrap: wrap; - justify-content: space-between; - padding: 0.5rem; - &:nth-of-type(odd) { - background: #eee; - } - } a { word-break: break-all; } + li { + display: inline-block; + margin-top: 0.5rem; + opacity: 1; + padding-left: 0.5rem; + padding-right: 0.5rem; + &:hover { + background-color: transparent; + } + a { + color: white; + text-decoration: none; + } + } p { margin: 0; } + @media (min-width: $bp-tablet) { + clear: none; + float: right; + margin-top: 0.5rem; + padding: 0 5px; + } } - &__ressources { - a { - word-break: break-all; + h4 { + display: inline-block; + float: left; + font-size: 1.6em; + margin-bottom: 0.5em; + margin-top: 1em; + padding-bottom: 0; + padding-top: 0; + word-wrap: anywhere; + a { + text-decoration: none; + } + } + &__tests { + background-color: $tag-tests; + border: 2px solid $tag-tests; + border-radius: 10px; + &:hover { + a { + color: $tag-tests; + } + } + } + &__spec { + background-color: $tag-spec; + border: 2px solid $tag-spec; + border-radius: 10px; + &:hover { + a { + color: $tag-spec; + } + } + } + &__presented { + background-color: $tag-presented; + border: 2px solid $tag-presented; + border-radius: 10px; + &:hover { + a { + color: $tag-presented; + } + } + } + &__impl { + background-color: $tag-presented; + border: 2px solid $tag-presented; + border-radius: 10px; + &:hover { + a { + color: $tag-tests; + } } } .no-js &:focus-within &__info { @@ -60,6 +111,44 @@ .no-js &:focus-within &__intro h4::after { transform: rotateX(180deg); } + &__desc { + clear: both; + display: block; + margin: 1em 0 1em 0; + padding: 0; + } + &__author { + clear: both; + color: grey; + font-weight: 800; + margin: 0; + padding-top: 0; + } + &__example { + display: inline-block; + font-weight: 800; + margin-bottom: 1rem; + text-decoration: underline; + &::before { + background: url(../img/menu-down.svg) no-repeat 20%; + background-size: 1.2rem; + content: ""; + display: block; + float: right; + height: 1.2em; + margin-left: 0.5rem; + transition: transform 600ms ease; + width: 1.2rem; + .open & { + transform: rotateX(180deg); + } + [dir="rtl"] & { + float: left; + margin-left: 0; + margin-right: 0.5rem; + } + } + } } &__desc { display: block; @@ -67,4 +156,7 @@ margin-bottom: 4.5em; margin-top: 2em; } + &__more { + text-align: center; + } } diff --git a/_sass/_grid.scss b/_sass/_grid.scss index 798930d6..686bf0ca 100644 --- a/_sass/_grid.scss +++ b/_sass/_grid.scss @@ -1,16 +1,31 @@ -.g-row { +.intro { margin: 0 ($grid-gutter / -2) (2 * $grid-gutter); [class*="g-col-"] { padding: 0 $grid-gutter / 2; } +} +.g-row { @media (min-width: $bp-tablet) { display: flex; flex-direction: row; + .flex-grow { + flex-grow: 1; + } + .flex-shrink { + flex-shrink: 1; + } + .g-col-2 { + flex: 0 0 200px; + } .g-col-4 { flex: 0 0 percentage(4/12); } .g-col-8 { flex: 0 0 percentage(8/12); } + .g-col-10 { + flex: 0 0 percentage(10/12); + flex-grow: 2; + } } } diff --git a/_sass/_layout.scss b/_sass/_layout.scss index a87a7803..3f8e5ff4 100644 --- a/_sass/_layout.scss +++ b/_sass/_layout.scss @@ -15,6 +15,7 @@ body { } .main { + background-color: $color-bg; margin: 0 auto; max-width: 1280px; padding: 0 ($grid-gutter / 2); diff --git a/_sass/_page-menu.scss b/_sass/_page-menu.scss index 6aec84b3..157f2237 100644 --- a/_sass/_page-menu.scss +++ b/_sass/_page-menu.scss @@ -54,7 +54,7 @@ $trans-timing: 600ms; } } .menu { - background: $color-bg; + background: $color-submenu-bg; display: block; left: 0; list-style-type: none; @@ -127,6 +127,11 @@ $trans-timing: 600ms; flex-wrap: wrap; } } + @media (min-width: $bp-desktop) { + &-link { + padding: 10px 40px; + } + } } &.open .menu-toggle, &:focus-within .menu-toggle { @@ -137,7 +142,7 @@ $trans-timing: 600ms; @media (min-width: $bp-tablet) { border-bottom: 2px solid $color-spacer; .submenu { - background: $color-bg; + background: white; border-top: 2px solid $color-spacer; font-size: 16px; position: absolute; @@ -160,7 +165,7 @@ $trans-timing: 600ms; .menu { display: flex; flex-direction: row; - justify-content: space-around; + justify-content: space-between; max-height: none; overflow: visible; padding: 0; diff --git a/_sass/_variables.scss b/_sass/_variables.scss index 17d592ad..284e4c7b 100644 --- a/_sass/_variables.scss +++ b/_sass/_variables.scss @@ -5,8 +5,8 @@ $color-link: #017e78; $color-text: #000; $color-nav: #444; $color-spacer: #eee; -$color-submenu-bg: #fcfcfc; -$color-bg: #fefefe; +$color-submenu-bg: white; +$color-bg: #fafafa; // Font weights $font-weight-light: 300; @@ -20,3 +20,8 @@ $spacing-paragraph: 40px; // Breakpoints $bp-tablet: 920px; $bp-desktop: 1200px; + +// Tags +$tag-tests: #017e78; +$tag-spec: #f90; +$tag-presented: #a63446;