Redo of style sheets

[brigand]

I re-did the style sheets to (hopefully) make it nicer to look at and more organized. Besides the changes to the style sheets I made a list of expectations the style sheet has for the html (when to use h2 vs h3 and a few others), you can see it in css/tests.

The other change is in the default template. The style sheet requires a block level container (div) inside of body, so I added one with the class "content." It won't work without it. I also put a conditional for Internet Explorer so that it works there. It's mostly for future use as it only has one rule right now (but that rule is required).

If you download it locally the test page should load in your browser with no problems.

If you have any questions, contact me on the AutoHotkey forum, or #ahk on irc.

[brigand]

I have it up and running on gh-pages. See it in action here.

[maul-esel]

Hi and thanks for your work.

Some comments:

• all the prerequisits are okay, except
  • the use of <code> / <pre> is up to pygments / the syntax highlighting engine
• the link icons are great!
  • I would also suggest an own icon for github?
  • Are the current icons definitive?
• I agree that forms aren't likely to be used.
• some table styles would be welcome.
• after you cloned and before your pull request,
  • I made the layout a bit wider. What do you think about it? Btw, is there a special reason you're using a fixed width?
  • I also added a "StartPage" and moved most of the information from "Introduction" there.
  • I added a separate "post" layout (which isn't finished at all).
• I also had the idea of navigation elements, e.g. "index", "previous", and "next". Those could be included in the post layout, however, that maybe needs custom YAML data (next_post, prev_post URLs).
• What do you think about changing the background to #537ADF?
  • Edit: Or leave the background white / the default?
• The font looks so "cramped" (?) to me. What do you think about letter-spacing: 1.5px; and line-height: 175% ?

• I liked the indentation of the text vs. the headers. What about

  .content > p , li {
  margin-right: 20px;
  margin-left: 20px
  }

• What about your changes to the links (not bold, color, underline) ?

• I would suggest a consistent symbol for list items:

  ol {
  list-style-type: decimal-leading-zero
  }
  
  ul {
  list-style-type: disc
  }

I made some of the above changes (yesterday, so it's not up to your latest additions), mainly the letter-spacing stuff and the background color, picture at http://www.autohotkey.net/~maul.esel/Unbenannt.PNG.

Regards maul.esel

[maul-esel]

the use of <code> / <pre> is up to pygments / the syntax highlighting engine

Actually, pygments does the following:

<div class='highlight'><pre><code class='ahk'>[ code here ]</code></pre></div>

[brigand]

I reviewed all of your comments above and they should be reflected in the 7 commits I just made. You can see most of it in the commit messages and diffs.

I made the layout a bit wider. What do you think about it?

I'm not really sure what you mean.

Btw, is there a special reason you're using a fixed width?

It's not so much a "fixed width," in the traditional sense. It just has a maximum width. If you let text go from one side of a 30 inch screen to the other, at 1920 pixels wide, it's not easy to read. So we cut it off at a reasonable point. It still works just fine on mobile phones. (I'll swap the percent and pixel values which might help on some small devices.)

What do you think about changing the background to...?

I didn't notice until I tried other backgrounds that I didn't like the blue. It takes away from the content too much. It's been replaced with a light gray, and I switched the shadow to something darker. I like it like this, but it may still be distracting... what do you think?

What about your changes to the links (not bold, color, underline) ?

I thought the bold was to thick when you have a lot of links, such as on the table of contents. With the now more spacious text, it might be less of a problem, but I like it how it is now.

I also had the idea of navigation elements, e.g. "index", "previous", and "next". Those could be included in the post layout, however, that maybe needs custom YAML data (next_post, prev_post URLs).

Sounds good to me. We could also do a sidebar of some sort. Let me know what markup to expect and I can make css for it. I'll need an a tag that either has a specific class or is inside a span with a specific class. The easiest way would be:

<a href="..." class="next-link">next</a>

I'll use that, make it red if href is empty idea -- I like it.

Let me know if you have any more questions.

[maul-esel]

It takes away from the content too much. It's been replaced with a light gray, and I switched the shadow to something darker. I like it like this, but it may still be distracting... what do you think?

Wow, the new background looks wonderful!

I thought the bold was to thick when you have a lot of links, such as on the table of contents. With the now more spacious text, it might be less of a problem, but I like it how it is now.

I agree, it looks well now.

Sounds good to me. We could also do a sidebar of some sort. Let me know what markup to expect and I can make css for it. I'll need an a tag that either has a specific class or is inside a span with a specific class. The easiest way would be:

<a href="..." class="next-link">next</a>

I don't understand that part with "what markup you expect"? I would put it in the laylout, so it would be HTML?

You might also have a look at some other issues.

I'll push my latest (minor changes) and do a merge then.

[maul-esel]

One more comment: in your stylesheet, there's a lonely "c" before "cite" and a "t" befor table: does this have a special meaning?

[brigand]

No, that's a mistake. It won't cause any problems but it should be fixed.