Skip to content
Browse files

assets for themes.

  • Loading branch information...
1 parent 21a631f commit f41d1955152f32ef914bb5e0c09c13b269c2558a @arunagw arunagw committed May 24, 2012
View
153 assets/themes/the-program/css/_base.less
@@ -0,0 +1,153 @@
+/*
+HTML5 display definitions from [HTML5 Boilerplate](http://j.mp/rP0wmY)
+
+No styleguide reference.
+*/
+
+article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
+audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
+audio:not([controls]) { display: none; }
+[hidden] { display: none; }
+
+/*
+Base from [HTML5 Boilerplate](http://j.mp/rP0wmY)
+- Correct text resizing oddly in IE6/7 when body font-size is set using em units
+- Force vertical scrollbar in non-IE
+- Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
+- Remove text-shadow in selection highlight: h5bp.com/i
+- These selection declarations have to be separate
+- Also: hot pink! (or customize the background color to match your design)
+
+No styleguide reference.
+*/
+
+html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
+body { margin: 0; font-size: 1em; line-height: 1.4; -webkit-tap-highlight-color: rgba(255,0,0, 0.62); }
+body, button, input, select, textarea { font-family: sans-serif; }
+::-moz-selection { background: #073642; color: #fff; text-shadow: none; }
+::selection { background: #073642; color: #fff; text-shadow: none; }
+
+/*
+Links from [HTML5 Boilerplate](http://j.mp/rP0wmY)
+
+No styleguide reference.
+*/
+
+a { color: #00e; }
+a:visited { color: #551a8b; }
+a:hover { color: #06e; }
+a:focus { outline: thin dotted; }
+a:hover, a:active { outline: 0; }
+
+/*
+Typography from [HTML5 Boilerplate](http://j.mp/rP0wmY)
+
+No styleguide reference.
+*/
+
+abbr[title] { border-bottom: 1px dotted; }
+b, strong { font-weight: bold; }
+blockquote { margin: 1em 40px; }
+dfn { font-style: italic; }
+hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
+ins { background: #ff9; color: #000; text-decoration: none; }
+mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
+/* Redeclare monospace font family: h5bp.com/j */
+pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
+/* Improve readability of pre-formatted text in all browsers */
+pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
+q { quotes: none; }
+q:before, q:after { content: ""; content: none; }
+small { font-size: 85%; }
+sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
+sup { top: -0.5em; }
+sub { bottom: -0.25em; }
+
+/*
+Lists from [HTML5 Boilerplate](http://j.mp/rP0wmY)
+
+No styleguide reference.
+*/
+
+ul, ol { margin: 0; padding: 0 0 0 40px; }
+dd { margin: 0 0 0 40px; }
+nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
+
+/*
+Embedded content from [HTML5 Boilerplate](http://j.mp/rP0wmY)
+- Improve image quality when scaled in IE7: h5bp.com/d
+- Remove the gap between images and borders on image containers: h5bp.com/e
+
+No styleguide reference.
+*/
+
+img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
+svg:not(:root) { overflow: hidden; } /* Correct overflow not hidden in IE9 */
+
+/*
+Figures from [HTML5 Boilerplate](http://j.mp/rP0wmY)
+
+No styleguide reference.
+*/
+
+figure { margin: 0; }
+
+/*
+Forms from [HTML5 Boilerplate](http://j.mp/rP0wmY)
+See inline comments for detail
+
+No styleguide reference.
+*/
+
+form { margin: 0; }
+fieldset { border: 0; margin: 0; padding: 0; }
+/* Indicate that 'label' will shift focus to the associated form element */
+label { cursor: pointer; }
+/*
+ * 1. Correct color not inheriting in IE6/7/8/9
+ * 2. Correct alignment displayed oddly in IE6/7
+ */
+legend { border: 0; *margin-left: -7px; padding: 0; }
+/*
+ * 1. Correct font-size not inheriting in all browsers
+ * 2. Remove margins in FF3/4 S5 Chrome
+ * 3. Define consistent vertical alignment display in all browsers
+ */
+button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
+/*
+ * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
+ */
+button, input { line-height: normal; }
+/*
+ * 1. Display hand cursor for clickable form elements
+ * 2. Allow styling of clickable form elements in iOS
+ * 3. Correct inner spacing displayed oddly in IE7 (doesn't effect IE6)
+ */
+button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
+/*
+ * Consistent box sizing and appearance
+ */
+input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }
+input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
+input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
+/*
+ * Remove inner padding and border in FF3/4: h5bp.com/l
+ */
+button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
+/*
+ * 1. Remove default vertical scrollbar in IE6/7/8/9
+ * 2. Allow only vertical resizing
+ */
+textarea { overflow: auto; vertical-align: top; resize: vertical; }
+/* Colors for form validity */
+input:valid, textarea:valid { }
+input:invalid, textarea:invalid { background-color: #f0dddd; }
+
+/*
+Tables from [HTML5 Boilerplate](http://j.mp/rP0wmY)
+
+No styleguide reference.
+*/
+
+table { border-collapse: collapse; border-spacing: 0; }
+td { vertical-align: top; }
View
53 assets/themes/the-program/css/_helper.less
@@ -0,0 +1,53 @@
+/*
+helper.css contains non-semantic helper classes
+This must be the last file to import
+
+No styleguide reference.
+*/
+
+/* For image replacement */
+.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
+.ir br { display: none; }
+/* Hide from both screenreaders and browsers: h5bp.com/u */
+.hidden { display: none !important; visibility: hidden; }
+/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
+.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
+/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
+.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
+/* Hide visually and from screenreaders, but maintain layout */
+.invisible { visibility: hidden; }
+/* Firefox had different box-sizing for hr. See: http://jsfiddle.net/sFgt7/ */
+hr { -moz-box-sizing: content-box; }
+/* Contain floats: h5bp.com/q */
+.clearfix:before,
+.clearfix:after,
+.cf:before,
+.cf:after,
+.hasGrid:before,
+.hasGrid:after,
+.unit-inner:before,
+.unit-inner:after,
+.tag_box:before,
+.tag_box:after,
+#page:before,
+#page:after { content: ""; display: table; }
+.clearfix:after,
+.cf:after,
+.hasGrid:after,
+.unit-inner:after,
+.tag_box:after,
+#page:after { clear: both; }
+.clearfix,
+.cf,
+.hasGrid,
+.unit-inner,
+.tag_box,
+#page { *zoom: 1; }
+.left {
+ *display: inline;
+ float: left;
+}
+.right {
+ *display: inline;
+ float: right;
+}
View
197 assets/themes/the-program/css/_less-base.less
@@ -0,0 +1,197 @@
+/*
+Frameless <http://framelessgrid.com/>
+by Joni Korpi <http://jonikorpi.com/>
+licensed under CC0 <http://creativecommons.org/publicdomain/zero/1.0/>
+
+No styleguide reference.
+*/
+
+@font-size: 16; // Your base font-size in pixels
+@line-height: 26; // Your base line-height in pixels
+@em: @font-size*1em; // Shorthand for outputting ems, e.g. "12/@em"
+
+@column: 60; // The column-width of your grid in pixels
+@gutter: 30; // The gutter-width of your grid in pixels
+
+// Column-widths in variables, in ems
+
+ @1cols: ( 1 * (@column + @gutter) - @gutter) / @em; @1col: @1cols; // 60px
+ @2cols: ( 2 * (@column + @gutter) - @gutter) / @em; // 150px
+ @3cols: ( 3 * (@column + @gutter) - @gutter) / @em; // 240px
+ @4cols: ( 4 * (@column + @gutter) - @gutter) / @em; // 330px
+ @5cols: ( 5 * (@column + @gutter) - @gutter) / @em; // 420px
+ @6cols: ( 6 * (@column + @gutter) - @gutter) / @em; // 510px
+ @7cols: ( 7 * (@column + @gutter) - @gutter) / @em; // 600px
+ @8cols: ( 8 * (@column + @gutter) - @gutter) / @em; // 690px
+ @9cols: ( 9 * (@column + @gutter) - @gutter) / @em; // 780px
+@10cols: (10 * (@column + @gutter) - @gutter) / @em; // 870px
+@11cols: (11 * (@column + @gutter) - @gutter) / @em; // 960px
+@12cols: (12 * (@column + @gutter) - @gutter) / @em; // 1050px
+@13cols: (13 * (@column + @gutter) - @gutter) / @em; // 1140px
+@14cols: (14 * (@column + @gutter) - @gutter) / @em; // 1230px
+@15cols: (15 * (@column + @gutter) - @gutter) / @em; // 1320px
+@16cols: (16 * (@column + @gutter) - @gutter) / @em; // 1410px
+
+// Column-widths in a function, in ems
+
+.width (@cols:1) { width: (@cols * (@column + @gutter) - @gutter) / @em; }
+
+/*
+Font families
+
+No styleguide reference.
+*/
+
+@font-stack: consolas, monaco, monospace;
+@webfont: UbuntuMono-B, consolas, monaco, monospace;
+
+/*
+Base font size should be larger than 16px.
+Calculation should be done via http://j.mp/rNg5uA
+
+No styleguide reference.
+*/
+
+body {
+ font-family: @font-stack;
+ font-size: @font-size / 16*1em;
+ line-height: @line-height / @em;
+}
+
+/*
+Font size setting
+Using Golden ratio section
+http://modularscale.com/scale/?px1=16&px2=30&ra1=1.618&ra2=0
+
+No styleguide reference.
+*/
+
+h1, h2, h3, h4, h5, h6 { font-family: @webfont; }
+
+h1, .h1 {
+ font-size: 30px;
+ line-height: 52px;
+ margin-top: 52px;
+ margin-bottom: 26px;
+}
+h2, .h2 {
+ font-size: 30px;
+ line-height: 52px;
+ margin-top: 52px;
+ margin-bottom: 26px;
+}
+h3, .h3 {
+ font-size: 25.888px;
+ line-height: 26px;
+ margin-top: 26px;
+ margin-bottom: 26px;
+}
+h4, .h4 {
+ font-size: 18.541px;
+ line-height: 26px;
+ margin-top: 26px;
+ margin-bottom: 26px;
+}
+p, ul, ol, dl, img {
+ margin-top: 0;
+ margin-bottom: @line-height / @em;
+}
+small, .small, aside { font-size: 0.75 * (@font-size / @em); }
+.font-size-default { font-size: @font-size / @em; }
+
+blockquote { font-weight: bold; }
+blockquote cite { font-weight: normal; }
+strong { font-weight: bold; }
+em { font-weight: bold; }
+
+/*
+Color schemes
+
+No styleguide reference.
+*/
+
+/* solarized - http://j.mp/s9Xuw9
+
+@base03: #002b36;
+@base02: #073642;
+@base01: #586e75;
+@base00: #657b83;
+@base0: #839496;
+@base1: #93a1a1;
+@base2: #eee8d5;
+@base3: #fdf6e3;
+@yellow: #b58900;
+@orange: #cb4b16;
+@red: #dc322f;
+// @magenta: #d33682;
+@violet: #6c71c4;
+@blue: #268bd2;
+@cyan: #2aa198;
+@green: #859900;
+
+*/
+
+// Tomorrow Night - http://j.mp/wvO4U4
+
+@base03: #2d2d2d;
+@base02: #393939;
+@base01: #515151;
+@base0: #cccccc;
+@subtle: #999999;
+@yellow: #ffcc66;
+@orange: #f99157;
+@red: #f2777a;
+@violet: #cc99cc;
+@blue: #6699cc;
+@cyan: #66cccc;
+@green: #99cc99;
+
+// Texture
+
+@noise-100-90-5: "/assets/themes/the-program/skin/100-90-5-monochrome.png"; // http://noisepng.com/
+@cross-hair: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAR0lEQVQYGYVOQQoAIAizHuJXpafqR4wFCw9Ggji2OSbubpkp3UI7Qmcidz9JIKniAYITEQasqovcJHhelquxFf9LVjfTeKFtWPOYLQ+xHqUAAAAASUVORK5CYII="; // http://ptrn.it/AmYV5d
+
+/* COMFORTAA Font
+ * http://www.fontsquirrel.com/fonts/Comfortaa
+*/
+
+@font-face {
+ font-family: 'UbuntuMono-B';
+ src: url('/assets/themes/the-program/font/UbuntuMono-B-webfont.eot');
+ src: url('/assets/themes/the-program/font/UbuntuMono-B-webfont.eot?#iefix') format('embedded-opentype'),
+ url('/assets/themes/the-program/font/UbuntuMono-B-webfont.woff') format('woff'),
+ url('/assets/themes/the-program/font/UbuntuMono-B-webfont.ttf') format('truetype'),
+ url('/assets/themes/the-program/font/UbuntuMono-B-webfont.svg#UbuntuMono-B') format('svg');
+ font-weight: normal !important;
+ font-style: normal;
+}
+
+/*
+LESS helper
+*/
+
+/*
+List modules
+.list-linear - list line up horizontally
+
+No styleguide reference.
+*/
+
+.list-linear {
+ letter-spacing: -0.31em;
+ *letter-spacing: normal;
+ word-spacing: -0.43em;
+ list-style: none;
+ padding-left: 0;
+ li {
+ display: inline-block;
+ *display: inline;
+ zoom: 1;
+ line-height: normal;
+ letter-spacing: normal;
+ margin-right: 16px;
+ word-spacing: normal;
+ vertical-align: middle;
+ &:last-child { margin-right: 0; }
+ }
+}
View
235 assets/themes/the-program/css/_mediaqueries.less
@@ -0,0 +1,235 @@
+// GO MOBILE FIRST!
+
+ .the-header {
+ .unit-head {
+ padding: @line-height * 1px;
+ .nav-global {
+ .logo {
+ display: block;
+ width: auto;
+ a {
+ display: block;
+ font-size: 30px;
+ line-height: 52px;
+ padding-bottom: 26px;
+ }
+ }
+ }
+ }
+ } // the-header
+
+
+ .body {
+ .unit-body {
+ border-top: 1px solid rgba(255,255,255,0.6);
+ padding: @line-height * 1px;
+ }
+ }
+
+ .the-footer {
+ background-color: #1a1a1a;
+ background-color: rgba(21, 25, 25, 0.8);
+ color: #fafafa;
+ color: rgba(250, 250, 250, 0.8);
+ a {
+ &:link {
+ color: @accent-color;
+ border: 0;
+ }
+ &:visited {
+ color: darken(@accent-color, 10%);
+ border: 0;
+ }
+ &:hover {
+ color: lighten(@accent-color, 10%);
+ border: 0;
+ }
+ }
+ h4 { margin-top: 0; }
+ padding: (@line-height ) * 1px;
+ } // .the-footer
+
+
+/*
+ IE
+*/
+
+.ie {
+
+} // .ie
+
+/*
+ Smartphone
+*/
+
+@media only screen and (min-width: 320px) and (max-width: 767px) {
+ img { max-width: 100%; }
+}
+
+/*
+ Tablet
+*/
+
+@media only screen and (min-width: 768px) {
+
+ .the-header {
+ .unit-head {
+ padding: 0;
+ .nav-global {
+ li {
+ float: left;
+ border: 1px solid rgba(0, 0, 0, 0.05);
+ border-width: 0 1px 0 0;
+ a, div {
+ display: block;
+ padding: 26px;
+ height: 26px;
+ }
+ a:link {}
+ a:hover {
+ background-color: #fff04a;
+ color: lighten(@main-font-color, 10%);
+ }
+ }
+ li:nth-child(2) { border-width: 0 1px; }
+ li:last-child { border-width: 0; }
+ .logo {
+ border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+ border-right: none 0;
+ display: block;
+ width: 100%;
+ a {
+ font-size: 30px;
+ line-height: normal;
+ }
+ a:hover { background-color: transparent; }
+ }
+ }
+ }
+ } // the-header
+
+} // min-width: 768px
+
+/*
+ Not that old computer layout
+*/
+
+@media only screen and (min-width: 1280px) {
+
+ .the-header {
+ .unit-head {
+ .nav-global {
+ .logo {
+ border-bottom: 0 none;
+ display: block;
+ width: auto;
+ a {
+ line-height: 18px;
+ margin-bottom: 0;
+ padding-left: (@line-height * 2) * 1px;
+ }
+ }
+ }
+ }
+ } // the-header
+
+ .body {
+ float: left;
+ width: 100%;
+ margin-right: -450px;
+ .unit-body {
+ border-top: 0 none;
+ margin-right: 450px;
+ padding: @line-height * 1px (@line-height * 2) * 1px;
+ }
+ }
+
+ .the-footer {
+ background-color: transparent;
+ color: @main-font-color;
+
+ position: relative;
+ top: auto;
+ display: block;
+ float: left;
+ padding: 0 0 0 @line-height * 1px;
+ width: 420px;
+ } // .the-footer
+
+} // min-width: 1280px
+
+/*
+ Huge-screen layout
+*/
+
+@media only screen and (min-width: 1410px) {
+
+ .the-header {
+ float: left;
+ width: 19%;
+ .unit-head {
+ padding: @line-height * 1px;
+ .nav-global {
+ li {
+ float: none;
+ border: none;
+ a, div {
+ display: block;
+ padding: 2px 5px;
+ height: auto;
+ }
+ }
+ li:nth-child(2) { border-width: 0; }
+ .logo {
+ border-bottom: none 0;
+ display: list-item;
+ width: auto;
+ a {
+ display: block;
+ font-size: 30px;
+ line-height: 52px;
+ margin-bottom: 26px;
+ padding-left: 5px;
+ position: relative;
+ top: auto;
+ }
+ }
+ }
+ }
+ } // the-header
+
+ .body {
+ border-left: 1px solid rgba(0,0,0,0.2);
+ -webkit-box-shadow: rgba(255,255,255,1.0) 0px 0px 2px;
+ -moz-box-shadow: rgba(255,255,255,1.0) 0px 0px 2px;
+ -o-box-shadow: rgba(255,255,255,1.0) 0px 0px 2px;
+ float: left;
+ width: 81%;
+ margin-right: -450px;
+ .unit-body {
+ border-right: 1px solid rgba(0,0,0,0.2);
+ -webkit-box-shadow: rgba(255,255,255,1.0) 0px 0px 2px;
+ -moz-box-shadow: rgba(255,255,255,1.0) 0px 0px 2px;
+ -o-box-shadow: rgba(255,255,255,1.0) 0px 0px 2px;
+ margin-right: 450px;
+ padding: @line-height * 1px (@line-height * 2) * 1px;
+ min-height: 1050px;
+ }
+ }
+
+ .the-footer {
+ position: relative;
+ top: auto;
+ display: block;
+ float: left;
+ padding: @line-height * 1px 0 0 @line-height * 1px;
+ width: 420px;
+ h4 {
+ font-size: 30px;
+ line-height: 52px;
+ margin-top: 0;
+ margin-bottom: 26px;
+ }
+ } // .the-footer
+
+} // min-width: 1410px
View
38 assets/themes/the-program/css/_module.less
@@ -0,0 +1,38 @@
+/*
+Base .mod module from http://j.mp/svs81k
+
+HTML should look like this and .bd is required:
+ <div class="mod">
+ <div class="inner">
+ <div class="hd"></div>
+ <div class="bd"></div>
+ <div class="ft"></div>
+ </div><!-- inner -->
+ </div><!-- mod -->
+
+No styleguide reference.
+*/
+
+.mod .inner { position:relative; }
+.mod .bd, .mod .ft, .mod .hd { overflow:hidden; *overflow:visible; zoom:1; }
+
+/*
+.media module from http://j.mp/tQCTa8
+Since .media uses overflow: hidden, box-shadow needs padding to render correctly.
+Using dropdown or pop over should be problematic. Anything try to go outside of this module box should have problem.
+HTML should look like this and .media-left or .media-right and .bd is required:
+
+ <div class="media">
+ <a href="#" class="media-left"><img src="#" alt=""></a>
+ <a href="#" class="media-right"><img src="#" alt=""></a>
+ <div class="bd"></div>
+ </div><!-- media -->
+
+No styleguide reference.
+*/
+
+.media { overflow:hidden; *overflow:visible; zoom:1; }
+.media .media-left { float:left; margin-right: 14px; }
+.media .img img { display:block; }
+.media .media-right { float:right; margin-left: 14px; }
+.media .bd, .media .ft, .media .hd { overflow:hidden; *overflow:visible; zoom:1; }
View
68 assets/themes/the-program/css/_syntaxhighlighter.less
@@ -0,0 +1,68 @@
+pre .c { color: #999999; font-style: italic } /* Comment */
+pre .err { color: #a61717; background-color: #e3d2d2 } /* Error */
+pre .g { color: #d0d0d0 } /* Generic */
+pre .k { color: #6ab825; font-weight: bold } /* Keyword */
+pre .l { color: #d0d0d0 } /* Literal */
+pre .n { color: #d0d0d0 } /* Name */
+pre .o { color: #d0d0d0 } /* Operator */
+pre .x { color: #d0d0d0 } /* Other */
+pre .p { color: #d0d0d0 } /* Punctuation */
+pre .cm { color: #999999; font-style: italic } /* Comment.Multiline */
+pre .cp { color: #cd2828; font-weight: bold } /* Comment.Preproc */
+pre .c1 { color: #999999; font-style: italic } /* Comment.Single */
+pre .cs { color: #e50808; font-weight: bold; background-color: #520000 } /* Comment.Special */
+pre .gd { color: #d22323 } /* Generic.Deleted */
+pre .ge { color: #d0d0d0; font-style: italic } /* Generic.Emph */
+pre .gr { color: #d22323 } /* Generic.Error */
+pre .gh { color: #ffffff; font-weight: bold } /* Generic.Heading */
+pre .gi { color: #589819 } /* Generic.Inserted */
+pre .go { color: #cccccc } /* Generic.Output */
+pre .gp { color: #aaaaaa } /* Generic.Prompt */
+pre .gs { color: #d0d0d0; font-weight: bold } /* Generic.Strong */
+pre .gu { color: #ffffff; text-decoration: underline } /* Generic.Subheading */
+pre .gt { color: #d22323 } /* Generic.Traceback */
+pre .kc { color: #6ab825; font-weight: bold } /* Keyword.Constant */
+pre .kd { color: #6ab825; font-weight: bold } /* Keyword.Declaration */
+pre .kn { color: #6ab825; font-weight: bold } /* Keyword.Namespace */
+pre .kp { color: #6ab825 } /* Keyword.Pseudo */
+pre .kr { color: #6ab825; font-weight: bold } /* Keyword.Reserved */
+pre .kt { color: #6ab825; font-weight: bold } /* Keyword.Type */
+pre .ld { color: #d0d0d0 } /* Literal.Date */
+pre .m { color: #3677a9 } /* Literal.Number */
+pre .s { color: #ed9d13 } /* Literal.String */
+pre .na { color: #bbbbbb } /* Name.Attribute */
+pre .nb { color: #24909d } /* Name.Builtin */
+pre .nc { color: #447fcf; text-decoration: underline } /* Name.Class */
+pre .no { color: #40ffff } /* Name.Constant */
+pre .nd { color: #ffa500 } /* Name.Decorator */
+pre .ni { color: #d0d0d0 } /* Name.Entity */
+pre .ne { color: #bbbbbb } /* Name.Exception */
+pre .nf { color: #447fcf } /* Name.Function */
+pre .nl { color: #d0d0d0 } /* Name.Label */
+pre .nn { color: #447fcf; text-decoration: underline } /* Name.Namespace */
+pre .nx { color: #d0d0d0 } /* Name.Other */
+pre .py { color: #d0d0d0 } /* Name.Property */
+pre .nt { color: #6ab825; font-weight: bold } /* Name.Tag */
+pre .nv { color: #40ffff } /* Name.Variable */
+pre .ow { color: #6ab825; font-weight: bold } /* Operator.Word */
+pre .w { color: #666666 } /* Text.Whitespace */
+pre .mf { color: #3677a9 } /* Literal.Number.Float */
+pre .mh { color: #3677a9 } /* Literal.Number.Hex */
+pre .mi { color: #3677a9 } /* Literal.Number.Integer */
+pre .mo { color: #3677a9 } /* Literal.Number.Oct */
+pre .sb { color: #ed9d13 } /* Literal.String.Backtick */
+pre .sc { color: #ed9d13 } /* Literal.String.Char */
+pre .sd { color: #ed9d13 } /* Literal.String.Doc */
+pre .s2 { color: #ed9d13 } /* Literal.String.Double */
+pre .se { color: #ed9d13 } /* Literal.String.Escape */
+pre .sh { color: #ed9d13 } /* Literal.String.Heredoc */
+pre .si { color: #ed9d13 } /* Literal.String.Interpol */
+pre .sx { color: #ffa500 } /* Literal.String.Other */
+pre .sr { color: #ed9d13 } /* Literal.String.Regex */
+pre .s1 { color: #ed9d13 } /* Literal.String.Single */
+pre .ss { color: #ed9d13 } /* Literal.String.Symbol */
+pre .bp { color: #24909d } /* Name.Builtin.Pseudo */
+pre .vc { color: #40ffff } /* Name.Variable.Class */
+pre .vg { color: #40ffff } /* Name.Variable.Global */
+pre .vi { color: #40ffff } /* Name.Variable.Instance */
+pre .il { color: #3677a9 } /* Literal.Number.Integer.Long */
View
1,484 assets/themes/the-program/css/style.css
@@ -0,0 +1,1484 @@
+/*
+HTML5 display definitions from [HTML5 Boilerplate](http://j.mp/rP0wmY)
+
+No styleguide reference.
+*/
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+nav,
+section {
+ display: block;
+}
+audio,
+canvas,
+video {
+ display: inline-block;
+ *display: inline;
+ *zoom: 1;
+}
+audio:not([controls]) {
+ display: none;
+}
+[hidden] {
+ display: none;
+}
+/*
+Base from [HTML5 Boilerplate](http://j.mp/rP0wmY)
+- Correct text resizing oddly in IE6/7 when body font-size is set using em units
+- Force vertical scrollbar in non-IE
+- Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
+- Remove text-shadow in selection highlight: h5bp.com/i
+- These selection declarations have to be separate
+- Also: hot pink! (or customize the background color to match your design)
+
+No styleguide reference.
+*/
+html {
+ font-size: 100%;
+ overflow-y: scroll;
+ -webkit-text-size-adjust: 100%;
+ -ms-text-size-adjust: 100%;
+}
+body {
+ margin: 0;
+ font-size: 1em;
+ line-height: 1.4;
+ -webkit-tap-highlight-color: rgba(255, 0, 0, 0.62);
+}
+body,
+button,
+input,
+select,
+textarea {
+ font-family: sans-serif;
+}
+::-moz-selection {
+ background: #073642;
+ color: #fff;
+ text-shadow: none;
+}
+::selection {
+ background: #073642;
+ color: #fff;
+ text-shadow: none;
+}
+/*
+Links from [HTML5 Boilerplate](http://j.mp/rP0wmY)
+
+No styleguide reference.
+*/
+a {
+ color: #00e;
+}
+a:visited {
+ color: #551a8b;
+}
+a:hover {
+ color: #06e;
+}
+a:focus {
+ outline: thin dotted;
+}
+a:hover,
+a:active {
+ outline: 0;
+}
+/*
+Typography from [HTML5 Boilerplate](http://j.mp/rP0wmY)
+
+No styleguide reference.
+*/
+abbr[title] {
+ border-bottom: 1px dotted;
+}
+b,
+strong {
+ font-weight: bold;
+}
+blockquote {
+ margin: 1em 40px;
+}
+dfn {
+ font-style: italic;
+}
+hr {
+ display: block;
+ height: 1px;
+ border: 0;
+ border-top: 1px solid #ccc;
+ margin: 1em 0;
+ padding: 0;
+}
+ins {
+ background: #ff9;
+ color: #000;
+ text-decoration: none;
+}
+mark {
+ background: #ff0;
+ color: #000;
+ font-style: italic;
+ font-weight: bold;
+}
+/* Redeclare monospace font family: h5bp.com/j */
+pre,
+code,
+kbd,
+samp {
+ font-family: monospace, serif;
+ _font-family: 'courier new', monospace;
+ font-size: 1em;
+}
+/* Improve readability of pre-formatted text in all browsers */
+pre {
+ white-space: pre;
+ white-space: pre-wrap;
+ word-wrap: break-word;
+}
+q {
+ quotes: none;
+}
+q:before,
+q:after {
+ content: "";
+ content: none;
+}
+small {
+ font-size: 85%;
+}
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+sup {
+ top: -0.5em;
+}
+sub {
+ bottom: -0.25em;
+}
+/*
+Lists from [HTML5 Boilerplate](http://j.mp/rP0wmY)
+
+No styleguide reference.
+*/
+ul,
+ol {
+ margin: 0;
+ padding: 0 0 0 40px;
+}
+dd {
+ margin: 0 0 0 40px;
+}
+nav ul,
+nav ol {
+ list-style: none;
+ list-style-image: none;
+ margin: 0;
+ padding: 0;
+}
+/*
+Embedded content from [HTML5 Boilerplate](http://j.mp/rP0wmY)
+- Improve image quality when scaled in IE7: h5bp.com/d
+- Remove the gap between images and borders on image containers: h5bp.com/e
+
+No styleguide reference.
+*/
+img {
+ border: 0;
+ -ms-interpolation-mode: bicubic;
+ vertical-align: middle;
+}
+svg:not(:root) {
+ overflow: hidden;
+}
+/* Correct overflow not hidden in IE9 */
+/*
+Figures from [HTML5 Boilerplate](http://j.mp/rP0wmY)
+
+No styleguide reference.
+*/
+figure {
+ margin: 0;
+}
+/*
+Forms from [HTML5 Boilerplate](http://j.mp/rP0wmY)
+See inline comments for detail
+
+No styleguide reference.
+*/
+form {
+ margin: 0;
+}
+fieldset {
+ border: 0;
+ margin: 0;
+ padding: 0;
+}
+/* Indicate that 'label' will shift focus to the associated form element */
+label {
+ cursor: pointer;
+}
+/*
+ * 1. Correct color not inheriting in IE6/7/8/9
+ * 2. Correct alignment displayed oddly in IE6/7
+ */
+legend {
+ border: 0;
+ *margin-left: -7px;
+ padding: 0;
+}
+/*
+ * 1. Correct font-size not inheriting in all browsers
+ * 2. Remove margins in FF3/4 S5 Chrome
+ * 3. Define consistent vertical alignment display in all browsers
+ */
+button,
+input,
+select,
+textarea {
+ font-size: 100%;
+ margin: 0;
+ vertical-align: baseline;
+ *vertical-align: middle;
+}
+/*
+ * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
+ */
+button,
+input {
+ line-height: normal;
+}
+/*
+ * 1. Display hand cursor for clickable form elements
+ * 2. Allow styling of clickable form elements in iOS
+ * 3. Correct inner spacing displayed oddly in IE7 (doesn't effect IE6)
+ */
+button,
+input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+ cursor: pointer;
+ -webkit-appearance: button;
+ *overflow: visible;
+}
+/*
+ * Consistent box sizing and appearance
+ */
+input[type="checkbox"],
+input[type="radio"] {
+ box-sizing: border-box;
+ padding: 0;
+}
+input[type="search"] {
+ -webkit-appearance: textfield;
+ -moz-box-sizing: content-box;
+ -webkit-box-sizing: content-box;
+ box-sizing: content-box;
+}
+input[type="search"]::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+/*
+ * Remove inner padding and border in FF3/4: h5bp.com/l
+ */
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+ border: 0;
+ padding: 0;
+}
+/*
+ * 1. Remove default vertical scrollbar in IE6/7/8/9
+ * 2. Allow only vertical resizing
+ */
+textarea {
+ overflow: auto;
+ vertical-align: top;
+ resize: vertical;
+}
+/* Colors for form validity */
+input:invalid,
+textarea:invalid {
+ background-color: #f0dddd;
+}
+/*
+Tables from [HTML5 Boilerplate](http://j.mp/rP0wmY)
+
+No styleguide reference.
+*/
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+td {
+ vertical-align: top;
+}
+/*
+Base .mod module from http://j.mp/svs81k
+
+HTML should look like this and .bd is required:
+ <div class="mod">
+ <div class="inner">
+ <div class="hd"></div>
+ <div class="bd"></div>
+ <div class="ft"></div>
+ </div><!-- inner -->
+ </div><!-- mod -->
+
+No styleguide reference.
+*/
+.mod .inner {
+ position: relative;
+}
+.mod .bd,
+.mod .ft,
+.mod .hd {
+ overflow: hidden;
+ *overflow: visible;
+ zoom: 1;
+}
+/*
+.media module from http://j.mp/tQCTa8
+Since .media uses overflow: hidden, box-shadow needs padding to render correctly.
+Using dropdown or pop over should be problematic. Anything try to go outside of this module box should have problem.
+HTML should look like this and .media-left or .media-right and .bd is required:
+
+ <div class="media">
+ <a href="#" class="media-left"><img src="#" alt=""></a>
+ <a href="#" class="media-right"><img src="#" alt=""></a>
+ <div class="bd"></div>
+ </div><!-- media -->
+
+No styleguide reference.
+*/
+.media {
+ overflow: hidden;
+ *overflow: visible;
+ zoom: 1;
+}
+.media .media-left {
+ float: left;
+ margin-right: 14px;
+}
+.media .img img {
+ display: block;
+}
+.media .media-right {
+ float: right;
+ margin-left: 14px;
+}
+.media .bd,
+.media .ft,
+.media .hd {
+ overflow: hidden;
+ *overflow: visible;
+ zoom: 1;
+}
+/*
+Frameless <http://framelessgrid.com/>
+by Joni Korpi <http://jonikorpi.com/>
+licensed under CC0 <http://creativecommons.org/publicdomain/zero/1.0/>
+
+No styleguide reference.
+*/
+/*
+Font families
+
+No styleguide reference.
+*/
+/*
+Base font size should be larger than 16px.
+Calculation should be done via http://j.mp/rNg5uA
+
+No styleguide reference.
+*/
+body {
+ font-family: consolas, monaco, monospace;
+ font-size: 1em;
+ line-height: 1.625em;
+}
+/*
+Font size setting
+Using Golden ratio section
+http://modularscale.com/scale/?px1=16&px2=30&ra1=1.618&ra2=0
+
+No styleguide reference.
+*/
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ font-family: UbuntuMono-B, consolas, monaco, monospace;
+}
+h1,
+.h1 {
+ font-size: 30px;
+ line-height: 52px;
+ margin-top: 52px;
+ margin-bottom: 26px;
+}
+h2,
+.h2 {
+ font-size: 30px;
+ line-height: 52px;
+ margin-top: 52px;
+ margin-bottom: 26px;
+}
+h3,
+.h3 {
+ font-size: 25.888px;
+ line-height: 26px;
+ margin-top: 26px;
+ margin-bottom: 26px;
+}
+h4,
+.h4 {
+ font-size: 18.541px;
+ line-height: 26px;
+ margin-top: 26px;
+ margin-bottom: 26px;
+}
+p,
+ul,
+ol,
+dl,
+img {
+ margin-top: 0;
+ margin-bottom: 1.625em;
+}
+small,
+.small,
+aside {
+ font-size: 0.75em;
+}
+.font-size-default {
+ font-size: 1em;
+}
+blockquote {
+ font-weight: bold;
+}
+blockquote cite {
+ font-weight: normal;
+}
+strong {
+ font-weight: bold;
+}
+em {
+ font-weight: bold;
+}
+/*
+Color schemes
+
+No styleguide reference.
+*/
+/* solarized - http://j.mp/s9Xuw9
+
+@base03: #002b36;
+@base02: #073642;
+@base01: #586e75;
+@base00: #657b83;
+@base0: #839496;
+@base1: #93a1a1;
+@base2: #eee8d5;
+@base3: #fdf6e3;
+@yellow: #b58900;
+@orange: #cb4b16;
+@red: #dc322f;
+// @magenta: #d33682;
+@violet: #6c71c4;
+@blue: #268bd2;
+@cyan: #2aa198;
+@green: #859900;
+
+*/
+/* COMFORTAA Font
+ * http://www.fontsquirrel.com/fonts/Comfortaa
+*/
+@font-face {
+ font-family: 'UbuntuMono-B';
+ src: url('/assets/themes/the-program/font/UbuntuMono-B-webfont.eot');
+ src: url('/assets/themes/the-program/font/UbuntuMono-B-webfont.eot?#iefix') format('embedded-opentype'), url('/assets/themes/the-program/font/UbuntuMono-B-webfont.woff') format('woff'), url('/assets/themes/the-program/font/UbuntuMono-B-webfont.ttf') format('truetype'), url('/assets/themes/the-program/font/UbuntuMono-B-webfont.svg#UbuntuMono-B') format('svg');
+ font-weight: normal !important;
+ font-style: normal;
+}
+/*
+LESS helper
+*/
+/*
+List modules
+.list-linear - list line up horizontally
+
+No styleguide reference.
+*/
+.list-linear {
+ letter-spacing: -0.31em;
+ *letter-spacing: normal;
+ word-spacing: -0.43em;
+ list-style: none;
+ padding-left: 0;
+}
+.list-linear li {
+ display: inline-block;
+ *display: inline;
+ zoom: 1;
+ line-height: normal;
+ letter-spacing: normal;
+ margin-right: 16px;
+ word-spacing: normal;
+ vertical-align: middle;
+}
+.list-linear li:last-child {
+ margin-right: 0;
+}
+/* LESS VARIABLES
+--------------------------------------------------------------------------------- */
+/* GLOBAL
+--------------------------------------------------------------------------------- */
+html {
+ color: #2d2d2d;
+}
+#page {
+ background: url('/assets/themes/the-program/skin/100-90-5-monochrome.png');
+ background-repeat: repeat;
+ background-position: 0 0;
+ background-color: #e2e2de;
+}
+.body .unit-body {
+ background-color: #fafafa;
+}
+/* LINK */
+a:link {
+ color: #2d2d2d;
+ text-decoration: none;
+}
+a:visited {
+ color: #141414;
+ text-decoration: none;
+}
+a:hover {
+ color: #474747;
+ text-decoration: none;
+}
+/* HIGHLIGHTER */
+pre {
+ margin-bottom: 1.625em;
+}
+pre {
+ color: #f2f2f2;
+ background-color: #393939;
+ border: 1px solid #393939;
+ font-family: consolas, monaco, monospace;
+ margin-left: 0;
+ margin-right: 0;
+ padding: 1.625em;
+ overflow: auto;
+ -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.6);
+ -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.6);
+ box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.6);
+}
+/* meta */
+/* HEADER
+--------------------------------------------------------------------------------- */
+.the-header .logo {
+ font-family: UbuntuMono-B, consolas, monaco, monospace;
+ margin: 0;
+}
+.the-header .logo a:visited {
+ color: #2d2d2d;
+}
+.the-header .nav-global {
+ text-transform: uppercase;
+}
+.the-header .nav-global .logo {
+ text-transform: none;
+}
+.the-header .nav-global .forkme {
+ position: relative;
+ top: 2px;
+}
+/* MAIN
+--------------------------------------------------------------------------------- */
+.unit-article header {
+ border-bottom: 5px solid rgba(21, 25, 25, 0.8);
+ margin-bottom: 21px;
+}
+.unit-article header h1 {
+ color: #2d2d2d;
+ margin-top: 0;
+ margin-bottom: 0;
+}
+.unit-article .entry-content h2,
+.unit-article .entry-content h3,
+.unit-article .entry-content h4,
+.unit-article .entry-content h5,
+.unit-article .entry-content h6 {
+ color: #2d2d2d;
+}
+.unit-article .entry-content h2 a:link,
+.unit-article .entry-content h3 a:link,
+.unit-article .entry-content h4 a:link,
+.unit-article .entry-content h5 a:link,
+.unit-article .entry-content h6 a:link {
+ color: #2d2d2d;
+ border: 0;
+}
+.unit-article .entry-content h2 a:visited,
+.unit-article .entry-content h3 a:visited,
+.unit-article .entry-content h4 a:visited,
+.unit-article .entry-content h5 a:visited,
+.unit-article .entry-content h6 a:visited {
+ color: #141414;
+ border: 0;
+}
+.unit-article .entry-content h2 a:hover,
+.unit-article .entry-content h3 a:hover,
+.unit-article .entry-content h4 a:hover,
+.unit-article .entry-content h5 a:hover,
+.unit-article .entry-content h6 a:hover {
+ color: #474747;
+ border: 0;
+}
+.unit-article .entry-content:first-child h2,
+.unit-article .entry-content:first-child h3,
+.unit-article .entry-content:first-child h4,
+.unit-article .entry-content:first-child h5,
+.unit-article .entry-content:first-child h6 {
+ margin-top: 0;
+}
+.unit-article a:link {
+ border-bottom: 1px dashed #c26164;
+}
+.unit-article a:visited {
+ border-bottom: 1px dashed #ad4346;
+}
+.unit-article a:hover {
+ border-bottom: 1px dashed #d08688;
+}
+.unit-article blockquote {
+ border-left: 1em solid rgba(21, 25, 25, 0.8);
+ padding-left: 1em;
+}
+.unit-article blockquote p {
+ margin-left: 0;
+ margin-right: 0;
+}
+.unit-article ul,
+.unit-article ol,
+.unit-article dl {
+ padding-left: 0;
+}
+.unit-article ul {
+ list-style: square;
+}
+.unit-article ol {
+ list-style: decimal;
+}
+.unit-article li h1,
+.unit-article dt h1,
+.unit-article dd h1,
+.unit-article li h2,
+.unit-article dt h2,
+.unit-article dd h2,
+.unit-article li h3,
+.unit-article dt h3,
+.unit-article dd h3,
+.unit-article li h4,
+.unit-article dt h4,
+.unit-article dd h4,
+.unit-article li h5,
+.unit-article dt h5,
+.unit-article dd h5,
+.unit-article li p,
+.unit-article dt p,
+.unit-article dd p,
+.unit-article li ul,
+.unit-article dt ul,
+.unit-article dd ul,
+.unit-article li ol,
+.unit-article dt ol,
+.unit-article dd ol,
+.unit-article li dl,
+.unit-article dt dl,
+.unit-article dd dl,
+.unit-article li blockquote,
+.unit-article dt blockquote,
+.unit-article dd blockquote,
+.unit-article li .hasGrid,
+.unit-article dt .hasGrid,
+.unit-article dd .hasGrid {
+ margin-left: 0;
+ margin-right: 0;
+}
+.unit-article p code,
+.unit-article li code {
+ padding: 2px 5px;
+ white-space: nowrap;
+ background-color: #fff04a;
+}
+.unit-article img {
+ display: block;
+ margin-left: auto;
+ margin-left: auto;
+}
+.unit-article img.left {
+ margin-right: 16px;
+}
+.unit-article img.right {
+ margin-left: 16px;
+}
+.unit-article .date-publish {
+ margin-bottom: 0;
+}
+.unit-article .list-linear .list-head {
+ margin-right: 4px;
+}
+.unit-article .list-category a,
+.unit-article .list-tag a {
+ border: 0 none;
+}
+.unit-article .list-category a:hover span,
+.unit-article .list-tag a:hover span {
+ background-color: #f99157;
+}
+.unit-article .list-category span,
+.unit-article .list-tag span {
+ background-color: #e25608;
+ padding: 1px 5px;
+ -webkit-border-radius: 10px;
+ -moz-border-radius: 10px;
+ border-radius: 10px;
+ color: white;
+ text-transform: uppercase;
+ margin: 0 6px 0 0;
+ display: inline-block;
+ position: relative;
+ vertical-align: middle;
+ top: -2px;
+ font-weight: bold;
+ font-size: 13px;
+}
+.unit-article .list-category {
+ margin-bottom: 0;
+ text-transform: capitalize;
+}
+.unit-article .list-tag {
+ text-transform: capitalize;
+}
+.unit-article .comment a {
+ border-bottom: 0;
+}
+.unit-article .unit-foot {
+ border-top: 5px solid rgba(21, 25, 25, 0.8);
+ padding-top: 1.625em;
+ position: relative;
+}
+.unit-article .unit-foot nav ul {
+ list-style: none;
+}
+.unit-article .unit-foot nav ul li {
+ display: inline;
+}
+.unit-article .unit-foot .gotop {
+ margin-bottom: 0;
+}
+/* post & page */
+.layout-page .tag_box {
+ background: url('/assets/themes/the-program/skin/100-90-5-monochrome.png') repeat 0 0 #999999;
+ padding: 0.8125em;
+ list-style: none;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
+ -moz-background-clip: padding;
+ -webkit-background-clip: padding-box;
+ background-clip: padding-box;
+ -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.4);
+ -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.4);
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.4);
+}
+.layout-page .tag_box li {
+ display: inline;
+ line-height: normal;
+ vertical-align: middle;
+}
+.layout-page .tag_box a {
+ background-color: #99cc99;
+ float: left;
+ border: 1px solid #448844;
+ padding: 3px 6px 3px 6px;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
+ margin: 5px;
+ -moz-background-clip: padding;
+ -webkit-background-clip: padding-box;
+ background-clip: padding-box;
+ text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.4);
+ -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
+ -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
+ -webkit-transition-duration: 0.2s;
+ -moz-transition-duration: 0.2s;
+ transition-duration: 0.2s;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ vertical-align: bottom;
+}
+.layout-page .tag_box a:active {
+ -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
+ -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
+ box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
+ background: #336633;
+ border: solid #336633;
+}
+.layout-page .tag_box a:hover {
+ background-color: #77bb77;
+ border: 1px solid #336633;
+}
+.layout-page .tag_box a:hover span {
+ background-color: #e1e1e1;
+ border: 1px solid #77bb77;
+}
+.layout-page .tag_box span {
+ background-color: #fafafa;
+ border: 1px solid #99cc99;
+ padding: 1px 5px;
+ -webkit-border-radius: 10px;
+ -moz-border-radius: 10px;
+ border-radius: 10px;
+ color: #1a1a1a;
+ display: inline-block;
+ position: relative;
+ vertical-align: middle;
+ top: -2px;
+ font-weight: bold;
+ font-size: 13px;
+ -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
+ -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
+}
+/* FOOTER
+----------------------------------------------- */
+.the-footer a:link {
+ color: #c26164;
+ border: 0;
+}
+.the-footer a:visited {
+ color: #ad4346;
+ border: 0;
+}
+.the-footer a:hover {
+ color: #d08688;
+ border: 0;
+}
+.the-footer ul {
+ list-style: square;
+ padding-left: 1em;
+}
+.the-footer address {
+ font-style: normal;
+}
+.the-footer .license {
+ clear: both;
+}
+.the-footer .license p {
+ margin-bottom: 0;
+}
+.the-header .unit-head {
+ padding: 26px;
+}
+.the-header .unit-head .nav-global .logo {
+ display: block;
+ width: auto;
+}
+.the-header .unit-head .nav-global .logo a {
+ display: block;
+ font-size: 30px;
+ line-height: 52px;
+ padding-bottom: 26px;
+}
+.body .unit-body {
+ border-top: 1px solid rgba(255, 255, 255, 0.6);
+ padding: 26px;
+}
+.the-footer {
+ background-color: #1a1a1a;
+ background-color: rgba(21, 25, 25, 0.8);
+ color: #fafafa;
+ color: rgba(250, 250, 250, 0.8);
+ padding: 26px;
+}
+.the-footer a:link {
+ color: #c26164;
+ border: 0;
+}
+.the-footer a:visited {
+ color: #ad4346;
+ border: 0;
+}
+.the-footer a:hover {
+ color: #d08688;
+ border: 0;
+}
+.the-footer h4 {
+ margin-top: 0;
+}
+/*
+ IE
+*/
+/*
+ Smartphone
+*/
+@media only screen and (min-width: 320px) and (max-width: 767px) {
+ img {
+ max-width: 100%;
+ }
+}
+/*
+ Tablet
+*/
+@media only screen and (min-width: 768px) {
+ .the-header .unit-head {
+ padding: 0;
+ }
+ .the-header .unit-head .nav-global li {
+ float: left;
+ border: 1px solid rgba(0, 0, 0, 0.05);
+ border-width: 0 1px 0 0;
+ }
+ .the-header .unit-head .nav-global li a,
+ .the-header .unit-head .nav-global li div {
+ display: block;
+ padding: 26px;
+ height: 26px;
+ }
+ .the-header .unit-head .nav-global li a:hover {
+ background-color: #fff04a;
+ color: #474747;
+ }
+ .the-header .unit-head .nav-global li:nth-child(2) {
+ border-width: 0 1px;
+ }
+ .the-header .unit-head .nav-global li:last-child {
+ border-width: 0;
+ }
+ .the-header .unit-head .nav-global .logo {
+ border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+ border-right: none 0;
+ display: block;
+ width: 100%;
+ }
+ .the-header .unit-head .nav-global .logo a {
+ font-size: 30px;
+ line-height: normal;
+ }
+ .the-header .unit-head .nav-global .logo a:hover {
+ background-color: transparent;
+ }
+}
+/*
+ Not that old computer layout
+*/
+@media only screen and (min-width: 1280px) {
+ .the-header .unit-head .nav-global .logo {
+ border-bottom: 0 none;
+ display: block;
+ width: auto;
+ }
+ .the-header .unit-head .nav-global .logo a {
+ line-height: 18px;
+ margin-bottom: 0;
+ padding-left: 52px;
+ }
+ .body {
+ float: left;
+ width: 100%;
+ margin-right: -450px;
+ }
+ .body .unit-body {
+ border-top: 0 none;
+ margin-right: 450px;
+ padding: 26px 52px;
+ }
+ .the-footer {
+ background-color: transparent;
+ color: #2d2d2d;
+ position: relative;
+ top: auto;
+ display: block;
+ float: left;
+ padding: 0 0 0 26px;
+ width: 420px;
+ }
+}
+/*
+ Huge-screen layout
+*/
+@media only screen and (min-width: 1410px) {
+ .the-header {
+ float: left;
+ width: 19%;
+ }
+ .the-header .unit-head {
+ padding: 26px;
+ }
+ .the-header .unit-head .nav-global li {
+ float: none;
+ border: none;
+ }
+ .the-header .unit-head .nav-global li a,
+ .the-header .unit-head .nav-global li div {
+ display: block;
+ padding: 2px 5px;
+ height: auto;
+ }
+ .the-header .unit-head .nav-global li:nth-child(2) {
+ border-width: 0;
+ }
+ .the-header .unit-head .nav-global .logo {
+ border-bottom: none 0;
+ display: list-item;
+ width: auto;
+ }
+ .the-header .unit-head .nav-global .logo a {
+ display: block;
+ font-size: 30px;
+ line-height: 52px;
+ margin-bottom: 26px;
+ padding-left: 5px;
+ position: relative;
+ top: auto;
+ }
+ .body {
+ border-left: 1px solid rgba(0, 0, 0, 0.2);
+ -webkit-box-shadow: #ffffff 0px 0px 2px;
+ -moz-box-shadow: #ffffff 0px 0px 2px;
+ -o-box-shadow: #ffffff 0px 0px 2px;
+ float: left;
+ width: 81%;
+ margin-right: -450px;
+ }
+ .body .unit-body {
+ border-right: 1px solid rgba(0, 0, 0, 0.2);
+ -webkit-box-shadow: #ffffff 0px 0px 2px;
+ -moz-box-shadow: #ffffff 0px 0px 2px;
+ -o-box-shadow: #ffffff 0px 0px 2px;
+ margin-right: 450px;
+ padding: 26px 52px;
+ min-height: 1050px;
+ }
+ .the-footer {
+ position: relative;
+ top: auto;
+ display: block;
+ float: left;
+ padding: 26px 0 0 26px;
+ width: 420px;
+ }
+ .the-footer h4 {
+ font-size: 30px;
+ line-height: 52px;
+ margin-top: 0;
+ margin-bottom: 26px;
+ }
+}
+pre .c {
+ color: #999999;
+ font-style: italic;
+}
+/* Comment */
+pre .err {
+ color: #a61717;
+ background-color: #e3d2d2;
+}
+/* Error */
+pre .g {
+ color: #d0d0d0;
+}
+/* Generic */
+pre .k {
+ color: #6ab825;
+ font-weight: bold;
+}
+/* Keyword */
+pre .l {
+ color: #d0d0d0;
+}
+/* Literal */
+pre .n {
+ color: #d0d0d0;
+}
+/* Name */
+pre .o {
+ color: #d0d0d0;
+}
+/* Operator */
+pre .x {
+ color: #d0d0d0;
+}
+/* Other */
+pre .p {
+ color: #d0d0d0;
+}
+/* Punctuation */
+pre .cm {
+ color: #999999;
+ font-style: italic;
+}
+/* Comment.Multiline */
+pre .cp {
+ color: #cd2828;
+ font-weight: bold;
+}
+/* Comment.Preproc */
+pre .c1 {
+ color: #999999;
+ font-style: italic;
+}
+/* Comment.Single */
+pre .cs {
+ color: #e50808;
+ font-weight: bold;
+ background-color: #520000;
+}
+/* Comment.Special */
+pre .gd {
+ color: #d22323;
+}
+/* Generic.Deleted */
+pre .ge {
+ color: #d0d0d0;
+ font-style: italic;
+}
+/* Generic.Emph */
+pre .gr {
+ color: #d22323;
+}
+/* Generic.Error */
+pre .gh {
+ color: #ffffff;
+ font-weight: bold;
+}
+/* Generic.Heading */
+pre .gi {
+ color: #589819;
+}
+/* Generic.Inserted */
+pre .go {
+ color: #cccccc;
+}
+/* Generic.Output */
+pre .gp {
+ color: #aaaaaa;
+}
+/* Generic.Prompt */
+pre .gs {
+ color: #d0d0d0;
+ font-weight: bold;
+}
+/* Generic.Strong */
+pre .gu {
+ color: #ffffff;
+ text-decoration: underline;
+}
+/* Generic.Subheading */
+pre .gt {
+ color: #d22323;
+}
+/* Generic.Traceback */
+pre .kc {
+ color: #6ab825;
+ font-weight: bold;
+}
+/* Keyword.Constant */
+pre .kd {
+ color: #6ab825;
+ font-weight: bold;
+}
+/* Keyword.Declaration */
+pre .kn {
+ color: #6ab825;
+ font-weight: bold;
+}
+/* Keyword.Namespace */
+pre .kp {
+ color: #6ab825;
+}
+/* Keyword.Pseudo */
+pre .kr {
+ color: #6ab825;
+ font-weight: bold;
+}
+/* Keyword.Reserved */
+pre .kt {
+ color: #6ab825;
+ font-weight: bold;
+}
+/* Keyword.Type */
+pre .ld {
+ color: #d0d0d0;
+}
+/* Literal.Date */
+pre .m {
+ color: #3677a9;
+}
+/* Literal.Number */
+pre .s {
+ color: #ed9d13;
+}
+/* Literal.String */
+pre .na {
+ color: #bbbbbb;
+}
+/* Name.Attribute */
+pre .nb {
+ color: #24909d;
+}
+/* Name.Builtin */
+pre .nc {
+ color: #447fcf;
+ text-decoration: underline;
+}
+/* Name.Class */
+pre .no {
+ color: #40ffff;
+}
+/* Name.Constant */
+pre .nd {
+ color: #ffa500;
+}
+/* Name.Decorator */
+pre .ni {
+ color: #d0d0d0;
+}
+/* Name.Entity */
+pre .ne {
+ color: #bbbbbb;
+}
+/* Name.Exception */
+pre .nf {
+ color: #447fcf;
+}
+/* Name.Function */
+pre .nl {
+ color: #d0d0d0;
+}
+/* Name.Label */
+pre .nn {
+ color: #447fcf;
+ text-decoration: underline;
+}
+/* Name.Namespace */
+pre .nx {
+ color: #d0d0d0;
+}
+/* Name.Other */
+pre .py {
+ color: #d0d0d0;
+}
+/* Name.Property */
+pre .nt {
+ color: #6ab825;
+ font-weight: bold;
+}
+/* Name.Tag */
+pre .nv {
+ color: #40ffff;
+}
+/* Name.Variable */
+pre .ow {
+ color: #6ab825;
+ font-weight: bold;
+}
+/* Operator.Word */
+pre .w {
+ color: #666666;
+}
+/* Text.Whitespace */
+pre .mf {
+ color: #3677a9;
+}
+/* Literal.Number.Float */
+pre .mh {
+ color: #3677a9;
+}
+/* Literal.Number.Hex */
+pre .mi {
+ color: #3677a9;
+}
+/* Literal.Number.Integer */
+pre .mo {
+ color: #3677a9;
+}
+/* Literal.Number.Oct */
+pre .sb {
+ color: #ed9d13;
+}
+/* Literal.String.Backtick */
+pre .sc {
+ color: #ed9d13;
+}
+/* Literal.String.Char */
+pre .sd {
+ color: #ed9d13;
+}
+/* Literal.String.Doc */
+pre .s2 {
+ color: #ed9d13;
+}
+/* Literal.String.Double */
+pre .se {
+ color: #ed9d13;
+}
+/* Literal.String.Escape */
+pre .sh {
+ color: #ed9d13;
+}
+/* Literal.String.Heredoc */
+pre .si {
+ color: #ed9d13;
+}
+/* Literal.String.Interpol */
+pre .sx {
+ color: #ffa500;
+}
+/* Literal.String.Other */
+pre .sr {
+ color: #ed9d13;
+}
+/* Literal.String.Regex */
+pre .s1 {
+ color: #ed9d13;
+}
+/* Literal.String.Single */
+pre .ss {
+ color: #ed9d13;
+}
+/* Literal.String.Symbol */
+pre .bp {
+ color: #24909d;
+}
+/* Name.Builtin.Pseudo */
+pre .vc {
+ color: #40ffff;
+}
+/* Name.Variable.Class */
+pre .vg {
+ color: #40ffff;
+}
+/* Name.Variable.Global */
+pre .vi {
+ color: #40ffff;
+}
+/* Name.Variable.Instance */
+pre .il {
+ color: #3677a9;
+}
+/* Literal.Number.Integer.Long */
+/*
+helper.css contains non-semantic helper classes
+This must be the last file to import
+
+No styleguide reference.
+*/
+/* For image replacement */
+.ir {
+ display: block;
+ border: 0;
+ text-indent: -999em;
+ overflow: hidden;
+ background-color: transparent;
+ background-repeat: no-repeat;
+ text-align: left;
+ direction: ltr;
+ *line-height: 0;
+}
+.ir br {
+ display: none;
+}
+/* Hide from both screenreaders and browsers: h5bp.com/u */
+.hidden {
+ display: none !important;
+ visibility: hidden;
+}
+/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
+.visuallyhidden {
+ border: 0;
+ clip: rect(0 0 0 0);
+ height: 1px;
+ margin: -1px;
+ overflow: hidden;
+ padding: 0;
+ position: absolute;
+ width: 1px;
+}
+/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
+.visuallyhidden.focusable:active,
+.visuallyhidden.focusable:focus {
+ clip: auto;
+ height: auto;
+ margin: 0;
+ overflow: visible;
+ position: static;
+ width: auto;
+}
+/* Hide visually and from screenreaders, but maintain layout */
+.invisible {
+ visibility: hidden;
+}
+/* Firefox had different box-sizing for hr. See: http://jsfiddle.net/sFgt7/ */
+hr {
+ -moz-box-sizing: content-box;
+}
+/* Contain floats: h5bp.com/q */
+.clearfix:before,
+.clearfix:after,
+.cf:before,
+.cf:after,
+.hasGrid:before,
+.hasGrid:after,
+.unit-inner:before,
+.unit-inner:after,
+.tag_box:before,
+.tag_box:after,
+#page:before,
+#page:after {
+ content: "";
+ display: table;
+}
+.clearfix:after,
+.cf:after,
+.hasGrid:after,
+.unit-inner:after,
+.tag_box:after,
+#page:after {
+ clear: both;
+}
+.clearfix,
+.cf,
+.hasGrid,
+.unit-inner,
+.tag_box,
+#page {
+ *zoom: 1;
+}
+.left {
+ *display: inline;
+ float: left;
+}
+.right {
+ *display: inline;
+ float: right;
+}
View
313 assets/themes/the-program/css/style.less
@@ -0,0 +1,313 @@
+@import "_base.less";
+@import "_module.less";
+@import "_less-base.less";
+
+/* LESS VARIABLES
+--------------------------------------------------------------------------------- */
+@main-bg: #ffffff;
+@subtle-bg: #515151;
+@main-font-color: #2d2d2d;
+@accent-color: #c26164;
+
+/* GLOBAL
+--------------------------------------------------------------------------------- */
+html {
+ color: @main-font-color;
+}
+
+#page {
+ background: url('@{noise-100-90-5}');
+ background-repeat: repeat;
+ background-position: 0 0;
+ background-color: #e2e2de;
+}
+
+.body {
+ .unit-body {
+ background-color: #fafafa;
+ }
+}
+
+/* LINK */
+a {
+ &:link {
+ color: @main-font-color;
+ text-decoration: none;
+ }
+ &:visited {
+ color: darken(@main-font-color, 10%);
+ text-decoration: none;
+ }
+ &:hover {
+ color: lighten(@main-font-color, 10%);
+ text-decoration: none;
+ }
+}
+
+/* HIGHLIGHTER */
+pre { margin-bottom: @line-height / @em; }
+pre {
+ color: #f2f2f2;
+ background-color: @base02;
+ border: 1px solid fadein(@base02, 30%);
+ font-family: @font-stack;
+ margin-left: 0;
+ margin-right: 0;
+ padding: @line-height / @em;
+ overflow: auto;
+ -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.6);
+ -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.6);
+ box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.6);
+}
+
+/* meta */
+.meta {}
+
+/* HEADER
+--------------------------------------------------------------------------------- */
+.the-header {
+ .logo {
+ font-family: @webfont;
+ margin: 0;
+ a:visited { color: @main-font-color; }
+ }
+ .nav-global {
+ text-transform: uppercase;
+ .logo { text-transform: none; }
+ .forkme {
+ position: relative;
+ top: 2px;
+ }
+ }
+} // .the-header
+
+/* MAIN
+--------------------------------------------------------------------------------- */
+.unit-article {
+
+ header {
+ border-bottom: 5px solid rgba(21, 25, 25, 0.8);
+ margin-bottom: 21px;
+ h1 {
+ color: @main-font-color;
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+ } // .article-inner header
+
+ .entry-content {
+ h2, h3, h4, h5, h6 {
+ color: @main-font-color;
+ a {
+ &:link {
+ color: @main-font-color;
+ border: 0;
+ }
+ &:visited {
+ color: darken(@main-font-color, 10%);
+ border: 0;
+ }
+ &:hover {
+ color: lighten(@main-font-color, 10%);
+ border: 0;
+ }
+ }
+ }
+ } // .article-inner .entry-content
+
+ .entry-content:first-child h2,
+ .entry-content:first-child h3,
+ .entry-content:first-child h4,
+ .entry-content:first-child h5,
+ .entry-content:first-child h6 { margin-top: 0; } // Canceling header margin since there is margin on header
+
+ a {
+ &:link { border-bottom: 1px dashed @accent-color; }
+ &:visited { border-bottom: 1px dashed darken(@accent-color, 10%); }
+ &:hover { border-bottom: 1px dashed lighten(@accent-color, 10%); }
+ }
+
+ blockquote {
+ border-left: 1em solid rgba(21, 25, 25, 0.8);
+ padding-left: 1em;
+ p {
+ margin-left: 0;
+ margin-right: 0;
+ }
+ }
+ ul, ol, dl { padding-left: 0; }
+ ul { list-style: square; }
+ ol { list-style: decimal; }
+ li, dt, dd {
+ h1, h2, h3, h4, h5, p, ul, ol, dl, blockquote, .hasGrid { margin-left: 0; margin-right: 0; }
+ }
+ p code, li code {
+ padding: 2px 5px;
+ white-space: nowrap;
+ background-color: #fff04a;
+ }
+
+ img {
+ display: block;
+ margin-left: auto;
+ margin-left: auto;
+ }
+ img.left { margin-right: 16px; }
+ img.right { margin-left: 16px; }
+
+ .date-publish { margin-bottom: 0; }
+ .list-linear .list-head { margin-right: 4px; }
+ .list-category a, .list-tag a {
+ border: 0 none;
+ &:hover span { background-color: @orange; }
+ }
+ .list-category span, .list-tag span {
+ background-color: darken(@orange, 20%);
+ padding: 1px 5px;
+ -webkit-border-radius: 10px;
+ -moz-border-radius: 10px;
+ border-radius: 10px;
+ color: white;
+ text-transform: uppercase;
+ margin: 0 6px 0 0;
+ display: inline-block;
+ position: relative;
+ vertical-align: middle;
+ top: -2px;
+ font-weight: bold;
+ font-size: 13px;