Skip to content

Commit

Permalink
adding twitter to sidebar. need the content to be tweaked. list items…
Browse files Browse the repository at this point in the history 
… are styled per tasks as envisioned by @Wilto
  • Loading branch information
Divya Manian committed Nov 28, 2011
1 parent 7cc3488 commit aacb83f
Show file tree
Hide file tree
Showing 2 changed files with 99 additions and 78 deletions.
37 changes: 16 additions & 21 deletions css/style.css
View file
Expand Up @@ -241,32 +241,23 @@ 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;
padding: .1em 0 0 0;
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;
}
Expand Down Expand Up @@ -307,6 +298,7 @@ dd:last-child,
font-size: 1.15em;
}


.resources {
overflow: auto;
list-style: none;
Expand Down Expand Up @@ -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; }

Expand Down Expand Up @@ -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; }



Expand Down
140 changes: 83 additions & 57 deletions index.html
View file
Expand Up @@ -37,7 +37,7 @@ <h2>OMG Welcome! Let's work together to push the web forward!</h2>
</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>
Expand Down Expand Up @@ -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>
Expand All @@ -106,17 +114,33 @@ <h1>Explore</h1>
<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>
Expand Down Expand Up @@ -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">
Expand All @@ -200,7 +186,7 @@ <h1>Mo’ Advanced</h1>
<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>

Expand All @@ -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>
Expand All @@ -246,9 +240,17 @@ <h1>Give Feedback on Specifications</h1>
</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>

Expand All @@ -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>
Expand All @@ -295,6 +305,14 @@ <h1>File bugs</h1>
</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">
Expand All @@ -303,7 +321,7 @@ <h1>Winrar!</h1>
<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>
Expand Down Expand Up @@ -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>

Expand Down

0 comments on commit aacb83f

Please sign in to comment.