Include better CSS with thimble tutorials

RESOLVED FIXED

Status

Webmaker
Thimble
RESOLVED FIXED
5 years ago
4 years ago

People

(Reporter: inactivate account for kate, Assigned: thecount)

Tracking

Details

(Whiteboard: tutorial)

Attachments

(1 attachment)

(Reporter)

Description

5 years ago
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>
(Assignee)

Comment 1

5 years ago
Created attachment 749483 [details] [review]
https://github.com/mozilla/thimble.webmaker.org/pull/58
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).
(Assignee)

Comment 5

5 years ago
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+
(Assignee)

Comment 7

5 years ago
Staged: https://github.com/mozilla/thimble.webmaker.org/commit/af215591cfdc32317a1ec970af1a184318d20eed
Status: NEW → RESOLVED
Last Resolved: 5 years ago
Resolution: --- → FIXED
(Assignee)

Updated

4 years ago
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.