search

blakearchive / erdman

0 stars 0 forks source link

center poems? #51

Open ba001 opened 7 years ago

ba001 commented 7 years ago

would it be difficult to center the poems on the page? i don't mean center each line, but the poem as a whole. see the actual book:

https://books.google.com/books?id=p-yaJajW3kEC&printsec=frontcover&dq=complete+poetry+%26+prose+of+blake&hl=en&sa=X&ved=0ahUKEwi02fLZ-uDQAhXDQyYKHXMGCfsQ6wEIGzAA#v=onepage&q=complete%20poetry%20%26%20prose%20of%20blake&f=false

if it's too difficult, don't worry about. it would make things look better on large screens.

ba001 commented 7 years ago

i think it would basically be a left margin shift calculated from the width of the page in the browser

queryluke commented 7 years ago

see my notes on https://github.com/blakearchive/archive/issues/343 about setting screen breakpoints. Feel free to start messing with any css.

The current layout is 3 fixed elements, the TOC (#erdman-toc), Reader (.erdman-reader), and Navbar (.navbar).

I'm using the CSS attribute vh = viewer height and vw = viewer width.

So in theory, you can setup breakpoints and adjust the vw, vh values based on screen size. The base I have is that the TOC and Reader make up 100vw. But on a very large screen there is no reason they need to take up the entire screen. Something like:

@media (min-width: 1440px){
    .erdman-reader{
      width: 40vw;
      margin-left: 32vw;
  }
  .erdman-toc{
    width: 20vw;
   margin-left: 8vw;
}

Again, I have no clue how that would look. You'll have to tinker with the code.

Concerning a left margin for the poems, it appears each stanza has the class .tei-line-group, so this might work:

.tei-line-group {
  margin-left: 2vw;
}

Again, this is something you'll need to experiment with, and you'll probably still need to use media breakpoints.

ba001 commented 7 years ago

ok, i'll tinker, thanks