[Summary view] [Print] [Text view]

   1  /*
   2  Theme Name: Twenty Sixteen
   3  Description: Used to style blocks.
   4  */
   5  
   6  /*--------------------------------------------------------------
   7  >>> TABLE OF CONTENTS:
   8  ----------------------------------------------------------------
   9  1.0 General Block Styles
  10  2.0 Blocks - Common Blocks
  11  3.0 Blocks - Formatting
  12  4.0 Blocks - Layout Elements
  13  5.0 Blocks - Widgets
  14  6.0 Blocks - Colors
  15  --------------------------------------------------------------*/
  16  
  17  /*--------------------------------------------------------------
  18  1.0 General Block Styles
  19  --------------------------------------------------------------*/
  20  
  21  /* Captions */
  22  
  23  [class^="wp-block-"] figcaption {
  24      color: #686868;
  25      font-style: italic;
  26      line-height: 1.6153846154;
  27      padding-top: 0.5384615385em;
  28      text-align: left;
  29  }
  30  
  31  .rtl [class^="wp-block-"] figcaption {
  32      text-align: right;
  33  }
  34  
  35  /*--------------------------------------------------------------
  36  2.0 Blocks - Common Blocks
  37  --------------------------------------------------------------*/
  38  
  39  /* Paragraph */
  40  
  41  p.has-drop-cap:not(:focus)::first-letter {
  42      font-size: 5em;
  43  }
  44  
  45  /* Image */
  46  
  47  @media screen and (min-width: 61.5625em) {
  48      body:not(.search-results) article:not(.type-page) .wp-block-image figcaption.below-entry-meta {
  49          clear: both;
  50          display: block;
  51          float: none;
  52          margin-right: 0;
  53          margin-left: -40%;
  54          max-width: 140%;
  55      }
  56  
  57      body.rtl:not(.search-results) article:not(.type-page) .wp-block-image figcaption.below-entry-meta {
  58          margin-left: 0;
  59          margin-right: -40%;
  60      }
  61  
  62      body:not(.search-results) article:not(.type-page) .wp-block-gallery .wp-block-image img.below-entry-meta,
  63      body:not(.search-results) article:not(.type-page) .wp-block-gallery .wp-block-image figcaption.below-entry-meta {
  64          margin: 0;
  65          max-width: 100%;
  66      }
  67  }
  68  
  69  /* Gallery */
  70  
  71  .wp-block-gallery {
  72      margin-bottom: 1.75em;
  73  }
  74  
  75  /* Quote */
  76  
  77  .wp-block-quote {
  78      border-width: 0 0 0 4px;
  79  }
  80   
  81  :where(.rtl) .wp-block-quote {
  82      border-width: 0 4px 0 0;
  83  }
  84  
  85  .wp-block-quote:not(.is-large):not(.is-style-large).alignleft,
  86  .wp-block-quote:not(.is-large):not(.is-style-large).alignright {
  87      border-left: none;
  88      padding-left: 0;
  89  }
  90  
  91  .rtl .wp-block-quote:not(.is-large):not(.is-style-large).alignleft,
  92  .rtl .wp-block-quote:not(.is-large):not(.is-style-large).alignright {
  93      border-right: none;
  94      padding-right: 0;
  95  }
  96  
  97  .wp-block-quote cite {
  98      color: #1a1a1a;
  99      display: block;
 100      font-size: 16px;
 101      font-size: 1rem;
 102      line-height: 1.75;
 103  }
 104  
 105  .wp-block-quote.has-text-color cite {
 106      color: inherit;
 107  }
 108  
 109  .wp-block-quote cite:before {
 110      content: "\2014\00a0";
 111  }
 112  
 113  /* Audio */
 114  
 115  .wp-block-audio audio {
 116      display: block;
 117      width: 100%;
 118  }
 119  
 120  /* Cover */
 121  
 122  .wp-block-cover-image.aligncenter,
 123  .wp-block-cover.aligncenter {
 124      display: flex;
 125  }
 126  
 127  /* File */
 128  
 129  .wp-block-file .wp-block-file__button {
 130      background: #1a1a1a;
 131      border: 0;
 132      border-radius: 2px;
 133      color: #fff;
 134      font-family: Montserrat, "Helvetica Neue", sans-serif;
 135      font-weight: 700;
 136      letter-spacing: 0.046875em;
 137      line-height: 1;
 138      padding: 0.84375em 0.875em 0.78125em;
 139      text-transform: uppercase;
 140  }
 141  
 142  .wp-block-file .wp-block-file__button:hover,
 143  .wp-block-file .wp-block-file__button:focus {
 144      background: #007acc;
 145  }
 146  
 147  .wp-block-file .wp-block-file__button:focus {
 148      outline: thin dotted;
 149      outline-offset: -4px;
 150  }
 151  
 152  .rtl .wp-block-file * + .wp-block-file__button {
 153      margin-left: 0.75em;
 154      margin-right: 0;
 155  }
 156  
 157  /*--------------------------------------------------------------
 158  3.0 Blocks - Formatting Blocks
 159  --------------------------------------------------------------*/
 160  
 161  /* Code */
 162  
 163  .wp-block-code {
 164      border: 0;
 165      font-family: Inconsolata, monospace;
 166      line-height: 1.75;
 167      padding: 0;
 168  }
 169  
 170  .wp-block-code code {
 171      font-size: inherit;
 172  }
 173  
 174  /* Pullquote */
 175  
 176  .wp-block-pullquote {
 177      border-width: 4px;
 178  }
 179  
 180  .wp-block-pullquote blockquote {
 181      color: #686868;
 182      border: 0;
 183      margin: 0;
 184      padding: 0;
 185  }
 186  
 187  .entry-content .wp-block-pullquote blockquote:not(.alignleft):not(.alignright) {
 188      margin-left: 0;
 189      margin-right: 0;
 190  }
 191  
 192  .wp-block-pullquote:where([style*="border-width"]) blockquote {
 193      padding-left: 1rem;
 194      padding-right: 1rem;
 195  }
 196  
 197  .wp-block-pullquote.has-text-color blockquote,
 198  .wp-block-pullquote.has-background blockquote,
 199  .has-background .wp-block-pullquote blockquote,
 200  .wp-block-pullquote.has-text-color cite {
 201      color: inherit;
 202  }
 203  
 204  .wp-block-pullquote p {
 205      font-size: 19px;
 206      font-size: 1.1875rem;
 207  }
 208  
 209  .wp-block-pullquote cite {
 210      color: #1a1a1a;
 211      display: block;
 212      font-size: 16px;
 213      font-size: 1rem;
 214      font-style: normal;
 215      line-height: 1.75;
 216      text-transform: none;
 217  }
 218  
 219  .wp-block-pullquote[class*="-font-size"] blockquote,
 220  .wp-block-pullquote[class*="-font-size"] blockquote p,
 221  .wp-block-pullquote[class*="-font-size"] cite,
 222  .wp-block-pullquote[style*="font-size"] blockquote,
 223  .wp-block-pullquote[style*="font-size"] blockquote p,
 224  .wp-block-pullquote[style*="font-size"] cite {
 225      font-size: inherit;
 226  }
 227  
 228  .wp-block-pullquote[style*="line-height"] blockquote,
 229  .wp-block-pullquote[style*="line-height"] blockquote p,
 230  .wp-block-pullquote[style*="line-height"] cite {
 231      line-height: inherit;
 232  }
 233  
 234  .wp-block-pullquote cite:before {
 235      content: "\2014\00a0";
 236  }
 237  
 238  /* Table */
 239  
 240  .wp-block-table,
 241  .wp-block-table th,
 242  .wp-block-table td {
 243      border: 1px solid #d1d1d1;
 244  }
 245  
 246  .wp-block-table {
 247      border-collapse: separate;
 248      border-spacing: 0;
 249      border-width: 0;
 250      margin: 0 0 1.75em;
 251      table-layout: fixed;
 252      width: 100%;
 253  }
 254  
 255  .wp-block-table th,
 256  .wp-block-table td {
 257      font-weight: normal;
 258      padding: 0.4375em;
 259  }
 260  
 261  .wp-block-table th {
 262      border-width: 0 1px 1px 0;
 263      font-weight: 700;
 264  }
 265  
 266  .wp-block-table td {
 267      border-width: 0 1px 1px 0;
 268  }
 269  
 270  /*--------------------------------------------------------------
 271  4.0 Blocks - Layout Elements
 272  --------------------------------------------------------------*/
 273  
 274  /* Buttons */
 275  
 276  .wp-block-buttons {
 277      font-weight: 700;
 278      letter-spacing: 0.046875em;
 279      line-height: 1;
 280      text-transform: uppercase;
 281  }
 282  
 283  .wp-block-button .wp-block-button__link {
 284      box-shadow: none;
 285      font-family: Montserrat, "Helvetica Neue", sans-serif;
 286      padding: 0.84375em 1.3125em 0.78125em;
 287  }
 288  
 289  .wp-block-button__link {
 290      background: #1a1a1a;
 291      color: #fff;
 292  }
 293  
 294  .is-style-outline .wp-block-button__link:not(.has-background) {
 295      background: transparent;
 296  }
 297  
 298  .is-style-outline .wp-block-button__link:not(.has-text-color) {
 299      color: #1a1a1a;
 300  }
 301  
 302  .wp-block-button .wp-block-button__link:active,
 303  .wp-block-button .wp-block-button__link:focus,
 304  .wp-block-button .wp-block-button__link:hover,
 305  .is-style-outline .wp-block-button__link:not(.has-background):active,
 306  .is-style-outline .wp-block-button__link:not(.has-background):hover,
 307  .is-style-outline .wp-block-button__link:not(.has-background):focus,
 308  .is-style-outline .wp-block-button__link:not(.has-text-color):active,
 309  .is-style-outline .wp-block-button__link:not(.has-text-color):hover,
 310  .is-style-outline .wp-block-button__link:not(.has-text-color):focus {
 311      background: #007acc;
 312      color: #fff;
 313  }
 314  
 315  .wp-block-button .wp-block-button__link:focus {
 316      outline: thin dotted;
 317      outline-offset: -4px;
 318  }
 319  
 320  /* Separator */
 321  
 322  hr.wp-block-separator {
 323      border: 0;
 324  }
 325  
 326  .wp-block-separator {
 327      margin-left: auto;
 328      margin-right: auto;
 329      max-width: 100px;
 330  }
 331  
 332  .wp-block-separator.is-style-wide,
 333  .wp-block-separator.is-style-dots {
 334      max-width: 100%;
 335  }
 336  
 337  /* Media & Text */
 338  
 339  .wp-block-media-text {
 340      margin-bottom: 1.75em;
 341  }
 342  
 343  .wp-block-media-text *:last-child {
 344      margin-bottom: 0;
 345  }
 346  
 347  /* Details */
 348  
 349  .wp-block-details > summary:first-of-type {
 350      display: list-item;
 351  }
 352  
 353  /*--------------------------------------------------------------
 354  5.0 Blocks - Widget Blocks
 355  --------------------------------------------------------------*/
 356  
 357  /* Archives, Categories & Latest Posts */
 358  
 359  .wp-block-archives.aligncenter,
 360  .wp-block-categories.aligncenter,
 361  .wp-block-latest-posts.aligncenter {
 362      list-style-position: inside;
 363      text-align: center;
 364  }
 365  
 366  /* Latest Comments */
 367  
 368  .wp-block-latest-comments__comment-meta a {
 369      box-shadow: none;
 370      font-weight: 700;
 371  }
 372  
 373  .wp-block-latest-comments__comment-date {
 374      color: #686868;
 375      font-family: Montserrat, "Helvetica Neue", sans-serif;
 376      font-size: 13px;
 377      font-size: 0.8125rem;
 378      line-height: 1.6153846154;
 379  }
 380  
 381  .wp-block-latest-comments .wp-block-latest-comments__comment:not(:first-child) {
 382      border-top: 1px solid #d1d1d1;
 383      margin-bottom: 0;
 384      padding: 1.75em 0;
 385  }
 386  
 387  .wp-block-latest-comments__comment-excerpt p:last-child {
 388      margin-bottom: 0;
 389  }
 390  
 391  /* Query Loop & Post Template */
 392  
 393  .wp-block-query .wp-block-post-template {
 394      margin-left: 0;
 395  }
 396  
 397  .wp-block-query .wp-block-post-template li {
 398      margin-bottom: 0;
 399      padding: 1.5em 0 0;
 400  }
 401  
 402  .wp-block-query .wp-block-post-template li:not(:first-child) {
 403      border-top: 1px solid #d1d1d1;
 404  }
 405  
 406  /*--------------------------------------------------------------
 407  6.0 Blocks - Colors
 408  --------------------------------------------------------------*/
 409  
 410  .has-dark-gray-color {
 411      color: #1a1a1a;
 412  }
 413  
 414  .has-dark-gray-background-color {
 415      background-color: #1a1a1a;
 416  }
 417  
 418  .has-dark-gray-border-color {
 419      border-color: #1a1a1a;
 420  }
 421  
 422  .has-medium-gray-color {
 423      color: #686868;
 424  }
 425  
 426  .has-medium-gray-background-color {
 427      background-color: #686868;
 428  }
 429  
 430  .has-medium-gray-border-color {
 431      border-color: #686868;
 432  }
 433  
 434  .has-light-gray-color {
 435      color: #e5e5e5;
 436  }
 437  
 438  .has-light-gray-background-color {
 439      background-color: #e5e5e5;
 440  }
 441  
 442  .has-light-gray-border-color {
 443      border-color: #e5e5e5;
 444  }
 445  
 446  .has-white-color {
 447      color: #fff;
 448  }
 449  
 450  .has-white-background-color {
 451      background-color: #fff;
 452  }
 453  
 454  .has-white-border-color {
 455      border-color: #fff;
 456  }
 457  
 458  .has-blue-gray-color {
 459      color: #4d545c;
 460  }
 461  
 462  .has-blue-gray-background-color {
 463      background-color: #4d545c;
 464  }
 465  
 466  .has-blue-gray-border-color {
 467      border-color: #4d545c;
 468  }
 469  
 470  .has-bright-blue-color {
 471      color: #007acc;
 472  }
 473  
 474  .has-bright-blue-background-color {
 475      background-color: #007acc;
 476  }
 477  
 478  .has-bright-blue-border-color {
 479      border-color: #007acc;
 480  }
 481  
 482  .has-light-blue-color {
 483      color: #9adffd;
 484  }
 485  
 486  .has-light-blue-background-color {
 487      background-color: #9adffd;
 488  }
 489  
 490  .has-light-blue-border-color {
 491      border-color: #9adffd;
 492  }
 493  
 494  .has-dark-brown-color {
 495      color: #402b30;
 496  }
 497  
 498  .has-dark-brown-background-color {
 499      background-color: #402b30;
 500  }
 501  
 502  .has-dark-brown-border-color {
 503      border-color: #402b30;
 504  }
 505  
 506  .has-medium-brown-color {
 507      color: #774e24;
 508  }
 509  
 510  .has-medium-brown-background-color {
 511      background-color: #774e24;
 512  }
 513  
 514  .has-medium-brown-border-color {
 515      border-color: #774e24;
 516  }
 517  
 518  .has-dark-red-color {
 519      color: #640c1f;
 520  }
 521  
 522  .has-dark-red-background-color {
 523      background-color: #640c1f;
 524  }
 525  
 526  .has-dark-red-border-color {
 527      border-color: #640c1f;
 528  }
 529  
 530  .has-bright-red-color {
 531      color: #ff675f;
 532  }
 533  
 534  .has-bright-red-background-color {
 535      background-color: #ff675f;
 536  }
 537  
 538  .has-bright-red-border-color {
 539      border-color: #ff675f;
 540  }
 541  
 542  .has-yellow-color {
 543      color: #ffef8e;
 544  }
 545  
 546  .has-yellow-background-color {
 547      background-color: #ffef8e;
 548  }
 549  
 550  .has-yellow-border-color {
 551      border-color: #ffef8e;
 552  }