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 mark {
 225   padding: 0 0.2em;
 226 }
 227
 228 mark a {
 229   text-decoration: none;
 230 }
 231
 232 blockquote {
 233   font-style: italic;
 234   border-left: 0.25em solid black;
 235   margin-left: -20px;
 236   padding-left: 17px;
 237   margin-bottom: 0.5em;
 238   margin-top: 0.5em;
 239 }
 240
 241 blockquote cite {
 242   text-transform: uppercase;
 243   font-size: 0.8em;
 244   font-style: normal;
 245 }
 246
 247 blockquote cite::before {
 248   content: "—";
 249   margin-right: 0.5em;
 250 }
 251
 252 img {
 253   display: block;
 254   height: auto;
 255   margin-bottom: 0.5em;
 256   max-width: 100%;
 257 }
 258
 259 figure {
 260   margin: 0;
 261 }
 262
 263 figure figcaption {
 264   display: block;
 265   margin-top: 0.3em;
 266   font-style: italic;
 267   font-size: 0.8em;
 268 }
 269
 270 button {
 271   display: none !important;
 272 }
 273
 274 hr {
 275   display: block;
 276   height: 1px;
 277   border: solid #666;
 278   border-width: 1px 0 0;
 279   margin: 1.6em 0;
 280   padding: 0;
 281 }
 282
 283 small {
 284   font-size: 0.7em;
 285 }
 286
 287 dl {
 288   margin: 1.6em 0;
 289 }
 290
 291 dl dt {
 292   float: left;
 293   width: 11.25em;
 294   overflow: hidden;
 295   clear: left;
 296   text-align: right;
 297   -ms-text-overflow: ellipsis;
 298   -o-text-overflow: ellipsis;
 299   text-overflow: ellipsis;
 300   white-space: nowrap;
 301   font-weight: bold;
 302   margin-bottom: 1em;
 303 }
 304
 305 dl dd {
 306   margin-left: 12.5em;
 307   margin-bottom: 1em;
 308 }
 309
 310 pre {
 311   -moz-box-sizing: border-box;
 312   -webkit-box-sizing: border-box;
 313   box-sizing: border-box;
 314   margin: 4em 0;
 315   border: 0.0625em solid #efefef;
 316   width: 100%;
 317   padding: 1em;
 318   font-family: Consolas, monospace;
 319   white-space: pre;
 320   overflow: auto;
 321 }
 322
 323 pre code {
 324   font-size: 0.8em;
 325   line-height: 1.6em;
 326   white-space: pre-wrap;
 327   background: transparent;
 328   border: none;
 329   padding: 0;
 330   vertical-align: inherit;
 331 }
 332
 333 code {
 334   padding: 0.125em 0.375em;
 335   margin: 0 0.2em;
 336   font-family: Consolas, monospace;
 337   font-size: 0.8em;
 338   white-space: pre;
 339   border: 1px solid lightgray;
 340   overflow: auto;
 341 }
 342
 343 audio,
 344 video {
 345   max-width: 43.75em;
 346 }
 347
 348 ::selection,
 349 mark {
 350   background: #666;
 351   color: white;
 352 }
 353
 354 table {
 355   border-collapse: collapse;
 356   margin-bottom: 2em;
 357   width: 100%;
 358 }
 359
 360 th,
 361 td {
 362   padding: 0.25em;
 363   text-align: left;
 364 }
 365
 366 thead tr {
 367   text-transform: uppercase;
 368   font-size: 0.85em;
 369   letter-spacing: 1px;
 370   font-family: "Segoe UI", sans-serif;
 371   font-weight: 600;
 372 }
 373
 374 tbody tr:nth-child(2n+1) {
 375   background: rgba(0, 0, 0, 0.1);
 376 }
 377
 378 tbody {
 379   border: solid #999;
 380   border-width: 1px 0;
 381 }
 382
 383 figure {
 384   text-align: center;
 385 }
 386
 387 figure > * {
 388   margin: 0 auto;
 389 }
 390
 391 header {
 392   text-align: center;
 393 }
 394
 395 .shared-by {
 396   margin-bottom: 1em;
 397 }
 398
 399 /* --------------------- Responsive design ------------------------- */
 400
 401 @media (max-width: 719px) {
 402   header > *:not(.preview),
 403   article {
 404     padding: 0 1em;
 405   }
 406 }
 407
 408 @media (min-width: 720px) {
 409   blockquote {
 410     margin-left: -1.4375em;
 411     padding-left: 1.25em;
 412   }
 413
 414   header {
 415     margin-top: 32px;
 416   }
 417
 418   .block {
 419     margin-left: auto;
 420     margin-right: auto;
 421     max-width: 43.75em;
 422     padding: 0 1.25em;
 423   }
 424 }