Rethinking the web theme

Some initial points:

  • Content CSS should not be mixed into the UI CSS (e.g. cover page, header, footer).
  • Cover page should have lots of hooks for easy customization; perhaps even widgets (@colomet, can you share some of the specific cover page changes you suggested in this thread)?
  • Must include Fluid Project display preferences toolbar (see here).
  • Must support hover and focus states for accessibility and inclusivity.
  • Must use ARIA roles wherever possible for accessibility and inclusivity.

More to come.

Cover page changes: Metadata

I believe metadata is important and we need to give the metadata some utility. Not just to have it in the footer.

In the future, the metadata have to be dinamic and allow to find more content. If the autor is AUTHOR, we need a link to somewhere (Like the catalog of the author or some page of the autor, we need to create a place for promotion of the author).

The funcionality is not important now, i believe we need to organice the conver and later, to make possible the interaction with the readers.

The name of the author, the keywords, and some extra metadata we need to create, have to be a link to somewhere.

Cover page changes: Footer

The footer have to be a place for interaction too. The metadata have to be out or in a corner and we need some links.

About us (about the writer or about the installation owners)
Legal pages (in europe, cookie information is mandatory)
Maybe other books of the author
Maybe the keywords for a new search.

My question is, we whanto to show just information about one book, about one author or about the full pressbooks installation?

if is about one book:

If is about one author:

if is about the full installation

  • legal pages/about us
  • keywords making easy to find more books

Or to have all 3 options in the end.

Cover Pages changes: we need to add a place for the social profiles of the books (or the author).

If we are talking about default behaviour, it’s one book. But supporting the other two would be useful for some cases.

we could create the new theme with the footer empty. In the future one feature at a time, to allow all 3 allowing the author to choose which one option is the best for him.

fast ideas: Options for a new theme.

I believe the important is to allow social profiles and to give more importance the metadata. My suggestions are here. Please give new ideas or suggestions.

For computer screens

more metadata and in a better place. easy to find it. the footer have to be for other kind of content . Also the metadata will be in the future dinamic, not just letter. We need intereraction (a link in each word to some place)

For mobile

The picture have to be or out or tiny. If somebody need to see the picture, in a pop up ( a new layerr)

Do we need for tablet?

i believe yes. The option for tablet can be done later by us. Ned can do the important work and us the details, like links in metadata, or version for tablets …

(examples)

Modifications of the pages:

We need a clean screen. We need to have the header as simple as possible. It will help with small devices:

Author name: I will move to the bottom, close to the social buttoms. Like wordpress do by default. Also the div@content must have some order, now, in a tablet is bigger than in a computer screen :confounded:. I think we could make it better. Besides, is too litle if we have tables, we need a litle more of space, just a little in order to be able to have 4 colums. Now just 3 are possible (without scrooll)

Also to change the font size as the size of the screen. Maybe helps for the space and for reading

Examples: Medium.com

Modifications fo @ <544px
I think the content must not to have padding at all. Or just 5 px.
also font-size: 0.9 em

Modifications for @ <768px
Search as a buttom istead as a place for writing. Afther the buttom, some pop up where we could write the data.
Edit buttom, instead as a label in the left, as a buttom in the top.
font-size: 1.em

Modifications for @ ≥768px
div#content must be up to 650px with a padding: of 25 each side.
font-size: 1.1em

In the future, if we change the theme, I will write my ideas in the @ place screen dimensions mediaqueries post

pd: @media screen and (max-width: 1024px) {
/* Style adjustments for portrait mode goes here */
#content {
font-size: 1.1em; } these line of code should disapear, make the text biger as the screen is litle? should not be the opposite?

There are more mistakes in the css, as we need to change all the @, i don´t think is important to fix now,

i think will be better to modify the theme to the new queries dimensions as Ned suggest or I do here with a tiny suggestion.

Medium.com have a nice footer. We don´t need to copy and paste, but it could help us to think about our footer.

Much minimal approach for information of the page. Now the page have some extra information. The name of the part, the subtitle and the autor name.

why not to make it in bold and to make it less black? more minimal, like slack, github or medium have the extra information

Too many diferent ideas, i will create a place for each . For book cover, for the pages of the books and for the pressbooks publisher

Maybe you could create one category for themes book and other for themes root.