Skip to content

Commit

Permalink
1. Some general styling improvements especially for syntax and naviga…
Browse files Browse the repository at this point in the history 
…tion

2. JS line numbering now supports embedded gists
3. Added a favicon
  • Loading branch information
@imathis
imathis committed Jun 16, 2011
1 parent ab29d45 commit b0405cc
Show file tree
Hide file tree
Showing 7 changed files with 105 additions and 58 deletions.
1 change: 1 addition & 0 deletions themes/classic/sass/default/core/_theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,3 +50,4 @@ $textinput-border-focus: #989898;
#articles a, #articles + aside a {
@include link-colors($link-color, $hover: saturate(darken($link_color, 15), 20), $focus: saturate(darken($link_color, 15), 20), $visited: darken(adjust_hue($link_color, 70), 10));
}
a { @include transition(color, .5s); }
8 changes: 4 additions & 4 deletions themes/classic/sass/default/core/_utilities.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,11 @@
height: image-height($img);
}

@mixin selection($bg: #b4d5fe, $color: inherit){
@mixin selection($bg, $color: inherit, $text-shadow: none){
* {
&::-moz-selection { background: $bg; color: $color; text-shadow: darken($bg, 20) 0 1px 1px; }
&::-webkit-selection { background: $bg; color: $color; text-shadow: darken($bg, 20) 0 1px 1px;}
&::selection { background: $bg; color: $color; text-shadow: darken($bg, 20) 0 1px 1px; }
&::-moz-selection { background: $bg; color: $color; text-shadow: $text-shadow; }
&::-webkit-selection { background: $bg; color: $color; text-shadow: $text-shadow; }
&::selection { background: $bg; color: $color; text-shadow: $text-shadow; }
}
}

Expand Down
7 changes: 4 additions & 3 deletions themes/classic/sass/default/partials/_navigation.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ body > nav {
.search {
padding: .3em .5em 0;
font-size: .85em;
@extend .sans;
line-height: 1.1em;
width: 95%;
@include border-radius(.5em);
Expand Down Expand Up @@ -58,7 +59,7 @@ body > nav {
text-shadow: lighten($nav-bg, 12) 0 1px;
float: left;
text-decoration: none;
font-size: .9em;
font-size: 1em;
padding: .1em 0;
line-height: 1.5em;
}
Expand All @@ -82,7 +83,7 @@ body > nav {
}
}
ul[data-subscription$=email] + form {
width: $sidebar-width-medium - $pad-medium*2 - $sidebar-pad-medium - 48px;
width: $sidebar-width-medium - $pad-medium*2 - $sidebar-pad-medium - 58px;
.search { width: 91%; }
}
fieldset[role=mobile-nav] { display: none; }
Expand All @@ -94,7 +95,7 @@ body > nav {
width: $sidebar-width-wide - $pad-wide - $sidebar-pad-wide*2 + 5px;
}
ul[data-subscription$=email] + form {
width: $sidebar-width-wide - $pad-wide - $sidebar-pad-wide*2 - 48px;
width: $sidebar-width-wide - $pad-wide - $sidebar-pad-wide*2 - 58px;
}
}
}
Expand Down
99 changes: 71 additions & 28 deletions themes/classic/sass/default/partials/_syntax.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,51 +25,73 @@ $green: #859900;
//$base2: $base02;
//$base3: $base03;

.gutter {
.line-numbers {
.highlight, html .gist .gist-file .gist-syntax .gist-highlight {
pre.line-numbers {
text-align: right;
background: $base02 !important;
border-right: 1px solid darken($base03, 2);
border-right: 1px solid darken($base03, 2) !important;
@include box-shadow(lighten($base02, 2) -1px 0 inset);
text-shadow: darken($base02, 10) 0 -1px;
span { color: $base01 !important; }
padding-left: .8em !important;
padding-right: .8em !important;
}
}
html .gist .gist-file {
margin-bottom: 1.5em;
position: relative;
border: none;
padding-top: image-height("code_bg.png") !important;
.gist-syntax {
border-bottom: 1px solid #515151 !important;
border-bottom: 1px solid darken($base03, 2) !important;
.gist-highlight{
background: $base03 !important;
pre {
@extend .pre;
overflow-y: hidden;
overflow-x: auto;
}
pre.line-numbers {

}
}
}
.gist-meta {
@include background(linear-gradient(#b0b0b0, #a7a7a7));
padding: 0.5em;
background-color: #bababa !important;
border: 1px solid #9c9c9c;
border-top: 1px solid #d0d0d0;
border-bottom: 1px solid #777777;
font-size: .7em !important;
font-family: "Helvetica Neue", Arial, sans-serif !important;
color: #464646 !important;
line-height: 1.4em;
padding: .6em 0.8em;
border: 1px solid lighten($base02, 2) !important;
color: $base01;
font-size: .7em !important;
background: $base02;
@extend .sans;
line-height: 1.5em;
a {
color: mix($base1, $base01) !important;
@include hover-link;
&:hover { color: $base1 !important; }
}
a[href*='#file'] {
position: absolute; top: 0; left:0; right:-10px;
color: #474747 !important;
@extend .code-title;
&:hover { color: $link-color !important; }
}
a[href*=raw]{
@extend .download-source;
top: .4em;
}
}
}
pre { @extend .pre; }

.pre {
@extend .mono;
@include selection(adjust-color($base03, $lightness: 23%, $saturation: -65%), $text-shadow: $base03 0 1px);
font-size: .8em;
overflow: scroll;
overflow-y: hidden;
overflow-x: auto;
line-height: 1.45em;
padding: 1em 1.2em !important;
background: $base03 !important;
code { background: $base03 !important; overflow: hidden; }
color: $base1 !important;
span { color: $base1 !important; }
span { font-style: normal !important; font-weight: normal !important; }
Expand All @@ -84,13 +106,13 @@ pre { @extend .pre; }
.o { color: $base1 !important; font-weight: bold !important; } /* Operator */
.p { color: $base1 !important; } /* Operator */
.ow { color: $cyan !important; font-weight: bold !important; } /* Operator.Word */
.gd { color: $base1 !important; background-color: mix($red, $base03, 25%) !important; display: block; } /* Generic.Deleted */
.gd .x { color: $base1 !important; background-color: mix($red, $base03, 35%) !important; display: block; } /* Generic.Deleted.Specific */
.gd { color: $base1 !important; background-color: mix($red, $base03, 25%) !important; display: inline-block; } /* Generic.Deleted */
.gd .x { color: $base1 !important; background-color: mix($red, $base03, 35%) !important; display: inline-block; } /* Generic.Deleted.Specific */
.ge { color: $base1 !important; font-style: italic !important; } /* Generic.Emph */
//.gr { color: #aa0000 } /* Generic.Error */
.gh { color: $base01 !important; } /* Generic.Heading */
.gi { color: $base1 !important; background-color: mix($green, $base03, 20%) !important; display: block; } /* Generic.Inserted */
.gi .x { color: $base1 !important; background-color: mix($green, $base03, 40%) !important; display: block; } /* Generic.Inserted.Specific */
.gi { color: $base1 !important; background-color: mix($green, $base03, 20%) !important; display: inline-block; } /* Generic.Inserted */
.gi .x { color: $base1 !important; background-color: mix($green, $base03, 40%) !important; display: inline-block; } /* Generic.Inserted.Specific */
//.go { color: #888888 } /* Generic.Output */
//.gp { color: #555555 } /* Generic.Prompt */
.gs { color: $base1 !important; font-weight: bold !important; } /* Generic.Strong */
Expand Down Expand Up @@ -136,32 +158,53 @@ pre { @extend .pre; }
.s1 { color: $cyan !important; } /* Literal.String.Single */
//.ss { color: #990073 } /* Literal.String.Symbol */
//.il { color: #009999 } /* Literal.Number.Integer.Long */
div { .gd, .gd .x, .gi, .gi .x { display: block; }}
}

.highlight {
.highlight, .gist-highlight {
margin-bottom: 1.5em;
background: $base03;
overflow-y: hidden;
.gutter pre {
padding-left: .8em !important;
padding-right: .8em !important;
overflow-x: auto;
pre { overflow: visible; }
}
figure {
margin-bottom: 1.5em;
figcaption {
position: relative;
@extend .code-title;
a { @extend .download-source; }
}
.highlight { margin-bottom: 0; border-bottom: 1px solid darken($base03, 2) !important; }
}

h3.filename {
h3.filename { @extend .code-title; }
.code-title {
text-align: center;
font-size: 13px;
line-height: 2em;
text-align: center;
text-shadow: #cbcccc 0 1px 0;
color: #474747;
font-style: normal;
margin-bottom: 0;

@include border-top-radius(5px);
font-family: "Helvetica Neue",Arial, "Lucida Grande", "Lucida Sans Unicode", Lucida, sans-serif;
font-family: "Helvetica Neue", Arial, "Lucida Grande", "Lucida Sans Unicode", Lucida, sans-serif;
background: #aaaaaa image-url("code_bg.png") top repeat-x;
border: 1px solid #565656;
border-top-color: #cbcbcb;
border-left-color: #a5a5a5;
border-right-color: #a5a5a5;
border-bottom: 0;
}

.download-source {
position: absolute; right: .8em;
@include hover-link;
color: #666 !important;
&:hover { color: $link-color !important; }
z-index: 1;
font-size: 13px;
text-shadow: #cbcccc 0 1px 0;
padding-left: 3em;
}

3 changes: 3 additions & 0 deletions themes/classic/source/_includes/head.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,13 @@
<meta name="keywords" content="{{page.keywords}}"/>
{% endif %}

<link href="/images/favicon.png" rel="shortcut icon" />
<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
<script src="/javascripts/modernizr-2.0.js"></script>
<script src="/javascripts/ender.js"></script>
<script src="/javascripts/octopress.js" type="text/javascript"></script>
<link href='http://fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic' rel='stylesheet' type='text/css'>
{% include google_analytics.html %}
<link href="/atom.xml" rel="alternate" title="{{site.title}}" type="application/atom+xml"/>
</head>
Binary file added themes/classic/source/images/favicon.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
45 changes: 22 additions & 23 deletions themes/classic/source/javascripts/octopress.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
function getNav(){
var fieldset = $('body > nav fieldset[role=site-search]').after('<fieldset role="mobile-nav"></fieldset>').next();
var select = $(fieldset).append('<select></select>').children();
select.append('<option value="">Navigate&hellip;</option>');
$($('body > nav ul[role=main-nav] a').concat($('body > nav ul[role=subscription] a'))).each(function(link) {
select.append('<option value="'+link.href+'">&bull; '+link.text+'</option>')
var mobileNav = $('body > nav fieldset[role=site-search]').after('<fieldset role="mobile-nav"></fieldset>').next().append('<select></select>');
mobileNav.children('select').append('<option value="">Navigate&hellip;</option>');
$($('body > nav ul[role=main-nav] a')).each(function(link) {
mobileNav.children('select').append('<option value="'+link.href+'">&bull; '+link.text+'</option>')
});
select.bind('change', function(event){
if (select.val()) window.location.href = select.val();
mobileNav.children('select').bind('change', function(event){
if (event.target.value) window.location.href = event.target.value;
});
}
function addSidebarToggler() {
Expand Down Expand Up @@ -37,20 +36,10 @@ function testFeatures() {
}
}

function addDivLines(){
$('div.highlight pre code').each(function(el){
var content = bonzo(el).html();
var lines = content.replace(/\s*$/g, '').split('\n');
var count = lines.length;
bonzo(lines).each(function(line, index){
if(line == '') line = ' ';
lines[index] = '<div class="line">' + line + '</div>';
});
$(el).html(lines.join(''));
});
}
function preToTable(){
$('div.highlight').each(function(code){
function addCodeLineNumbers(){
if (navigator.appName == 'Microsoft Internet Explorer') { return }
$('div.highlight pre code').each(function(el){ addDivLines(el); });
$('div.highlight, div.gist-highlight').each(function(code){
var tableStart = '<table cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter">';
var lineNumbers = '<pre class="line-numbers">';
var tableMiddle = '</pre></td><td class="code" width="100%">';
Expand All @@ -63,6 +52,16 @@ function preToTable(){
$(code).html(table);
});
}
function addDivLines(el){
var content = $(el).html();
var lines = content.replace(/\s*$/g, '').split(/\n/);
var count = lines.length;
$(lines).each(function(line, index){
if(line == '') line = ' ';
lines[index] = '<div class="line">' + line + '</div>';
});
$(el).html(lines.join(''));
}

function flashVideoFallback(){
var flashplayerlocation = "/assets/jwplayer/player.swf",
Expand Down Expand Up @@ -102,10 +101,9 @@ function wrapFlashVideos(){

$.domReady(function(){
testFeatures();
addDivLines();
flashVideoFallback();
wrapFlashVideos();
preToTable();
addCodeLineNumbers();
getNav();
addSidebarToggler();
});
Expand Down Expand Up @@ -144,3 +142,4 @@ b=j.userAgent.toLowerCase(),d=j.platform.toLowerCase(),g=d?/win/.test(d):/win/.t
a&&b&&d&&i&&k){d+="";i+="";var p={};if(f&&typeof f===o)for(var m in f)p[m]=f[m];p.data=a;p.width=d;p.height=i;a={};if(c&&typeof c===o)for(var n in c)a[n]=c[n];if(e&&typeof e===o)for(var r in e)typeof a.flashvars!=l?a.flashvars+="&"+r+"="+e[r]:a.flashvars=r+"="+e[r];if(t(k))b=s(p,a,b),j.success=!0,j.ref=b}h&&h(j)},ua:g,getFlashPlayerVersion:function(){return{major:g.pv[0],minor:g.pv[1],release:g.pv[2]}},hasFlashPlayerVersion:t,createSWF:function(a,b,d){if(g.w3)return s(a,b,d)},getQueryParamValue:function(a){var b=
i.location.search||i.location.hash;if(b){/\?/.test(b)&&(b=b.split("?")[1]);if(a==null)return u(b);for(var b=b.split("&"),d=0;d<b.length;d++)if(b[d].substring(0,b[d].indexOf("="))==a)return u(b[d].substring(b[d].indexOf("=")+1))}return""}}}();


0 comments on commit b0405cc

Please sign in to comment.