Hi Joe
We can use wikitext primitives within stylesheets to make conditional rules.
Tiny bit of background about stylesheets: TiddlyWiki in the browser renders all
tiddlers tagged $:/tags/Stylesheet into a <style> element. Tiddlers of content
type text/css will be processed as raw CSS, but tiddlers with the content type
text/vnd.tiddlywiki (the default) are processed by first wikifying them, and
then extracting the plain text portion. (So, for example, if a
text/vnd.tiddlywiki stylesheet were to contain the text "<p>23</p>", the plain
text content would be the string “23”).
There’s a danger of inadvertent wikification of stylesheet text, and so we
usually use a /rules pragma to restrict the wikitext rules that will be
observed within the stylesheet to just transclusion and macro invocations:
\rules only filteredtranscludeinline transcludeinline macrocallinline
macrocallblock
Putting the pieces together, here’s a stylesheet that sets the page background
colour to red whenever the sidebar is hidden:
\define if-sidebar-visible(text)
<$reveal state="$:/state/sidebar" type="nomatch" text="yes" default="yes">
$text$
</$reveal>
\end
\define if-sidebar-not-visible(text)
<$reveal state="$:/state/sidebar" type="nomatch" text="no" default="yes">
$text$
</$reveal>
\end
\rules only filteredtranscludeinline transcludeinline macrocallinline
macrocallblock
html body.tc-body {
background: <<if-sidebar-visible "green">><<if-sidebar-not-visible
"blue">>;
}
We define a couple of macros before the \rules pragma that encapsulate the
conditional logic, and then invoke those macros within the body of the
stylesheet.
Your example of changing the story river width when using the centralised theme
is a bit more complicated but something like this should do the trick:
\define if-sidebar-visible(text)
<$reveal state="$:/state/sidebar" type="nomatch" text="yes" default="yes">
$text$
</$reveal>
\end
\define if-sidebar-not-visible(text)
<$reveal state="$:/state/sidebar" type="nomatch" text="no" default="yes">
$text$
</$reveal>
\end
\rules only filteredtranscludeinline transcludeinline macrocallinline
macrocallblock
@media (min-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) {
html .tc-story-river {
width: <<if-sidebar-visible "770px">><<if-sidebar-not-visible
"970px">>;
}
html .tc-sidebar-scrollable {
margin-left: <<if-sidebar-visible
"343px">><<if-sidebar-not-visible "443px">>;
}
}
Best wishes
Jeremy
> On 21 Dec 2018, at 12:44, joearms <[email protected]> wrote:
>
> My Blog has two modes (with the righthand sidebar expanded or not)
>
> It's here: https://joearms.github.io/tw/share/output/index.html
>
> and the source is
> at:https://github.com/joearms/joearms.github.io/tree/master/tw
>
> When I click on the "show sidebar" chevron the sidebar is shown
> but the width is wrong.
>
> I want the layout to change in these two modes
> In view mode I want the story bit to take
> up say 65% of the screen on my mac
> or 95% on a mobile phone.
>
> In toolbar visible mode I want the "standard"
> layout.
>
> Any ideas how to do this?
>
> Cheers
>
> /Joe
>
>
>
> --
> You received this message because you are subscribed to the Google Groups
> "TiddlyWikiDev" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to [email protected]
> <mailto:[email protected]>.
> To post to this group, send email to [email protected]
> <mailto:[email protected]>.
> Visit this group at https://groups.google.com/group/tiddlywikidev
> <https://groups.google.com/group/tiddlywikidev>.
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/tiddlywikidev/807eed3e-c186-42a2-a036-42cdd4d5f9e2%40googlegroups.com
>
> <https://groups.google.com/d/msgid/tiddlywikidev/807eed3e-c186-42a2-a036-42cdd4d5f9e2%40googlegroups.com?utm_medium=email&utm_source=footer>.
> For more options, visit https://groups.google.com/d/optout
> <https://groups.google.com/d/optout>.
--
You received this message because you are subscribed to the Google Groups
"TiddlyWikiDev" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/tiddlywikidev.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywikidev/A552E540-C392-465D-BB36-EA6CF78585AE%40gmail.com.
For more options, visit https://groups.google.com/d/optout.
