[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:not(.is-large):not(.is-style-large).alignleft,
  78  .wp-block-quote:not(.is-large):not(.is-style-large).alignright {
  79      border-left: none;
  80      padding-left: 0;
  81  }
  82  
  83  .rtl .wp-block-quote:not(.is-large):not(.is-style-large).alignleft,
  84  .rtl .wp-block-quote:not(.is-large):not(.is-style-large).alignright {
  85      border-right: none;
  86      padding-right: 0;
  87  }
  88  
  89  .wp-block-quote cite {
  90      color: #1a1a1a;
  91      display: block;
  92      font-size: 16px;
  93      font-size: 1rem;
  94      line-height: 1.75;
  95  }
  96  
  97  .wp-block-quote.has-text-color cite {
  98      color: inherit;
  99  }
 100  
 101  .wp-block-quote cite:before {
 102      content: "\2014\00a0";
 103  }
 104  
 105  /* Audio */
 106  
 107  .wp-block-audio audio {
 108      display: block;
 109      width: 100%;
 110  }
 111  
 112  /* Cover */
 113  
 114  .wp-block-cover-image.aligncenter,
 115  .wp-block-cover.aligncenter {
 116      display: flex;
 117  }
 118  
 119  /* File */
 120  
 121  .wp-block-file .wp-block-file__button {
 122      background: #1a1a1a;
 123      border: 0;
 124      border-radius: 2px;
 125      color: #fff;
 126      font-family: Montserrat, "Helvetica Neue", sans-serif;
 127      font-weight: 700;
 128      letter-spacing: 0.046875em;
 129      line-height: 1;
 130      padding: 0.84375em 0.875em 0.78125em;
 131      text-transform: uppercase;
 132  }
 133  
 134  .wp-block-file .wp-block-file__button:hover,
 135  .wp-block-file .wp-block-file__button:focus {
 136      background: #007acc;
 137  }
 138  
 139  .wp-block-file .wp-block-file__button:focus {
 140      outline: thin dotted;
 141      outline-offset: -4px;
 142  }
 143  
 144  .rtl .wp-block-file * + .wp-block-file__button {
 145      margin-left: 0.75em;
 146      margin-right: 0;
 147  }
 148  
 149  /*--------------------------------------------------------------
 150  3.0 Blocks - Formatting Blocks
 151  --------------------------------------------------------------*/
 152  
 153  /* Code */
 154  
 155  .wp-block-code {
 156      border: 0;
 157      font-family: Inconsolata, monospace;
 158      line-height: 1.75;
 159      padding: 0;
 160  }
 161  
 162  .wp-block-code code {
 163      font-size: inherit;
 164  }
 165  
 166  /* Pullquote */
 167  
 168  .wp-block-pullquote {
 169      border-width: 4px;
 170  }
 171  
 172  .wp-block-pullquote blockquote {
 173      color: #686868;
 174      border-left: 4px solid #1a1a1a;
 175      margin: 0;
 176      padding: 0 0 0 24px;
 177  }
 178  
 179  .rtl .wp-block-pullquote blockquote {
 180      border-left: none;
 181      border-right: 4px solid #1a1a1a;
 182      padding: 0 24px 0 0;
 183  }
 184  
 185  .wp-block-pullquote.has-text-color blockquote,
 186  .wp-block-pullquote.has-background blockquote,
 187  .has-background .wp-block-pullquote blockquote,
 188  .wp-block-pullquote.has-text-color cite {
 189      color: inherit;
 190  }
 191  
 192  .wp-block-pullquote p {
 193      font-size: 19px;
 194      font-size: 1.1875rem;
 195  }
 196  
 197  .wp-block-pullquote cite {
 198      color: #1a1a1a;
 199      display: block;
 200      font-size: 16px;
 201      font-size: 1rem;
 202      font-style: normal;
 203      line-height: 1.75;
 204      text-transform: none;
 205  }
 206  
 207  .wp-block-pullquote cite:before {
 208      content: "\2014\00a0";
 209  }
 210  
 211  /* Table */
 212  
 213  .wp-block-table,
 214  .wp-block-table th,
 215  .wp-block-table td {
 216      border: 1px solid #d1d1d1;
 217  }
 218  
 219  .wp-block-table {
 220      border-collapse: separate;
 221      border-spacing: 0;
 222      border-width: 0;
 223      margin: 0 0 1.75em;
 224      table-layout: fixed;
 225      width: 100%;
 226  }
 227  
 228  .wp-block-table th,
 229  .wp-block-table td {
 230      font-weight: normal;
 231      padding: 0.4375em;
 232  }
 233  
 234  .wp-block-table th {
 235      border-width: 0 1px 1px 0;
 236      font-weight: 700;
 237  }
 238  
 239  .wp-block-table td {
 240      border-width: 0 1px 1px 0;
 241  }
 242  
 243  /*--------------------------------------------------------------
 244  4.0 Blocks - Layout Elements
 245  --------------------------------------------------------------*/
 246  
 247  /* Buttons */
 248  
 249  .wp-block-button .wp-block-button__link {
 250      box-shadow: none;
 251      font-family: Montserrat, "Helvetica Neue", sans-serif;
 252      font-weight: 700;
 253      letter-spacing: 0.046875em;
 254      line-height: 1;
 255      padding: 0.84375em 1.3125em 0.78125em;
 256      text-transform: uppercase;
 257  }
 258  
 259  .wp-block-buttons[style*="text-transform"] .wp-block-button__link,
 260  .wp-block-button[style*="text-transform"] .wp-block-button__link {
 261      text-transform: inherit;
 262  }
 263  
 264  .wp-block-button__link {
 265      background: #1a1a1a;
 266      color: #fff;
 267  }
 268  
 269  .is-style-outline .wp-block-button__link:not(.has-background) {
 270      background: transparent;
 271  }
 272  
 273  .is-style-outline .wp-block-button__link:not(.has-text-color) {
 274      color: #1a1a1a;
 275  }
 276  
 277  .wp-block-button .wp-block-button__link:active,
 278  .wp-block-button .wp-block-button__link:focus,
 279  .wp-block-button .wp-block-button__link:hover,
 280  .is-style-outline .wp-block-button__link:not(.has-background):active,
 281  .is-style-outline .wp-block-button__link:not(.has-background):hover,
 282  .is-style-outline .wp-block-button__link:not(.has-background):focus,
 283  .is-style-outline .wp-block-button__link:not(.has-text-color):active,
 284  .is-style-outline .wp-block-button__link:not(.has-text-color):hover,
 285  .is-style-outline .wp-block-button__link:not(.has-text-color):focus {
 286      background: #007acc;
 287      color: #fff;
 288  }
 289  
 290  .wp-block-button .wp-block-button__link:focus {
 291      outline: thin dotted;
 292      outline-offset: -4px;
 293  }
 294  
 295  /* Separator */
 296  
 297  hr.wp-block-separator {
 298      border: 0;
 299  }
 300  
 301  .wp-block-separator {
 302      margin-left: auto;
 303      margin-right: auto;
 304      max-width: 100px;
 305  }
 306  
 307  .wp-block-separator.is-style-wide,
 308  .wp-block-separator.is-style-dots {
 309      max-width: 100%;
 310  }
 311  
 312  /* Media & Text */
 313  
 314  .wp-block-media-text {
 315      margin-bottom: 1.75em;
 316  }
 317  
 318  .wp-block-media-text *:last-child {
 319      margin-bottom: 0;
 320  }
 321  
 322  /* Details */
 323  
 324  .wp-block-details > summary:first-of-type {
 325      display: list-item;
 326  }
 327  
 328  /*--------------------------------------------------------------
 329  5.0 Blocks - Widget Blocks
 330  --------------------------------------------------------------*/
 331  
 332  /* Archives, Categories & Latest Posts */
 333  
 334  .wp-block-archives.aligncenter,
 335  .wp-block-categories.aligncenter,
 336  .wp-block-latest-posts.aligncenter {
 337      list-style-position: inside;
 338      text-align: center;
 339  }
 340  
 341  /* Latest Comments */
 342  
 343  .wp-block-latest-comments__comment-meta a {
 344      box-shadow: none;
 345      font-weight: 700;
 346  }
 347  
 348  .wp-block-latest-comments__comment-date {
 349      color: #686868;
 350      font-family: Montserrat, "Helvetica Neue", sans-serif;
 351      font-size: 13px;
 352      font-size: 0.8125rem;
 353      line-height: 1.6153846154;
 354  }
 355  
 356  .wp-block-latest-comments .wp-block-latest-comments__comment:not(:first-child) {
 357      border-top: 1px solid #d1d1d1;
 358      margin-bottom: 0;
 359      padding: 1.75em 0;
 360  }
 361  
 362  .wp-block-latest-comments__comment-excerpt p:last-child {
 363      margin-bottom: 0;
 364  }
 365  
 366  /* Query Loop & Post Template */
 367  
 368  .wp-block-query .wp-block-post-template {
 369      margin-left: 0;
 370  }
 371  
 372  .wp-block-query .wp-block-post-template li {
 373      margin-bottom: 0;
 374      padding: 1.5em 0 0;
 375  }
 376  
 377  .wp-block-query .wp-block-post-template li:not(:first-child) {
 378      border-top: 1px solid #d1d1d1;
 379  }
 380  
 381  /*--------------------------------------------------------------
 382  6.0 Blocks - Colors
 383  --------------------------------------------------------------*/
 384  
 385  .has-dark-gray-color {
 386      color: #1a1a1a;
 387  }
 388  
 389  .has-dark-gray-background-color {
 390      background-color: #1a1a1a;
 391  }
 392  
 393  .has-medium-gray-color {
 394      color: #686868;
 395  }
 396  
 397  .has-medium-gray-background-color {
 398      background-color: #686868;
 399  }
 400  
 401  .has-light-gray-color {
 402      color: #e5e5e5;
 403  }
 404  
 405  .has-light-gray-background-color {
 406      background-color: #e5e5e5;
 407  }
 408  
 409  .has-white-color {
 410      color: #fff;
 411  }
 412  
 413  .has-white-background-color {
 414      background-color: #fff;
 415  }
 416  
 417  .has-blue-gray-color {
 418      color: #4d545c;
 419  }
 420  
 421  .has-blue-gray-background-color {
 422      background-color: #4d545c;
 423  }
 424  
 425  .has-bright-blue-color {
 426      color: #007acc;
 427  }
 428  
 429  .has-bright-blue-background-color {
 430      background-color: #007acc;
 431  }
 432  
 433  .has-light-blue-color {
 434      color: #9adffd;
 435  }
 436  
 437  .has-light-blue-background-color {
 438      background-color: #9adffd;
 439  }
 440  
 441  .has-dark-brown-color {
 442      color: #402b30;
 443  }
 444  
 445  .has-dark-brown-background-color {
 446      background-color: #402b30;
 447  }
 448  
 449  .has-medium-brown-color {
 450      color: #774e24;
 451  }
 452  
 453  .has-medium-brown-background-color {
 454      background-color: #774e24;
 455  }
 456  
 457  .has-dark-red-color {
 458      color: #640c1f;
 459  }
 460  
 461  .has-dark-red-background-color {
 462      background-color: #640c1f;
 463  }
 464  
 465  .has-bright-red-color {
 466      color: #ff675f;
 467  }
 468  
 469  .has-bright-red-background-color {
 470      background-color: #ff675f;
 471  }
 472  
 473  .has-yellow-color {
 474      color: #ffef8e;
 475  }
 476  
 477  .has-yellow-background-color {
 478      background-color: #ffef8e;
 479  }