[Summary view] [Print] [Text view]

   1  /*
   2  Theme Name: Twenty Thirteen
   3  Description: Used to style blocks.
   4  */
   5  
   6  /*--------------------------------------------------------------
   7  >>> TABLE OF CONTENTS:
   8  ----------------------------------------------------------------
   9  1.0 Block Alignments
  10  2.0 General Block Styles
  11  3.0 Blocks - Common Blocks
  12  4.0 Blocks - Formatting
  13  5.0 Blocks - Layout Elements
  14  6.0 Blocks - Widgets
  15  7.0 Blocks - Colors
  16  --------------------------------------------------------------*/
  17  
  18  /*--------------------------------------------------------------
  19  1.0 Block Alignments
  20  --------------------------------------------------------------*/
  21  
  22  .content-area {
  23      overflow-x: hidden; /* prevents side-scrolling caused by use of vw */
  24  }
  25  
  26  [class^="wp-block-"].alignleft,
  27  [class^="wp-block-"] .alignleft {
  28      margin-right: 20px;
  29  }
  30  
  31  [class^="wp-block-"].alignright,
  32  [class^="wp-block-"] .alignright {
  33      margin-left: 20px;
  34  }
  35  
  36  .alignfull,
  37  .alignwide {
  38      clear: both;
  39  }
  40  
  41  body:not(.sidebar) .alignwide {
  42      margin-left: calc(25% - 25vw);
  43      margin-right: calc(25% - 25vw);
  44      width: auto;
  45      max-width: 1600px;
  46  }
  47  
  48  body:not(.sidebar) .alignfull {
  49      margin-left: calc(50% - 50vw);
  50      margin-right: calc(50% - 50vw);
  51      width: auto;
  52      max-width: 1600px;
  53  }
  54  
  55  /* Make non image-based blocks a bit narrower, so they don't get cut off. */
  56  body:not(.sidebar) .wp-block-columns.alignfull,
  57  body:not(.sidebar) .wp-block-audio.alignfull,
  58  body:not(.sidebar) .wp-block-table.alignfull,
  59  body:not(.sidebar) .wp-block-latest-comments.alignfull {
  60      margin-left: calc(50% - 48vw);
  61      margin-right: calc(50% - 48vw);
  62  }
  63  
  64  @media (max-width: 999px) {
  65      body.sidebar .alignwide {
  66          margin-left: calc(25% - 25vw);
  67          margin-right: calc(25% - 25vw);
  68          width: auto;
  69          max-width: 1600px;
  70      }
  71  
  72      body.sidebar .alignfull {
  73          margin-left: calc(50% - 50vw);
  74          margin-right: calc(50% - 50vw);
  75          width: auto;
  76          max-width: 1600px;
  77      }
  78  
  79      /* Make non image-based blocks a bit narrower, so they don't get cut off. */
  80      body.sidebar .wp-block-columns.alignfull,
  81      body.sidebar .wp-block-audio.alignfull,
  82      body.sidebar .wp-block-table.alignfull,
  83      body.sidebar .wp-block-latest-comments.alignfull {
  84          margin-left: calc(50% - 48vw);
  85          margin-right: calc(50% - 48vw);
  86      }
  87  }
  88  
  89  @media (min-width: 1600px) {
  90  
  91      /* Make sure the full and wide blocks still stay in Twenty Thirteen's wide container */
  92      body:not(.sidebar) .alignfull {
  93          margin-left: calc(50% - 800px);
  94          margin-right: calc(50% - 800px);
  95          width: auto;
  96          max-width: 1000%;
  97      }
  98  
  99      body:not(.sidebar) .wp-block-columns.alignfull,
 100      body:not(.sidebar) .wp-block-audio.alignfull,
 101      body:not(.sidebar) .wp-block-table.alignfull,
 102      body:not(.sidebar) .wp-block-latest-comments.alignfull {
 103          margin-left: calc(50% - 780px);
 104          margin-right: calc(50% - 780px);
 105      }
 106  
 107      body:not(.sidebar) .wp-block-gallery.alignfull {
 108          margin-left: calc(50% - 808px); /* Adjust for gallery margins */
 109          margin-right: calc(50% - 808px);
 110          width: auto;
 111          max-width: 1000%;
 112      }
 113  
 114      /* Make sure the 'wide' alignment doesn't get too wide. */
 115      body:not(.sidebar) .alignwide {
 116          margin-left: -230px;
 117          margin-right: -230px;
 118      }
 119  }
 120  
 121  /*--------------------------------------------------------------
 122  2.0 General Block Styles
 123  --------------------------------------------------------------*/
 124  
 125  /* Captions */
 126  
 127  [class^="wp-block-"] figcaption,
 128  [class^="wp-block-"] figcaption.editor-rich-text__tinymce.mce-content-body {
 129      color: #220e10;
 130      font-size: 18px;
 131      font-style: italic;
 132      font-weight: 300;
 133      line-height: 1.5;
 134      margin: 0 0 24px;
 135  }
 136  
 137  /*--------------------------------------------------------------
 138  3.0 Blocks - Common Blocks
 139  --------------------------------------------------------------*/
 140  
 141  /* Paragraph */
 142  
 143  p.has-drop-cap:not(:focus)::first-letter {
 144      font-size: 5em;
 145  }
 146  
 147  /* Gallery */
 148  
 149  .wp-block-gallery {
 150      margin-bottom: 24px;
 151  }
 152  
 153  .wp-block-gallery figcaption {
 154      margin-bottom: 0;
 155  }
 156  
 157  /* Quote */
 158  
 159  .wp-block-quote {
 160      margin: 24px 40px;
 161      padding: 0;
 162  }
 163  
 164  .wp-block-quote:not(.is-large):not(.is-style-large) {
 165      border-left: 0;
 166      border-right: 0;
 167      padding-left: 0;
 168      padding-right: 0;
 169  }
 170  
 171  .wp-block-quote.is-large p,
 172  .wp-block-quote.is-style-large p {
 173      font-size: 28px;
 174  }
 175  
 176  .wp-block-quote cite {
 177      color: inherit;
 178      font-size: inherit;
 179      font-style: italic;
 180  }
 181  
 182  /* Audio */
 183  
 184  .wp-block-audio audio {
 185      display: block;
 186      width: 100%;
 187  }
 188  
 189  /* Cover */
 190  
 191  .wp-block-cover-image.aligncenter,
 192  .wp-block-cover.aligncenter {
 193      clear: both;
 194      display: flex;
 195  }
 196  
 197  body:not(.sidebar) .wp-block-cover > .wp-block-cover__inner-container > * {
 198      width: 604px;
 199      max-width: 100%;
 200      margin-left: auto;
 201      margin-right: auto;
 202  }
 203  
 204  @media screen and (min-width: 665px) {
 205      body:not(.sidebar) .wp-block-cover__inner-container > .wp-block-group.alignfull, 
 206      body:not(.sidebar) .wp-block-cover__inner-container > .wp-block-group.has-background.alignfull {
 207          padding: 20px;
 208      }
 209  }
 210  
 211  /* File */
 212  
 213  .wp-block-file .wp-block-file__button {
 214      background: #e05d22; /* Old browsers */
 215      background: -webkit-linear-gradient(top, #e05d22 0%, #d94412 100%); /* Chrome 10+, Safari 5.1+ */
 216      background:   linear-gradient(to bottom, #e05d22 0%, #d94412 100%); /* W3C */
 217      border: none;
 218      border-radius: 2px;
 219      border-bottom: 3px solid #b93207;
 220      color: #fff;
 221      display: inline-block;
 222      font-size: 16px;
 223      padding: 11px 24px 10px;
 224      text-decoration: none;
 225  }
 226  
 227  .wp-block-file .wp-block-file__button:hover,
 228  .wp-block-file .wp-block-file__button:focus {
 229      background: #ed6a31; /* Old browsers */
 230      background: -webkit-linear-gradient(top, #ed6a31 0%, #e55627 100%); /* Chrome 10+, Safari 5.1+ */
 231      background: linear-gradient(to bottom, #ed6a31 0%, #e55627 100%); /* W3C */
 232      color: #fff;
 233      outline: none;
 234  }
 235  
 236  .wp-block-file .wp-block-file__button:active {
 237      background: #d94412; /* Old browsers */
 238      background: -webkit-linear-gradient(top, #d94412 0%, #e05d22 100%); /* Chrome 10+, Safari 5.1+ */
 239      background:   linear-gradient(to bottom, #d94412 0%, #e05d22 100%); /* W3C */
 240      border: none;
 241      border-top: 3px solid #b93207;
 242      padding: 10px 24px 11px;
 243  }
 244  
 245  /*--------------------------------------------------------------
 246  4.0 Blocks - Formatting
 247  --------------------------------------------------------------*/
 248  
 249  /* Code */
 250  
 251  .wp-block-code {
 252      background-color: transparent;
 253      border: 0;
 254      padding: 0;
 255  }
 256  
 257  /* Pullquote */
 258  
 259  .wp-block-pullquote {
 260      border: 0;
 261      color: inherit;
 262      padding: 0.5em 0;
 263  }
 264  
 265  .wp-block-pullquote__citation,
 266  .wp-block-pullquote cite,
 267  .wp-block-pullquote footer {
 268      color: inherit;
 269  }
 270  
 271  /* Table */
 272  
 273  .wp-block-table {
 274      border-collapse: collapse;
 275      border-spacing: 0;
 276      font-size: 14px;
 277      line-height: 2;
 278      margin: 0 0 20px;
 279      width: 100%;
 280  }
 281  
 282  .wp-block-table th {
 283      border: 0;
 284      font-weight: bold;
 285      text-transform: uppercase;
 286  }
 287  
 288  .wp-block-table td {
 289      border: 0;
 290      border-top: 1px solid #ededed;
 291  }
 292  
 293  .wp-block-table[style*="font-size"] *,
 294  .wp-block-table[class*="-font-size"] * {
 295          font-size: inherit;
 296  }
 297  
 298  body:not(.sidebar) .wp-block-table.alignwide,
 299  body:not(.sidebar) .wp-block-table.alignfull {
 300      width: 100%;
 301  }
 302  
 303  /* Some acrobatics to make sure the table blocks always fill the available space. */
 304  
 305  @media (max-width: 1599px) {
 306      body:not(.sidebar) .wp-block-table.alignwide {
 307          width: calc(302px + 50vw); /* Half the content area width plus half the screen width. */
 308      }
 309  
 310      body:not(.sidebar) .wp-block-table.alignfull {
 311          width: 96vw;
 312      }
 313  }
 314  
 315  @media (max-width: 999px) {
 316      body.sidebar .wp-block-table.alignwide {
 317          width: calc(302px + 50vw); /* Half the content area width plus half the screen width. */
 318      }
 319  
 320      body.sidebar .wp-block-table.alignfull {
 321          width: 96vw;
 322      }
 323  }
 324  
 325  @media (max-width: 654px) {
 326      body:not(.sidebar) .wp-block-table.alignwide,
 327      body.sidebar .wp-block-table.alignwide {
 328          width: 96vw;
 329      }
 330  }
 331  
 332  @media (min-width: 1600px) {
 333      body:not(.sidebar) .wp-block-table.alignwide {
 334          width: 1064px;
 335      }
 336  
 337      body:not(.sidebar) .wp-block-table.alignfull {
 338          width: 1560px;
 339      }
 340  }
 341  
 342  /*--------------------------------------------------------------
 343  5.0 Blocks - Layout Elements
 344  --------------------------------------------------------------*/
 345  
 346  /* Buttons */
 347  
 348  .wp-block-button.alignleft {
 349      margin-right: 20px;
 350  }
 351  
 352  .wp-block-button.alignright {
 353      margin-left: 20px;
 354  }
 355  
 356  .wp-block-button .wp-block-button__link {
 357      border-bottom: 3px solid #b93207;
 358      display: inline-block;
 359      font-size: 16px;
 360      padding: 11px 24px 10px;
 361      text-decoration: none;
 362  }
 363  
 364  .entry-content .wp-block-button__link {
 365      background-color: #e05d22;
 366      color: #fff;
 367  }
 368  
 369  .entry-content .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background) {
 370      background: -webkit-linear-gradient(top, #e05d22 0%, #d94412 100%); /* Chrome 10+, Safari 5.1+ */
 371      background:   linear-gradient(to bottom, #e05d22 0%, #d94412 100%); /* W3C */
 372  }
 373  
 374  .entry-content .wp-block-button__link:hover,
 375  .entry-content .wp-block-button__link:focus,
 376  .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color):hover,
 377  .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color):focus,
 378  .wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):hover,
 379  .wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):focus {
 380      background: #ed6a31;
 381      color: #fff;
 382  }
 383  
 384  .wp-block-button.is-style-outline .wp-block-button__link {
 385      border-width: 2px;
 386      border-color: inherit;
 387  }
 388  
 389  .wp-block-button.is-style-outline .wp-block-button__link:not(.has-background) {
 390      background-color: inherit;
 391  }
 392  
 393  .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color) {
 394      color: #ed6a31;
 395  }
 396  
 397  .entry-content .wp-block-button__link:not(.has-background):hover,
 398  .entry-content .wp-block-button__link:not(.has-background):hover,
 399  .entry-content .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):hover {
 400      background: -webkit-linear-gradient(top, #ed6a31 0%, #e55627 100%); /* Chrome 10+, Safari 5.1+ */
 401      background: linear-gradient(to bottom, #ed6a31 0%, #e55627 100%); /* W3C */
 402  }
 403  
 404  .entry-content .wp-block-button__link:active {
 405      background: #d94412;
 406  }
 407  
 408  .entry-content .wp-block-button__link:not(.has-background):active {
 409      background: -webkit-linear-gradient(top, #d94412 0%, #e05d22 100%); /* Chrome 10+, Safari 5.1+ */
 410      background:   linear-gradient(to bottom, #d94412 0%, #e05d22 100%); /* W3C */
 411  }
 412  
 413  .entry-content .wp-block-button .wp-block-button__link:active {
 414      border: none;
 415      border-top: 3px solid #b93207;
 416      padding: 10px 24px 11px;
 417  }
 418  
 419  .entry-content .wp-block-button.is-style-no-shadow .wp-block-button__link {
 420      border-bottom: none;
 421  }
 422  
 423  /* Separator */
 424  
 425  .wp-block-separator {
 426      border: 0;
 427      max-width: 100px;
 428  }
 429  
 430  .wp-block-separator.is-style-wide,
 431  .wp-block-separator.is-style-dots {
 432      max-width: 100%;
 433  }
 434  
 435  /* Group Block: Default Alignment */
 436  
 437  .wp-block-group,
 438  .wp-block-group.has-background {
 439      margin-bottom: 24px;
 440  }
 441  
 442  .wp-block-group:not(.alignfull):not(.alignwide) > .wp-block-group__inner-container > * {
 443      width: 604px;
 444      max-width: 100%;
 445      margin-left: 0;
 446      margin-right: 0;
 447  }
 448  
 449  .wp-block-group.has-background:not(.alignfull):not(.alignwide) > .wp-block-group__inner-container > .alignfull {
 450      width: calc(100% + 60px);
 451      max-width: calc(100% + 60px);
 452      margin-left: -30px;
 453  }
 454  
 455  .wp-block-group:not(.alignfull) .wp-block-columns.alignfull {
 456      margin-left: auto;
 457      margin-right: auto;
 458  }
 459  
 460  /* Group Block: Wide Alignment */
 461  
 462  .wp-block-group.alignwide > .wp-block-group__inner-container > *,
 463  .wp-block-group.alignwide > .wp-block-group__inner-container > .alignwide,
 464  .wp-block-group.alignwide > .wp-block-group__inner-container > .alignfull {
 465      max-width: 604px;
 466      margin-left: auto;
 467      margin-right: auto;
 468  }
 469  
 470  .wp-block-group.alignwide > .wp-block-group__inner-container > .alignwide,
 471  .wp-block-group.alignwide > .wp-block-group__inner-container > .alignfull {
 472      width: 100%;
 473      max-width: 100%;
 474  }
 475  
 476  .wp-block-group.has-background.alignwide > .wp-block-group__inner-container > .alignfull {
 477      width: calc(100% + 60px);
 478      max-width: calc(100% + 60px);
 479      margin-left: -30px;
 480  }
 481  
 482  @media (max-width: 664px) {
 483      .wp-block-group:not(.has-background).alignwide {
 484          margin-left: 0;
 485          margin-right: 0;
 486      }
 487  
 488      .wp-block-group:not(.has-background).alignwide > .wp-block-group__inner-container > .alignwide,
 489      .wp-block-group:not(.has-background).alignwide > .wp-block-group__inner-container > .alignfull {
 490          width: auto;
 491          max-width: 1600px;
 492          margin-left: calc(25% - 25vw);
 493          margin-right: calc(25% - 25vw);
 494      }
 495  }
 496  
 497  /* Group Block: Full Alignment */
 498  
 499  @media (max-width: 664px) {
 500      .wp-block-group:not(.has-background).alignfull {
 501          margin-left: 0;
 502          margin-right: 0;
 503      }
 504  
 505      .wp-block-group.has-background.alignfull > *:not(.alignfull) {
 506          margin-left: auto;
 507          margin-right: auto;
 508      }
 509  }
 510  
 511  @media (max-width: 999px) {
 512      body.sidebar .wp-block-group.alignfull:not(.has-background) {
 513          margin-left: 0;
 514          margin-right: 0;
 515      }
 516  
 517      body.sidebar .wp-block-group.alignfull.has-background > .wp-block-group__inner-container {
 518          max-width: 604px;
 519          margin: 0 auto;
 520      }
 521  
 522      body.sidebar .wp-block-group.alignfull:not(.has-background) > .wp-block-group__inner-container > .alignfull {
 523          margin-left: calc(50% - 50vw);
 524          margin-right: calc(50% - 50vw);
 525      }
 526  }
 527  
 528  @media (min-width: 665px) {
 529      body:not(.sidebar) .wp-block-group.alignfull,
 530      body:not(.sidebar) .wp-block-group.has-background.alignfull {
 531          padding: 20px calc( (100vw - 604px ) / 2 ); /* Reproduces the padding of entry-content, so that default block rules apply properly inside of this block. */
 532      }
 533  }
 534  
 535  @media (min-width: 1600px) {
 536      body:not(.sidebar) .wp-block-group.alignfull,
 537      body:not(.sidebar) .wp-block-group.has-background.alignfull {
 538          padding: 20px 498px; /* Above 1600px, these need fixed left/right padding. This works out to ((1600px - 604px) / 2) */
 539      }
 540  }
 541  
 542  /* Media & Text */
 543  
 544  .wp-block-media-text {
 545      margin-bottom: 24px;
 546  }
 547  
 548  .wp-block-media-text *:last-child {
 549      margin-bottom: 0;
 550  }
 551  
 552  /* Details */
 553  
 554  .wp-block-details > summary:first-of-type {
 555      display: list-item;
 556  }
 557  
 558  /*--------------------------------------------------------------
 559  6.0 Blocks - Widgets
 560  --------------------------------------------------------------*/
 561  
 562  /* Archives, Categories & Latest Posts */
 563  
 564  .wp-block-archives.aligncenter,
 565  .wp-block-categories.aligncenter,
 566  .wp-block-latest-posts.aligncenter {
 567      list-style-position: inside;
 568      text-align: center;
 569  }
 570  
 571  /* Latest Comments */
 572  
 573  .wp-block-latest-comments {
 574      margin: 0;
 575      padding: 0;
 576  }
 577  
 578  .wp-block-latest-comments .avatar,
 579  .wp-block-latest-comments__comment-avatar {
 580      border-radius: 0;
 581  }
 582  
 583  .wp-block-latest-comments__comment,
 584  .wp-block-latest-comments__comment-excerpt,
 585  .wp-block-latest-comments__comment-excerpt p {
 586      font-size: 16px;
 587  }
 588  
 589  .wp-block-latest-comments__comment-excerpt p:last-child {
 590      margin-bottom: 0;
 591  }
 592  
 593  .wp-block-latest-comments__comment-date {
 594      font-size: 16px;
 595  }
 596  
 597  .wp-block-latest-comments .wp-block-latest-comments__comment:not(:first-child) {
 598      background: url(../images/dotted-line.png) repeat-x left top;
 599      margin-bottom: 0;
 600      padding: 24px 0;
 601  }
 602  
 603  /*--------------------------------------------------------------
 604  7.0 Blocks - Colors
 605  --------------------------------------------------------------*/
 606  
 607  .entry-content .has-dark-gray-color {
 608      color: #141412;
 609  }
 610  
 611  .entry-content .has-dark-gray-background-color {
 612      background-color: #141412;
 613  }
 614  
 615  .entry-content .has-red-color {
 616      color: #bc360a;
 617  }
 618  
 619  .entry-content .has-red-background-color {
 620      background-color: #bc360a;
 621  }
 622  
 623  .entry-content .has-medium-orange-color {
 624      color: #db572f;
 625  }
 626  
 627  .entry-content .has-medium-orange-background-color {
 628      background-color: #db572f;
 629  }
 630  
 631  .entry-content .has-light-orange-color {
 632      color: #ea9629;
 633  }
 634  
 635  .entry-content .has-light-orange-background-color {
 636      background-color: #ea9629;
 637  }
 638  
 639  .entry-content .has-yellow-color {
 640      color: #fbca3c;
 641  }
 642  
 643  .entry-content .has-yellow-background-color {
 644      background-color: #fbca3c;
 645  }
 646  
 647  .entry-content .has-white-color {
 648      color: #fff;
 649  }
 650  
 651  .entry-content .has-white-background-color {
 652      background-color: #fff;
 653  }
 654  
 655  .entry-content .has-dark-brown-color {
 656      color: #220e10;
 657  }
 658  
 659  .entry-content .has-dark-brown-background-color {
 660      background-color: #220e10;
 661  }
 662  
 663  .entry-content .has-medium-brown-color {
 664      color: #722d19;
 665  }
 666  
 667  .entry-content .has-medium-brown-background-color {
 668      background-color: #722d19;
 669  }
 670  
 671  .entry-content .has-light-brown-color {
 672      color: #eadaa6;
 673  }
 674  
 675  .entry-content .has-light-brown-background-color {
 676      background-color: #eadaa6;
 677  }
 678  
 679  .entry-content .has-beige-color {
 680      color: #e8e5ce;
 681  }
 682  
 683  .entry-content .has-beige-background-color {
 684      background-color: #e8e5ce;
 685  }
 686  
 687  .entry-content .has-off-white-color {
 688      color: #f7f5e7;
 689  }
 690  
 691  .entry-content .has-off-white-background-color {
 692      background-color: #f7f5e7;
 693  }