Skip to content
Permalink
Browse files

Fixes #12 - Adjust layout. Take advantage of Sass. Add HTML sections.…

… Add stylelint.
  • Loading branch information...
Christian Stuff
Christian Stuff committed May 23, 2018
1 parent f528bfe commit c87099b879a7bd9935358c5f0ef5514033e4ff0d
@@ -13,7 +13,7 @@ insert_final_newline = true
indent_style = space
indent_size = 2

[**.css]
[**.{css,scss}]
indent_style = space
indent_size = 2

@@ -1 +1,2 @@
_site
node_modules
@@ -0,0 +1 @@
assets/css
@@ -0,0 +1,3 @@
{
"extends": "stylelint-config-standard"
}
@@ -1,5 +1,6 @@
theme: jekyll-theme-cayman
plugins:
- jemoji
exclude: ['README.md', 'Dockerfile', 'Makefile', 'Gemfile', 'Gemfile.lock']
exclude: ['README.md', 'Dockerfile', 'Makefile', 'Gemfile', 'Gemfile.lock', 'node_modules']
keep_files: ['README.md']
sass:
style: compressed
@@ -5,7 +5,7 @@

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#157878">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<!-- <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'> -->
<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 }}" />
@@ -14,27 +14,21 @@
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<section class="main">
<section class="header">
{% include_relative _layouts/header.html %}
</section>
<section class="menu">
{% include_relative _layouts/menu.html %}
</section>
<section class="short-info">
{% include_relative _layouts/info.html %}
</section>
<main class="main">
{% include_relative _layouts/page_header.html %}
<section class="main-content">
{% include_relative _layouts/section_tc39.html %}
{% include_relative _layouts/section_specs.html %}
{% include_relative _layouts/info.html %}
<!-- {{ content }} -->
{% include proposals.html %}

</section>
<section class="footer">
<span class="footer-item">
<a href="https://github.com/tc39/ecma262#ecmascript" class="btn menu-btn">github</a>
<a href="https://twitter.com/tc39" class="btn menu-btn">twitter</a>
</span>
</section>
</section>
</main>
</body>
</html>
@@ -1,29 +1,8 @@
<span class="basic-info">
<h3>
TC39
</h3>
<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>.
</p>
</span>

<span class="basic-info">
<h3>
Contribute
</h3>
<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>
</span>

<span class="basic-info">
<h3>
Specs
</h3>
<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.
</p></span>

<header class="page-header">
<div class="logo-box">
<h1 class="project-name">TC39</h1>
</div>
<nav class="page-menu">
{% include_relative _layouts/menu.html %}
</nav>
</header>
@@ -1,41 +1,47 @@
<span class="menu">

<span class="menu-item">
<a href="https://github.com/tc39/ecma262#ecmascript" class="btn menu-btn">TC39</a>
<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/agendas/blob/master/2018/05.md" class="btn menu-btn">Upcoming Agenda</a>
<a href="https://github.com/tc39/tc39-notes/blob/master/es8/2018-01/jan-25.md" class="btn menu-btn">Recent Meeting Notes</a>
<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>
</span>

<span class="menu-item">
<a href="https://github.com/tc39/ecma262#ecmascript" class="btn menu-btn">Specs</a>
-->
</li>
<li class="menu-item">
<a href="#specs" class="menu-link">Specs</a>
<!--
<span class="sub-menu">
<a href="https://github.com/tc39/proposals" class="btn menu-btn">Active Proposals</a>
<a href="https://github.com/tc39/proposals/blob/master/inactive-proposals.md" class="btn menu-btn">Inactive Proposals </a>
<a href="https://github.com/tc39/proposals/blob/master/finished-proposals.md" class="btn
menu-btn">Finished Proposals</a>
<a href="https://www.ecma-international.org/ecma-262/8.0/index.html" class="btn menu-btn">Current Spec</a>
<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>
</span>

<span class="menu-item">
<a href="#contribute" class="btn menu-btn">Contribute</a>
-->
</li>
<li class="menu-item">
<a href="" class="menu-link">Contribute</a>
<!--
<span class="sub-menu">
<a href="https://github.com/tc39/proposals/blob/master/CONTRIBUTING.md" class="btn
menu-btn">Contributing to Proposals</a>
<a href="https://github.com/tc39/test262/blob/master/CONTRIBUTING.md" class="btn
menu-btn">Contributing to Tests </a>
<a href="https://timothygu.me/es-howto/" class="btn menu-btn">Reading the spec</a>
<a href="https://tc39.github.io/process-document/" class="menu-link">Overview</a>
</span>
</span>

<span class="menu-item">
<a href="#discussion" class="btn menu-btn">Discussion</a>
-->
</li>
<li class="menu-item">
<a href="" class="menu-link">State of Proposals</a>
<!--
<span class="sub-menu">
<a href="https://github.com/tc39/" class="btn menu-btn">Github Directory</a>
<a href="./discussion/irc" class="btn menu-btn">IRC</a>
<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>
</span>
</span>
-->
</li>
</ul>

@@ -0,0 +1,13 @@
<section id="specs">
<div class="g-row">
<h2 class="section-headline g-col-4">The Specs</h2>
<div class="g-col-4">
<p>Lorem ipsum, dolor sit amet consectetur <a href="">adipisicing</a> elit. Repudiandae nobis cupiditate sequi esse, qui ipsum deleniti tempore quasi, illum iusto quaerat facere temporibus eius unde? Deserunt nam repudiandae omnis distinctio.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corrupti provident ea quisquam voluptates, quae explicabo mollitia dolores nulla odio quas.</p>
</div>
<div class="g-col-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga deserunt perspiciatis eius qui aliquam, quasi voluptas. Tenetur ex quisquam asperiores.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vitae, asperiores.</p>
</div>
</div>
</section>
@@ -0,0 +1,9 @@
<section id="tc39">
<div class="g-row">
<h2 class="section-headline g-col-4">About the TC39</h2>
<div class="g-col-8">
<p>Lorem ipsum, dolor sit amet consectetur <a href="">adipisicing</a> elit. Repudiandae nobis cupiditate sequi esse, qui ipsum deleniti tempore quasi, illum iusto quaerat facere temporibus eius unde? Deserunt nam repudiandae omnis distinctio.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corrupti provident ea quisquam voluptates, quae explicabo mollitia dolores nulla odio quas.</p>
</div>
</div>
</section>
@@ -0,0 +1,28 @@
.main-content {
font-size: 1rem;
padding: 130px 0;

h1,
h2,
h3,
h4,
h5,
h6 {
color: $color-text;
}

.section-headline {
font-size: 2rem;
font-weight: bold;
margin-top: 0;
}

p {
margin: 0 0 $spacing-paragraph;
}
}

a {
color: $color-primary;
font-weight: bold;
}
@@ -0,0 +1,20 @@
.g-row {
margin: 0 ($spacing-paragraph / -2) (2 * $spacing-paragraph);

[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);
}
}
}
@@ -0,0 +1,18 @@
*,
*::before,
*::after {
box-sizing: border-box;
}

body {
background: $color-bg;
font-family: "Open Sans", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
font-size: 16px;
line-height: 1.5;
}

.main {
margin: 0 auto;
max-width: 1280px;
padding: 0 45px;
}
@@ -0,0 +1,20 @@
.logo-box {
align-items: flex-end;
background: $color-tc39;
display: flex;
flex-shrink: 0;
height: 120px;
justify-content: flex-end;
padding: 15px;
word-break: break-all;
width: 120px;

.project-name {
color: $color-text;
font-size: 2rem;
line-height: 2rem;
margin: 0;
max-width: 50%;
text-align: right;
}
}
@@ -0,0 +1,23 @@
.page-header {
$spacing: 90px;

align-items: flex-start;
background: inherit;
display: flex;
flex-direction: row;
padding: 0;

.page-menu {
margin-left: $spacing;

[dir=rtl] & {
margin-left: 0;
margin-right: $spacing;
}

@supports (margin-block-start: $spacing) {
margin-left: 0;
margin-block-start: $spacing;
}
}
}
@@ -0,0 +1,35 @@
.page-menu {
border-bottom: 2px solid $color-spacer;
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;
color: $color-primary;
font-weight: bold;
text-decoration: none;
}
}
}
}
@@ -0,0 +1,10 @@
$color-tc39: #f90;
$color-primary: #83c9b5;
$color-bg: #fefefe;
$color-spacer: #eee;
$color-text: #000;
$color-nav: #444;

$spacing-paragraph: 40px;

$bp-tablet: 640px;
Oops, something went wrong.

0 comments on commit c87099b

Please sign in to comment.
You can’t perform that action at this time.