mirror of
https://github.com/Shopify/liquid.git
synced 2026-09-12 23:40:45 -07:00
Further work on the homepage
This commit is contained in:
@@ -5,7 +5,6 @@ layout: default
|
||||
|
||||
<header class="post-header">
|
||||
<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>
|
||||
|
||||
<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
@@ -77,23 +77,60 @@ a {
|
||||
}
|
||||
}
|
||||
|
||||
/** Wrapper */
|
||||
|
||||
|
||||
.wrapper {
|
||||
max-width: $content-width;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding-right: $spacing-unit;
|
||||
padding-left: $spacing-unit;
|
||||
@extend %clearfix;
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
/** Clearfix */
|
||||
%clearfix {
|
||||
&:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
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: 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
@@ -53,13 +53,28 @@ $on-laptop: 900px;
|
||||
"syntax-highlighting"
|
||||
;
|
||||
|
||||
|
||||
|
||||
|
||||
* {
|
||||
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
|
||||
==============================================================================*/
|
||||
@@ -89,6 +104,16 @@ $on-laptop: 900px;
|
||||
|
||||
> ul {
|
||||
margin: 0;
|
||||
|
||||
> li {
|
||||
margin-bottom: $spacing-unit;
|
||||
}
|
||||
|
||||
ul {
|
||||
li {
|
||||
margin-top: $spacing-unit/2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
@@ -109,58 +134,17 @@ $on-laptop: 900px;
|
||||
.content {
|
||||
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
@@ -2,9 +2,20 @@
|
||||
layout: default
|
||||
---
|
||||
|
||||
{% for post in site.posts %}
|
||||
<h2>
|
||||
<a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
|
||||
</h2>
|
||||
{{ post.content }}
|
||||
{% endfor %}
|
||||
<div class="home">
|
||||
|
||||
<header class="home--banner">
|
||||
<h1>Liquid</h1>
|
||||
<div>Ruby library for rendering safe templates which cannot affect the security of the server they are rendered on.</div>
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user