Make stuff look better on medium-width devices and phones

Author: coolreader18

Diff for: _layouts/home.html

@@ -2,15 +2,15 @@
 layout: default
 ---
 
-<!-- site title, logo and description -->
-<!-- to update, edit the global site config.yaml -->
 <section>
+    <!-- site title, logo and description -->
+    <!-- to update, edit the global site config.yaml -->
     <div class="w-100 m-auto mt-2">
         <div class="d-md-flex justify-center">
             <div class="d-sm-none"><img class="logo" src="{{site.baseurl}}/assets/img/rust-python-logo.svg"
                     alt="RustPython Logo">
             </div>
-            <div class="w-md-25 pl-2">
+            <div class="w-md-50 w-lg-25 pl-2">
                 <div class="title">{{ site.title }}</div>
                 <div class="">
                     <p>
@@ -20,12 +20,10 @@
             </div>
         </div>
     </div>
-</section>
 
-<!-- explainer image, paragraph and links to demos -->
-<!-- to update, edit index.markdown file in the root folder  -->
-<section>
-    <div class="m-auto w-md-25 mt-2">
+    <!-- explainer table + paragraph and links to demos -->
+    <!-- to update, edit index.markdown file in the root folder  -->
+    <div class="m-auto w-md-50 w-lg-25 mt-2">
         <table class="w-100">
             <tr>
                <td class="valign-center vpad-small">

Diff for: assets/media.css

@@ -34,7 +34,7 @@
 }
 
 
-/* desktop , tablets */
+/* smaller laptops, tablets */
 @media (min-width: 768px) {
     .mt-md-4 {
         margin-top: 4em;
@@ -85,6 +85,12 @@
     }
 }
 
+@media (min-width: 1366px) {
+  .w-lg-25 {
+    width: 25%;
+  }
+}
+
 /* fixes for ipad  */
 @media (min-width: 992px) {