Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

adding twitter to sidebar. need the content to be tweaked. list items…

… are styled per tasks as envisioned by @wilto
  • Loading branch information...
commit aacb83fee50a58036ca73fac9b34943f1b0f476f 1 parent 7cc3488
Divya Manian authored
Showing with 99 additions and 78 deletions.
  1. +16 −21 css/style.css
  2. +83 −57 index.html
View
37 css/style.css
@@ -241,17 +241,9 @@ dd:last-child,
border-bottom: none;
}
-.q-a,
-.key-val { float: left; }
+.section > section { margin-top: 2em; }
-.key-val dt,
-.key {
- color: #3d526d;
- padding: .5em 0 0 0;
- margin: 0;
-}
-
-.tasks {
+section ul {
font-size: .9em;
margin-top: .9em;
list-style: none;
@@ -259,14 +251,13 @@ dd:last-child,
margin-left: 0;
}
-.tasks li:not(:last-child) {
+section li:not(:last-child) {
border-bottom: 1px dotted #bfc6cf;
- padding: 0 0 .5em 0;
-}
-.tasks p {
- margin: .5em 0 0 0;
+ padding: 0.5em 0;
}
+.getinvolved { font-size: 0.9em; }
+
.pledges {
padding-top: .5em;
}
@@ -307,6 +298,7 @@ dd:last-child,
font-size: 1.15em;
}
+
.resources {
overflow: auto;
list-style: none;
@@ -374,8 +366,9 @@ nav li {
width: 94.1%;
}
- .col-a,
- .col-b { width: 48.020833333333%; }
+ .col-a { width: 72%; }
+
+ .col-b { width: 25%;}
.col-a { float: left; }
@@ -453,18 +446,20 @@ nav li {
========================================================================== */
-/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }
-/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.a11y-only { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
-/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.a11y-only.focusable:active, .a11y-only.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
-/* Hide visually and from screenreaders, but maintain layout */
.hide { visibility: hidden; }
+.clearfix:before, .clearfix:after,
+.section > section:before,
+.section > section:after { content: ""; display: table; }
+.clearfix:after,
+.section > section:after { clear: both; }
+.clearfix { *zoom: 1; }
View
140 index.html
@@ -37,7 +37,7 @@ <h1 class="hed-lead">I’ve got my blue beanie on!</h1>
</div>
<section id="learn">
- <div class="col-ab">
+ <div class="col-a">
<h1>Learn</h1>
<p>One of the most beautiful things about the web is that it's constantly changing. While these changes and improvements can be overwhelming, we're here to help you get caught up! Here are some great resources to walk you through how browsers work, and help keep you up to date on their improvements.</p>
<h2 id="how_do_i_keep_up_with_what8217s_landing_in_browsers">How do I keep up with what&#8217;s landing in browsers?</h2>
@@ -89,10 +89,18 @@ <h2 id="reference_docs_wikis">Reference docs/wikis</h2>
<li><a href="https://developer.mozilla.org/Writing_Forward_Compatible_Websites">Forward-compatible websites</a> - list of best practices for creating websites that won&#8217;t break when browsers are updated.</li>
</ul>
</div>
+ <section class="getinvolved">
+ <div class="col-b">
+ <h2 class="subhed">Can you do this?</h2>
+ <div class="task" data-hashtag="#write">
+ <p>If you want to be counted among those brave enough to attempt to do this.</p>
+ </div>
+ </div>
+ </section>
</section>
<section id="explore">
- <div class="col-ab">
+ <div class="col-a">
<h1>Explore</h1>
<p>Once you've picked up the basics, it's time to dive a bit deeper into the current (and future) state of web standards! Get excited, because here, we check out advanced CSS, brand-new HTML5 features/APIs, and even what the future of these languages are expected to be. Several new capabilities are now available in browsers, and exploring these new capabilities will help us push the web forward!</p>
<ul>
@@ -106,17 +114,33 @@ <h2 id="reference_docs_wikis">Reference docs/wikis</h2>
<li><a href="http://peter.sh/experiments/vendor-prefixed-css-property-overview/">Vendor-prefixed CSS property overview</a></li>
</ul>
</div>
+ <section class="getinvolved">
+ <div class="col-b">
+ <h2 class="subhed">Can you do this?</h2>
+ <div class="task" data-hashtag="#write">
+ <p>If you want to be counted among those brave enough to attempt to do this.</p>
+ </div>
+ </div>
+ </section>
</section>
<section id="meetups">
- <div class="col-ab">
+ <div class="col-a">
<h1>Meet like-minded folks</h1>
<p>Attending local meetups and conferences is a great way to connect with other developers to learn, share resources, and bring new ideas and collaborations to life. Sites like <a href="http://meetup.com">Meetup.com</a> and <a href="http://lanyrd.com">Lanyrd</a> can help you find events in your neighborhood.</p>
</div>
+ <section class="getinvolved">
+ <div class="col-b">
+ <h2 class="subhed">Can you do this?</h2>
+ <div class="task" data-hashtag="#write">
+ <p>If you want to be counted among those brave enough to attempt to do this.</p>
+ </div>
+ </div>
+ </section>
</section>
<section id="askhelp">
- <div class="col-ab">
+ <div class="col-a">
<h1>Ask for help</h1>
<h2 id="answer_questions_and_participate_in_conversations_on_irc">Answer questions and participate in conversations on IRC</h2>
<p><a href="http://richard.esplins.org/siwi/2011/07/08/getting-started-freenode-irc/">How to get started with freenode and irc</a></p>
@@ -145,53 +169,15 @@ <h2 id="how_to_ask_for_help">How to ask for help</h2>
<li>Remember: be specific!</li>
</ol>
</div>
+ <section class="getinvolved">
+ <div class="col-b">
+ <h2 class="subhed">Can you do this?</h2>
+ <div class="task" data-hashtag="#write">
+ <p>If you want to be counted among those brave enough to attempt to do this.</p>
+ </div>
+ </div>
+ </section>
</section>
-
- <section id="how_can_i_get_involved">
- <div class="col-ab">
- <h2 class="subhed">How can I get involved?</h2>
-
- <ul class="tasks">
- <li class="task" data-hashtag="#jquery">
- <p>Curabitur gravida blandit quam, et venenatis libebro cursus vel. Integer mattis, enim in ultricies pharetra, nibh risus accumsan odio.</p>
- </li>
- <li class="task" data-hashtag="#javascript">
- <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra.</p>
- </li>
- </ul>
-
- <!--
- <dl class="tasks key-val">
- <dt data-hashtag="#foo">
- <p><a href="#">Key/Value Pair</a></p>
- </dt>
- <dd>
- <p>Note that there’s padding below the standout headline above. Curabitur tempus urna ac dui Bro Chih Minh luctus.</p>
- <div class="pledges">
- </div>
- </dd>
-
- <dt data-hashtag="#foo">
- <p><a href="#">Key/Value Pair</a></p>
- </dt>
- <dd>
- <p>Note that there’s padding below the standout headline above. Curabitur tempus urna ac dui Bro Chih Minh luctus.</p>
- <div class="pledges">
- </div>
- </dd>
-
- <dt data-hashtag="#foo">
- <p><a href="#">Key/Value Pair</a></p>
- </dt>
- <dd>
- <p>Note that there’s padding below the standout headline above. Curabitur tempus urna ac dui Bro Chih Minh luctus.</p>
- <div class="pledges">
- </div>
- </dd>
- </dl>
- -->
- </div>
- </section>
</article>
<article class="section">
@@ -200,7 +186,7 @@ <h2 class="subhed">How can I get involved?</h2>
<h2>Are you a ninja? Dare to know what you can do beyond these?</h2>
</div>
<section id="helpothers">
- <div class="col-ab">
+ <div class="col-a">
<h1>Help Others</h1>
<h2 id="open_source_projects_worth_your_time">Open-Source projects worth your time</h2>
@@ -215,12 +201,20 @@ <h2 id="open_source_projects_worth_your_time">Open-Source projects worth your ti
<li><a href="https://github.com/jquery/standards">jQuery standards</a></li>
</ul>
- <p>Do what is asked in <a href="#how_to_ask_for_help">&#8216;ask for help&#8217;</a> above and check out <a href="http://addyosmani.com/blog/getting-involved-with-open-source/">Addy Osmani&#8217;s video about getting involved</a>!</p>
+ <p>Do what is asked in <a href="#how_to_ask_for_help">&#8216;ask for help&#8217;</a> above and check out <a href="http://addyosmani.com/blog/getting-involved-with-open-source/">Addy Osmani&#8217;s video about getting involved</a>!</p>
</div>
+ <section class="getinvolved">
+ <div class="col-b">
+ <h2 class="subhed">Can you do this?</h2>
+ <div class="task" data-hashtag="#write">
+ <p>If you want to be counted among those brave enough to attempt to do this.</p>
+ </div>
+ </div>
+ </section>
</section>
- <section id="specs" class="subsection">
- <div class="col-ab">
+ <section id="specs">
+ <div class="col-a">
<h1>Give Feedback on Specifications</h1>
<p>Specs codify the expected behavior. They are developed by Working Groups (WG) along with active discussion on mailing lists. While we can’t always be certain that all browser vendors will adhere to the rules set forth in a spec they provide us with something that we, as developers, can standardize against.</p>
@@ -246,9 +240,17 @@ <h2 id="open_source_projects_worth_your_time">Open-Source projects worth your ti
</li>
</ul>
</div>
+ <section class="getinvolved">
+ <div class="col-b">
+ <h2 class="subhed">Can you do this?</h2>
+ <div class="task" data-hashtag="#feedback">
+ <p>If you want to be counted among those brave enough to attempt to do this.</p>
+ </div>
+ </div>
+ </section>
</section>
<section id="write">
- <div class="col-ab">
+ <div class="col-a">
<h1>Write</h1>
<p>Publish what you learn and don&#8217;t be afraid to make mistakes. Publish to your personal blog and keep your posts updated. Be sure to speak with your own voice! Remember that it is okay to not be an absolute authority on a subject to author a post! Always ask questions and prompt conversations. There is seldom a wrong question or a wrong answer.</p>
@@ -275,9 +277,17 @@ <h2 id="what_should_you_start_to_learn_about">What should you start to learn abo
</ul></li>
</ul>
</div>
+ <section class="getinvolved">
+ <div class="col-b">
+ <h2 class="subhed">Can you do this?</h2>
+ <div class="task" data-hashtag="#write">
+ <p>If you want to be counted among those brave enough to attempt to do this.</p>
+ </div>
+ </div>
+ </section>
</section>
<section id="filebugs">
- <div class="col-ab">
+ <div class="col-a">
<h1>File bugs</h1>
<p>Seriously, all browser vendors would much rather you file tickets with them than tweet about bugs. :)</p>
<ul>
@@ -295,6 +305,14 @@ <h2 id="what_should_you_start_to_learn_about">What should you start to learn abo
</li>
</ul>
</div>
+ <section class="getinvolved">
+ <div class="col-b">
+ <h2 class="subhed">Can you do this?</h2>
+ <div class="task" data-hashtag="#write">
+ <p>If you want to be counted among those brave enough to attempt to do this.</p>
+ </div>
+ </div>
+ </section>
</section>
</article>
<article class="section">
@@ -303,7 +321,7 @@ <h2 id="what_should_you_start_to_learn_about">What should you start to learn abo
<h2>You are the expert and you are bored with all these suggestions? May we suggest you these?</h2>
</div>
<section id="hack">
- <div class="col-ab">
+ <div class="col-a">
<h1>Hack!</h1>
<p>Push the web to it's limits! Hack on CSS, advanced HTML, and JavaScript. Hack on the browser's rendering engine. Fork github repos, dig through the code, and keep on learning. Let's make the web more awesome. There are so many ways…</p>
<h2 id="contribute_to_browsers">Contribute to browsers</h2>
@@ -337,6 +355,14 @@ <h2 id="contribute_to_validators">Contribute to validators</h2>
<li><a href="https://bitbucket.org/annevk/webvtt">WebVTT</a></li>
</ul>
</div>
+ <section class="getinvolved">
+ <div class="col-b">
+ <h2 class="subhed">Can you do this?</h2>
+ <div class="task" data-hashtag="#write">
+ <p>If you want to be counted among those brave enough to attempt to do this.</p>
+ </div>
+ </div>
+ </section>
</section>
</article>
Please sign in to comment.
Something went wrong with that request. Please try again.