Responsiveness and detail display.
[mkws-moved-to-github.git] / examples / htdocs / prettysimple.css
1 /* General styling */
2 html {
3   height: 100%;
4   margin: 0;
5 }
6 body {
7   display: flex;
8   flex-direction: column;
9   align-content: center;
10   height: 100%;
11   margin: 0 auto;
12   padding: 0 1em;
13   font-family: "Open Sans", sans-serif;
14 }
15 a {
16  text-decoration: none;
17  color: black;
18 }
19
20 /* Top level layout */
21 .header {
22   display: flex;
23   min-height: 2.5em;
24 }
25 .mkws-switch {
26   margin-left: auto;
27 }
28 .main {
29   margin: auto;
30   max-width: 1100px;
31 }
32 .mkws-search {
33   width: 30em;
34   margin-left: auto;
35 }
36 .mkws-results {
37   display: flex;
38 }
39 .mkws-termlists {
40   margin-top: 72px;
41   flex: 1;
42 }
43
44 /* Search form */
45 /* heavily inspired by: */
46 /* https://github.com/philipwalton/solved-by-flexbox/blob/master/_sass/components/_input-add-on.scss */
47 .mkws-search-form {
48   display: flex;
49   margin-left: auto;
50   margin-bottom: 1em;
51 }
52 .mkws-search-form .mkws-query {
53   flex: 1;
54   border-right: 0 !important;
55   border-radius: 2px 0 0 2px;
56 }
57 .mkws-search-form .mkws-button {
58   border-radius: 0 2px 2px 0;
59   background-color: hsla(31, 15%, 50%, 0.1);
60   /* color: hsl(0, 0%, 40%); */
61   font: inherit;
62   font-weight: normal;
63 }
64 .mkws-search-form .mkws-query, .mkws-search-form .mkws-button {
65   border: 1px solid hsla(31, 15%, 50%, 0.25);
66   padding: 0.5em 0.75em;
67   margin: 0;
68 }
69
70 /* Misc. elements */
71 .mkws-lang {
72   color: gray;
73   font-family: "Open Sans Light", sans-serif;
74 }
75 .mkws-lang > span {
76   color: black;
77   font-family: "Open Sans", sans-serif;
78 }
79 .mkws-motd-container {
80   flex: 3;
81   margin-left: 70px;
82   margin-bottom: auto;
83   display: flex;
84   flex-wrap: wrap;
85 }
86 .mkws-switch {
87   color: gray;
88   font-family: "Open Sans Light", sans-serif;
89 }
90 .mkws-switch > a {
91   color: black;
92 }
93 .mkws-ranking {
94   width: 30em;
95   margin-left: auto;
96   font-size: .9em;
97   text-align: right;
98 }
99 .mkws-ranking select {
100  border: none;
101  background: none;
102 }
103 .mkws-pager {
104   margin-top: 40px;
105   width: 100%;
106 }
107 .mkws-current-page {
108   background: gray;
109   border-radius: 3em;
110   padding: 0 .5em;
111   color: white;
112 }
113 .mkws-navi {
114   margin-top: 10px;
115   width: 100%;
116   
117 }
118 .mkws-removable:after {
119   content: " X";
120   color: DarkRed; 
121 }
122 .mkws-removable:hover {
123   text-decoration: line-through;
124 }
125 .mkws-records {
126   width: 100%;
127 }
128
129
130 /* Facets */
131 .mkws-facet {
132   padding-bottom: 1em;
133 }
134 .mkws-facet-title {
135   border-left: 5px solid #7d8187;
136   padding: .5em 10px;
137   text-transform: uppercase;
138 }
139 .mkws-facet:nth-child(1)>.mkws-facet-title {
140   border-color: #2980b9;
141 }
142 .mkws-facet:nth-child(2)>.mkws-facet-title {
143   border-color: #68a863;
144 }
145 .mkws-facet:nth-child(3)>.mkws-facet-title {
146   border-color: #b45b47;
147 }
148
149 .mkws-facet:last-child {
150   padding-bottom: initial;
151 }
152 .mkws-term {
153   display: flex;
154   padding-left: 15px;
155   font-size: .9em;
156 }
157 .mkws-term a {
158   flex: 1;
159   overflow: hidden; 
160   text-overflow: ellipsis;
161   white-space: nowrap;
162 }
163 .mkws-term span {
164   flex: 0 0 min-content;
165   float: right;
166   margin-left: .7em;
167 }
168
169 /* Result containers */
170 .mkws-summary {
171   padding: 40px 20px;
172   min-height: 120px;
173   border-bottom: 1px solid rgba(0, 0, 0, 0.15);
174 }
175 .result-data {
176   min-height: 120px;
177   display: flex;
178   flex-direction: column;
179   flex-wrap: wrap;
180   align-items: flex-start;
181   align-content: flex-start;
182   justify-content: space-around;
183 }
184
185 /* Result fields */
186 .result-data > * {
187   flex 1;
188 }
189 .result-date {
190   order: 1;
191   font-size: 14px;
192   color: rgba(0, 0, 0, 0.3);
193 }
194 .result-title {
195   order: 2;
196   font-family: "Open Sans Light", sans-serif;
197   font-size: 24px;
198   line-height: 1.2;
199   letter-spacing: -0.02em;
200   margin-bottom: 4px;
201 }
202 .result-title-remainder {
203   order: 3;
204   font-family: "Open Sans Light", sans-serif;
205   font-size: 12px;
206   margin-top: -4px;
207   margin-bottom: 4px;
208   overflow: hidden; 
209   text-overflow: ellipsis;
210   white-space: nowrap;
211 }
212 .result-description {
213   order: 4;
214   font-family: "Open Sans Light", sans-serif;
215   font-size: 18px;
216   line-height: 1.2;
217   max-height: 44px;
218   overflow: hidden;
219 }
220 .result-author {
221   order: 5;
222   font-weight: bold;
223   font-size: 12px;
224   letter-spacing: 0.1em;
225   text-transform: uppercase;
226 }
227 .result-thumb {
228   float: left;
229   margin-right: 25px;
230 }
231 .result-thumb > img {
232   width: 140px;
233   height: 120px;
234   object-fit: contain;
235 }
236 .mkws-details {
237   margin-top: 25px;
238 }
239 .mkws-prev, .mkws-next {
240   text-transform: uppercase;
241   font-size: .75em;
242
243
244
245 /* Responsive */
246 @media screen and (max-width: 1020px) {
247   .mkws-motd-container {
248     margin-left: 30px;
249   }
250 }
251 @media screen and (max-width: 900px) {
252   .mkws-results {
253     flex-direction: row;
254     flex-wrap: wrap;
255     align-content: flex-start;
256     margin: none;
257   }
258   .mkws-pager {
259     margin: 0;
260   }
261   .mkws-pager > div {
262     margin-top: 10px;
263   }
264   .mkws-termlists {
265     order: 99;
266     width: 100%;
267     flex: none;
268     margin-top: 40px;
269   }
270   .mkws-motd-container {
271     flex: none;
272     margin-left: 0;
273     width: 100%;
274   }
275   .mkws-ranking {
276     width: 100%;
277   }
278   .mkws-search {
279     width: 100%;
280   }
281   .mkws-summary {
282     min-height: 60px;
283     padding: 20px 10px;
284   }
285   .result-data {
286     min-height: 60px;
287   }
288   .result-date {
289     font-size: 12px;
290   }
291   .result-title {
292     font-size: 18px;
293   }
294   .result-description {
295     font-size: 14px;
296     max-height: 34px;
297   }
298   .result-author {
299     font-size: 11px;
300   }
301   .result-thumb {
302     order: -1;
303     margin-right: 10px;
304   }
305   .result-thumb > img {
306     width: 70px;
307     height: 60px;
308     object-fit: contain;
309   }
310   .mkws-pager > div {
311     float: none !important;
312   }
313 }
314
315 /* Font (from mozilla.org) */
316 @font-face{
317   font-family:'Open Sans Light';
318   src:url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Light-webfont.eot);
319   src:url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Light-webfont.eot?#iefix) format('embedded-opentype'),url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Light-webfont.woff) format('woff'),url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Light-webfont.ttf) format('truetype'),url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Light-webfont.svg#OpenSansLight) format('svg');
320   font-weight:400;
321   font-style:normal
322 }
323
324 @font-face{
325   font-family:'Open Sans Light';
326   src:url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Regular-webfont.eot);
327   src:url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Regular-webfont.eot?#iefix) format('embedded-opentype'),url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Regular-webfont.woff) format('woff'),url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Regular-webfont.ttf) format('truetype'),url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Regular-webfont.svg#OpenSansRegular) format('svg');
328   font-weight:700;
329   font-style:normal
330 }
331
332 @font-face{
333   font-family:'Open Sans Light';
334   src:url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-LightItalic-webfont.eot);
335   src:url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-LightItalic-webfont.eot?#iefix) format('embedded-opentype'),url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-LightItalic-webfont.woff) format('woff'),url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-LightItalic-webfont.ttf) format('truetype'),url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-LightItalic-webfont.svg#OpenSansRegular) format('svg');
336   font-weight:400;
337   font-style:italic
338 }
339
340 @font-face{
341   font-family:'Open Sans';
342   src:url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Regular-webfont.eot);
343   src:url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Regular-webfont.eot?#iefix) format('embedded-opentype'),url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Regular-webfont.woff) format('woff'),url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Regular-webfont.ttf) format('truetype'),url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Regular-webfont.svg#OpenSansRegular) format('svg');
344   font-weight:400;
345   font-style:normal
346 }
347
348 @font-face{
349   font-family:'Open Sans';
350   src:url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Semibold-webfont.eot);
351   src:url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Semibold-webfont.eot?#iefix) format('embedded-opentype'),url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Semibold-webfont.woff) format('woff'),url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Semibold-webfont.ttf) format('truetype'),url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Semibold-webfont.svg#OpenSansSemibold) format('svg');
352   font-weight:700;
353   font-style:normal
354 }
355
356 @font-face{
357   font-family:'Open Sans';
358   src:url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Italic-webfont.eot);
359   src:url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Italic-webfont.eot?#iefix) format('embedded-opentype'),url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Italic-webfont.woff) format('woff'),url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Italic-webfont.ttf) format('truetype'),url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Italic-webfont.svg#OpenSansItalic) format('svg');
360   font-weight:400;
361   font-style:italic
362 }
363
364 @font-face{
365   font-family:'Open Sans Extra Bold';
366   src:url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-ExtraBold-webfont.eot);
367   src:url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-ExtraBold-webfont.eot?#iefix) format('embedded-opentype'),url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-ExtraBold-webfont.woff) format('woff'),url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-ExtraBold-webfont.ttf) format('truetype'),url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-ExtraBold-webfont.svg#OpenSansSemibold) format('svg');
368   font-weight:700;
369   font-style:normal
370 }
371