This includes some CSS changes to names of elements.
Also, added Email login button (doesn't work yet of course),
and brought back the small openid login buttons. Demoted yahoo and verison
to small buttons. This makes the big buttons be the main login types, and
the small buttons be provider-specific helpers.
Below about 600px (phones and small windowed browsers) the sidebar
starts breaking the layout. Moving it inline helps a lot; with
modern CSS (flex layout) we can also shuffle it after the main content.
Older browsers that don't do one of the 4 variants of flex layout
will just display it above the main content, which is annoying
but not too bad.
blueview also has a minimum width set so that it won't become
ridiculously small with small fonts, but that means it gets
scrollbars below about 850px; stop enforcing the minimum width
if necessary.
Finally, blueview's relatively generous margins look good in a
desktop browser, but are just too space-hungry on a phone.
Turn them off below 600px.
The "-moz-outline-style" property generates an error at the W3C CSS
validator, saying the property doesn't exist. According to
<https://developer.mozilla.org/en/CSS/-moz-outline-style>, this property
is obsolete and the use of "outline-style" is preferred.
(cherry picked from commit e3b5eab2971109d18332fe44fd396322bb148cfc)
There can be more than one feedlink group in a page, as well as (more
rarely) multiple blog forms, and using the same id for all of them
causes HTML validation errors. Replace the id with a class by the same
name and adjust in-repository CSS.
(cherry picked from commit 0c3b91e1f06fb357711cfa71d514f139cd8e04e3)
The styling of labels on the form largely obsoleted the special styled ol,
so just a few br's sufficed. Using an ol like that was not too semantically
right (probably?) and could cause problems with customized local.css.
* calendar: Shorten day names, and improve styling of month calendar.
* style.css: Reduced sidebar width back to 20ex from 30; the month calendar
will now fit in the smaller width, and 30 was feeling too large.
The key is using width: auto; overflow: auto; -- this allows the div(s) to the
left of the floating sidebar to be resized to fit next to it, and prevents
any clear: both from pushing the div down below the end of the sidebar.
Many thanks for the Hurd wiki's developers for originally figuring this out.
The edit page recently developed the same problem with its textarea, now
that a sidebar can appear on that page too. In editpage.tmpl I needed to
add a new div around the editcontent textarea, as the above styles cannot
be applied directly to textareas. The textarea's own width is reduced to
98% because at least in chromium this avoids it getting unnecessary
horizonatl scrollbars when a sidebar is displayed next to it.
* openid: Incorporated a fancy openid-selector signin form.
(http://code.google.com/p/openid-selector/)
* openid: Use "openid_identifier" as the form field, as required
by OpenID Authentication v2.0 spec.
Note that I put comment-header in a <header> despite it being
below the comment. Using a <footer> would be confusing given
the class name. Also, the content is semantically closer to
a header than a footer.
This is a first pass, it avoids needing to change style.css
except where it refers to tag types.
This goes a bit off the rails at the pageheader with its nested header.
Semantically, there should be an article around the whole page
header, content, and footer. Just as there will be an article around a
whole comment or inlined page header, content, and footer.
But that will mean changing the css that currently refers to pageheader to
refer to the enclosing article instead.