Further work on the homepage

This commit is contained in:
Tetsuro
2015-01-27 15:06:23 -05:00
parent fe4253f872
commit 1fad0e2638
5 changed files with 110 additions and 118 deletions
-1
View File
@@ -5,7 +5,6 @@ layout: default
<header class="post-header"> <header class="post-header">
<h1 class="post-title">{{ page.title }}</h1> <h1 class="post-title">{{ page.title }}</h1>
<p class="post-meta">{{ page.date | date: "%b %-d, %Y" }}{% if page.author %} • {{ page.author }}{% endif %}{% if page.meta %} • {{ page.meta }}{% endif %}</p>
</header> </header>
<article class="post-content"> <article class="post-content">
@@ -1,39 +0,0 @@
---
layout: post
title: "Test Post"
date: 2015-01-26 17:50:59
categories: liquid docs yo
---
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
This is a dummy paragraph. Find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated.
This is a dummy paragraph. Find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated.
This is a dummy paragraph. Find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated.
> Blockquote
Code snippet:
{% highlight ruby %}
def print_hi(name)
puts "Hi, #{name}"
end
print_hi('Tom')
#=> prints 'Hi, Tom' to STDOUT.
{% endhighlight %}
Check out the [Jekyll docs][jekyll] for more info on how to get the most out of Jekyll. File all bugs/feature requests at [Jekyll’s GitHub repo][jekyll-gh]. If you have questions, you can ask them on [Jekyll’s dedicated Help repository][jekyll-help].
[jekyll]: http://jekyllrb.com
[jekyll-gh]: https://github.com/jekyll/jekyll
[jekyll-help]: https://github.com/jekyll/jekyll-help
+54 -17
View File
@@ -77,23 +77,60 @@ a {
} }
} }
/** Wrapper */ h1 {
font-size: 2em;
.wrapper {
max-width: $content-width;
margin-right: auto;
margin-left: auto;
padding-right: $spacing-unit;
padding-left: $spacing-unit;
@extend %clearfix;
} }
/** Clearfix */ h2 {
%clearfix { font-size: 2em;
&:after { text-decoration: underline;
content: ""; }
display: table;
clear: both; h3 {
} font-size: 1.5em;
}
h4 {
font-size: 1.5em;
text-decoration: underline;
}
blockquote {
color: lighten($color-slate, 20);
border-left: 2px solid lighten($color-slate, 20);
padding-left: $spacing-unit / 2;
letter-spacing: -1px;
font-style: italic;
> :last-child {
margin-bottom: 0;
}
}
pre, code {
font-size: 15px;
border: 1px solid $color-blue-2;
border-radius: 3px;
background-color: lighten($color-blue-1, 0.9);
}
code {
padding: 1px 5px;
}
pre {
padding: 8px 12px;
> code {
border: 0;
padding-right: 0;
padding-left: 0;
}
}
hr {
display: block;
height: 1px;
border: 0;
background-color: lighten($color-slate, 40%);
} }
+39 -55
View File
@@ -53,13 +53,28 @@ $on-laptop: 900px;
"syntax-highlighting" "syntax-highlighting"
; ;
* { * {
box-sizing: border-box; box-sizing: border-box;
} }
/** Clearfix */
%clearfix {
&:after {
content: "";
display: table;
clear: both;
}
}
.wrapper {
max-width: $content-width;
margin-right: auto;
margin-left: auto;
padding-right: $spacing-unit;
padding-left: $spacing-unit;
@extend %clearfix;
}
/*============================================================================ /*============================================================================
Sidebar Sidebar
==============================================================================*/ ==============================================================================*/
@@ -89,6 +104,16 @@ $on-laptop: 900px;
> ul { > ul {
margin: 0; margin: 0;
> li {
margin-bottom: $spacing-unit;
}
ul {
li {
margin-top: $spacing-unit/2;
}
}
} }
li { li {
@@ -109,58 +134,17 @@ $on-laptop: 900px;
.content { .content {
padding: $spacing-unit $spacing-unit $spacing-unit ($spacing-unit + $sidebar-width); padding: $spacing-unit $spacing-unit $spacing-unit ($spacing-unit + $sidebar-width);
h1 {
font-size: 2em;
}
h2 {
font-size: 2em;
text-decoration: underline;
}
h3 {
font-size: 1.5em;
}
h4 {
font-size: 1.5em;
text-decoration: underline;
}
blockquote {
color: lighten($color-slate, 20);
border-left: 4px solid lighten($color-slate, 20);
padding-left: $spacing-unit / 2;
font-size: 18px;
letter-spacing: -1px;
font-style: italic;
> :last-child {
margin-bottom: 0;
}
}
pre, code {
font-size: 15px;
border: 1px solid $color-blue-2;
border-radius: 3px;
background-color: lighten($color-blue-1, 0.9);
}
code {
padding: 1px 5px;
}
pre {
padding: 8px 12px;
> code {
border: 0;
padding-right: 0;
padding-left: 0;
}
}
} }
/*============================================================================
Index
==============================================================================*/
.home--banner {
h1 {
text-align: center;
font-weight: bold;
font-size: 5em;
}
}
+17 -6
View File
@@ -2,9 +2,20 @@
layout: default layout: default
--- ---
{% for post in site.posts %} <div class="home">
<h2>
<a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a> <header class="home--banner">
</h2> <h1>Liquid</h1>
{{ post.content }} <div>Ruby library for rendering safe templates which cannot affect the security of the server they are rendered on.</div>
{% endfor %} </header>
<hr/>
{% for post in site.posts %}
<h2>
<a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
</h2>
{{ post.content }}
{% endfor %}
</div>