Oops! That page can’t be found.
11 |It looks like nothing was found at this location.
15 |├── .babelrc ├── .editorconfig ├── .gitignore ├── README.md ├── composer.json ├── css ├── editor-style.css ├── ie.css ├── ie7.css └── ie8.css ├── functions.php ├── genericons ├── COPYING.txt ├── Genericons.eot ├── Genericons.svg ├── Genericons.ttf ├── Genericons.woff ├── LICENSE.txt ├── README.md └── genericons.css ├── inc ├── customizer.php └── template-tags.php ├── index.php ├── js ├── color-scheme-control.js ├── customize-preview.js ├── functions.js ├── html5.js ├── keyboard-image-navigation.js ├── skip-link-focus-fix.js └── src │ ├── actions │ └── index.js │ ├── client.js │ ├── components │ ├── 404.jsx │ ├── App.jsx │ ├── Comments.jsx │ ├── Footer.jsx │ ├── Header.jsx │ ├── NavMenu.jsx │ ├── Post.jsx │ ├── River.jsx │ ├── Sidebar.jsx │ └── Single.jsx │ ├── includes.js │ ├── reducer.js │ └── server.js ├── package.json ├── screenshot.png ├── searchform.php ├── style.css └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets" : ["es2015", "react"] 3 | } 4 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | 7 | [*.{php,js,jsx,css,scss}] 8 | end_of_line = lf 9 | insert_final_newline = true 10 | indent_style = tab 11 | indent_size = 4 12 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | vendor 3 | .DS_Store 4 | js/client.js 5 | js/server.js 6 | js/includes.js -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Twenty Sixteen React 2 | 3 | Twenty Sixteen React is an isomorphic WordPress theme built using [NodeifyWP](https://github.com/10up/nodeifywp). The theme executes Node.js code directly in PHP utilizing the latest JavaScript technologies: 4 | 5 | * [React.js](https://facebook.github.io/react/) 6 | * [Redux](http://redux.js.org/docs/introduction/) 7 | * [NodeifyWP](https://github.com/10up/nodeifywp/) 8 | 9 | 10 | Twenty Sixteen React is a __true isomorphic application__ within PHP. It provides all the benefits of WordPress and powerful isomorphic Node.js technologies. No separate Node.js/Express server is necessary. 11 | 12 |
15 | 16 | ## Requirements 17 | 18 | * [NodeifyWP Environment](https://github.com/10up/nodeifywp-environment) 19 | * [NodeifyWP](https://github.com/10up/nodeifywp) 20 | * [npm](https://www.npmjs.com/) 21 | 22 | ## Setup 23 | 24 | After properly setting up the [NodeifyWP environment](https://github.com/10up/nodeifywp-environment): 25 | 26 | 1. Activate the theme in WordPress 27 | 2. Within the theme directory, run the following in the command line: 28 | 29 | `npm install` 30 | 31 | 3. Enable pretty permalinks in the WordPress admin. 32 | 33 | ## License 34 | 35 | This is free software; you can redistribute it and/or modify it under the terms of the [GNU General Public License](http://www.gnu.org/licenses/gpl-2.0.html) as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version. 36 | -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "10up/twentysixteenreact", 3 | "type": "wordpress-theme", 4 | "description": "Twenty Sixteen is a WordPress theme and an isomorphic React.js application using NodeifyWP.", 5 | "license": "GPLv2", 6 | "type": "wordpress-theme", 7 | "authors": [ 8 | { 9 | "name": "Taylor Lovett, 10up", 10 | "email": "taylor.lovett@10up.com" 11 | } 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /css/editor-style.css: -------------------------------------------------------------------------------- 1 | /* 2 | Theme Name: Twenty Sixteen 3 | Description: Used to style the TinyMCE editor. 4 | */ 5 | 6 | 7 | /** 8 | * Table of Contents: 9 | * 10 | * 1.0 - Body 11 | * 2.0 - Typography 12 | * 3.0 - Elements 13 | * 4.0 - Alignment 14 | * 5.0 - Caption 15 | * 6.0 - Galleries 16 | * 7.0 - Audio / Video 17 | * 8.0 - RTL 18 | */ 19 | 20 | 21 | /** 22 | * 1.0 - Body 23 | */ 24 | 25 | body { 26 | color: #1a1a1a; 27 | font-family: Merriweather, Georgia, serif; 28 | font-size: 16px; 29 | font-weight: 400; 30 | line-height: 1.75; 31 | margin: 20px 40px; 32 | max-width: 600px; 33 | vertical-align: baseline; 34 | } 35 | 36 | body.post-type-page { 37 | max-width: 840px; 38 | } 39 | 40 | 41 | /** 42 | * 2.0 - Typography 43 | */ 44 | 45 | h1, 46 | h2, 47 | h3, 48 | h4, 49 | h5, 50 | h6 { 51 | clear: both; 52 | font-weight: 900; 53 | margin: 56px 0 28px; 54 | } 55 | 56 | h1 { 57 | font-size: 33px; 58 | line-height: 1.2727272727; 59 | } 60 | 61 | h2 { 62 | font-size: 28px; 63 | line-height: 1.25; 64 | } 65 | 66 | h3 { 67 | font-size: 23px; 68 | line-height: 1.2173913043; 69 | } 70 | 71 | h4, 72 | h5, 73 | h6 { 74 | font-size: 19px; 75 | line-height: 1.1052631579; 76 | } 77 | 78 | h4 { 79 | letter-spacing: 0.13333em; 80 | text-transform: uppercase; 81 | } 82 | 83 | h6 { 84 | font-style: italic; 85 | } 86 | 87 | h1:first-child, 88 | h2:first-child, 89 | h3:first-child, 90 | h4:first-child, 91 | h5:first-child, 92 | h6:first-child { 93 | margin-top: 0; 94 | } 95 | 96 | p { 97 | margin: 0 0 28px; 98 | } 99 | 100 | b, 101 | strong { 102 | font-weight: 700; 103 | } 104 | 105 | dfn, 106 | cite, 107 | em, 108 | i { 109 | font-style: italic; 110 | } 111 | 112 | blockquote { 113 | border-left: 4px solid #1a1a1a; 114 | color: #686868; 115 | font-size: 19px; 116 | font-style: italic; 117 | line-height: 1.4736842105; 118 | margin-bottom: 28px; 119 | overflow: hidden; 120 | padding: 0 0 0 24px; 121 | } 122 | 123 | blockquote:not(.alignleft):not(.alignright) { 124 | margin-left: -28px; 125 | } 126 | 127 | blockquote blockquote:not(.alignleft):not(.alignright) { 128 | margin-left: 0; 129 | } 130 | 131 | blockquote:before, 132 | blockquote:after { 133 | content: ""; 134 | display: table; 135 | } 136 | 137 | blockquote:after { 138 | clear: both; 139 | } 140 | 141 | blockquote > :last-child { 142 | margin-bottom: 0; 143 | } 144 | 145 | blockquote cite, 146 | blockquote small { 147 | color: #1a1a1a; 148 | font-size: 16px; 149 | line-height: 1.75; 150 | } 151 | 152 | blockquote em, 153 | blockquote i, 154 | blockquote cite { 155 | font-style: normal; 156 | } 157 | 158 | blockquote strong, 159 | blockquote b { 160 | font-weight: 400; 161 | } 162 | 163 | blockquote.alignleft, 164 | blockquote.alignright { 165 | border: 0 solid #1a1a1a; 166 | border-top-width: 4px; 167 | padding: 18px 0 0; 168 | width: -webkit-calc(50% - 14px); 169 | width: calc(50% - 14px); 170 | } 171 | 172 | address { 173 | font-style: italic; 174 | margin: 0 0 28px; 175 | } 176 | 177 | code, 178 | kbd, 179 | tt, 180 | var, 181 | samp, 182 | pre { 183 | font-family: Inconsolata, monospace; 184 | } 185 | 186 | pre { 187 | border: 1px solid #d1d1d1; 188 | font-size: 16px; 189 | line-height: 1.3125; 190 | margin: 0 0 28px; 191 | max-width: 100%; 192 | overflow: auto; 193 | padding: 14px; 194 | white-space: pre; 195 | white-space: pre-wrap; 196 | word-wrap: break-word; 197 | } 198 | 199 | code { 200 | background-color: #d1d1d1; 201 | padding: 2px 4px; 202 | } 203 | 204 | abbr[title] { 205 | border-bottom: 1px dotted #d1d1d1; 206 | cursor: help; 207 | } 208 | 209 | mark, 210 | ins { 211 | background: #007acc; 212 | color: #fff; 213 | padding: 2px 4px; 214 | text-decoration: none; 215 | } 216 | 217 | sup, 218 | sub { 219 | font-size: 75%; 220 | height: 0; 221 | line-height: 0; 222 | position: relative; 223 | vertical-align: baseline; 224 | } 225 | 226 | sub { 227 | top: -6px; 228 | } 229 | 230 | sup { 231 | bottom: -3px; 232 | } 233 | 234 | small { 235 | font-size: 80%; 236 | } 237 | 238 | big { 239 | font-size: 125%; 240 | } 241 | 242 | 243 | /** 244 | * 3.0 - Elements 245 | */ 246 | 247 | hr { 248 | background-color: #d1d1d1; 249 | border: 0; 250 | height: 1px; 251 | margin-bottom: 28px; 252 | } 253 | 254 | ul, 255 | ol { 256 | margin: 0 0 28px 0; 257 | padding: 0; 258 | } 259 | 260 | ul { 261 | list-style: disc; 262 | } 263 | 264 | ol { 265 | list-style: decimal; 266 | } 267 | 268 | li > ul, 269 | li > ol { 270 | margin-bottom: 0; 271 | } 272 | 273 | li > ul, 274 | blockquote > ul { 275 | margin-left: 20px; 276 | } 277 | 278 | li > ol, 279 | blockquote > ol { 280 | margin-left: 24px; 281 | } 282 | 283 | dl { 284 | margin: 0 0 28px; 285 | } 286 | 287 | dt { 288 | font-weight: bold; 289 | } 290 | 291 | dd { 292 | margin: 0 0 28px; 293 | } 294 | 295 | table, 296 | th, 297 | td, 298 | .mce-item-table, 299 | .mce-item-table th, 300 | .mce-item-table td { 301 | border: 1px solid #d1d1d1; 302 | } 303 | 304 | table a { 305 | color: #007acc; 306 | } 307 | 308 | table, 309 | .mce-item-table { 310 | border-collapse: separate; 311 | border-spacing: 0; 312 | border-width: 1px 0 0 1px; 313 | margin: 0 0 28px; 314 | width: 100%; 315 | } 316 | 317 | table th, 318 | .mce-item-table th, 319 | table caption { 320 | border-width: 0 1px 1px 0; 321 | font-size: 16px; 322 | font-weight: 700; 323 | padding: 7px; 324 | text-align: left; 325 | vertical-align: baseline; 326 | } 327 | 328 | table td, 329 | .mce-item-table td { 330 | border-width: 0 1px 1px 0; 331 | font-size: 16px; 332 | padding: 7px; 333 | vertical-align: baseline; 334 | } 335 | 336 | img { 337 | border: 0; 338 | height: auto; 339 | max-width: 100%; 340 | vertical-align: middle; 341 | } 342 | 343 | a img { 344 | display: block; 345 | } 346 | 347 | figure { 348 | margin: 0; 349 | } 350 | 351 | del { 352 | opacity: 0.8; 353 | } 354 | 355 | a { 356 | box-shadow: 0 1px 0 0 currentColor; 357 | color: #007acc; 358 | text-decoration: none; 359 | } 360 | 361 | fieldset { 362 | border: 1px solid #d1d1d1; 363 | margin: 0 0 28px; 364 | padding: 14px; 365 | } 366 | 367 | 368 | /** 369 | * 4.0 - Alignment 370 | */ 371 | 372 | .alignleft { 373 | float: left; 374 | margin: 6px 28px 28px 0; 375 | } 376 | 377 | .alignright { 378 | float: right; 379 | margin: 6px 0 28px 28px; 380 | } 381 | 382 | .aligncenter { 383 | clear: both; 384 | display: block; 385 | margin: 0 auto 28px; 386 | } 387 | 388 | 389 | /** 390 | * 5.0 - Caption 391 | */ 392 | 393 | .wp-caption { 394 | background: transparent; 395 | border: none; 396 | margin-bottom: 28px; 397 | max-width: 100%; 398 | padding: 0; 399 | text-align: inherit; 400 | } 401 | 402 | .wp-caption-text, 403 | .wp-caption-dd { 404 | color: #686868; 405 | font-size: 13px; 406 | font-style: italic; 407 | line-height: 1.6153846154; 408 | padding-top: 7px; 409 | } 410 | 411 | 412 | /** 413 | * 6.0 - Galleries 414 | */ 415 | 416 | .mce-content-body .wpview-wrap { 417 | margin-bottom: 28px; 418 | } 419 | 420 | .gallery { 421 | margin: 0 -1.1666667%; 422 | padding: 0; 423 | } 424 | 425 | .gallery .gallery-item { 426 | display: inline-block; 427 | max-width: 33.33%; 428 | padding: 0 1.1400652% 2.2801304%; 429 | text-align: center; 430 | vertical-align: top; 431 | width: 100%; 432 | } 433 | 434 | .gallery-columns-1 .gallery-item { 435 | max-width: 100%; 436 | } 437 | 438 | .gallery-columns-2 .gallery-item { 439 | max-width: 50%; 440 | } 441 | 442 | .gallery-columns-4 .gallery-item { 443 | max-width: 25%; 444 | } 445 | 446 | .gallery-columns-5 .gallery-item { 447 | max-width: 20%; 448 | } 449 | 450 | .gallery-columns-6 .gallery-item { 451 | max-width: 16.66%; 452 | } 453 | 454 | .gallery-columns-7 .gallery-item { 455 | max-width: 14.28%; 456 | } 457 | 458 | .gallery-columns-8 .gallery-item { 459 | max-width: 12.5%; 460 | } 461 | 462 | .gallery-columns-9 .gallery-item { 463 | max-width: 11.11%; 464 | } 465 | 466 | .gallery .gallery-caption { 467 | font-size: 13px; 468 | margin: 0; 469 | } 470 | 471 | .gallery-columns-6 .gallery-caption, 472 | .gallery-columns-7 .gallery-caption, 473 | .gallery-columns-8 .gallery-caption, 474 | .gallery-columns-9 .gallery-caption { 475 | display: none; 476 | } 477 | 478 | 479 | /** 480 | * 7.0 - Audio / Video 481 | */ 482 | 483 | .wp-audio-shortcode a, 484 | .wp-playlist a { 485 | box-shadow: none; 486 | } 487 | 488 | .mce-content-body .wp-audio-playlist { 489 | margin: 0; 490 | padding-bottom: 0; 491 | } 492 | 493 | .mce-content-body .wp-playlist-tracks { 494 | margin-top: 0; 495 | } 496 | 497 | .mce-content-body .wp-playlist-item { 498 | padding: 10px 0; 499 | } 500 | 501 | .mce-content-body .wp-playlist-item-length { 502 | top: 10px; 503 | } 504 | 505 | 506 | /** 507 | * 8.0 - RTL 508 | */ 509 | 510 | .rtl blockquote { 511 | border: 0 solid #1a1a1a; 512 | border-right-width: 4px; 513 | } 514 | 515 | .rtl blockquote.alignleft, 516 | .rtl blockquote.alignright { 517 | border: 0 solid #1a1a1a; 518 | border-top-width: 4px; 519 | } 520 | 521 | .rtl blockquote:not(.alignleft):not(.alignright) { 522 | margin-right: -28px; 523 | padding: 0 24px 0 0; 524 | } 525 | 526 | .rtl blockquote blockquote:not(.alignleft):not(.alignright) { 527 | margin-right: 0; 528 | margin-left: auto; 529 | } 530 | 531 | .rtl li > ul, 532 | .rtl blockquote > ul { 533 | margin-right: 20px; 534 | margin-left: auto; 535 | } 536 | 537 | .rtl li > ol, 538 | .rtl blockquote > ol { 539 | margin-right: 24px; 540 | margin-left: auto; 541 | } 542 | 543 | .rtl table th, 544 | .rtl .mce-item-table th, 545 | .rtl table caption { 546 | text-align: right; 547 | } 548 | -------------------------------------------------------------------------------- /css/ie.css: -------------------------------------------------------------------------------- 1 | /* 2 | Theme Name: Twenty Sixteen 3 | Description: Global Styles for older IE versions (previous to IE10). 4 | */ 5 | 6 | .site-header-main:before, 7 | .site-header-main:after, 8 | .site-footer:before, 9 | .site-footer:after { 10 | content: ""; 11 | display: table; 12 | } 13 | 14 | .site-header-main:after, 15 | .site-footer:after { 16 | clear: both; 17 | } 18 | 19 | @media screen and (min-width: 56.875em) { 20 | .site-branding, 21 | .site-info { 22 | float: left; 23 | } 24 | 25 | .site-header-menu, 26 | .site-footer .social-navigation { 27 | float: right; 28 | } 29 | 30 | .site-footer .social-navigation { 31 | margin-left: 7px; 32 | } 33 | 34 | .rtl .site-branding, 35 | .rtl .site-info { 36 | float: right; 37 | } 38 | 39 | .rtl .site-header-menu, 40 | .rtl .site-footer .social-navigation { 41 | float: left; 42 | } 43 | 44 | .rtl .site-footer .social-navigation { 45 | margin-right: 7px; 46 | margin-left: 0; 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /css/ie7.css: -------------------------------------------------------------------------------- 1 | /* 2 | Theme Name: Twenty Sixteen 3 | Description: IE7 specific style. 4 | */ 5 | 6 | .site-inner { 7 | max-width: 656px; 8 | } 9 | 10 | .post-navigation, 11 | .pagination, 12 | .image-navigation, 13 | .entry-header, 14 | .entry-summary, 15 | .entry-content, 16 | .entry-footer, 17 | .page-header, 18 | .page-content, 19 | .post-thumbnail, 20 | .content-bottom-widgets, 21 | .comments-area { 22 | margin-right: 28px; 23 | margin-left: 28px; 24 | max-width: 100%; 25 | } 26 | 27 | .site-header, 28 | .sidebar, 29 | .site-footer, 30 | .widecolumn { 31 | padding-right: 28px; 32 | padding-left: 28px; 33 | } 34 | 35 | .search-submit { 36 | height: auto; 37 | margin-top: 28px; 38 | padding: 15px 0 8px; 39 | position: relative; 40 | width: auto; 41 | } 42 | 43 | .search-submit .screen-reader-text { 44 | height: auto; 45 | position: relative !important; 46 | width: auto; 47 | } 48 | 49 | .image-navigation .nav-previous, 50 | .image-navigation .nav-next, 51 | .comment-navigation .nav-previous, 52 | .comment-navigation .nav-next { 53 | *display: inline; 54 | zoom: 1; 55 | } 56 | 57 | .image-navigation .nav-previous + .nav-next, 58 | .comment-navigation .nav-previous + .nav-next { 59 | margin-left: 14px; 60 | } 61 | 62 | .pagination .nav-links { 63 | padding: 0; 64 | } 65 | 66 | .pagination .page-numbers { 67 | line-height: 1; 68 | margin: -4px 14px 0; 69 | padding: 18px 0; 70 | } 71 | 72 | .pagination .prev, 73 | .pagination .next { 74 | display: inline-block; 75 | font-size: 16px; 76 | font-weight: 700; 77 | height: auto; 78 | left: 0; 79 | line-height: 1; 80 | margin: 0; 81 | padding: 18px 14px; 82 | position: relative; 83 | right: 0; 84 | text-transform: none; 85 | width: auto; 86 | } 87 | 88 | .dropdown-toggle { 89 | display: none; 90 | } 91 | 92 | .main-navigation ul ul { 93 | display: block; 94 | } 95 | 96 | .social-navigation { 97 | margin-top: 1.75em; 98 | } 99 | 100 | .social-navigation a { 101 | height: auto; 102 | padding: 3px 7px; 103 | width: auto; 104 | } 105 | 106 | .social-navigation .screen-reader-text { 107 | height: auto; 108 | position: relative !important; 109 | width: auto; 110 | } 111 | 112 | .site-header-main { 113 | overflow : hidden; 114 | zoom : 1; 115 | } 116 | 117 | .entry-footer > span { 118 | margin-right: 14px; 119 | } 120 | 121 | .site-info .site-title { 122 | font-size: 13px; 123 | margin-right: 14px; 124 | } 125 | 126 | .gallery-item { 127 | max-width: 30%; 128 | } 129 | 130 | .gallery-columns-1 .gallery-item { 131 | max-width: 100%; 132 | } 133 | 134 | .gallery-columns-2 .gallery-item { 135 | max-width: 46%; 136 | } 137 | 138 | .gallery-columns-4 .gallery-item { 139 | max-width: 22%; 140 | } 141 | 142 | .gallery-columns-5 .gallery-item { 143 | max-width: 17%; 144 | } 145 | 146 | .gallery-columns-6 .gallery-item { 147 | max-width: 13.5%; 148 | } 149 | 150 | .gallery-columns-7 .gallery-item { 151 | max-width: 11%; 152 | } 153 | 154 | .gallery-columns-8 .gallery-item { 155 | max-width: 9.5%; 156 | } 157 | 158 | .gallery-columns-9 .gallery-item { 159 | max-width: 8%; 160 | } 161 | 162 | .rtl .image-navigation .nav-previous + .nav-next, 163 | .rtl .comment-navigation .nav-previous + .nav-next { 164 | margin-right: 14px; 165 | margin-left: 0; 166 | } 167 | 168 | .rtl .entry-footer > span { 169 | margin-right: 14px; 170 | margin-left: 0; 171 | } 172 | 173 | .rtl .site-info .site-title { 174 | margin-right: 0; 175 | margin-left: 14px; 176 | } 177 | -------------------------------------------------------------------------------- /css/ie8.css: -------------------------------------------------------------------------------- 1 | /* 2 | Theme Name: Twenty Sixteen 3 | Description: IE8 specific style. 4 | */ 5 | 6 | code { 7 | background-color: transparent; 8 | padding: 0; 9 | } 10 | 11 | .entry-content a, 12 | .entry-summary a, 13 | .taxonomy-description a, 14 | .logged-in-as a, 15 | .comment-content a, 16 | .pingback .comment-body > a, 17 | .textwidget a, 18 | .entry-footer a:hover, 19 | .site-info a:hover { 20 | text-decoration: underline; 21 | } 22 | 23 | .entry-content a:hover, 24 | .entry-content a:focus, 25 | .entry-summary a:hover, 26 | .entry-summary a:focus, 27 | .taxonomy-description a:hover, 28 | .taxonomy-description a:focus, 29 | .logged-in-as a:hover, 30 | .logged-in-as a:focus, 31 | .comment-content a:hover, 32 | .comment-content a:focus, 33 | .pingback .comment-body > a:hover, 34 | .pingback .comment-body > a:focus, 35 | .textwidget a:hover, 36 | .textwidget a:focus, 37 | .entry-content .wp-audio-shortcode a, 38 | .entry-content .wp-playlist a, 39 | .page-links a { 40 | text-decoration: none; 41 | } 42 | 43 | .site { 44 | margin: 21px; 45 | } 46 | 47 | .site-inner { 48 | max-width: 710px; 49 | } 50 | 51 | .site-header { 52 | padding-top: 3.9375em; 53 | padding-bottom: 3.9375em; 54 | } 55 | 56 | .site-branding { 57 | float: left; 58 | margin-top: 1.3125em; 59 | margin-bottom: 1.3125em; 60 | } 61 | 62 | .site-title { 63 | font-size: 28px; 64 | line-height: 1.25; 65 | } 66 | 67 | .site-description { 68 | display: block; 69 | } 70 | 71 | .menu-toggle { 72 | float: right; 73 | font-size: 16px; 74 | margin: 1.3125em 0; 75 | padding: 0.8125em 0.875em 0.6875em; 76 | } 77 | 78 | .site-header-menu { 79 | clear: both; 80 | margin: 0; 81 | padding: 1.3125em 0; 82 | } 83 | 84 | .site-header .main-navigation + .social-navigation { 85 | margin-top: 2.625em; 86 | } 87 | 88 | .header-image { 89 | margin: 1.3125em 0; 90 | } 91 | 92 | .site-main { 93 | margin-bottom: 5.25em; 94 | } 95 | 96 | .post-navigation { 97 | margin-bottom: 5.25em; 98 | } 99 | 100 | .post-navigation .post-title { 101 | font-size: 28px; 102 | line-height: 1.25; 103 | } 104 | 105 | .pagination { 106 | margin: 0 7.6923% 4.421052632em; 107 | } 108 | 109 | .pagination .nav-links:before, 110 | .pagination .nav-links:after { 111 | display: none; 112 | } 113 | 114 | /* restore screen-reader-text */ 115 | .pagination .current .screen-reader-text { 116 | position: absolute !important; 117 | } 118 | 119 | .pagination .page-numbers { 120 | display: inline-block; 121 | font-weight: 400; 122 | } 123 | 124 | .image-navigation .nav-previous, 125 | .image-navigation .nav-next, 126 | .comment-navigation .nav-previous, 127 | .comment-navigation .nav-next { 128 | display: inline-block; 129 | } 130 | 131 | .image-navigation .nav-previous + .nav-next:before, 132 | .comment-navigation .nav-previous + .nav-next:before { 133 | content: "\002f"; 134 | display: inline-block; 135 | filter: alpha(opacity=70); 136 | padding: 0 0.538461538em; 137 | } 138 | 139 | .site-main > article { 140 | margin-bottom: 5.25em; 141 | } 142 | 143 | .entry-title { 144 | font-size: 33px; 145 | line-height: 1.2727272727; 146 | margin-bottom: 0.8484848485em; 147 | } 148 | 149 | .entry-content blockquote.alignleft, 150 | .entry-content blockquote.alignright { 151 | border-width: 4px 0 0 0; 152 | padding: 0.9473684211em 0 0; 153 | width: 50%; 154 | } 155 | 156 | .entry-footer > span:after { 157 | content: "\002f"; 158 | display: inline-block; 159 | filter: alpha(opacity=70); 160 | padding: 0 0.538461538em; 161 | } 162 | 163 | .updated { 164 | display: none; 165 | } 166 | 167 | .updated.published { 168 | display: inline; 169 | } 170 | 171 | .comment-author { 172 | margin-bottom: 0; 173 | } 174 | 175 | .comment-author .avatar { 176 | height: 42px; 177 | position: relative; 178 | top: 0.25em; 179 | width: 42px; 180 | } 181 | 182 | .comment-list .children > li { 183 | padding-left: 1.75em; 184 | } 185 | 186 | .comment-list + .comment-respond, 187 | .comment-navigation + .comment-respond { 188 | padding-top: 3.5em; 189 | } 190 | 191 | .comment-reply-link { 192 | margin-top: 0; 193 | } 194 | 195 | .comments-area, 196 | .widget, 197 | .content-bottom-widgets .widget-area { 198 | margin-bottom: 5.25em; 199 | } 200 | 201 | .sidebar, 202 | .widecolumn { 203 | margin-bottom: 5.25em; 204 | } 205 | 206 | .site-footer .main-navigation, 207 | .site-footer .social-navigation { 208 | display: none; 209 | } 210 | 211 | .rtl .site-branding { 212 | float: right; 213 | } 214 | 215 | .rtl .menu-toggle { 216 | float: left; 217 | } 218 | 219 | .rtl .comment-list .children > li { 220 | padding-right: 1.75em; 221 | padding-left: 0; 222 | } 223 | -------------------------------------------------------------------------------- /functions.php: -------------------------------------------------------------------------------- 1 | tag in the document head, and expect WordPress to 73 | * provide it for us. 74 | */ 75 | add_theme_support( 'title-tag' ); 76 | 77 | /* 78 | * Enable support for custom logo. 79 | * 80 | * @since Twenty Sixteen 1.2 81 | */ 82 | add_theme_support( 'custom-logo', array( 83 | 'height' => 240, 84 | 'width' => 240, 85 | 'flex-height' => true, 86 | ) ); 87 | 88 | /* 89 | * Enable support for Post Thumbnails on posts and pages. 90 | * 91 | * @link http://codex.wordpress.org/Function_Reference/add_theme_support#Post_Thumbnails 92 | */ 93 | add_theme_support( 'post-thumbnails' ); 94 | set_post_thumbnail_size( 1200, 9999 ); 95 | 96 | // This theme uses wp_nav_menu() in two locations. 97 | register_nav_menus( array( 98 | 'primary' => __( 'Primary Menu', 'twentysixteen' ), 99 | 'social' => __( 'Social Links Menu', 'twentysixteen' ), 100 | ) ); 101 | 102 | /* 103 | * Switch default core markup for search form, comment form, and comments 104 | * to output valid HTML5. 105 | */ 106 | add_theme_support( 'html5', array( 107 | 'search-form', 108 | 'comment-form', 109 | 'comment-list', 110 | 'gallery', 111 | 'caption', 112 | ) ); 113 | 114 | /* 115 | * Enable support for Post Formats. 116 | * 117 | * See: https://codex.wordpress.org/Post_Formats 118 | */ 119 | add_theme_support( 'post-formats', array( 120 | 'aside', 121 | 'image', 122 | 'video', 123 | 'quote', 124 | 'link', 125 | 'gallery', 126 | 'status', 127 | 'audio', 128 | 'chat', 129 | ) ); 130 | 131 | /* 132 | * This theme styles the visual editor to resemble the theme style, 133 | * specifically font, colors, icons, and column width. 134 | */ 135 | add_editor_style( array( 'css/editor-style.css', twentysixteen_fonts_url() ) ); 136 | 137 | // Indicate widget sidebars can use selective refresh in the Customizer. 138 | add_theme_support( 'customize-selective-refresh-widgets' ); 139 | } 140 | endif; // twentysixteen_setup 141 | add_action( 'after_setup_theme', 'twentysixteen_setup' ); 142 | 143 | /** 144 | * Sets the content width in pixels, based on the theme's design and stylesheet. 145 | * 146 | * Priority 0 to make it available to lower priority callbacks. 147 | * 148 | * @global int $content_width 149 | * 150 | * @since Twenty Sixteen 1.0 151 | */ 152 | function twentysixteen_content_width() { 153 | $GLOBALS['content_width'] = apply_filters( 'twentysixteen_content_width', 840 ); 154 | } 155 | add_action( 'after_setup_theme', 'twentysixteen_content_width', 0 ); 156 | 157 | /** 158 | * Registers a widget area. 159 | * 160 | * @link https://developer.wordpress.org/reference/functions/register_sidebar/ 161 | * 162 | * @since Twenty Sixteen 1.0 163 | */ 164 | function twentysixteen_widgets_init() { 165 | register_sidebar( array( 166 | 'name' => __( 'Sidebar', 'twentysixteen' ), 167 | 'id' => 'sidebar-1', 168 | 'description' => __( 'Add widgets here to appear in your sidebar.', 'twentysixteen' ), 169 | 'before_widget' => ' ', 171 | 'before_title' => 'It looks like nothing was found at this location.
15 |{this.props.template_tags.bloginfo_name}
21 | 22 |{this.props.template_tags.bloginfo_description}
23 |