diff --git a/css/style.css b/css/style.css index dda9a2d..84b1c5c 100644 --- a/css/style.css +++ b/css/style.css @@ -1,5 +1,3 @@ - - /* * the HTML5✰Boilerplate css, natch. */ @@ -11,6 +9,42 @@ q:before,q:after{content:"";content:none}small{font-size:85%}sub,sup{font-size:7 /* ============================================================================= Site styles ========================================================================== */ +.resources { + overflow: auto; + list-style: none; + padding: 1.18em 0 0 0; + font-size: .9em; +} +.task ul, +.resources ul { + list-style: none; + padding: .25em 0 .4em 1.2em; +} +.task li, +.resources li { + padding: .2em 0; +} +.task li:before, +.resources > li:before { + color: #3d526d; + content: "■"; + float: left; + font-size: .85em; + padding: .1em .6em 0 0; +} +.resources li li { + padding: 0; +} +.resources li p { + margin: 0; + line-height: 1.5; +} +.resources ul a { + border-radius: 3px; + display: inline-block; + margin-left: -8px; + padding: 1px 5px 0 5px; +} body { background: #e7ebf1; @@ -24,7 +58,7 @@ ul, ol, blockquote { } ul li { padding: .2em 0; } - +h1, h2 { font-weight: normal !important; } blockquote { border-left: 3px solid #5e7087; font-style: italic; @@ -58,7 +92,16 @@ section, header { /* futzing for wide browsers */ margin: 0 auto; } -section h1 { +.col-ab { + clear: both; + overflow: auto; + padding: 0 2.9296875%; +} +.col-ab p { + line-height: 1.65; +} + +.hed { border-bottom: 1px solid #cbd1d8; color: #324a69; clear: both; @@ -70,69 +113,49 @@ section h1 { text-shadow: 1px 1px 0 rgba(255,255,255,.8); width: 100%; } +.no-fontface .hed { + font-weight: bold; +} -.no-fontface section h1 { font-weight: bold; } - -section h2 { +.subhed { color: #7f8c9c; - font: 1.4em/1 "ChunkFive", georgia, serif; + font: normal 1.4em/1 "ChunkFive", georgia, serif; margin: 1em 0 0 0; text-shadow: 1px 1px 0 rgba(255,255,255,.8); } .standout { - background: #687482 url(img/bg_noise.png) 0 0 repeat; + background: #687482 url(css/img/bg_noise.png) 0 0 repeat; background-origin: padding; border: double #494f57; border-width: 3px 0; - - background: - url(img/bg_noise.png) 0 0 repeat, + + background: + url(css/img/bg_noise.png) 0 0 repeat, -moz-radial-gradient(center top, ellipse farthest-corner, #7f8c96, #687482 38%); - background: - url(img/bg_noise.png) 0 0 repeat, + background: + url(css/img/bg_noise.png) 0 0 repeat, -webkit-radial-gradient(center top, ellipse farthest-corner, #7f8c96, #687482 38%); - background: - url(img/bg_noise.png) 0 0 repeat, + background: + url(css/img/bg_noise.png) 0 0 repeat, -o-radial-gradient(center top, ellipse farthest-corner, #7f8c96, #687482 38%); - background: - url(img/bg_noise.png) 0 0 repeat, + background: + url(css/img/bg_noise.png) 0 0 repeat, -ms-radial-gradient(center top, ellipse farthest-corner, #7f8c96, #687482 38%); - + background: + url(css/img/bg_noise.png) 0 0 repeat, + radial-gradient(center top, ellipse farthest-corner, #7f8c96, #687482 38%); + clear: both; margin: 3.5em 0 2em 0; padding: 1em 2.9296875% 0 2.9296875%; + -webkit-box-shadow: inset 0 0 10px #5d6672; + -moz-box-shadow: inset 0 0 10px #5d6672; + -ms-box-shadow: inset 0 0 10px #5d6672; box-shadow: inset 0 0 10px #5d6672; } -.subsection:not(:last-child):after { - content: ""; - display: block; - min-height: .85em; - margin: 2.5em 0 .5em 0; - opacity: .85; - padding: 1em 2.9296875% 0 2.9296875%; - box-shadow: inset 0 0 10px #5d6672; - clear: both; - background-origin: padding; - border: double #494f57; - border-width: 3px 0; - - background: - url(img/bg_noise.png) 0 0 repeat, - -moz-radial-gradient(center top, ellipse farthest-corner, #7f8c96, #687482 38%); - background: - url(img/bg_noise.png) 0 0 repeat, - -webkit-radial-gradient(center top, ellipse farthest-corner, #7f8c96, #687482 38%); - background: - url(img/bg_noise.png) 0 0 repeat, - -o-radial-gradient(center top, ellipse farthest-corner, #7f8c96, #687482 38%); - background: - url(img/bg_noise.png) 0 0 repeat, - -ms-radial-gradient(center top, ellipse farthest-corner, #7f8c96, #687482 38%); -} - -.standout h2, +.standout .subhed, .doc-hed { color: #b5c5d7; font: 1.5em/1 "ChunkFive", georgia, serif; @@ -142,8 +165,7 @@ section h2 { text-align: center; text-shadow: #494f57 1px 1px, #494f57 2px 2px; } - -.standout h1 { +.standout .hed { border: none; color: #e0e6ed; float: none; @@ -155,13 +177,13 @@ section h2 { text-align: center; text-shadow: #494f57 1px 1px, #494f57 2px 2px; } - -.no-fontface .standout h1 { +.no-fontface .standout .hed { font-weight: bold; padding: 0 0 .25em 0; } - -.no-fontface .standout h2 { letter-spacing: normal; } +.no-fontface .standout .subhed { + letter-spacing: normal; +} .doc-hed { display: block; @@ -170,19 +192,15 @@ section h2 { text-align: left; text-shadow: #494f57 1px 1px, #494f57 2px 2px; } - .doc-hed b, .doc-hed .hed { + display: block; line-height: 1; - display: block; - text-align: left; - width: 100%; -} - -.doc-hed .hed { margin: 0 0 .05em 0; padding: 0; + text-align: left; text-shadow: #494f57 1px 1px, #494f57 2px 2px, #494f57 3px 3px; + width: 100%; } .doc-lead { @@ -191,9 +209,35 @@ section h2 { .lead { text-align: center; - margin: 6em 0 0 0; + border-bottom: 3px double #cbd1d8; + margin-bottom: .25em; + padding-bottom: 1.4em; } +.hed-lead { + color: #324a69; + font: 2.4em/1 "ChunkFive", arial, helvetica, sans-serif; + margin: .7em 0 .1em 0; + padding: 0; + text-shadow: 1px 1px 0 #fff; +} +.no-fontface .hed-lead { + font-weight: bold; + letter-spacing: -1px; +} + +.subhed-lead p { + color: #7f8c9c; + font: normal 1.3em/1.2 "ChunkFive", georgia, serif; + margin: 0; + padding: 0 .5em; + text-shadow: 1px 1px 0 #fff; +} +.subhed-lead p b { + color: #5d6474; +} + + .hed-lead { color: #324a69; font: 2.4em/1 "ChunkFive", arial, helvetica, sans-serif; @@ -207,8 +251,7 @@ section h2 { letter-spacing: -1px; } -.subhed-lead - { +.subhed-lead { color: #7f8c9c; font: normal 1.5em/1.2 "ChunkFive", georgia, serif; text-transform: uppercase; @@ -224,29 +267,9 @@ section h2 { } .lead p b { color: #5d6474; } -dl { width: 100%; } -dl p { margin: .25em 0; } - -dt, -.key { - font: normal 1.15em/1 "ChunkFive", georgia, serif; - width: 100%; -} - -dd, -.val { - border-bottom: 1px dotted #bfc6cf; - margin: 0; -} - -dd:last-child, -.val:last-child { - border-bottom: none; -} - .section > section { margin-top: 2em; } -section ul { +.col-ab ul { font-size: .9em; margin-top: .9em; list-style: none; @@ -254,26 +277,11 @@ section ul { margin-left: 0; } -section li { padding: 0.5em 0; } +.col-ab li { padding: 0.5em 0; } -section li > ul > li { padding-left: 2em; } +.col-ab li > ul > li { padding-left: 2em; } -section li:not(:last-child) { border-bottom: 1px dotted #bfc6cf; } - -.q-a abbr { - border: none; - color: #7f8c9c; - float: left; - font: normal 1em/1 "ChunkFive", georgia, serif; - margin: 0 .4em 0 0; -} - -.q-a dt { font-size: 1.15em; } - -.q-a dd abbr { - padding: .2em 0 0 0; - font-size: 1.15em; -} +.col-ab li:not(:last-child) { border-bottom: 1px dotted #bfc6cf; } /* Get Involved Sidebar */ @@ -292,17 +300,42 @@ section li:not(:last-child) { border-bottom: 1px dotted #bfc6cf; } } +.tasks { + font-size: .9em; + margin-top: .9em; + padding: .1em 0 0 0; + margin-left: 0; +} +ul.tasks { + list-style: none; +} +ol.tasks { + list-style-position: inside; +} +.tasks li.task:not(:last-child) { + border-bottom: 1px dotted #bfc6cf; + padding: 0 0 .5em 0; +} +.tasks p { + margin: .5em 0 0 0; +} + .resources { overflow: auto; list-style: none; padding: 1.18em 0 0 0; font-size: .9em; } - +.task ul, +.resources ul { + list-style: none; + padding: .25em 0 .4em 1.2em; +} +.task li, .resources li { padding: .2em 0; } - +.task li:before, .resources > li:before { color: #3d526d; content: "■"; @@ -310,24 +343,21 @@ section li:not(:last-child) { border-bottom: 1px dotted #bfc6cf; } font-size: .85em; padding: .1em .6em 0 0; } - -.resources ul { - list-style: none; - padding: .25em 0 .4em 1.2em; -} - .resources li li { padding: 0; } - .resources li p { margin: 0; line-height: 1.5; } +.resources ul a { + border-radius: 3px; + display: inline-block; + margin-left: -8px; + padding: 1px 5px 0 5px; +} -/* Layout */ -/* Will this be needed? */ nav { text-align: center; } nav ul, @@ -354,36 +384,44 @@ footer.doc { padding: 3em; } -@media screen and (min-width: 600px) { - -} - @media screen and (min-width: 800px) { - .col-ab { width: 96%; } - - .col-a { width: 72%; } - - .col-b { width: 25%;} - - .col-a { float: left; } - - .col-b { float: right; } + .col-a { + float: left; + width: 68.607068607069%; + } + .col-b { + width: 25.155925155925%; + float: right; + } .col-ab p { max-width: 950px; line-height: 1.5; } - .hed-lead { font: 3.625em/1 "ChunkFive", georgia, serif; } + .hed-lead { + font: 3.625em/1 "ChunkFive", georgia, serif; + } - h1 { font: normal 2.4em/1.2 "ChunkFive", arial, helvetica, sans-serif; } + .lead p { + max-width: 9999px; + } - .standout h1 { font-size: 4.8em; } + .hed { + font: normal 2.4em/1.2 "ChunkFive", arial, helvetica, sans-serif; + } - .standout h2, - .doc-hed { font: 2em/1 "ChunkFive", georgia, serif; } + .standout .hed { + font-size: 4.8em; + } - .subhed-lead p { font: normal 1.6875em/1.2 "ChunkFive", georgia, serif; } + .standout .subhed, + .doc-hed { + font: 2em/1 "ChunkFive", georgia, serif; + } + .subhed-lead p { + font: normal 1.6875em/1.2 "ChunkFive", georgia, serif; + } .col-split { padding-top: 1em; @@ -403,28 +441,25 @@ footer.doc { -moz-break-after: column; break-after: column; } -} - - - - - - - - - - - - - - - - - - - - + .col-split { + padding-top: 1em; + -webkit-column-count: 2; + -webkit-column-gap: 2.079002079002%; + -moz-column-count: 2; + -moz-column-gap: 2.079002079002%; + -ms-column-count: 2; + -ms-column-gap: 2.079002079002%; + -o-column-count: 2; + -o-column-gap: 2.079002079002%; + column-count: 2; + column-gap: 2.079002079002%; + } + .col-split p { + padding: 0 0 1em 0; + margin: 0; + } +} /* ============================================================================= diff --git a/index.html b/index.html index b6b76e1..097779f 100644 --- a/index.html +++ b/index.html @@ -8,11 +8,15 @@ Giving Back to Standards - + + + + + + - @@ -30,16 +34,16 @@

Now what?

-

Just getting started?

-

OMG Welcome! Let's work together to push the web forward!

+

Just getting started?

+

OMG Welcome! Let's work together to push the web forward!

-
-
-

Learn

+
+
+

Learn

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.

-

How do I keep up with what’s landing in browsers?

+

How do I keep up with what’s landing in browsers?

-

Follow them on Twitter

+

Follow them on Twitter

  • Webkit - the open source web browser engine
    • @@ -58,14 +62,14 @@

    Follow them on Twitter

  • IE - official Windows Internet Explorer Team account bringing you the latest dev tools and IE news
-

How do I understand how browsers work?

+

How do I understand how browsers work?

-

Other learning resources

+

Other learning resources

  • CSS-tricks - provides a wealth of articles, tutorials, and downloads for the web design community.
    • @@ -76,7 +80,7 @@

    Other learning resources

  • Awesome RSS feeds to follow - brought to you by Paul Irish
-

Reference docs/wikis

+

Reference docs/wikis

  • Mozilla’s MDN - awesome documentation regarding HTML(5), CSS(3), JavaScript, the DOM, and more!It’s also a great place to contribute! Read How to help and learn how to get started.
    • @@ -84,19 +88,20 @@

    Reference docs/wikis

  • Forward-compatible websites - list of best practices for creating websites that won’t break when browsers are updated.
-
-
+
+

Can you do this?

Of course you can! All it takes is a quick read of a few articles or tweets, and you’re all set! Trust us – once you’ve gotten started, it just keeps getting easier.

+
-
+
-
+
-

Explore

+

Explore

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!

-
-
-

Can you do this?

-
-

If you want to be counted among those brave enough to attempt to do this.

-
-
-
+
+
+

Can you do this?

+
+

If you want to be counted among those brave enough to attempt to do this.

+
+
+
-
+
-

Meet like-minded folks

+

Meet like-minded folks

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 Meetup.com and Lanyrd can help you find events in your neighborhood.

-
-
+
+

Can you do this?

If you want to be counted among those brave enough to attempt to do this.

-
-
+
+
-
+
-

Ask for help

-

Answer questions and participate in conversations on IRC

+

Ask for help

+

Answer questions and participate in conversations on IRC

How to get started with freenode and irc

  • Freenode irc channels: #html5 / #css / #javascript / #whatwg / #jquery / #webkit
  • Mozilla IRC channels (irc://irc.mozilla.org): #css / #js / #introduction / #developers
-

How to ask for help

-
    +

    How to ask for help

    +
    1. You’ll probably want to make a jsfiddle first.
    2. Create a reduced test case
    3. Remember: be specific!
      4. @@ -164,14 +169,14 @@

      Can you do this?

      -

      Mo’ Advanced

      -

      Are you a ninja? Dare to know what you can do beyond these?

      +

      Mo’ Advanced

      +

      Are you a ninja? Dare to know what you can do beyond these?

      -
      +
      -

      Help Others

      +

      Help Others

      We've all got to start somewhere! Helping others reassures your knowledge, and also broadens the amount of concepts you're exposed to. Below are some great Open-Source projects that are always looking for help. Remember - no patch is too small!

      -

      Open-Source projects worth your time

      +

      Open-Source projects worth your time

      -
      -
      -

      Can you do this?

      -
      -

      If you want to be counted among those brave enough to attempt to do this.

      -
      +
      +
      +

      Can you do this?

      +
      +

      If you want to be counted among those brave enough to attempt to do this.

      -
      +
      +
-
+
-

Give Feedback on Specifications

+

Give Feedback on Specifications

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.

@@ -206,7 +211,7 @@

Give Feedback on Specifications

  • Learn the history of HTML
  • Take an inside look at how the CSS WG works
  • Subscribe to these mailing lists to follow and contribute to the discussions that drive the web: -
    • -
    -
    +
    +

    Can you do this?

    If you want to be counted among those brave enough to attempt to do this.

    -
    -
    +
    +
    -
    +
    -

    Write

    +

    Write

    Publish what you learn and don’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.

    Teaching is a great learning tool as well. So, even if you are getting started in an area, you’re helping yourself by writing about it as well. You can always consider asking a mentor or friend for a technical review. (Addy’s done that with aplomb)

    @@ -253,31 +258,32 @@

    What should you start to learn abo
  • Make a summary of popular ideas around the web lately
  • Write about your experience contributing to an open source project.
  • If you are a native speaker of a language other than English: -
      -
    • Translate some popular English web dev posts.
      • -
    • Elaborate on some of the features in the specs.
      • -
    • +
      +
    • Translate some popular English web dev posts.
      • +
    • Elaborate on some of the features in the specs.
      • +
    +

    -
    -
    +
    +

    Can you do this?

    If you want to be counted among those brave enough to attempt to do this.

    -
    -
    +
    +
    -
    +
    -

    File bugs

    +

    File bugs

    Seriously, all browser vendors would much rather you file tickets with them than tweet about bugs. :)

    -
    -
    +
    +

    Can you do this?

    If you want to be counted among those brave enough to attempt to do this.

    -
    -
    +
    +
    -

    Winrar!

    -

    You are the expert and you are bored with all these suggestions? May we suggest you these?

    +

    Winrar!

    +

    You are the expert and you are bored with all these suggestions? May we suggest you these?

    -
    +
    -

    Hack!

    +

    Hack!

    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…

    -

    Contribute to browsers

    +

    Contribute to browsers

    -

    Contribute to Specifications

    +

    Contribute to Specifications

    -
    -
    +
    +

    Can you do this?

    If you want to be counted among those brave enough to attempt to do this.

    -
    -
    +
    +