mirror of
https://github.com/kremalicious/blog.git
synced 2024-12-31 17:17:46 +01:00
topbar elements rewrite
This commit is contained in:
parent
abf886b104
commit
30eb90866c
@ -1,27 +1,32 @@
|
||||
|
||||
<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>
|
||||
</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>
|
||||
<header role="banner" class="banner">
|
||||
<h1 class="banner-title">
|
||||
<a class="banner-logo" href="/">kremalicious</a>
|
||||
</h1>
|
||||
</header>
|
||||
|
||||
<nav role="navigation" class="nav-main">
|
||||
<a class="menu-btn" href="#"><i class="icon-arrow-down"></i></a>
|
||||
<div class="nav-popover hide">
|
||||
<a class="nav-link" href="/goodies/">goodies</a>
|
||||
<a class="nav-link" href="/photos/">photos</a>
|
||||
<a class="nav-link" href="/personal/">personal</a>
|
||||
<a class="nav-link" href="/design/">design</a>
|
||||
<a class="nav-link" href="/photography/">photography</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav role="navigation" class="nav-main">
|
||||
<a class="menu-btn" href="#"><i class="icon-arrow-down"></i></a>
|
||||
<div class="nav-popover hide">
|
||||
<a class="nav-link" href="/goodies/">goodies</a>
|
||||
<a class="nav-link" href="/photos/">photos</a>
|
||||
<a class="nav-link" href="/personal/">personal</a>
|
||||
<a class="nav-link" href="/design/">design</a>
|
||||
<a class="nav-link" href="/photography/">photography</a>
|
||||
</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>
|
||||
@ -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'
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.7 KiB After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.8 KiB After Width: | Height: | Size: 26 KiB |
BIN
_src/assets/img/logo@3x.png
Normal file
BIN
_src/assets/img/logo@3x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
@ -29,18 +29,88 @@ $(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) {
|
||||
e.preventDefault();
|
||||
$('.nav-main .nav-popover').toggleClass('show').toggleClass('hide');
|
||||
});
|
||||
var $thelink = $('.menu-btn'),
|
||||
$thepop = $('.nav-main .nav-popover');
|
||||
|
||||
$thelink.click(function(e){
|
||||
e.preventDefault();
|
||||
|
||||
// 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();
|
||||
});
|
||||
},
|
||||
|
||||
init: function(){
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -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
BIN
assets sheet.psd
Normal file
Binary file not shown.
Loading…
Reference in New Issue
Block a user