kemko/liquid
1
0
Fork 0
mirror of https://github.com/kemko/liquid.git synced 2026-01-01 15:55:40 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

Added mobile layout

Browse Source
This commit is contained in:
Tetsuro
2016-03-18 20:29:35 -04:00
parent 3a4bc8a153
commit 7aa82e8547
8 changed files with 132 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
_includes/sidebar.html
View File

@@ -1,8 +1,8 @@
<div class="sidebar">
<div class="sidebar--logo">
<div class="sidebar__logo">
<a href="{{ "/" | prepend: site.baseurl }}">Liquid</a>
</div>
<nav class="sidebar--nav"> {% assign sections = "basics, tags, filters" | split: ", " %}
<nav class="sidebar__nav"> {% assign sections = "basics, tags, filters" | split: ", " %}
{% for section in sections %}
<h3 class="section__header">{{ section | capitalize }}</h3>

8
_layouts/default.html
View File

@@ -13,17 +13,23 @@
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
<link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
{% include sidebar.html %}
<div class="content__overlay"></div>
<div class="content__area">
<div class="content">
<button class="menu-button">
<i class="icon fa fa-2x fa-bars" aria-hidden="true"></i>
<span>Menu</span>
</button>
<h1>{{ page.title }}</h1>
{{ content }}
</div>
</div>
</body>
<script src="{{ '/js/script.js' | prepend: site.baseurl }}"></script>
</html>

17
_sass/modules/_buttons.scss
View File

@@ -32,3 +32,20 @@
vertical-align: middle;
margin-right: $spacing-unit / 4;
}
/*============================================================================
Menu button
==============================================================================*/
.menu-button {
display: inline-block;
background: none;
border: none;
margin: $spacing-unit / 2 0 $spacing-unit / 2 ($spacing-unit / 4 * -1);
padding: $spacing-unit / 4;
color: $color-slate;
@include tablet-and-up {
display: none;
}
}

45
_sass/modules/_layout.scss
View File

@@ -3,13 +3,39 @@ $sidebar-width: 250px;
$logo-height: 130px;
$wrapper-width: 800px;
body {
// display: flex;
// flex-direction: column;
// @include tablet-and-up {
// flex-direction: row;
// }
}
/*============================================================================
Content Area
==============================================================================*/
.content__area {
padding: $spacing-unit $spacing-unit $spacing-unit ($spacing-unit + $sidebar-width);
width: 100%;
@include tablet-and-up {
padding: $spacing-unit $spacing-unit $spacing-unit ($spacing-unit + $sidebar-width);
}
}
.content__overlay {
background: rgba(0, 0, 0, 0.4);
width: 100%;
height: 100vh;
position: fixed;
z-index: 1;
display: none;
}
.content__overlay--is-active {
display: block;
}
.content {
@@ -26,11 +52,22 @@ $wrapper-width: 800px;
.sidebar {
background: $color-blue-5;
width: $sidebar-width;
height: 100vh;
position: fixed;
transform: translateX($sidebar-width * -1);
transition: all 0.15s ease;
z-index: 2;
height: 100vh;
@include tablet-and-up {
transform: translateX(0);
}
}
.sidebar--logo {
.sidebar--is-visible {
transform: translateX(0);
}
.sidebar__logo {
font-size: $base-font-size * 2;
font-weight: bold;
text-align: center;
@@ -49,7 +86,7 @@ $wrapper-width: 800px;
}
}
.sidebar--nav {
.sidebar__nav {
padding: $spacing-unit $spacing-unit ($spacing-unit + $logo-height); // Add a bit more padding at the bottom for consistency.
font-weight: bold;
max-height: 100%;

9
_sass/partials/_helpers.scss
View File

@@ -5,3 +5,12 @@
clear: both;
}
}
.visually-hidden {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}

43
_sass/partials/_media-queries.scss Normal file
View File

@@ -0,0 +1,43 @@
/*============================================================================
Media queries
==============================================================================*/
$phone-width: 321px;
$tablet-width: 768px;
$desktop-width: 1024px;
@mixin phone {
@media (max-width: #{$phone-width}) {
@content;
}
}
@mixin phone-and-up {
@media (min-width: #{$phone-width}) {
@content;
}
}
@mixin phone-to-tablet {
@media (min-width: #{$phone-width}) and (max-width: #{$tablet-width - 1px}) {
@content;
}
}
@mixin tablet {
@media (min-width: #{$tablet-width}) and (max-width: #{$desktop-width - 1px}) {
@content;
}
}
@mixin tablet-and-up {
@media (min-width: #{$tablet-width}) {
@content;
}
}
@mixin desktop {
@media (min-width: #{$desktop-width}) {
@content;
}
}

2
css/main.scss
View File

@@ -1,6 +1,5 @@
---
layout: null
# hello tets
---
@charset "utf-8";
@@ -8,6 +7,7 @@ layout: null
@import "partials/defaults";
@import "partials/colors";
@import "partials/helpers";
@import "partials/media-queries";
@import "modules/base";
@import "modules/layout";

12
js/script.js Normal file
View File

@@ -0,0 +1,12 @@
$menuButton = $(".menu-button");
$sidebar = $(".sidebar");
$contentOverlay = $(".content__overlay");
$(document).ready(function() {
$menuButton.add($contentOverlay).on("click", function() {
$sidebar.toggleClass("sidebar--is-visible");
$contentOverlay.toggleClass("content__overlay--is-active");
});
})