Skip to content

Commit

Permalink
New Theme taking shape
Browse files Browse the repository at this point in the history
  • Loading branch information
@jondkoon
jondkoon committed Nov 13, 2011
1 parent fda55c8 commit 4e70b63
Show file tree
Hide file tree
Showing 26 changed files with 175 additions and 279 deletions.
3 changes: 1 addition & 2 deletions sass/_base.scss
View file
@@ -1,5 +1,4 @@
@import "theme";
@import "base/utilities";
@import "base/solarized";
@import "base/theme";
@import "base/typography";
@import "base/layout";
5 changes: 0 additions & 5 deletions sass/_partials.scss
View file
@@ -1,8 +1,3 @@
@import "partials/header";
@import "partials/navigation";
@import "partials/blog";
@import "partials/sharing";
@import "partials/syntax";
@import "partials/archive";
@import "partials/sidebar";
@import "partials/footer";
104 changes: 104 additions & 0 deletions sass/_theme.scss
View file
@@ -0,0 +1,104 @@
$noise-bg: image-url('noise.png') top left;
$img-border: inline-image('dotted-border.png');

// 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
$title-color: #f2f2f2 !default;
$subtitle-color: #aaa !default;

$text-color: #222 !default;
$text-color-light: #aaa !default;

/* Core theme application */
$text-color: #222 !default;
$text-color-light: #aaa !default;
$type-border: #ddd !default;

a {
@include link-colors($link-color, $hover: $link-color-hover, $focus: $link-color-hover, $visited: $link-color-visited, $active: $link-color-active);
}
a {
@include transition(color .3s);
}

body
{
background-image: url("../images/robot.png");
background-repeat: no-repeat;
padding-left: 160px;
background-position: -6px -10px;
background-size: 31% auto;
}

#title
{
font-family: 'Play', sans-serif;
font-size: 30px;
margin-top: 10px;
color: #333;
margin-bottom: 20px;
}

#title a:hover #subtitle{
text-decoration: none;
color: #000;
}
#title a:hover {
text-decoration: none;
}

#subtitle
{
color: #999;
}

a, a:visited, a:link, a:active
{
color: #222;
text-decoration: none;
}

a:hover
{
text-decoration: underline;
}

.primary-nav
{
height: 30px;
font-size: 13px;
}

.primary-nav ul
{
margin-left: 0;
}

.primary-nav li
{
display: inline;
}

.primary-nav li a
{
background-color: #EEEEEE;
padding: 7px 10px;
}

.primary-nav li a:hover
{
background-color: rgba(255,204,0,.5);
text-decoration: none;
}

#main {
width: 780px;
padding: 10px;
padding-left: 0;
background-color: rgba(250,250,250,.8);
}
9 changes: 0 additions & 9 deletions sass/base/_typography.scss
View file
Expand Up @@ -13,15 +13,6 @@ $header-title-font-family: $heading-font-family !default;
.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 {
line-height: 1.5em;
color: $text-color;
Expand Down
72 changes: 0 additions & 72 deletions sass/partials/_archive.scss
View file
@@ -1,72 +0,0 @@
#archive {
#content > div { &, > article { padding-top: 0; } }
}
#blog-archives {
article {
padding: 1em 0 1em;
position: relative;
background: $img-border bottom left repeat-x;
&:last-child {
background: none;
}
footer { padding: 0; margin: 0;}
}
h1 { color: $text-color; margin-bottom: .3em; }
h2 { display: none; }
h1 {
font-size: 1.5em;
a {
@include hover-link;
color: inherit;
&:hover { color: $link-color-hover; }
font-weight: normal;
display: inline-block;
}
}
a.category, time {
@extend .sans;
color: $text-color-light;
}
color: $text-color-light;
.entry-content { display: none; }
time {
font-size: .9em;
line-height: 1.2em;
.month, .day { display: inline-block; }
.month { text-transform: uppercase; }
}
p { margin-bottom: 1em; }
&, .entry-content { a { @include link-colors(inherit, $link-color-hover); }}
a:hover { color: $link-color-hover; }
@media only screen and (min-width: 550px) {
article { margin-left: 5em; }
h2 {
margin-bottom: .3em;
font-weight: normal;
display: inline-block;
position: relative; top: -1px;
float: left;
&:first-child { padding-top: .75em; }
}
time {
position: absolute;
text-align: right;
left: 0em;
top: 1.8em;
}
.year { display: none; }
article {
padding:{left: 4.5em; bottom: .7em;}
}
a.category {
line-height: 1.1em;
}
}
}
#content > .category {
article {
margin-left: 0;
padding-left: 6.8em;
}
.year { display: inline; }
}
142 changes: 0 additions & 142 deletions sass/partials/_blog.scss
View file
@@ -1,142 +0,0 @@
article {
overflow: hidden;
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;
h1 {
margin: 0;
a { text-decoration: none;
&:hover { text-decoration: underline; } }
}
p {
font-size: .9em;
color: $text-color-light;
margin: 0;
&.meta {
@extend .sans;
text-transform: uppercase;
position: absolute; top: 0;
}
}
@media only screen and (min-width: 768px) {
margin-bottom: 1.5em;
padding-bottom: 1em;
background: $img-border bottom left repeat-x;
}
}
h2 {
padding-top: 0.8em;
background: $img-border top left repeat-x;
}
.entry-content & h2:first-child, header + h2 { padding-top: 0; }
h2:first-child, header + h2 { background: none; }
.feature {
padding-top: .5em;
margin-bottom: 1em;
padding-bottom: 1em;
background: $img-border bottom left repeat-x;
font-size: 2.0em; font-style: italic;
line-height: 1.3em;
}
img, video, .flash-video {
@extend .flex-content;
@extend .basic-alignment;
@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 {
@extend .separator;
}
}

}
article + article {
.blog-index & {
background: $img-border top left repeat-x;
}
}
#content .blog-index {
padding: { top: 0; bottom: 0; }
article { padding-top: 2em; }
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 {
@extend .sans;
margin-top: 1em;
}
}

.separator {
content: "\2022 ";
padding: 0 .4em 0 .2em;
display: inline-block;
}

#content div.pagination {
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; }
}
}
}
4 changes: 0 additions & 4 deletions sass/screen.scss
View file
Expand Up @@ -2,9 +2,5 @@
@include global-reset;
@include reset-html5;

@import "custom/colors";
@import "custom/fonts";
@import "custom/layout";
@import "base";
@import "partials";
@import "custom/styles";
2 changes: 2 additions & 0 deletions source/_includes/custom/head.html
View file
@@ -1,3 +1,5 @@
<!--Fonts from Google"s Web font directory at http://google.com/webfonts -->
<link href="http://fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Play:400,700' rel='stylesheet' type='text/css'>

5 changes: 1 addition & 4 deletions source/_includes/custom/header.html
View file
@@ -1,6 +1,3 @@
<hgroup>
<h1><a href="{{ root_url }}/">{{ site.title }}</a></h1>
{% if site.subtitle %}
<h2>{{ site.subtitle }}</h2>
{% endif %}
<h1 id="title"><a href="{{ root_url }}/">{{ site.title }}{% if site.subtitle %} | <span id="subtitle">{{ site.subtitle }}</span>{% endif %}</a></h1>
</hgroup>
2 changes: 1 addition & 1 deletion source/_includes/custom/navigation.html
View file
@@ -1,5 +1,5 @@
<ul class="main-navigation">
<li><a href="{{ root_url }}/about">About</a></li>
<li><a href="{{ root_url }}/">About</a></li>
<li><a href="{{ root_url }}/portfolio">Portfolio</a></li>
<li><a href="{{ root_url }}/open-source">Open Source</a></li>
<li><a href="{{ root_url }}/experiments">Experiments</a></li>
Expand Down
12 changes: 0 additions & 12 deletions source/_includes/navigation.html
View file
@@ -1,13 +1 @@
<ul class="subscription" data-subscription="rss{% if site.subscribe_email %} email{% endif %}">
<li><a href="{{ site.subscribe_rss }}" rel="subscribe-rss" title="subscribe via RSS">RSS</a></li>
{% if site.subscribe_email %}
<li><a href="{{ site.subscribe_email }}" rel="subscribe-email" title="subscribe via email">Email</a></li>
{% endif %}
</ul>
<form action="{{ site.simple_search }}" method="get">
<fieldset role="search">
<input type="hidden" name="q" value="site:{{ site.url | shorthand_url }}" />
<input class="search" type="text" name="q" results="0" placeholder="Search"/>
</fieldset>
</form>
{% include custom/navigation.html %}

0 comments on commit 4e70b63

Please sign in to comment.