[#229,#241][Crum/Xooxle] Resizing (shrinking) Some Elements.

There is no need to fill large spaces with titles. The search functionality is more worthy of the space. Also keep the search panel (search box and checkboxes) on the same line on mobile.
pishoyg · Nov 19, 2024 · ffaae5d · ffaae5d
1 parent 7889de6
commit ffaae5d
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 14 deletions.
diff --git a/site/crum.html b/site/crum.html
@@ -12,22 +12,31 @@
 </head>
 <body>
   <a href="http://remnqymi.com/">Home</a>
-  <h1>ⲡⲓⲀⲛⲥⲁϫⲓ - Coptic Dictionary</h1>
-
   <form>
     <div>
       <table id="xooxle">
+        <thead>
+          <tr>
+            <td colspan="3">ⲡⲓⲀⲛⲥⲁϫⲓ - Coptic Dictionary</td>
+          </tr>
+        </thead>
+
         <tr>
-          <td><input id="searchBox" placeholder="Search using Ϧⲟⲟϧⲗⲉ" type=
-          "text">
+          <td class="search-box"><input id="searchBox" placeholder=
+          "Search using Ϧⲟⲟϧⲗⲉ" type="text">
           </td>
           <td><input id="fullWordCheckbox" type="checkbox"> <label for=
-          "fullWordCheckbox">Full-Word Match</label></td>
+          "fullWordCheckbox"><span class="big-screen-only">Full-Word
+          Match</span> <span class="small-screen-only">Word</span></label></td>
           <td><input id="regexCheckbox" type="checkbox"> <label for=
-          "regexCheckbox">Use Regular Expressions (<a href=
+          "regexCheckbox"><span class="big-screen-only">Use Regular
+          Expressions(<a href=
+          "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions"
+          rel="noopener noreferrer" style="color: black" target=
+          "_blank">syntax</a>)</span> <span class="small-screen-only"><a href=
           "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions"
           rel="noopener noreferrer" style="color: black" target=
-          "_blank">syntax</a>)</label></td>
+          "_blank">RegEx</a></span></label></td>
         </tr>
       </table>
     </div>
@@ -70,7 +79,7 @@ <h1>ⲡⲓⲀⲛⲥⲁϫⲓ - Coptic Dictionary</h1>
   <p id="message"><!--Placeholder for warnings and messages.-->
   </p>
 
-  <h2 id="crum-title" class="collapse">A Coptic Dictionary, Walter E. Crum</h2>
+  <h3 id="crum-title" class="collapse">A Coptic Dictionary, Walter E. Crum</h3>
 
   <div class="collapsible">
     <table id="crum" class="results">
@@ -93,7 +102,7 @@ <h2 id="crum-title" class="collapse">A Coptic Dictionary, Walter E. Crum</h2>
     </table>
   </div>
 
-  <h2 id="kellia-title" class="collapse">KELLIA</h2>
+  <h3 id="kellia-title" class="collapse">KELLIA</h3>
 
   <div class="collapsible">
     <table id="kellia" class="results">
@@ -116,7 +125,7 @@ <h2 id="kellia-title" class="collapse">KELLIA</h2>
     </table>
   </div>
 
-  <h2 id="copticsite-title" class="collapse">copticsite</h2>
+  <h3 id="copticsite-title" class="collapse">copticsite</h3>
 
   <div class="collapsible">
     <table id="copticsite" class="results">

diff --git a/site/style.css b/site/style.css
@@ -56,7 +56,7 @@ figcaption {
 
 hr {
   border: 1px solid #ddd;
-  margin: 30px 0;
+  margin: 20px 0;
 }
 
 body {
@@ -92,6 +92,10 @@ table {
   padding: 0;
 }
 
+.small-screen-only {
+  display: none;
+}
+
 @media (width <= 500px) {
   figure img:not(.logo) {
     height: auto;
@@ -102,8 +106,12 @@ table {
     margin: 10px 0;
   }
 
-  #xooxle td {
-    display: block;
+  .small-screen-only {
+    display: unset;
+  }
+
+  .big-screen-only {
+    display: none;
   }
 
 }
@@ -240,12 +248,19 @@ table {
 
 /* stylelint-enable selector-id-pattern */
 
+#xooxle thead * {
+  text-align: center;
+  font-weight: bold;
+  color: #2C3E50;
+  font-size: 120%;
+}
+
 #xooxle td {
   padding-right: 5px;
   padding-left: 5px;
 }
 
-#xooxle td:first-child {
+.search-box {
   width: 50%;
 }