From 5d2d8477d9a3d4d6ac6d306d9f69c51d785aeb3e Mon Sep 17 00:00:00 2001 From: Jason Skomorowski Date: Fri, 31 Oct 2014 13:53:17 -0400 Subject: [PATCH] Responsiveness and detail display. --- examples/htdocs/prettysimple.css | 91 ++++++++++++++++++++++++++++++++------ 1 file changed, 78 insertions(+), 13 deletions(-) diff --git a/examples/htdocs/prettysimple.css b/examples/htdocs/prettysimple.css index ce5a2c7..237c177 100644 --- 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'; -- 1.7.10.4