search is now responsive

meodai · Oct 23, 2014 · 6617a8c · 6617a8c
1 parent b5652fc
commit 6617a8c
Showing 1 changed file with 24 additions and 1 deletion.
diff --git a/.theme/style.css b/.theme/style.css
@@ -57,6 +57,11 @@ a[href$="/"]:hover,a[href$="/"]:hover,a.link--breadcrumb:hover {
 /* header */
 .header {
 
+}
+@media only screen and (max-width : 400px) {
+    .header {
+        padding: 0.5em;
+    }
 }
 .search {
     box-sizing: border-box;
@@ -65,12 +70,25 @@ a[href$="/"]:hover,a[href$="/"]:hover,a.link--breadcrumb:hover {
     padding: 0.6em;
     color: #fff;
     outline: none;
+    border-radius: 4px;
+}
+
+.search:focus {
+    box-shadow: 0 0 0 1px rgba(250,190,110,.9);
 }
+
 .search--main {
     display: inline-block;
     float: right;
     width: 30%;
 }
+@media only screen and (max-width : 400px) {
+    .search--main {
+        width: 100%;
+        float: none;
+    }
+}
+
 
 /* directory title */
 .main-title {
@@ -80,7 +98,12 @@ a[href$="/"]:hover,a[href$="/"]:hover,a.link--breadcrumb:hover {
     margin-bottom: 0.8em;
     max-width: 70%;
 }
-
+@media only screen and (max-width : 400px) {
+    .main-title {
+        max-width: 100%;
+        float: none;
+    }
+}
 
 /* wraps the table */
 .wrap {