From adc7d471839a21f6c452f02f8eb2029ac7e8c85e Mon Sep 17 00:00:00 2001 From: Blagovest Petrov Date: Sun, 15 Jun 2014 23:35:12 +0300 Subject: [PATCH] Redesign, etc.. --- _config.yml | 8 +- sass/_base.scss | 8 +- sass/_partials.scss | 8 +- sass/base/_layout.scss | 242 +- sass/base/_theme.scss | 141 +- sass/base/_typography.scss | 140 +- sass/base/_utilities.scss | 46 +- sass/custom/_colors.scss | 55 +- sass/custom/_styles.scss | 3 +- sass/partials/_blog.scss | 49 +- sass/partials/_syntax.scss | 22 +- sass/screen.scss | 18 +- source/_includes/after_footer.html | 8 +- source/_includes/archive_post.html | 43 +- source/_includes/article.html | 59 +- source/_includes/asides/github.html | 28 +- source/_includes/asides/recent_posts.html | 8 +- source/_includes/custom/after_footer.html | 3 - source/_includes/custom/footer.html | 18 +- source/_includes/custom/head.html | 3 - source/_includes/custom/header.html | 6 - source/_includes/custom/navigation.html | 2 +- source/_includes/disqus.html | 2 +- source/_includes/footer.html | 2 +- source/_includes/google_analytics.html | 20 +- source/_includes/head.html | 47 +- source/_includes/header.html | 58 + source/_includes/navigation.html | 22 +- source/_includes/post/categories.html | 8 +- source/_includes/post/sharing.html | 32 +- source/_includes/twitter_sharing.html | 2 +- source/_layouts/category_index.html | 21 +- source/_layouts/default.html | 39 +- source/_layouts/page.html | 38 +- source/_layouts/post.html | 69 +- source/blog/archives/index.html | 29 +- source/index.html | 32 +- source/javascripts/libs/jquery.min.js | 3179 ++++++++++++++++++++- source/javascripts/octopress.js | 104 +- source/javascripts/twitter.js | 152 +- 40 files changed, 3719 insertions(+), 1055 deletions(-) diff --git a/_config.yml b/_config.yml index 9a137ea..7bf1c53 100644 --- a/_config.yml +++ b/_config.yml @@ -3,7 +3,7 @@ # ----------------------- # url: http://eniac111.github.io -title: Blago's blog +title: Blagovest Petrov subtitle: Just another junk of words about IT author: Blagovest Petrov simple_search: http://google.com/search @@ -12,8 +12,8 @@ description: The personal blog of Blagovest Petrov navigation: -- text: Home - url: /index.html +# - text: Home +# url: /index.html - text: $whoami? url: /about-me.html @@ -30,7 +30,7 @@ navigation: date_format: "ordinal" # RSS / Email (optional) subscription links (change if using something like Feedburner) -subscribe_rss: /atom.xml +subscribe_rss: http://feeds.feedburner.com/BlagosBlog subscribe_email: # RSS feeds can list your email address if you like email: diff --git a/sass/_base.scss b/sass/_base.scss index 05fdd00..77f309c 100644 --- a/sass/_base.scss +++ b/sass/_base.scss @@ -1,5 +1,5 @@ -@import "base/utilities"; -@import "base/solarized"; -@import "base/theme"; -@import "base/typography"; +@import "base/color"; +@import "base/font"; @import "base/layout"; +@import "base/typography"; +@import "base/utilities"; \ No newline at end of file diff --git a/sass/_partials.scss b/sass/_partials.scss index 99c28b6..93959cf 100644 --- a/sass/_partials.scss +++ b/sass/_partials.scss @@ -1,8 +1,2 @@ -@import "partials/header"; -@import "partials/navigation"; -@import "partials/blog"; -@import "partials/sharing"; @import "partials/syntax"; -@import "partials/archive"; -@import "partials/sidebar"; -@import "partials/footer"; +@import "partials/blog"; diff --git a/sass/base/_layout.scss b/sass/base/_layout.scss index 8190342..02de140 100644 --- a/sass/base/_layout.scss +++ b/sass/base/_layout.scss @@ -1,192 +1,50 @@ -$max-width: 1200px !default; - -// Padding used for layout margins -$pad-min: 18px !default; -$pad-narrow: 25px !default; -$pad-medium: 35px !default; -$pad-wide: 55px !default; - -// Sidebar widths used in media queries -$sidebar-width-medium: 240px !default; -$sidebar-pad-medium: 15px !default; -$sidebar-pad-wide: 20px !default; -$sidebar-width-wide: 300px !default; - -$indented-lists: false !default; - -$header-font-size: 1em !default; -$header-padding-top: 1.5em !default; -$header-padding-bottom: 1.5em !default; - -.group { @include pie-clearfix; } - -@mixin collapse-sidebar { - float: none; - width: auto; - clear: left; - margin: 0; - padding: 0 $pad-medium 1px; - background-color: lighten($sidebar-bg, 2); - border-top: 1px solid lighten($sidebar-border, 4); - section { - &.odd, &.even { float: left; width: 48%; } - &.odd { margin-left: 0; } - &.even { margin-left: 4%; } - } - &.thirds section { - width: 30%; - margin-left: 5%; - &.first { - margin-left: 0; - clear: both; - } - } -} - -body { - -webkit-text-size-adjust: none; - max-width: $max-width; - position: relative; - margin: 0 auto; - > header, > nav, > footer, #content > article, #content > div > article, #content > div > section { - @extend .group; - padding-left: $pad-min; - padding-right: $pad-min; - @media only screen and (min-width: 480px) { - padding-left: $pad-narrow; - padding-right: $pad-narrow; - } - @media only screen and (min-width: 768px) { - padding-left: $pad-medium; - padding-right: $pad-medium; - } - @media only screen and (min-width: 992px) { - padding-left: $pad-wide; - padding-right: $pad-wide; - } - } - div.pagination { - @extend .group; - margin-left: $pad-min; - margin-right: $pad-min; - @media only screen and (min-width: 480px) { - margin-left: $pad-narrow; - margin-right: $pad-narrow; - } - @media only screen and (min-width: 768px) { - margin-left: $pad-medium; - margin-right: $pad-medium; - } - @media only screen and (min-width: 992px) { - margin-left: $pad-wide; - margin-right: $pad-wide; - } - } - > header { - font-size: $header-font-size; - padding-top: $header-padding-top; - padding-bottom: $header-padding-bottom; - } -} - -#content { - overflow: hidden; - > div, > article { width: 100%; } -} - -aside.sidebar { - float: none; - padding: 0 $pad-min 1px; - background-color: lighten($sidebar-bg, 2); - border-top: 1px solid $sidebar-border; - @extend .group; -} - -.flex-content { max-width: 100%; height: auto; } - -.basic-alignment { - &.left { float: left; margin-right: 1.5em; } - &.right { float: right; margin-left: 1.5em; } - &.center { display:block; margin: 0 auto 1.5em; } - &.left, &.right { margin-bottom: .8em; } -} - -.toggle-sidebar { &, .no-sidebar & { display: none; }} - -body.sidebar-footer { - @media only screen and (min-width: 750px) { - aside.sidebar{ @include collapse-sidebar; } - } - #content { margin-right: 0px; } - .toggle-sidebar { display: none; } -} - -@media only screen and (min-width: 550px) { - body > header { font-size: $header-font-size; } -} -@media only screen and (min-width: 750px) { - aside.sidebar { @include collapse-sidebar; } -} -#main, #content, .sidebar { - @extend .group; -} -@media only screen and (min-width: 768px) { - body { -webkit-text-size-adjust: auto; } - body > header { font-size: $header-font-size * 1.2; } - #main { - padding: 0; - margin: 0 auto; - } - #content { - overflow: visible; - margin-right: $sidebar-width-medium; - position: relative; - .no-sidebar & { margin-right: 0; border-right: 0; } - .collapse-sidebar & { margin-right: 20px; } - > div, > article { - padding-top: $pad-medium/2; - padding-bottom: $pad-medium/2; - float: left; - } - } - aside.sidebar { - width: $sidebar-width-medium - $sidebar-pad-medium*2; - padding: 0 $sidebar-pad-medium $sidebar-pad-medium; - background: none; - clear: none; - float: left; - margin: 0 -100% 0 0; - section { - width: auto; margin-left: 0; - &.odd, &.even { float: none; width: auto; margin-left: 0; } - } - .collapse-sidebar & { - @include collapse-sidebar; - } - } -} - -@media only screen and (min-width: 992px) { - body > header { font-size: $header-font-size * 1.3; } - #content { margin-right: $sidebar-width-wide; } - #content { - > div, > article { - padding-top: $pad-wide/2; - padding-bottom: $pad-wide/2; - } - } - aside.sidebar { - width: $sidebar-width-wide - $sidebar-pad-wide*2; - padding: 1.2em $sidebar-pad-wide $sidebar-pad-wide; - .collapse-sidebar & { - padding: { left: $pad-wide; right: $pad-wide; } - } - } -} - -@if $indented-lists == false { - @media only screen and (min-width: 768px) { - ul, ol { margin-left: 0; } - } -} - +$max-width: 1000px; + +*{ + margin: 0; + padding: 0; +} +body{ + font-family: $font-default; + font-weight: 300; + font-size: 14px; + background: $color-background; + background-image: url("../images/sativa.png"); + color: $color-gray01; + @media screen and (max-width: 1040px){ + margin: 0 20px; + } + @media screen and (max-width: 600px){ + font-size: 13px; + } +} +h1{ + font-size: 1.8em; +} +h2{ + font-size: 1.5em; +} +h3{ + font-size: 1.3em; +} +a{ + text-decoration: none; + outline-width: 0; + color: $color-main; +} +.alignleft{ + float: left; +} +.alignright{ + float: right; +} +.clearfix{ + @include pie-clearfix; +} +.inner{ + width: $max-width; + margin: 0 auto; + @media screen and (max-width: 1040px){ + width: 100%; + } +} \ No newline at end of file diff --git a/sass/base/_theme.scss b/sass/base/_theme.scss index 20dcd24..ddc156d 100644 --- a/sass/base/_theme.scss +++ b/sass/base/_theme.scss @@ -1,85 +1,92 @@ +$color-dark: #272727 !default; +$color-emph: #00585f !default; +$color-light: #b0bf5a !default; +$color-none: #fefefe !default; +$color-simple: #a6a6a6 !default; + $noise-bg: image-url('noise.png') top left !default; $img-border: inline-image('dotted-border.png') !default; -// Main Link Colors $link-color: lighten(#165b94, 3) !default; -$link-color-hover: adjust-color($link-color, $lightness: 10, $saturation: 25) !default; -$link-color-visited: adjust-color($link-color, $hue: 80, $lightness: -4) !default; -$link-color-active: adjust-color($link-color-hover, $lightness: -15) !default; - -// Main Section Colors -$main-bg: #f8f8f8 !default; -$page-bg: #252525 !default; -$article-border: #eeeeee !default; -$header-bg: #333 !default; -$header-border: lighten($header-bg, 15) !default; -$title-color: #f2f2f2 !default; -$subtitle-color: #aaa !default; +// global color setup -$text-color: #222 !default; -$text-color-light: #aaa !default; -$type-border: #ddd !default; +body { + background-color: $color-none; + color: $color-dark; + @include selection($color-emph, $color-none); +} +.content { + overflow: hidden; +} -/* Navigation */ -$nav-bg: #ccc !default; -$nav-bg-front: image-url('noise.png') !default; -$nav-bg-back: linear-gradient(lighten($nav-bg, 8), $nav-bg, darken($nav-bg, 11)) !default; -$nav-color: darken($nav-bg, 38) !default; -$nav-color-hover: darken($nav-color, 25) !default; -$nav-placeholder: desaturate(darken($nav-bg, 10), 15) !default; -$nav-border: darken($nav-bg, 10) !default; -$nav-border-top: lighten($nav-bg, 15) !default; -$nav-border-bottom: darken($nav-bg, 25) !default; -$nav-border-left: darken($nav-bg, 11) !default; -$nav-border-right: lighten($nav-bg, 7) !default; +.entry-content { + a { + color: $color-dark; + border-bottom: 2px dashed $color-dark; + @include transition(0.5s); + } + a:hover { + color: $color-light; + border-bottom: 2px dashed $color-light; + } +} -/* Sidebar colors */ -$sidebar-bg: #f2f2f2 !default; -$sidebar-link-color: $link-color !default; -$sidebar-link-color-hover: $link-color-hover !default; -$sidebar-link-color-active: $link-color-active !default; -$sidebar-color: change-color(mix($text-color, $sidebar-bg, 80), $hue: hue($sidebar-bg), $saturation: saturation($sidebar-bg)/2) !default; -$sidebar-border: desaturate(darken($sidebar-bg, 7), 10) !default; -$sidebar-border-hover: darken($sidebar-bg, 7) !default; -$sidebar-link-color-subdued: lighten($sidebar-color, 20) !default; -$sidebar-link-color-subdued-hover: $sidebar-link-color-hover !default; +#main > footer { + background-color: $color-dark; + color: $color-none; + @include selection($color-light, $color-none); +} -$footer-color: #888 !default; -$footer-bg: #ccc !default; -$footer-bg-front: image-url('noise.png') !default; -$footer-bg-back: linear-gradient(lighten($footer-bg, 8), $footer-bg, darken($footer-bg, 11)) !default; -$footer-color: darken($footer-bg, 38) !default; -$footer-color-hover: darken($footer-color, 10) !default; -$footer-border-top: lighten($footer-bg, 15) !default; -$footer-border-bottom: darken($footer-bg, 15) !default; -$footer-link-color: darken($footer-bg, 38) !default; -$footer-link-color-hover: darken($footer-color, 25) !default; -$page-border-bottom: darken($footer-bg, 5) !default; +#sidebar { + background-color: $color-dark; + color: $color-none; + @include selection($color-light, $color-none); + a { + color: $color-light; + } + a:hover { + color: $color-none; + } + h1 a { + color: $color-none; + } + h1 a:hover { + color: $color-light; + } +} +a { + color: $color-simple; + @include transition(0.5s); +} +a:hover { + color: $color-light; +} -/* Core theme application */ +.articlemeta { + background-color: $color-emph; +} +.articlemeta, +.articlemeta a { + color: $color-none; +} -a { - @include link-colors($link-color, $hover: $link-color-hover, $focus: $link-color-hover, $visited: $link-color-visited, $active: $link-color-active); +.articlemeta:hover { + background-color: $color-dark; } -aside.sidebar a { - @include link-colors($sidebar-link-color, $hover: $sidebar-link-color-hover, $focus: $sidebar-link-color-hover, $active: $sidebar-link-color-active); + +#disqus_thread { + border-top: 0.2em solid $color-emph; } -a { - @include transition(color .3s); + +h1, h1 a, h1 a:hover { + color: $color-emph; } -html { - background: $page-bg image-url('line-tile.png') top left; +.entry-title a { + color: $color-dark; } -body { - > div { - background: $sidebar-bg $noise-bg; - border-bottom: 1px solid $page-border-bottom; - > div { - background: $main-bg $noise-bg; - border-right: 1px solid $sidebar-border; - } - } +.entry-title a:hover { + color: $color-light; } diff --git a/sass/base/_typography.scss b/sass/base/_typography.scss index 9a6bbac..57f5e1f 100644 --- a/sass/base/_typography.scss +++ b/sass/base/_typography.scss @@ -1,131 +1,3 @@ -$blockquote: $type-border !default; -$sans: "PT Sans", "Helvetica Neue", Arial, sans-serif !default; -$serif: "PT Serif", Georgia, Times, "Times New Roman", serif !default; -$mono: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace !default; -$heading-font-family: "PT Serif", "Georgia", "Helvetica Neue", Arial, sans-serif !default; -$header-title-font-family: $heading-font-family !default; -$header-subtitle-font-family: $heading-font-family !default; - -// Fonts -.heading { - font-family: $heading-font-family; -} -.sans { font-family: $sans; } -.serif { font-family: $serif; } -.mono { font-family: $mono; } - -body > header h1 { - font-size: 2.2em; - @extend .heading; - font-family: $header-title-font-family; - font-weight: normal; - line-height: 1.2em; - margin-bottom: 0.6667em; -} -body > header h2 { - font-family: $header-subtitle-font-family; -} - -body { - line-height: 1.5em; - color: $text-color; - @extend .serif; -} -h1 { - font-size: 2.2em; - line-height: 1.2em; -} - -@media only screen and (min-width: 992px) { - body { font-size: 1.15em; } - h1 { font-size: 2.6em; line-height: 1.2em; } -} - -#{headings()}{ - @extend .heading; - text-rendering: optimizelegibility; - margin-bottom: 1em; - font-weight: bold; -} -h2, section h1 { - font-size: 1.5em; -} -h3, section h2, section section h1 { - font-size: 1.3em; -} -h4, section h3, section section h2, section section section h1 { - font-size: 1em; -} -h5, section h4, section section h3 { - font-size: .9em; -} -h6, section h5, section section h4, section section section h3 { - font-size: .8em; -} - -p, article blockquote, ul, ol { margin-bottom: 1.5em; } - -ul { list-style-type: disc; - ul { list-style-type: circle; margin-bottom: 0px; - ul { list-style-type: square; margin-bottom: 0px; }}} - -ol { list-style-type: decimal; - ol { list-style-type: lower-alpha; margin-bottom: 0px; - ol { list-style-type: lower-roman; margin-bottom: 0px; }}} - -ul, ol { &, ul, ol { margin-left: 1.3em; }} -ul, ol { ul, ol { margin-bottom: 0em; }} - -strong { font-weight: bold; } - -em { font-style: italic; } - -sup, sub { font-size: 0.75em; position: relative; display: inline-block; padding: 0 .2em; line-height: .8em;} -sup { top: -.5em; } -sub { bottom: -.5em; } - -a[rev='footnote']{ font-size: .75em; padding: 0 .3em; line-height: 1; } - -q { font-style: italic; - &:before { content: "\201C"; } - &:after { content: "\201D"; } -} - -em, dfn { font-style: italic; } - -strong, dfn { font-weight: bold; } - -del, s { text-decoration: line-through; } - -abbr, acronym { border-bottom: 1px dotted; cursor: help; } - -pre, code, tt { @extend .mono; } - -hr { margin-bottom: 0.2em; } - -small { font-size: .8em; } - -big { font-size: 1.2em; } - -article blockquote { - $bq-margin: 1.2em; - font-style: italic; - position: relative; - font-size: 1.2em; - line-height: 1.5em; - padding-left: 1em; - border-left: 4px solid rgba($text-color-light, .5); - cite { - font-style: italic; - a { color: $text-color-light !important; word-wrap: break-word; } - &:before { content: '\2014'; padding:{right: .3em; left: .3em;} color: $text-color-light; } - } - @media only screen and (min-width: 992px) { - padding-left: 1.5em; - border-left-width: 4px; - } -} - .pullquote-right:before, .pullquote-left:before { /* Reset metrics. */ @@ -151,14 +23,4 @@ article blockquote { /* Make left pullquotes align properly. */ float: left; margin: .5em 1.5em 1em 0; -} - -/* @extend this to force long lines of continuous text to wrap */ -.force-wrap { - white-space: -moz-pre-wrap; - white-space: -pre-wrap; - white-space: -o-pre-wrap; - white-space: pre-wrap; - word-wrap: break-word; -} - +} \ No newline at end of file diff --git a/sass/base/_utilities.scss b/sass/base/_utilities.scss index 2d49e65..63aae7a 100644 --- a/sass/base/_utilities.scss +++ b/sass/base/_utilities.scss @@ -1,28 +1,24 @@ -@mixin mask-image($img, $repeat: no-repeat){ - @include experimental(mask-image, image-url($img), -webkit, -moz, -o, -ms); - @include experimental(mask-repeat, $repeat, -webkit, -moz, -o, -ms); - width: image-width($img); - height: image-height($img); +@mixin square($property){ + width: $property; + height: $property; } - -@mixin shadow-box($border: #fff .5em solid, $shadow: rgba(#000, .15) 0 1px 4px, $border-radius: .3em) { - @include border-radius($border-radius); - @include box-shadow($shadow); - @include box-sizing(border-box); - border: $border; +@mixin user-select($select){ + -moz-user-select: $select; + -khtml-user-select: $select; + -webkit-user-select: $select; + -o-user-select: $select; + user-select: $select; } - -@mixin selection($bg, $color: inherit, $text-shadow: none){ - * { - &::-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; } - } +@mixin border-shadow($top: $color-gray05, $bottom: $color-gray04){ + border-top: 1px solid $top; + border-bottom: 1px solid $bottom; } - -@function text-color($color, $dark: dark, $light: light){ - $text-color: ( (red($color)*299) + (green($color)*587) + (blue($color)*114) ) / 1000; - $text-color: if($text-color >= 150, $dark, $light); - @return $text-color; -} - +@mixin center($width, $height){ + position: absolute; + top: 50%; + left: 50%; + margin-left: $width/(-2); + margin-top: $height/(-2); + width: $width; + height: $height; +} \ No newline at end of file diff --git a/sass/custom/_colors.scss b/sass/custom/_colors.scss index 53f566e..32f2acf 100644 --- a/sass/custom/_colors.scss +++ b/sass/custom/_colors.scss @@ -1,18 +1,43 @@ -// Customize the colors of Octoflat Here +// 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. +// If you need a handy color picker try http://hslpicker.com -/* Remove this line for the light theme / for custom colors +//$header-bg: #263347; +//$subtitle-color: lighten($header-bg, 58); +//$nav-bg: desaturate(lighten(#8fc17a, 18), 5); +//$nav-bg-front: image-url('noise.png'); +//$nav-bg-back: linear-gradient(lighten($nav-bg, 8), $nav-bg, darken($nav-bg, 11)); +//$sidebar-bg: desaturate(#eceff5, 8); +//$sidebar-link-color: saturate(#526f9a, 10); +//$sidebar-link-color-hover: darken(#7ab662, 9); +//$footer-bg: #ccc !default; +//$footer-bg-front: image-url('noise.png'); +//$footer-bg-back: linear-gradient(lighten($footer-bg, 8), $footer-bg, darken($footer-bg, 11)); -$primary-color: #e69411; // Jumbotron, Horizontal Rules, Headings -$secondary-color: #1dbbd6; // Tags, Links, Main Heading, Quote Border -$tertiary-color: #C0392B; // Hover-over color, Active Page color -$accent-color1: #23defe; // Hover-over background color for tags -$accent-color2: #34495E; // Sub-headings, Date Stamp -$accent-color3: #ffffff; // Navbar Text, Tag text -$bg-color: #ffffff; // Background -$navbar-color: #1ec2de; // Navbar -$code-bg-color: #2C3E50; // Code background -$quote-color: #E74C3C; // Quote Color -$text-color: #5a5e5f; // Body Text -$footer-color: #7F8C8D; // Footer - And remove this line */ \ No newline at end of file +/* To use the dark Solarized highlighting theme comment the following line and line 29 */ +$solarized: light; + +/* If you want to tweak the Solarized colors you can do that 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: #fff; //white for light theme +//$solar-yellow: #b58900; +//$solar-orange: #cb4b16; +//$solar-red: #dc322f; +//$solar-magenta: #d33682; +//$solar-violet: #6c71c4; +//$solar-blue: #268bd2; +//$solar-cyan: #2aa198; +//$solar-green: #859900; + + +/* Non highlighted code colors */ +//$pre-bg: $base03; +//$pre-border: darken($base02, 5); +//$pre-color: $base1; diff --git a/sass/custom/_styles.scss b/sass/custom/_styles.scss index 187f27b..91ffccc 100644 --- a/sass/custom/_styles.scss +++ b/sass/custom/_styles.scss @@ -1 +1,2 @@ -// Add your custom styling here. \ No newline at end of file +// This File is imported last, and will override other styles in the cascade +// Add styles here to make changes without digging in too much diff --git a/sass/partials/_blog.scss b/sass/partials/_blog.scss index 57fe7a8..a60aac5 100644 --- a/sass/partials/_blog.scss +++ b/sass/partials/_blog.scss @@ -1,9 +1,7 @@ article { - padding-top: 1em; a { @extend .force-wrap; } header { position: relative; - padding-top: 2em; padding-bottom: 1em; margin-bottom: 1em; background: $img-border bottom left repeat-x; @@ -14,7 +12,6 @@ article { } p { font-size: .9em; - color: $text-color-light; margin: 0; &.meta { @extend .sans; @@ -42,38 +39,14 @@ article { font-size: 2.0em; font-style: italic; line-height: 1.3em; } - img, video, .flash-video { - @extend .flex-content; - @extend .basic-alignment; + img, video { @include shadow-box; } - video, .flash-video { margin: 0 auto 1.5em; } video { display: block; width: 100%; } - .flash-video { - > div { - position: relative; - display: block; - padding-bottom: 56.25%; - padding-top: 1px; - height: 0; - overflow: hidden; - iframe, object, embed { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - } - } - } > footer { - padding-bottom: 2.5em; - margin-top: 2em; @extend .sans; p.meta { - margin-bottom: .8em; font-size: .85em; - clear: both; overflow: hidden; } .byline + time:before, time +time:before, .comments:before, .byline ~ .categories:before { @@ -93,21 +66,16 @@ article + article { article header { background: none; padding-bottom: 0; } article h1 { font-size: 2.2em; - a { color: inherit; &:hover { color: $link-color-hover; } } } a[rel=full-article] { - background: darken($main-bg, 5); display: inline-block; padding: .4em .8em; margin-right: .5em; text-decoration: none; - color: mix($text-color, $text-color-light); @extend .serif; @include transition(background-color .5s); &:hover { - background: $link-color-hover; text-shadow: none; - color: $main-bg; } } footer { @@ -126,16 +94,25 @@ article + article { text-align: center; font-size: .95em; position: relative; - background: $img-border top left repeat-x; padding: {top: 1.5em; bottom: 1.5em;} a { text-decoration: none; - color: $text-color-light; &.prev { position: absolute; left: 0; } &.next { position: absolute; right: 0; } - &:hover { color: $link-color-hover; } &[href*=archive] { &:before, &:after { content: '\2014'; padding: 0 .3em; } } } } + +.footnotes { + font-size: 0.7em; + line-height: 1em; + color: $color-simple; + hr { + border: 0; + } + p { + margin-bottom: 0.3em; + } +} diff --git a/sass/partials/_syntax.scss b/sass/partials/_syntax.scss index 5465286..a679329 100644 --- a/sass/partials/_syntax.scss +++ b/sass/partials/_syntax.scss @@ -4,15 +4,15 @@ } .highlight .line-numbers, html .gist .gist-file .gist-syntax .highlight .line_numbers { text-align: right; - font-size: 13px; + font-size: 0.8em; line-height: 1.45em; @if $solarized == light { - background: lighten($base03, 1) $noise-bg !important; + background-color: lighten($base03, 1) !important; border-right: 1px solid darken($base02, 2) !important; @include box-shadow(lighten($base03, 2) -1px 0 inset); text-shadow: lighten($base02, 2) 0 -1px; } @else { - background: $base02 $noise-bg !important; + background-color: $base02 !important; border-right: 1px solid darken($base03, 2) !important; @include box-shadow(lighten($base02, 2) -1px 0 inset); text-shadow: darken($base02, 10) 0 -1px; @@ -28,7 +28,7 @@ figure.code, .gist-file, pre { } .gist .highlight, figure.code .highlight { - @include selection(adjust-color($base03, $lightness: 23%, $saturation: -65%), $text-shadow: $base03 0 1px); + //@include selection(adjust-color($base03, $lightness: 23%, $saturation: -65%), $text-shadow: $base03 0 1px); } html .gist .gist-file { margin-bottom: 1.8em; @@ -55,11 +55,11 @@ html .gist .gist-file { color: $base01; font-size: .7em !important; @if $solarized == light { - background: lighten($base03, 2) $noise-bg; + background-color: lighten($base03, 2); border: 1px solid $pre-border !important; border-top: 1px solid lighten($base03, 2) !important; } @else { - background: $base02 $noise-bg; + background-color: $base02; } @extend .sans; line-height: 1.5em; @@ -81,12 +81,12 @@ html .gist .gist-file { } } pre { - background: $pre-bg $noise-bg; + background-color: $pre-bg; @include border-radius(.4em); @extend .mono; border: 1px solid $pre-border; line-height: 1.45em; - font-size: 13px; + font-size: 0.8em; margin-bottom: 2.1em; padding: .8em 1em; color: $pre-color; @@ -122,7 +122,7 @@ p, li { padding: .8em; overflow-x: auto; line-height: 1.45em; - background: $base03 $noise-bg !important; + background-color: $base03 !important; color: $base1 !important; span { color: $base1 !important; } span { font-style: normal !important; font-weight: normal !important; } @@ -234,7 +234,7 @@ figure.code { .code-title { text-align: center; - font-size: 13px; + font-size: 0.8em; line-height: 2em; text-shadow: #cbcccc 0 1px 0; color: #474747; @@ -255,7 +255,7 @@ figure.code { @include hover-link; color: #666 !important; z-index: 1; - font-size: 13px; + font-size: 0.8em; text-shadow: #cbcccc 0 1px 0; padding-left: 3em; } diff --git a/sass/screen.scss b/sass/screen.scss index 637f1c4..a82c919 100644 --- a/sass/screen.scss +++ b/sass/screen.scss @@ -1,13 +1,9 @@ @import "compass"; -@import "colors"; -@import "custom/colors"; -@import "bootstrap"; -@import "bootstrap-responsive"; -@import "flat-ui"; -@import "font-awesome"; -@import "octoflat-partials"; -@import "solarized"; -@import "syntax"; -@import "quotes"; -@import "custom/styles"; \ No newline at end of file +@import "custom/color"; + +@import "base"; +@import "parts"; +@import "plugins"; + +@import "custom/styles"; diff --git a/source/_includes/after_footer.html b/source/_includes/after_footer.html index 08b8e34..09d93b7 100644 --- a/source/_includes/after_footer.html +++ b/source/_includes/after_footer.html @@ -1,5 +1,5 @@ + +{% include fancybox.html %} {% include disqus.html %} -{% include facebook_like.html %} -{% include google_plus_one.html %} -{% include twitter_sharing.html %} -{% include custom/after_footer.html %} +{% include google_analytics.html %} +{% include custom/after_footer.html %} \ No newline at end of file diff --git a/source/_includes/archive_post.html b/source/_includes/archive_post.html index dab8939..82ff40a 100644 --- a/source/_includes/archive_post.html +++ b/source/_includes/archive_post.html @@ -1,23 +1,22 @@ -{% capture category %}{{ post.categories | size }}{% endcapture %} -
-
-

+{% capture date %}{{ post.date }}{% endcapture %} +{% capture this_year %}{{ date | date: "%Y" }}{% endcapture %} +{% unless year == this_year %} + {% assign year = this_year %} + {% unless forloop.first %} + + {% endunless %} +

{{ date | date: "%Y" }}

+{% endunless %} +
+

{{post.title}}

+
+
{{ date | date: "%b %e" }}
+
{% include post/categories.html %}
+ {% if site.disqus_short_name and post.comments == true and site.disqus_show_comment_count == true %} +
Comments
+ {% endif %}
-
-

{{post.title}}

-
-
-{% if category != '0' %} -
-
-
-
- - -
- posted in {{ post.categories | category_links }} -
- -
-
-{% endif %} + + {% if forloop.last %} + + {% endif %} \ No newline at end of file diff --git a/source/_includes/article.html b/source/_includes/article.html index 15d2869..19f50e5 100644 --- a/source/_includes/article.html +++ b/source/_includes/article.html @@ -1,39 +1,26 @@ -{% unless page.no_header %} {% if index %} -
-
-

{% include post/date.html %} {{ time }}

-
- {% if site.disqus_short_name and page.comments != false and post.comments != false and site.disqus_show_comment_count == true %} - Comments - {% endif %} -
- {% if post.categories %} -
- {% for category in post.categories %} - {{ category }} - {% endfor %} -
- {% endif %} -
-
-

{{ post.title }}

- {{ content | excerpt }} - {% capture excerpted %}{{ content | has_excerpt }}{% endcapture %} - {% if excerpted == 'true' %} {{ site.excerpt_link }} {% endif %} -
-
+

+ {% if post.external-url %} + + {% else %} + + {% endif %} + {% if site.titlecase %}{{ post.title | titlecase }}{% else %}{{ post.title }}{% endif %} +

+
+ {{ content | excerpt }} + {% capture excerpted %}{{ content | has_excerpt }}{% endcapture %} + {% if excerpted == 'true' %}{{ site.excerpt_link }}{% endif %} +
{% else %} -
-
- {% if site.titlecase %}{{ page.title | titlecase }}{% else %}{{ page.title }}{% endif %} -
{% include post/date.html %} {{ time }}
-
-
-
-
- {{ content }} -
-
+

{% if site.titlecase %}{{ page.title | titlecase }}{% else %}{{ page.title }}{% endif %}

+
{{ content }}
{% endif %} -{% endunless %} + +
+
{% include post/date.html %}{{ time }}
+
{% include post/categories.html %}
+ {% if site.disqus_short_name and site.disqus_show_comment_count == true %} +
Comments
+ {% endif %} +
diff --git a/source/_includes/asides/github.html b/source/_includes/asides/github.html index b0bf959..00a50c7 100644 --- a/source/_includes/asides/github.html +++ b/source/_includes/asides/github.html @@ -1,30 +1,10 @@ {% if site.github_user %}
-

GitHub Repos

-
    -
  • Status updating...
    • -
+

github

{% if site.github_show_profile_link %} - @{{site.github_user}} on GitHub + @{{site.github_user}} {% endif %} - - +
    +
{% endif %} diff --git a/source/_includes/asides/recent_posts.html b/source/_includes/asides/recent_posts.html index b6ad228..6b82a13 100644 --- a/source/_includes/asides/recent_posts.html +++ b/source/_includes/asides/recent_posts.html @@ -1,10 +1,10 @@ - + diff --git a/source/_includes/custom/after_footer.html b/source/_includes/custom/after_footer.html index bce25dd..e69de29 100644 --- a/source/_includes/custom/after_footer.html +++ b/source/_includes/custom/after_footer.html @@ -1,3 +0,0 @@ -{% comment %} - Add content to be output at the bottom of each page. (You might use this for analytics scripts, for example) -{% endcomment %} diff --git a/source/_includes/custom/footer.html b/source/_includes/custom/footer.html index eab6c00..3081c48 100644 --- a/source/_includes/custom/footer.html +++ b/source/_includes/custom/footer.html @@ -1,10 +1,8 @@ -

- Copyright © {{ site.time | date: "%Y" }} - {{ site.author }} - - Powered by Octopress - Theme by Alex Garibay Hosted by GitHub -
-

- - Planet Sofia Valley - -

-
+Copyright © {{ site.time | date: "%Y" }} +{% if site.author %} + {{ site.author }} +{% else %} + {{ site.title }} +{% endif %} +

+
\ No newline at end of file diff --git a/source/_includes/custom/head.html b/source/_includes/custom/head.html index 85879f4..e69de29 100644 --- a/source/_includes/custom/head.html +++ b/source/_includes/custom/head.html @@ -1,3 +0,0 @@ - - - diff --git a/source/_includes/custom/header.html b/source/_includes/custom/header.html index 336eea2..e69de29 100644 --- a/source/_includes/custom/header.html +++ b/source/_includes/custom/header.html @@ -1,6 +0,0 @@ -
-
- Hi. I'm Blago. -

This is just another personal blog

-
-
diff --git a/source/_includes/custom/navigation.html b/source/_includes/custom/navigation.html index e0cdef8..5f23e47 100644 --- a/source/_includes/custom/navigation.html +++ b/source/_includes/custom/navigation.html @@ -1,4 +1,4 @@ -