Improves readability on mobile devices (hedyorg#3380)

Makes sure fonts are displayed properly and also uses full width on smaller devices for adventure texts and example codes. Also keeps the logo nice and round.

**Description**

Makes sure fonts are displayed properly and also uses full width on smaller devices for adventure texts and example codes. Also keeps the logo nice and round.

There's probably a lot more that can be done, but this should be considered a first step.

**Fixes hedyorg#3379**

Always link the number of the issue or of the discussion that your pr concerns.

**How to test**

* Use the inspector in your browser and enable mobile view (how to do that depends on the browser). Also you could use a mobile device to view the Hedy version on your computer. For that they need to be on the same network.

The changes are template only, so it should be easy to compare current and new situations.

**Checklist**
Done? Check if you have it all in place using this list:*
  
- [x] Describes changes in the format above (present tense)
- [x] Links to an existing issue or discussion 
- [x] Has a "How to test" section

If you're unsure about any of these, don't hesitate to ask. We're here to help!

templates/incl-adventure-tabs.html

@@ -34,26 +34,26 @@ <h2 class="z-10 my-0 ml-auto pt-8 text-red-500 text-base">{{ _('specific_adventu
         {% for adventure in adventures %}
           {% if 'adventures' not in customizations or customizations['adventures'][adventure.short_name] and level|int in customizations['adventures'][adventure.short_name]  %}
             <div data-tabtarget="{{adventure.short_name}}" {% if loop.index != 1 %}class="hidden"{% endif %}>
-              <div class="flex flex-row">
-                  <div class="{% if adventure.example_code %}w-1/2{% else %}w-full{% endif %} p-2 ltr:mr-2 rtl:ml-2">
+              <div class="lg:flex lg:flex-row">
+                  <div class="{% if adventure.example_code %}lg:w-1/2 {% endif %}w-full p-2 ltr:mr-2 rtl:ml-2">
                       {{ adventure.text|commonmark }}
                   </div>
                   {% if adventure.example_code %}
                       <div class="border"></div>
-                      <div class="w-1/2 p-2 ltr:ml-2 rtl:mr-2">
+                      <div class="lg:w-1/2 w-full p-2 ltr:ml-2 rtl:mr-2">
                           <h2>{{_('example_code_header')}}</h2>
                           {{ adventure.example_code|commonmark }}
                       </div>
                   {% endif %}
               </div>
             {% for story in adventure.extra_stories %}
-                <div class="flex flex-row border-t-2">
-                    <div class="{% if story.example_code %}w-1/2{% else %}w-full{% endif %} p-2 ltr:mr-2 rtl:ml-2">
+                <div class="lg:flex lg:flex-row border-t-2">
+                    <div class="lg:w-1/2 w-full p-2 ltr:mr-2 rtl:ml-2">
                       {{ story.text|commonmark }}
                   </div>
                   {% if story.example_code %}
                       <div class="border"></div>
-                      <div class="w-1/2 p-2 ltr:ml-2 rtl:mr-2">
+                      <div class="lg:w-1/2 w-full p-2 ltr:ml-2 rtl:mr-2">
                           <h2>{{_('example_code_header')}}</h2>
                           {{ story.example_code|commonmark }}
                       </div>

templates/incl-menubar.html

@@ -1,7 +1,7 @@
 <nav aria-label="Website" class="bg-blue-500 ltr:pl-4 rtl:pr-4 h-14 lg:h-16">
     {% block menu %}
     <ul class="h-full list-none flex flex-row items-center">
-        <li><a href="/"><img class="h-10 lg:h-12 ltr:mr-2 rtl:ml-2" src="{{static('/images/Hedy-logo.png')}}" alt="{{_('hedy_logo_alt')}}"></a></li>
+        <li class="ltr:mr-2 rtl:ml-2"><a href="/" class="inline-block w-10 lg:w-12"><img src="{{static('/images/Hedy-logo.png')}}" alt="{{_('hedy_logo_alt')}}"></a></li>
         <li class="hidden lg:flex menubar-item{% if current_page == 'start' %} active{% endif %}"><a class="menubar-text" href="/">{{_('nav_start')}}</a>
         </li>
         <li class="menubar-item{% if current_page == 'hedy' %} active{% endif %}"><a class="menubar-text" href="/hedy">{{_('nav_hedy')}}</a></li>

templates/layout.html

@@ -2,6 +2,7 @@
 <html lang="{{ g.lang }}" class="notranslate" translate="no">
   <head>
     <title>{% if page_title %}{{page_title}}{% else %}Hedy{% endif %}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Zilla+Slab:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,600;1,700&display=swap">
     <link rel="stylesheet" href="{{static('/css/generated.css')}}">
     <link rel="stylesheet" href="{{static('/css/additional.css')}}">