Improved styling on the search page

PhysicsFormulae.WebApplication/search.html

@@ -1,12 +1,16 @@
 <p>This website is a physics formulary - essentially a dictionary of physics formulae. You can use it to look up common physics formulae.</p>
-<p>The list of formulae is being added to all the time - if your favourite equation is not in here yet, it might be soon. You can see the source code for this project on GitHub: <a href="https://github.com/BenjaminTMilnes/PhysicsFormulae" target="_blank">https://github.com/BenjaminTMilnes/PhysicsFormulae</a>. This project has been created by B. T. Milnes.</p>
+<p>The list of formulae is being added to all the time - if your favourite equation is not in here yet, it might be soon. You can see the source code for this project on GitHub: <a href="https://github.com/BenjaminTMilnes/PhysicsFormulae" target="_blank" title="Physics Formulae on GitHub">https://github.com/BenjaminTMilnes/PhysicsFormulae</a>. This project has been created by <a href="http://www.benjamintmilnes.com" title="B. T. Milnes' Blog">B. T. Milnes</a>.</p>
 <div class="search">
     <div class="search-formula" ng-repeat="formula in formulae">
-        <div class="search-formula-title">{{formula.Title}}</div>
+        <h3 class="search-formula-title">{{formula.Title}}</h3>
         <div class="search-formula-content">
-            <a href="#/formula/{{formula.Reference}}">
+            <a href="#/formula/{{formula.Reference}}" title="{{formula.Title}}">
                 <katex latex="{{formula.Content}}"></katex>
             </a>
         </div>
+        <p class="search-formula-interpretation">{{formula.Interpretation}}</p>
+        <div class="search-formula-fields">
+            <span class="search-formula-field" ng-repeat="field in formula.Fields">{{field}}</span>
+        </div>
     </div>
 </div>

PhysicsFormulae.WebApplication/style.css

@@ -41,19 +41,53 @@ a {
 
 .search-formula {
     margin: 70px 0px;
+     max-width:700px;
 }
 
 .search-formula-title {
-    font-size: 17px;
+    font-size: 22px;
     text-transform: uppercase;
     letter-spacing: 0.1em;
 }
 
 .search-formula-content {
-    font-size: 40px;
-    margin: 40px;
+    font-size: 42px;
+    margin: 42px;
+}
+
+.search-formula-content a{
+     color:#202020;
+      text-decoration:none;
+}
+
+.search-formula-content a:hover{
+     color:#105ecc;
+      text-decoration:none;
+}
+
+.search-formula p{
+     font-size:14px;
+}
+
+.search-formula-fields{
+     font-size:14px;
+
 }
 
+.search-formula-field{
+    display: inline-block;
+    padding: 4px 14px;
+    margin: 2px;
+    border-radius: 2px;
+    color: #ffffff;
+    font-weight: bold;
+    background-color: #105ecc;
+
+}
+
+
+
+
 .formula {
 }