Labyricorn/liquid
1
0
Fork 0
mirror of https://github.com/Shopify/liquid.git synced 2026-09-26 13:45:13 -07:00
Code Issues Packages Projects Releases Wiki Activity

Realized I don't need flexbox. Position fixed sidebar

Browse Source 
Refactoring

Cleaned up some styles
This commit is contained in:
Tetsuro
2015-01-27 14:00:57 -05:00
parent a8dc349f01
commit fe4253f872
5 changed files with 176 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files
_layouts/default.html
+17
View File
@@ -6,10 +6,27 @@
<body> <body>
<div class="sidebar"> <div class="sidebar">
<h1 class="sidebar--logo"><a href="/">Liquid</a></h1> <h1 class="sidebar--logo"><a href="/">Liquid</a></h1>
<nav class="sidebar--nav">
<ul>
<li><a href="#">Nav Item 1</a>
<ul>
<li><a href="#">Sub Nav Item 1</a></li>
<li><a href="#">Sub Nav Item 2</a></li>
<li><a href="#">Sub Nav Item 3 (Active)</a></li>
<li><a href="#">Sub Nav Item 4</a></li>
</ul>
</li>
<li><a href="#">Nav Item 2</a></li>
<li><a href="#">Nav Item 3</a></li>
<li><a href="#">Nav Item 4</a></li>
</ul>
</nav>
</div> </div>
<div class="content"> <div class="content">
<div class="wrapper">
{{ content }} {{ content }}
</div> </div>
</div>
</body> </body>
</html> </html>
_posts/2015-01-26-welcome-to-jekyll.markdown
+19 -5
View File
@@ -1,14 +1,28 @@
--- ---
layout: post layout: post
title: "Welcome to Jekyll!" title: "Test Post"
date: 2015-01-26 17:50:59 date: 2015-01-26 17:50:59
categories: jekyll update categories: liquid docs yo
--- ---
You’ll 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.
To add new posts, simply add a file in the `_posts` directory that follows the convention `YYYY-MM-DD-name-of-post.ext` and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works. # Heading 1
Jekyll also offers powerful support for code snippets: ## 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 %} {% highlight ruby %}
def print_hi(name) def print_hi(name)
_sass/_base.scss
+16 -88
View File
@@ -20,9 +20,8 @@ body {
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
} }
/** /** Set `margin-bottom` to maintain vertical rhythm */
* Set `margin-bottom` to maintain vertical rhythm
*/
h1, h2, h3, h4, h5, h6, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, p, blockquote, pre,
ul, ol, dl, figure, ul, ol, dl, figure,
@@ -30,17 +29,15 @@ ul, ol, dl, figure,
margin-bottom: $spacing-unit / 2; margin-bottom: $spacing-unit / 2;
} }
/** /** Images */
* Images
*/
img { img {
max-width: 100%; max-width: 100%;
vertical-align: middle; vertical-align: middle;
} }
/** /** Figures */
* Figures
*/
figure > img { figure > img {
display: block; display: block;
} }
@@ -49,119 +46,50 @@ figcaption {
font-size: $small-font-size; font-size: $small-font-size;
} }
/** /** Lists */
* Lists
*/
ul, ol { ul, ol {
margin-left: $spacing-unit; margin-left: $spacing-unit;
} }
li { li {
> ul, > ul, > ol {
> ol {
margin-bottom: 0; margin-bottom: 0;
} }
} }
/** /** Headings */
* Headings
*/
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
font-weight: 300; font-weight: 300;
} }
/** /** Links */
* Links
*/
a { a {
// color: $brand-color; color: $color-blue-5;
text-decoration: none; text-decoration: none;
&:visited { &:visited {
// color: darken($brand-color, 15%); color: #609;
} }
&:hover { &:hover {
// color: $text-color;
text-decoration: underline; text-decoration: underline;
} }
} }
/** Wrapper */
/**
* Blockquotes
*/
blockquote {
//color: $grey-color;
// border-left: 4px solid $grey-color-light;
padding-left: $spacing-unit / 2;
font-size: 18px;
letter-spacing: -1px;
font-style: italic;
> :last-child {
margin-bottom: 0;
}
}
/**
* Code formatting
*/
pre,
code {
font-size: 15px;
// border: 1px solid $grey-color-light;
border-radius: 3px;
background-color: #eef;
}
code {
padding: 1px 5px;
}
pre {
padding: 8px 12px;
overflow-x: scroll;
> code {
border: 0;
padding-right: 0;
padding-left: 0;
}
}
/**
* Wrapper
*/
/*
.wrapper { .wrapper {
max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2)); max-width: $content-width;
max-width: calc(#{$content-width} - (#{$spacing-unit} * 2));
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
padding-right: $spacing-unit; padding-right: $spacing-unit;
padding-left: $spacing-unit; padding-left: $spacing-unit;
@extend %clearfix; @extend %clearfix;
@include media-query($on-laptop) {
max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit}));
max-width: calc(#{$content-width} - (#{$spacing-unit}));
padding-right: $spacing-unit / 2;
padding-left: $spacing-unit / 2;
}
} }
*/ /** Clearfix */
/**
* Clearfix
*/
%clearfix { %clearfix {
&:after { &:after {
content: ""; content: "";
css/main.scss
+87 -12
View File
@@ -28,9 +28,10 @@ $grey-color-dark: darken($grey-color, 25%);
*/ */
// Width of the content area // Width of the content area
$content-width: 800px; $sidebar-width: 250px;
$content-width: 900px;
$on-palm: 600px; $on-palm: 600px;
$on-laptop: 800px; $on-laptop: 900px;
// Using media queries with like this: // Using media queries with like this:
// @include media-query($on-palm) { // @include media-query($on-palm) {
@@ -39,6 +40,7 @@ $on-laptop: 800px;
// padding-left: $spacing-unit / 2; // padding-left: $spacing-unit / 2;
// } // }
// } // }
@mixin media-query($device) { @mixin media-query($device) {
@media screen and (max-width: $device) { @media screen and (max-width: $device) {
@content; @content;
@@ -58,17 +60,16 @@ $on-laptop: 800px;
box-sizing: border-box; box-sizing: border-box;
} }
body { /*============================================================================
display: flex; Sidebar
} ==============================================================================*/
/***** Sidebar ******/
.sidebar { .sidebar {
background: $color-blue-5; background: $color-blue-5;
flex: 0 1 250px; //flex: 0 0 250px;
width: $sidebar-width;
height: 100vh; height: 100vh;
position: fixed;
} }
.sidebar--logo { .sidebar--logo {
@@ -77,15 +78,89 @@ body {
text-align: center; text-align: center;
padding: $spacing-unit; padding: $spacing-unit;
border-bottom: 1px solid $color-blue-4; border-bottom: 1px solid $color-blue-4;
a { a {
color: $color-white; color: $color-white;
} }
} }
.sidebar--nav {
padding: $spacing-unit / 2;
/***** Content ******/ > ul {
margin: 0;
}
li {
list-style: none;
a {
color: $color-white;
}
}
}
/*============================================================================
Content & Markdown Styles
==============================================================================*/
.content { .content {
padding: $spacing-unit; padding: $spacing-unit $spacing-unit $spacing-unit ($spacing-unit + $sidebar-width);
flex: 0 1 auto;
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.html
+1 -14
View File
@@ -2,22 +2,9 @@
layout: default layout: default
--- ---
<div class="home">
<h1 class="page-heading">Posts</h1>
<ul class="post-list">
{% for post in site.posts %} {% for post in site.posts %}
<li>
<span class="post-meta">{{ post.date | date: "%b %-d, %Y" }}</span>
<h2> <h2>
<a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a> <a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
</h2> </h2>
</li> {{ post.content }}
{% endfor %} {% endfor %}
</ul>
<p class="rss-subscribe">subscribe <a href="{{ "/feed.xml" | prepend: site.baseurl }}">via RSS</a></p>
</div>