Switched to proper Greyshade theme instead of the previous manual setup

This commit is contained in:
Shashank Mehta
2013-01-02 21:05:36 +05:30
parent 4d85d26d2f
commit fb5d40cac8
17 changed files with 302 additions and 149 deletions

1
.themes/greyshade Submodule

Submodule .themes/greyshade added at ab1ac0671b

270
sass/_greyshade.scss Normal file
View File

@ -0,0 +1,270 @@
//This is the main GREYSHADE css file.
body {
background: #3D4349;
font-family: "Open Sans", "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,sans-serif;
}
::selection, ::-moz-selection, ::-webkit-selection {
background-color: $greyshade;
color: $color-background;
}
#header {
height: auto;
border-bottom: none;
.subtitle {
color: #999;
font-style: italic;
}
#sub-nav {
float: none;
position: relative;
.social {
float: none;
}
.search {
float: none;
.alignright {
float: none;
}
}
}
h1 {
float: none;
}
#main-nav {
float: none;
margin-left: 0px;
ul {
li {
margin-left: 0px;
display: block;
a {
padding: 0px 0px;
}
}
}
}
}
.container {
.credit-box {
color: #AAA;
font-size: .8em;
position: fixed;
bottom: 20px;
left: 40px;
a {
color: inherit;
text-decoration: underline;
}
}
.mid-col {
float: right;
width: 77%;
background: whitesmoke;
.mid-col-container {
padding: 0px 70px 0px 40px;
#content {
width: 100%;
article {
border-top: none;
.title {
margin-left: 0px;
}
.entry-content {
margin-left: 0px;
.gist .gist-file .gist-data {
.line_numbers {
line-height: inherit;
}
pre {
line-height: inherit;
}
}
h2 {
font-size: 1.3em;
color: #574C4C;
border-bottom: none;
}
h2::before {
border-bottom: none;
}
blockquote {
border-left: 5px solid $greyshade;
background: #FCFCFC;
}
table {
line-height: 1.2em;
td {
text-align: left;
}
}
}
.meta {
position: relative;
float: right;
top: 0px;
color: #555;
text-align: right;
width: auto;
.date::before {
color: #555;
position: relative;
margin-right: 10px;
}
.tags::before {
color: #999;
position: relative;
margin-right: 10px;
}
}
h1.title{
a {
color: #333;
-webkit-transition: color 0.3s;
-moz-transition: color 0.3s;
-o-transition: color 0.3s;
transition: color 0.3s;
}
a:hover {
color: $greyshade;
-webkit-transition: color 0.3s;
-moz-transition: color 0.3s;
-o-transition: color 0.3s;
transition: color 0.3s;
}
}
}
}
}
footer {
width: 100%;
}
}
.left-col:hover {
opacity: 1;
}
.left-col {
width: 23%;
position: fixed;
opacity: .3;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
-ms-transition: all .2s ease-in;
transition: all .2s ease-in;
height: 100%;
.intrude-less {
width: 80%;
}
#header {
width: 100%;
padding: 20% 0% 0% 15%;
#main-nav {
margin-top: 10px;
}
.profilepic {
img {
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}
}
a {
color: #EFEFEF;
text-shadow: 0 1px #333;
}
a:hover {
color: $greyshade;
}
#sub-nav {
margin-top: 10px;
.search::before {
left: 10px;
}
.social {
margin-bottom: 10px;
}
}
}
}
}
.archives {
.title {
font-size: 1.2em;
}
article {
.meta {
line-height: 1.5em;
margin-top: 0;
span::before {
padding-right: 0;
}
}
}
}
a {
color: $greyshade;
}
a:hover {
color: $greyshade;
}
body {
@media screen and (max-width: 1040px){
margin: 0 0;
}
}
@media screen and (max-width: 700px){
.container {
.credit-box {
display: none;
}
.left-col {
position: relative;
width: 100%;
opacity: 1;
.intrude-less {
margin: auto auto;
}
#header {
padding: 40px 0px;
text-align: center;
#sub-nav{
display: block;
}
#main-nav {
ul {
display: block;
li {
display: inline;
margin-right: 10px;
}
}
}
}
}
.mid-col {
float: none;
width: 100%;
.mid-col-container {
padding: 15px 15px;
#content {
article {
.meta {
float: none;
}
}
}
}
}
}
}

View File

@ -41,3 +41,4 @@ $solarized: light;
//$pre-bg: $base03;
//$pre-border: darken($base02, 5);
//$pre-color: $base1;
$greyshade: #258FB8;

View File

@ -1,128 +1,6 @@
// This File is imported last, and will override other styles in the cascade
// Add styles here to make changes without digging in too much
body {
background: #3D4349;
font-family: "Open Sans", "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,sans-serif;
}
#header {
height: auto;
border-bottom: none;
#sub-nav {
float: none;
position: relative;
.social {
float: none;
}
.search {
float: none;
.alignright {
float: none;
}
}
}
h1 {
float: none;
}
#main-nav {
float: none;
margin-left: 0px;
ul {
li {
margin-left: 0px;
display: block;
a {
padding: 0px 0px;
}
}
}
}
}
.container {
.mid-col {
float: right;
width: 77%;
background: whitesmoke;
.mid-col-container {
padding: 0px 70px 0px 40px;
#content {
width: 100%;
article {
border-top: none;
.title {
margin-left: 0px;
}
.entry-content {
margin-left: 0px;
}
.meta {
position: relative;
float: right;
top: 0px;
color: #555;
.date::before {
color: #555;
}
.tags::before {
color: #555;
}
}
h1.title{
a {
color: #333;
-webkit-transition: color 0.3s;
-moz-transition: color 0.3s;
-o-transition: color 0.3s;
transition: color 0.3s;
}
a:hover {
color: #258FB8;
-webkit-transition: color 0.3s;
-moz-transition: color 0.3s;
-o-transition: color 0.3s;
transition: color 0.3s;
}
}
}
}
}
footer {
width: 100%;
}
}
.left-col {
width: 15%;
position: fixed;
#header {
width: 100%;
padding: 20% 0% 0% 20%;
a {
color: #EFEFEF;
text-shadow: 0 1px #333;
}
a:hover {
color: #258FB8;
}
#sub-nav {
.search::before {
left: 10px;
}
.social {
margin-bottom: 10px;
}
}
}
}
}
.archives {
.title {
font-size: 1.2em;

View File

@ -121,7 +121,6 @@ figure.code{
td.code{
width: 100%;
padding-left: 15px;
overflow-x: auto;
}
}
.entry-content .gist{

View File

@ -5,6 +5,8 @@
@import "plugins";
@import "custom/colors";
@import "greyshade";
@import "custom/fonts";
@import "custom/layout";
@import "custom/styles";

View File

@ -8,12 +8,13 @@
<section class="archives"><h1 class="year">{{ date | date: "%Y" }}</h1>
{% endunless %}
<article>
<h1 class="title"><a href="{{ root_url }}{{ post.url }}">{{post.title}}</a></h1>
<div class="meta">
<span class="date">{{ date | date: "%b %e" }}</span>
<br>
<span class="tags">{% include post/categories.html %}</span>
{% if site.disqus_short_name and post.comments == true and site.disqus_show_comment_count == true %}
<span class="comments"><a href="{{ root_url }}{{ post.url }}#disqus_thread">Comments</a></span>
{% endif %}
</div>
<h1 class="title"><a href="{{ root_url }}{{ post.url }}">{{post.title}}</a></h1>
</article>

View File

@ -3,7 +3,7 @@
<div class="date">{% include post/date.html %}{{ time }}</div>
<div class="tags">{% include post/categories.html %}</div>
{% if site.disqus_short_name and site.disqus_show_comment_count == true %}
<span class="comments"><a href="{{ root_url }}{{ post.url }}{{ page.url }}#disqus_thread">Comments</a></span>
<span class="comments"><a href="{{ root_url }}{{ post.url }}#disqus_thread">Comments</a></span>
{% endif %}
</div>
<h1 class="title"><a href="{{ root_url }}{{ post.url }}">{% if site.titlecase %}{{ post.title | titlecase }}{% else %}{{ post.title }}{% endif %}</a></h1>

View File

@ -12,4 +12,4 @@
$('#banner').getTwitterFeed('{{ site.twitter_user }}', {{ site.twitter_tweet_count }}, {{ site.twitter_show_replies }});
})(jQuery);
</script>
{% endif %}
{% endif %}

View File

@ -1 +1,2 @@
{% include custom/footer.html %}
Design credit: <a href="http://shashankmehta.in/archive/2012/greyshade.html">Shashank Mehta</a>

View File

@ -8,13 +8,20 @@
{% capture description %}{% if page.description %}{{ page.description }}{% else %}{{ content | raw_content }}{% endif %}{% endcapture %}
<meta name="description" content="{{ description | strip_html | condense_spaces | truncate:150 }}">
{% if page.keywords %}<meta name="keywords" content="{{ page.keywords }}">{% endif %}
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- http://t.co/dKP3o1e -->
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="{{ site.subscribe_rss }}" rel="alternate" title="{{site.title}}" type="application/atom+xml">
{% capture canonical %}{{ site.url }}{% if site.permalink contains '.html' %}{{ page.url }}{% else %}{{ page.url | remove:'index.html' }}{% endif %}{% endcapture %}
<link rel="canonical" href="{{ canonical }}">
<link href="{{ root_url }}/favicon.png" rel="shortcut icon">
<link href="{{ root_url }}/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700' rel='stylesheet' type='text/css'>
{% include custom/head.html %}
</head>
{% include google_analytics.html %}
</head>

View File

@ -1,19 +1,10 @@
<img src="/images/dp.jpg" alt="WatchOut!" style="width: 160px;">
<div class="profilepic">
<img src="/images/dp.jpg" alt="Profile Picture" style="width: 160px;">
</div>
<h1><a href="{{ root_url }}/">{{ site.title }}</a></h1>
<p class="subtitle">{{ site.subtitle }}</p>
<nav id="main-nav">{% include navigation.html %}</nav>
<br/>
<h3 class="alignleft">{{ site.subtitle }}</h3>
<nav id="mobile-nav">
<div class="alignleft menu">
<a class="button">Menu</a>
<div class="container">{% include navigation.html %}</div>
</div>
<br/>
<div class="alignright search">
<a class="button"></a>
</div>
</nav>
<nav id="sub-nav" class="alignright">
<nav id="sub-nav">
<div class="social">
{% if site.facebook_user %}
<a class="facebook" href="http://www.facebook.com/{{ site.facebook_user }}" title="Facebook">Facebook</a>

View File

@ -1 +1 @@
{% include custom/navigation.html %}
{% include custom/navigation.html %}

View File

@ -3,6 +3,11 @@
<body>
<div class="container">
<div class="left-col">
<div class="intrude-less">
<header id="header" class="inner">{% include header.html %}</header>
</div>
</div>
<div class="mid-col">
{% unless page.banner == false %}
{% include banner.html %}
@ -13,9 +18,6 @@
<footer id="footer" class="inner">{% include footer.html %}</footer>
{% include after_footer.html %}
</div>
<div class="left-col">
<header id="header" class="inner">{% include header.html %}</header>
</div>
</div>
</body>
</html>

View File

@ -5,4 +5,4 @@ title: Blog Archives
{% for post in site.posts reverse %}
{% include archive_post.html %}
{% endfor %}
{% endfor %}

View File

@ -15,4 +15,4 @@ layout: default
<a href="{{paginator.next_page}}" class="next">Next</a>
{% endif %}
<div class="center"><a href="{{ root_url }}/blog/archives">Blog Archives</a></div>
</nav>
</nav>

View File

@ -32,4 +32,4 @@ a._getPosition(f)),i=d.extend({opacity:1},g);delete i.position;f?(g=this.getOrig
"elastic"===e&&(f.top="+=200px");b.animate(f,{duration:"none"===e?0:c.prevSpeed,easing:c.prevEasing,complete:function(){d(this).trigger("onReset").remove()}})}};a.helpers.overlay={overlay:null,update:function(){var a,c;this.overlay.width("100%").height("100%");d.browser.msie||k?(a=Math.max(l.documentElement.scrollWidth,l.body.scrollWidth),c=Math.max(l.documentElement.offsetWidth,l.body.offsetWidth),a=a<c?m.width():a):a=q.width();this.overlay.width(a).height(q.height())},beforeShow:function(b){this.overlay||
(b=d.extend(!0,{},a.defaults.helpers.overlay,b),this.overlay=d('<div id="fancybox-overlay"></div>').css(b.css).appendTo("body"),b.closeClick&&this.overlay.bind("click.fb",a.close),a.current.fixed&&!k?this.overlay.addClass("overlay-fixed"):(this.update(),this.onUpdate=function(){this.update()}),this.overlay.fadeTo(b.speedIn,b.opacity))},afterClose:function(a){this.overlay&&this.overlay.fadeOut(a.speedOut||0,function(){d(this).remove()});this.overlay=null}};a.helpers.title={beforeShow:function(b){var c;
if(c=a.current.title)c=d('<div class="fancybox-title fancybox-title-'+b.type+'-wrap">'+c+"</div>").appendTo("body"),"float"===b.type&&(c.width(c.width()),c.wrapInner('<span class="child"></span>'),a.current.margin[2]+=Math.abs(parseInt(c.css("margin-bottom"),10))),c.appendTo("over"===b.type?a.inner:"outside"===b.type?a.wrap:a.skin)}};d.fn.fancybox=function(b){var c=d(this),e=this.selector||"",f,g=function(g){var h=this,j=f,k;!g.ctrlKey&&!g.altKey&&!g.shiftKey&&!g.metaKey&&!d(h).is(".fancybox-wrap")&&
(g.preventDefault(),g=b.groupAttr||"data-fancybox-group",k=d(h).attr(g),k||(g="rel",k=h[g]),k&&""!==k&&"nofollow"!==k&&(h=e.length?d(e):c,h=h.filter("["+g+'="'+k+'"]'),j=h.index(this)),b.index=j,a.open(h,b))},b=b||{};f=b.index||0;e?q.undelegate(e,"click.fb-start").delegate(e,"click.fb-start",g):c.unbind("click.fb-start").bind("click.fb-start",g);return this};d(l).ready(function(){a.defaults.fixed=d.support.fixedPosition||!(d.browser.msie&&6>=d.browser.version)&&!k})})(window,document,jQuery);
(g.preventDefault(),g=b.groupAttr||"data-fancybox-group",k=d(h).attr(g),k||(g="rel",k=h[g]),k&&""!==k&&"nofollow"!==k&&(h=e.length?d(e):c,h=h.filter("["+g+'="'+k+'"]'),j=h.index(this)),b.index=j,a.open(h,b))},b=b||{};f=b.index||0;e?q.undelegate(e,"click.fb-start").delegate(e,"click.fb-start",g):c.unbind("click.fb-start").bind("click.fb-start",g);return this};d(l).ready(function(){a.defaults.fixed=d.support.fixedPosition||!(d.browser.msie&&6>=d.browser.version)&&!k})})(window,document,jQuery);