[tex4ht] How to add custom Css code into the configuration file? @media

[Nasser M. Abbasi]

Ok, fixed. Found my mistake. I forget to escape % and #
when I copied the code from the .css to try it in .cfg !

This now works in the .cfg.

if anyone is interested. This allows the webpage generated by tex4ht
to have fixed width (which I prefer) but if viewed on mobile and small
screens, it will become flexible width to fit the current size.

------------ add this to your .cfg below \begin{document} section ---

\Css{@media only screen and (min-width: 100px) and (max-width: 960px){
       body{margin-top: 1em;
       margin-bottom: 1em;
       width: auto;
       max-width: 90\%;
       margin-left: auto;
       margin-right: auto; padding: 0em;
       color: \#444;
       font-family: arial, sans-serif;
       line-height: 1.3;
       font-style: normal;
       font-size: 1.0em;
       text-align:justify; background: \#FFFFFF;}}}

\Css{@media only screen and (min-width: 960px){
       body{margin-top: 1em;
       margin-bottom: 1em;
       width: 960px;
       margin-left: auto;
       margin-right: auto; padding: 0em;
       color: \#444;
       font-family: arial, sans-serif;
       line-height: 1.3;
       font-style: normal;
       font-size: 1.0em;
       text-align:justify; background: \#FFFFFF;}}}
-----------------------------------

Now when compiled, the index.css will have this

------------------------ index.css
@media only screen and (min-width: 100px) and (max-width: 960px){ body{margin-top: 1em; margin-bottom: 1em; width: auto; max-width: 90%; margin-left: auto; margin-right: auto; padding: 0em; color: #444; font-family: arial, sans-serif; line-height: 1.3; font-style: normal; font-size: 1.0em; text-align:justify; background: #FFFFFF;}}
@media only screen and (min-width: 960px){ body{margin-top: 1em; margin-bottom: 1em; width: 960px; margin-left: auto; margin-right: auto; padding: 0em; color: #444; font-family: arial, sans-serif; line-height: 1.3; font-style: normal; font-size: 1.0em; text-align:justify; background: #FFFFFF;}}
------------------------

Case closed.

THanks,
--Nasser

On 8/29/2023 11:46 PM, Nasser M. Abbasi wrote:
> Opps, I copied the code with a missing ending extra } at the end.
> 
> Here is the correct code in cfg. It still gives same syntax error
> 
> ------------------------------------------------------
> \Css{@media only screen and (min-width: 100px) and (max-width: 960px) {
> body{margin-top: 1em; margin-bottom: 1em; width: auto; max-width: 90%;
> margin-left: auto; margin-right: auto; padding: 0em; color: #444;
> font-family: arial, sans-serif; line-height: 1.5;
> font-style: normal; font-size: 1.0em; text-align:justify; background: #FFFFFF;}
> }}
> ---------------------
> 
> Runaway argument?
> {@media only screen and (min-width: 100px) and (max-width: 960px) { b\ETC.
> ! Paragraph ended before \Css was complete.
> <to be read again>
> \par
> 
> I tried escaping it using  \@media but that did not work.
> 
> Thanks
> --Nasser
> 
> On 8/29/2023 11:29 PM, Nasser M. Abbasi wrote:
>>
>> I am trying to add this custom code into my .cfg file, using \Css{...}
>> that I always used, but it gives syntax error.
>>
>>
>> The code works fine if I add it manually to the index.css file
>> after compiling. But I need to put it to my .cfg file so it automatically
>> go inot each generated .css
>>
>> The code is below. I got it from this web site
>>
>> https://www.thatcompany.com/making-fixed-width-website-mobile-friendly
>>
>> -------------------
>>
>> @media only screen and (min-width: 100px) and (max-width: 960px) {
>> body{margin-top: 1em; margin-bottom: 1em;
>>         width: auto; max-width: 90%; margin-left: auto;
>>         margin-right: auto; padding: 0em; color: #444;
>>         font-family: arial, sans-serif; line-height: 1.5;
>>         font-style: normal; font-size: 1.0em;
>>         text-align:justify; background: #FFFFFF;}
>> ------------------------
>>
>> in the .cfg file for tex4ht, I just added \Css{..} to the above giving
>>
>> -------------------
>> \Css{@media only screen and (min-width: 100px) and (max-width: 960px) {
>> body{margin-top: 1em; margin-bottom: 1em;
>>         width: auto; max-width: 90%; margin-left: auto;
>>         margin-right: auto; padding: 0em; color: #444;
>>         font-family: arial, sans-serif; line-height: 1.5;
>>         font-style: normal; font-size: 1.0em;
>>         text-align:justify; background: #FFFFFF;}
>> }
>> -----------------
>>
>> But when I compile with make4ht, the error is
>>
>> Runaway argument?
>> {@media only screen and (min-width: 100px) and (max-width: 960px) { b\ETC.
>> ! Paragraph ended before \Css was complete.
>> <to be read again>
>> \par
>>
>>
>> Is the problem the use of @ in media?
>>
>> Thank you,
>> --Nasser
>>
>>
>>
>>
>