Closed Bug 869164 Opened 11 years ago Closed 11 years ago

Include better CSS with thimble tutorials

Categories

(Webmaker Graveyard :: Thimble, defect)

x86
macOS
defect
Not set
normal

Tracking

(Not tracked)

RESOLVED FIXED

People

(Reporter: kate, Assigned: thecount)

Details

(Whiteboard: tutorial)

Attachments

(1 file)

I wrote some styes for the tutorial page to be created in thimble. Ideally, I would like to do this with checkboxes, but let's use this for now:

<!doctype html>
<html>
  <head>
    <title>Your Awesome Webpage</title>
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600" rel="stylesheet" type="text/css">
    <style>
      body {
        font-family: "Open sans", "Helvetica Neue", sans-serif;
        margin: 0;
        font-size: 100%;
      }
      .tutorial {
        padding-left: 2em;
        margin: 0;
        font-size: 13px;
        line-height: 1.3;
        color: #555;
        list-style: square
      }
      .tutorial > li {
        position: relative;
        margin-bottom: 1em;
      }
      @media ( min-width: 400px ) {
        .tutorial {
          line-height: 1.6;
        }
      }
      @media ( min-width: 600px ) {
        .tutorial {
          font-size: 15px;
          line-height: 1.8;
        }
      }
    </style>
  </head>
  <body>
    <ul class="tutorial">
    <li>Open up a new window in your web browser and find the image you want to use.</li>
    <li>Copy the direct URL of the image by right clicking and selecting “copy image location.” (Chrome users select “copy image URL”).</li>
    <li>Go back to Popcorn Maker and select the image event that you want to swap out from the timeline. Once your image event is selected, you’ll notice an editor pane on the right side. It asks for your ‘image URL’ so paste the direct image URL that you copied and hit enter.</li>
  </ul>
  </body>
</html>
Attachment #749483 - Flags: review?(pomax)
Attachment #749483 - Flags: review?(kate)
look as a 'page': http://jsfiddle.net/v2rfE/
Comment on attachment 749483 [details] [review]
https://github.com/mozilla/thimble.webmaker.org/pull/58

question about the style, that's about all I can find.
Attachment #749483 - Flags: review?(pomax) → review-
Scott, we probably want to make sure the fonts work with the rest of Webmaker, since this is basically top-level UI.  Kate can say for sure (I like what you have btw, just wanting to point out the need to follow the implicit style guide).
Comment on attachment 749483 [details] [review]
https://github.com/mozilla/thimble.webmaker.org/pull/58

Yeah, updates.

1. Review fixes or comments in the pull request.
2. I removed the remix this ribbon only for the tutorial templates.
3. I confirmed with Cassie that Open Sans is the font we want here.
Attachment #749483 - Flags: review- → review?(pomax)
Comment on attachment 749483 [details] [review]
https://github.com/mozilla/thimble.webmaker.org/pull/58

looks good to me. Published page has no ribbon, good.
Attachment #749483 - Flags: review?(pomax) → review+
Staged: https://github.com/mozilla/thimble.webmaker.org/commit/af215591cfdc32317a1ec970af1a184318d20eed
Status: NEW → RESOLVED
Closed: 11 years ago
Resolution: --- → FIXED
Attachment #749483 - Flags: review?(kate)
Attachment mime type: text/plain → text/x-github-pull-request
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: