mirror of
https://github.com/moparisthebest/android.moparisthebest.org
synced 2024-08-13 15:53:46 -04:00
improved flexability of styling code blocks. Improved the light theme.
This commit is contained in:
Brandon Mathis
parent
d40eaab07c
commit
ae967b264d
@ -1,11 +1,24 @@
|
||||
$solarized: dark !default;
|
||||
$pre-bg: default !default;
|
||||
|
||||
$base03: #002b36 !default; //darkest blue
|
||||
$base02: #073642 !default; //dark blue
|
||||
$base01: #586e75 !default; //darkest gray
|
||||
$base00: #657b83 !default; //dark gray
|
||||
$base0: #839496 !default; //medium gray
|
||||
$base1: #93a1a1 !default; //medium light gray
|
||||
$base2: #eee8d5 !default; //cream
|
||||
$base3: #fdf6e3 !default; //white
|
||||
// Test defaults for cream colors
|
||||
$base2: default !default;
|
||||
$base3: default !default;
|
||||
@if $solarized == dark {
|
||||
@if $base2 == default { $base2: #eee8d5; } // cream
|
||||
@if $base3 == default { $base3: #fdf6e3; } // cream white
|
||||
}
|
||||
@if $solarized == light {
|
||||
// I prefer white and gray for the light theme
|
||||
@if $base2 == default { $base2: #e5e5e5; } // light gray
|
||||
@if $base3 == default { $base3: #fbfbfb; } // white
|
||||
}
|
||||
$solar-yellow: #b58900 !default;
|
||||
$solar-orange: #cb4b16 !default;
|
||||
$solar-red: #dc322f !default;
|
||||
@ -15,10 +28,8 @@ $solar-blue: #268bd2 !default;
|
||||
$solar-cyan: #2aa198 !default;
|
||||
$solar-green: #859900 !default;
|
||||
|
||||
$solarized: dark !default;
|
||||
|
||||
@if $solarized == light {
|
||||
|
||||
// Flipping the colors, This is the magic of Solarized.
|
||||
$_base03: $base03;
|
||||
$_base02: $base02;
|
||||
$_base01: $base01;
|
||||
@ -39,8 +50,21 @@ $solarized: dark !default;
|
||||
}
|
||||
|
||||
/* non highlighted code colors */
|
||||
$pre-bg: $base03 !default;
|
||||
@if $pre-bg == default {
|
||||
$pre-bg: $base03;
|
||||
} @else if $pre-bg != $base03 {
|
||||
$base03: $pre-bg;
|
||||
$base02: lighten($base03, 5);
|
||||
}
|
||||
|
||||
$pre-border: darken($base02, 5) !default;
|
||||
$pre-color: $base1 !default;
|
||||
|
||||
@if $pre-border != darken($base02, 5) {
|
||||
$base02: lighten($pre-border, 5);
|
||||
}
|
||||
@if $pre-color != $base1 {
|
||||
$base1: $pre-color;
|
||||
}
|
||||
|
||||
$code-selection-color: false !default;
|
||||
|
||||
@ -1,5 +1,9 @@
|
||||
// Here you can easily change your sites's color scheme.
|
||||
// To give it a try, uncomment some of the lines below rebuild your blog, and see how it works.
|
||||
/*
|
||||
Here you can easily change your site's color scheme.
|
||||
To give it a try, uncomment some of the lines below rebuild your blog, and see how it works.
|
||||
Look at sass/base/_theme.scss for more colors you tweak (override them in this file)
|
||||
|
||||
For a handy color picker try http://hslpicker.com */
|
||||
|
||||
//$header-bg: #263347;
|
||||
//$subtitle-color: lighten($header-bg, 58);
|
||||
@ -9,12 +13,31 @@
|
||||
//$sidebar-link-color-hover: darken(#7ab662, 9);
|
||||
|
||||
|
||||
//To use the light Solarized highlighting theme uncomment this block
|
||||
//$base03: $base3;
|
||||
//$base02: $base2;
|
||||
//$base01: $base1;
|
||||
//$base00: $base0;
|
||||
//$base0: $base00;
|
||||
//$base1: $base01;
|
||||
//$base2: $base02;
|
||||
//$base3: $base03;
|
||||
/* To use the light code highlighting theme uncomment the following line */
|
||||
|
||||
//$solarized: light;
|
||||
|
||||
/* To adjust the background color uncomment and edit the following line */
|
||||
/* If you intend to use a light background, uncomment $solarized: light; above*/
|
||||
|
||||
//$pre-bg: $base03;
|
||||
|
||||
|
||||
/* For fine control over the syntax highlighting colors edit here */
|
||||
|
||||
//$base03: #002b36; //darkest blue
|
||||
//$base02: #073642; //dark blue
|
||||
//$base01: #586e75; //darkest gray
|
||||
//$base00: #657b83; //dark gray
|
||||
//$base0: #839496; //medium gray
|
||||
//$base1: #93a1a1; //medium light gray
|
||||
//$base2: #eee8d5; //cream
|
||||
//$base3: #fdf6e3; //white
|
||||
//$solar-yellow: #b58900;
|
||||
//$solar-orange: #cb4b16;
|
||||
//$solar-red: #dc322f;
|
||||
//$solar-magenta: #d33682;
|
||||
//$solar-violet: #6c71c4;
|
||||
//$solar-blue: #268bd2;
|
||||
//$solar-cyan: #2aa198;
|
||||
//$solar-green: #859900;
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
text-align: right;
|
||||
font-size: 13px;
|
||||
line-height: 1.45em;
|
||||
@if $solarized == light {
|
||||
@if lightness($base03) > lightness(#555) {
|
||||
background: lighten($base03, 1) $noise-bg !important;
|
||||
border-right: 1px solid darken($base02, 2) !important;
|
||||
@include box-shadow(lighten($base03, 2) -1px 0 inset);
|
||||
@ -46,7 +46,7 @@ html .gist .gist-file {
|
||||
border: 1px solid lighten($base02, 2) !important;
|
||||
color: $base01;
|
||||
font-size: .7em !important;
|
||||
@if $solarized == light {
|
||||
@if lightness($base03) > lightness(#555) {
|
||||
background: lighten($base03, 2) $noise-bg;
|
||||
border: 1px solid $pre-border !important;
|
||||
border-top: 1px solid lighten($base03, 2) !important;
|
||||
@ -107,7 +107,6 @@ p, li {
|
||||
}
|
||||
|
||||
.pre-code {
|
||||
@include selection(adjust-color($base03, $lightness: 23%, $saturation: -65%), $text-shadow: $base03 0 1px);
|
||||
font-family: $mono !important;
|
||||
overflow: scroll;
|
||||
overflow-y: hidden;
|
||||
@ -196,7 +195,7 @@ p, li {
|
||||
|
||||
$solar-scroll-bg: rgba(#fff, .15);
|
||||
$solar-scroll-thumb: rgba(#fff, .2);
|
||||
@if $solarized == light {
|
||||
@if lightness($base03) > lightness(#555) {
|
||||
$solar-scroll-bg: rgba(#000, .15);
|
||||
$solar-scroll-thumb: rgba(#000, .15);
|
||||
}
|
||||
@ -223,31 +222,50 @@ figure.code {
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
@if $code-selection-color != false {
|
||||
@include selection($code-selection);
|
||||
}
|
||||
}
|
||||
|
||||
.code-title {
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
line-height: 2em;
|
||||
text-shadow: #cbcccc 0 1px 0;
|
||||
color: #474747;
|
||||
font-weight: normal;
|
||||
margin-bottom: 0;
|
||||
@include border-top-radius(5px);
|
||||
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;
|
||||
background-color: #aaaaaa; // image-url("code_bg.png") top repeat-x;
|
||||
@if lightness($base03) <= lightness(#555) {
|
||||
text-shadow: #cbcccc 0 1px 0;
|
||||
color: #555;
|
||||
@include background-image(linear-gradient(
|
||||
#e0e0e0, #cfcfcf 6%, #b1b1b1 90%, #aaaaaa
|
||||
));
|
||||
border: 1px solid #a5a5a5 {
|
||||
top-color: #cbcbcb;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
@else if lightness($base03) > lightness(#555) {
|
||||
text-shadow: #fff 0 1px 0;
|
||||
color: #777;
|
||||
@include background-image(linear-gradient(
|
||||
#fff, #f0f0f0 6%, #e5e5e5 90%, #ddd
|
||||
));
|
||||
border: 1px solid #c5c5c5 {
|
||||
top-color: #d5d5d5;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.download-source {
|
||||
position: absolute; right: .8em;
|
||||
@include hover-link;
|
||||
color: #666 !important;
|
||||
color: inherit !important;
|
||||
z-index: 1;
|
||||
font-size: 13px;
|
||||
text-shadow: #cbcccc 0 1px 0;
|
||||
padding-left: 3em;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user