Labyricorn/liquid
1
0
Fork 0
mirror of https://github.com/Shopify/liquid.git synced 2026-09-12 23:40:45 -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
+18 -1
View File
@@ -6,9 +6,26 @@
<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">
{{ content }} <div class="wrapper">
{{ content }}
</div>
</div> </div>
</body> </body>
_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
+41 -113
View File
@@ -12,160 +12,88 @@ dl, dd, ol, ul, figure {
* Basic styling * Basic styling
*/ */
body { body {
font-family: $base-font-family; font-family: $base-font-family;
font-size: $base-font-size; font-size: $base-font-size;
line-height: $base-line-height; line-height: $base-line-height;
font-weight: 300; font-weight: 300;
color: $color-slate; color: $color-slate;
-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,
%vertical-rhythm { %vertical-rhythm {
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;
} }
figcaption { 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: "";
display: table; display: table;
clear: both; clear: both;
} }
} }
css/main.scss
+92 -17
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,16 +40,17 @@ $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;
} }
} }
// Import partials from `sass_dir` (defaults to `_sass`) // Import partials from `sass_dir` (defaults to `_sass`)
@import @import
"base", "base",
"syntax-highlighting" "syntax-highlighting"
; ;
@@ -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
+6 -19
View File
@@ -2,22 +2,9 @@
layout: default layout: default
--- ---
<div class="home"> {% for post in site.posts %}
<h2>
<h1 class="page-heading">Posts</h1> <a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
</h2>
<ul class="post-list"> {{ post.content }}
{% for post in site.posts %} {% endfor %}
<li>
<span class="post-meta">{{ post.date | date: "%b %-d, %Y" }}</span>
<h2>
<a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
</h2>
</li>
{% endfor %}
</ul>
<p class="rss-subscribe">subscribe <a href="{{ "/feed.xml" | prepend: site.baseurl }}">via RSS</a></p>
</div>