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

cleaning up stylesheets

Browse Source
This commit is contained in:
Tetsuro
2015-01-26 20:32:10 -05:00
parent e661b5a275
commit 79ec1506de
3 changed files with 45 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
_layouts/default.html
+4 -5
View File
@@ -4,13 +4,12 @@
{% include head.html %} {% include head.html %}
<body> <body>
<div class="sidebar">
<div class="wrapper"> <h1 class="logo"><a href="/">Liquid</a></h1>
</div>
<div class="content">
{{ content }} {{ content }}
</div> </div>
{% include footer.html %}
</body> </body>
</html> </html>
_sass/_base.scss
+7 -8
View File
@@ -16,8 +16,7 @@ body {
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: $text-color; color: $color-slate;
background-color: $background-color;
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
} }
@@ -75,15 +74,15 @@ h1, h2, h3, h4, h5, h6 {
* Links * Links
*/ */
a { a {
color: $brand-color; // color: $brand-color;
text-decoration: none; text-decoration: none;
&:visited { &:visited {
color: darken($brand-color, 15%); // color: darken($brand-color, 15%);
} }
&:hover { &:hover {
color: $text-color; // color: $text-color;
text-decoration: underline; text-decoration: underline;
} }
} }
@@ -94,8 +93,8 @@ a {
* Blockquotes * Blockquotes
*/ */
blockquote { blockquote {
color: $grey-color; //color: $grey-color;
border-left: 4px solid $grey-color-light; // border-left: 4px solid $grey-color-light;
padding-left: $spacing-unit / 2; padding-left: $spacing-unit / 2;
font-size: 18px; font-size: 18px;
letter-spacing: -1px; letter-spacing: -1px;
@@ -114,7 +113,7 @@ blockquote {
pre, pre,
code { code {
font-size: 15px; font-size: 15px;
border: 1px solid $grey-color-light; // border: 1px solid $grey-color-light;
border-radius: 3px; border-radius: 3px;
background-color: #eef; background-color: #eef;
} }
css/main.scss
+34 -7
View File
@@ -1,8 +1,8 @@
--- ---
# Only the main Sass file needs front matter (the dashes are enough) # Liquid Docs Main Styles
--- ---
@charset "utf-8";
@charset "utf-8";
// Our variables // Our variables
@@ -10,20 +10,26 @@ $base-font-family: Helvetica, Arial, sans-serif;
$base-font-size: 16px; $base-font-size: 16px;
$small-font-size: $base-font-size * 0.875; $small-font-size: $base-font-size * 0.875;
$base-line-height: 1.5; $base-line-height: 1.5;
$spacing-unit: 40px;
$spacing-unit: 30px; // Liquid Docs Blues. 1 --> 5, lightest --> darkest.
$text-color: #111; $color-blue-1: #E8F8FF;
$background-color: #fdfdfd; $color-blue-2: #B4DCED;
$brand-color: #2a7ae2; $color-blue-3: #91C9E8;
$color-blue-4: #67B8DE;
$color-blue-5: #3399CC;
$color-white: #fff;
$color-slate: #5E5E5E;
/*
$grey-color: #828282; $grey-color: #828282;
$grey-color-light: lighten($grey-color, 40%); $grey-color-light: lighten($grey-color, 40%);
$grey-color-dark: darken($grey-color, 25%); $grey-color-dark: darken($grey-color, 25%);
*/
// Width of the content area // Width of the content area
$content-width: 800px; $content-width: 800px;
$on-palm: 600px; $on-palm: 600px;
$on-laptop: 800px; $on-laptop: 800px;
@@ -47,3 +53,24 @@ $on-laptop: 800px;
; ;
/***** Layout Styles ******/
* {
box-sizing: border-box;
}
body {
display: flex;
}
.sidebar {
background: $color-blue-5;
flex: 0 1 250px;
height: 100vh;
padding: $spacing-unit;
}
.content {
}