Skip to content

Commit 35c468b

Browse files
committed
jquery: Fix CSS to account for the newest highlight.js
Since for some time some sites will use an older version of `grunt-jquery-content` that includes an older highlight.js version, for now both types of CSS rules need to be present. The legacy ones have been marked with comments. The new version of highlight.js uses more generic class names, shared between languages. That means there's no 1-1 correspondence between the old & the new ones in all cases & some differences in syntax highlighting will be there. That's 9 years of highlight.js updates, though!
1 parent bb05d9c commit 35c468b

File tree

2 files changed

+147
-121
lines changed

2 files changed

+147
-121
lines changed

themes/jquery/css/base.css

Lines changed: 146 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -1317,11 +1317,9 @@ iframe {
13171317
float: right;
13181318
margin-right: -25px;
13191319
position: relative;
1320-
-webkit-border-image: -webkit-linear-gradient(#ffffff, #e7e7e7 15%, #e7e7e7 85%, #ffffff);
13211320
border-image: linear-gradient(#ffffff, #e7e7e7 15%, #e7e7e7 85%, #ffffff);
13221321
box-shadow: inset 15px 0 5px -16px #e7e7e7;
1323-
background-image: -webkit-radial-gradient(left, #f2f2f2, #ffffff 80%);
1324-
background-image: radial-gradient(left, #f2f2f2, #ffffff 80%);
1322+
background-image: radial-gradient(ellipse at left, #f2f2f2, #ffffff 80%);
13251323
border: 0;
13261324
border-left: 1px solid #efefef;
13271325
}
@@ -1333,11 +1331,9 @@ iframe {
13331331
border-left: 0;
13341332
border-right: 1px solid #e7e7e7;
13351333
margin: -20px 0 0 -25px;
1336-
-webkit-border-image: -webkit-linear-gradient(#ffffff, #e7e7e7 15%, #e7e7e7 85%, #ffffff);
13371334
border-image: linear-gradient(#ffffff, #e7e7e7 15%, #e7e7e7 85%, #ffffff);
13381335
box-shadow: inset 15px 0 5px -16px #e7e7e7;
1339-
background-image: -webkit-radial-gradient(right, #f2f2f2, #ffffff 80%);
1340-
background-image: radial-gradient(right, #f2f2f2, #ffffff 80%);
1336+
background-image: radial-gradient(ellipse at right, #f2f2f2, #ffffff 80%);
13411337
}
13421338

13431339
.entry-summary p {
@@ -1710,7 +1706,6 @@ nav#main {
17101706
border-right: 1px solid rgba(2, 2, 2, 0.28);
17111707
border-left: 1px solid rgba(2, 2, 2, 0.28);
17121708
border-top: 1px solid rgba(250, 250, 250, 0.27);
1713-
box-shadow: rgba(255,255,255,0.3) 0 1px 0, rgba(0,0,0,0.3) 0 -1px 0;
17141709
box-shadow: 0 0 5px rgba(1, 1, 1, 0.7);
17151710
}
17161711

@@ -1806,23 +1801,7 @@ nav#main .searchform input:focus {
18061801
color: #333;
18071802
}
18081803

1809-
/*
1810-
* 1. :-moz-placeholder has been deprecated in favor of ::-moz-placeholder.
1811-
* 2. Using :placeholder for completeness.
1812-
*/
1813-
nav#main .searchform input::-webkit-input-placeholder {
1814-
color: #fff;
1815-
}
1816-
nav#main .searchform input:-moz-placeholder { /* 1 */
1817-
color: #fff;
1818-
}
1819-
nav#main .searchform input::-moz-placeholder {
1820-
color: #fff;
1821-
}
1822-
nav#main .searchform input:-ms-input-placeholder {
1823-
color: #fff;
1824-
}
1825-
nav#main .searchform input:placeholder { /* 2 */
1804+
nav#main .searchform input::placeholder {
18261805
color: #fff;
18271806
}
18281807

@@ -2131,7 +2110,8 @@ p.author a {
21312110
padding: 2%;
21322111
padding-bottom: .5%;
21332112
margin-bottom: 20px;
2134-
font: 700 "klavika-web", "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
2113+
font-weight: 700;
2114+
font-family: "klavika-web", "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
21352115
color: #666;
21362116
background: url(../images-foundation/gauze.png) #f0f0f0;
21372117
text-shadow: 0 1px 0 #ffffff;
@@ -2316,7 +2296,8 @@ input[type="submit"].dark:hover {
23162296
========================================================================== */
23172297

23182298
#sidebar h3 {
2319-
font: 20px/18px;
2299+
font-size: 20px;
2300+
line-height: 18px;
23202301
background-image: -webkit-linear-gradient(left, #efefef, #f3f3f3);
23212302
background-image: linear-gradient(to right, #efefef, #f3f3f3);
23222303
margin-left: -20px;
@@ -3630,120 +3611,165 @@ pre code {
36303611
background: #f8f8ff
36313612
}
36323613

3633-
pre .comment,
3634-
pre .template_comment,
3635-
pre .diff .header,
3636-
pre .javadoc {
3637-
color: #998;
3638-
font-style: italic
3639-
}
3614+
/*
3615+
* Styles for highlight.js. Classes without the hljs prefix are legacy
3616+
* and can be removed once all pages update grunt-jquery-content to
3617+
* the latest version.
3618+
*/
36403619

3641-
pre .keyword,
3642-
pre .css .rule .keyword,
3643-
pre .winutils,
3644-
pre .javascript .title,
3645-
pre .nginx .title,
3646-
pre .subst,
3647-
pre .request,
3648-
pre .status {
3649-
color: #333;
3650-
font-weight: bold
3620+
pre .comment, /* legacy */
3621+
pre .hljs-comment,
3622+
pre .template_comment, /* legacy */
3623+
pre .diff .header, /* legacy */
3624+
pre .diff .hljs-meta,
3625+
pre .javadoc, /* legacy */
3626+
pre .hljs-doctag {
3627+
color: #998;
3628+
font-style: italic
3629+
}
3630+
3631+
pre .keyword, /* legacy */
3632+
pre .hljs-keyword,
3633+
pre .css .rule .keyword, /* legacy */
3634+
pre .css .hljs-keyword,
3635+
pre .winutils, /* ??? */
3636+
pre .javascript .title, /* legacy */
3637+
pre .javascript .hljs-name,
3638+
pre .nginx .title, /* legacy */
3639+
pre .nginx .hljs-name,
3640+
pre .subst, /* legacy */
3641+
pre .hljs-subst,
3642+
pre .request, /* ??? */
3643+
pre .status /* ??? */ {
3644+
color: #333;
3645+
font-weight: bold
36513646
}
36523647

3653-
pre .number,
3654-
pre .hexcolor,
3655-
pre .ruby .constant {
3656-
color: #099;
3648+
pre .number, /* legacy */
3649+
pre .hexcolor, /* legacy */
3650+
pre .hljs-number,
3651+
pre .ruby .constant /* legacy */ {
3652+
color: #099;
36573653
}
36583654

3659-
pre .string,
3660-
pre .tag .value,
3661-
pre .phpdoc,
3662-
pre .tex .formula {
3663-
color: #d14
3655+
pre .string, /* legacy */
3656+
pre .tag .value, /* legacy */
3657+
pre .hljs-string,
3658+
pre .phpdoc, /* legacy */
3659+
pre .tex .formula /* legacy */ {
3660+
color: #d14
36643661
}
36653662

3666-
pre .title,
3667-
pre .id {
3668-
color: #900;
3669-
font-weight: bold
3663+
pre .hljs-name,
3664+
pre .id, /* legacy */
3665+
pre .hljs-selector-id {
3666+
color: #900;
3667+
font-weight: bold
36703668
}
36713669

3672-
pre .javascript .title,
3673-
pre .lisp .title,
3674-
pre .clojure .title,
3675-
pre .subst {
3676-
font-weight: normal
3670+
pre .javascript .title, /* legacy */
3671+
pre .javascript .hljs-name,
3672+
pre .lisp .title, /* legacy */
3673+
pre .lisp .hljs-name,
3674+
pre .clojure .title, /* legacy */
3675+
pre .clojure .hljs-name,
3676+
pre .subst, /* legacy */
3677+
pre .hljs-subst {
3678+
font-weight: normal
36773679
}
36783680

3679-
pre .class .title,
3681+
pre .class .title, /* legacy */
3682+
pre .hljs-selector-class .hljs-name,
36803683
pre .haskell .type,
3681-
pre .vhdl .literal,
3682-
pre .tex .command {
3683-
color: #458;
3684-
font-weight: bold
3685-
}
3686-
3687-
pre .tag,
3688-
pre .tag .title,
3689-
pre .rules .property,
3690-
pre .django .tag .keyword {
3691-
color: #000080;
3692-
font-weight: normal
3693-
}
3694-
3695-
pre .attribute,
3696-
pre .variable,
3697-
pre .lisp .body {
3698-
color: #008080
3699-
}
3700-
3701-
pre .regexp {
3702-
color: #009926
3703-
}
3704-
3705-
pre .class {
3706-
color: #458;
3707-
font-weight: bold
3708-
}
3709-
3710-
pre .symbol,
3711-
pre .ruby .symbol .string,
3712-
pre .lisp .keyword,
3713-
pre .tex .special,
3714-
pre .prompt {
3715-
color: #990073
3716-
}
3717-
3718-
pre .built_in,
3719-
pre .lisp .title,
3720-
pre .clojure .built_in {
3721-
color: #0086b3
3722-
}
3723-
3724-
pre .preprocessor,
3725-
pre .pi,
3726-
pre .doctype,
3727-
pre .shebang,
3728-
pre .cdata {
3729-
color: #999;
3730-
font-weight: bold
3684+
pre .haskell .hljs-type,
3685+
pre .vhdl .literal, /* legacy */
3686+
pre .vhdl .hljs-string,
3687+
pre .tex .command, /* legacy */
3688+
pre .tex .hljs-keyword {
3689+
color: #458;
3690+
font-weight: bold
3691+
}
3692+
3693+
pre .tag, /* legacy */
3694+
pre .hljs-tag,
3695+
pre .tag .title, /* legacy */
3696+
pre .hljs-tag .hljs-name,
3697+
pre .rules .property, /* ??? */
3698+
pre .django .tag .keyword, /* legacy */
3699+
pre .django .hljs-tag .hljs-keyword {
3700+
color: #000080;
3701+
font-weight: normal
3702+
}
3703+
3704+
pre .attribute, /* legacy */
3705+
pre .hljs-attribute,
3706+
pre .hljs-attr,
3707+
pre .variable, /* legacy */
3708+
pre .hljs-variable,
3709+
pre .lisp .body, /* legacy */
3710+
pre .lisp .hljs-symbol {
3711+
color: #008080
3712+
}
3713+
3714+
pre .regexp, /* legacy */
3715+
pre .hljs-regexp {
3716+
color: #009926
3717+
}
3718+
3719+
pre .class, /* legacy */
3720+
pre .hljs-selector-class {
3721+
color: #458;
3722+
font-weight: bold
3723+
}
3724+
3725+
pre .symbol, /* legacy */
3726+
pre .hljs-symbol,
3727+
pre .ruby .symbol .string, /* legacy */
3728+
pre .ruby .hljs-symbol .hljs-string,
3729+
pre .lisp .keyword, /* legacy */
3730+
pre .lisp .hljs-keyword,
3731+
pre .tex .special, /* legacy */
3732+
pre .prompt /* legacy */ {
3733+
color: #990073
3734+
}
3735+
3736+
pre .built_in, /* legacy */
3737+
pre .hljs-built_in,
3738+
pre .lisp .title, /* legacy */
3739+
pre .lisp .hljs-name,
3740+
pre .clojure .built_in, /* legacy */
3741+
pre .clojure .hljs-built_in {
3742+
color: #0086b3
3743+
}
3744+
3745+
pre .preprocessor, /* legacy */
3746+
pre .pi, /* legacy */
3747+
pre .doctype, /* legacy */
3748+
pre .shebang, /* legacy */
3749+
pre .cdata, /* legacy */
3750+
pre .hljs-meta {
3751+
color: #999;
3752+
font-weight: bold
37313753
}
37323754

3733-
pre .deletion {
3734-
background: #fdd
3755+
pre .deletion, /* legacy */
3756+
pre .hljs-deletion {
3757+
background: #fdd
37353758
}
37363759

3737-
pre .addition {
3738-
background: #dfd
3760+
pre .addition, /* legacy */
3761+
pre .hljs-addition {
3762+
background: #dfd
37393763
}
37403764

3741-
pre .diff .change {
3742-
background: #0086b3
3765+
pre .diff .change, /* legacy */
3766+
pre .diff .hljs-meta {
3767+
background: #0086b3
37433768
}
37443769

3745-
pre .chunk {
3746-
color: #aaa
3770+
pre .chunk, /* legacy */
3771+
pre .diff .hljs-comment {
3772+
color: #aaa
37473773
}
37483774

37493775
.syntaxhighlighter a,

themes/jquery/header.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323

2424
<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/i/favicon.ico">
2525

26-
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/base.css?v=2">
26+
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/base.css?v=3">
2727
<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>">
2828

2929
<script src="<?php echo get_template_directory_uri(); ?>/js/modernizr.custom.2.8.3.min.js"></script>

0 commit comments

Comments
 (0)