mirror of
https://github.com/moparisthebest/android.moparisthebest.org
synced 2024-11-16 06:05:00 -05:00
improved flexability of styling code blocks. Improved the light theme.
This commit is contained in:
parent
d40eaab07c
commit
ae967b264d
@ -1,11 +1,24 @@
|
|||||||
|
$solarized: dark !default;
|
||||||
|
$pre-bg: default !default;
|
||||||
|
|
||||||
$base03: #002b36 !default; //darkest blue
|
$base03: #002b36 !default; //darkest blue
|
||||||
$base02: #073642 !default; //dark blue
|
$base02: #073642 !default; //dark blue
|
||||||
$base01: #586e75 !default; //darkest gray
|
$base01: #586e75 !default; //darkest gray
|
||||||
$base00: #657b83 !default; //dark gray
|
$base00: #657b83 !default; //dark gray
|
||||||
$base0: #839496 !default; //medium gray
|
$base0: #839496 !default; //medium gray
|
||||||
$base1: #93a1a1 !default; //medium light gray
|
$base1: #93a1a1 !default; //medium light gray
|
||||||
$base2: #eee8d5 !default; //cream
|
// Test defaults for cream colors
|
||||||
$base3: #fdf6e3 !default; //white
|
$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-yellow: #b58900 !default;
|
||||||
$solar-orange: #cb4b16 !default;
|
$solar-orange: #cb4b16 !default;
|
||||||
$solar-red: #dc322f !default;
|
$solar-red: #dc322f !default;
|
||||||
@ -15,10 +28,8 @@ $solar-blue: #268bd2 !default;
|
|||||||
$solar-cyan: #2aa198 !default;
|
$solar-cyan: #2aa198 !default;
|
||||||
$solar-green: #859900 !default;
|
$solar-green: #859900 !default;
|
||||||
|
|
||||||
$solarized: dark !default;
|
|
||||||
|
|
||||||
@if $solarized == light {
|
@if $solarized == light {
|
||||||
|
// Flipping the colors, This is the magic of Solarized.
|
||||||
$_base03: $base03;
|
$_base03: $base03;
|
||||||
$_base02: $base02;
|
$_base02: $base02;
|
||||||
$_base01: $base01;
|
$_base01: $base01;
|
||||||
@ -39,8 +50,21 @@ $solarized: dark !default;
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* non highlighted code colors */
|
/* 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-border: darken($base02, 5) !default;
|
||||||
$pre-color: $base1 !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;
|
//$header-bg: #263347;
|
||||||
//$subtitle-color: lighten($header-bg, 58);
|
//$subtitle-color: lighten($header-bg, 58);
|
||||||
@ -9,12 +13,31 @@
|
|||||||
//$sidebar-link-color-hover: darken(#7ab662, 9);
|
//$sidebar-link-color-hover: darken(#7ab662, 9);
|
||||||
|
|
||||||
|
|
||||||
//To use the light Solarized highlighting theme uncomment this block
|
/* To use the light code highlighting theme uncomment the following line */
|
||||||
//$base03: $base3;
|
|
||||||
//$base02: $base2;
|
//$solarized: light;
|
||||||
//$base01: $base1;
|
|
||||||
//$base00: $base0;
|
/* To adjust the background color uncomment and edit the following line */
|
||||||
//$base0: $base00;
|
/* If you intend to use a light background, uncomment $solarized: light; above*/
|
||||||
//$base1: $base01;
|
|
||||||
//$base2: $base02;
|
//$pre-bg: $base03;
|
||||||
//$base3: $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;
|
text-align: right;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
line-height: 1.45em;
|
line-height: 1.45em;
|
||||||
@if $solarized == light {
|
@if lightness($base03) > lightness(#555) {
|
||||||
background: lighten($base03, 1) $noise-bg !important;
|
background: lighten($base03, 1) $noise-bg !important;
|
||||||
border-right: 1px solid darken($base02, 2) !important;
|
border-right: 1px solid darken($base02, 2) !important;
|
||||||
@include box-shadow(lighten($base03, 2) -1px 0 inset);
|
@include box-shadow(lighten($base03, 2) -1px 0 inset);
|
||||||
@ -46,7 +46,7 @@ html .gist .gist-file {
|
|||||||
border: 1px solid lighten($base02, 2) !important;
|
border: 1px solid lighten($base02, 2) !important;
|
||||||
color: $base01;
|
color: $base01;
|
||||||
font-size: .7em !important;
|
font-size: .7em !important;
|
||||||
@if $solarized == light {
|
@if lightness($base03) > lightness(#555) {
|
||||||
background: lighten($base03, 2) $noise-bg;
|
background: lighten($base03, 2) $noise-bg;
|
||||||
border: 1px solid $pre-border !important;
|
border: 1px solid $pre-border !important;
|
||||||
border-top: 1px solid lighten($base03, 2) !important;
|
border-top: 1px solid lighten($base03, 2) !important;
|
||||||
@ -107,7 +107,6 @@ p, li {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.pre-code {
|
.pre-code {
|
||||||
@include selection(adjust-color($base03, $lightness: 23%, $saturation: -65%), $text-shadow: $base03 0 1px);
|
|
||||||
font-family: $mono !important;
|
font-family: $mono !important;
|
||||||
overflow: scroll;
|
overflow: scroll;
|
||||||
overflow-y: hidden;
|
overflow-y: hidden;
|
||||||
@ -196,7 +195,7 @@ p, li {
|
|||||||
|
|
||||||
$solar-scroll-bg: rgba(#fff, .15);
|
$solar-scroll-bg: rgba(#fff, .15);
|
||||||
$solar-scroll-thumb: rgba(#fff, .2);
|
$solar-scroll-thumb: rgba(#fff, .2);
|
||||||
@if $solarized == light {
|
@if lightness($base03) > lightness(#555) {
|
||||||
$solar-scroll-bg: rgba(#000, .15);
|
$solar-scroll-bg: rgba(#000, .15);
|
||||||
$solar-scroll-thumb: 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 {
|
.code-title {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
line-height: 2em;
|
line-height: 2em;
|
||||||
text-shadow: #cbcccc 0 1px 0;
|
|
||||||
color: #474747;
|
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
@include border-top-radius(5px);
|
@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;
|
background-color: #aaaaaa; // image-url("code_bg.png") top repeat-x;
|
||||||
border: 1px solid #565656;
|
@if lightness($base03) <= lightness(#555) {
|
||||||
border-top-color: #cbcbcb;
|
text-shadow: #cbcccc 0 1px 0;
|
||||||
border-left-color: #a5a5a5;
|
color: #555;
|
||||||
border-right-color: #a5a5a5;
|
@include background-image(linear-gradient(
|
||||||
border-bottom: 0;
|
#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 {
|
.download-source {
|
||||||
position: absolute; right: .8em;
|
position: absolute; right: .8em;
|
||||||
@include hover-link;
|
@include hover-link;
|
||||||
color: #666 !important;
|
color: inherit !important;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
text-shadow: #cbcccc 0 1px 0;
|
|
||||||
padding-left: 3em;
|
padding-left: 3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user