Permalink
Browse files

add theme scribble

  • Loading branch information...
imrickysu committed May 23, 2014
1 parent bc7d118 commit 8d8695fac34e63051b20af183d4b13190e2bb204
Showing with 2,707 additions and 145 deletions.
  1. BIN ._config.yml.swp
  2. +22 −0 404.html
  3. +5 −0 Gemfile
  4. +17 −0 Rakefile
  5. +6 −0 _assets/basics.coffee
  6. +8 −0 _assets/bourbon/_bourbon-deprecated-upcoming.scss
  7. +52 −0 _assets/bourbon/_bourbon.scss
  8. +273 −0 _assets/bourbon/addons/_button.scss
  9. +29 −0 _assets/bourbon/addons/_clearfix.scss
  10. +5 −0 _assets/bourbon/addons/_font-family.scss
  11. +15 −0 _assets/bourbon/addons/_hide-text.scss
  12. +56 −0 _assets/bourbon/addons/_html5-input-types.scss
  13. +42 −0 _assets/bourbon/addons/_position.scss
  14. +40 −0 _assets/bourbon/addons/_prefixer.scss
  15. +27 −0 _assets/bourbon/addons/_retina-image.scss
  16. +44 −0 _assets/bourbon/addons/_size.scss
  17. +32 −0 _assets/bourbon/addons/_timing-functions.scss
  18. +45 −0 _assets/bourbon/addons/_triangle.scss
  19. +52 −0 _assets/bourbon/css3/_animation.scss
  20. +3 −0 _assets/bourbon/css3/_appearance.scss
  21. +44 −0 _assets/bourbon/css3/_background-image.scss
  22. +3 −0 _assets/bourbon/css3/_background-size.scss
  23. +107 −0 _assets/bourbon/css3/_background.scss
  24. +56 −0 _assets/bourbon/css3/_border-image.scss
  25. +22 −0 _assets/bourbon/css3/_border-radius.scss
  26. +4 −0 _assets/bourbon/css3/_box-sizing.scss
  27. +47 −0 _assets/bourbon/css3/_columns.scss
  28. +52 −0 _assets/bourbon/css3/_flex-box.scss
  29. +23 −0 _assets/bourbon/css3/_font-face.scss
  30. +10 −0 _assets/bourbon/css3/_hidpi-media-query.scss
  31. +13 −0 _assets/bourbon/css3/_image-rendering.scss
  32. +8 −0 _assets/bourbon/css3/_inline-block.scss
  33. +51 −0 _assets/bourbon/css3/_keyframes.scss
  34. +43 −0 _assets/bourbon/css3/_linear-gradient.scss
  35. +8 −0 _assets/bourbon/css3/_perspective.scss
  36. +18 −0 _assets/bourbon/css3/_placeholder.scss
  37. +78 −0 _assets/bourbon/css3/_radial-gradient.scss
  38. +11 −0 _assets/bourbon/css3/_transform.scss
  39. +36 −0 _assets/bourbon/css3/_transition.scss
  40. +3 −0 _assets/bourbon/css3/_user-select.scss
  41. +11 −0 _assets/bourbon/functions/_compact.scss
  42. +44 −0 _assets/bourbon/functions/_deprecated-webkit-gradient.scss
  43. +39 −0 _assets/bourbon/functions/_flex-grid.scss
  44. +13 −0 _assets/bourbon/functions/_grid-width.scss
  45. +6 −0 _assets/bourbon/functions/_linear-gradient.scss
  46. +40 −0 _assets/bourbon/functions/_modular-scale.scss
  47. +8 −0 _assets/bourbon/functions/_px-to-em.scss
  48. +57 −0 _assets/bourbon/functions/_radial-gradient.scss
  49. +14 −0 _assets/bourbon/functions/_render-gradients.scss
  50. +9 −0 _assets/bourbon/functions/_tint-shade.scss
  51. +22 −0 _assets/bourbon/functions/_transition-property-name.scss
  52. +24 −0 _assets/responsive.scss
  53. +381 −0 _assets/style.scss
  54. +26 −0 _config.yml
  55. +12 −0 _includes/disqus.html
  56. +6 −60 _includes/footer.html
  57. +9 −0 _includes/ga.html
  58. +12 −12 _includes/head.html
  59. +4 −27 _includes/header.html
  60. +5 −0 _includes/links.html
  61. +16 −0 _includes/page_pagination.html
  62. +16 −0 _includes/post_pagination.html
  63. +7 −0 _includes/signoff.html
  64. +16 −0 _layouts/index.html
  65. +24 −14 _layouts/page.html
  66. +28 −15 _layouts/post.html
  67. +32 −0 _posts/2014-05-22-chengdu-impression.markdown
  68. BIN images/404.png
  69. BIN images/fav.png
  70. BIN images/line.png
  71. BIN images/og.png
  72. BIN images/scribble.png
  73. BIN images/scribble2.png
  74. BIN images/scribble3.png
  75. +9 −17 index.html
  76. +11 −0 javascripts/basics.js
  77. +5 −0 javascripts/jquery.js
  78. +12 −0 stylesheets/responsive.css
  79. +319 −0 stylesheets/style.css
  80. +60 −0 stylesheets/syntax.css
BIN +12 KB ._config.yml.swp
Binary file not shown.
@@ -0,0 +1,22 @@
---
layout: none
permalink: 404.html
---
<html>
<head>
<title>Scribble</title>
<link href='{{ site.baseurl }}/images/fav.png' rel='shortcut icon'>
<link href='{{ site.baseurl }}/stylesheets/style.css' rel='stylesheet' type='text/css' />
<link href='{{ site.baseurl }}/stylesheets/responsive.css' rel='stylesheet' type='text/css' />
<meta content='width=device-width, initial-scale=1.0, user-scalable=no' name='viewport'>
<meta content='text/html; charset=utf-8' http-equiv='content-type' />
</head>
<body>
<div style="margin-top: 50px; width: 100%; text-align: center;">
<img src="{{ site.baseurl }}/images/404.png" alt="not found" width="160" />
<p>
<a href="/" class="muted" target="_top">Back to {{ site.title }}</a>
</p>
</div>
</body>
</html>
@@ -0,0 +1,5 @@
source 'http://rubygems.org'

gem 'jekyll', '~> 1.2.1'
gem 'sass', '~> 3.2.12'
gem 'coffee-script', '~> 2.2.0'
@@ -0,0 +1,17 @@
desc "compile and run the site"
task :default do
pids = [
spawn("jekyll server -w"),
spawn("scss --watch _assets:stylesheets"),
spawn("coffee -b -w -o javascripts -c _assets/*.coffee")
]

trap "INT" do
Process.kill "INT", *pids
exit 1
end

loop do
sleep 1
end
end
@@ -0,0 +1,6 @@
$ ->
$("body").keyup (event) ->
if event.which is 37 and $(".paging .left > a").length
location.replace $(".paging .left >a").attr("href")
else if event.which is 39 and $(".paging .right > a").length
location.replace $(".paging .right >a").attr("href")
@@ -0,0 +1,8 @@
//************************************************************************//
// These mixins/functions are deprecated
// They will be removed in the next MAJOR version release
//************************************************************************//
@mixin box-shadow ($shadows...) {
@include prefixer(box-shadow, $shadows, spec);
@warn "box-shadow is deprecated and will be removed in the next major version release";
}
@@ -0,0 +1,52 @@
// Custom Functions
@import "functions/compact";
@import "functions/deprecated-webkit-gradient";
@import "functions/flex-grid";
@import "functions/grid-width";
@import "functions/linear-gradient";
@import "functions/modular-scale";
@import "functions/px-to-em";
@import "functions/radial-gradient";
@import "functions/render-gradients";
@import "functions/tint-shade";
@import "functions/transition-property-name";

// CSS3 Mixins
@import "css3/animation";
@import "css3/appearance";
@import "css3/background";
@import "css3/background-image";
@import "css3/background-size";
@import "css3/border-image";
@import "css3/border-radius";
@import "css3/box-sizing";
@import "css3/columns";
@import "css3/flex-box";
@import "css3/font-face";
@import "css3/hidpi-media-query";
@import "css3/image-rendering";
@import "css3/inline-block";
@import "css3/keyframes";
@import "css3/linear-gradient";
@import "css3/perspective";
@import "css3/radial-gradient";
@import "css3/transform";
@import "css3/transition";
@import "css3/user-select";
@import "css3/placeholder";

// Addons & other mixins
@import "addons/button";
@import "addons/clearfix";
@import "addons/font-family";
@import "addons/hide-text";
@import "addons/html5-input-types";
@import "addons/position";
@import "addons/prefixer";
@import "addons/retina-image";
@import "addons/size";
@import "addons/timing-functions";
@import "addons/triangle";

// Soon to be deprecated Mixins
@import "bourbon-deprecated-upcoming";
@@ -0,0 +1,273 @@
@mixin button ($style: simple, $base-color: #4294f0) {

@if type-of($style) == color {
$base-color: $style;
$style: simple;
}

// Grayscale button
@if $base-color == grayscale($base-color) {
@if $style == simple {
@include simple($base-color, $grayscale: true);
}

@else if $style == shiny {
@include shiny($base-color, $grayscale: true);
}

@else if $style == pill {
@include pill($base-color, $grayscale: true);
}
}

// Colored button
@else {
@if $style == simple {
@include simple($base-color);
}

@else if $style == shiny {
@include shiny($base-color);
}

@else if $style == pill {
@include pill($base-color);
}
}

&:disabled {
opacity: 0.5;
cursor: not-allowed;
}
}


// Simple Button
//************************************************************************//
@mixin simple($base-color, $grayscale: false) {
$color: hsl(0, 0, 100%);
$border: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
$inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%);
$stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%);
$text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%);

@if lightness($base-color) > 70% {
$color: hsl(0, 0, 20%);
$text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
}

@if $grayscale == true {
$border: grayscale($border);
$inset-shadow: grayscale($inset-shadow);
$stop-gradient: grayscale($stop-gradient);
$text-shadow: grayscale($text-shadow);
}

border: 1px solid $border;
border-radius: 3px;
@include box-shadow (inset 0 1px 0 0 $inset-shadow);
color: $color;
display: inline-block;
font-size: 11px;
font-weight: bold;
@include linear-gradient ($base-color, $stop-gradient);
padding: 7px 18px;
text-decoration: none;
text-shadow: 0 1px 0 $text-shadow;
-webkit-background-clip: padding-box;

&:hover:not(:disabled) {
$base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
$inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%);
$stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%);

@if $grayscale == true {
$base-color-hover: grayscale($base-color-hover);
$inset-shadow-hover: grayscale($inset-shadow-hover);
$stop-gradient-hover: grayscale($stop-gradient-hover);
}

@include box-shadow (inset 0 1px 0 0 $inset-shadow-hover);
cursor: pointer;
@include linear-gradient ($base-color-hover, $stop-gradient-hover);
}

&:active:not(:disabled) {
$border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
$inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%);

@if $grayscale == true {
$border-active: grayscale($border-active);
$inset-shadow-active: grayscale($inset-shadow-active);
}

border: 1px solid $border-active;
@include box-shadow (inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active, 0 1px 1px 0 #eee);
}
}


// Shiny Button
//************************************************************************//
@mixin shiny($base-color, $grayscale: false) {
$color: hsl(0, 0, 100%);
$border: adjust-color($base-color, $red: -117, $green: -111, $blue: -81);
$border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122);
$fourth-stop: adjust-color($base-color, $red: -79, $green: -70, $blue: -46);
$inset-shadow: adjust-color($base-color, $red: 37, $green: 29, $blue: 12);
$second-stop: adjust-color($base-color, $red: -56, $green: -50, $blue: -33);
$text-shadow: adjust-color($base-color, $red: -140, $green: -141, $blue: -114);
$third-stop: adjust-color($base-color, $red: -86, $green: -75, $blue: -48);

@if lightness($base-color) > 70% {
$color: hsl(0, 0, 20%);
$text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
}

@if $grayscale == true {
$border: grayscale($border);
$border-bottom: grayscale($border-bottom);
$fourth-stop: grayscale($fourth-stop);
$inset-shadow: grayscale($inset-shadow);
$second-stop: grayscale($second-stop);
$text-shadow: grayscale($text-shadow);
$third-stop: grayscale($third-stop);
}

border: 1px solid $border;
border-bottom: 1px solid $border-bottom;
border-radius: 5px;
@include box-shadow(inset 0 1px 0 0 $inset-shadow);
color: $color;
display: inline-block;
font-size: 14px;
font-weight: bold;
@include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%);
padding: 8px 20px;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 1px $text-shadow;

&:hover:not(:disabled) {
$first-stop-hover: adjust-color($base-color, $red: -13, $green: -15, $blue: -18);
$second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51);
$third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66);
$fourth-stop-hover: adjust-color($base-color, $red: -86, $green: -80, $blue: -63);

@if $grayscale == true {
$first-stop-hover: grayscale($first-stop-hover);
$second-stop-hover: grayscale($second-stop-hover);
$third-stop-hover: grayscale($third-stop-hover);
$fourth-stop-hover: grayscale($fourth-stop-hover);
}

cursor: pointer;
@include linear-gradient(top, $first-stop-hover 0%,
$second-stop-hover 50%,
$third-stop-hover 50%,
$fourth-stop-hover 100%);
}

&:active:not(:disabled) {
$inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122);

@if $grayscale == true {
$inset-shadow-active: grayscale($inset-shadow-active);
}

@include box-shadow(inset 0 0 20px 0 $inset-shadow-active, 0 1px 0 #fff);
}
}


// Pill Button
//************************************************************************//
@mixin pill($base-color, $grayscale: false) {
$color: hsl(0, 0, 100%);
$border-bottom: adjust-color($base-color, $hue: 8, $saturation: -11%, $lightness: -26%);
$border-sides: adjust-color($base-color, $hue: 4, $saturation: -21%, $lightness: -21%);
$border-top: adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%);
$inset-shadow: adjust-color($base-color, $hue: -1, $saturation: -1%, $lightness: 7%);
$stop-gradient: adjust-color($base-color, $hue: 8, $saturation: 14%, $lightness: -10%);
$text-shadow: adjust-color($base-color, $hue: 5, $saturation: -19%, $lightness: -15%);

@if lightness($base-color) > 70% {
$color: hsl(0, 0, 20%);
$text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
}

@if $grayscale == true {
$border-bottom: grayscale($border-bottom);
$border-sides: grayscale($border-sides);
$border-top: grayscale($border-top);
$inset-shadow: grayscale($inset-shadow);
$stop-gradient: grayscale($stop-gradient);
$text-shadow: grayscale($text-shadow);
}

border: 1px solid $border-top;
border-color: $border-top $border-sides $border-bottom;
border-radius: 16px;
@include box-shadow(inset 0 1px 0 0 $inset-shadow, 0 1px 2px 0 #b3b3b3);
color: $color;
display: inline-block;
font-size: 11px;
font-weight: normal;
line-height: 1;
@include linear-gradient ($base-color, $stop-gradient);
padding: 5px 16px;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 1px $text-shadow;
-webkit-background-clip: padding-box;

&:hover:not(:disabled) {
$base-color-hover: adjust-color($base-color, $lightness: -4.5%);
$border-bottom: adjust-color($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%);
$border-sides: adjust-color($base-color, $hue: 4, $saturation: -2%, $lightness: -27%);
$border-top: adjust-color($base-color, $hue: -1, $saturation: -17%, $lightness: -21%);
$inset-shadow-hover: adjust-color($base-color, $saturation: -1%, $lightness: 3%);
$stop-gradient-hover: adjust-color($base-color, $hue: 8, $saturation: -4%, $lightness: -15.5%);
$text-shadow-hover: adjust-color($base-color, $hue: 5, $saturation: -5%, $lightness: -22%);

@if $grayscale == true {
$base-color-hover: grayscale($base-color-hover);
$border-bottom: grayscale($border-bottom);
$border-sides: grayscale($border-sides);
$border-top: grayscale($border-top);
$inset-shadow-hover: grayscale($inset-shadow-hover);
$stop-gradient-hover: grayscale($stop-gradient-hover);
$text-shadow-hover: grayscale($text-shadow-hover);
}

border: 1px solid $border-top;
border-color: $border-top $border-sides $border-bottom;
@include box-shadow(inset 0 1px 0 0 $inset-shadow-hover);
cursor: pointer;
@include linear-gradient ($base-color-hover, $stop-gradient-hover);
text-shadow: 0 -1px 1px $text-shadow-hover;
-webkit-background-clip: padding-box;
}

&:active:not(:disabled) {
$active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%);
$border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%);
$border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%);
$inset-shadow-active: adjust-color($base-color, $hue: 9, $saturation: 2%, $lightness: -21.5%);
$text-shadow-active: adjust-color($base-color, $hue: 5, $saturation: -12%, $lightness: -21.5%);

@if $grayscale == true {
$active-color: grayscale($active-color);
$border-active: grayscale($border-active);
$border-bottom-active: grayscale($border-bottom-active);
$inset-shadow-active: grayscale($inset-shadow-active);
$text-shadow-active: grayscale($text-shadow-active);
}

background: $active-color;
border: 1px solid $border-active;
border-bottom: 1px solid $border-bottom-active;
@include box-shadow(inset 0 0 6px 3px $inset-shadow-active, 0 1px 0 0 #fff);
text-shadow: 0 -1px 1px $text-shadow-active;
}
}
Oops, something went wrong.

0 comments on commit 8d8695f

Please sign in to comment.