Responsiveness and detail display.

diff --git a/examples/htdocs/prettysimple.css b/examples/htdocs/prettysimple.css
index ce5a2c7..237c177 100644 (file)
--- a/examples/htdocs/prettysimple.css
+++ b/examples/htdocs/prettysimple.css
@@ -38,7 +38,7 @@ a {
 }
 .mkws-termlists {
   margin-top: 72px;
-  flex: 1 1 min-content;
+  flex: 1;
 }
 
 /* Search form */
@@ -77,7 +77,7 @@ a {
   font-family: "Open Sans", sans-serif;
 }
 .mkws-motd-container {
-  flex: 3 0 75%;
+  flex: 3;
   margin-left: 70px;
   margin-bottom: auto;
   display: flex;
@@ -152,7 +152,7 @@ a {
 .mkws-term {
   display: flex;
   padding-left: 15px;
-  font-size: .8em;
+  font-size: .9em;
 }
 .mkws-term a {
   flex: 1;
@@ -169,12 +169,11 @@ a {
 /* Result containers */
 .mkws-summary {
   padding: 40px 20px;
+  min-height: 120px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.15);
-  display: flex;
-  flex-direction: row;
 }
 .result-data {
-  flex: 1;
+  min-height: 120px;
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
@@ -226,7 +225,7 @@ a {
   text-transform: uppercase;
 }
 .result-thumb {
-  order: -1;
+  float: left;
   margin-right: 25px;
 }
 .result-thumb > img {
@@ -235,18 +234,84 @@ a {
   object-fit: contain;
 }
 .mkws-details {
-  order: 50;
-  background: white;
-  border: 1px solid hsla(31, 15%, 50%, 0.25);
-  margin: 2em;
-  z-index:1;
-  position: absolute;
+  margin-top: 25px;
 }
 .mkws-prev, .mkws-next {
   text-transform: uppercase;
   font-size: .75em;
 } 
 
+
+/* Responsive */
+@media screen and (max-width: 1020px) {
+  .mkws-motd-container {
+    margin-left: 30px;
+  }
+}
+@media screen and (max-width: 900px) {
+  .mkws-results {
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-content: flex-start;
+    margin: none;
+  }
+  .mkws-pager {
+    margin: 0;
+  }
+  .mkws-pager > div {
+    margin-top: 10px;
+  }
+  .mkws-termlists {
+    order: 99;
+    width: 100%;
+    flex: none;
+    margin-top: 40px;
+  }
+  .mkws-motd-container {
+    flex: none;
+    margin-left: 0;
+    width: 100%;
+  }
+  .mkws-ranking {
+    width: 100%;
+  }
+  .mkws-search {
+    width: 100%;
+  }
+  .mkws-summary {
+    min-height: 60px;
+    padding: 20px 10px;
+  }
+  .result-data {
+    min-height: 60px;
+  }
+  .result-date {
+    font-size: 12px;
+  }
+  .result-title {
+    font-size: 18px;
+  }
+  .result-description {
+    font-size: 14px;
+    max-height: 34px;
+  }
+  .result-author {
+    font-size: 11px;
+  }
+  .result-thumb {
+    order: -1;
+    margin-right: 10px;
+  }
+  .result-thumb > img {
+    width: 70px;
+    height: 60px;
+    object-fit: contain;
+  }
+  .mkws-pager > div {
+    float: none !important;
+  }
+}
+
 /* Font (from mozilla.org) */
 @font-face{
   font-family:'Open Sans Light';