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   flex: 0 0 min-content;
  36 }
  37 .mkws-results {
  38   display: flex;
  39   margin-left: 70px;
  40 }
  41 .mkws-termlists {
  42   margin-top: 72px;
  43   flex: 1 1 min-content;
  44 }
  45
  46 /* Search form */
  47 /* heavily inspired by: */
  48 /* https://github.com/philipwalton/solved-by-flexbox/blob/master/_sass/components/_input-add-on.scss */
  49 .mkws-search-form {
  50   display: flex;
  51   width: min-content;
  52   margin-left: auto;
  53   margin-bottom: 1em;
  54 }
  55 .mkws-search-form .mkws-query {
  56   flex: 1;
  57   border-right: 0 !important;
  58   border-radius: 2px 0 0 2px;
  59 }
  60 .mkws-search-form .mkws-button {
  61   border-radius: 0 2px 2px 0;
  62   background-color: hsla(31, 15%, 50%, 0.1);
  63   /* color: hsl(0, 0%, 40%); */
  64   font: inherit;
  65   font-weight: normal;
  66 }
  67 .mkws-search-form .mkws-query, .mkws-search-form .mkws-button {
  68   border: 1px solid hsla(31, 15%, 50%, 0.25);
  69   padding: 0.5em 0.75em;
  70   margin: 0;
  71 }
  72
  73 /* Misc. elements */
  74 .mkws-lang {
  75   color: gray;
  76   font-family: "Open Sans Light", sans-serif;
  77 }
  78 .mkws-lang > span {
  79   color: black;
  80   font-family: "Open Sans", sans-serif;
  81 }
  82 .mkws-motd-container {
  83   flex: 3 0 75%;
  84   margin-left: 70px;
  85   margin-bottom: auto;
  86   display: flex;
  87   flex-wrap: wrap;
  88 }
  89 .mkws-switch {
  90   color: gray;
  91   font-family: "Open Sans Light", sans-serif;
  92 }
  93 .mkws-switch > a {
  94   color: black;
  95 }
  96 .mkws-ranking {
  97   width: 30em;
  98   margin-left: auto;
  99   font-size: .9em;
 100   text-align: right;
 101 }
 102 .mkws-ranking select {
 103  border: none;
 104  background: none;
 105 }
 106 .mkws-pager {
 107   margin-top: 40px;
 108   width: 100%;
 109 }
 110 .mkws-current-page {
 111   background: gray;
 112   border-radius: 3em;
 113   padding: 0 .5em;
 114   color: white;
 115 }
 116 .mkws-navi {
 117   margin-top: 10px;
 118   width: 100%;
 119
 120 }
 121 .mkws-removable:after {
 122   content: " X";
 123   color: DarkRed;
 124 }
 125 .mkws-removable:hover {
 126   text-decoration: line-through;
 127 }
 128 .mkws-records {
 129   width: 100%;
 130 }
 131
 132
 133 /* Facets */
 134 .mkws-facet {
 135   padding-bottom: 1em;
 136 }
 137 .mkws-facet-title {
 138   border-left: 5px solid #7d8187;
 139   padding: .5em 10px;
 140   text-transform: uppercase;
 141 }
 142 .mkws-facet:nth-child(1)>.mkws-facet-title {
 143   border-color: #2980b9;
 144 }
 145 .mkws-facet:nth-child(2)>.mkws-facet-title {
 146   border-color: #68a863;
 147 }
 148 .mkws-facet:nth-child(3)>.mkws-facet-title {
 149   border-color: #b45b47;
 150 }
 151
 152 .mkws-facet:last-child {
 153   padding-bottom: initial;
 154 }
 155 .mkws-term {
 156   display: flex;
 157   padding-left: 15px;
 158   font-size: .8em;
 159 }
 160 .mkws-term a {
 161   flex: 1;
 162   overflow: hidden;
 163   text-overflow: ellipsis;
 164   white-space: nowrap;
 165 }
 166 .mkws-term span {
 167   flex: 0 0 min-content;
 168   float: right;
 169   margin-left: .7em;
 170 }
 171
 172 /* Result containers */
 173 .mkws-summary {
 174   height: 120px;
 175   width: 100%;
 176   padding: 40px 20px;
 177   border-bottom: 1px solid rgba(0, 0, 0, 0.15);
 178   display: flex;
 179   flex-direction: column;
 180   flex-wrap: wrap;
 181   align-items: flex-start;
 182   align-content: flex-start;
 183   justify-content: space-around;
 184 }
 185
 186 /* Result fields */
 187 .result-date {
 188   flex: 1 1 min-content;
 189   order: 1;
 190   font-size: 14px;
 191   color: rgba(0, 0, 0, 0.3);
 192 }
 193 .result-title {
 194   flex: 1 1 min-content;
 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   flex: 1 1 min-content;
 204   order: 3;
 205   font-family: "Open Sans Light", sans-serif;
 206   font-size: 12px;
 207   line-height: .8;
 208   margin-top: -4px;
 209   margin-bottom: 4px;
 210   overflow: hidden;
 211   text-overflow: ellipsis;
 212   white-space: nowrap;
 213 }
 214 .result-description {
 215   flex: 1 1 min-content;
 216   order: 4;
 217   font-family: "Open Sans Light", sans-serif;
 218   font-size: 18px;
 219   line-height: 1.2;
 220   max-height: 44px;
 221   overflow: hidden;
 222 }
 223 .result-author {
 224   flex: 1 1 min-content;
 225   order: 5;
 226   font-weight: bold;
 227   font-size: 12px;
 228   letter-spacing: 0.1em;
 229   text-transform: uppercase;
 230 }
 231 .result-thumb {
 232   order: -1;
 233   margin-right: 25px;
 234 }
 235 .result-thumb > img {
 236   width: 140px;
 237   height: 120px;
 238   object-fit: contain;
 239 }
 240 .mkws-details {
 241   order: 50;
 242   background: white;
 243   border: 1px solid hsla(31, 15%, 50%, 0.25);
 244   margin: 2em;
 245   z-index:1;
 246   position: absolute;
 247 }
 248 .mkws-prev, .mkws-next {
 249   text-transform: uppercase;
 250   font-size: .75em;
 251 }
 252
 253 /* Font (from mozilla.org) */
 254 @font-face{
 255   font-family:'Open Sans Light';
 256   src:url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Light-webfont.eot);
 257   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');
 258   font-weight:400;
 259   font-style:normal
 260 }
 261
 262 @font-face{
 263   font-family:'Open Sans Light';
 264   src:url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Regular-webfont.eot);
 265   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');
 266   font-weight:700;
 267   font-style:normal
 268 }
 269
 270 @font-face{
 271   font-family:'Open Sans Light';
 272   src:url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-LightItalic-webfont.eot);
 273   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');
 274   font-weight:400;
 275   font-style:italic
 276 }
 277
 278 @font-face{
 279   font-family:'Open Sans';
 280   src:url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Regular-webfont.eot);
 281   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');
 282   font-weight:400;
 283   font-style:normal
 284 }
 285
 286 @font-face{
 287   font-family:'Open Sans';
 288   src:url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Semibold-webfont.eot);
 289   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');
 290   font-weight:700;
 291   font-style:normal
 292 }
 293
 294 @font-face{
 295   font-family:'Open Sans';
 296   src:url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Italic-webfont.eot);
 297   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');
 298   font-weight:400;
 299   font-style:italic
 300 }
 301
 302 @font-face{
 303   font-family:'Open Sans Extra Bold';
 304   src:url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-ExtraBold-webfont.eot);
 305   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');
 306   font-weight:700;
 307   font-style:normal
 308 }
 309