app/Resources/static/themes/_global/share.scss

   1 /* -------------------------- Reset ------------------- */
   2
   3 html,
   4 body,
   5 div,
   6 span,
   7 applet,
   8 object,
   9 iframe,
  10 h1,
  11 h2,
  12 h3,
  13 h4,
  14 h5,
  15 h6,
  16 p,
  17 blockquote,
  18 pre,
  19 a,
  20 abbr,
  21 acronym,
  22 address,
  23 big,
  24 cite,
  25 code,
  26 del,
  27 dfn,
  28 em,
  29 img,
  30 ins,
  31 kbd,
  32 q,
  33 s,
  34 samp,
  35 small,
  36 strike,
  37 strong,
  38 sub,
  39 sup,
  40 tt,
  41 b,
  42 u,
  43 i,
  44 dl,
  45 dt,
  46 dd,
  47 ol,
  48 ul,
  49 li,
  50 fieldset,
  51 form,
  52 label,
  53 legend,
  54 table,
  55 caption,
  56 tbody,
  57 tfoot,
  58 thead,
  59 tr,
  60 th,
  61 td,
  62 article,
  63 aside,
  64 canvas,
  65 details,
  66 embed,
  67 figure,
  68 figcaption,
  69 footer,
  70 header,
  71 hgroup,
  72 menu,
  73 nav,
  74 output,
  75 section,
  76 summary,
  77 time,
  78 mark,
  79 audio,
  80 video {
  81   margin: 0;
  82   padding: 0;
  83   border: 0;
  84   font-size: 100%;
  85   vertical-align: baseline;
  86 }
  87
  88 article,
  89 aside,
  90 details,
  91 figcaption,
  92 figure,
  93 footer,
  94 header,
  95 hgroup,
  96 menu,
  97 nav,
  98 section {
  99   display: block;
 100 }
 101
 102 body {
 103   line-height: 1;
 104 }
 105
 106 blockquote,
 107 q {
 108   quotes: none;
 109 }
 110
 111 blockquote::before,
 112 blockquote::after,
 113 q::before,
 114 q::after {
 115   content: '';
 116   content: none;
 117 }
 118
 119 table {
 120   border-collapse: collapse;
 121   border-spacing: 0;
 122 }
 123
 124 /* -------------------------- General properties ------------------- */
 125
 126 body {
 127   background-color: white;
 128   color: #444;
 129   font-family: Georgia;
 130   line-height: 1.7;
 131   -ms-content-zooming: none;
 132   margin-bottom: 64px;
 133 }
 134
 135 h1,
 136 h2,
 137 h3,
 138 h4,
 139 h5,
 140 h6 {
 141   font-weight: 600;
 142   margin: 0.2em 0;
 143 }
 144
 145 article h1,
 146 article h2,
 147 article h3,
 148 article h4,
 149 article h5,
 150 article h6 {
 151   text-align: left;
 152   line-height: 1.3;
 153 }
 154
 155 h1 {
 156   font-size: 1.4em;
 157 }
 158
 159 h2 {
 160   font-size: 1.3em;
 161 }
 162
 163 h3,
 164 h4 {
 165   font-size: 1.2em;
 166 }
 167
 168 h5,
 169 h6 {
 170   font-size: 1.1em;
 171 }
 172
 173 p {
 174   margin-bottom: 0.75em;
 175 }
 176
 177 b,
 178 strong {
 179   font-weight: bold;
 180 }
 181
 182 i,
 183 em {
 184   font-style: italic;
 185 }
 186
 187 a {
 188   color: #444;
 189   text-decoration: underline;
 190 }
 191
 192 a:active,
 193 a:hover {
 194   outline: 0;
 195 }
 196
 197 p,
 198 ul,
 199 ol,
 200 dl {
 201   margin: 0 0 1.75em;
 202 }
 203
 204 ul,
 205 ol {
 206   padding-left: 1.25em;
 207 }
 208
 209 li {
 210   padding-bottom: 0.2em;
 211   line-height: 1.6;
 212 }
 213
 214 li p:last-child,
 215 li li:last-child {
 216   margin-bottom: -0.2em;
 217 }
 218
 219 ul li:last-child,
 220 ol li:last-child {
 221   padding-bottom: 0;
 222 }
 223
 224 iframe,
 225 video {
 226   max-width: 100%;
 227   height: auto;
 228 }
 229
 230 mark {
 231   padding: 0 0.2em;
 232 }
 233
 234 mark a {
 235   text-decoration: none;
 236 }
 237
 238 blockquote {
 239   font-style: italic;
 240   border-left: 0.25em solid black;
 241   margin-left: -20px;
 242   padding-left: 17px;
 243   margin-bottom: 0.5em;
 244   margin-top: 0.5em;
 245 }
 246
 247 blockquote cite {
 248   text-transform: uppercase;
 249   font-size: 0.8em;
 250   font-style: normal;
 251 }
 252
 253 blockquote cite::before {
 254   content: "—";
 255   margin-right: 0.5em;
 256 }
 257
 258 img {
 259   display: block;
 260   height: auto;
 261   margin-bottom: 0.5em;
 262   max-width: 100%;
 263 }
 264
 265 figure {
 266   margin: 0;
 267 }
 268
 269 figure figcaption {
 270   display: block;
 271   margin-top: 0.3em;
 272   font-style: italic;
 273   font-size: 0.8em;
 274 }
 275
 276 button {
 277   display: none !important;
 278 }
 279
 280 hr {
 281   display: block;
 282   height: 1px;
 283   border: solid #666;
 284   border-width: 1px 0 0;
 285   margin: 1.6em 0;
 286   padding: 0;
 287 }
 288
 289 small {
 290   font-size: 0.7em;
 291 }
 292
 293 dl {
 294   margin: 1.6em 0;
 295 }
 296
 297 dl dt {
 298   float: left;
 299   width: 11.25em;
 300   overflow: hidden;
 301   clear: left;
 302   text-align: right;
 303   -ms-text-overflow: ellipsis;
 304   -o-text-overflow: ellipsis;
 305   text-overflow: ellipsis;
 306   white-space: nowrap;
 307   font-weight: bold;
 308   margin-bottom: 1em;
 309 }
 310
 311 dl dd {
 312   margin-left: 12.5em;
 313   margin-bottom: 1em;
 314 }
 315
 316 pre {
 317   -moz-box-sizing: border-box;
 318   -webkit-box-sizing: border-box;
 319   box-sizing: border-box;
 320   margin: 4em 0;
 321   border: 0.0625em solid #efefef;
 322   width: 100%;
 323   padding: 1em;
 324   font-family: Consolas, monospace;
 325   white-space: pre;
 326   overflow: auto;
 327 }
 328
 329 pre code {
 330   font-size: 0.8em;
 331   line-height: 1.6em;
 332   white-space: pre-wrap;
 333   background: transparent;
 334   border: none;
 335   padding: 0;
 336   vertical-align: inherit;
 337 }
 338
 339 code {
 340   padding: 0.125em 0.375em;
 341   margin: 0 0.2em;
 342   font-family: Consolas, monospace;
 343   font-size: 0.8em;
 344   white-space: pre;
 345   border: 1px solid lightgray;
 346   overflow: auto;
 347 }
 348
 349 audio,
 350 video {
 351   max-width: 43.75em;
 352 }
 353
 354 ::selection,
 355 mark {
 356   background: #666;
 357   color: white;
 358 }
 359
 360 table {
 361   border-collapse: collapse;
 362   margin-bottom: 2em;
 363   width: 100%;
 364 }
 365
 366 th,
 367 td {
 368   padding: 0.25em;
 369   text-align: left;
 370 }
 371
 372 thead tr {
 373   text-transform: uppercase;
 374   font-size: 0.85em;
 375   letter-spacing: 1px;
 376   font-family: "Segoe UI", sans-serif;
 377   font-weight: 600;
 378 }
 379
 380 tbody tr:nth-child(2n+1) {
 381   background: rgba(0, 0, 0, 0.1);
 382 }
 383
 384 tbody {
 385   border: solid #999;
 386   border-width: 1px 0;
 387 }
 388
 389 figure {
 390   text-align: center;
 391 }
 392
 393 figure > * {
 394   margin: 0 auto;
 395 }
 396
 397 header {
 398   text-align: center;
 399 }
 400
 401 .shared-by {
 402   margin-bottom: 1em;
 403 }
 404
 405 /* --------------------- Responsive design ------------------------- */
 406
 407 @media (max-width: 719px) {
 408   header > *:not(.preview),
 409   article {
 410     padding: 0 1em;
 411   }
 412 }
 413
 414 @media (min-width: 720px) {
 415   blockquote {
 416     margin-left: -1.4375em;
 417     padding-left: 1.25em;
 418   }
 419
 420   header {
 421     margin-top: 32px;
 422   }
 423
 424   .block {
 425     margin-left: auto;
 426     margin-right: auto;
 427     max-width: 43.75em;
 428     padding: 0 1.25em;
 429   }
 430 }