/** * WordPress.com specific styles * * */ /* Variables & Mixins --------------------------------------------------------------*/ /*--------------------------------------------------------------*/ /* !## Color Variables */ /*--------------------------------------------------------------*/ /*--------------------------------------------------------------*/ /* !## Typographic Variables */ /*--------------------------------------------------------------*/ /*--------------------------------------------------------------*/ /* !## Global Structure */ /*--------------------------------------------------------------*/ /*-------------------------------------------------------------- # Typography --------------------------------------------------------------*/ /*--------------------------------------------------------------*/ /* !## Typographic Mixins */ /*--------------------------------------------------------------*/ /*-------------------------------------------------------------- # Animations --------------------------------------------------------------*/ /*--------------------------------------------------------------*/ /* !## Animations */ /*--------------------------------------------------------------*/ @-webkit-keyframes bounce-reveal-y { 0%, 100% { -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); transform: scaleY(1); } 50% { -webkit-transform: scaleY(1.1); -moz-transform: scaleY(1.1); -ms-transform: scaleY(1.1); -o-transform: scaleY(1.1); transform: scaleY(1.1); } } @-moz-keyframes bounce-reveal-y { 0%, 100% { -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); transform: scaleY(1); } 50% { -webkit-transform: scaleY(1.1); -moz-transform: scaleY(1.1); -ms-transform: scaleY(1.1); -o-transform: scaleY(1.1); transform: scaleY(1.1); } } @-o-keyframes bounce-reveal-y { 0%, 100% { -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); transform: scaleY(1); } 50% { -webkit-transform: scaleY(1.1); -moz-transform: scaleY(1.1); -ms-transform: scaleY(1.1); -o-transform: scaleY(1.1); transform: scaleY(1.1); } } @keyframes bounce-reveal-y { 0%, 100% { -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); transform: scaleY(1); } 50% { -webkit-transform: scaleY(1.1); -moz-transform: scaleY(1.1); -ms-transform: scaleY(1.1); -o-transform: scaleY(1.1); transform: scaleY(1.1); } } @-webkit-keyframes bounce-hide-y { 0%, 100% { -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); transform: scaleY(1); } 50% { -webkit-transform: scaleY(0.9); -moz-transform: scaleY(0.9); -ms-transform: scaleY(0.9); -o-transform: scaleY(0.9); transform: scaleY(0.9); } } @-moz-keyframes bounce-hide-y { 0%, 100% { -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); transform: scaleY(1); } 50% { -webkit-transform: scaleY(0.9); -moz-transform: scaleY(0.9); -ms-transform: scaleY(0.9); -o-transform: scaleY(0.9); transform: scaleY(0.9); } } @-o-keyframes bounce-hide-y { 0%, 100% { -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); transform: scaleY(1); } 50% { -webkit-transform: scaleY(0.9); -moz-transform: scaleY(0.9); -ms-transform: scaleY(0.9); -o-transform: scaleY(0.9); transform: scaleY(0.9); } } @keyframes bounce-hide-y { 0%, 100% { -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); transform: scaleY(1); } 50% { -webkit-transform: scaleY(0.9); -moz-transform: scaleY(0.9); -ms-transform: scaleY(0.9); -o-transform: scaleY(0.9); transform: scaleY(0.9); } } @-webkit-keyframes bounce-reveal { 0%, 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 33% { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } 66% { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); } } @-moz-keyframes bounce-reveal { 0%, 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 33% { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } 66% { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); } } @-o-keyframes bounce-reveal { 0%, 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 33% { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } 66% { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); } } @keyframes bounce-reveal { 0%, 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 33% { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } 66% { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); } } @-webkit-keyframes bounce-left { 0%, 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 33% { -webkit-transform: translateX(-10px); -moz-transform: translateX(-10px); -ms-transform: translateX(-10px); -o-transform: translateX(-10px); transform: translateX(-10px); } 66% { -webkit-transform: translateX(3px); -moz-transform: translateX(3px); -ms-transform: translateX(3px); -o-transform: translateX(3px); transform: translateX(3px); } } @-moz-keyframes bounce-left { 0%, 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 33% { -webkit-transform: translateX(-10px); -moz-transform: translateX(-10px); -ms-transform: translateX(-10px); -o-transform: translateX(-10px); transform: translateX(-10px); } 66% { -webkit-transform: translateX(3px); -moz-transform: translateX(3px); -ms-transform: translateX(3px); -o-transform: translateX(3px); transform: translateX(3px); } } @-o-keyframes bounce-left { 0%, 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 33% { -webkit-transform: translateX(-10px); -moz-transform: translateX(-10px); -ms-transform: translateX(-10px); -o-transform: translateX(-10px); transform: translateX(-10px); } 66% { -webkit-transform: translateX(3px); -moz-transform: translateX(3px); -ms-transform: translateX(3px); -o-transform: translateX(3px); transform: translateX(3px); } } @keyframes bounce-left { 0%, 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 33% { -webkit-transform: translateX(-10px); -moz-transform: translateX(-10px); -ms-transform: translateX(-10px); -o-transform: translateX(-10px); transform: translateX(-10px); } 66% { -webkit-transform: translateX(3px); -moz-transform: translateX(3px); -ms-transform: translateX(3px); -o-transform: translateX(3px); transform: translateX(3px); } } @-webkit-keyframes bounce-right { 0%, 100% { -webkit-transform: translateX(1); -moz-transform: translateX(1); -ms-transform: translateX(1); -o-transform: translateX(1); transform: translateX(1); } 33% { -webkit-transform: translateX(10px); -moz-transform: translateX(10px); -ms-transform: translateX(10px); -o-transform: translateX(10px); transform: translateX(10px); } 66% { -webkit-transform: translateX(-3px); -moz-transform: translateX(-3px); -ms-transform: translateX(-3px); -o-transform: translateX(-3px); transform: translateX(-3px); } } @-moz-keyframes bounce-right { 0%, 100% { -webkit-transform: translateX(1); -moz-transform: translateX(1); -ms-transform: translateX(1); -o-transform: translateX(1); transform: translateX(1); } 33% { -webkit-transform: translateX(10px); -moz-transform: translateX(10px); -ms-transform: translateX(10px); -o-transform: translateX(10px); transform: translateX(10px); } 66% { -webkit-transform: translateX(-3px); -moz-transform: translateX(-3px); -ms-transform: translateX(-3px); -o-transform: translateX(-3px); transform: translateX(-3px); } } @-o-keyframes bounce-right { 0%, 100% { -webkit-transform: translateX(1); -moz-transform: translateX(1); -ms-transform: translateX(1); -o-transform: translateX(1); transform: translateX(1); } 33% { -webkit-transform: translateX(10px); -moz-transform: translateX(10px); -ms-transform: translateX(10px); -o-transform: translateX(10px); transform: translateX(10px); } 66% { -webkit-transform: translateX(-3px); -moz-transform: translateX(-3px); -ms-transform: translateX(-3px); -o-transform: translateX(-3px); transform: translateX(-3px); } } @keyframes bounce-right { 0%, 100% { -webkit-transform: translateX(1); -moz-transform: translateX(1); -ms-transform: translateX(1); -o-transform: translateX(1); transform: translateX(1); } 33% { -webkit-transform: translateX(10px); -moz-transform: translateX(10px); -ms-transform: translateX(10px); -o-transform: translateX(10px); transform: translateX(10px); } 66% { -webkit-transform: translateX(-3px); -moz-transform: translateX(-3px); -ms-transform: translateX(-3px); -o-transform: translateX(-3px); transform: translateX(-3px); } } @-webkit-keyframes bounce-reveal-large { 0%, 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 33% { -webkit-transform: scale(1.25); -moz-transform: scale(1.25); -ms-transform: scale(1.25); -o-transform: scale(1.25); transform: scale(1.25); } 66% { -webkit-transform: scale(0.85); -moz-transform: scale(0.85); -ms-transform: scale(0.85); -o-transform: scale(0.85); transform: scale(0.85); } } @-moz-keyframes bounce-reveal-large { 0%, 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 33% { -webkit-transform: scale(1.25); -moz-transform: scale(1.25); -ms-transform: scale(1.25); -o-transform: scale(1.25); transform: scale(1.25); } 66% { -webkit-transform: scale(0.85); -moz-transform: scale(0.85); -ms-transform: scale(0.85); -o-transform: scale(0.85); transform: scale(0.85); } } @-o-keyframes bounce-reveal-large { 0%, 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 33% { -webkit-transform: scale(1.25); -moz-transform: scale(1.25); -ms-transform: scale(1.25); -o-transform: scale(1.25); transform: scale(1.25); } 66% { -webkit-transform: scale(0.85); -moz-transform: scale(0.85); -ms-transform: scale(0.85); -o-transform: scale(0.85); transform: scale(0.85); } } @keyframes bounce-reveal-large { 0%, 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 33% { -webkit-transform: scale(1.25); -moz-transform: scale(1.25); -ms-transform: scale(1.25); -o-transform: scale(1.25); transform: scale(1.25); } 66% { -webkit-transform: scale(0.85); -moz-transform: scale(0.85); -ms-transform: scale(0.85); -o-transform: scale(0.85); transform: scale(0.85); } } @-webkit-keyframes bounce-zoom { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } 75% { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); } 100% { -webkit-transform: scale(1.125); -moz-transform: scale(1.125); -ms-transform: scale(1.125); -o-transform: scale(1.125); transform: scale(1.125); } } @-moz-keyframes bounce-zoom { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } 75% { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); } 100% { -webkit-transform: scale(1.125); -moz-transform: scale(1.125); -ms-transform: scale(1.125); -o-transform: scale(1.125); transform: scale(1.125); } } @-o-keyframes bounce-zoom { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } 75% { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); } 100% { -webkit-transform: scale(1.125); -moz-transform: scale(1.125); -ms-transform: scale(1.125); -o-transform: scale(1.125); transform: scale(1.125); } } @keyframes bounce-zoom { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } 75% { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); } 100% { -webkit-transform: scale(1.125); -moz-transform: scale(1.125); -ms-transform: scale(1.125); -o-transform: scale(1.125); transform: scale(1.125); } } /*-------------------------------------------------------------- # UI --------------------------------------------------------------*/ /*--------------------------------------------------------------*/ /* !## UI Mixins */ /*--------------------------------------------------------------*/ /** * Non obstructive border * - Src: http://stackoverflow.com/questions/11765642/sass-optimize-borders-into-one-line-of-code * - Usage: @include non-border(2px solid shade($ccblue, 10%), bottom, right); */ /*-------------------------------------------------------------- # Breakpoints --------------------------------------------------------------*/ /*--------------------------------------------------------------*/ /* !## Breakpoint Mixins */ /*--------------------------------------------------------------*/ /* Breakpoints Src: https://responsivedesign.is/develop/getting-started-with-sass Usage: .grid-1-4 { width: 100%; @include breakpoint(phablet) { width: 50%; } @include breakpoint(laptop) { width: 25%; } } */ /*-------------------------------------------------------------- # Plugins --------------------------------------------------------------*/ /*--------------------------------------------------------------*/ /* !## Highlander Comments */ /*--------------------------------------------------------------*/ .highlander-enabled #respond { border-top: 1px solid rgba(0, 0, 0, 0.2); margin-top: -1px !important; } .highlander-enabled #respond h3 { margin-top: 0; margin-bottom: 0; } .highlander-enabled #respond label, .highlander-enabled #respond form label { color: #666; } .page.highlander-enabled #respond { border-top-width: 0; margin-top: 0 !important; } .page.highlander-enabled .comment-list + #respond { border-top-width: 1px; margin-top: -1px !important; } /** * Stats */ #wpstats { display: none; } /** * Ads */ .wpa .u > div, .wpadvert > div > * { background-color: #efefef; } /** * Widgets */ #secondary .time_machine_widget { position: relative; } #secondary .time_machine_widget .time-machine-post { width: 62.5%; margin-left: calc(25%); } #secondary .time_machine_widget .time-machine-post-title { font-size: 16.875px; font-size: 1.125rem; font-family: "Libre Baskerville", "Georgia", Georgia, "Times New Roman", Times, serif; font-weight: 300; line-height: 1.75em; word-break: break-word; margin: 0.875em 0; } #secondary .time_machine_widget .time-machine-navigation { position: relative; } #secondary .time_machine_widget .time-machine-navigation { font-size: 14.765625px; font-size: 0.984375rem; font-family: "Libre Baskerville", "Georgia", Georgia, "Times New Roman", Times, serif; font-weight: 300; font-style: italic; line-height: 1.465625em; } @media screen and (min-width: 37.5em) { #secondary .time_machine_widget .time-machine-navigation { font-size: 16.875px; font-size: 1.125rem; } } #secondary .widget_wpcom_social_media_icons_widget ul li a { padding: 0 3px; } #secondary .widget_wpcom_social_media_icons_widget ul li a:before { font-size: 1.75em; } #secondary .widget_authors > ul > li > a { display: block; margin-bottom: 0.875em; } #secondary .widget_authors > ul > li > a img, #secondary .widget_authors > ul > li > a strong { display: inline-block; vertical-align: middle; } #secondary .widget_recent_entries ul { margin-bottom: 0; } #secondary .widget_recent_entries ul li { font-size: 14.765625px; font-size: 0.984375rem; font-family: "Libre Baskerville", "Georgia", Georgia, "Times New Roman", Times, serif; font-weight: 300; font-style: italic; line-height: 1.465625em; margin-bottom: 1.4em; } @media screen and (min-width: 37.5em) { #secondary .widget_recent_entries ul li { font-size: 16.875px; font-size: 1.125rem; } } #secondary .widget-grofile .grofile-meta h4 { font-size: 14.765625px; font-size: 0.984375rem; font-family: "Libre Baskerville", "Georgia", Georgia, "Times New Roman", Times, serif; font-weight: 300; line-height: 1.75em; word-break: break-word; color: #888888; margin: 0; } @media screen and (min-width: 37.5em) { #secondary .widget-grofile .grofile-meta h4 { font-size: 16.875px; font-size: 1.125rem; } } #secondary .widget_recent_comments .recentcommentstexttop, #secondary .widget_recent_comments .recentcommentstextend { font-size: 14.765625px; font-size: 0.984375rem; font-family: "Libre Baskerville", "Georgia", Georgia, "Times New Roman", Times, serif; font-weight: 300; font-style: italic; line-height: 1.465625em; } @media screen and (min-width: 37.5em) { #secondary .widget_recent_comments .recentcommentstexttop, #secondary .widget_recent_comments .recentcommentstextend { font-size: 16.875px; font-size: 1.125rem; } } #secondary .aboutme_widget h2 { clear: inherit; } #secondary #flickr_badge_wrapper { border: rgba(0, 0, 0, 0.2); } @media screen and (min-width: 50em) { #secondary .widget_author_grid > ul, #secondary .widget_flickr > table, #secondary .widget_recent_images .recent_images, #secondary .jetpack_widget_social_icons .jetpack-social-widget-list { padding-left: 12.5px; padding-right: 12.5px; width: calc(62.5%); } #secondary .time_machine_widget .time-machine-post { width: 62.5%; margin-left: calc(25%); } #secondary .time_machine_widget .time-machine-navigation { position: absolute; top: 2.625em; left: 12.5px; } #secondary .time_machine_widget .time-machine-navigation { font-size: 14.765625px; font-size: 0.984375rem; font-family: "Libre Baskerville", "Georgia", Georgia, "Times New Roman", Times, serif; font-weight: 300; font-style: italic; line-height: 1.465625em; } } @media screen and (min-width: 50em) and (min-width: 37.5em) { #secondary .time_machine_widget .time-machine-navigation { font-size: 16.875px; font-size: 1.125rem; } } @media screen and (min-width: 50em) { #secondary .widget_jetpack_my_community > * { margin-left: 25%; padding-left: 12.5px; padding-right: 12.5px; width: calc(62.5%); } #secondary .widget-grofile { padding-left: 25%; position: relative; } #secondary .widget-grofile .grofile-meta { padding-left: 12.5px; padding-right: 12.5px; width: calc(60%); } #secondary .widget-grofile .grofile-meta h4 { position: absolute; left: 0; padding-left: 12.5px; padding-right: 12.5px; width: calc(25%); } #secondary .widget-grofile .grofile-thumbnail { padding-left: 12.5px; padding-right: 12.5px; width: calc(40%); } #secondary .widget_recent_comments .recentcommentsavatar { padding-left: 12.5px; padding-right: 12.5px; width: calc(62.5%); } #secondary .wp_widget_tag_cloud > *:not(.widget-title), #secondary .wp_widget_tag_cloud > div { padding-left: 12.5px; padding-right: 12.5px; width: calc(62.5%); } }