-
-
Save DavidPeralvarez/ee0956b662e54bf15c2732284b5c7cd2 to your computer and use it in GitHub Desktop.
Lección #13 del curso: CSS Grid
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*! | |
| Theme Name: Genesis Sample | |
| Theme URI: https://demo.studiopress.com/ | |
| Description: This is the sample theme created for the Genesis Framework. | |
| Author: StudioPress | |
| Author URI: https://www.studiopress.com/ | |
| Version: 2.6.0 | |
| Tags: one-column, two-columns, left-sidebar, right-sidebar, accessibility-ready, custom-colors, custom-logo, custom-menu, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready | |
| Template: genesis | |
| License: GPL-2.0+ | |
| License URI: http://www.gnu.org/licenses/gpl-2.0.html | |
| Text Domain: genesis-sample | |
| */ | |
| /* Table of Contents | |
| - HTML5 Reset | |
| - Baseline Normalize | |
| - Box Sizing | |
| - Float Clearing | |
| - Defaults | |
| - Typographical Elements | |
| - Headings | |
| - Objects | |
| - Gallery | |
| - Forms | |
| - Tables | |
| - Screen Reader Text | |
| - Structure and Layout | |
| - Site Container | |
| - Site Inner | |
| - Common Classes | |
| - Avatar | |
| - Genesis | |
| - Search Form | |
| - Titles | |
| - WordPress | |
| - Widgets | |
| - Featured Content | |
| - Plugins | |
| - Genesis eNews Extended | |
| - Genesis Simple FAQ | |
| - Jetpack | |
| - Skip Links | |
| - Site Header | |
| - Title Area | |
| - Site Navigation | |
| - Responsive Menu | |
| - Header Menu | |
| - Footer Menu | |
| - Content Area | |
| - Entry Content | |
| - Entry Meta | |
| - Pagination | |
| - Entry Comments | |
| - Sidebar | |
| - Footer Widgets | |
| - Site Footer | |
| - Home | |
| - Media Queries | |
| - Min-width: 960px | |
| - Site Header | |
| - Genesis Menu | |
| - Responsive Menu | |
| - Header Menu | |
| - Site Inner | |
| - Content | |
| - Sidebar | |
| - Author Box | |
| - After Entry | |
| - Column Classes | |
| - Entry Misc. | |
| - Footer Widgets | |
| - Print Styles | |
| */ | |
| /* HTML5 Reset | |
| ---------------------------------------------------------------------------------------------------- */ | |
| /* Baseline Normalize | |
| --------------------------------------------- */ | |
| /* normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */ | |
| button,hr,input{overflow:visible}progress,sub,sup{vertical-align:baseline}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none} | |
| /* Box Sizing | |
| --------------------------------------------- */ | |
| html { | |
| box-sizing: border-box; | |
| } | |
| *, | |
| *::before, | |
| *::after { | |
| box-sizing: inherit; | |
| } | |
| /* Float Clearing | |
| --------------------------------------------- */ | |
| .author-box::before, | |
| .clearfix::before, | |
| .entry::before, | |
| .entry-content::before, | |
| .footer-widgets::before, | |
| .nav-primary::before, | |
| .nav-secondary::before, | |
| .pagination::before, | |
| .site-container::before, | |
| .site-footer::before, | |
| .site-header::before, | |
| .site-inner::before, | |
| .widget::before, | |
| .wrap::before { | |
| content: " "; | |
| display: table; | |
| } | |
| .author-box::after, | |
| .clearfix::after, | |
| .entry::after, | |
| .entry-content::after, | |
| .footer-widgets::after, | |
| .nav-primary::after, | |
| .nav-secondary::after, | |
| .pagination::after, | |
| .site-container::after, | |
| .site-footer::after, | |
| .site-header::after, | |
| .site-inner::after, | |
| .widget::after, | |
| .wrap::after { | |
| clear: both; | |
| content: " "; | |
| display: table; | |
| } | |
| /* Defaults | |
| ---------------------------------------------------------------------------------------------------- */ | |
| /* Typographical Elements | |
| --------------------------------------------- */ | |
| html { | |
| font-size: 62.5%; /* 10px browser default */ | |
| -moz-osx-font-smoothing: grayscale; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| /* Chrome fix */ | |
| body > div { | |
| font-size: 18px; | |
| font-size: 1.8rem; | |
| } | |
| body { | |
| background-color: #fff; | |
| color: #333; | |
| font-family: 'Montserrat', sans-serif; | |
| font-size: 18px; | |
| font-size: 1.8rem; | |
| font-weight: 300; | |
| line-height: 1.625; | |
| margin: 0; | |
| } | |
| button, | |
| input:focus, | |
| input[type="button"], | |
| input[type="reset"], | |
| input[type="submit"], | |
| textarea:focus, | |
| .button, | |
| .gallery img { | |
| transition: all 0.2s ease-in-out; | |
| } | |
| a { | |
| color: #0073e5; | |
| text-decoration: underline; | |
| transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out; | |
| } | |
| a:focus, | |
| a:hover { | |
| color: #333; | |
| text-decoration: none; | |
| } | |
| p { | |
| margin: 0 0 30px; | |
| padding: 0; | |
| } | |
| ol, | |
| ul { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| li { | |
| list-style-type: none; | |
| } | |
| hr { | |
| border: 0; | |
| border-collapse: collapse; | |
| border-top: 1px solid #eee; | |
| clear: both; | |
| margin: 30px 0; | |
| } | |
| b, | |
| strong { | |
| font-weight: 600; | |
| } | |
| blockquote, | |
| cite, | |
| em, | |
| i { | |
| font-style: italic; | |
| } | |
| mark { | |
| background: #ddd; | |
| color: #333; | |
| } | |
| blockquote { | |
| margin: 30px; | |
| } | |
| blockquote::before { | |
| content: "\201C"; | |
| display: block; | |
| font-size: 30px; | |
| font-size: 3rem; | |
| height: 0; | |
| left: -20px; | |
| position: relative; | |
| top: -10px; | |
| } | |
| /* Headings | |
| --------------------------------------------- */ | |
| h1, | |
| h2, | |
| h3, | |
| h4, | |
| h5, | |
| h6 { | |
| font-family: 'Montserrat', sans-serif; | |
| font-weight: 600; | |
| line-height: 1.2; | |
| margin: 0 0 20px; | |
| } | |
| h1 { | |
| font-size: 30px; | |
| font-size: 3rem; | |
| } | |
| h2 { | |
| font-size: 27px; | |
| font-size: 2.7rem; | |
| } | |
| .entry-content h3, | |
| .entry-content h4 { | |
| font-weight: 600; | |
| } | |
| h3 { | |
| font-size: 24px; | |
| font-size: 2.4rem; | |
| } | |
| h4 { | |
| font-size: 20px; | |
| font-size: 2rem; | |
| } | |
| .entry-content h4 { | |
| margin-top: 40px; | |
| } | |
| h5 { | |
| font-size: 18px; | |
| font-size: 1.8rem; | |
| } | |
| h6 { | |
| font-size: 16px; | |
| font-size: 1.6rem; | |
| } | |
| /* Objects | |
| --------------------------------------------- */ | |
| embed, | |
| iframe, | |
| img, | |
| object, | |
| video, | |
| .wp-caption { | |
| max-width: 100%; | |
| } | |
| img { | |
| height: auto; | |
| vertical-align: top; | |
| } | |
| figure { | |
| margin: 0; | |
| } | |
| /* Gallery | |
| --------------------------------------------- */ | |
| .gallery { | |
| overflow: hidden; | |
| } | |
| .gallery img { | |
| border: 1px solid #eee; | |
| height: auto; | |
| padding: 4px; | |
| } | |
| .gallery img:focus, | |
| .gallery img:hover { | |
| border: 1px solid #999; | |
| outline: none; | |
| } | |
| .gallery-columns-1 .gallery-item { | |
| width: 100%; | |
| } | |
| .gallery-columns-2 .gallery-item { | |
| width: 50%; | |
| } | |
| .gallery-columns-3 .gallery-item { | |
| width: 33%; | |
| } | |
| .gallery-columns-4 .gallery-item { | |
| width: 25%; | |
| } | |
| .gallery-columns-5 .gallery-item { | |
| width: 20%; | |
| } | |
| .gallery-columns-6 .gallery-item { | |
| width: 16.6666%; | |
| } | |
| .gallery-columns-7 .gallery-item { | |
| width: 14.2857%; | |
| } | |
| .gallery-columns-8 .gallery-item { | |
| width: 12.5%; | |
| } | |
| .gallery-columns-9 .gallery-item { | |
| width: 11.1111%; | |
| } | |
| .gallery-columns-2 .gallery-item:nth-child(2n+1), | |
| .gallery-columns-3 .gallery-item:nth-child(3n+1), | |
| .gallery-columns-4 .gallery-item:nth-child(4n+1), | |
| .gallery-columns-5 .gallery-item:nth-child(5n+1), | |
| .gallery-columns-6 .gallery-item:nth-child(6n+1), | |
| .gallery-columns-7 .gallery-item:nth-child(7n+1), | |
| .gallery-columns-8 .gallery-item:nth-child(8n+1), | |
| .gallery-columns-9 .gallery-item:nth-child(9n+1) { | |
| clear: left; | |
| } | |
| .gallery-item { | |
| float: left; | |
| margin: 0 0 30px; | |
| text-align: center; | |
| } | |
| /* Forms | |
| --------------------------------------------- */ | |
| input, | |
| select, | |
| textarea { | |
| background-color: #fff; | |
| border: 1px solid #ddd; | |
| color: #333; | |
| font-size: 18px; | |
| font-size: 1.8rem; | |
| font-weight: 300; | |
| padding: 15px; | |
| width: 100%; | |
| } | |
| input:focus, | |
| textarea:focus { | |
| border: 1px solid #999; | |
| outline: none; | |
| } | |
| input[type="checkbox"], | |
| input[type="image"], | |
| input[type="radio"] { | |
| width: auto; | |
| } | |
| ::-moz-placeholder { | |
| color: #333; | |
| opacity: 1; | |
| } | |
| ::-webkit-input-placeholder { | |
| color: #333; | |
| } | |
| button, | |
| input[type="button"], | |
| input[type="reset"], | |
| input[type="submit"], | |
| .button { | |
| background-color: #333; | |
| border: 0; | |
| color: #fff; | |
| cursor: pointer; | |
| font-size: 16px; | |
| font-size: 1.6rem; | |
| font-weight: 600; | |
| padding: 15px 30px; | |
| text-decoration: none; | |
| white-space: normal; | |
| width: auto; | |
| } | |
| button:focus, | |
| button:hover, | |
| input[type="button"]:focus, | |
| input[type="button"]:hover, | |
| input[type="reset"]:focus, | |
| input[type="reset"]:hover, | |
| input[type="submit"]:focus, | |
| input[type="submit"]:hover, | |
| .button:focus, | |
| .button:hover { | |
| background-color: #0073e5; | |
| color: #fff; | |
| } | |
| .entry-content .button:focus, | |
| .entry-content .button:hover { | |
| color: #fff; | |
| } | |
| .button { | |
| display: inline-block; | |
| } | |
| a.button.small, | |
| button.small, | |
| input[type="button"].small, | |
| input[type="reset"].small, | |
| input[type="submit"].small { | |
| padding: 8px 16px; | |
| } | |
| .site-container button:disabled, | |
| .site-container button:disabled:hover, | |
| .site-container input:disabled, | |
| .site-container input:disabled:hover, | |
| .site-container input[type="button"]:disabled, | |
| .site-container input[type="button"]:disabled:hover, | |
| .site-container input[type="reset"]:disabled, | |
| .site-container input[type="reset"]:disabled:hover, | |
| .site-container input[type="submit"]:disabled, | |
| .site-container input[type="submit"]:disabled:hover { | |
| background-color: #eee; | |
| border-width: 0; | |
| color: #777; | |
| cursor: not-allowed; | |
| } | |
| input[type="search"]::-webkit-search-cancel-button, | |
| input[type="search"]::-webkit-search-results-button { | |
| display: none; | |
| } | |
| /* Tables | |
| --------------------------------------------- */ | |
| table { | |
| border-collapse: collapse; | |
| border-spacing: 0; | |
| line-height: 2; | |
| margin-bottom: 40px; | |
| width: 100%; | |
| word-break: break-all; | |
| } | |
| tbody { | |
| border-bottom: 1px solid #eee; | |
| } | |
| td, | |
| th { | |
| text-align: left; | |
| } | |
| td { | |
| border-top: 1px solid #eee; | |
| padding: 6px; | |
| } | |
| th { | |
| font-weight: 300; | |
| padding: 0 6px; | |
| } | |
| td:first-child, | |
| th:first-child { | |
| padding-left: 0; | |
| } | |
| /* Screen Reader Text | |
| --------------------------------------------- */ | |
| .screen-reader-shortcut, | |
| .screen-reader-text, | |
| .screen-reader-text span { | |
| border: 0; | |
| clip: rect(0, 0, 0, 0); | |
| height: 1px; | |
| overflow: hidden; | |
| position: absolute !important; | |
| width: 1px; | |
| word-wrap: normal !important; | |
| } | |
| .screen-reader-text:focus, | |
| .screen-reader-shortcut:focus, | |
| .widget_search input[type="submit"]:focus { | |
| background: #fff; | |
| box-shadow: 0 0 2px 2px rgba(0,0,0,.6); | |
| clip: auto !important; | |
| color: #333; | |
| display: block; | |
| font-size: 1em; | |
| font-weight: bold; | |
| height: auto; | |
| padding: 15px 23px 14px; | |
| text-decoration: none; | |
| width: auto; | |
| z-index: 100000; /* Above WP toolbar. */ | |
| } | |
| .more-link { | |
| position: relative; | |
| } | |
| /* Structure and Layout | |
| ---------------------------------------------------------------------------------------------------- */ | |
| /* Site Container | |
| --------------------------------------------- */ | |
| .site-container { | |
| -webkit-animation: fadein 1s; | |
| animation: fadein 1s; | |
| word-wrap: break-word; | |
| } | |
| @keyframes fadein { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| @-webkit-keyframes fadein { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| /* Site Inner | |
| --------------------------------------------- */ | |
| .site-inner { | |
| clear: both; | |
| margin: 0 auto; | |
| padding: 60px 30px 0; | |
| } | |
| .home .site-inner{ | |
| padding: 60px 0 0; | |
| } | |
| /* Common Classes | |
| ---------------------------------------------------------------------------------------------------- */ | |
| /* Avatar | |
| --------------------------------------------- */ | |
| .avatar { | |
| border-radius: 50%; | |
| float: left; | |
| } | |
| .author-box .avatar, | |
| .alignleft .avatar { | |
| margin-right: 20px; | |
| } | |
| .alignright .avatar { | |
| margin-left: 20px; | |
| } | |
| .comment .avatar { | |
| margin: 0 15px 20px 0; | |
| } | |
| /* Genesis | |
| --------------------------------------------- */ | |
| .after-entry, | |
| .archive-description, | |
| .author-box { | |
| margin-bottom: 40px; | |
| } | |
| .after-entry { | |
| box-shadow: 0 0 20px rgba(0,0,0,0.05); | |
| padding: 20px 30px; | |
| } | |
| .after-entry .widget:last-of-type { | |
| margin-bottom: 0; | |
| } | |
| .breadcrumb { | |
| border-bottom: 1px solid #eee; | |
| font-size: 16px; | |
| font-size: 1.6rem; | |
| margin-bottom: 40px; | |
| padding-bottom: 10px; | |
| } | |
| .archive-description p:last-child, | |
| .author-box p:last-child { | |
| margin-bottom: 0; | |
| } | |
| /* Search Form | |
| --------------------------------------------- */ | |
| .search-form { | |
| overflow: hidden; | |
| } | |
| .entry-content .search-form { | |
| margin-bottom: 40px; | |
| width: 50%; | |
| } | |
| .post-password-form input[type="submit"], | |
| .search-form input[type="submit"] { | |
| margin-top: 10px; | |
| } | |
| .widget_search input[type="submit"] { | |
| border: 0; | |
| clip: rect(0, 0, 0, 0); | |
| height: 1px; | |
| margin: -1px; | |
| padding: 0; | |
| position: absolute; | |
| width: 1px; | |
| } | |
| /* Titles | |
| --------------------------------------------- */ | |
| .archive-description .entry-title, | |
| .archive-title, | |
| .author-box-title { | |
| font-size: 20px; | |
| font-size: 2rem; | |
| font-weight: 600; | |
| margin-bottom: 10px; | |
| } | |
| .entry-title { | |
| font-size: 30px; | |
| font-size: 3rem; | |
| margin-bottom: 10px; | |
| } | |
| .entry-title a, | |
| .sidebar .widget-title a { | |
| color: #333; | |
| text-decoration: none; | |
| } | |
| .entry-title a:focus, | |
| .entry-title a:hover { | |
| color: #0073e5; | |
| } | |
| .widget-title { | |
| font-size: 18px; | |
| font-size: 1.8rem; | |
| font-weight: 600; | |
| margin-bottom: 20px; | |
| } | |
| /* WordPress | |
| --------------------------------------------- */ | |
| .aligncenter { | |
| text-align: center; | |
| } | |
| a.aligncenter img { | |
| display: block; | |
| margin: 0 auto; | |
| } | |
| a.alignnone { | |
| display: inline-block; | |
| } | |
| .alignleft { | |
| float: left; | |
| text-align: left; | |
| } | |
| .alignright { | |
| float: right; | |
| text-align: right; | |
| } | |
| a.alignleft, | |
| a.alignnone, | |
| a.alignright { | |
| max-width: 100%; | |
| } | |
| img.centered, | |
| .aligncenter { | |
| display: block; | |
| margin: 0 auto 30px; | |
| } | |
| img.alignnone, | |
| .alignnone { | |
| margin-bottom: 15px; | |
| } | |
| a.alignleft, | |
| img.alignleft, | |
| .wp-caption.alignleft { | |
| margin: 0 20px 20px 0; | |
| } | |
| a.alignright, | |
| img.alignright, | |
| .wp-caption.alignright { | |
| margin: 0 0 20px 20px; | |
| } | |
| .gallery-caption, | |
| .wp-caption-text { | |
| font-size: 14px; | |
| font-size: 1.4rem; | |
| font-weight: 600; | |
| margin: 0; | |
| text-align: center; | |
| } | |
| .entry-content p.wp-caption-text { | |
| margin-bottom: 0; | |
| } | |
| .entry-content .wp-audio-shortcode, | |
| .entry-content .wp-playlist, | |
| .entry-content .wp-video { | |
| margin: 0 0 30px; | |
| } | |
| /* Widgets | |
| ---------------------------------------------------------------------------------------------------- */ | |
| .widget { | |
| margin-bottom: 40px; | |
| } | |
| .widget p:last-child, | |
| .widget ul > li:last-of-type { | |
| margin-bottom: 0; | |
| } | |
| .widget ul > li { | |
| margin-bottom: 10px; | |
| } | |
| .widget ul > li:last-of-type { | |
| padding-bottom: 0; | |
| } | |
| .widget ol > li { | |
| list-style-position: inside; | |
| list-style-type: decimal; | |
| padding-left: 20px; | |
| text-indent: -20px; | |
| } | |
| .widget li li { | |
| border: 0; | |
| margin: 0 0 0 30px; | |
| padding: 0; | |
| } | |
| .widget_calendar table { | |
| width: 100%; | |
| } | |
| .widget_calendar td, | |
| .widget_calendar th { | |
| text-align: center; | |
| } | |
| /* Featured Content | |
| --------------------------------------------- */ | |
| .featured-content .entry { | |
| border-bottom: 1px solid #eee; | |
| margin-bottom: 20px; | |
| } | |
| .featured-content .entry:last-of-type { | |
| border-bottom: none; | |
| margin-bottom: 0; | |
| } | |
| .featured-content .entry-image { | |
| height: 75px; | |
| width: 75px; | |
| } | |
| .featured-content .entry-title { | |
| font-size: 16px; | |
| font-size: 1.6rem; | |
| margin-bottom: 5px; | |
| margin-top: 10px; | |
| } | |
| /* Plugins | |
| ---------------------------------------------------------------------------------------------------- */ | |
| /* Genesis eNews Extended | |
| --------------------------------------------- */ | |
| .after-entry .enews { | |
| text-align: center; | |
| padding: 10px; | |
| } | |
| .sidebar .enews { | |
| background-color: #f5f5f5; | |
| padding: 30px; | |
| } | |
| .enews-widget input { | |
| font-size: 16px; | |
| font-size: 1.6rem; | |
| margin-bottom: 10px; | |
| } | |
| .after-entry .enews-widget input { | |
| text-align: center; | |
| } | |
| .enews-widget input[type="submit"] { | |
| margin: 0; | |
| width: 100%; | |
| } | |
| .enews form + p { | |
| margin-top: 20px; | |
| } | |
| /* Genesis Simple FAQ | |
| --------------------------------------------- */ | |
| .gs-faq__question { | |
| background: transparent; | |
| border-bottom: 1px solid #eee; | |
| color: #333; | |
| padding-left: 0; | |
| padding-right: 0; | |
| } | |
| .gs-faq__question:focus, | |
| .gs-faq__question:hover { | |
| background: transparent; | |
| color: #0073e5; | |
| } | |
| .gs-faq__question::after { | |
| content: "\f132"; | |
| font-family: "dashicons"; | |
| float: right; | |
| } | |
| .gs-faq__question.gs-faq--expanded::after { | |
| content: "\f460"; | |
| } | |
| /* Jetpack | |
| --------------------------------------------- */ | |
| #wpstats { | |
| display: none; | |
| } | |
| /* Skip Links | |
| ---------------------------------------------------------------------------------------------------- */ | |
| .genesis-skip-link { | |
| margin: 0; | |
| } | |
| .genesis-skip-link .skip-link-hidden { | |
| display: none; | |
| visibility: hidden; | |
| } | |
| .genesis-skip-link li { | |
| height: 0; | |
| list-style: none; | |
| width: 0; | |
| } | |
| /* Display outline on focus */ | |
| :focus { | |
| color: #333; | |
| outline: #ccc solid 1px; | |
| } | |
| /* Site Header | |
| ---------------------------------------------------------------------------------------------------- */ | |
| .site-header { | |
| background-color: #fff; | |
| box-shadow: 0 0 20px rgba(0,0,0,0.05); | |
| padding: 0 30px; | |
| } | |
| /* Title Area | |
| --------------------------------------------- */ | |
| .title-area { | |
| float: left; | |
| padding-bottom: 25px; | |
| padding-top: 25px; | |
| } | |
| .wp-custom-logo .title-area { | |
| max-width: 350px; | |
| padding-bottom: 5px; | |
| padding-top: 5px; | |
| } | |
| .site-title { | |
| font-size: 20px; | |
| font-size: 2rem; | |
| font-weight: 600; | |
| line-height: 1; | |
| margin-bottom: 0; | |
| } | |
| .site-title a, | |
| .site-title a:focus, | |
| .site-title a:hover { | |
| color: #333; | |
| text-decoration: none; | |
| } | |
| .site-description, | |
| .wp-custom-logo .site-title { | |
| border: 0; | |
| clip: rect(0, 0, 0, 0); | |
| height: 1px; | |
| overflow: hidden; | |
| position: absolute !important; | |
| width: 1px; | |
| word-wrap: normal !important; | |
| } | |
| /* Site Navigation | |
| ---------------------------------------------------------------------------------------------------- */ | |
| .genesis-nav-menu { | |
| clear: both; | |
| line-height: 1; | |
| width: 100%; | |
| } | |
| .genesis-nav-menu .menu-item { | |
| display: block; | |
| float: none; | |
| position: relative; | |
| } | |
| .genesis-nav-menu a { | |
| color: #333; | |
| display: block; | |
| font-size: 15px; | |
| font-size: 1.5rem; | |
| font-weight: 300; | |
| outline-offset: -1px; | |
| padding-bottom: 12px; | |
| padding-top: 12px; | |
| text-decoration: none; | |
| } | |
| .genesis-nav-menu a:focus, | |
| .genesis-nav-menu a:hover, | |
| .genesis-nav-menu .current-menu-item > a, | |
| .genesis-nav-menu .sub-menu .current-menu-item > a:focus, | |
| .genesis-nav-menu .sub-menu .current-menu-item > a:hover { | |
| color: #0073e5; | |
| text-decoration: none; | |
| } | |
| .genesis-nav-menu .sub-menu, | |
| .genesis-nav-menu .sub-menu a { | |
| width: 100%; | |
| } | |
| .genesis-nav-menu .sub-menu { | |
| clear: both; | |
| display: none; | |
| left: -9999px; | |
| margin: 0; | |
| opacity: 1; | |
| padding-left: 15px; | |
| position: static; | |
| z-index: 99; | |
| } | |
| .genesis-nav-menu .sub-menu a { | |
| background-color: #fff; | |
| font-size: 14px; | |
| font-size: 1.4rem; | |
| position: relative; | |
| word-wrap: break-word; | |
| } | |
| .genesis-nav-menu .menu-item:focus, | |
| .genesis-nav-menu .menu-item:hover { | |
| position: relative; | |
| } | |
| .genesis-nav-menu .menu-item:hover > .sub-menu { | |
| left: auto; | |
| opacity: 1; | |
| } | |
| /* Responsive Menu | |
| --------------------------------------------- */ | |
| .menu .menu-item:focus { | |
| position: static; | |
| } | |
| .menu .menu-item > a:focus + ul.sub-menu, | |
| .menu .menu-item.sfHover > ul.sub-menu { | |
| left: auto; | |
| opacity: 1; | |
| } | |
| .genesis-responsive-menu { | |
| display: none; | |
| padding-bottom: 15px; | |
| position: relative; | |
| } | |
| .menu-toggle, | |
| .sub-menu-toggle { | |
| background-color: transparent; | |
| border-width: 0; | |
| color: #333; | |
| display: block; | |
| margin: 0 auto; | |
| overflow: hidden; | |
| text-align: center; | |
| visibility: visible; | |
| } | |
| .menu-toggle:focus, | |
| .menu-toggle:hover, | |
| .sub-menu-toggle:focus, | |
| .sub-menu-toggle:hover { | |
| background-color: transparent; | |
| border-width: 0; | |
| color: #0073e5; | |
| } | |
| .menu-toggle { | |
| float: right; | |
| line-height: 20px; | |
| margin-bottom: 10px; | |
| margin-top: 10px; | |
| padding: 15px 0; | |
| position: relative; | |
| z-index: 1000; | |
| } | |
| .menu-toggle.activated::before { | |
| content: "\f335"; | |
| } | |
| .site-header .menu-toggle::before { | |
| float: left; | |
| margin-right: 5px; | |
| position: relative; | |
| text-rendering: auto; | |
| top: 1px; | |
| } | |
| .sub-menu-toggle { | |
| float: right; | |
| padding: 9px 10px; | |
| position: absolute; | |
| right: 0; | |
| top: 0; | |
| z-index: 100; | |
| } | |
| .sub-menu .sub-menu-toggle { | |
| padding: 12px 10px; | |
| } | |
| .sub-menu-toggle::before { | |
| display: inline-block; | |
| text-rendering: auto; | |
| -webkit-transform: rotate( 0 ); | |
| -ms-transform: rotate( 0 ); | |
| transform: rotate( 0 ); | |
| transition: transform .25s ease-in-out; | |
| } | |
| .sub-menu-toggle.activated::before { | |
| -webkit-transform: rotate( 180deg ); | |
| -ms-transform: rotate( 180deg ); | |
| transform: rotate( 180deg ); | |
| } | |
| /* Header Menu | |
| --------------------------------------------- */ | |
| .nav-primary { | |
| clear: left; | |
| width: 100%; | |
| } | |
| /* Footer Menu | |
| --------------------------------------------- */ | |
| .nav-secondary { | |
| margin-top: 10px; | |
| } | |
| .nav-secondary .genesis-nav-menu { | |
| line-height: 1.5; | |
| } | |
| .nav-secondary .menu-item { | |
| display: inline-block; | |
| } | |
| .nav-secondary a { | |
| margin-left: 10px; | |
| margin-right: 10px; | |
| padding: 0; | |
| } | |
| /* Content Area | |
| ---------------------------------------------------------------------------------------------------- */ | |
| /* Entry Content | |
| --------------------------------------------- */ | |
| .entry { | |
| margin-bottom: 40px; | |
| } | |
| .entry-content ol, | |
| .entry-content ul { | |
| margin-bottom: 30px; | |
| margin-left: 40px; | |
| } | |
| .entry-content ol > li { | |
| list-style-type: decimal; | |
| } | |
| .entry-content ul > li { | |
| list-style-type: disc; | |
| } | |
| .entry-content ol ol, | |
| .entry-content ul ul { | |
| margin-bottom: 0; | |
| } | |
| .entry-content code { | |
| background-color: #f5f5f5; | |
| } | |
| .entry-content .caption { | |
| font-size: 14px; | |
| font-weight: 600; | |
| margin-top: -20px; | |
| text-align: center; | |
| } | |
| .content .sticky { | |
| background-color: #f5f5f5; | |
| padding: 30px; | |
| } | |
| /* Entry Meta | |
| --------------------------------------------- */ | |
| p.entry-meta { | |
| font-size: 16px; | |
| font-size: 1.6rem; | |
| margin-bottom: 0; | |
| } | |
| .entry-header .entry-meta { | |
| margin-bottom: 20px; | |
| } | |
| .entry-footer .entry-meta { | |
| border-top: 1px solid #eee; | |
| padding-top: 20px; | |
| } | |
| .entry-categories, | |
| .entry-tags { | |
| display: block; | |
| } | |
| .entry-comments-link::before { | |
| content: "\2014"; | |
| margin: 0 6px 0 2px; | |
| } | |
| /* Pagination | |
| --------------------------------------------- */ | |
| .pagination { | |
| clear: both; | |
| margin: 60px 0; | |
| } | |
| .adjacent-entry-pagination { | |
| margin-bottom: 0; | |
| } | |
| .archive-pagination li { | |
| display: inline; | |
| } | |
| .archive-pagination li a { | |
| background-color: #f5f5f5; | |
| color: #333; | |
| cursor: pointer; | |
| display: inline-block; | |
| font-size: 16px; | |
| font-size: 1.6rem; | |
| font-weight: 600; | |
| margin-bottom: 4px; | |
| padding: 8px 12px; | |
| text-decoration: none; | |
| } | |
| .archive-pagination li a:focus, | |
| .archive-pagination li a:hover, | |
| .archive-pagination li.active a { | |
| background-color: #333; | |
| color: #fff; | |
| } | |
| /* Entry Comments | |
| --------------------------------------------- */ | |
| .comment-respond, | |
| .entry-comments, | |
| .entry-pings { | |
| font-size: 18px; | |
| font-size: 1.8rem; | |
| margin-bottom: 40px; | |
| } | |
| .comment-list li { | |
| padding: 40px 0 0 30px; | |
| } | |
| .comment-list .depth-1 { | |
| padding-left: 0; | |
| } | |
| .comment-list .bypostauthor { | |
| } | |
| .comment-header { | |
| margin-bottom: 30px; | |
| } | |
| .comment-content { | |
| clear: both; | |
| } | |
| .comment-content ul > li { | |
| list-style-type: disc; | |
| } | |
| .comment-respond input[type="email"], | |
| .comment-respond input[type="text"], | |
| .comment-respond input[type="url"] { | |
| width: 50%; | |
| } | |
| .comment-respond label { | |
| display: block; | |
| margin-right: 12px; | |
| } | |
| .comment-header p { | |
| margin-bottom: 0; | |
| } | |
| .entry-pings .reply { | |
| display: none; | |
| } | |
| /* Sidebar | |
| ---------------------------------------------------------------------------------------------------- */ | |
| .sidebar { | |
| font-size: 16px; | |
| font-size: 1.6rem; | |
| line-height: 1.5; | |
| } | |
| .sidebar .widget { | |
| margin-bottom: 40px; | |
| } | |
| .sidebar p { | |
| margin-bottom: 20px; | |
| } | |
| /* Footer Widgets | |
| ---------------------------------------------------------------------------------------------------- */ | |
| .footer-widgets { | |
| border-top: 1px solid #eee; | |
| background-color: #fff; | |
| clear: both; | |
| font-size: 18px; | |
| font-size: 1.8rem; | |
| padding: 60px 0; | |
| } | |
| .footer-widgets .wrap { | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .footer-widget-area { | |
| margin-bottom: 40px; | |
| padding-left: 30px; | |
| padding-right: 30px; | |
| } | |
| .footer-widget-area:last-child , | |
| .footer-widgets .widget:last-child { | |
| margin-bottom: 0; | |
| } | |
| /* Site Footer | |
| ---------------------------------------------------------------------------------------------------- */ | |
| .site-footer { | |
| background-color: #fff; | |
| border-top: 1px solid #eee; | |
| font-size: 15px; | |
| font-size: 1.5rem; | |
| line-height: 1.5; | |
| padding: 30px; | |
| text-align: center; | |
| } | |
| .site-footer p { | |
| margin-bottom: 0; | |
| } | |
| /* Home | |
| ---------------------------------------------------------------------------------------------------- */ | |
| .home .jumbotron{ | |
| max-width: 850px; | |
| margin: 0 auto; | |
| text-align: center; | |
| margin-bottom: 70px; | |
| padding: 0 10px; | |
| h1{ | |
| font-size: 42px; | |
| font-size: 4.2rem; | |
| } | |
| p{ | |
| font-size: 20px; | |
| font-size: 2rem; | |
| } | |
| } | |
| .home .travel-posts{ | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| grid-auto-rows: 200px; | |
| grid-gap: 0.25rem; | |
| li{ | |
| background-size: cover; | |
| a{ | |
| text-decoration: none; | |
| color: #fff; | |
| width: 100%; | |
| height: 100%; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| h2{ | |
| font-size: 20px; | |
| font-size: 2rem; | |
| text-align: center; | |
| background-color: rgba(0,0,0,0.8); | |
| margin: 5px 10px; | |
| padding: 5px; | |
| } | |
| } | |
| } | |
| } | |
| /* Media Queries | |
| ---------------------------------------------------------------------------------------------------- */ | |
| @media only screen and (min-width: 768px){ | |
| /* Home | |
| --------------------------------------------- */ | |
| .home .travel-posts{ | |
| grid-template-columns: repeat(3, 1fr); | |
| grid-auto-rows: 300px; | |
| li a{ | |
| opacity: 0; | |
| transition: opacity 1s; | |
| h2{ | |
| font-size: 36px; | |
| font-size: 3.6rem; | |
| background-color: transparent; | |
| padding: 0; | |
| } | |
| &:hover{ | |
| background-color: rgba(0,0,0,0.5); | |
| opacity: 1; | |
| } | |
| } | |
| } | |
| } | |
| @media only screen and (min-width: 960px) { | |
| /* Site Header | |
| --------------------------------------------- */ | |
| .site-header { | |
| position: fixed; | |
| width: 100%; | |
| z-index: 9999; | |
| } | |
| /* Genesis Menu | |
| --------------------------------------------- */ | |
| .genesis-nav-menu .menu-item { | |
| display: inline-block; | |
| } | |
| .genesis-nav-menu .menu-item:focus, | |
| .genesis-nav-menu .menu-item:hover { | |
| position: relative; | |
| } | |
| .genesis-nav-menu > .menu-bold > a { | |
| font-weight: 600; | |
| } | |
| .genesis-nav-menu > .menu-highlight > a { | |
| background-color: #333; | |
| border-radius: 3px; | |
| color: #fff; | |
| font-weight: 600; | |
| margin-left: 15px; | |
| padding-left: 20px; | |
| padding-right: 20px; | |
| } | |
| .genesis-nav-menu > .menu-highlight > a:hover, | |
| .genesis-nav-menu > .menu-highlight > a:focus { | |
| background-color: #0073e5; | |
| } | |
| .genesis-responsive-menu .genesis-nav-menu .sub-menu, | |
| .genesis-responsive-menu .genesis-nav-menu .sub-menu a { | |
| width: 180px; | |
| } | |
| .genesis-nav-menu .sub-menu { | |
| border-top: 1px solid #eee; | |
| opacity: 0; | |
| padding-left: 0; | |
| position: absolute; | |
| transition: opacity .4s ease-in-out; | |
| } | |
| .genesis-nav-menu .sub-menu a { | |
| border: 1px solid #eee; | |
| border-top: 0; | |
| padding-bottom: 15px; | |
| padding-top: 15px; | |
| } | |
| .genesis-nav-menu .sub-menu .sub-menu { | |
| margin: -46px 0 0 179px; | |
| } | |
| /* Responsive Menu | |
| --------------------------------------------- */ | |
| .genesis-responsive-menu { | |
| display: block; | |
| padding-top: 15px; | |
| } | |
| .menu-toggle, | |
| .sub-menu-toggle { | |
| display: none; | |
| visibility: hidden; | |
| } | |
| /* Header Menu | |
| --------------------------------------------- */ | |
| .nav-primary { | |
| clear: none; | |
| float: right; | |
| width: auto; | |
| } | |
| .nav-primary .genesis-nav-menu a { | |
| padding-left: 15px; | |
| padding-right: 15px; | |
| } | |
| /* Site-Inner | |
| --------------------------------------------- */ | |
| .site-inner { | |
| margin-top: 70px; | |
| max-width: 1140px; | |
| } | |
| .home .site-inner{ | |
| max-width: 100%; | |
| } | |
| /* Content | |
| --------------------------------------------- */ | |
| .content { | |
| float: left; | |
| width: 65%; | |
| } | |
| .sidebar-content .content { | |
| float: right; | |
| } | |
| .full-width-content .content, | |
| .landing-page .content { | |
| float: none; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .home .content{ | |
| width: 100%; | |
| } | |
| /* Sidebar | |
| --------------------------------------------- */ | |
| .sidebar { | |
| float: right; | |
| width: 30%; | |
| } | |
| .sidebar-content .sidebar { | |
| float: left; | |
| } | |
| /* Author Box | |
| --------------------------------------------- */ | |
| .author-box { | |
| background-color: #f5f5f5; | |
| padding: 30px; | |
| } | |
| /* After Entry | |
| --------------------------------------------- */ | |
| .after-entry { | |
| padding: 40px 60px; | |
| } | |
| .after-entry .enews { | |
| padding-left: 30px; | |
| padding-right: 30px; | |
| } | |
| /* Column Classes | |
| --------------------------------------------- */ | |
| .five-sixths, | |
| .four-sixths, | |
| .one-fourth, | |
| .one-half, | |
| .one-sixth, | |
| .one-third, | |
| .three-fourths, | |
| .three-sixths, | |
| .two-fourths, | |
| .two-sixths, | |
| .two-thirds { | |
| float: left; | |
| margin-left: 2.564102564102564%; | |
| } | |
| .one-half, | |
| .three-sixths, | |
| .two-fourths { | |
| width: 48.717948717948715%; | |
| } | |
| .one-third, | |
| .two-sixths { | |
| width: 31.623931623931625%; | |
| } | |
| .four-sixths, | |
| .two-thirds { | |
| width: 65.81196581196582%; | |
| } | |
| .one-fourth { | |
| width: 23.076923076923077%; | |
| } | |
| .three-fourths { | |
| width: 74.35897435897436%; | |
| } | |
| .one-sixth { | |
| width: 14.52991452991453%; | |
| } | |
| .five-sixths { | |
| width: 82.90598290598291%; | |
| } | |
| .first { | |
| clear: both; | |
| margin-left: 0; | |
| } | |
| /* Entry Misc. | |
| --------------------------------------------- */ | |
| .after-entry, | |
| .archive-description, | |
| .author-box, | |
| .comment-respond, | |
| .entry, | |
| .entry-comments, | |
| .entry-pings { | |
| margin-bottom: 60px; | |
| } | |
| /* Footer Widgets | |
| --------------------------------------------- */ | |
| .footer-widgets .wrap { | |
| max-width: 1140px; | |
| } | |
| .footer-widget-area { | |
| float: left; | |
| margin-bottom: 0; | |
| width: 33.33%; /* fallback for older browsers */ | |
| width: calc(100% / 3); | |
| } | |
| } | |
| /* Print Styles | |
| ---------------------------------------------------------------------------------------------------- */ | |
| @media print { | |
| *, | |
| *::before, | |
| *::after { | |
| background: transparent !important; | |
| box-shadow: none !important; | |
| color: #333 !important; | |
| text-shadow: none !important; | |
| } | |
| a, | |
| a:visited { | |
| text-decoration: underline; | |
| } | |
| a[href]::after { | |
| content: " (" attr(href) ")"; | |
| } | |
| abbr[title]::after { | |
| content: " (" attr(title) ")"; | |
| } | |
| a[href^="javascript:"]::after, | |
| a[href^="#"]::after, | |
| .site-title > a::after { | |
| content: ""; | |
| } | |
| thead { | |
| display: table-header-group; | |
| } | |
| img, | |
| tr { | |
| page-break-inside: avoid; | |
| } | |
| img { | |
| max-width: 100% !important; | |
| } | |
| @page { | |
| margin: 2cm 0.5cm; | |
| } | |
| p, | |
| h2, | |
| h3 { | |
| orphans: 3; | |
| widows: 3; | |
| } | |
| blockquote, | |
| pre { | |
| border: 1px solid #999; | |
| page-break-inside: avoid; | |
| } | |
| .content, | |
| .content-sidebar { | |
| width: 100%; | |
| } | |
| button, | |
| input, | |
| select, | |
| textarea, | |
| .breadcrumb, | |
| .comment-edit-link, | |
| .comment-form, | |
| .comment-list .reply a, | |
| .comment-reply-title, | |
| .edit-link, | |
| .entry-comments-link, | |
| .entry-footer, | |
| .genesis-box, | |
| .header-widget-area, | |
| .hidden-print, | |
| .home-top, | |
| .nav-primary, | |
| .nav-secondary, | |
| .post-edit-link, | |
| .sidebar { | |
| display: none !important; | |
| } | |
| .title-area { | |
| text-align: center; | |
| width: 100%; | |
| } | |
| .site-title > a { | |
| margin: 0; | |
| text-decoration: none; | |
| text-indent: 0; | |
| } | |
| .site-inner { | |
| padding-top: 0; | |
| position: relative; | |
| top: -100px; | |
| } | |
| .author-box { | |
| margin-bottom: 0; | |
| } | |
| h1, | |
| h2, | |
| h3, | |
| h4, | |
| h5, | |
| h6 { | |
| orphans: 3; | |
| page-break-after: avoid; | |
| page-break-inside: avoid; | |
| widows: 3; | |
| } | |
| img { | |
| page-break-after: avoid; | |
| page-break-inside: avoid; | |
| } | |
| blockquote, | |
| pre, | |
| table { | |
| page-break-inside: avoid; | |
| } | |
| dl, | |
| ol, | |
| ul { | |
| page-break-before: avoid; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment