Re: Is there a way to define "sidebarwidth" to be a certain percentage of the page?

26 views
Skip to first unread message
Message has been deleted

Rob van der Valk

unread,
Jan 24, 2018, 5:47:01 AM1/24/18
to sphinx-dev
Hi Ranjani,

I can't say I am experienced user myself, but I wanted even a bit more, as in bootstrap variant (CSS parts) that was
used under Read the Docs (sphinx-bootstrap-theme to be found under various places). Issues I had found:
- folding under dynamic use, as on large monitor, was a bit quirky
- Tables would never be wrapped on content. Awful reading, multiline content I wanted to enable for larger displays.
- I wanted more ability to play around with sizes and things like colour of header bar or such. In my line of
  work (chip design/inventions) handy to distinguish between ideas, functional model, math modeling, embedded software, GUI, etc etc.

Tested quite a few things but to not much avail.

Finally I ended up doing the following:

- I got the various source files from github or somesuch
- read instructions for compiling from the sources. This work centered around the different layers making up the structure of CSS. For 
  sphinx bootstrap these are especially wyrm, which give the base classes for adaptive sizing, with the settings called in the actual top
  structure files, the actual theme files. Other stuff like the fonts (font-awesome) and tools around it like javascript and bourbon I managed not touching and only
  using.
- Mind: there was a lot of experimenting going on with versioning of the various components. It was not hell but very supple it was not either.

Anyhow: the real source files for that variant was made with sass files. Sass is the predecessor of current scss, but having a workable flow without writing
all was more of interest to me than rewriting all to get SCSS sources. Maybe I should consider doing that after all, but for the moment one step too far.

In SASS you can use for instance a link to javascript activities with the '@media' call. By doing that you can have javascript interfere with the page in such
a way that your aims are achieved. Definitions you then put in the sass files and you simply recompile: your css will be updated then to cover your
requirements.

I myself figured out where the various parts were set (mostly in a file like wyrm/sass/wyrm_core/_table.sass) and made them appropriate to my ends,
being much more often aimed at non-mobile than current bootstrap theme (mobile only). That was pretty soon working like a dream, and I am now even
considering to develop a look like Tofte (sidebar left and right, with right bar usable for small figures and side notes). But that would take developing also
sphinx extensions. That is in itself not very complex, but again time consuming.

I have not published my stuff as my tooling is awfully structured (read: just erroneous) as I was clueless when I started. Had to use grunt and ran into version issues pretty soon.
Maybe a nice cleanup very feasible, but again takes time...

Point being: these things work elegantly with javascript, defining style elements like these works most structured with sass or scss. Getting it all work together only really okay
with existing sources, which you may still want to choose as classic style. I have not looked for you where to find sources for that style, but quite likely not very different 
from sphinx-rtd-theme. 

One thing I decided: to not make my left sidebar very dynamic: it only folds for very small displays into a top menu entry. It contains under RTD the contents and is for me too much
a navigation thing to allow dynamic resizing. Troublesome parts are for instance that the contents indent/wrap combo then also needs covering, and that would probably mean all hell breaks loose :-(

Can help you of course further with rtd variants, in as far as I have understood things...

Regards,
Rob


On Tuesday, January 23, 2018 at 8:12:24 PM UTC+1, Ranjani Hathaway wrote:

I am relatively new to Sphinx, and I am trying to create some documentation-  and one of the things I needed to do was widen the sidebar.

I am using the Classic theme, and I am currently specifying 'sidebarwidth' in my html_theme_options to widen it from the default 230 px.

I have it look the way I like when the browser window is maximized, but as I shrink and resize the page, the sidebar does not shrink accordingly, and it ends up looking out of proportion. Is there a way to define the width to be a certain percentage of the page, so that it keeps the proportion even when the window resizes?


As of right now, as far as I know, I can only specify the width in absolute pixel width.

Thanks in advance!

Komiya Takeshi

unread,
Jan 25, 2018, 12:10:10 PM1/25/18
to sphin...@googlegroups.com
Hi Ranjani,

IMO, you can use your custom CSS files to your project. So you can
modify the sidebar's widths by `min-width` and `max-width` styles.

On the other hand, 1.7 will provide you an option for max-width and
min-width for body.
I think it also helps you.

Thanks,
Takeshi KOMIYA

2018-01-24 4:12 GMT+09:00 Ranjani Hathaway <ranja...@gmail.com>:
>
> I am relatively new to Sphinx, and I am trying to create some documentation-
> and one of the things I needed to do was widen the sidebar.
>
> I am using the Classic theme, and I am currently specifying 'sidebarwidth'
> in my html_theme_options to widen it from the default 230 px.
>
> I have it look the way I like when the browser window is maximized, but as I
> shrink and resize the page, the sidebar does not shrink accordingly, and it
> ends up looking out of proportion. Is there a way to define the width to be
> a certain percentage of the page, so that it keeps the proportion even when
> the window resizes?
>
>
> As of right now, as far as I know, I can only specify the width in absolute
> pixel width.
>
> Thanks in advance!
>
> --
> You received this message because you are subscribed to the Google Groups
> "sphinx-dev" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to sphinx-dev+...@googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.
Reply all
Reply to author
Forward
0 new messages