new use case graphics and slightly larger font

help/ConfigBasic.md

@@ -27,7 +27,7 @@ The language selector shows that YaCy is built for an international audience. Th
 
 ## Page Architecture
 
-The page is organized as a setup checklist. Language is first because it affects the whole user interface. Use case comes next because it changes YaCy's network and index-sharing behavior. Peer name and port define how this peer identifies itself and how it is reached.
+The page is organized as a setup checklist. Language is first because it affects the whole user interface. Use case comes next because it changes YaCy's network and index-sharing behavior. Each use-case option is shown as a card containing its radio button, name, illustration, and description. Peer name and port define how this peer identifies itself and how it is reached.
 
 | Control | Meaning | Valid values |
 | --- | --- | --- |

htroot/ConfigBasic.html

@@ -4,6 +4,38 @@
     <meta charset="UTF-8" />
     <title>YaCy '#[clientname]#': Access Configuration</title>
     #%env/templates/metas.template%#
+    <style type="text/css">
+      .usecase-options {
+        border-collapse: separate;
+        border-spacing: 8px 0;
+        margin: 8px -8px 0;
+      }
+      .usecase-option {
+        background-color: #384757;
+        color: #ffffff;
+        vertical-align: top;
+        width: 374px;
+      }
+      .usecase-option label {
+        color: inherit;
+        cursor: pointer;
+      }
+      .usecase-option-heading {
+        font-size: 18px;
+        font-weight: bold;
+        margin: 0;
+        padding: 12px;
+      }
+      .usecase-option-image,
+      .usecase-option-image img {
+        display: block;
+        margin: 0;
+      }
+      .usecase-option-description {
+        display: block;
+        padding: 12px;
+      }
+    </style>
     <script type="text/javascript">
       <!--
       function element_clicked(element){
@@ -74,23 +106,24 @@
           ::<div class="alert alert-warning" role="alert"><p>One or more remote Solr instances are attached.</p> 
           <p>Please be sure you want to expose the indexed documents in this new mode. You may want to disconnect or change the remote Solr instance(s) attached (see the <a href="IndexFederated_p.html">Index Sources &amp; Targets</a> page).</p></div>
           #(/switchWarning)#
-          <table border="0">
+          <table class="usecase-options" border="0">
-          <tr>
+            <tr>
-            <td style="width: 256px;"><input type="radio" name="usecase" value="freeworld" id="usecaseFreeworld" #(freeworldChecked)#::checked="checked"#(/freeworldChecked)# /><label for="usecaseFreeworld">Community-based web search</label></td>
+              <td class="usecase-option">
-              <td style="width: 256px;"><input type="radio" name="usecase" value="portal" id="usecasePortal" #(portalChecked)#::checked="checked"#(/portalChecked)# /><label for="usecasePortal">Search portal for your own web pages</label></td>
+                <div class="usecase-option-heading"><input type="radio" name="usecase" value="freeworld" id="usecaseFreeworld" #(freeworldChecked)#::checked="checked"#(/freeworldChecked)# /> <label for="usecaseFreeworld">Community-based web search</label></div>
-              <td><input type="radio" name="usecase" value="intranet" id="usecaseIntranet" #(intranetChecked)#::checked="checked"#(/intranetChecked)# /><label for="usecaseIntranet">Intranet Indexing</label></td>
+                <label class="usecase-option-image" for="usecaseFreeworld"><img src="env/grafics/usecase_freeworld.png" width="374" height="350" alt="Usecase Freeworld" /></label>
-          </tr>
+                <label class="usecase-option-description" for="usecaseFreeworld">Join and support the global network 'freeworld', search the web with an uncensored user-owned search network</label>
-          <tr>
+              </td>
-            <td><label for="usecaseFreeworld"><img src="env/grafics/usecase_freeworld.png" alt="Usecase Freeworld" /></label></td>
+              <td class="usecase-option">
-            <td><label for="usecasePortal"><img src="env/grafics/usecase_webportal.png" alt="Usecase Portal" /></label></td>
+                <div class="usecase-option-heading"><input type="radio" name="usecase" value="portal" id="usecasePortal" #(portalChecked)#::checked="checked"#(/portalChecked)# /> <label for="usecasePortal">Search portal for your own web pages</label></div>
-            <td><label for="usecaseIntranet"><img src="env/grafics/usecase_intranet.png" alt="Usecase Intranet" /></label></td>
+                <label class="usecase-option-image" for="usecasePortal"><img src="env/grafics/usecase_webportal.png" width="374" height="350" alt="Usecase Portal" /></label>
-          </tr>
+                <label class="usecase-option-description" for="usecasePortal">Your YaCy installation behaves independently from other peers and you define your own web index by starting your own web crawl. This can be used to search your own web pages or to define a topic-oriented search portal.</label>
-          <tr>
+              </td>
-            <td valign="top"><label for="usecaseFreeworld">Join and support the global network 'freeworld', search the web with an uncensored user-owned search network</label></td>
+              <td class="usecase-option">
-            <td valign="top"><label for="usecasePortal">Your YaCy installation behaves independently from other peers and you define your own web index by starting your own web crawl. This can be used to search your own web pages or to define a topic-oriented search portal.</label></td>
+                <div class="usecase-option-heading"><input type="radio" name="usecase" value="intranet" id="usecaseIntranet" #(intranetChecked)#::checked="checked"#(/intranetChecked)# /> <label for="usecaseIntranet">Intranet Indexing</label></div>
-            <td valign="top"><label for="usecaseIntranet">Create a search portal for your intranet or web pages or your (shared) file system. URLs may be used with http/https/ftp and a local domain name or IP, or with an URL of the form file:///&lt;path&gt; or smb://&lt;server&gt;/&lt;path&gt;<br/>            
+                <label class="usecase-option-image" for="usecaseIntranet"><img src="env/grafics/usecase_intranet.png" width="374" height="350" alt="Usecase Intranet" /></label>
-            </td>
+                <label class="usecase-option-description" for="usecaseIntranet">Create a search portal for your intranet or web pages or your (shared) file system. URLs may be used with http/https/ftp and a local domain name or IP, or with an URL of the form file:///&lt;path&gt; or smb://&lt;server&gt;/&lt;path&gt;</label>
-          </tr>
+              </td>
+            </tr>
           </table>
           </fieldset>
         </li>

htroot/env/base.css

@@ -76,7 +76,7 @@ dl {
 }
 
 body, table, textarea {
-  font-size: 12px;
+  font-size: 14px;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-smooth: always;
@@ -595,7 +595,7 @@ a.MenuItemLink {
   margin-top:1px;
   margin-bottom:1px;
   padding:4px 10px 3px 18px;
-  font-size:1.1em;
+  font-size:14px;
 }
 
 a.MenuItemLink.lock {

skins/pdblue.css

@@ -206,7 +206,7 @@ form.search.small h2 {
 }
 
 .searchresults h4 a {
-  font-size:1.3em;
+  font-size:1.2em;
   font-weight:normal;
   color:#2840A8;
   text-decoration: none;