mirror of
https://github.com/kemko/liquid.git
synced 2026-01-07 10:45:42 +03:00
Realized I don't need flexbox. Position fixed sidebar
Refactoring Cleaned up some styles
This commit is contained in:
Tetsuro
@@ -6,9 +6,26 @@
|
||||
<body>
|
||||
<div class="sidebar">
|
||||
<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 class="content">
|
||||
{{ content }}
|
||||
<div class="wrapper">
|
||||
{{ content }}
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
|
||||
@@ -1,14 +1,28 @@
|
||||
---
|
||||
layout: post
|
||||
title: "Welcome to Jekyll!"
|
||||
title: "Test Post"
|
||||
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 %}
|
||||
def print_hi(name)
|
||||
|
||||
154
_sass/_base.scss
154
_sass/_base.scss
@@ -12,160 +12,88 @@ dl, dd, ol, ul, figure {
|
||||
* Basic styling
|
||||
*/
|
||||
body {
|
||||
font-family: $base-font-family;
|
||||
font-size: $base-font-size;
|
||||
line-height: $base-line-height;
|
||||
font-weight: 300;
|
||||
color: $color-slate;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
font-family: $base-font-family;
|
||||
font-size: $base-font-size;
|
||||
line-height: $base-line-height;
|
||||
font-weight: 300;
|
||||
color: $color-slate;
|
||||
-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,
|
||||
p, blockquote, pre,
|
||||
ul, ol, dl, figure,
|
||||
%vertical-rhythm {
|
||||
margin-bottom: $spacing-unit / 2;
|
||||
margin-bottom: $spacing-unit / 2;
|
||||
}
|
||||
|
||||
/**
|
||||
* Images
|
||||
*/
|
||||
/** Images */
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
vertical-align: middle;
|
||||
max-width: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/**
|
||||
* Figures
|
||||
*/
|
||||
/** Figures */
|
||||
|
||||
figure > img {
|
||||
display: block;
|
||||
display: block;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
font-size: $small-font-size;
|
||||
font-size: $small-font-size;
|
||||
}
|
||||
|
||||
/**
|
||||
* Lists
|
||||
*/
|
||||
/** Lists */
|
||||
ul, ol {
|
||||
margin-left: $spacing-unit;
|
||||
margin-left: $spacing-unit;
|
||||
}
|
||||
|
||||
li {
|
||||
> ul,
|
||||
> ol {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
> ul, > ol {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Headings
|
||||
*/
|
||||
/** Headings */
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: 300;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
/**
|
||||
* Links
|
||||
*/
|
||||
/** Links */
|
||||
a {
|
||||
// color: $brand-color;
|
||||
color: $color-blue-5;
|
||||
text-decoration: none;
|
||||
|
||||
&:visited {
|
||||
// color: darken($brand-color, 15%);
|
||||
color: #609;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
// color: $text-color;
|
||||
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 {
|
||||
max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2));
|
||||
max-width: calc(#{$content-width} - (#{$spacing-unit} * 2));
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding-right: $spacing-unit;
|
||||
padding-left: $spacing-unit;
|
||||
@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;
|
||||
}
|
||||
max-width: $content-width;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding-right: $spacing-unit;
|
||||
padding-left: $spacing-unit;
|
||||
@extend %clearfix;
|
||||
}
|
||||
|
||||
*/
|
||||
|
||||
/**
|
||||
* Clearfix
|
||||
*/
|
||||
/** Clearfix */
|
||||
%clearfix {
|
||||
&:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
&:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
109
css/main.scss
109
css/main.scss
@@ -28,9 +28,10 @@ $grey-color-dark: darken($grey-color, 25%);
|
||||
*/
|
||||
|
||||
// Width of the content area
|
||||
$content-width: 800px;
|
||||
$sidebar-width: 250px;
|
||||
$content-width: 900px;
|
||||
$on-palm: 600px;
|
||||
$on-laptop: 800px;
|
||||
$on-laptop: 900px;
|
||||
|
||||
// Using media queries with like this:
|
||||
// @include media-query($on-palm) {
|
||||
@@ -39,16 +40,17 @@ $on-laptop: 800px;
|
||||
// padding-left: $spacing-unit / 2;
|
||||
// }
|
||||
// }
|
||||
|
||||
@mixin media-query($device) {
|
||||
@media screen and (max-width: $device) {
|
||||
@content;
|
||||
}
|
||||
@media screen and (max-width: $device) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Import partials from `sass_dir` (defaults to `_sass`)
|
||||
@import
|
||||
"base",
|
||||
"syntax-highlighting"
|
||||
"base",
|
||||
"syntax-highlighting"
|
||||
;
|
||||
|
||||
|
||||
@@ -58,17 +60,16 @@ $on-laptop: 800px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/***** Sidebar ******/
|
||||
|
||||
/*============================================================================
|
||||
Sidebar
|
||||
==============================================================================*/
|
||||
|
||||
.sidebar {
|
||||
background: $color-blue-5;
|
||||
flex: 0 1 250px;
|
||||
//flex: 0 0 250px;
|
||||
width: $sidebar-width;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.sidebar--logo {
|
||||
@@ -77,15 +78,89 @@ body {
|
||||
text-align: center;
|
||||
padding: $spacing-unit;
|
||||
border-bottom: 1px solid $color-blue-4;
|
||||
|
||||
a {
|
||||
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 {
|
||||
padding: $spacing-unit;
|
||||
flex: 0 1 auto;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
25
index.html
25
index.html
@@ -2,22 +2,9 @@
|
||||
layout: default
|
||||
---
|
||||
|
||||
<div class="home">
|
||||
|
||||
<h1 class="page-heading">Posts</h1>
|
||||
|
||||
<ul class="post-list">
|
||||
{% for post in site.posts %}
|
||||
<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>
|
||||
{% for post in site.posts %}
|
||||
<h2>
|
||||
<a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
|
||||
</h2>
|
||||
{{ post.content }}
|
||||
{% endfor %}
|
||||
|
||||
Reference in New Issue
Block a user