Some notes and questions on Text CSS

For @vimala and @blake, I’ll make some notes here as I go on the text CSS.

This is the first time I have gitted anything for years, so I hope I haven’t blown everything up!

I have added the following to /styles:

  • sc-text-styles.html
  • sc-text-heading-styles.html
  • sc-text-paragraph-num-styles.html

Also added a few changes to sc-styles.html.

As I understand it, we don’t use nesting as in SASS: is this correct? I have denested everything. This is, admittedly, pretty ugly, especially when it comes to handling the text-overlay, but it’s the best I can do, unless anyone has a better approach.

We have been using a class .skolar-font, which I believe is there to ensure that non-Skolar languages do not use Italics or small caps by mistake. I have removed these, as they would be better separated into specific language templates.

The .metre special characters need special attention, I have ignored them for now.

As far as the popups go, I will leave them, as I think we will implement these using the paper-tooltip. Similarly with the text-pages overlay, not sure how this will work, so leave it for now.

For the rest, they should work, pretty much. As far as details go, we can adjust, but the basics should be there.


Below is some of the CSS that I have removed. I suspect that it will not be necessary, or will be implemented differently. I’ll take it out so as to not end up with unnecessary code. Anyway, here it is for the record.

[lang=zh], [lang=lzh] {
.sc {display: none}
}

// Metaarea should not be visible while it is still inside the #text
// element. Javascript automagically moves it into the sidebar.
// This prevents ‘flashing’ when the javascript is slow to load.
#text #metaarea {
display: none;
}

//^%$^%$^%$^//

q:before,
q:after {
content: “”;
}

/* BOOKMARKED SECTION HIGHLIGHTING /
.embeddedparallel.bookmarkeded {
padding: 1em;
margin-left:-1em;
margin-right:-1em;
border-radius: 1em;
background-color: #feeae7;
margin-bottom: 1.5em;
}
/
The bottom margin is transfered to the highlighting element */
.embeddedparallel.bookmarkeded p:last-child {
margin-bottom: 0em;
}

/This is for the URL copy function/

.marked {
background: pastel-color(bright-red);
padding: 2px;
margin: -2px;
}

/NEW CLASSES ADDED FOR VERSION 3.0 (PYTHON). THESE ARE MAINLY FOR SANSKRIT TEXTS. I PLACE THEM HERE FOR NOW, BUT ULTIMATELY THEY SHOUL BE INTEGRATED PROPERLY. UNDER THE DESCRIPTION IS THE TITLE ATTRIBUTE./

//.ref
/references external, eg to other books. Used in IBH./

//.cr
/*cross-reference, i.e. internal references. /


And out of the heading sfile, I also took the stuff that applies only to non-latin texts. However I kept the lzh mirrot heading styles.

#text:lang(skt) .hgroup {
text-transform: capitalize;
}
.noto-sans-font {
font-family: $noto-sans serif;
letter-spacing: 0;
line-height: 1.8;

.endsutta, .endvagga,  .endsection, .enddivision, .end, .namo, .uddana, .uddanagatha, .evam, em, i, .speaker {
    font-weight: normal;
    font-style: normal;
}

.sutta {
    h1, h2, h3, h4, h5, h6 {
        font-weight: bold;
        letter-spacing: 0;
    }
}

[lang=pi], [lang=en] {
    font-family: 'Noto Sans', sans-serif;
}

}

[lang=th] {
.sutta {
h1, h2, h3, h4, h5, h6 {
font-weight: bold;
}
}

}

[lang=he] {
h1, h2, h3, h4, h5, h6, .hgroup p {
text-transform: lowercase;
}
}


Removed the following from paragraph-nums:

/* Paragraph ID to open below the header when header is pinned */
main.header-pinned {
a.sc, a.t-linehead, a.verse-num-sc, a.mc, a.jb, a.uv, a.vagga-gatha-num-sc {
margin-top: -$id-offset-top;
padding-top: $id-offset-top;
}
}

/* TODO systematically do for all of them (alphabetical order)
a.adh-v
a.apz
a.ba
a.bhaisv
a.bi
a.bjt
a.bl
a.bm
a.bn
a.bps
a.bv
a.cps
a.divy
a.dhskd
a.dhskm
a.eno89
a.es
a.fa
a.fuk03
a.fol
a.flw
a.gbm
a.gno78
a.har04
a.hh
a.hoe16
a.hos89a, a.hos89b, a.hos91
a.hs
a.ia
a.jb
a.jd
a.jsk
a.lh
a.kat
a.kel
a.kl
a.ks
a.mat85, a.mat88, a.mat96
a.mc
a.mkv
a.mit57
a.ms
a.msdiv
a.msvi, a.msvii, a.msviii, a.msviv, a.msvwi
a.mt
a.nm
a.np
a.nst
a.of
a.pand-v
a.pl
a.pos-v
a.prava-v
a.pravr-v-i, a.pravr-v-ii, a.pravr-v-iii, a.pravr-v-iv
a.pts
a.pts-s
a.san87, a.san89
a.say-v
a.sb
a.sbvi, a.sbvii
a.sc
a.sen
a.sht
a.snp-vagga-section-verse
a.snp-vagga-verse
a.ss
a.t, a.t-linehead
a.tb
a.thv
a.tri62, a.tri95
a.ttc
a.ud-sutta
a.ud-vagga-sutta
a.uv
a.vagga-gatha-num-sc
a.vai58, a.vai59, a.vai61
a.var-v
a.verse-num-sc
a.verse-num-pts
a.vn
a.wal48, a.wal50, a.wal52, a.wal57c, a.wal58, a.wal59a, a.wal60, a.wal61, a.wal68a, a.wal70a, a.wal70b, a.wal76, a.wal78, a.wal80c
a.wg
a.wp
a.wp-verse
a.wr
a.yam72
a.snp-vagga-verse
a.snp-vagga-section-verse
*/

/* This causes paragraph numbers to become visible when

  • Textual Information is active */

Thanks for all this!

No Sass indeed. Because it is no longer necessary with most of the code inside the elements. We should try to avoid making global stylesheets if at all possible, except for defining overall typography styles that are used everywhere. You can make specific external stylesheets that are just used for a specific element like I did with the language-styles (note the difference in coding between that one and the ones you did).

The only reason I made external css files for the texts is because I have not yet figured out the best way of importing the old html-sutta-files into an element and that is something I will look at in the next few days. If I import them with iron-ajax the element’s internal css does not actually reach into the file and only global files will reach in.

Your code does not actually penetrate into elements, like the home-page. There you have to include the stylesheet into it: <style is="custom-style" include="sc-text-styles"> and make sure the stylesheets are polymer dom-modules like I did with the language-styles. The other static pages are vanilla html pages that are imported so they penetrate in there. However, I have not figured out how to make these styles penetrate in both elements and vanilla html yet.

I have moved your stylesheet imports to the index.html also and updated the static pages accordingly.

But like I said, I’m not sure what the best way is to go about the import of such stylesheets and the old html sutta files.

Yes. Actually on the whole I like the Polymer way much better, it feels more integrated. But not being able to nest CSS is a loss. I’m sure there will be a nicer way to handle the “infomode” properties …

This is what I’ve done; I just made some very simple font definitions in sc-styles.html. Ultimately we’ll probably want to make a sc-fonts.html to specifically handle the complex sets of fonts we use.

Huh.

These weren’t intended for the static pages, only the text pages. Much of what they contain is irrelevant for the static pages, and some of it is incorrect (eg heading styles). My intention was that they apply only to text pages, and we use another set of templates for the static pages. The amount of similar styling is fairly small, so this doesn’t involve overly much repetition.

The nature and structure of the static pages will be largely rewritten, and until we do so it would be premature to worry about the styling. If you’d like to get started with this, let me know, and I will get the pages ready, at least in a draft form. Then we can style them up properly.

:smile: Welcome to the wonderful world of Polymer, where the unexpected happens!

Maybe so, but no matter where you import them, also if you just import the stylesheets just in text-page.html, it will affect also the static pages (except the home-page, because that’s not vanilla html but a Polymer element). That is just the problem I’m talking about. The only way around it is to re-write the static pages as Polymer elements.

So basically your stylesheets, no matter where they are imported, will affect ALL vanilla html files that are imported. So as long as that is just suttas, that’s OK but if we have any others, that’s a problem.

Oh, my mistake, I thought text-page.html was for suttas only. Shouldn’t we have an element just for the suttas?

By “sutta”, just to be clear, I mean any actual text in sutta, vinaya, or abhidhamma.

Text-page.html is the element for just the suttas. Static pages are loaded in static-page.html.
But if you import the css files there, or anywhere else, they will be available globally and affect all vanilla html files everywhere else, no matter what those are.

I know this is confusing. I figured it out at some point when css started appearing in elements I had not imported it in.

If you want them to appear in just one element, you have to include them as I stated above, but then they won’t penetrate into the imported vanilla html file so that’s no use.

Try it out in what you have sent me (before pulling my new version) and see that your stylesheets appear in the donation-page for instance.

Oh, right, I’ve tested it and you’re right. That is unexpected! Is there any reason for it that you know of?

One quirk I noticed: I tried making a page like this just for testing:

<link rel="import" href="../bower_components/polymer/polymer.html">

<style is="custom-style">

h1,p{
  color:blue
}

</style>

And importing it into test-page. As you said, it applies also to static pages. But it also appears on the Home page, but only in the sutta epigraph.

Can you change the <style> tag in addons/pick-epigraph.html to <style is="custom-style"> and see if it still happens on the home-page?

And than do the opposite on data/sc/home-page.html and see if that filters through your html?

The presence of is=“custom-style” doesn’t seem to affect it.

This is annoying because it is above the elements own custom style so it will overwrite whatever style is in the custom element. This is exactly the reason why we have to avoid global stylesheets.

I see why it is there in the epigraphs now. It’s an inner-h-t-m-l element also, just like the others. So it is all vanilla html that is imported via the inner-h-t-m-l that is affected.

Okay, well, I leave this problem in your capable hands!

I was going to say the same thing to you!

1 Like

I said it first!

1 Like

:stuck_out_tongue:

1 Like

The only way I see around it right now is to define global styles (styles that are used throughout the site) as truly global and styles that are just for the sutta-texts with a .textcontent in front of it. Of course this is only needed for styles that are not unique to suttas.

Yes, this wouldn’t be hard. Looking through the styles, it seems it would mostly affect the headings. But it doesn’t feel like a super-elegant solution.

We could always add specificity by using classes for the hx and p in the suttas. But I avoided that to keep the HTML clean, it feels like overkill.

On the other hand, what about using classes for the static pages? Then they’d override the generic CSS.

I would suggest making the static pages into Polymer elements. That would eliminate the need for anything else for those pages because you can define a custom style for just each element (or a custom stylesheet and include that).

But that would also be a part-solution because I use inner-h-t-m-l to import anything that contains any html-code, also from json files like the epigraphs. You really need to isolate the css for suttas from the rest.

Okay, well, back to you then!