Extent default Wikipedia-widget styles to apply to the mkws-wikipedia

[mkws-moved-to-github.git] / examples / htdocs / topic.css

diff --git a/examples/htdocs/topic.css b/examples/htdocs/topic.css
index c7c9a3d..9e0e181 100644 (file)
--- a/examples/htdocs/topic.css
+++ b/examples/htdocs/topic.css
@@ -50,8 +50,15 @@ b, strong {
   }
 
 .mkws-summary {
-  padding: .5em 0;
+  margin: .5em 0;
   line-height: 1.35;
+  min-height: 60px;
+}
+.articles .mkws-summary, .alltargets .mkws-summary {
+  min-height: 0;
+}
+.articles .mkws-field-thumb, .alltargets .mkws-field-thumb {
+  display: none;
 }
 .mkws-summary:last-child {
   padding-bottom: 0;
@@ -74,13 +81,13 @@ b, strong {
     font-style: italic;
   }
   
-.mkws-googleimage .mkws-summary {
+.mkws-google-image .mkws-summary {
   padding: 0;
   font-weight: 400;
 }
-  .mkws-googleimage img {
+  .mkws-google-image img {
     max-width: 100%;
-    max-height: 200px;
+    max-height: 180px;
     padding: 1em 0 .5em;
   }
 .list-group-item {
@@ -90,6 +97,25 @@ b, strong {
   box-shadow: none;
   -webkit-box-shadow: none;
 }
+
+/* Fields */
+.mkws-field-thumb {
+  height: 60px;
+  width: 80px;
+  overflow: hidden;
+  margin-right: 1em;
+  float: left;
+}
+.mkws-field-thumb > img {
+  height: 60px;
+  max-width: 80px;
+} 
+.mkws-field-description {
+  overflow: hidden; 
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 @media screen and (min-width:700px) {
   .multicol {
     column-count: 2;
@@ -100,3 +126,13 @@ b, strong {
     -webkit-column-gap: 20px;
   }
 }
+@media screen and (min-width:900px) {
+  .multicol {
+    column-count: 3;
+    column-gap: 20px;
+    -moz-column-count: 3;
+    -moz-column-gap: 20px;
+    -webkit-column-count: 3;
+    -webkit-column-gap: 20px;
+  }
+}