Issue #12 - Update styles. Add transition to featurelist. Add prettie…

…r & stylelint-order.
tc39 · May 30, 2018 · 6b6ccd2 · 6b6ccd2
1 parent 5db2881
commit 6b6ccd2
Show file tree

Hide file tree

Showing 21 changed files with 192 additions and 187 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1 @@
+assets/css/
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1 @@
+{}
diff --git a/.stylelintignore b/.stylelintignore
@@ -1 +1 @@
-assets/css
+assets/css/
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -1,3 +1,14 @@
 {
-  "extends": "stylelint-config-standard"
+  "extends": [
+    "stylelint-config-standard",
+    "stylelint-config-prettier"
+  ],
+  "plugins": [
+    "stylelint-order"
+  ],
+  "rules": {
+    "at-rule-empty-line-before": null,
+    "declaration-empty-line-before": null,
+    "order/properties-alphabetical-order": true
+  }
 }
diff --git a/_includes/contribute.html b/_includes/contribute.html
@@ -1,14 +1,19 @@
 <section id="contribute">
-    <div class="g-row">
-        <h2 class="section-headline g-col-4">Contribute</h2>
-        <div class="g-col-8">
-            <p>
-                TC39 welcomes contributions from the JavaScript community, whether it is feedback on existing proposals, improved documentation, testing, implementations, or even language feature ideas. <!-- TODO: Make each of the things in the preceding sentence links to the appropriate guides -->
-                See our <a href="https://github.com/tc39/ecma262/blob/master/CONTRIBUTING.md">contributor guide</a> for details.
-            </p>
-            <p>
-                To participate in TC39 meetings, <a href="https://ecma-international.org/memento/join.htm">join Ecma</a> and sign our <a href="https://ecma-international.org/memento/Policies/Registration%20Form%20for%20the%20Ecma%20Royalty%20Free%20(RF)%20Task%20Group%20(TG).pdf">patent agreement</a>.
-            </p>
-        </div>
+  <div class="g-row">
+    <h2 class="section-headline g-col-4">Contribute</h2>
+    <div class="g-col-8">
+      <p>
+        TC39 welcomes contributions from the JavaScript community, whether it is feedback on existing proposals, improved documentation,
+        testing, implementations, or even language feature ideas.
+        <!-- TODO: Make each of the things in the preceding sentence links to the appropriate guides -->
+        See our
+        <a href="https://github.com/tc39/ecma262/blob/master/CONTRIBUTING.md">contributor guide</a> for details.
+      </p>
+      <p>
+        To participate in TC39 meetings,
+        <a href="https://ecma-international.org/memento/join.htm">join Ecma</a> and sign our
+        <a href="https://ecma-international.org/memento/Policies/Registration%20Form%20for%20the%20Ecma%20Royalty%20Free%20(RF)%20Task%20Group%20(TG).pdf">patent agreement</a>.
+      </p>
     </div>
+  </div>
 </section>
diff --git a/_includes/proposals.html b/_includes/proposals.html
@@ -1,47 +1,47 @@
-<div class="featurelist">
-  <h2>Stage 3</h2>
-
-  {% for proposal in site.data.stage3 %}
-  <section class="featurelist__item">
-    <header class="featurelist__item__intro">
-      <h2>{{ proposal.title }}</h2>
-      <p>{{ proposal.description }}</p>
-    </header>
-    <section class="featurelist__item__info">
-      <div>
+<section id="proposals">
+  <h2 class="section-headline">State of Proposals</h2>
+  <div class="featurelist">
+    <h3>Stage 3</h3>
+    {% for proposal in site.data.stage3 %}
+    <section class="featurelist__item">
+      <header class="featurelist__item__intro">
+        <h4>{{ proposal.title }}</h4>
+        <p>{{ proposal.description }}</p>
+      </header>
+      <section class="featurelist__item__info">
         <div>
-          <h3>Status</h3>
-          <ul class="featurelist__item__status">
-            <li class="featurelist__item__owner">
-              <p>Author(s)</p>
-              <p>{% for name in proposal.authors %}{{ name }}{% endfor %}</p>
-            </li>
-            <li class="featurelist__item__owner">
-              <p>Champion(s)</p>
-              <p>{% for name in proposal.champions %}{{ name }}{% endfor %}</p>
-            </li>
-            <li class="featurelist__item__tests">
-              <p>Test(s)</p>
-              <p>{% for url in proposal.tests %}<a href="{{ url }}">{{ url }}</a>{% endfor %}</p>
-            </li>
-            <li class="featurelist__item__spec">
-              <p>Specification</p>
-              <a href="{{ proposal.specification }}">{{ proposal.specification }}</a>
-            </li>
-          </ul>
+          <div>
+            <h5>Status</h5>
+            <ul class="featurelist__item__status">
+              <li class="featurelist__item__owner">
+                <p>Author(s)</p>
+                <p>{% for name in proposal.authors %}{{ name }}{% endfor %}</p>
+              </li>
+              <li class="featurelist__item__owner">
+                <p>Champion(s)</p>
+                <p>{% for name in proposal.champions %}{{ name }}{% endfor %}</p>
+              </li>
+              <li class="featurelist__item__tests">
+                <p>Test(s)</p>
+                <p>{% for url in proposal.tests %}<a href="{{ url }}">{{ url }}</a>{% endfor %}</p>
+              </li>
+              <li class="featurelist__item__spec">
+                <p>Specification</p>
+                <a href="{{ proposal.specification }}">{{ proposal.specification }}</a>
+              </li>
+            </ul>
+          </div>
         </div>
-
-        <div>
-          <h3>Example</h3>
-          <pre><code class="js">{{ proposal.example }}</code></pre>
-        </div>
-      </div>
-      <h3>Developer Resources</h3>
-      <ul>
-        {% for url in proposal.resources %}<li><a href="{{ url }}">{{ url }}</a></li>{% endfor %}
-      </ul>
+        <h5>Developer Resources</h5>
+        <ul>
+          {% for url in proposal.resources %}
+          <li>
+            <a href="{{ url }}">{{ url }}</a>
+          </li>
+          {% endfor %}
+        </ul>
+      </section>
     </section>
-  </section>
-  {% endfor %}
-
-</div>
+    {% endfor %}
+  </div>
+</section>
diff --git a/_includes/specs.html b/_includes/specs.html
@@ -3,7 +3,12 @@
     <h2 class="section-headline g-col-4">The Specs</h2>
     <div class="g-col-8">
       <p>
-        We develop the JavaScript (formally, ECMAScript) specification <a href="https://github.com/tc39/ecma262/">on GitHub</a> and at meetings every two months. We follow a <a href="https://tc39.github.io/process-document/">four stage process</a> for new <a href="https://github.com/tc39/proposals/">language feature proposals</a>. See our <a href="https://github.com/tc39/agendas/">meeting agendas</a> and <a href="https://github.com/tc39/tc39-notes/">minutes</a> to learn more.
+        We develop the JavaScript (formally, ECMAScript) specification
+        <a href="https://github.com/tc39/ecma262/">on GitHub</a> and at meetings every two months. We follow a
+        <a href="https://tc39.github.io/process-document/">four stage process</a> for new
+        <a href="https://github.com/tc39/proposals/">language feature proposals</a>. See our
+        <a href="https://github.com/tc39/agendas/">meeting agendas</a> and
+        <a href="https://github.com/tc39/tc39-notes/">minutes</a> to learn more.
       </p>
     </div>
   </div>

diff --git a/_includes/tc39.html b/_includes/tc39.html
@@ -3,7 +3,9 @@
     <h2 class="section-headline g-col-4">About the TC39</h2>
     <div class="g-col-8">
       <p>
-        TC39 is a group of JavaScript developers, implementers, academics, and more, collaborating with the community to maintain and evolve the definition of JavaScript. We are part of <a href="http://www.ecma-international.org/">Ecma International</a>.
+        TC39 is a group of JavaScript developers, implementers, academics, and more, collaborating with the community to maintain
+        and evolve the definition of JavaScript. We are part of
+        <a href="http://www.ecma-international.org/">Ecma International</a>.
       </p>
     </div>
   </div>

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -8,9 +8,9 @@
     <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Source+Sans+Pro:300,400,600" rel="stylesheet">
     <link rel="stylesheet" href="/assets/css/normalize.css">
     <link rel="stylesheet" href="{{ '/assets/css/style.css?v=' | append: site.github.build_revision | relative_url }}">
-    <script defer src="{{ '/assets/js/main.js?v=' | append: site.github.build_revision | relative_url }}" />
     <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
-		<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
+    <script defer src="{{ '/assets/js/main.js?v=' | append: site.github.build_revision | relative_url }}" type="text/javascript"></script>
+		<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js" type="text/javascript"></script>
 		<script>hljs.initHighlightingOnLoad();</script>
   </head>
   <body>
@@ -20,7 +20,6 @@
         {% include tc39.html %}
         {% include specs.html %}
         {% include contribute.html %}
-        <!-- {{ content }} -->
         {% include proposals.html %}
       </section>
       <section class="footer">

diff --git a/_layouts/menu.html b/_layouts/menu.html
@@ -1,47 +1,15 @@
 <ul class="menu">
   <li class="menu-item">
     <a href="#tc39" class="menu-link">TC39</a>
-    <!--
-    <span class="sub-menu">
-      <a href="https://github.com/tc39/proposals" class="menu-link">Active Proposals</a>
-      <a href="https://github.com/tc39/proposals/blob/master/inactive-proposals.md" class="menu-link">Inactive Proposals</a>
-      <a href="https://github.com/tc39/proposals/blob/master/finished-proposals.md" class="menu-link">Finished Proposals</a>
-    </span>
-    -->
   </li>
   <li class="menu-item">
     <a href="#specs" class="menu-link">Specs</a>
-    <!--
-    <span class="sub-menu">
-      <a href="https://timothygu.me/es-howto/" class="menu-link">Reading the spec</a>
-      <a href="./guides/first-proposal" class="menu-link">Making your first Proposal</a>
-      <a href="" class="menu-link">Implementing a Proposal</a>
-      <a href="" class="menu-link">Giving meaningful feedback</a>
-      <a href="" class="menu-link">Running the tests</a>
-      <a href="" class="menu-link">Joining the TC39 as a member organization</a>
-      <a href="" class="menu-link">More Guides</a>
-    </span>
-    -->
   </li>
   <li class="menu-item">
     <a href="#contribute" class="menu-link">Contribute</a>
-    <!--
-    <span class="sub-menu">
-      <a href="https://tc39.github.io/process-document/" class="menu-link">Overview</a>
-    </span>
-    -->
   </li>
   <li class="menu-item">
     <a href="#proposals" class="menu-link">State of Proposals</a>
-    <!--
-    <span class="sub-menu">
-      <a href="https://github.com/tc39/agendas/blob/master/2018/03.md" class="menu-link">Upcoming Agenda</a>
-      <a href="https://github.com/tc39/tc39-notes/blob/master/es8/2018-01/jan-25.md" class="menu-link">Recent Meeting Notes</a>
-      <a href="https://github.com/tc39/" class="menu-link">Github Directory</a>
-      <a href="https://esdiscuss.org/" class="menu-link">ES Discuss</a>
-      <a href="./discussion/irc" class="menu-link">IRC</a>
-    </span>
-    -->
   </li>
 </ul>
 
diff --git a/_sass/_content.scss b/_sass/_content.scss
@@ -1,22 +1,26 @@
 .main-content {
   font-size: 1rem;
   padding: 130px 0;
-
   h1,
   h2,
   h3,
   h4,
   h5,
   h6 {
     color: $color-text;
+    font-weight: $font-weight-semi-bold;
+  }
+  h3 {
+    background-color: $color-primary;
+    margin-left: -40px;
+    margin-right: -40px;
+    padding: 10px 40px;
   }
-
   .section-headline {
     font-size: 2rem;
     font-weight: $font-weight-semi-bold;
     margin-top: 0;
   }
-
   p {
     margin: 0 0 $spacing-paragraph;
   }

diff --git a/_sass/_featurelist.scss b/_sass/_featurelist.scss
@@ -0,0 +1,46 @@
+.featurelist {
+  &__item {
+    border-bottom: 1px solid $color-spacer;
+    margin-bottom: 1.125rem;
+    &__intro {
+      cursor: pointer;
+      h4::after {
+        background: url(/assets/img/menu-down.svg) no-repeat 50%;
+        background-size: 1.5rem;
+        content: "";
+        display: block;
+        float: right;
+        height: 1.5rem;
+        transition: transform 600ms ease;
+        width: 1.5rem;
+        .open & {
+          transform: rotateX(180deg);
+        }
+      }
+    }
+    &__info {
+      max-height: 0;
+      overflow: hidden;
+      transition: max-height 600ms ease;
+      // .open & {
+      //   max-height: 600px;
+      // }
+    }
+    &__status {
+      list-style: none;
+      padding-left: 0;
+      li {
+        align-items: flex-start;
+        display: flex;
+        justify-content: space-between;
+        padding: 0.5rem;
+        &:nth-of-type(odd) {
+          background: #eee;
+        }
+      }
+      p {
+        margin: 0;
+      }
+    }
+  }
+}
diff --git a/_sass/_grid.scss b/_sass/_grid.scss
@@ -1,18 +1,14 @@
 .g-row {
   margin: 0 ($spacing-paragraph / -2) (2 * $spacing-paragraph);
-
-  [class*=g-col-] {
+  [class*="g-col-"] {
     padding: 0 $spacing-paragraph / 2;
   }
-
   @media (min-width: $bp-tablet) {
     display: flex;
     flex-direction: row;
-
     .g-col-4 {
       flex: 0 0 percentage(4/12);
     }
-
     .g-col-8 {
       flex: 0 0 percentage(8/12);
     }

diff --git a/_sass/_logo-box.scss b/_sass/_logo-box.scss
@@ -1,6 +1,5 @@
 .logo-box {
   flex-shrink: 0;
-
   img {
     display: block;
     height: 120px;

diff --git a/_sass/_page-header.scss b/_sass/_page-header.scss
@@ -1,23 +1,19 @@
 .page-header {
   $spacing: 90px;
-
   align-items: flex-start;
   background: inherit;
   display: flex;
   flex-direction: row;
   padding: 0;
-
   .page-menu {
     margin-left: $spacing;
-
-    [dir=rtl] & {
+    [dir="rtl"] & {
       margin-left: 0;
       margin-right: $spacing;
     }
-
     @supports (margin-block-start: $spacing) {
-      margin-left: 0;
       margin-block-start: $spacing;
+      margin-left: 0;
     }
   }
 }
diff --git a/_sass/_page-menu.scss b/_sass/_page-menu.scss
@@ -3,26 +3,22 @@
   font-size: 24px;
   margin-top: 10px;
   width: 100%;
-
   .menu {
     display: flex;
     justify-content: space-around;
     list-style-type: none;
     margin: 0;
     padding: 0;
-
     &-item {
       display: block;
     }
-
     &-link {
       border-bottom: 4px solid transparent;
       color: $color-nav;
       display: block;
       font-weight: normal;
       padding: 10px 10px;
       text-decoration: none;
-
       &:hover,
       &:focus {
         border-bottom-color: $color-primary;