1660 lines
30 KiB
SCSS
1660 lines
30 KiB
SCSS
|
|
// Sets box-sizing default to border-box on all elements
|
|
*,
|
|
*:before,
|
|
*:after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
// (highlight color, text color)
|
|
::selection {
|
|
background: #91bd51;
|
|
color: #fff;
|
|
text-shadow: none;
|
|
}
|
|
|
|
// ==========================================================================
|
|
// Main Layout
|
|
// ==========================================================================
|
|
#wpbody-content {
|
|
padding-bottom: 0;
|
|
}
|
|
#wpcontent {
|
|
margin-left: 160px;
|
|
padding: 0;
|
|
}
|
|
|
|
ul#adminmenu a.toplevel_page_jetpack:after {
|
|
border-right-color: $green;
|
|
}
|
|
|
|
.folded #wpcontent {
|
|
margin-left: 36px;
|
|
}
|
|
|
|
.jp-content {
|
|
background: $clouds;
|
|
margin: 0;
|
|
height: auto;
|
|
min-height: 100%;
|
|
width: 100%;
|
|
width: 100%;
|
|
-webkit-font-smoothing: antialiased;
|
|
|
|
.wrapper {
|
|
background: $clouds;
|
|
}
|
|
}
|
|
|
|
#wpcontent,
|
|
.auto-fold #wpcontent,
|
|
.auto-fold #wpfooter,
|
|
.modal,
|
|
.configure .frame.top.fixed {
|
|
@include breakpoint(desktop){
|
|
margin-left: 36px;
|
|
padding-left: 0;
|
|
};
|
|
@include breakpoint(tablet){
|
|
margin-left: 0;
|
|
};
|
|
}
|
|
|
|
.configure .frame.top.fixed {
|
|
@include breakpoint(tablet){
|
|
padding-left: 0;
|
|
};
|
|
}
|
|
|
|
// ==========================================================================
|
|
// Main author styles
|
|
// ==========================================================================
|
|
body {
|
|
// background: $green;
|
|
}
|
|
.wrap.inner,
|
|
.page-content {
|
|
max-width: 950px;
|
|
margin: 0 auto;
|
|
|
|
li {
|
|
line-height: 23px;
|
|
}
|
|
}
|
|
|
|
.page-content {
|
|
@include breakpoint(large-phone){
|
|
margin-top: 0;
|
|
};
|
|
}
|
|
|
|
.wrap.inner {
|
|
@include breakpoint(large-desktop) {
|
|
background: $clouds;
|
|
padding: 15px;
|
|
};
|
|
@include breakpoint(large-phone) {
|
|
margin-top: em(24px);
|
|
};
|
|
}
|
|
|
|
.jetpack_page_jetpack_modules {
|
|
.header-nav {
|
|
//max-width: auto;
|
|
margin: 0;
|
|
}
|
|
.page-content {
|
|
max-width: 1200px;
|
|
min-height: 500px;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.page-content.about {
|
|
position: relative;
|
|
z-index: 10;
|
|
|
|
@include breakpoint(large-desktop){
|
|
background: $clouds;
|
|
padding: 15px;
|
|
};
|
|
}
|
|
|
|
.page-content.configure {
|
|
@include breakpoint(large-desktop){
|
|
background: $clouds;
|
|
};
|
|
}
|
|
|
|
.footer nav {
|
|
max-width: 550px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
|
|
// ==========================================================================
|
|
// Main navigation
|
|
// ==========================================================================
|
|
|
|
.header {
|
|
left: 0;
|
|
right: 0;
|
|
background: $green;
|
|
}
|
|
.header-nav {
|
|
li {
|
|
line-height: 60px;
|
|
|
|
}
|
|
a {
|
|
padding: 0 em(10px);
|
|
line-height: 24px;
|
|
}
|
|
.jetpack-logo {
|
|
a {
|
|
display: inline-block;
|
|
position: relative;
|
|
width: 214px;
|
|
margin-right: 6px;
|
|
background: url(../images/jetpack-logo.png) center center no-repeat;
|
|
background: url(../images/jetpack-logo.svg) center center no-repeat, none;
|
|
background-size: 183px auto;
|
|
color: #fff;
|
|
line-height: 60px;
|
|
font-weight: normal;
|
|
|
|
span {
|
|
text-indent: -9999px;
|
|
visibility: hidden;
|
|
}
|
|
|
|
// needs to be cleaned up and removed - jeffgolenski
|
|
&:before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
background-size: 183px 32px;
|
|
}
|
|
}
|
|
}
|
|
.jetpack-modules + .jetpack-modules {
|
|
margin-left: 15px;
|
|
}
|
|
}
|
|
|
|
.main-nav {
|
|
float: left;
|
|
|
|
li {
|
|
margin: 0;
|
|
}
|
|
@include breakpoint(desktop){
|
|
font-size: 13px;
|
|
};
|
|
}
|
|
|
|
.user-nav {
|
|
float: right;
|
|
|
|
li {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
// Help tab
|
|
.jetpack-pagestyles {
|
|
#screen-meta {
|
|
margin: 0;
|
|
}
|
|
#screen-meta-links .screen-meta-toggle {
|
|
z-index: 2;
|
|
}
|
|
#screen-options-link-wrap, #contextual-help-link-wrap {
|
|
border: none;
|
|
}
|
|
.update-nag {
|
|
display: none;
|
|
}
|
|
}
|
|
// ==========================================================================
|
|
// Masthead
|
|
// ==========================================================================
|
|
|
|
// NOTE: .download-jetpack is in _buttons.scss
|
|
.masthead {
|
|
$start: $green; // top gradient color and fallback
|
|
$end: lighten($green, 5%); // bottom gradient color
|
|
|
|
// overflow: hidden;
|
|
position: relative;
|
|
text-align: center;
|
|
z-index: 1;
|
|
background-color: $start;
|
|
background-image: linear-gradient(top, $start, $end);
|
|
|
|
&.hasbutton {
|
|
.flyer {
|
|
bottom: -270px;
|
|
}
|
|
.subhead {
|
|
margin-top: 175px;
|
|
|
|
@include breakpoint(large-phone){
|
|
margin-top: 105px;
|
|
padding: 0;
|
|
};
|
|
}
|
|
}
|
|
h1,
|
|
h2 {
|
|
margin: 0 auto;
|
|
}
|
|
h1 {
|
|
padding: em(90px, 36px) 0 em(40px, 36px);
|
|
max-width: em(790px, 36px);
|
|
color: #fff;
|
|
font: 300 2.5714285714em/1.4em $proxima; // 36/14 (the em() function breaks in font shorthand)
|
|
position: relative;
|
|
text-shadow: 0 1px 1px rgba(0,0,0,.12);
|
|
z-index: 3;
|
|
|
|
+ .flyby {
|
|
margin-top: 180px;
|
|
}
|
|
@include breakpoint(large-desktop){
|
|
padding-top: em(55px, 30px);
|
|
font-size: em(30px);
|
|
};
|
|
@include breakpoint(tablet){
|
|
max-width: 600px;
|
|
font-size: 28px;
|
|
};
|
|
@include breakpoint(large-phone){
|
|
margin: 0 15px;
|
|
padding: 31px 0 15px 0;
|
|
font-size: 21px;
|
|
font-weight: 400;
|
|
};
|
|
}
|
|
}
|
|
.jetpack-connected .masthead h1 {
|
|
margin-bottom: 33px;
|
|
max-width: 600px;
|
|
}
|
|
|
|
.flyer {
|
|
position: absolute;
|
|
bottom: -200px;
|
|
left: 4%;
|
|
z-index: 1;
|
|
animation: flyer 3.4s 2s ease-in-out;
|
|
|
|
&:nth-child(2) {
|
|
left: 49%;
|
|
width: 120px;
|
|
height: 131px;
|
|
animation-delay: 4.6s;
|
|
animation-duration: 2.4s;
|
|
}
|
|
&:nth-child(3) {
|
|
left: 23%;
|
|
width: 60px;
|
|
height: 66px;
|
|
animation-delay: 5.8s;
|
|
animation-duration: 4.5s;
|
|
}
|
|
}
|
|
.subhead {
|
|
position: relative;
|
|
margin-top: 105px;
|
|
padding: 4em 0;
|
|
background: $clouds;
|
|
z-index: 2;
|
|
|
|
h2 {
|
|
max-width: 460px;
|
|
color: #5d6d74;
|
|
font: 400 1.5714285714em/1.4em $proxima; // 22/14
|
|
text-shadow: 0 1px 1px #fff;
|
|
|
|
@include breakpoint(desktop) {
|
|
max-width: 428px;
|
|
font-size: 20px;
|
|
};
|
|
@include breakpoint(large-phone){
|
|
display: none;
|
|
};
|
|
}
|
|
&:after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 100%;
|
|
left: 0;
|
|
margin-bottom: -1px; // Removes subpixel gap on retina landscape
|
|
width: 100%;
|
|
height: 228px;
|
|
background: url('../images/the-cloud.svg') center bottom repeat-x;
|
|
pointer-events: none;
|
|
z-index: -1;
|
|
}
|
|
@include breakpoint(large-desktop){
|
|
margin-top: 122px;
|
|
padding: 70px 0 49px;
|
|
|
|
&:after {
|
|
background-size: 160% auto;
|
|
}
|
|
};
|
|
@include breakpoint(desktop){
|
|
margin-top: 122px;
|
|
padding: 70px 0 49px;
|
|
};
|
|
@include breakpoint(large-phone){
|
|
margin-top: 83px;
|
|
padding: 47px 15px 39px;
|
|
};
|
|
}
|
|
.clouds-sm {
|
|
$start: $green; // top gradient color and fallback
|
|
$end: lighten($green, 3%); // bottom gradient color
|
|
|
|
height: 100px;
|
|
position: relative;
|
|
text-align: center;
|
|
z-index: 1;
|
|
background-color: $start;
|
|
background-image: -webkit-gradient(linear, left top, left bottom, from($start),to($end));
|
|
background-image: -webkit-linear-gradient(top, $start, $end);
|
|
background-image: -moz-linear-gradient(top, $start, $end);
|
|
background-image: -o-linear-gradient(top, $start, $end);
|
|
background-image: -ms-linear-gradient(top, $start, $end);
|
|
background-image: linear-gradient(top, $start, $end);
|
|
|
|
&:after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
margin-bottom: -1px; // Removes subpixel gap on retina landscape
|
|
width: 100%;
|
|
height: 137px;
|
|
background: url('../images/the-cloud-sm.svg') center bottom repeat-x;
|
|
pointer-events: none;
|
|
z-index: 2;
|
|
}
|
|
@include breakpoint(large-phone){
|
|
height: 90px;
|
|
};
|
|
}
|
|
|
|
// ==========================================================================
|
|
// Featured
|
|
// ==========================================================================
|
|
|
|
.featured {
|
|
border-top: 1px solid #d6d6d6;
|
|
border-bottom: 1px solid #d6d6d6;
|
|
background: #fff;
|
|
position: relative;
|
|
padding: 2.0em 1em 4.6em 1em;
|
|
text-align: center;
|
|
z-index: 1;
|
|
|
|
// Full with bar that breaks out of .page width
|
|
&:before {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
height: 100%;
|
|
z-index: -1;
|
|
}
|
|
.features {
|
|
margin: 0 auto;
|
|
display: inline-block;
|
|
}
|
|
@include breakpoint(large-phone){
|
|
display: none;
|
|
};
|
|
}
|
|
.featured h2,
|
|
.module-grid h2 {
|
|
margin-top: 1em;
|
|
color: #5d6d74;
|
|
font: 300 2em/1em $proxima; // 36/14
|
|
text-align: center;
|
|
//text-shadow: 0 1px 1px #fff;
|
|
|
|
@include breakpoint(desktop){
|
|
font-size: 30px;
|
|
};
|
|
@include breakpoint(tablet){
|
|
font-size: 28px;
|
|
};
|
|
}
|
|
.features {
|
|
margin: 0 -5px; // For centering features
|
|
@extend %clearfix;
|
|
}
|
|
.feature,
|
|
.module {
|
|
position: relative;
|
|
float: left;
|
|
margin: 0 5px 10px;
|
|
width: 310px;
|
|
transition: all .2s ease-in-out;
|
|
|
|
@include breakpoint(large-desktop){
|
|
margin: .75% 0 .75% 1.5%;
|
|
width: 32.333333%;
|
|
transition: none;
|
|
|
|
&:nth-child(3n + 1) {
|
|
margin-left: 0;
|
|
}
|
|
&:hover {
|
|
top: 0;
|
|
box-shadow: none;
|
|
}
|
|
};
|
|
}
|
|
.feature {
|
|
transform: translateZ(0);
|
|
|
|
h3 {
|
|
margin: 0 0 em(10px, 17px);
|
|
color: #697b84;
|
|
font-size: em(17px);
|
|
line-height: 1em;
|
|
font-weight: 800;
|
|
}
|
|
p {
|
|
margin: 0;
|
|
color: #6e818a;
|
|
}
|
|
&:before {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 10px;
|
|
background: rgba(0,0,0,.02);
|
|
z-index: -1;
|
|
transform: translateZ(0);
|
|
transition: all .2s ease-in-out;
|
|
|
|
}
|
|
&:hover {
|
|
transform: translateY(-5px);
|
|
|
|
h3 {
|
|
color: #1a8dba;
|
|
}
|
|
.feature-img {
|
|
border: 1px solid #ccc;
|
|
border-bottom: none;
|
|
}
|
|
.no-border {
|
|
border: none;
|
|
}
|
|
&:before {
|
|
transform: translateY(5px);
|
|
}
|
|
@include breakpoint(large-desktop) {
|
|
h3 {
|
|
color: #6e818a;
|
|
}
|
|
.feature-img {
|
|
border: 1px solid #ddd;
|
|
border-bottom: none;
|
|
}
|
|
.no-border {
|
|
border: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.feature-img {
|
|
padding-top: 52%; // For flexible scaling
|
|
width: 100%;
|
|
height: auto;
|
|
border: 1px solid #ddd;
|
|
border-bottom: none;
|
|
|
|
&.custom-css {
|
|
background: url('../images/custom-css.jpg') no-repeat;
|
|
background-size: 100% auto;
|
|
|
|
@media print,
|
|
(-webkit-min-device-pixel-ratio: 1.25),
|
|
(min--moz-device-pixel-ratio: 1.25),
|
|
(-o-min-device-pixel-ratio: 5/4),
|
|
(min-resolution: 120dpi) {
|
|
background-image: url('../images/custom-css@2x.jpg');
|
|
}
|
|
}
|
|
&.wordpress-connect {
|
|
background: url('../images/wordpress-connect.jpg') no-repeat;
|
|
background-size: 100% auto;
|
|
|
|
@media print,
|
|
(-webkit-min-device-pixel-ratio: 1.25),
|
|
(min--moz-device-pixel-ratio: 1.25),
|
|
(-o-min-device-pixel-ratio: 5/4),
|
|
(min-resolution: 120dpi) {
|
|
background-image: url('../images/wordpress-connect@2x.jpg');
|
|
}
|
|
}
|
|
&.wordpress-stats {
|
|
background: url('../images/wordpress-stats.jpg') no-repeat;
|
|
background-size: 100% auto;
|
|
|
|
@media print,
|
|
(-webkit-min-device-pixel-ratio: 1.25),
|
|
(min--moz-device-pixel-ratio: 1.25),
|
|
(-o-min-device-pixel-ratio: 5/4),
|
|
(min-resolution: 120dpi) {
|
|
background-image: url('../images/wordpress-stats@2x.jpg');
|
|
}
|
|
}
|
|
&.no-border {
|
|
// For when you have images that look better without a border.
|
|
// Make those images two pixels wider and one taller.
|
|
border: none;
|
|
padding-bottom: 1px; // makes up for lost border pixel
|
|
}
|
|
}
|
|
}
|
|
.feature-description {
|
|
display: block;
|
|
padding: em(14px) em(15px) em(15px);
|
|
border: 1px solid #ddd;
|
|
background: #f5f5f5;
|
|
|
|
.feature:hover & {
|
|
background: #fff;
|
|
border-color: #ccc;
|
|
|
|
@include breakpoint(large-desktop) {
|
|
border: 1px solid #ddd;
|
|
background: #f5f5f5;
|
|
}
|
|
}
|
|
@include breakpoint(desktop){
|
|
min-height: 115px;
|
|
};
|
|
}
|
|
|
|
// ==========================================================================
|
|
// Module grid
|
|
// ==========================================================================
|
|
|
|
.cat {
|
|
clear: both;
|
|
margin-bottom: 23px;
|
|
|
|
h3 {
|
|
font-size: 24px;
|
|
font-weight: 300;
|
|
margin: 0 0 13px 6px;
|
|
text-align: left;
|
|
}
|
|
.clear {
|
|
clear: both;
|
|
}
|
|
}
|
|
.module-grid {
|
|
text-align: center;
|
|
|
|
h2 {
|
|
// Font size is 36
|
|
margin: 1em 0; // em(45px, 36px) 0 em(25px, 36px)
|
|
|
|
@include breakpoint(large-phone){
|
|
padding-top: 16px;
|
|
margin-top: 0;
|
|
font-size: 25px;
|
|
};
|
|
}
|
|
}
|
|
#module-search {
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: em(570px);
|
|
margin: 0 auto em(15px);
|
|
overflow: hidden;
|
|
}
|
|
#jetpack-search {
|
|
margin: 0;
|
|
padding: 11px 16px 11px 16px;
|
|
width: 100%;
|
|
border: 1px solid #c9ced0;
|
|
border-radius: 3px;
|
|
background: #fff;
|
|
color: #5c6671;
|
|
line-height:1.3;
|
|
|
|
&:focus {
|
|
color: #5c6671;
|
|
outline: none;
|
|
|
|
+ label {
|
|
background: transparent;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
&::-webkit-input-placeholder {
|
|
color: #a8acae;
|
|
}
|
|
:-moz-placeholder { // Firefox 18-
|
|
color: #a8acae;
|
|
}
|
|
&::-moz-placeholder { // Firefox 19+
|
|
color: #a8acae;
|
|
}
|
|
&:-ms-input-placeholder {
|
|
color: #a8acae;
|
|
}
|
|
+ label {
|
|
position: absolute;
|
|
top: 1px;
|
|
right: 1px;
|
|
bottom: 1px;
|
|
width: 48px;
|
|
color: #abafb1;
|
|
text-indent: -9999px;
|
|
pointer-events: none;
|
|
border-radius: 3px;
|
|
transition: all .2s ease-in-out;
|
|
|
|
&:after {
|
|
content: '\f400';
|
|
position: absolute;
|
|
right: 11px;
|
|
text-align: right;
|
|
top: 4px;
|
|
font-size: em(24px);
|
|
font-weight: normal;
|
|
font-family: $genericons;
|
|
}
|
|
}
|
|
}
|
|
.jp-filter {
|
|
margin-bottom: em(40px);
|
|
color: #6f7476;
|
|
|
|
a {
|
|
display: inline-block;
|
|
position: relative;
|
|
padding: 0.76923em 1.46154em;
|
|
color: #aaa;
|
|
font: 600 0.92857em/1 "Open Sans", Helvetica, Arial, sans-serif;
|
|
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.2);
|
|
background: #eee;
|
|
-webkit-border-radius: 3px;
|
|
border-radius: 3px;
|
|
-webkit-background-clip: padding-box;
|
|
-moz-background-clip: padding;
|
|
background-clip: padding-box;
|
|
|
|
&.selected,
|
|
&:hover,
|
|
&:focus {
|
|
color: #efefef;
|
|
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
|
|
background: #6f7476;
|
|
}
|
|
@include breakpoint(large-phone){
|
|
padding: 0.76em 1em;
|
|
};
|
|
}
|
|
|
|
}
|
|
.modules {
|
|
@extend .features; // Clearfix and margin
|
|
}
|
|
.module {
|
|
display: block;
|
|
padding: em(10px) em(15px) em(14px);
|
|
text-align: left;
|
|
border: 1px solid #dae0e2;
|
|
background: #fff;
|
|
box-shadow: 0 0 0 rgba(0,0,0,.03);
|
|
transition: opacity 2s ease-in;
|
|
|
|
&:hover {
|
|
border-color: #8ac9e8;
|
|
background: #f8fcfe;
|
|
}
|
|
h3 {
|
|
cursor: pointer;
|
|
margin: 0 0 em(7px);
|
|
color: #1a8dba;
|
|
font-size: em(16px);
|
|
line-height: 1.4em;
|
|
font-weight: 700;
|
|
}
|
|
p {
|
|
margin: 0;
|
|
color: #686f72;
|
|
font-size: em(12px);
|
|
}
|
|
&:hover, &:focus {
|
|
border-color: #8ac9e8;
|
|
background: #f8fcfe;
|
|
}
|
|
|
|
&.active {
|
|
border-color: $lightblue;
|
|
box-shadow: inset 4px 0 0 $lightblue;
|
|
|
|
&:hover {
|
|
border-color: lighten( $lightblue, 15% );
|
|
box-shadow: inset 4px 0 0 lighten( $lightblue, 15% );
|
|
}
|
|
}
|
|
|
|
.button,
|
|
.button-primary {
|
|
margin-top: 15px;
|
|
}
|
|
|
|
@include breakpoint(large-phone) {
|
|
.configure, .activate {
|
|
display: block;
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
.button,
|
|
.button-primary {
|
|
width: 50%;
|
|
}
|
|
.button-primary {
|
|
// make wp core primary btn style consistent w/ normal btn styles
|
|
line-height: normal;
|
|
padding: 6px 14px;
|
|
height: auto;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 450px){
|
|
.button,
|
|
.button-primary {
|
|
margin: 20px auto 0 auto;
|
|
|
|
&.alignright {
|
|
float: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.cat & {
|
|
@include breakpoint(large-desktop){
|
|
&:nth-child(3n + 1) {
|
|
margin: .75% 0 .75% 1.5%;
|
|
}
|
|
&:nth-child(3n - 1) {
|
|
margin-left: 0;
|
|
}
|
|
};
|
|
@include breakpoint(desktop){
|
|
margin: 1% 0 1% 2%;
|
|
|
|
&:nth-child(2n + 1) {
|
|
margin: 1% 0 1% 2%;
|
|
}
|
|
&:nth-child(2n + 0) {
|
|
margin-left: 0;
|
|
}
|
|
};
|
|
@include breakpoint(large-phone){
|
|
margin: 5px 0;
|
|
|
|
&:nth-child(2n + 1) {
|
|
margin-left: 0;
|
|
}
|
|
&:nth-child(2n + 0) {
|
|
margin-left: 0;
|
|
}
|
|
};
|
|
}
|
|
@include breakpoint(desktop){
|
|
margin: 1% 0 1% 2%;
|
|
width: 49%;
|
|
|
|
&:nth-child(3n + 1) {
|
|
margin-left: 2%;
|
|
}
|
|
&:nth-child(2n + 1) {
|
|
margin-left: 0;
|
|
}
|
|
};
|
|
@include breakpoint(large-phone){
|
|
margin: 5px 0;
|
|
width: 100%;
|
|
|
|
&:nth-child(3n + 1) {
|
|
margin-left: 0;
|
|
}
|
|
&:nth-child(2n + 1) {
|
|
margin-left: 0;
|
|
}
|
|
};
|
|
}
|
|
.new {
|
|
$size: 32px; // 'NEW' badge size
|
|
|
|
position: relative;
|
|
|
|
&:after {
|
|
content: 'NEW';
|
|
position: absolute;
|
|
top: -8px;
|
|
right: -8px;
|
|
padding-top: 10px;
|
|
width: $size;
|
|
height: $size;
|
|
color: #fff;
|
|
font-size: 8px;
|
|
font-weight: 800;
|
|
text-align: center;
|
|
text-shadow: 0 -1px 0 rgba(0,0,0,.2);
|
|
background: url('../images/new-badge.svg') center center no-repeat;
|
|
background-size: 100%;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
.paid { // 'Paid' label
|
|
display: inline-block;
|
|
position: relative;
|
|
top: 5px;
|
|
margin-left: 10px;
|
|
padding: 1px 6px 0 4px;
|
|
height: 13px;
|
|
color: #fff;
|
|
font: 700 10px/1 $sans;
|
|
text-shadow: 0 -1px 0 rgba(0,0,0,.05);
|
|
background: #d0d0d0;
|
|
vertical-align: top;
|
|
|
|
&:before,
|
|
&:after {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 100%;
|
|
font: normal 14px/14px $genericons;
|
|
}
|
|
&:before {
|
|
content: '\f503'; // Genericons leftarrow
|
|
color: #d0d0d0;
|
|
text-shadow: none;
|
|
}
|
|
&:after {
|
|
content: '\f428'; // Genericons dot
|
|
margin-right: -5px;
|
|
font-size: 11px;
|
|
}
|
|
}
|
|
.rtl .paid:before {
|
|
content: '\f501'; // Genericons leftarrow{
|
|
}
|
|
.load-more {
|
|
// NOTE: .button styling is in _buttons.scss
|
|
@extend %clearfix;
|
|
margin: em(38px) 0 em(80px, 13px);
|
|
}
|
|
|
|
// The show/hide CSS to fake loading more modules
|
|
.set {
|
|
display: none;
|
|
}
|
|
.show.set {
|
|
display: block;
|
|
}
|
|
|
|
// ==========================================================================
|
|
// Modal
|
|
// ==========================================================================
|
|
|
|
.loading {
|
|
bottom: 50%;
|
|
position: absolute;
|
|
top: 50%;
|
|
width: 100%;
|
|
|
|
span {
|
|
color: #999;
|
|
}
|
|
}
|
|
.modal {
|
|
background: #fff;
|
|
position: fixed;
|
|
top: 52px;
|
|
bottom: 20px;
|
|
right: 20px;
|
|
left: 20px;
|
|
margin-left: 160px;
|
|
display: none;
|
|
box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1);
|
|
z-index: 500;
|
|
|
|
.close {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
font: 300 em(24px) 'genericons' !important;
|
|
color: #777;
|
|
content: '\f405';
|
|
display: inline-block;
|
|
padding: em(4px) em(10px) em(6px);
|
|
z-index: 5;
|
|
|
|
&:hover {
|
|
background: #eee;
|
|
opacity: 0.8;
|
|
}
|
|
&:active {
|
|
background: #eee;
|
|
opacity: 0.4;
|
|
}
|
|
}
|
|
#jp-post-flair {
|
|
display: none;
|
|
}
|
|
.content-container {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
overflow: auto;
|
|
padding: em(30px, 14px);
|
|
}
|
|
.content {
|
|
margin: 0 auto;
|
|
max-width: 900px;
|
|
text-align: left;
|
|
}
|
|
h2 {
|
|
text-align: left;
|
|
margin-top: 0;
|
|
color: #5d6d74;
|
|
font: 300 32px $proxima; // 36/14
|
|
text-shadow: 0 1px 1px #fff;
|
|
|
|
@include breakpoint(large-phone){
|
|
font-size: 26px;
|
|
};
|
|
}
|
|
h5 {
|
|
clear: left;
|
|
}
|
|
p {
|
|
font-size: em(16px, 13px);
|
|
}
|
|
footer {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
padding: 12px 20px;
|
|
border-top: 1px solid #ddd;
|
|
background: #fff;
|
|
text-align: right;
|
|
|
|
ul {
|
|
margin: 0;
|
|
}
|
|
li {
|
|
display: inline-block;
|
|
margin: 0;
|
|
}
|
|
}
|
|
.button-secondary,
|
|
.button-primary:active {
|
|
// fixing weird core bug thingy
|
|
vertical-align: baseline;
|
|
}
|
|
@include breakpoint(desktop){
|
|
bottom: 5%;
|
|
margin-left: 36px;
|
|
font-size: 80%;
|
|
|
|
.content {
|
|
top: 38px;
|
|
}
|
|
};
|
|
@include breakpoint(tablet){
|
|
top: 66px;
|
|
margin-left: 0;
|
|
};
|
|
@include breakpoint(phablet){
|
|
top: 10px;
|
|
right: 10px;
|
|
bottom: 10px;
|
|
left: 10px;
|
|
}
|
|
}
|
|
.jp-info-img {
|
|
float: right;
|
|
margin: 0 0 30px 30px;
|
|
|
|
img {
|
|
border: 1px solid #ddd;
|
|
max-width: 100%;
|
|
height: auto;
|
|
|
|
&:first-child {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
@include breakpoint(tablet){
|
|
float: none;
|
|
margin: 0 0 15px;
|
|
};
|
|
}
|
|
.content-container.modal-footer {
|
|
bottom: 53px;
|
|
}
|
|
.shade {
|
|
background: #000;
|
|
bottom: 0;
|
|
cursor: pointer;
|
|
display: none;
|
|
left: 0;
|
|
opacity: 0.2;
|
|
position: fixed;
|
|
right: 0;
|
|
top: 0;
|
|
z-index: 11;
|
|
}
|
|
|
|
// ==========================================================================
|
|
// Secondary pages
|
|
// ==========================================================================
|
|
|
|
.entry-title,
|
|
.page-template-default h1 {
|
|
margin-top: em(22px, 36px);
|
|
color: #5d6d74;
|
|
font: 300 2.5714285714em/1.4em $proxima; // 36/14
|
|
text-shadow: 0 1px 1px #fff;
|
|
|
|
@include breakpoint(large-phone){
|
|
font-size: 2em;
|
|
};
|
|
}
|
|
|
|
.blog h3,
|
|
.single h3,
|
|
.page-template-default h2 {
|
|
margin-top: em(22px, 36px);
|
|
color: #5d6d74;
|
|
font: 300 1.9em $proxima; // 36/14
|
|
text-shadow: 0 1px 1px #fff;
|
|
|
|
@include breakpoint(large-phone){
|
|
font-size: 1.4em;
|
|
}
|
|
}
|
|
|
|
.page-template-default p {
|
|
line-height: em(24px);
|
|
}
|
|
|
|
.blog .type-post,
|
|
.page-template-default .type-page,
|
|
.single .type-post,
|
|
.single .type-jetpack_support {
|
|
float: left;
|
|
width: 70%;
|
|
}
|
|
|
|
// ==========================================================================
|
|
// Footer Navigation
|
|
// ==========================================================================
|
|
|
|
// NOTE: .download-jetpack is in _buttons.scss
|
|
.footer {
|
|
margin-top: em(20px);
|
|
position: relative;
|
|
padding: em(140px) 0 em(60px);
|
|
text-align: center;
|
|
|
|
&:before,
|
|
&:after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
pointer-events: none;
|
|
}
|
|
&:before {
|
|
top: 0;
|
|
margin-top: -1px; // Removes subpixel gap on retina landscape
|
|
width: 100%;
|
|
height: 195px;
|
|
}
|
|
&:after {
|
|
display: none;
|
|
}
|
|
.download-jetpack {
|
|
margin-bottom: 33px;
|
|
}
|
|
@include minbreakpoint(large-desktop){
|
|
padding-bottom: 35px;
|
|
};
|
|
@include breakpoint(large-desktop) {
|
|
padding-top: 165px;
|
|
padding-bottom: 0;
|
|
|
|
&:before {
|
|
background-size: 160% auto;
|
|
}
|
|
/*&:after {
|
|
display: none;
|
|
}*/
|
|
ul {
|
|
float: none;
|
|
overflow: hidden; // Clears the float
|
|
}
|
|
};
|
|
@include breakpoint(desktop){
|
|
padding-top: 146px;
|
|
};
|
|
@include breakpoint(tablet){
|
|
margin-top: 0;
|
|
};
|
|
@include breakpoint(large-phone){
|
|
margin-top: 0;
|
|
padding-top: 135px;
|
|
};
|
|
@include breakpoint(phone){
|
|
padding-top: 76px;
|
|
};
|
|
}
|
|
.footer nav {
|
|
max-width: 100%;
|
|
|
|
a,
|
|
a:visited {
|
|
padding: 4px 6px;
|
|
//color: #c8e3a2;
|
|
color: #999;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: #81A844;
|
|
}
|
|
}
|
|
@include breakpoint(large-desktop){
|
|
|
|
a,
|
|
a:visited {
|
|
&:hover,
|
|
&:focus {
|
|
color: $green;
|
|
}
|
|
}
|
|
};
|
|
@include breakpoint(large-phone){
|
|
li {
|
|
display: block;
|
|
float: none;
|
|
margin: 0;
|
|
text-align: left;
|
|
}
|
|
a {
|
|
display: block;
|
|
padding: 0 16px;
|
|
line-height: 44px;
|
|
}
|
|
};
|
|
}
|
|
.primary {
|
|
padding: 25px 15px 10px 15px;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
.secondary-footer {
|
|
margin: 0 auto;
|
|
|
|
li {
|
|
margin-right: 5px;
|
|
}
|
|
@include minbreakpoint(tablet){
|
|
padding: 8px 15px 10px;
|
|
margin-bottom: 30px;
|
|
border-bottom: 1px solid #eee;
|
|
};
|
|
@include minbreakpoint(large-desktop){
|
|
margin-bottom: 0;
|
|
};
|
|
@include breakpoint(tablet){
|
|
padding: 8px 15px 8px;
|
|
border-bottom: none;
|
|
};
|
|
@include breakpoint(large-phone){
|
|
margin: 0;
|
|
padding: 0;
|
|
border: none;
|
|
font-weight: 400;
|
|
|
|
a {
|
|
border-top: 1px solid #eee;
|
|
}
|
|
};
|
|
}
|
|
.footer .a8c-attribution {
|
|
margin: 0;
|
|
padding: 0 6px;
|
|
color: #bbb;
|
|
font-size: em(11px);
|
|
font-family: $gill;
|
|
text-transform: uppercase;
|
|
|
|
a {
|
|
// This may look janky, but if you highlight from
|
|
// "AN" to "TEAM," copy and paste, you'll get the whole
|
|
// "An AUTOMATTIC TEAM" phrase.
|
|
display: inline-block;
|
|
position: relative;
|
|
padding: 4px 16px;
|
|
right: 9999px;
|
|
outline: 0;
|
|
|
|
&:after {
|
|
content: 'A';
|
|
position: absolute;
|
|
top: 2px;
|
|
right: -9999px;
|
|
height: 100%;
|
|
color: #999;
|
|
font-size: em(17px, 11px);
|
|
font-family: $automatticons;
|
|
text-align: center;
|
|
}
|
|
&:hover {
|
|
&:after {
|
|
animation: candy .4s ease-in-out;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.secondary {
|
|
@include minbreakpoint(tablet){
|
|
padding: 0 15px 10px 15px;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
@include minbreakpoint(large-desktop){
|
|
padding: 0 15px 10px 15px;
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
|
|
|
|
// ==========================================================================
|
|
// Messages & Errors
|
|
// ==========================================================================
|
|
|
|
.jetpack-message {
|
|
background: lighten($green, 5%);
|
|
border: 1px solid darken($green, 5%);
|
|
margin: 33px auto 0;
|
|
max-width: 90%;
|
|
position: relative;
|
|
z-index: 2;
|
|
|
|
&.is-opt-in {
|
|
margin: 50px 0 0;
|
|
max-width: 100%;
|
|
padding: 10px 15px;
|
|
background: #fff;
|
|
border: 0;
|
|
box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
|
|
font-size: 13px;
|
|
text-align: center;
|
|
|
|
// page=jetpack specific styling
|
|
.subhead & {
|
|
margin: 0;
|
|
padding-bottom: 0;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
|
|
.jp-button {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
p {
|
|
color: #3c4549;
|
|
}
|
|
.jp-button {
|
|
margin-top: 15px;
|
|
display: none;
|
|
}
|
|
}
|
|
.squeezer {
|
|
h2 {
|
|
font-size: 1em;
|
|
}
|
|
}
|
|
h2 {
|
|
color: #fff;
|
|
margin: 0;
|
|
}
|
|
p {
|
|
color: #fff;
|
|
margin: 0;
|
|
opacity: 0.7;
|
|
}
|
|
.squeezer {
|
|
padding: 23px 23px 23px 80px;
|
|
position: relative;
|
|
text-align: left;
|
|
|
|
&:before {
|
|
color: #fff;
|
|
content: '\f418';
|
|
font-family: 'Genericons';
|
|
font-size: 33px;
|
|
height: 33px;
|
|
left: 25px;
|
|
opacity: 0.6;
|
|
position: absolute;
|
|
top: 23px;
|
|
top: calc( 50% - 22px );
|
|
}
|
|
@include breakpoint(large-phone){
|
|
padding: 23px;
|
|
|
|
&:before {
|
|
display: none;
|
|
}
|
|
}
|
|
a {
|
|
color:#FFF;
|
|
border-bottom:1px solid #D5E4BD;
|
|
} a:hover{
|
|
border-bottom:1px solid #F1F6E9;
|
|
}
|
|
}
|
|
&.error .squeezer:before,
|
|
&.jetpack-err .squeezer:before {
|
|
content: '\f414';
|
|
}
|
|
}
|
|
|
|
.configure-module .jetpack-message {
|
|
max-width:100%;
|
|
}
|
|
|
|
// ==========================================================================
|
|
// Icons
|
|
// ==========================================================================
|
|
|
|
.jetpack-modules #site-icon-deprecated .info,
|
|
.modules h3.icon,
|
|
.jetpack-modules .info a {
|
|
width: auto;
|
|
|
|
&:before {
|
|
display: inline-block;
|
|
position: relative;
|
|
top: 1px;
|
|
left: -3px;
|
|
margin-right: 2px;
|
|
opacity: 0.8;
|
|
font: normal 20px $genericons;
|
|
vertical-align: top;
|
|
}
|
|
}
|
|
|
|
.jetpack-modules .info a:before {
|
|
margin-top: 1px;
|
|
}
|
|
|
|
.latex:before,
|
|
.jetpack-modules #latex .info a:before {
|
|
content: '\f408';
|
|
}
|
|
.carousel:before,
|
|
.jetpack-modules #carousel .info a:before {
|
|
content: '\f102';
|
|
}
|
|
.modules h3.contact-form:before,
|
|
.jetpack-modules #contact-form .info a:before {
|
|
content: '\f175';
|
|
font: normal 20px "dashicons";
|
|
}
|
|
.modules h3.custom-css:before,
|
|
.jetpack-modules #custom-css .info a:before {
|
|
content: '\f100';
|
|
font: normal 20px "dashicons";
|
|
}
|
|
.modules h3.enhanced-distribution:before,
|
|
.jetpack-modules #enhanced-distribution .info a:before {
|
|
content: '\f237';
|
|
font: normal 20px "dashicons";
|
|
}
|
|
.modules h3.widgets:before,
|
|
.jetpack-modules #widgets .info a:before {
|
|
content: '\f116';
|
|
font: normal 20px "dashicons";
|
|
}
|
|
.modules h3.gravatar-hovercards:before,
|
|
.jetpack-modules #gravatar-hovercards .info a:before {
|
|
content: 'G';
|
|
font-family: $automatticons;
|
|
}
|
|
.infinite-scroll:before,
|
|
.jetpack-modules #infinite-scroll .info a:before {
|
|
content: '\f408';
|
|
}
|
|
.comments:before,
|
|
.jetpack-modules #comments .info a:before {
|
|
content: '\f108';
|
|
}
|
|
.sso:before,
|
|
.jetpack-modules #sso .info a:before {
|
|
content: '\f205';
|
|
}
|
|
.json-api:before,
|
|
.jetpack-modules #json-api .info a:before {
|
|
content: '\f415';
|
|
}
|
|
.likes:before,
|
|
.jetpack-modules #likes .info a:before {
|
|
content: '\f408';
|
|
}
|
|
.markdown:before,
|
|
.jetpack-modules #markdown .info a:before {
|
|
content: '\f462';
|
|
}
|
|
.minileven:before,
|
|
.jetpack-modules #minileven .info a:before {
|
|
content: '\f453';
|
|
}
|
|
.manage:before,
|
|
.jetpack-modules #manage .info a:before {
|
|
content: '\f205';
|
|
}
|
|
.monitor:before,
|
|
.jetpack-modules #monitor .info a:before {
|
|
content: '\f468';
|
|
}
|
|
.notes:before,
|
|
.jetpack-modules #notes .info a:before {
|
|
content: '\f300';
|
|
}
|
|
.omnisearch:before,
|
|
.jetpack-modules #omnisearch .info a:before {
|
|
content: '\f400';
|
|
}
|
|
.photon:before,
|
|
.jetpack-modules #photon .info a:before {
|
|
content: '\f403';
|
|
}
|
|
.post-by-email:before,
|
|
.jetpack-modules #post-by-email .info a:before {
|
|
content: '\f410';
|
|
}
|
|
.protect:before,
|
|
.jetpack-modules #protect .info a:before {
|
|
content: '\f470';
|
|
position: relative;
|
|
top: -1px;
|
|
}
|
|
.modules h3.publicize:before,
|
|
.jetpack-modules #publicize .info a:before {
|
|
content: '\f237';
|
|
font: normal 20px "dashicons";
|
|
}
|
|
.related-posts:before,
|
|
.jetpack-modules #related-posts .info a:before {
|
|
content: '\f420';
|
|
}
|
|
.sharedaddy:before,
|
|
.jetpack-modules #sharedaddy .info a:before {
|
|
content: '\f415';
|
|
}
|
|
.shortcodes:before,
|
|
.jetpack-modules #shortcodes .info a:before {
|
|
content: '\f100';
|
|
}
|
|
.verification-tools:before,
|
|
.jetpack-modules #verification-tools .info a:before {
|
|
content: '\f425';
|
|
}
|
|
.after-the-deadline:before,
|
|
.jetpack-modules #after-the-deadline .info a:before {
|
|
content: '\f411';
|
|
}
|
|
.subscriptions:before,
|
|
.jetpack-modules #subscriptions .info a:before {
|
|
content: '\f410';
|
|
}
|
|
.tiled-gallery:before,
|
|
.jetpack-modules #tiled-gallery .info a:before {
|
|
content: '\f103';
|
|
}
|
|
.modules h3.vaultpress:before,
|
|
.jetpack-modules #vaultpress .info a:before {
|
|
content: 'V';
|
|
font-family: $automatticons;
|
|
}
|
|
|
|
.videopress:before,
|
|
.jetpack-modules #videopress .info a:before {
|
|
content: '\f104';
|
|
}
|
|
.modules h3.widget-visibility:before,
|
|
.jetpack-modules #widget-visibility .info a:before {
|
|
content: '\f116';
|
|
font: normal 20px "dashicons";
|
|
}
|
|
.stats:before,
|
|
.jetpack-modules #stats .info a:before {
|
|
content: '\f205';
|
|
}
|
|
.shortlinks:before,
|
|
.jetpack-modules #shortlinks .info a:before {
|
|
content: '\f107';
|
|
}
|
|
.modules h3.custom-content-types:before,
|
|
.jetpack-modules #custom-content-types .info a:before {
|
|
content: '\f498';
|
|
font: normal 20px "dashicons";
|
|
}
|
|
|
|
.modules h3.site-icon:before,
|
|
.jetpack-modules #site-icon .info a:before {
|
|
content: '\f475';
|
|
}
|
|
|
|
.jetpack-modules #site-icon-deprecated .info:before {
|
|
content: '\f475';
|
|
}
|
|
|
|
.jetpack-modules #sitemaps .info a:before {
|
|
content: '\f507';
|
|
}
|
|
|
|
|
|
// ==========================================================================
|
|
// Uncategorized
|
|
// ==========================================================================
|
|
|
|
@include breakpoint(tablet){
|
|
.blog .type-post,
|
|
.page-template-default .type-page,
|
|
.single .type-post,
|
|
.single .type-jetpack_support {
|
|
width: 100%;
|
|
}
|
|
};
|
|
|
|
|
|
@include breakpoint(phablet){
|
|
// clouds are nice, but occupy too much vert space on mobile
|
|
.clouds-sm {
|
|
display: none;
|
|
}
|
|
};
|
|
|
|
@include breakpoint(large-phone){
|
|
.wrap.inner.jp-support { // Used anywhere?
|
|
.jp-support-column-left {
|
|
width: 100%;
|
|
|
|
.widget-text {
|
|
margin-right: 0;
|
|
width: 100%;
|
|
}
|
|
}
|
|
.jp-support-column-right {
|
|
width: 100%;
|
|
}
|
|
}
|
|
};
|
|
|
|
// ==========================================================================
|
|
// Custom Breakpoints
|
|
// ==========================================================================
|
|
|
|
@media screen and (max-width: 515px) {
|
|
.jp-frame {
|
|
.header-nav {
|
|
padding-bottom: 10px;
|
|
|
|
li {
|
|
line-height: 30px;
|
|
}
|
|
.jetpack-logo {
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
.jetpack-modules {
|
|
margin: 0;
|
|
width: 50%;
|
|
text-align: right;
|
|
padding: 0 5px;
|
|
}
|
|
.jetpack-modules + .jetpack-modules {
|
|
text-align: left;
|
|
}
|
|
.jetpack-modules:nth-child(4) {
|
|
text-align: center;
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
a {
|
|
padding: 0 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} // max 515px
|