├── screenshot.png ├── README.md ├── functions.php └── style.css /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MickeyKay/genesis-mobile-first/HEAD/screenshot.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Genesis Mobile First Theme ## 2 | This is "mobile-first" version of the [Genesis 2.0 Sample Theme](http://www.genesisframework.com/), with all media queries switched from max- to min-width for optimum mobile performance. 3 | 4 | * Learn more: [http://www.mightyminnow.com/2013/08/our-new-mobile-first-child-theme-for-genesis-2-0/](http://www.mightyminnow.com/2013/08/our-new-mobile-first-child-theme-for-genesis-2-0/) 5 | * See a demo: [http://demo.mightyminnow.com/theme/genesis-mobile-first/](http://demo.mightyminnow.com/theme/genesis-mobile-first/) 6 | -------------------------------------------------------------------------------- /functions.php: -------------------------------------------------------------------------------- 1 | Genesis 2.0 Sample Theme. 6 | Author: MIGHTYminnow 7 | Author URI: http://www.mightyminnow.com/ 8 | Version: 1.4 9 | */ 10 | 11 | /* Table of Contents 12 | 13 | - Imports 14 | - HTML5 Reset 15 | - Baseline Normalize 16 | - Box Sizing 17 | - Float Clearing 18 | - Defaults 19 | - Typographical Elements 20 | - Headings 21 | - Objects 22 | - Forms 23 | - Tables 24 | - Structure and Layout 25 | - Site Containers 26 | - Column Widths and Positions 27 | - Column Classes 28 | - Common Classes 29 | - WordPress 30 | - Genesis 31 | - Titles 32 | - Widgets 33 | - Featured Content 34 | - Plugins 35 | - Genesis eNews Extended 36 | - Genesis Latest Tweets 37 | - Gravity Forms 38 | - Jetpack 39 | - Site Header 40 | - Title Area 41 | - Widget Area 42 | - Site Navigation 43 | - Header Navigation 44 | - Primary Navigation 45 | - Secondary Navigation 46 | - Content Area 47 | - Entries 48 | - Pagination 49 | - Comments 50 | - Sidebars 51 | - Footer Widgets 52 | - Site Footer 53 | - Media Queries 54 | - min-width: 1024px 55 | - min-width: 1140px 56 | 57 | */ 58 | 59 | 60 | /* 61 | Imports 62 | ---------------------------------------------------------------------------------------------------- */ 63 | 64 | @import url(//fonts.googleapis.com/css?family=Lato:300,700); 65 | 66 | 67 | /* 68 | HTML5 Reset 69 | ---------------------------------------------------------------------------------------------------- */ 70 | 71 | /* Baseline Normalize 72 | normalize.css v2.1.2 | MIT License | git.io/normalize 73 | --------------------------------------------- */ 74 | 75 | article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0} 76 | 77 | /* Box Sizing 78 | --------------------------------------------- */ 79 | 80 | *, 81 | input[type="search"] { 82 | -webkit-box-sizing: border-box; 83 | -moz-box-sizing: border-box; 84 | box-sizing: border-box; 85 | } 86 | 87 | /* Float Clearing 88 | --------------------------------------------- */ 89 | 90 | .archive-pagination:before, 91 | .clearfix:before, 92 | .entry:before, 93 | .entry-pagination:before, 94 | .footer-widgets:before, 95 | .nav-primary:before, 96 | .nav-secondary:before, 97 | .site-container:before, 98 | .site-footer:before, 99 | .site-header:before, 100 | .site-inner:before, 101 | .wrap:before { 102 | content: " "; 103 | display: table; 104 | } 105 | 106 | .archive-pagination:after, 107 | .clearfix:after, 108 | .entry:after, 109 | .entry-pagination:after, 110 | .footer-widgets:after, 111 | .nav-primary:after, 112 | .nav-secondary:after, 113 | .site-container:after, 114 | .site-footer:after, 115 | .site-header:after, 116 | .site-inner:after, 117 | .wrap:after { 118 | clear: both; 119 | content: " "; 120 | display: table; 121 | } 122 | 123 | 124 | /* 125 | Defaults 126 | ---------------------------------------------------------------------------------------------------- */ 127 | 128 | /* Typographical Elements 129 | --------------------------------------------- */ 130 | 131 | html { 132 | font-size: 62.5%; /* 10px browser default */ 133 | } 134 | 135 | body { 136 | background-color: #fff; 137 | color: #666; 138 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 139 | font-size: 16px; 140 | font-size: 1.6rem; 141 | font-weight: 300; 142 | line-height: 1.625; 143 | } 144 | 145 | a, 146 | button, 147 | input:focus, 148 | input[type="button"], 149 | input[type="reset"], 150 | input[type="submit"], 151 | textarea:focus, 152 | .button { 153 | -webkit-transition: all 0.1s ease-in-out; 154 | -moz-transition: all 0.1s ease-in-out; 155 | -ms-transition: all 0.1s ease-in-out; 156 | -o-transition: all 0.1s ease-in-out; 157 | transition: all 0.1s ease-in-out; 158 | } 159 | 160 | ::-moz-selection { 161 | background-color: #333; 162 | color: #fff; 163 | } 164 | 165 | ::selection { 166 | background-color: #333; 167 | color: #fff; 168 | } 169 | 170 | a { 171 | color: #666; 172 | text-decoration: none; 173 | } 174 | 175 | a img { 176 | margin-bottom: -4px; 177 | margin-bottom: -0.4rem; 178 | } 179 | 180 | a:hover { 181 | color: #333; 182 | } 183 | 184 | p { 185 | margin: 0 0 24px; 186 | margin: 0 0 2.4rem; 187 | padding: 0; 188 | } 189 | 190 | strong { 191 | font-weight: 700; 192 | } 193 | 194 | ol, 195 | ul { 196 | margin: 0; 197 | padding: 0; 198 | } 199 | 200 | blockquote, 201 | blockquote::before { 202 | color: #999; 203 | } 204 | 205 | blockquote { 206 | margin: 40px 40px 24px; 207 | margin: 4rem 4rem 2.4rem; 208 | } 209 | 210 | blockquote::before { 211 | content: "\201C"; 212 | display: block; 213 | font-size: 30px; 214 | font-size: 3rem; 215 | height: 0; 216 | left: -20px; 217 | position: relative; 218 | top: -10px; 219 | } 220 | 221 | .entry-content code { 222 | background-color: #333; 223 | color: #ddd; 224 | } 225 | 226 | cite { 227 | font-style: normal; 228 | } 229 | 230 | /* Headings 231 | --------------------------------------------- */ 232 | 233 | h1, 234 | h2, 235 | h3, 236 | h4, 237 | h5, 238 | h6 { 239 | color: #333; 240 | font-family: Lato, sans-serif; 241 | font-weight: 700; 242 | line-height: 1.2; 243 | margin: 0 0 16px; 244 | margin: 0 0 1.6rem; 245 | } 246 | 247 | h1 { 248 | font-size: 36px; 249 | font-size: 3.6rem; 250 | } 251 | 252 | h2 { 253 | font-size: 30px; 254 | font-size: 3rem; 255 | } 256 | 257 | h3 { 258 | font-size: 24px; 259 | font-size: 2.4rem; 260 | } 261 | 262 | h4 { 263 | font-size: 20px; 264 | font-size: 2rem; 265 | } 266 | 267 | h5 { 268 | font-size: 18px; 269 | font-size: 1.8rem; 270 | } 271 | 272 | h6 { 273 | font-size: 16px; 274 | font-size: 1.6rem; 275 | } 276 | 277 | /* Objects 278 | --------------------------------------------- */ 279 | 280 | embed, 281 | iframe, 282 | img, 283 | object, 284 | video, 285 | .wp-caption { 286 | max-width: 100%; 287 | } 288 | 289 | img { 290 | height: auto; 291 | width: auto; /* IE8 */ 292 | } 293 | 294 | /* Forms 295 | --------------------------------------------- */ 296 | 297 | input, 298 | select, 299 | textarea { 300 | background-color: #fff; 301 | border: 1px solid #ddd; 302 | border-radius: 3px; 303 | box-shadow: 1px 1px 3px #eee inset; 304 | color: #999; 305 | font-size: 14px; 306 | font-size: 1.4rem; 307 | padding: 16px; 308 | padding: 1.6rem; 309 | width: 100%; 310 | } 311 | 312 | input:focus, 313 | textarea:focus { 314 | border: 1px solid #999; 315 | outline: none; 316 | } 317 | 318 | ::-moz-placeholder { 319 | color: #999; 320 | opacity: 1; 321 | } 322 | 323 | ::-webkit-input-placeholder { 324 | color: #999; 325 | } 326 | 327 | button, 328 | input[type="button"], 329 | input[type="reset"], 330 | input[type="submit"], 331 | .button, 332 | .entry-content .button { 333 | background-color: #333; 334 | border: none; 335 | box-shadow: none; 336 | color: #fff; 337 | cursor: pointer; 338 | padding: 16px 24px; 339 | padding: 1.6rem 2.4rem; 340 | text-transform: uppercase; 341 | width: auto; 342 | } 343 | 344 | button:hover, 345 | input:hover[type="button"], 346 | input:hover[type="reset"], 347 | input:hover[type="submit"], 348 | .button:hover, 349 | .entry-content .button:hover { 350 | background-color: #f15123; 351 | } 352 | 353 | .entry-content .button:hover { 354 | color: #fff; 355 | } 356 | 357 | .button { 358 | border-radius: 3px; 359 | display: inline-block; 360 | } 361 | 362 | input[type="search"]::-webkit-search-cancel-button, 363 | input[type="search"]::-webkit-search-results-button { 364 | display: none; 365 | } 366 | 367 | /* Tables 368 | --------------------------------------------- */ 369 | 370 | table { 371 | border-collapse: collapse; 372 | border-spacing: 0; 373 | line-height: 2; 374 | margin-bottom: 40px; 375 | margin-bottom: 4rem; 376 | width: 100%; 377 | } 378 | 379 | tbody { 380 | border-bottom: 1px solid #ddd; 381 | } 382 | 383 | th, 384 | td { 385 | text-align: left; 386 | } 387 | 388 | th { 389 | font-weight: bold; 390 | text-transform: uppercase; 391 | } 392 | 393 | td { 394 | border-top: 1px solid #ddd; 395 | padding: 6px 0; 396 | padding: 0.6rem 0; 397 | } 398 | 399 | 400 | /* 401 | Structure and Layout 402 | ---------------------------------------------------------------------------------------------------- */ 403 | 404 | /* Site Containers 405 | --------------------------------------------- */ 406 | .site-inner, 407 | .wrap { 408 | margin: 0 auto; 409 | max-width: 960px; 410 | } 411 | 412 | .site-inner { 413 | clear: both; 414 | padding-left: 5%; 415 | padding-right: 5%; 416 | padding-top: 40px; 417 | padding-top: 4rem; 418 | } 419 | 420 | /* Column Widths and Positions 421 | --------------------------------------------- */ 422 | 423 | /* Wrapping div for .content and .sidebar-primary */ 424 | 425 | .content-sidebar-wrap { 426 | width: 100%; 427 | } 428 | 429 | .content-sidebar-sidebar .content-sidebar-wrap { 430 | float: left; 431 | } 432 | 433 | .sidebar-content-sidebar .content-sidebar-wrap, 434 | .sidebar-sidebar-content .content-sidebar-wrap { 435 | float: right; 436 | } 437 | 438 | /* Content */ 439 | 440 | .content-sidebar .content, 441 | .content-sidebar-sidebar .content, 442 | .sidebar-content-sidebar .content { 443 | float: left; 444 | } 445 | 446 | .content { 447 | float: right; 448 | width: 100%; 449 | } 450 | 451 | /* Primary Sidebar */ 452 | 453 | .sidebar-primary { 454 | float: right; 455 | width: 100%; 456 | } 457 | 458 | .sidebar-content .sidebar-primary, 459 | .sidebar-sidebar-content .sidebar-primary { 460 | float: left; 461 | } 462 | 463 | /* Secondary Sidebar */ 464 | 465 | .sidebar-secondary { 466 | float: left; 467 | width: 100%; 468 | } 469 | 470 | .content-sidebar-sidebar .sidebar-secondary { 471 | float: right; 472 | } 473 | 474 | /* Column Classes 475 | Link: http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css 476 | --------------------------------------------- */ 477 | 478 | .five-sixths, 479 | .four-sixths, 480 | .one-fourth, 481 | .one-half, 482 | .one-sixth, 483 | .one-third, 484 | .three-fourths, 485 | .three-sixths, 486 | .two-fourths, 487 | .two-sixths, 488 | .two-thirds { 489 | float: left; 490 | margin: 0; 491 | width: 100%; 492 | } 493 | 494 | 495 | /* 496 | Common Classes 497 | ---------------------------------------------------------------------------------------------------- */ 498 | 499 | /* WordPress 500 | --------------------------------------------- */ 501 | 502 | .avatar { 503 | float: left; 504 | } 505 | 506 | .alignleft .avatar { 507 | margin-right: 24px; 508 | margin-right: 2.4rem; 509 | } 510 | 511 | .alignright .avatar { 512 | margin-left: 24px; 513 | margin-left: 2.4rem; 514 | } 515 | 516 | .search-form input[type="submit"] { 517 | border: 0; 518 | clip: rect(0, 0, 0, 0); 519 | height: 1px; 520 | margin: -1px; 521 | padding: 0; 522 | position: absolute; 523 | width: 1px; 524 | } 525 | 526 | .sticky { 527 | } 528 | 529 | img.centered, 530 | .aligncenter { 531 | display: block; 532 | margin: 0 auto 24px; 533 | margin: 0 auto 2.4rem; 534 | } 535 | 536 | img.alignnone { 537 | margin-bottom: 12px; 538 | margin-bottom: 1.2rem; 539 | } 540 | 541 | .alignleft { 542 | float: left; 543 | text-align: left; 544 | } 545 | 546 | .alignright { 547 | float: right; 548 | text-align: right; 549 | } 550 | 551 | img.alignleft, 552 | .wp-caption.alignleft { 553 | margin: 0 24px 24px 0; 554 | margin: 0 2.4rem 2.4rem 0; 555 | } 556 | 557 | img.alignright, 558 | .wp-caption.alignright { 559 | margin: 0 0 24px 24px; 560 | margin: 0 0 2.4rem 2.4rem; 561 | } 562 | 563 | .wp-caption-text { 564 | font-size: 14px; 565 | font-size: 1.4rem; 566 | font-weight: 700; 567 | text-align: center; 568 | } 569 | 570 | .gallery-caption { 571 | } 572 | 573 | .widget_calendar table { 574 | width: 100%; 575 | } 576 | 577 | .widget_calendar td, 578 | .widget_calendar th { 579 | text-align: center; 580 | } 581 | 582 | /* Genesis 583 | --------------------------------------------- */ 584 | 585 | .breadcrumb { 586 | margin-bottom: 20px; 587 | margin-bottom: 2rem; 588 | } 589 | 590 | .archive-description, 591 | .author-box { 592 | background-color: #fff; 593 | margin-bottom: 40px; 594 | margin-bottom: 4rem; 595 | } 596 | 597 | .author-box-title { 598 | color: #333; 599 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 600 | font-size: 16px; 601 | font-size: 1.6rem; 602 | margin-bottom: 4px; 603 | margin-bottom: 0.4rem; 604 | } 605 | 606 | .author-box a { 607 | border-bottom: 1px solid #ddd; 608 | } 609 | 610 | .author-box p { 611 | margin-bottom: 0; 612 | } 613 | 614 | .author-box .avatar { 615 | margin-right: 24px; 616 | margin-right: 2.4rem; 617 | } 618 | 619 | /* Titles 620 | --------------------------------------------- */ 621 | 622 | .entry-title { 623 | font-size: 36px; 624 | font-size: 3.6rem; 625 | line-height: 1; 626 | } 627 | 628 | .entry-title a, 629 | .sidebar .widget-title a { 630 | color: #333; 631 | } 632 | 633 | .entry-title a:hover { 634 | color: #666; 635 | } 636 | 637 | .widget-title { 638 | font-size: 16px; 639 | font-size: 1.6rem; 640 | margin-bottom: 24px; 641 | margin-bottom: 2.4rem; 642 | text-transform: uppercase; 643 | } 644 | 645 | .sidebar .widget-title a { 646 | border: none; 647 | } 648 | 649 | .archive-title { 650 | font-size: 20px; 651 | font-size: 2rem; 652 | margin-bottom: 24px; 653 | margin-bottom: 2.4rem; 654 | } 655 | 656 | 657 | /* 658 | Widgets 659 | ---------------------------------------------------------------------------------------------------- */ 660 | 661 | /* Featured Content 662 | --------------------------------------------- */ 663 | 664 | .featured-content .entry { 665 | border-bottom: 2px solid #f5f5f5; 666 | margin-bottom: 20px; 667 | margin-bottom: 2rem; 668 | padding: 0 0 24px; 669 | padding: 0 0 2.4rem; 670 | } 671 | 672 | .featured-content .entry-title { 673 | border: none; 674 | font-size: 24px; 675 | font-size: 2.4rem; 676 | line-height: 1.2; 677 | } 678 | 679 | .featured-content .entry-title a { 680 | border: none; 681 | } 682 | 683 | 684 | /* 685 | Plugins 686 | ---------------------------------------------------------------------------------------------------- */ 687 | 688 | /* Genesis eNews Extended 689 | --------------------------------------------- */ 690 | 691 | .enews-widget { 692 | color: #999; 693 | } 694 | 695 | .sidebar .widget.enews-widget { 696 | background-color: #333; 697 | } 698 | 699 | .sidebar .enews-widget { 700 | padding: 40px; 701 | padding: 4rem; 702 | } 703 | 704 | .enews-widget .widget-title { 705 | color: #fff; 706 | } 707 | 708 | .enews-widget input { 709 | margin-bottom: 16px; 710 | margin-bottom: 1.6rem; 711 | } 712 | 713 | .enews-widget input:focus { 714 | border: 1px solid #ddd; 715 | } 716 | 717 | .enews-widget input[type="submit"] { 718 | background-color: #f15123; 719 | color: #fff; 720 | margin: 0; 721 | width: 100%; 722 | } 723 | 724 | .enews-widget input:hover[type="submit"] { 725 | background-color: #fff; 726 | color: #333; 727 | } 728 | 729 | /* Genesis Latest Tweets 730 | --------------------------------------------- */ 731 | 732 | .latest-tweets ul li { 733 | margin-bottom: 16px; 734 | margin-bottom: 1.6rem; 735 | } 736 | 737 | /* Gravity Forms 738 | --------------------------------------------- */ 739 | 740 | div.gform_wrapper input[type="email"], 741 | div.gform_wrapper input[type="text"], 742 | div.gform_wrapper textarea, 743 | div.gform_wrapper .ginput_complex label { 744 | font-size: 16px; 745 | font-size: 1.6rem; 746 | padding: 16px; 747 | padding: 1.6rem; 748 | } 749 | 750 | div.gform_wrapper .ginput_complex label { 751 | padding: 0; 752 | } 753 | 754 | div.gform_wrapper li, 755 | div.gform_wrapper form li { 756 | margin: 16px 0 0; 757 | margin: 1.6rem 0 0; 758 | } 759 | 760 | div.gform_wrapper .gform_footer input[type="submit"] { 761 | font-size: 14px; 762 | font-size: 1.4rem; 763 | } 764 | 765 | /* Jetpack 766 | --------------------------------------------- */ 767 | 768 | img#wpstats { 769 | display: none; 770 | } 771 | 772 | 773 | /* 774 | Site Header 775 | ---------------------------------------------------------------------------------------------------- */ 776 | 777 | .site-header { 778 | background-color: #fff; 779 | } 780 | 781 | .site-header .wrap { 782 | padding: 20px 0; 783 | padding: 2rem 0; 784 | } 785 | 786 | /* Title Area 787 | --------------------------------------------- */ 788 | 789 | .title-area { 790 | float: left; 791 | font-family: Lato, sans-serif; 792 | font-weight: 700; 793 | padding: 16px 0; 794 | padding: 1.6rem 0; 795 | width: 100%; 796 | text-align: center; 797 | } 798 | 799 | .header-image .title-area { 800 | padding: 0; 801 | } 802 | 803 | .site-title { 804 | font-size: 28px; 805 | font-size: 2.8rem; 806 | line-height: 1; 807 | margin: 0 0 8px; 808 | margin: 0 0 0.8rem; 809 | text-transform: uppercase; 810 | } 811 | 812 | .site-title a, 813 | .site-title a:hover { 814 | color: #333; 815 | } 816 | 817 | .site-description { 818 | color: #999; 819 | font-size: 16px; 820 | font-size: 1.6rem; 821 | font-weight: 300; 822 | line-height: 1; 823 | margin-bottom: 0; 824 | } 825 | 826 | /* Full width header, no widgets */ 827 | 828 | .header-full-width .title-area, 829 | .header-full-width .site-title { 830 | width: 100%; 831 | } 832 | 833 | .header-image .site-description, 834 | .header-image .site-title a { 835 | display: block; 836 | text-indent: -9999px; 837 | } 838 | 839 | /* Logo, hide text */ 840 | 841 | .header-image .site-header .wrap { 842 | background: url(images/logo.png) no-repeat; 843 | background-position: center top; 844 | padding: 0; 845 | } 846 | 847 | .header-image .site-title a { 848 | float: left; 849 | min-height: 164px; 850 | width: 100%; 851 | } 852 | 853 | /* Widget Area 854 | --------------------------------------------- */ 855 | 856 | .site-header .widget-area { 857 | float: right; 858 | width: 100%; 859 | text-align: center; 860 | } 861 | 862 | .site-header .search-form { 863 | margin: 16px auto ; 864 | margin: 1.6rem auto; 865 | text-align: center; 866 | } 867 | 868 | 869 | /* 870 | Site Navigation 871 | ---------------------------------------------------------------------------------------------------- */ 872 | 873 | .genesis-nav-menu { 874 | clear: both; 875 | color: #999; 876 | text-align: center; 877 | font-family: Lato, sans-serif; 878 | line-height: 1.5; 879 | width: 100%; 880 | } 881 | 882 | .genesis-nav-menu .menu-item { 883 | display: inline-block; 884 | text-align: left; 885 | } 886 | 887 | .genesis-nav-menu a { 888 | border: none; 889 | color: #999; 890 | display: block; 891 | padding: 20px 16px; 892 | padding: 2rem 1.6rem; 893 | position: relative; 894 | } 895 | 896 | .genesis-nav-menu a:hover, 897 | .genesis-nav-menu .current-menu-item > a, 898 | .genesis-nav-menu .sub-menu .current-menu-item > a:hover { 899 | color: #333; 900 | } 901 | 902 | .genesis-nav-menu .sub-menu .current-menu-item > a { 903 | color: #999; 904 | } 905 | 906 | .genesis-nav-menu > .menu-item > a { 907 | text-transform: uppercase; 908 | } 909 | 910 | .genesis-nav-menu .sub-menu { 911 | left: -9999px; 912 | opacity: 0; 913 | position: absolute; 914 | -webkit-transition: opacity .4s ease-in-out; 915 | -moz-transition: opacity .4s ease-in-out; 916 | -ms-transition: opacity .4s ease-in-out; 917 | -o-transition: opacity .4s ease-in-out; 918 | transition: opacity .4s ease-in-out; 919 | width: 200px; 920 | z-index: 99; 921 | } 922 | 923 | .genesis-nav-menu .sub-menu a { 924 | background-color: #fff; 925 | border: 1px solid #eee; 926 | border-top: none; 927 | font-size: 14px; 928 | font-size: 1.4rem; 929 | padding: 16px 20px; 930 | padding: 1.6rem 2rem; 931 | position: relative; 932 | width: 200px; 933 | } 934 | 935 | .genesis-nav-menu .sub-menu .sub-menu { 936 | margin: -54px 0 0 199px; 937 | } 938 | 939 | .genesis-nav-menu .menu-item:hover { 940 | position: static; 941 | } 942 | 943 | .genesis-nav-menu .menu-item:hover > .sub-menu { 944 | left: auto; 945 | opacity: 1; 946 | } 947 | 948 | .genesis-nav-menu > .right { 949 | display: none; 950 | } 951 | 952 | .genesis-nav-menu > .rss > a { 953 | margin-left: 48px; 954 | margin-left: 4.8rem; 955 | } 956 | 957 | 958 | /* Site Header Navigation 959 | --------------------------------------------- */ 960 | 961 | .site-header .sub-menu { 962 | border-top: 1px solid #eee; 963 | } 964 | 965 | .site-header .sub-menu .sub-menu { 966 | margin-top: -55px; 967 | } 968 | 969 | /* Primary Navigation 970 | --------------------------------------------- */ 971 | 972 | .nav-primary { 973 | background-color: #333; 974 | } 975 | 976 | .nav-primary a:hover, 977 | .nav-primary .current-menu-item > a { 978 | color: #fff; 979 | } 980 | 981 | .nav-primary .sub-menu a:hover { 982 | color: #333; 983 | } 984 | 985 | /* Secondary Navigation 986 | --------------------------------------------- */ 987 | 988 | .nav-secondary { 989 | background-color: #fff; 990 | } 991 | 992 | 993 | /* 994 | Content Area 995 | ---------------------------------------------------------------------------------------------------- */ 996 | 997 | /* Entries 998 | --------------------------------------------- */ 999 | 1000 | .entry { 1001 | background-color: #fff; 1002 | border-radius: 3px; 1003 | margin-bottom: 40px; 1004 | margin-bottom: 4rem; 1005 | } 1006 | 1007 | .entry-content a { 1008 | border-bottom: 1px solid #ddd; 1009 | color: #f15123; 1010 | } 1011 | 1012 | .entry-content a:hover { 1013 | color: #333; 1014 | } 1015 | 1016 | .entry-content .attachment a, 1017 | .entry-content .gallery a { 1018 | border: none; 1019 | } 1020 | 1021 | .entry-content ol, 1022 | .entry-content p, 1023 | .entry-content ul, 1024 | .quote-caption { 1025 | margin-bottom: 26px; 1026 | margin-bottom: 2.6rem; 1027 | } 1028 | 1029 | .entry-content ol, 1030 | .entry-content ul { 1031 | margin-left: 40px; 1032 | margin-left: 4rem; 1033 | } 1034 | 1035 | .entry-content ol li { 1036 | list-style-type: decimal; 1037 | } 1038 | 1039 | .entry-content ul li { 1040 | list-style-type: disc; 1041 | } 1042 | 1043 | .entry-content ol ol, 1044 | .entry-content ul ul { 1045 | margin-bottom: 0; 1046 | } 1047 | 1048 | .entry-content .search-form { 1049 | width: 50%; 1050 | } 1051 | 1052 | .entry-meta { 1053 | color: #999; 1054 | font-size: 14px; 1055 | font-size: 1.4rem; 1056 | } 1057 | 1058 | .entry-meta a { 1059 | border-bottom: 1px solid #ddd; 1060 | } 1061 | 1062 | .entry-header .entry-meta { 1063 | margin-bottom: 24px; 1064 | margin-bottom: 2.4rem; 1065 | } 1066 | 1067 | .entry-footer .entry-meta { 1068 | border-top: 2px solid #f5f5f5; 1069 | padding-top: 12px; 1070 | padding-top: 1.2rem; 1071 | } 1072 | 1073 | .entry-comments-link::before { 1074 | content: "\2014"; 1075 | margin: 0 6px 0 2px; 1076 | margin: 0 0.6rem 0 0.2rem; 1077 | } 1078 | 1079 | .entry-categories, 1080 | .entry-tags { 1081 | display: block; 1082 | } 1083 | 1084 | /* Pagination 1085 | --------------------------------------------- */ 1086 | 1087 | .archive-pagination, 1088 | .entry-pagination { 1089 | font-size: 14px; 1090 | font-size: 1.4rem; 1091 | margin: 40px 0; 1092 | margin: 4rem 0; 1093 | } 1094 | 1095 | .archive-pagination li { 1096 | display: inline; 1097 | } 1098 | 1099 | .archive-pagination li a { 1100 | background-color: #333; 1101 | border-radius: 3px; 1102 | color: #fff; 1103 | cursor: pointer; 1104 | display: inline-block; 1105 | padding: 8px 12px; 1106 | padding: 0.8rem 1.2rem; 1107 | } 1108 | 1109 | .archive-pagination li a:hover, 1110 | .archive-pagination li.active a { 1111 | background-color: #f15123; 1112 | } 1113 | 1114 | .entry-pagination a { 1115 | border-bottom: 1px solid #ddd; 1116 | } 1117 | 1118 | /* Comments 1119 | --------------------------------------------- */ 1120 | 1121 | .comment-respond, 1122 | .entry-comments, 1123 | .entry-pings { 1124 | background-color: #fff; 1125 | margin-bottom: 40px; 1126 | margin-bottom: 4rem; 1127 | } 1128 | 1129 | .comment-respond a, 1130 | .entry-comments a { 1131 | border-bottom: 1px solid #ddd; 1132 | } 1133 | 1134 | .comment-content { 1135 | clear: both; 1136 | } 1137 | 1138 | .entry-comments .comment-author { 1139 | margin-bottom: 0; 1140 | } 1141 | 1142 | .comment-respond input[type="email"], 1143 | .comment-respond input[type="text"], 1144 | .comment-respond input[type="url"] { 1145 | width: 50% 1146 | } 1147 | 1148 | .comment-respond label { 1149 | display: block; 1150 | margin-right: 12px; 1151 | margin-right: 1.2rem; 1152 | } 1153 | 1154 | .comment-list li, 1155 | .ping-list li { 1156 | list-style-type: none; 1157 | } 1158 | 1159 | .comment-list li { 1160 | margin-top: 24px; 1161 | margin-top: 2.4rem; 1162 | padding: 32px; 1163 | padding: 3.2rem; 1164 | } 1165 | 1166 | .comment-list li li { 1167 | margin-right: -32px; 1168 | margin-right: -3.2rem; 1169 | } 1170 | 1171 | li.comment { 1172 | background-color: #f5f5f5; 1173 | border: 2px solid #fff; 1174 | border-right: none; 1175 | } 1176 | 1177 | .comment .avatar { 1178 | margin: 0 16px 24px 0; 1179 | margin: 0 1.6rem 2.4rem 0; 1180 | } 1181 | 1182 | .entry-pings .reply { 1183 | display: none; 1184 | } 1185 | 1186 | .bypostauthor { 1187 | } 1188 | 1189 | .form-allowed-tags { 1190 | background-color: #f5f5f5; 1191 | font-size: 14px; 1192 | font-size: 1.4rem; 1193 | padding: 24px; 1194 | padding: 2.4rem; 1195 | } 1196 | 1197 | 1198 | /* 1199 | Sidebars 1200 | ---------------------------------------------------------------------------------------------------- */ 1201 | 1202 | .sidebar { 1203 | color: #999; 1204 | } 1205 | 1206 | .sidebar a { 1207 | border-bottom: 1px solid #ddd; 1208 | } 1209 | 1210 | .sidebar p:last-child { 1211 | margin-bottom: 0; 1212 | } 1213 | 1214 | .sidebar li { 1215 | list-style-type: none; 1216 | margin-bottom: 6px; 1217 | margin-bottom: 0.6rem; 1218 | word-wrap: break-word; 1219 | } 1220 | 1221 | .sidebar ul > li:last-child { 1222 | margin-bottom: 0; 1223 | } 1224 | 1225 | .sidebar .widget { 1226 | background-color: #fff; 1227 | border-radius: 3px; 1228 | margin-bottom: 40px; 1229 | margin-bottom: 4rem; 1230 | } 1231 | 1232 | 1233 | /* 1234 | Footer Widgets 1235 | ---------------------------------------------------------------------------------------------------- */ 1236 | 1237 | .footer-widgets { 1238 | background-color: #333; 1239 | color: #999; 1240 | clear: both; 1241 | padding: 40px 5% 16px; 1242 | padding: 4rem 5% 1.6rem; 1243 | } 1244 | 1245 | 1246 | 1247 | .footer-widgets-1, 1248 | .footer-widgets-2, 1249 | .footer-widgets-3 { 1250 | width: 100%; 1251 | } 1252 | 1253 | .footer-widgets-1, 1254 | .footer-widgets-2 { 1255 | float: left; 1256 | } 1257 | 1258 | .footer-widgets-3 { 1259 | float: right; 1260 | } 1261 | 1262 | .footer-widgets a { 1263 | border-bottom: 1px solid #666; 1264 | color: #999; 1265 | } 1266 | 1267 | .footer-widgets a:hover { 1268 | color: #ddd; 1269 | } 1270 | 1271 | .footer-widgets .widget { 1272 | margin-bottom: 24px; 1273 | margin-bottom: 2.4rem; 1274 | } 1275 | 1276 | .footer-widgets .widget-title { 1277 | color: #fff; 1278 | } 1279 | 1280 | .footer-widgets li { 1281 | list-style-type: none; 1282 | margin-bottom: 6px; 1283 | margin-bottom: 0.6rem; 1284 | word-wrap: break-word; 1285 | } 1286 | 1287 | .footer-widgets .search-form input:focus { 1288 | border: 1px solid #ddd; 1289 | } 1290 | 1291 | 1292 | /* 1293 | Site Footer 1294 | ---------------------------------------------------------------------------------------------------- */ 1295 | 1296 | .site-footer { 1297 | background-color: #fff; 1298 | color: #999; 1299 | font-size: 14px; 1300 | font-size: 1.4rem; 1301 | padding: 24px 0; 1302 | padding: 2.4rem 0; 1303 | text-align: center; 1304 | } 1305 | 1306 | .site-footer a { 1307 | border-bottom: 1px solid #ddd; 1308 | } 1309 | 1310 | .site-footer p { 1311 | margin-bottom: 0; 1312 | } 1313 | 1314 | 1315 | /* 1316 | Media Queries 1317 | ---------------------------------------------------------------------------------------------------- */ 1318 | 1319 | @media only screen and (-webkit-min-device-pixel-ratio: 1.5), 1320 | only screen and (-moz-min-device-pixel-ratio: 1.5), 1321 | only screen and (-o-min-device-pixel-ratio: 3/2), 1322 | only screen and (min-device-pixel-ratio: 1.5) { 1323 | 1324 | .header-image .site-header .wrap { 1325 | background: url(images/logo@2x.png) no-repeat left; 1326 | background-size: 320px 164px; 1327 | } 1328 | 1329 | } 1330 | 1331 | @media only screen and (min-width: 1024px) { 1332 | 1333 | body { 1334 | background-color: #f5f5f5; 1335 | } 1336 | 1337 | .site-header .wrap { 1338 | padding: 40px 0; 1339 | padding: 4rem 0; 1340 | } 1341 | 1342 | .title-area { 1343 | text-align: left; 1344 | } 1345 | 1346 | .header-image .site-header .wrap { 1347 | background-position: left top; 1348 | } 1349 | 1350 | .header-image .site-header .widget-area { 1351 | padding: 40px 0; 1352 | padding: 4rem 0; 1353 | } 1354 | 1355 | .site-header .search-form { 1356 | float: right; 1357 | margin: 24px 0 0; 1358 | margin: 2.4rem 0 0; 1359 | } 1360 | 1361 | .content, 1362 | .site-header .widget-area { 1363 | width: 620px; 1364 | } 1365 | 1366 | .full-width-content .content { 1367 | width: 100%; 1368 | } 1369 | 1370 | .site-header .widget-area { 1371 | text-align: right; 1372 | } 1373 | 1374 | .genesis-nav-menu { 1375 | text-align: left; 1376 | } 1377 | 1378 | .genesis-nav-menu a { 1379 | padding: 28px 24px; 1380 | padding: 2.8rem 2.4rem; 1381 | } 1382 | 1383 | .genesis-nav-menu > .first > a { 1384 | padding-left: 0; 1385 | } 1386 | 1387 | .genesis-nav-menu > .last > a { 1388 | padding-right: 0; 1389 | } 1390 | 1391 | .genesis-nav-menu > .right { 1392 | display: inline-block; 1393 | float: right; 1394 | list-style-type: none; 1395 | padding: 28px 0; 1396 | padding: 2.8rem 0; 1397 | text-transform: uppercase; 1398 | } 1399 | 1400 | .genesis-nav-menu > .right > a { 1401 | display: inline; 1402 | padding: 0; 1403 | } 1404 | 1405 | .genesis-nav-menu > .search { 1406 | padding: 14px 0 0; 1407 | padding: 1.4rem 0 0; 1408 | } 1409 | 1410 | .site-inner, 1411 | .wrap { 1412 | padding-left: 0; 1413 | padding-right: 0; 1414 | } 1415 | 1416 | .content-sidebar-sidebar .content-sidebar-wrap, 1417 | .sidebar-content-sidebar .content-sidebar-wrap, 1418 | .sidebar-sidebar-content .content-sidebar-wrap { 1419 | width: 740px; 1420 | } 1421 | 1422 | .sidebar-content-sidebar .content, 1423 | .sidebar-sidebar-content .content, 1424 | .content-sidebar-sidebar .content { 1425 | width: 400px; 1426 | } 1427 | 1428 | .site-footer { 1429 | padding: 40px 0; 1430 | padding: 4rem 0; 1431 | } 1432 | 1433 | .footer-widgets { 1434 | padding: 40px 0 16px; 1435 | padding: 4rem 0 1.6rem; 1436 | } 1437 | 1438 | .footer-widgets-1, 1439 | .footer-widgets-2, 1440 | .footer-widgets-3, 1441 | .sidebar-primary, 1442 | .title-area { 1443 | width: 300px; 1444 | } 1445 | 1446 | .sidebar-secondary { 1447 | width: 180px; 1448 | } 1449 | 1450 | .footer-widgets-1 { 1451 | margin-right: 40px; 1452 | margin-right: 4rem; 1453 | } 1454 | 1455 | .archive-description { 1456 | padding: 40px 40px 24px; 1457 | padding: 4rem 4rem 2.4rem; 1458 | } 1459 | 1460 | .author-box { 1461 | padding: 40px; 1462 | padding: 4rem; 1463 | } 1464 | 1465 | .comment-respond, 1466 | .entry-pings { 1467 | padding: 40px 40px 16px; 1468 | padding: 4rem 4rem 1.6rem; 1469 | } 1470 | 1471 | .entry { 1472 | padding: 40px 40px 24px; 1473 | padding: 4rem 4rem 2.4rem; 1474 | } 1475 | 1476 | .entry-comments { 1477 | padding: 40px; 1478 | padding: 4rem; 1479 | } 1480 | 1481 | .entry-footer .entry-meta { 1482 | border-top: 2px solid #f5f5f5; 1483 | margin: 0 -40px; 1484 | margin: 0 -4rem; 1485 | padding: 32px 40px 8px; 1486 | padding: 3.2rem 4rem 0.8rem; 1487 | } 1488 | 1489 | .sidebar .widget { 1490 | padding: 40px; 1491 | padding: 4rem; 1492 | } 1493 | 1494 | .five-sixths, 1495 | .four-sixths, 1496 | .one-fourth, 1497 | .one-half, 1498 | .one-sixth, 1499 | .one-third, 1500 | .three-fourths, 1501 | .three-sixths, 1502 | .two-fourths, 1503 | .two-sixths, 1504 | .two-thirds { 1505 | margin-left: 2.564102564102564%; 1506 | } 1507 | 1508 | .one-half, 1509 | .three-sixths, 1510 | .two-fourths { 1511 | width: 48.717948717948715%; 1512 | } 1513 | 1514 | .one-third, 1515 | .two-sixths { 1516 | width: 31.623931623931625%; 1517 | } 1518 | 1519 | .four-sixths, 1520 | .two-thirds { 1521 | width: 65.81196581196582%; 1522 | } 1523 | 1524 | .one-fourth { 1525 | width: 23.076923076923077%; 1526 | } 1527 | 1528 | .three-fourths { 1529 | width: 74.35897435897436%; 1530 | } 1531 | 1532 | .one-sixth { 1533 | width: 14.52991452991453%; 1534 | } 1535 | 1536 | .five-sixths { 1537 | width: 82.90598290598291%; 1538 | } 1539 | 1540 | .first { 1541 | clear: both; 1542 | margin-left: 0; 1543 | } 1544 | 1545 | } 1546 | 1547 | @media only screen and (min-width: 1140px) { 1548 | 1549 | .site-inner, 1550 | .wrap { 1551 | max-width: 1140px; 1552 | } 1553 | 1554 | .content-sidebar-sidebar .content-sidebar-wrap, 1555 | .sidebar-content-sidebar .content-sidebar-wrap, 1556 | .sidebar-sidebar-content .content-sidebar-wrap { 1557 | width: 920px; 1558 | } 1559 | 1560 | .content { 1561 | float: right; 1562 | width: 740px; 1563 | } 1564 | 1565 | .site-header .widget-area { 1566 | width: 800px; 1567 | } 1568 | 1569 | .content-sidebar-sidebar .content, 1570 | .sidebar-content-sidebar .content, 1571 | .sidebar-sidebar-content .content { 1572 | width: 520px; 1573 | } 1574 | 1575 | .footer-widgets-1, 1576 | .footer-widgets-3 { 1577 | width: 350px; 1578 | } 1579 | 1580 | .footer-widgets-2 { 1581 | width: 360px; 1582 | } 1583 | 1584 | .sidebar-primary { 1585 | width: 360px; 1586 | } 1587 | 1588 | } --------------------------------------------------------------------------------