2014-02-19 16:43:14 -05:00
/ * ------------------------------------------------------------------------------
22 . 0 - About Pages
------------------------------------------------------------------------------ * /
. about-wrap {
position : relative ;
margin : 25px 20px 0 40px ;
max-width : 1050px ; /* readability */
font-size : 15px ;
}
. about-wrap div . updated ,
. about-wrap div . error {
display : none ! important ;
}
. about-wrap hr {
border : 0 ;
height : 0 ;
margin : 0 ;
border-top : 1px solid rgba ( 0 , 0 , 0 , 0 . 1 ) ;
}
. about-wrap img {
2014-04-14 21:31:14 -04:00
margin : 0 ;
2014-02-19 16:43:14 -05:00
max-width : 100 % ;
2014-09-04 11:24:16 -04:00
height : auto ;
2014-04-14 21:31:14 -04:00
vertical-align : middle ;
2014-02-19 16:43:14 -05:00
}
/* Typography */
. about-wrap p {
line-height : 1 . 6em ;
font-size : 14px ;
}
. about-wrap h1 {
margin : 0 . 2em 0 0 200px ;
color : # 333 ;
line-height : 1 . 2em ;
font-size : 2 . 8em ;
font-weight : 400 ;
}
. about-wrap h4 {
color : # 222 ;
}
. about-wrap . about-text ,
. about-wrap p . about-description ,
. about-wrap li . wp-person a . web {
font-weight : normal ;
line-height : 1 . 6em ;
font-size : 19px ;
}
. about-description {
margin-top : 1 . 4em ;
}
. about-text {
margin : 1em 0 1em 200px ;
min-height : 60px ;
color : # 777 ;
font-size : 24px ;
}
. about-wrap . changelog h2 . about-headline-callout {
margin : 1 . 1em 0 0 . 2em ;
font-size : 2 . 4em ;
font-weight : 300 ;
line-height : 1 . 3 ;
text-align : center ;
}
. about-wrap h3 {
margin : 1em 0 . 6em ;
font-size : 1 . 5em ;
line-height : 1 . 5em ;
}
2014-09-04 11:05:18 -04:00
. about-wrap h3 . higher {
margin-top : . 5em ;
}
2014-04-14 21:31:14 -04:00
. customize h3 {
margin-top : 1 . 75em ;
text-align : center ;
}
2014-02-19 16:43:14 -05:00
. about-wrap . feature-section h4 {
margin : 1 . 4em 0 0 . 6em 0 ;
font-size : 1 . 2em ;
}
. about-wrap . feature-section p {
margin-top : 0 . 6em ;
}
. about-wrap code ,
. about-wrap ol li p {
font-size : 14px ;
}
2014-04-14 21:31:14 -04:00
. about-wrap . button . button-large {
padding : 8px 20px 10px ! important ;
height : 46px ! important ;
font-size : 14px ;
line-height : 28px ! important ;
2014-02-19 16:43:14 -05:00
}
2014-04-14 21:31:14 -04:00
/* 3.8 Images */
2014-02-19 16:43:14 -05:00
. about-wrap . about-overview-img {
margin : 0 ;
}
/* Point Releases */
. about-wrap . point-releases {
margin-top : 5px ;
border-bottom : 1px solid # dfdfdf ;
}
. about-wrap . changelog . point-releases h3 {
padding-top : 35px ;
}
. about-wrap . changelog . point-releases h3 : first-child {
padding-top : 7px ;
}
/* WordPress Version Badge */
. wp-badge {
2014-02-26 12:23:13 -05:00
background : # 0074a2 url ( . . / images / w-logo-white . png ? ver = 20131202 ) no-repeat ;
background : # 0074a2 , url ( . . / images / wordpress-logo-white . svg ? ver = 20131110 ) no-repeat ; /* multiple backgrounds are ignored by browsers that don't support SVGs */
2014-02-19 16:43:14 -05:00
background-position : center 24px ;
-webkit-background-size : 85px 85px ;
background-size : 85px 85px ;
color : # 78c8e6 ;
font-size : 14px ;
text-align : center ;
font-weight : 600 ;
margin : 5px 0 0 ;
padding-top : 120px ;
height : 40px ;
display : inline-block ;
width : 150px ;
text-rendering : optimizeLegibility ;
-webkit-box-shadow : 0 1px 3px rgba ( 0 , 0 , 0 , 0 . 2 ) ;
box-shadow : 0 1px 3px rgba ( 0 , 0 , 0 , 0 . 2 ) ;
}
. about-wrap . wp-badge {
position : absolute ;
top : 0 ;
left : 0 ;
}
/* Tabs */
. about-wrap h2 . nav-tab-wrapper {
padding-right : 6px ;
}
. about-wrap h2 . nav-tab {
padding : 4px 15px 6px ;
margin : 0 0 -1px 3px ;
font-size : 18px ;
vertical-align : top ;
border-width : 1px ;
}
/* Changelog / Update screen */
2014-04-14 21:31:14 -04:00
. about-overview {
margin-top : 40px ;
2014-09-04 11:05:18 -04:00
margin-bottom : 40px ;
2014-04-14 21:31:14 -04:00
text-align : center ;
2014-04-16 13:40:14 -04:00
}
2014-08-27 00:40:15 -04:00
. about-overview p {
margin : 1em auto 50px ;
max-width : 770px ;
font-size : 18px ;
line-height : 1 . 5 ;
text-align : center ;
2014-02-19 16:43:14 -05:00
}
2014-04-14 21:31:14 -04:00
. about-wrap . feature-section {
margin-top : 40px ;
padding-bottom : 20px ;
2014-02-19 16:43:14 -05:00
}
. about-wrap . feature-section . two-col > div {
position : relative ;
2014-09-04 11:05:18 -04:00
width : 47 . 6 % ;
margin-left : 4 . 799999999 % ;
2014-02-19 16:43:14 -05:00
float : right ;
}
. about-wrap . feature-section . three-col > div {
position : relative ;
width : 29 . 95 % ;
margin-left : 4 . 999999999 % ;
float : right ;
}
. about-wrap . feature-section . col . last-feature {
margin-left : 0 ;
}
2014-04-14 21:31:14 -04:00
. about-wrap . under-the-hood . feature-section {
margin-top : 0 ;
2014-02-19 16:43:14 -05:00
}
. about-wrap . changelog . feature-section {
overflow : hidden ;
}
. about-wrap . feature-section . two-col div p {
margin-left : 3 % ;
}
. about-wrap . feature-section div p img {
float : left ;
margin-right : 10px ;
max-width : 20 % ;
}
2014-09-04 11:05:18 -04:00
/* responsive videos for 4.0 */
. about-video {
position : relative ;
width : 100 % ;
height : 0 ;
}
. about-video-embed {
padding-bottom : 70 . 4 % ; /* 352 / 500 */
}
. about-video-focus {
padding-bottom : 56 . 2 % ; /* 281 / 500 */
}
. about-video . wp-video ,
. about-video . mejs-container ,
. about-video video {
position : absolute ;
top : 0 ;
right : 0 ;
width : 100 % ! important ;
height : 100 % ! important ;
}
2014-02-19 16:43:14 -05:00
. about-wrap . changelog li {
list-style-type : disc ;
margin-right : 3em ;
}
/* Return to Dashboard Home link */
. about-wrap . return-to-dashboard {
margin : 30px -5px 0 0 ;
font-size : 14px ;
font-weight : bold ;
}
. about-wrap . return-to-dashboard a {
text-decoration : none ;
padding : 0 5px ;
}
/* Credits */
. about-wrap h4 . wp-people-group {
margin-top : 2 . 6em ;
font-size : 16px ;
}
. about-wrap ul . wp-people-group {
overflow : hidden ;
padding : 0 5px ;
margin : 0 -5px 0 -15px ;
}
. about-wrap ul . compact {
margin-bottom : 0
}
. about-wrap li . wp-person {
2014-10-26 22:33:18 -04:00
display : inline-block ;
vertical-align : top ;
2014-02-19 16:43:14 -05:00
margin-left : 10px ;
}
. about-wrap li . wp-person img . gravatar {
float : right ;
margin : 0 0 10px 10px ;
padding : 2px ;
width : 60px ;
height : 60px ;
}
. about-wrap ul . compact li . wp-person img . gravatar {
width : 30px ;
height : 30px ;
}
/* @todo: combine this */
. about-wrap li . wp-person {
height : 70px ;
width : 280px ;
padding-bottom : 15px ;
}
. about-wrap ul . compact li . wp-person {
height : auto ;
width : 180px ;
padding-bottom : 0 ;
margin-bottom : 0 ;
}
. about-wrap # wp-people-group-validators + p . wp-credits-list {
margin-top : 0 ;
}
. about-wrap li . wp-person a . web {
display : block ;
margin : 6px 0 2px ;
font-size : 16px ;
text-decoration : none ;
}
. about-wrap p . wp-credits-list a {
white-space : nowrap ;
}
/* Freedoms */
. freedoms-php . about-wrap ol {
margin : 40px 60px ;
}
. freedoms-php . about-wrap ol li {
list-style-type : decimal ;
font-weight : bold ;
}
. freedoms-php . about-wrap ol p {
font-weight : normal ;
margin : 0 . 6em 0 ;
}
/ * = Media Queries
-------------------------------------------------------------- * /
@ media screen and ( max-width : 782px ) {
. about-wrap . feature-section . one-col > div ,
. about-wrap . feature-section . two-col > div ,
2014-04-14 21:31:14 -04:00
. about-wrap . feature-section . three-col > div {
2014-02-19 16:43:14 -05:00
width : 100 % ;
2014-04-14 21:31:14 -04:00
margin : 0 0 40px ;
padding : 0 0 40px ;
2014-02-19 16:43:14 -05:00
float : none ;
2014-04-14 21:31:14 -04:00
border-bottom : 1px solid rgba ( 0 , 0 , 0 , 0 . 1 ) ;
2014-02-19 16:43:14 -05:00
}
2014-04-14 21:31:14 -04:00
. about-wrap . under-the-hood . feature-section > div ,
. about-wrap . feature-section . col > div . last-feature {
margin : 0 ;
padding : 0 ;
border-bottom : none ;
2014-02-19 16:43:14 -05:00
}
2014-04-14 21:31:14 -04:00
2014-02-19 16:43:14 -05:00
}
2014-09-04 11:05:18 -04:00
/* Responsive release video */
@ media screen and ( max-width : 710px ) {
. about-overview {
position : relative ;
padding-bottom : 56 . 25 % ; /* 360 / 640 */
width : 100 % ;
height : 0 ;
}
. about-overview embed {
position : absolute ;
top : 0 ;
right : 0 ;
width : 100 % ;
height : 100 % ;
}
}
2014-02-19 16:43:14 -05:00
@ media only screen and ( max-width : 500px ) {
. about-wrap {
margin-left : 20px ;
margin-right : 10px ;
}
. about-wrap h1 ,
. about-text {
margin-left : 0 ;
}
. about-text {
margin-bottom : 0 . 25em ;
}
. about-wrap . wp-badge {
position : relative ;
margin-bottom : 1 . 5em ;
width : 100 % ;
}
2014-09-04 11:05:18 -04:00
. about-wrap h2 . nav-tab-wrapper {
padding-right : 0 ;
border-bottom : 0 ;
}
. about-wrap h2 . nav-tab {
margin-top : 10px ;
margin-left : 10px ;
border-bottom : 1px solid # ccc ;
}
2014-02-19 16:43:14 -05:00
. about-wrap . feature-section . three-col div {
width : 100 % ;
float : none ;
}
. about-wrap . three-col . about-updates . col-1 {
padding : 0 ;
float : none ;
}
. about-wrap . three-col . about-updates . col-2 {
margin : 0 0 20px ;
width : 100 % ;
float : none ;
}
2014-09-04 11:24:16 -04:00
}