Skip to content

Commit

Permalink
Merge branch 'feature/1405_better_buttons' into develop
Browse files Browse the repository at this point in the history
  • Loading branch information
kingsidharth committed May 4, 2014
2 parents 6597ac8 + 5e404b7 commit b393bdc
Show file tree
Hide file tree
Showing 10 changed files with 160 additions and 145 deletions.
1 change: 1 addition & 0 deletions app/_includes/footer.html
Expand Up @@ -11,6 +11,7 @@
<script src="/_bower_components/jquery/jquery.min.js"></script>
<script src="/_bower_components/skrollr/dist/skrollr.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="/assets/js/lib.js"></script>
<!-- endbuild -->
<!-- build:js /assets/magic.min.js -->
<script src="/assets/js/magic.js"></script>
Expand Down
6 changes: 3 additions & 3 deletions app/_includes/header.html
Expand Up @@ -21,9 +21,9 @@ <h1 id='logo'>King <strong>Sidharth</strong></h1>

{% if page.slug == 'home' %}
<p class="tagline text--center no-bottom-margin grid__item one-whole beta">
<span class="block delta">conciousness thinking itself into being</span>
<span class="highlight">Entrepreneur, Designer, Artist <span class="amp">&amp;</span> Public Speaker</span>
<span class="block delta">I thrive in <strong>Mumbai, India</strong></span></p>
<span class="delta">conciousness thinking itself into being</span>
<span class="highlight desk-block">Entrepreneur, Designer, Artist <span class="amp">&amp;</span> Public Speaker</span>
<span class="delta">from <strong>Mumbai, India</strong></span></p>
{% endif %}


Expand Down
2 changes: 1 addition & 1 deletion app/_layouts/poems.html
@@ -1,7 +1,7 @@
---
layout: default
---
<div class="poem {{page.slug}} main-body">
<div class="poem {{page.slug}} main-body grid__item one-whole">
<div class="headline_area">
<h1 class="entry-title">{{ page.title }}</h1>
<h2 class="sub-title">{{ page.subtitle }}</h2>
Expand Down
103 changes: 103 additions & 0 deletions app/assets/js/lib.js
@@ -0,0 +1,103 @@

var debug = true;
var height, width, device;
var scrollPosition;


// Debugging Message Control
var debug_stage_msg = function(message) {
if(debug) {
console.log(message);
}
}

var dsm = debug_stage_msg; // Alias


// Event Tracking Wrapper
var shoutOut = function(category, action, opt_label, opt_value) {

opt_label = opt_label || false;
opt_value = opt_value || false;

// Google Analytics Shit
_gaq.push(['_trackEvent', category, action, opt_label, opt_value]);

dsm("An event was logged");

}

/* ---------- HELPER FUNCTIONS --------- */

// CSS Wrappers
var setCSS = function(target, property, value) {
$(target).css(property, value);
return target;
}

var setWidth = function(target, value) {
setCSS(target, 'min-width', Math.round(value));
}

var setHeight = function(target, value) {
setCSS(target, 'min-height', Math.round(value));
}

// Mathematical Wrappers
var percentage = function(number, percentage, decimalPlaces) {
decimalPlaces = decimalPlaces || false;

var result = (percentage/100) * number;

if (decimalPlaces) {
return Math.floor(result * (10 * decimalPlaces)) / (10 * decimalPlaces);
} else {
return result;
}
}


/* ---------- RESPONSIVE ---------- */
// Get Device Type
var getDeviceType = function(width, height) {
if (width > 1600 && height > 1100) {
device = 'desk-wide';
}
else if (width > 1000) {
device = 'desk';
}
else if (width < 1000 && width > 481) {
device = 'portable';
}
else if (width < 481) {
device = 'palm';
}
else {
device = 'unknown';
}

return device;
}

var deviceDimensions = function() {
// Get to know the viewport
// https://stackoverflow.com/questions/1248081/get-the-browser-viewport-dimensions-with-javascript

window.width = Math.max(window.innerWidth)
window.height = Math.max(window.innerHeight)

return width, height;
}

// Classes that need viewport data to Initialize
var viewportDependentClasses = function(device) {
if(device != 'desk-wide') {
$('.full-height').css('min-height', height);
$('.half-height').css('min-height', height / 2);
} else {
setHeight('.full-height', 900);
setHeight('.half-height', 1500);
}

return false;
}
137 changes: 22 additions & 115 deletions app/assets/js/magic.js
@@ -1,100 +1,4 @@

var debug = true;
var height, width, device;
var scrollPosition;


// Debugging Message Control
var debug_stage_msg = function(message) {
if(debug) {
console.log(message);
}
}

var dsm = debug_stage_msg; // Alias


// Event Tracking Wrapper
var shoutOut = function(category, action, opt_label, opt_value) {

opt_label = opt_label || false;
opt_value = opt_value || false;

// Google Analytics Shit
_gaq.push(['_trackEvent', category, action, opt_label, opt_value]);

dsm("An event was logged");

}

// CSS Methods
var setCSS = function(target, property, value) {
$(target).css(property, value);
}

var setWidth = function(target, value) {
setCSS(target, 'min-width', Math.round(value));
}

var setHeight = function(target, value) {
setCSS(target, 'min-height', Math.round(value));
}

var percentage = function(number, percentage, decimalPlaces) {
decimalPlaces = decimalPlaces || false;

var result = (percentage/100) * number;

if (decimalPlaces) {
return Math.floor(result * (10 * decimalPlaces)) / (10 * decimalPlaces);
} else {
return result;
}
}

// Get Device Type — Responsive Querries
var getDeviceType = function(width, height) {
if (width > 1600 && height > 1100) {
device = 'desk-wide';
}
else if (width > 1000) {
device = 'desk';
}
else if (width < 1000 && width > 481) {
device = 'portable';
}
else if (width < 481) {
device = 'palm';
}
else {
device = 'unknown';
}

return device;
}

var deviceDimensions = function() {
// Get to know the viewport
// https://stackoverflow.com/questions/1248081/get-the-browser-viewport-dimensions-with-javascript

window.width = Math.max(window.innerWidth)
window.height = Math.max(window.innerHeight)

return width, height;
}

// Classes that need viewport data to Initialize
var viewportDependentClasses = function(device) {
if(device != 'desk-wide') {
$('.full-height').css('min-height', height);
$('.half-height').css('min-height', height / 2);
} else {
setHeight('.full-height', 900);
setHeight('.half-height', 1500);
}

return false; }

/* ==== HEADER STATICNESS ==== */
var stickyOffset, staticHeaderHeight;

Expand All @@ -115,14 +19,20 @@ var layout = function() {
getDeviceType(width, height);
viewportDependentClasses(device);


if(device === 'desk-wide' || device === 'desk') {
stickyHeader('#header_area');
stickyHeaderBodyOffeset();
dsm("Sticky Header Done!");
}
}

var initScripts = function() {
// Getter Scripts
layout();

// Setter Scripts
}

var skrollrData = function() {
var taglinePaddingInit = height/6;
taglinePaddingInit = [ taglinePaddingInit, percentage(taglinePaddingInit, 75), percentage(taglinePaddingInit, 50), percentage(taglinePaddingInit, 25) ];
Expand All @@ -139,23 +49,7 @@ var skrollrData = function() {
.attr('data-200', 'opacity: 0; height: 0px; padding: 0px 0px; display:! none;');
}

var postSkrollr = function() {
$('body').css('margin-top', $('#header_area').css('height'));
return document.body;
}

var initScripts = function() {
// Getter Scripts
layout();

// Setter Scripts
}

var commonScripts = function() {

skrollrData();

// skrollr functions
var skrollrInit = function() {
var s = skrollr.init({
forceHeight: false,
easing: 'easeInOutCubic',
Expand All @@ -167,8 +61,21 @@ var commonScripts = function() {
}

});
}

postSkrollr();
var postSkrollr = function() {
$('body').css('margin-top', $('#header_area').css('height'));
return document.body;
}

var commonScripts = function() {

// skrollrInit
if(device === 'desk-wide' || device === 'desk') {
skrollrData();
skrollrInit();
postSkrollr();
}

}

Expand Down
23 changes: 13 additions & 10 deletions app/index.html
Expand Up @@ -27,40 +27,43 @@

<section id="instamojo" class="grid__item one-whole">
<h2>I build <em>Instamojo</em> with crazy people</h2>
<p>Online payments was a luxury which only big companies or developers could afford. Instamojo is bringing online payments to the masses. The life changing possibilities excite me.</p>
<p>Online payments were a luxury that only big companies or developers could afford. Instamojo is bringing online payments to the masses. The life changing possibilities are exciting.</p>
<p><a href="https://www.instamojo.com?partner=team" target="_blank" class="btn">Check out <strong>Instamojo</strong></a></p>
</section><!-- #instamojo -->

<section id="writing" class="grid__item one-whole">
<h2>I <em>write</em> at:</h2>
<h2>Writings</h2>
<p>Writing is good; editing is profound. I use the writing-editing process to sort, express &amp; play-around with thoughts. I write at:</p>
<ul class="block-list">
<li><a href="http://www.64notes.com">64 Notes</a> about Entrepreneurship, life &amp; <a href="http://www.64notes.com/design/">Design</a>.</li>
<li><a href="http://anamorphic.in">Anamorphic</a> about the Books I read &amp; the Films I watch.</li>
<li>Sometimes I scramble something and call it a <a href="/poems">poem</a>.</li>
<li>Sometimes I scramble-up words to make <a href="/poems">poetry</a>.</li>
</ul>
<p><a href="/writings" class="btn">More about the <strong>writing</strong> part</a></p>
<p><a href="/writings" class="btn">See more of these <strong>writings</strong></a></p>
</section><!-- #writing -->

<section id="talks" class="grid__item one-whole">
<h2>I talk a lot.</h2>
<h2>I talk a lot</h2>
<p>A little too much. Often they invite me to talk about <strong>Entrepreneurship, Design</strong> &amp; other stuff. I've given talks at <strong>TEDx, WordCamps,</strong> Startup Saturday, Engineering Colleges, Schools, etc.</p>
<p><a class="btn" href="http://www.64notes.com/speaking">See all my <strong>talks</strong></a></p>
</section><!-- #talks -->

<section id="epilogue" class="grid__item one-whole">
<h3>... and stuff</h3>
<p>It's also been noted that I'm obsessed with The Teachings of Abraham, Pink Floyd, Lucy in the Sky with Diamonds, cribbing, shoes, <span class="amp">&amp;</span> ampersand.</p>
<p>It's also been noted that I'm obsessed with The Teachings of Abraham, Pink Floyd, Lucy in the Sky with Diamonds, shoes, <span class="amp">&amp;</span> ampersand.</p>
<p>People find it interesting that I dropped-out of college.</p>
<p>I'm often called weirdo, madly optimistic retard, that short kid, and so on. But online, I am the King.</p>
<p>I'm often called weirdo, madly optimistic retard, that cute kid, etc. But online, I am the King.</p>
</section><!-- #epilogue -->

<section id="contact" class="grid__item one-whole">
<h2>Find me here:</h2>
<ul class="nav nav--block nav--social-connect">
<ul class="nav nav--block nav--social-connect half-bottom-margin">
<li><a class="sc__tw" href="https://twitter.com/kingsidharth" onclick="shoutOut('Home Page', 'Twitter Link Clicked');">@kingsidharth</a></li>
<li><a class="sc__em btn" href="mailto:king@kingsidharth.com" onclick="shoutOut('Home Page', 'Email');">king(@)kingsidharth.com</a></li>
<li><a class="sc__gh" href="https://github.com/kingsidharth" onclick="shoutOut('Home Page', 'Github Link Clicked'">GitHub</a></li>
<li><a class="sc__fb" href="https://www.facebook.com/kingsidharth" onclick="shoutOut('Home Page', 'Facebook Link Clicked');">Facebook</a></li>
<li><a class="sc__gh" href="https://github.com/kingsidharth" onclick="shoutOut('Home Page', 'Github Link Clicked'">GitHub</a></li>
</ul>
<ul class="nav nav--block nav--social-connect">
<li><a class="sc__em btn" href="mailto:king@kingsidharth.com" onclick="shoutOut('Home Page', 'Email');">king(@)kingsidharth.com</a></li>
</ul>
</section>

Expand Down
9 changes: 5 additions & 4 deletions app/scss/_buttons.scss
Expand Up @@ -36,10 +36,10 @@

@mixin button($accent-color, $text-color, $hover-text-color, $hover-background-color) {
@include button-base;
@include border-radius(0.2em);
@include border-radius(0.35em);
@include transition(0.3s);
padding: $base-spacing-unit/2 $base-spacing-unit;
background: transparent;
background: $accent-color;
position: relative;

color: $text-color;
Expand All @@ -48,6 +48,7 @@
&:hover, &:focus {
color: $hover-text-color;
border-color: $hover-background-color;
background: $hover-background-color;
}

&:active {
Expand All @@ -66,7 +67,7 @@
}

&:hover:after, &:focus:after {
width: 100%;
//width: 100%;
}

&:active:after {
Expand All @@ -75,7 +76,7 @@
}

.button, .btn, button {
@include button($blue, $white, $blue, $white);
@include button($white, $blue, $white, $blue);
}

.button--center {
Expand Down

0 comments on commit b393bdc

Please sign in to comment.