m-haisham / novelsave

This is a tool to download and convert novels from popular sites to e-books.
Apache License 2.0
36 stars 7 forks source link

[Feature] WEB: CSS parameters in the config #75

Closed idMysteries closed 1 month ago

idMysteries commented 2 years ago

The project has a good idea with configs. Why not add "font-size" in addition to "novel.dir"?

It may not be easy to implement, but I think it's a good idea.

novelsave config set font-size --value "18px"
novelsave config set font-size --value "1.5em"
m-haisham commented 2 years ago

That's a good idea. I'll see to it.

idMysteries commented 2 years ago

And the container "max-width: 1140px" may be possible... novelsave config set max-width --value "75%"

m-haisham commented 2 years ago

It looks like this would take a major rewrite of html packager since the current version uses bootstrap which does not allow easily changing such properties across the page.

idMysteries commented 2 years ago

Is it possible to add style to html template? something like this.... I think it should be written before bootstrap style

 <style>:root { --chapter-font-size=${fontsize} }</style> 

https://github.com/mensch272/novelsave/blob/decdc67d9538cd16f4f7b332010dae33dc254976/novelsave/resources/web/templates/index.html.mako#L7

***CHAPTER CONTENT*** {
  ....
  font-size:  var(--chapter-font-size);
  ....
}

https://developer.mozilla.org/en-US/docs/Web/CSS/:root root

idMysteries commented 2 years ago

You can pass a variable to the html template, which will be written to ":root"

m-haisham commented 2 years ago

The properties defined in :root by bootstrap are easy (ex: colors) but font-size differs from component to component and bootstrap doesn't use variables for those.

idMysteries commented 2 years ago

Book chapter uses font size from body tag You are using local bootstrap file https://github.com/mensch272/novelsave/blob/main/novelsave/resources/web/bootstrap.min.css "font-size:1rem;" -> "font-size:var(--chapter-font-size);"

m-haisham commented 2 years ago

It's worth a shot.

idMysteries commented 2 years ago

F*** I am stupid No need to change bootstrap You can just add another class here: https://github.com/mensch272/novelsave/blob/decdc67d9538cd16f4f7b332010dae33dc254976/novelsave/resources/web/templates/index.html.mako#L60

Like:

<article id="${chapter_wrapper['id']}" class="mb-4 chapter-content"> 

And in the head write the style for the template, for ex.:

<style>.chapter-content { font-size: ${font_size} }</style> 

Or add style for "article" tag

<article id="${chapter_wrapper['id']}" class="mb-4" style="font-size: ${font_size}"> 
m-haisham commented 2 years ago

I've added the ability to change font-size.