Signed-off-by: Conrad Zelck <git@simpel.cc>

Signed-off-by: Conrad Zelck <git@simpel.cc>

Otherwise marker and label are on two lines.

Signed-off-by: Conrad Zelck <git@simpel.cc>

Signed-off-by: Conrad Zelck <git@simpel.cc>

The label took more space then needed. Put the label above or below the
the touch elements.

Signed-off-by: Conrad Zelck <git@simpel.cc>

There is only one media query that makes side by side look among each
other when displays widht is smaller than 811px.

Second I made an automatically adapting font-size that fit's all I
tested.

Signed-off-by: Conrad Zelck <git@simpel.cc>

All actions push a convert immediately except changes in the input
field. That's because every new character would do a conversion what
makes a lot of traffic. But to give a hint that a new conversion could
be useful the convert button will be enabled if the content is differ-
ent from the last conversion. All other actions trigger the conversion
and disable the convert button.

Signed-off-by: Conrad Zelck <git@simpel.cc>

They are a bit smaller then buttons so their border radius won't fit.

Signed-off-by: Conrad Zelck <git@simpel.cc>

Signed-off-by: Conrad Zelck <git@simpel.cc>

see: https://andy-bell.co.uk/a-modern-css-reset



Signed-off-by: Conrad Zelck <git@simpel.cc>

Signed-off-by: Conrad Zelck <git@simpel.cc>

The label refered to a textarea before. This was replaced with a div.
A div can't be reference by a label. Some make it a p and set for a11y
aria-labelledby onto #input and #output.

Signed-off-by: Conrad Zelck <git@simpel.cc>

Use a div with attribute:
 - contenteditable="true"

It fixes a lot of issues:
 - height of #input needs no javascript to adapt to content
 - therefor no complex styles are needed
 - width will no longer exceed the given width by grid-template-column
 - styling etc. can be handled like the #output div next to it

You have to set two attributes for a11y:
 - role="textbox"
 - aria-multiline="true"

Signed-off-by: Conrad Zelck <git@simpel.cc>

Signed-off-by: Conrad Zelck <git@simpel.cc>

Signed-off-by: Conrad Zelck <git@simpel.cc>

There are a lot of stati where it's not good to have those bottons en-
abled. So check it on every bodies load, change, click or keyup.

Signed-off-by: Conrad Zelck <git@simpel.cc>

This is default. As the textarea had to get always an outline with 1px
to look like the rest it must be set thicker back to default focus
outline.

Signed-off-by: Conrad Zelck <git@simpel.cc>

As the busy dialog most of the time is very short a backdrop tends the
whole page to flicker. To avoid that let it original w/o backdrop.

Signed-off-by: Conrad Zelck <git@simpel.cc>

Signed-off-by: Conrad Zelck <git@simpel.cc>

Signed-off-by: Conrad Zelck <git@simpel.cc>

Signed-off-by: Conrad Zelck <git@simpel.cc>

Signed-off-by: Conrad Zelck <git@simpel.cc>

Switch debug mode on with a file called "DEBUG".

Signed-off-by: Conrad Zelck <git@simpel.cc>

As this will be often the chosen type of disabling the debug mode.

Signed-off-by: Conrad Zelck <git@simpel.cc>

The path to pandoc must be set as it's not sure that a path will exist.
I did this with a temporary PATH environment variable.

Beside I wrote some more comments for the code.

Signed-off-by: Conrad Zelck <git@simpel.cc>

Otherwise there would be a much greater gap between header and main.
Header normally is styled by icluded style via head.php. This has the
correct margin. The padding-top from this local style.css did two gaps
together.

Signed-off-by: Conrad Zelck <git@simpel.cc>

Signed-off-by: Conrad Zelck <git@simpel.cc>

A working website w/o file in- or output.

Signed-off-by: Conrad Zelck <git@simpel.cc>