Roughing in concise css framework
This commit is contained in:
Matthew Dillon
parent
d97572956b
commit
870184f222
10 changed files with 2693 additions and 2 deletions
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
public/
|
||||
30
config.toml
30
config.toml
|
|
@ -1,3 +1,29 @@
|
|||
baseurl = "http://replace-this-with-your-hugo-site.com/"
|
||||
baseurl = "https://akdillon.net"
|
||||
languageCode = "en-us"
|
||||
title = "My New Hugo Site"
|
||||
title = "AKDillon"
|
||||
canonifyurls = true
|
||||
SectionPagesMenu = "main"
|
||||
|
||||
[[menu.main]]
|
||||
name = "Home"
|
||||
weight = 0
|
||||
identifier = "home"
|
||||
url = "/"
|
||||
|
||||
[[menu.main]]
|
||||
name = "Audio"
|
||||
weight = 50
|
||||
identifier = "audio"
|
||||
url = "/audio/"
|
||||
|
||||
[[menu.main]]
|
||||
name = "About"
|
||||
weight = 100
|
||||
identifier = "about"
|
||||
url = "/about/"
|
||||
|
||||
[[menu.main]]
|
||||
name = "Contact"
|
||||
weight = 150
|
||||
identifier = "contact"
|
||||
url = "/contact/"
|
||||
|
|
|
|||
11
content/audio.md
Normal file
11
content/audio.md
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
+++
|
||||
date = "2015-06-20T14:45:10-08:00"
|
||||
draft = true
|
||||
title = "audio"
|
||||
|
||||
+++
|
||||
|
||||
MRD Audio
|
||||
=========
|
||||
|
||||
Words.
|
||||
1
data/meta.toml
Normal file
1
data/meta.toml
Normal file
|
|
@ -0,0 +1 @@
|
|||
currentyear = 2015
|
||||
45
layouts/index.html
Normal file
45
layouts/index.html
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="HandheldFriendly" content="True">
|
||||
|
||||
<title>{{ .Site.Title }}</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="../css/concise.min.css" />
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="starter.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="siteHeader container clearfix">
|
||||
<h1 class="logo">{{ .Site.Title }}</h1>
|
||||
|
||||
<nav class="nav">
|
||||
<ul>
|
||||
{{ range .Site.Menus.main }}
|
||||
<li><a href="{{ .URL }}">{{ .Name }}</a></li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main class="siteContent container">
|
||||
<h2>Concise Starter Template</h2>
|
||||
|
||||
<h4>
|
||||
This is a starter template for the
|
||||
<a href="http://concisecss.com">Concise CSS framework</a> that can be easily
|
||||
copied and customized for projects.
|
||||
</h4>
|
||||
</main>
|
||||
|
||||
<footer class="siteFooter container">
|
||||
<p>Copyright © {{ .Site.Data.meta.currentyear }} Danielle & Matthew Dillon</p>
|
||||
</footer>
|
||||
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
|
||||
<script src="../js/concise.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
2085
static/css/concise.css
Executable file
2085
static/css/concise.css
Executable file
File diff suppressed because it is too large
Load diff
1
static/css/concise.min.css
vendored
Executable file
1
static/css/concise.min.css
vendored
Executable file
File diff suppressed because one or more lines are too long
483
static/js/concise.js
Executable file
483
static/js/concise.js
Executable file
|
|
@ -0,0 +1,483 @@
|
|||
/**
|
||||
* # Concise.js
|
||||
* http://github.com/ConciseCSS/concise.css
|
||||
*
|
||||
*
|
||||
* Copyright 2014 Contributors
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
*/
|
||||
(function($){
|
||||
/**
|
||||
* Powers the universal dropdown selector.
|
||||
*
|
||||
* @class DropDown
|
||||
* @param {Object} el jQuery object
|
||||
*/
|
||||
function DropDown(el) {
|
||||
this.dd = el;
|
||||
this.initEvents();
|
||||
}
|
||||
|
||||
DropDown.prototype = {
|
||||
initEvents : function() {
|
||||
// Toggle .dropdown-active on click
|
||||
this.dd.on('click', function(event){
|
||||
$(this).toggleClass('dropdown-active');
|
||||
event.stopPropagation();
|
||||
});
|
||||
|
||||
// Toggle .dropdown-active on hover
|
||||
$(".dropdown-hover").mouseenter(function(event) {
|
||||
$(this).addClass("dropdown-active");
|
||||
event.stopPropagation();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Determine if responsive navigation text needs to be added.
|
||||
*
|
||||
* @method responsiveNav
|
||||
* @return {Object} naver A naver plugin instantiation
|
||||
*/
|
||||
$.fn.responsiveNav = function() {
|
||||
// Loop through each instance of responsive navigation
|
||||
this.each(function(index) {
|
||||
var labelState = $(this).hasClass( "nav-responsive-text" );
|
||||
|
||||
return $(this).naver({
|
||||
maxWidth: "768px",
|
||||
label: labelState
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Calculate object width
|
||||
*/
|
||||
$.fn.calculateWidth = function() {
|
||||
return $(this).width();
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Calculates proper widths for non-responsive websites.
|
||||
*
|
||||
* @method nonResponsive
|
||||
* @note Only necessary for non-responsive websites.
|
||||
*/
|
||||
$.fn.nonResponsive = function() {
|
||||
|
||||
// Loop through each instance of the `.non-responsive` class
|
||||
this.each(function(index) {
|
||||
if ($(this).hasClass("non-responsive")) {
|
||||
|
||||
// Get container width
|
||||
var containerWidth = $(".container").width(),
|
||||
i = 1,
|
||||
max = 24;
|
||||
|
||||
// Set pixel-based alternatives for grid styles
|
||||
// But first we need to know if our row has class `gutters`
|
||||
if($(this).hasClass("gutters")) {
|
||||
for (; i <= max; i++ ) {
|
||||
// Column width for row with gutters
|
||||
var columnWidth = ($('.column-'+i).calculateWidth()),
|
||||
gutterWidth = columnWidth * 0.02;
|
||||
|
||||
$('.gutters .column-'+i).css("width", columnWidth - gutterWidth + "px");
|
||||
}
|
||||
} else {
|
||||
for (; i <= max ; i++ ) {
|
||||
// Column width for normal row
|
||||
var columnWidth = ($('.column-'+i).calculateWidth() - 1);
|
||||
$('.column-'+i).css("width", columnWidth + "px");
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
$(function(){
|
||||
var dropdown = $('.dropdown');
|
||||
|
||||
new DropDown(dropdown);
|
||||
|
||||
$(document).click(function() {
|
||||
dropdown.removeClass('dropdown-active');
|
||||
});
|
||||
|
||||
$(".dropdown-menu").mouseleave(function() {
|
||||
dropdown.removeClass("dropdown-active");
|
||||
});
|
||||
});
|
||||
}(jQuery));
|
||||
|
||||
jQuery(document).ready(function() {
|
||||
jQuery(".nav-responsive, .nav-responsive-left, .nav-responsive-center").responsiveNav();
|
||||
jQuery("body, .row").nonResponsive();
|
||||
});
|
||||
|
||||
|
||||
/*
|
||||
* Naver v3.0.8 - 2014-05-06
|
||||
* A jQuery plugin for responsive navigation. Part of the Formstone Library.
|
||||
* http://formstone.it/naver/
|
||||
*
|
||||
* Copyright 2014 Ben Plum; MIT Licensed
|
||||
*/
|
||||
|
||||
;(function ($, window) {
|
||||
"use strict";
|
||||
|
||||
/**
|
||||
* @options
|
||||
* @param customClass [string] <''> "Class applied to instance"
|
||||
* @param label [boolean] <true> "Display handle width label"
|
||||
* @param labels.closed [string] <'Navigation'> "Closed state text"
|
||||
* @param labels.open [string] <'Close'> "Open state text"
|
||||
* @param maxWidth [string] <'980px'> "Width at which to auto-disable plugin"
|
||||
*/
|
||||
var options = {
|
||||
customClass: "",
|
||||
label: true,
|
||||
labels: {
|
||||
closed: "Navigation",
|
||||
open: "Close"
|
||||
},
|
||||
maxWidth: "980px"
|
||||
};
|
||||
|
||||
/**
|
||||
* @events
|
||||
* @event open.naver "Navigation opened"
|
||||
* @event close.naver "Navigation closed"
|
||||
*/
|
||||
|
||||
var pub = {
|
||||
|
||||
/**
|
||||
* @method
|
||||
* @name close
|
||||
* @description Closes instance
|
||||
* @example $(".target").naver("close");
|
||||
*/
|
||||
close: function(e) {
|
||||
return $(this).each(function(i, nav) {
|
||||
var data = $(nav).data("naver");
|
||||
|
||||
if (data && data.$nav.hasClass("enabled")) {
|
||||
data.$wrapper.css({
|
||||
height: 0
|
||||
});
|
||||
if (data.label) {
|
||||
data.$handle.html(data.labels.closed);
|
||||
}
|
||||
data.$nav.removeClass("open")
|
||||
.trigger("close.naver");
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* @method
|
||||
* @name defaults
|
||||
* @description Sets default plugin options
|
||||
* @param opts [object] <{}> "Options object"
|
||||
* @example $.naver("defaults", opts);
|
||||
*/
|
||||
defaults: function(opts) {
|
||||
options = $.extend(true, options, opts || {});
|
||||
return $(this);
|
||||
},
|
||||
|
||||
/**
|
||||
* @method
|
||||
* @name disable
|
||||
* @description Disables instance
|
||||
* @example $(".target").naver("disable");
|
||||
*/
|
||||
disable: function() {
|
||||
return $(this).each(function(i, nav) {
|
||||
var data = $(nav).data("naver");
|
||||
|
||||
if (data) {
|
||||
data.$nav.removeClass("enabled");
|
||||
data.$wrapper.css({ height: "" });
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* @method
|
||||
* @name destroy
|
||||
* @description Destroys instance
|
||||
* @example $(".target").naver("destroy");
|
||||
*/
|
||||
destroy: function() {
|
||||
return $(this).each(function(i, nav) {
|
||||
var data = $(nav).data("naver");
|
||||
|
||||
if (data) {
|
||||
data.$handle.remove();
|
||||
data.$container.contents()
|
||||
.unwrap()
|
||||
.unwrap();
|
||||
|
||||
data.$nav.removeClass("enabled disabled naver " + data.customClass)
|
||||
.off(".naver")
|
||||
.removeData("naver");
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* @method
|
||||
* @name enable
|
||||
* @description Enables instance
|
||||
* @example $(".target").naver("enable");
|
||||
*/
|
||||
enable: function() {
|
||||
return $(this).each(function(i, nav) {
|
||||
var data = $(nav).data("naver");
|
||||
|
||||
if (data) {
|
||||
data.$nav.addClass("enabled");
|
||||
pub.close.apply(data.$nav);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* @method
|
||||
* @name open
|
||||
* @description Opens instance
|
||||
* @example $(".target").naver("open");
|
||||
*/
|
||||
open: function() {
|
||||
return $(this).each(function(i, nav) {
|
||||
var data = $(nav).data("naver");
|
||||
|
||||
if (data && data.$nav.hasClass("enabled")) {
|
||||
data.$wrapper.css({
|
||||
height: data.$container.outerHeight(true)
|
||||
});
|
||||
if (data.label) {
|
||||
data.$handle.html(data.labels.open);
|
||||
}
|
||||
data.$nav.addClass("open")
|
||||
.trigger("open.naver");
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @method private
|
||||
* @name _init
|
||||
* @description Initializes plugin
|
||||
* @param opts [object] "Initialization options"
|
||||
*/
|
||||
function _init(opts) {
|
||||
// Settings
|
||||
opts = $.extend(true, {}, options, opts);
|
||||
|
||||
// Apply to each element
|
||||
var $items = $(this);
|
||||
for (var i = 0, count = $items.length; i < count; i++) {
|
||||
_build($items.eq(i), opts);
|
||||
}
|
||||
return $items;
|
||||
}
|
||||
|
||||
/**
|
||||
* @method private
|
||||
* @name _build
|
||||
* @description Builds each instance
|
||||
* @param $nav [jQuery object] "Target jQuery object"
|
||||
* @param opts [object] <{}> "Options object"
|
||||
*/
|
||||
function _build($nav, opts) {
|
||||
if (!$nav.data("naver")) {
|
||||
// Extend Options
|
||||
opts = $.extend(true, {}, opts, $nav.data("naver-options"));
|
||||
|
||||
var $handle = $nav.find(".naver-handle").length ? $nav.find(".naver-handle").detach() : $('<span class="naver-handle"></span>');
|
||||
|
||||
$nav.addClass("naver " + opts.customClass)
|
||||
.wrapInner('<div class="naver-container"></div>')
|
||||
.wrapInner('<div class="naver-wrapper"></div>')
|
||||
.prepend($handle);
|
||||
|
||||
var data = $.extend(true, {
|
||||
$nav: $nav,
|
||||
$container: $nav.find(".naver-container"),
|
||||
$wrapper: $nav.find(".naver-wrapper"),
|
||||
$handle: $nav.find(".naver-handle")
|
||||
}, opts);
|
||||
|
||||
data.$handle.text((opts.label) ? opts.labels.closed : '');
|
||||
data.$nav.on("touchstart.naver", ".naver-handle", data, _onTouchStart)
|
||||
.on("click.naver", ".naver-handle", data, _onClick)
|
||||
.data("naver", data);
|
||||
|
||||
|
||||
// Navtive MQ Support
|
||||
if (window.matchMedia !== undefined) {
|
||||
data.mediaQuery = window.matchMedia("(max-width:" + (data.maxWidth === Infinity ? "100000px" : data.maxWidth) + ")");
|
||||
// Make sure we stay in context
|
||||
data.mediaQuery.addListener(function() {
|
||||
_onRespond.apply(data.$nav);
|
||||
});
|
||||
_onRespond.apply(data.$nav);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @method private
|
||||
* @name _onTouchStart
|
||||
* @description Handles touchstart to selected item
|
||||
* @param e [object] "Event data"
|
||||
*/
|
||||
function _onTouchStart(e) {
|
||||
e.stopPropagation();
|
||||
|
||||
var data = e.data,
|
||||
oe = e.originalEvent;
|
||||
|
||||
_clearTimer(data.timer);
|
||||
|
||||
data.touchStartX = oe.touches[0].clientX;
|
||||
data.touchStartY = oe.touches[0].clientY;
|
||||
|
||||
data.$nav.on("touchmove.naver", ".naver-handle", data, _onTouchMove)
|
||||
.on("touchend.naver", ".naver-handle", data, _onTouchEnd);
|
||||
}
|
||||
|
||||
/**
|
||||
* @method private
|
||||
* @name _onTouchMove
|
||||
* @description Handles touchmove to selected item
|
||||
* @param e [object] "Event data"
|
||||
*/
|
||||
function _onTouchMove(e) {
|
||||
var data = e.data,
|
||||
oe = e.originalEvent;
|
||||
|
||||
if (Math.abs(oe.touches[0].clientX - data.touchStartX) > 10 || Math.abs(oe.touches[0].clientY - data.touchStartY) > 10) {
|
||||
data.$nav.off("touchmove.naver touchend.naver");
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @method private
|
||||
* @name _onTouchEnd
|
||||
* @description Handles touchend to selected item
|
||||
* @param e [object] "Event data"
|
||||
*/
|
||||
function _onTouchEnd(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
var data = e.data;
|
||||
|
||||
data.$nav.off("touchmove.naver touchend.naver click.naver");
|
||||
|
||||
// prevent ghosty clicks
|
||||
data.timer = _startTimer(data.timer, 1000, function() {
|
||||
data.$nav.on("click.naver", ".naver-handle", data, _onClick);
|
||||
});
|
||||
|
||||
_onClick(e);
|
||||
}
|
||||
|
||||
/**
|
||||
* @method private
|
||||
* @name _onClick
|
||||
* @description Handles click nav click
|
||||
* @param e [object] "Event data"
|
||||
*/
|
||||
function _onClick(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
var $target = $(e.currentTarget),
|
||||
data = e.data;
|
||||
|
||||
// Close other open instances
|
||||
$(".naver").not(data.$nav)
|
||||
.naver("close");
|
||||
|
||||
if (data.$nav.hasClass("open")) {
|
||||
pub.close.apply(data.$nav);
|
||||
} else {
|
||||
pub.open.apply(data.$nav);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @method private
|
||||
* @name _onRespond
|
||||
* @description Handles media query match change
|
||||
*/
|
||||
function _onRespond() {
|
||||
var data = $(this).data("naver");
|
||||
|
||||
if (data.mediaQuery.matches) {
|
||||
pub.enable.apply(data.$nav);
|
||||
} else {
|
||||
pub.disable.apply(data.$nav);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @method private
|
||||
* @name _startTimer
|
||||
* @description Starts an internal timer
|
||||
* @param timer [int] "Timer ID"
|
||||
* @param time [int] "Time until execution"
|
||||
* @param callback [int] "Function to execute"
|
||||
* @param interval [boolean] "Flag for recurring interval"
|
||||
*/
|
||||
function _startTimer(timer, time, func, interval) {
|
||||
_clearTimer(timer, interval);
|
||||
if (interval === true) {
|
||||
return setInterval(func, time);
|
||||
} else {
|
||||
return setTimeout(func, time);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @method private
|
||||
* @name _clearTimer
|
||||
* @description Clears an internal timer
|
||||
* @param timer [int] "Timer ID"
|
||||
*/
|
||||
function _clearTimer(timer) {
|
||||
if (timer !== null) {
|
||||
clearInterval(timer);
|
||||
timer = null;
|
||||
}
|
||||
}
|
||||
|
||||
$.fn.naver = function(method) {
|
||||
if (pub[method]) {
|
||||
return pub[method].apply(this, Array.prototype.slice.call(arguments, 1));
|
||||
} else if (typeof method === 'object' || !method) {
|
||||
return _init.apply(this, arguments);
|
||||
}
|
||||
return this;
|
||||
};
|
||||
|
||||
$.naver = function(method) {
|
||||
if (method === "defaults") {
|
||||
pub.defaults.apply(this, Array.prototype.slice.call(arguments, 1));
|
||||
}
|
||||
};
|
||||
})(jQuery, window);
|
||||
1
static/js/concise.min.js
vendored
Executable file
1
static/js/concise.min.js
vendored
Executable file
File diff suppressed because one or more lines are too long
37
static/starter.css
Normal file
37
static/starter.css
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
.siteHeader {
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 22px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@media (min-width: 48em) {
|
||||
.logo {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 48em) {
|
||||
.nav {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
.nav li {
|
||||
display: inline;
|
||||
line-height: 3.5;
|
||||
margin-left: 25px;
|
||||
}
|
||||
.nav li:first-of-type {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.siteContent {
|
||||
padding: 50px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.siteFooter {
|
||||
border-top: 1px solid #eee;
|
||||
padding-top: 15px;
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue