Lower title (h3) margins in refine & some small other stuff (#1367)

* Fix rule that didn't apply and change it's value

* Remove css rule from html

* one pixel higher margin

* smaller category in refine, bigger minimu msize for searchbox

* fix for too big searchbox at some very specific resolution

* lower height level for log-in icon

* add "sign in" text when hovering log-in link

public/css/main.css

@@ -127,6 +127,7 @@ body {
 .nav-btn.log-in div {
     display: none;
     font-size: 17px;
+    line-height: 65px;
 }
 .header .h-search {
     margin-right: 6px;
@@ -350,8 +351,8 @@ select.form-input {
     text-align: left;
 }
 
-.box.refine>h3 {
-    margin-top: 5px;
+.box.refine h3 {
+    margin-top: 1px;
     margin-bottom: 11px;
 }
 
@@ -363,8 +364,8 @@ select.form-input {
     width: 65px;
 }
 .box.refine .language {
-	position: absolute; 
-	right: 0;
+    position: absolute; 
+    right: 0;
 }
 
 .form-refine {
@@ -382,7 +383,9 @@ select.form-input {
     display: inline-block;
 }
 
-.form-refine .refine-searchbox::placeholder { opacity: 0; }
+.form-refine .refine-searchbox::placeholder {
+    opacity: 0;
+}
 .form-refine .refine-searchbox {
     border-radius: 3px 0 0 3px;
     width: 21%;
@@ -392,14 +395,20 @@ select.form-input {
 .form-refine .refine-category {
     border-left: none;
     border-radius: 0 3px 3px 0;
-    max-width: 42%;
+    max-width: 41%;
+    min-width: 162px;
 }
 
 .box.refine > form > div {
 	display: flex;
 }
-.box.refine .refine-container-1 { width: 53%; }
-.box.refine .refine-container-2 { width: 47%; position: relative; }
+.box.refine .refine-container-1 {
+    width: 53%;
+}
+.box.refine .refine-container-2 {
+    width: 47%;
+    position: relative;
+}
 
 .categories a {
     display: inline-block;
@@ -408,16 +417,16 @@ select.form-input {
 }
 
 #announce { 
-	margin-bottom: 15px;
-	padding: 7px 10px;
-	background-color: #D9EDF7;
-	border: 1px solid #c4e1e8;
-	border-radius: 7px;
+    margin-bottom: 15px;
+    padding: 7px 10px;
+    background-color: #D9EDF7;
+    border: 1px solid #c4e1e8;
+    border-radius: 7px;
 }
 
 #announce:before { 
-	content: "!";
-	vertical-align: middle;
+    content: "!";
+    vertical-align: middle;
     float: left;
     margin: -2px 8px 0 0;
     font-size: 2.2em;
@@ -746,7 +755,10 @@ html, body {
 	margin-top: 5px;
     }
     .form-refine .refine-category {
-	max-width: 44%;
+	max-width: 30%;
+    }
+    .form-refine .refine-searchbox {
+	min-width: 190px;
     }
     .hide-xs {
 	display: none !important;

templates/layouts/partials/helpers/badgemenu.jet.html

@@ -29,8 +29,8 @@
     </form>
   </div>
   {{ else }}
-  <a href="/login?redirectTo={{ URL.String() }}" class="nav-btn log-in" style="width:auto;">
-	<div class="icon-user"></div>
+  <a href="/login?redirectTo={{ URL.String() }}" class="nav-btn log-in" style="width:auto;" title="{{  T("signin") }}">
+    <div class="icon-user"></div>
     <span>{{  T("signin") }}</span>
   </a> {{end}}
 </div>

templates/layouts/partials/helpers/search.jet.html

@@ -16,7 +16,7 @@
 <div style="{{ if !Search.ShowRefine }}display:none;{{ end }}" class="box refine">
   </span>
   <form style="display: grid;" method="GET" action="{{ url }}">
-    <h3 style="margin-top: 2px;">{{ T("refine_search") }}</h3>
+    <h3>{{ T("refine_search") }}</h3>
 	<div>
 	  <div class="refine-container-1">
     <span class="form-refine">