m/blog
1
0
Fork 0
mirror of https://github.com/kremalicious/blog.git synced 2024-11-14 09:05:17 +01:00
Code

topbar elements rewrite

Browse Source
This commit is contained in:
Matthias Kretschmann 2013-12-01 00:47:47 +01:00
parent abf886b104
commit 30eb90866c
10 changed files with 216 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
_src/_includes/header.html
View File

@ -1,18 +1,13 @@
<div class="topbar">
<div class="topbar container">
<div class="row">
<header role="banner" class="banner">
<h1 class="banner-title">
<a class="banner-logo" class="hide-text" href="/">kremalicious</a>
<a class="banner-logo" href="/">kremalicious</a>
</h1>
</header>
<section class="site-search">
<a class="search-btn" href="#"><i class="icon-search"></i></a>
<input type="search" class="input-search search-field" placeholder="Search everything">
<div class="search-results nav-popover"></div>
</section>
<nav role="navigation" class="nav-main">
<a class="menu-btn" href="#"><i class="icon-arrow-down"></i></a>
<div class="nav-popover hide">
@ -24,4 +19,14 @@
</div>
</nav>
<section class="site-search">
<a class="search-btn" href="#"><i class="icon-search"></i></a>
<div class="search-area">
<input type="search" class="input-search search-field" placeholder="Search everything">
<a class="search-close close" href="#">x</a>
<div class="search-results nav-popover"></div>
</div>
</section>
</div>
</div>

6
_src/_plugins/picture_tag.rb
View File

@ -139,9 +139,9 @@ module Jekyll
end
# Generate resized images
instance.each { |key, source|
instance[key][:generated_src] = generate_image(source, site.source, site.dest, settings['source'], settings['output'])
}
# instance.each { |key, source|
# instance[key][:generated_src] = generate_image(source, site.source, site.dest, settings['source'], settings['output'])
# }
# Construct and return tag
if settings['markup'] == 'picturefill'

BIN
_src/assets/img/logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.7 KiB

After

Width:  |  Height:  |  Size: 11 KiB

BIN
_src/assets/img/logo@2x.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.8 KiB

After

Width:  |  Height:  |  Size: 26 KiB

BIN
_src/assets/img/logo@3x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

76
_src/assets/js/app.js
View File

@ -29,17 +29,87 @@ $(window).load( AfterLoad = function() {
var siteNavigation = {
siteSearch: function() {
$('.search-field').simpleJekyllSearch({
var $searchlink = $('.search-btn'),
$searchpop = $('.search-area'),
$searchfield = $('.search-field'),
$searchresults = $('.search-results'),
$navpop = $('.nav-main .nav-popover');
// init jekyll search
$searchfield.simpleJekyllSearch({
searchResults : '.search-results',
searchResultsTitle : '',
template : '<a class="nav-link" href="{url}" title="{title}">{title}</a>',
});
$searchlink.click(function(e){
e.preventDefault();
// show search
$searchpop.addClass('ready');
$searchfield.focus();
$searchresults.removeClass('hide');
// hide menu too just in case
if ( $navpop.is(':visible') ) {
$navpop.addClass('hide');
}
// bind the hide controls
$(document).bind('click.hidethepop', function() {
$searchpop.removeClass('ready');
$searchresults.addClass('hide');
// unbind the hide controls
$(document).unbind('click.hidethepop');
});
// dont close thepop when you click on thepop
$searchpop.click(function(e) {
e.stopPropagation();
});
// and dont close thepop now
e.stopPropagation();
});
$('.search-close').click(function(e){
e.preventDefault();
// hide search area
$searchpop.removeClass('ready');
$searchresults.addClass('hide');
// empty search field
$searchfield.val('').blur();
});
},
siteMenu: function() {
$('.menu-btn').click(function(e) {
var $thelink = $('.menu-btn'),
$thepop = $('.nav-main .nav-popover');
$thelink.click(function(e){
e.preventDefault();
$('.nav-main .nav-popover').toggleClass('show').toggleClass('hide');
// show menu
$thepop.addClass('show').removeClass('hide');
// bind the hide controls
$(document).bind("click.hidethepop", function() {
$thepop.removeClass('show').addClass('hide');
// unbind the hide controls
$(document).unbind("click.hidethepop");
});
// dont close thepop when you click on thepop
$thepop.click(function(e) {
e.stopPropagation();
});
// and dont close thepop now
e.stopPropagation();
});
},

13
_src/assets/less/mixins.less
View File

@ -8,12 +8,21 @@
display: block;
background-image: data-uri('../img/logo.png');
background-repeat: no-repeat;
background-position: center top;
background-position: left top;
width: 47px;
height: 31px;
@media @breakpoint2 {
width: 183px;
}
@media @highDPI {
background-image: url('../img/logo@2x.png');
background-size: 128px 120px;
background-size: 183px 31px;
}
@media print, (-webkit-min-device-pixel-ratio: 3), (min-resolution: 300dpi) {
background-image: url('../img/logo@3x.png');
background-size: 183px 31px;
}
}

116
_src/assets/less/navigation.less
View File

@ -2,47 +2,13 @@
// NAVIGATION
/////////////////////////////////////
//
// Topbar
//
.topbar {
.clearfix;
background: #f1f4f7;
padding: @line-height-computed/3 @line-height-computed;
}
//
// Main Navigation
//
.nav-main {
position: relative;
float: right;
width: 5%;
li { display: inline-block; }
.nav-popover {
right: 0;
top: 100%;
}
}
.nav-link {
display: block;
padding: .5em 1em;
&:hover {
background: rgba(255,255,255,.5);
}
}
.nav-popover {
position: absolute;
top: 100%;
z-index: 5; // so it's always above page content
.border-bottom-radius;
background: rgba(255,255,255,.85);
background: #f1f4f7;
box-shadow: 0 2px 7px rgba(0,0,0,.05);
}
@ -56,33 +22,77 @@
margin: 0;
}
.nav-main,
.site-search {
float: right;
}
//
// Main Navigation
//
.nav-main {
li { display: inline-block; }
.nav-popover {
top: 105%;
right: 0;
width: 50%;
}
}
.nav-link {
display: block;
padding: .5em 1em;
&:hover {
background: rgba(255,255,255,.5);
}
}
//
// Site Search
//
.site-search {
position: relative;
clear: both;
width: 80%;
float: left;
margin-right: 4%;
@media @breakpoint2 {
clear: none;
margin-right: 1%;
width: 60%;
}
// loupe icon
.search-btn {
position: absolute;
.nav-popover {
left: 0;
z-index: 2;
width: 100%;
}
}
.search-btn {
}
.search-close {
position: absolute;
right: 1em;
top: 1em;
}
.search-area {
position: absolute;
width: 100%;
left: 0;
top: -3px;
z-index: 3;
background: #f1f4f7;
// hidden by default
.translate(0, -60px);
.transition;
&.ready {
.translate(0, 0);
}
}
.search-field {
padding-left: 40px;
position: relative;
width: 90%;
width: 97%;
border: none;
.box-shadow(none);
background: transparent;
@ -96,8 +106,6 @@
}
.search-results {
left: 0;
width: 100%;
}

43
_src/assets/less/scaffolding.less
View File

@ -7,16 +7,28 @@ body {
background: @body-bg;
}
//
// Topbar
//
.topbar {
.clearfix;
background: #f1f4f7;
.row {
margin-top: @line-height-computed/2;
margin-bottom: @line-height-computed/2;
position: relative;
}
}
//
// Banner
/////////////////////////////////////
//
.banner {
float: left;
width: 15%;
min-width: 160px;
.banner-title {
width: 128px;
margin-top: .1em;
margin-bottom: 0;
// display toned down logo
@ -30,8 +42,7 @@ body {
// repeat logo
// but display hover version
.logo;
background-position: center -61px;
width: 128px;
background-position: left bottom;
// hide by default
opacity: 0;
@ -41,6 +52,26 @@ body {
}
}
//
// close button
//
a.close,
.close {
width: 16px;
height: 16px;
line-height: 12px;
font-size: 16px;
padding: 0;
.border-radius(16px);
text-align: center;
display: block;
background: @brand-grey-light;
color: #fff;
&:hover { background: @link-color-hover }
}
// Footer
/////////////////////////////////////

BIN
assets sheet.psd Normal file
View File

Binary file not shown.