mirror of
https://github.com/opelly27/cweb.git
synced 2026-05-20 05:07:41 +00:00
switched theme
This commit is contained in:
Cameron Squire
Vendored
BIN
Binary file not shown.
@@ -0,0 +1,73 @@
|
||||
/*
|
||||
Phantom by HTML5 UP
|
||||
html5up.net | @ajlkn
|
||||
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
*/
|
||||
|
||||
/* Form */
|
||||
|
||||
form .field {
|
||||
float: none !important;
|
||||
width: 100% !important;
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
/* Button */
|
||||
|
||||
input[type="submit"],
|
||||
input[type="reset"],
|
||||
input[type="button"],
|
||||
button,
|
||||
.button {
|
||||
border: solid 2px #585858 !important;
|
||||
}
|
||||
|
||||
input[type="submit"]:hover,
|
||||
input[type="reset"]:hover,
|
||||
input[type="button"]:hover,
|
||||
button:hover,
|
||||
.button:hover {
|
||||
border-color: #f2849e !important;
|
||||
}
|
||||
|
||||
input[type="submit"].special,
|
||||
input[type="reset"].special,
|
||||
input[type="button"].special,
|
||||
button.special,
|
||||
.button.special {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
/* Tiles */
|
||||
|
||||
.tiles article > .image:before, .tiles article > .image:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
|
||||
#header .logo .symbol {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#header nav ul li a[href="#menu"] {
|
||||
text-indent: 0;
|
||||
width: auto;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
#header nav ul li a[href="#menu"]:before, #header nav ul li a[href="#menu"]:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
|
||||
#footer > .inner section {
|
||||
width: 50%;
|
||||
margin-left: 3em;
|
||||
}
|
||||
|
||||
#footer > .inner section:first-child {
|
||||
margin-left: 0;
|
||||
width: 40%;
|
||||
}
|
||||
+23
-18
@@ -1,35 +1,40 @@
|
||||
/*
|
||||
Dimension by HTML5 UP
|
||||
Phantom by HTML5 UP
|
||||
html5up.net | @ajlkn
|
||||
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
*/
|
||||
|
||||
/* BG */
|
||||
/* Tiles */
|
||||
|
||||
#bg:before {
|
||||
background: rgba(19, 21, 25, 0.5);
|
||||
.tiles:after {
|
||||
content: '';
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
|
||||
#header .logo {
|
||||
margin: 0 auto;
|
||||
.tiles article {
|
||||
float: left;
|
||||
}
|
||||
|
||||
#header .content {
|
||||
display: inline-block;
|
||||
.tiles article > a {
|
||||
padding-top: 50%;
|
||||
margin-top: -1.75em;
|
||||
}
|
||||
|
||||
#header nav ul {
|
||||
display: inline-block;
|
||||
body:not(.is-touch) .tiles article:hover > .image {
|
||||
-moz-transform: none;
|
||||
-webkit-transform: none;
|
||||
-ms-transform: none;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
#header nav ul li {
|
||||
display: inline-block;
|
||||
/* Footer */
|
||||
|
||||
#footer > .inner section {
|
||||
float: left;
|
||||
}
|
||||
|
||||
/* Main */
|
||||
|
||||
#main article {
|
||||
margin: 0 auto;
|
||||
#footer > .inner .copyright {
|
||||
clear: both;
|
||||
padding-top: 4em;
|
||||
}
|
||||
+2894
-1132
File diff suppressed because it is too large
Load Diff
@@ -1,12 +0,0 @@
|
||||
/*
|
||||
Dimension by HTML5 UP
|
||||
html5up.net | @ajlkn
|
||||
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
*/
|
||||
|
||||
/* Main */
|
||||
|
||||
#main article {
|
||||
opacity: 1;
|
||||
margin: 4rem 0 0 0;
|
||||
}
|
||||
Vendored
+8
@@ -0,0 +1,8 @@
|
||||
/*
|
||||
HTML5 Shiv v3.6.2 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed
|
||||
*/
|
||||
(function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag();
|
||||
a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/\w+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x<style>article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}</style>";
|
||||
c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="<xyz></xyz>";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode||
|
||||
"undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup main mark meter nav output progress section summary time video",version:"3.6.2",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);if(g)return a.createDocumentFragment();
|
||||
for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;d<h;d++)c.createElement(e[d]);return c}};l.html5=e;q(f)})(this,document);
|
||||
Vendored
+6
@@ -0,0 +1,6 @@
|
||||
/*! Respond.js v1.4.2: min/max-width media query polyfill
|
||||
* Copyright 2014 Scott Jehl
|
||||
* Licensed under MIT
|
||||
* http://j.mp/respondjs */
|
||||
|
||||
!function(a){"use strict";a.matchMedia=a.matchMedia||function(a){var b,c=a.documentElement,d=c.firstElementChild||c.firstChild,e=a.createElement("body"),f=a.createElement("div");return f.id="mq-test-1",f.style.cssText="position:absolute;top:-100em",e.style.background="none",e.appendChild(f),function(a){return f.innerHTML='­<style media="'+a+'"> #mq-test-1 { width: 42px; }</style>',c.insertBefore(e,d),b=42===f.offsetWidth,c.removeChild(e),{matches:b,media:a}}}(a.document)}(this),function(a){"use strict";function b(){v(!0)}var c={};a.respond=c,c.update=function(){};var d=[],e=function(){var b=!1;try{b=new a.XMLHttpRequest}catch(c){b=new a.ActiveXObject("Microsoft.XMLHTTP")}return function(){return b}}(),f=function(a,b){var c=e();c&&(c.open("GET",a,!0),c.onreadystatechange=function(){4!==c.readyState||200!==c.status&&304!==c.status||b(c.responseText)},4!==c.readyState&&c.send(null))},g=function(a){return a.replace(c.regex.minmaxwh,"").match(c.regex.other)};if(c.ajax=f,c.queue=d,c.unsupportedmq=g,c.regex={media:/@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi,keyframes:/@(?:\-(?:o|moz|webkit)\-)?keyframes[^\{]+\{(?:[^\{\}]*\{[^\}\{]*\})+[^\}]*\}/gi,comments:/\/\*[^*]*\*+([^/][^*]*\*+)*\//gi,urls:/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,findStyles:/@media *([^\{]+)\{([\S\s]+?)$/,only:/(only\s+)?([a-zA-Z]+)\s?/,minw:/\(\s*min\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/,maxw:/\(\s*max\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/,minmaxwh:/\(\s*m(in|ax)\-(height|width)\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/gi,other:/\([^\)]*\)/g},c.mediaQueriesSupported=a.matchMedia&&null!==a.matchMedia("only all")&&a.matchMedia("only all").matches,!c.mediaQueriesSupported){var h,i,j,k=a.document,l=k.documentElement,m=[],n=[],o=[],p={},q=30,r=k.getElementsByTagName("head")[0]||l,s=k.getElementsByTagName("base")[0],t=r.getElementsByTagName("link"),u=function(){var a,b=k.createElement("div"),c=k.body,d=l.style.fontSize,e=c&&c.style.fontSize,f=!1;return b.style.cssText="position:absolute;font-size:1em;width:1em",c||(c=f=k.createElement("body"),c.style.background="none"),l.style.fontSize="100%",c.style.fontSize="100%",c.appendChild(b),f&&l.insertBefore(c,l.firstChild),a=b.offsetWidth,f?l.removeChild(c):c.removeChild(b),l.style.fontSize=d,e&&(c.style.fontSize=e),a=j=parseFloat(a)},v=function(b){var c="clientWidth",d=l[c],e="CSS1Compat"===k.compatMode&&d||k.body[c]||d,f={},g=t[t.length-1],p=(new Date).getTime();if(b&&h&&q>p-h)return a.clearTimeout(i),i=a.setTimeout(v,q),void 0;h=p;for(var s in m)if(m.hasOwnProperty(s)){var w=m[s],x=w.minw,y=w.maxw,z=null===x,A=null===y,B="em";x&&(x=parseFloat(x)*(x.indexOf(B)>-1?j||u():1)),y&&(y=parseFloat(y)*(y.indexOf(B)>-1?j||u():1)),w.hasquery&&(z&&A||!(z||e>=x)||!(A||y>=e))||(f[w.media]||(f[w.media]=[]),f[w.media].push(n[w.rules]))}for(var C in o)o.hasOwnProperty(C)&&o[C]&&o[C].parentNode===r&&r.removeChild(o[C]);o.length=0;for(var D in f)if(f.hasOwnProperty(D)){var E=k.createElement("style"),F=f[D].join("\n");E.type="text/css",E.media=D,r.insertBefore(E,g.nextSibling),E.styleSheet?E.styleSheet.cssText=F:E.appendChild(k.createTextNode(F)),o.push(E)}},w=function(a,b,d){var e=a.replace(c.regex.comments,"").replace(c.regex.keyframes,"").match(c.regex.media),f=e&&e.length||0;b=b.substring(0,b.lastIndexOf("/"));var h=function(a){return a.replace(c.regex.urls,"$1"+b+"$2$3")},i=!f&&d;b.length&&(b+="/"),i&&(f=1);for(var j=0;f>j;j++){var k,l,o,p;i?(k=d,n.push(h(a))):(k=e[j].match(c.regex.findStyles)&&RegExp.$1,n.push(RegExp.$2&&h(RegExp.$2))),o=k.split(","),p=o.length;for(var q=0;p>q;q++)l=o[q],g(l)||m.push({media:l.split("(")[0].match(c.regex.only)&&RegExp.$2||"all",rules:n.length-1,hasquery:l.indexOf("(")>-1,minw:l.match(c.regex.minw)&&parseFloat(RegExp.$1)+(RegExp.$2||""),maxw:l.match(c.regex.maxw)&&parseFloat(RegExp.$1)+(RegExp.$2||"")})}v()},x=function(){if(d.length){var b=d.shift();f(b.href,function(c){w(c,b.href,b.media),p[b.href]=!0,a.setTimeout(function(){x()},0)})}},y=function(){for(var b=0;b<t.length;b++){var c=t[b],e=c.href,f=c.media,g=c.rel&&"stylesheet"===c.rel.toLowerCase();e&&g&&!p[e]&&(c.styleSheet&&c.styleSheet.rawCssText?(w(c.styleSheet.rawCssText,e,f),p[e]=!0):(!/^([a-zA-Z:]*\/\/)/.test(e)&&!s||e.replace(RegExp.$1,"").split("/")[0]===a.location.host)&&("//"===e.substring(0,2)&&(e=a.location.protocol+e),d.push({href:e,media:f})))}x()};y(),c.update=y,c.getEmValue=u,a.addEventListener?a.addEventListener("resize",b,!1):a.attachEvent&&a.attachEvent("onresize",b)}}(this);
|
||||
+141
-350
@@ -1,5 +1,5 @@
|
||||
/*
|
||||
Dimension by HTML5 UP
|
||||
Phantom by HTML5 UP
|
||||
html5up.net | @ajlkn
|
||||
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
*/
|
||||
@@ -11,19 +11,13 @@
|
||||
large: '(max-width: 1280px)',
|
||||
medium: '(max-width: 980px)',
|
||||
small: '(max-width: 736px)',
|
||||
xsmall: '(max-width: 480px)',
|
||||
xxsmall: '(max-width: 360px)'
|
||||
xsmall: '(max-width: 480px)'
|
||||
});
|
||||
|
||||
$(function() {
|
||||
|
||||
var $window = $(window),
|
||||
$body = $('body'),
|
||||
$wrapper = $('#wrapper'),
|
||||
$header = $('#header'),
|
||||
$footer = $('#footer'),
|
||||
$main = $('#main'),
|
||||
$main_articles = $main.children('article');
|
||||
$body = $('body');
|
||||
|
||||
// Disable animations/transitions until the page has loaded.
|
||||
$body.addClass('is-loading');
|
||||
@@ -34,374 +28,171 @@
|
||||
}, 100);
|
||||
});
|
||||
|
||||
// Fix: Placeholder polyfill.
|
||||
$('form').placeholder();
|
||||
// Touch?
|
||||
if (skel.vars.mobile)
|
||||
$body.addClass('is-touch');
|
||||
|
||||
// Fix: Flexbox min-height bug on IE.
|
||||
if (skel.vars.IEVersion < 12) {
|
||||
// Forms.
|
||||
var $form = $('form');
|
||||
|
||||
var flexboxFixTimeoutId;
|
||||
// Auto-resizing textareas.
|
||||
$form.find('textarea').each(function() {
|
||||
|
||||
$window.on('resize.flexbox-fix', function() {
|
||||
var $this = $(this),
|
||||
$wrapper = $('<div class="textarea-wrapper"></div>'),
|
||||
$submits = $this.find('input[type="submit"]');
|
||||
|
||||
clearTimeout(flexboxFixTimeoutId);
|
||||
$this
|
||||
.wrap($wrapper)
|
||||
.attr('rows', 1)
|
||||
.css('overflow', 'hidden')
|
||||
.css('resize', 'none')
|
||||
.on('keydown', function(event) {
|
||||
|
||||
flexboxFixTimeoutId = setTimeout(function() {
|
||||
if (event.keyCode == 13
|
||||
&& event.ctrlKey) {
|
||||
|
||||
if ($wrapper.prop('scrollHeight') > $window.height())
|
||||
$wrapper.css('height', 'auto');
|
||||
else
|
||||
$wrapper.css('height', '100vh');
|
||||
|
||||
}, 250);
|
||||
|
||||
}).triggerHandler('resize.flexbox-fix');
|
||||
|
||||
}
|
||||
|
||||
// Nav.
|
||||
var $nav = $header.children('nav'),
|
||||
$nav_li = $nav.find('li');
|
||||
|
||||
// Add "middle" alignment classes if we're dealing with an even number of items.
|
||||
if ($nav_li.length % 2 == 0) {
|
||||
|
||||
$nav.addClass('use-middle');
|
||||
$nav_li.eq( ($nav_li.length / 2) ).addClass('is-middle');
|
||||
|
||||
}
|
||||
|
||||
// Main.
|
||||
var delay = 325,
|
||||
locked = false;
|
||||
|
||||
// Methods.
|
||||
$main._show = function(id, initial) {
|
||||
|
||||
var $article = $main_articles.filter('#' + id);
|
||||
|
||||
// No such article? Bail.
|
||||
if ($article.length == 0)
|
||||
return;
|
||||
|
||||
// Handle lock.
|
||||
|
||||
// Already locked? Speed through "show" steps w/o delays.
|
||||
if (locked || (typeof initial != 'undefined' && initial === true)) {
|
||||
|
||||
// Mark as switching.
|
||||
$body.addClass('is-switching');
|
||||
|
||||
// Mark as visible.
|
||||
$body.addClass('is-article-visible');
|
||||
|
||||
// Deactivate all articles (just in case one's already active).
|
||||
$main_articles.removeClass('active');
|
||||
|
||||
// Hide header, footer.
|
||||
$header.hide();
|
||||
$footer.hide();
|
||||
|
||||
// Show main, article.
|
||||
$main.show();
|
||||
$article.show();
|
||||
|
||||
// Activate article.
|
||||
$article.addClass('active');
|
||||
|
||||
// Unlock.
|
||||
locked = false;
|
||||
|
||||
// Unmark as switching.
|
||||
setTimeout(function() {
|
||||
$body.removeClass('is-switching');
|
||||
}, (initial ? 1000 : 0));
|
||||
|
||||
return;
|
||||
|
||||
}
|
||||
|
||||
// Lock.
|
||||
locked = true;
|
||||
|
||||
// Article already visible? Just swap articles.
|
||||
if ($body.hasClass('is-article-visible')) {
|
||||
|
||||
// Deactivate current article.
|
||||
var $currentArticle = $main_articles.filter('.active');
|
||||
|
||||
$currentArticle.removeClass('active');
|
||||
|
||||
// Show article.
|
||||
setTimeout(function() {
|
||||
|
||||
// Hide current article.
|
||||
$currentArticle.hide();
|
||||
|
||||
// Show article.
|
||||
$article.show();
|
||||
|
||||
// Activate article.
|
||||
setTimeout(function() {
|
||||
|
||||
$article.addClass('active');
|
||||
|
||||
// Window stuff.
|
||||
$window
|
||||
.scrollTop(0)
|
||||
.triggerHandler('resize.flexbox-fix');
|
||||
|
||||
// Unlock.
|
||||
setTimeout(function() {
|
||||
locked = false;
|
||||
}, delay);
|
||||
|
||||
}, 25);
|
||||
|
||||
}, delay);
|
||||
|
||||
}
|
||||
|
||||
// Otherwise, handle as normal.
|
||||
else {
|
||||
|
||||
// Mark as visible.
|
||||
$body
|
||||
.addClass('is-article-visible');
|
||||
|
||||
// Show article.
|
||||
setTimeout(function() {
|
||||
|
||||
// Hide header, footer.
|
||||
$header.hide();
|
||||
$footer.hide();
|
||||
|
||||
// Show main, article.
|
||||
$main.show();
|
||||
$article.show();
|
||||
|
||||
// Activate article.
|
||||
setTimeout(function() {
|
||||
|
||||
$article.addClass('active');
|
||||
|
||||
// Window stuff.
|
||||
$window
|
||||
.scrollTop(0)
|
||||
.triggerHandler('resize.flexbox-fix');
|
||||
|
||||
// Unlock.
|
||||
setTimeout(function() {
|
||||
locked = false;
|
||||
}, delay);
|
||||
|
||||
}, 25);
|
||||
|
||||
}, delay);
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
$main._hide = function(addState) {
|
||||
|
||||
var $article = $main_articles.filter('.active');
|
||||
|
||||
// Article not visible? Bail.
|
||||
if (!$body.hasClass('is-article-visible'))
|
||||
return;
|
||||
|
||||
// Add state?
|
||||
if (typeof addState != 'undefined'
|
||||
&& addState === true)
|
||||
history.pushState(null, null, '#');
|
||||
|
||||
// Handle lock.
|
||||
|
||||
// Already locked? Speed through "hide" steps w/o delays.
|
||||
if (locked) {
|
||||
|
||||
// Mark as switching.
|
||||
$body.addClass('is-switching');
|
||||
|
||||
// Deactivate article.
|
||||
$article.removeClass('active');
|
||||
|
||||
// Hide article, main.
|
||||
$article.hide();
|
||||
$main.hide();
|
||||
|
||||
// Show footer, header.
|
||||
$footer.show();
|
||||
$header.show();
|
||||
|
||||
// Unmark as visible.
|
||||
$body.removeClass('is-article-visible');
|
||||
|
||||
// Unlock.
|
||||
locked = false;
|
||||
|
||||
// Unmark as switching.
|
||||
$body.removeClass('is-switching');
|
||||
|
||||
// Window stuff.
|
||||
$window
|
||||
.scrollTop(0)
|
||||
.triggerHandler('resize.flexbox-fix');
|
||||
|
||||
return;
|
||||
|
||||
}
|
||||
|
||||
// Lock.
|
||||
locked = true;
|
||||
|
||||
// Deactivate article.
|
||||
$article.removeClass('active');
|
||||
|
||||
// Hide article.
|
||||
setTimeout(function() {
|
||||
|
||||
// Hide article, main.
|
||||
$article.hide();
|
||||
$main.hide();
|
||||
|
||||
// Show footer, header.
|
||||
$footer.show();
|
||||
$header.show();
|
||||
|
||||
// Unmark as visible.
|
||||
setTimeout(function() {
|
||||
|
||||
$body.removeClass('is-article-visible');
|
||||
|
||||
// Window stuff.
|
||||
$window
|
||||
.scrollTop(0)
|
||||
.triggerHandler('resize.flexbox-fix');
|
||||
|
||||
// Unlock.
|
||||
setTimeout(function() {
|
||||
locked = false;
|
||||
}, delay);
|
||||
|
||||
}, 25);
|
||||
|
||||
}, delay);
|
||||
|
||||
|
||||
};
|
||||
|
||||
// Articles.
|
||||
$main_articles.each(function() {
|
||||
|
||||
var $this = $(this);
|
||||
|
||||
// Close.
|
||||
$('<div class="close">Close</div>')
|
||||
.appendTo($this)
|
||||
.on('click', function() {
|
||||
location.hash = '';
|
||||
});
|
||||
|
||||
// Prevent clicks from inside article from bubbling.
|
||||
$this.on('click', function(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
// Events.
|
||||
$body.on('click', function(event) {
|
||||
|
||||
// Article visible? Hide.
|
||||
if ($body.hasClass('is-article-visible'))
|
||||
$main._hide(true);
|
||||
|
||||
});
|
||||
|
||||
$window.on('keyup', function(event) {
|
||||
|
||||
switch (event.keyCode) {
|
||||
|
||||
case 27:
|
||||
|
||||
// Article visible? Hide.
|
||||
if ($body.hasClass('is-article-visible'))
|
||||
$main._hide(true);
|
||||
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
$(this).blur();
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
.on('blur focus', function() {
|
||||
$this.val($.trim($this.val()));
|
||||
})
|
||||
.on('input blur focus --init', function() {
|
||||
|
||||
$wrapper
|
||||
.css('height', $this.height());
|
||||
|
||||
$this
|
||||
.css('height', 'auto')
|
||||
.css('height', $this.prop('scrollHeight') + 'px');
|
||||
|
||||
})
|
||||
.on('keyup', function(event) {
|
||||
|
||||
if (event.keyCode == 9)
|
||||
$this
|
||||
.select();
|
||||
|
||||
})
|
||||
.triggerHandler('--init');
|
||||
|
||||
// Fix.
|
||||
if (skel.vars.browser == 'ie'
|
||||
|| skel.vars.mobile)
|
||||
$this
|
||||
.css('max-height', '10em')
|
||||
.css('overflow-y', 'auto');
|
||||
|
||||
});
|
||||
|
||||
$window.on('hashchange', function(event) {
|
||||
// Fix: Placeholder polyfill.
|
||||
$form.placeholder();
|
||||
|
||||
// Empty hash?
|
||||
if (location.hash == ''
|
||||
|| location.hash == '#') {
|
||||
// Prioritize "important" elements on medium.
|
||||
skel.on('+medium -medium', function() {
|
||||
$.prioritize(
|
||||
'.important\\28 medium\\29',
|
||||
skel.breakpoint('medium').active
|
||||
);
|
||||
});
|
||||
|
||||
// Menu.
|
||||
var $menu = $('#menu');
|
||||
|
||||
$menu.wrapInner('<div class="inner"></div>');
|
||||
|
||||
$menu._locked = false;
|
||||
|
||||
$menu._lock = function() {
|
||||
|
||||
if ($menu._locked)
|
||||
return false;
|
||||
|
||||
$menu._locked = true;
|
||||
|
||||
window.setTimeout(function() {
|
||||
$menu._locked = false;
|
||||
}, 350);
|
||||
|
||||
return true;
|
||||
|
||||
};
|
||||
|
||||
$menu._show = function() {
|
||||
|
||||
if ($menu._lock())
|
||||
$body.addClass('is-menu-visible');
|
||||
|
||||
};
|
||||
|
||||
$menu._hide = function() {
|
||||
|
||||
if ($menu._lock())
|
||||
$body.removeClass('is-menu-visible');
|
||||
|
||||
};
|
||||
|
||||
$menu._toggle = function() {
|
||||
|
||||
if ($menu._lock())
|
||||
$body.toggleClass('is-menu-visible');
|
||||
|
||||
};
|
||||
|
||||
$menu
|
||||
.appendTo($body)
|
||||
.on('click', function(event) {
|
||||
event.stopPropagation();
|
||||
})
|
||||
.on('click', 'a', function(event) {
|
||||
|
||||
var href = $(this).attr('href');
|
||||
|
||||
// Prevent default.
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
// Hide.
|
||||
$main._hide();
|
||||
$menu._hide();
|
||||
|
||||
}
|
||||
// Redirect.
|
||||
if (href == '#menu')
|
||||
return;
|
||||
|
||||
// Otherwise, check for a matching article.
|
||||
else if ($main_articles.filter(location.hash).length > 0) {
|
||||
|
||||
// Prevent default.
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
// Show article.
|
||||
$main._show(location.hash.substr(1));
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
// Scroll restoration.
|
||||
// This prevents the page from scrolling back to the top on a hashchange.
|
||||
if ('scrollRestoration' in history)
|
||||
history.scrollRestoration = 'manual';
|
||||
else {
|
||||
|
||||
var oldScrollPos = 0,
|
||||
scrollPos = 0,
|
||||
$htmlbody = $('html,body');
|
||||
|
||||
$window
|
||||
.on('scroll', function() {
|
||||
|
||||
oldScrollPos = scrollPos;
|
||||
scrollPos = $htmlbody.scrollTop();
|
||||
window.setTimeout(function() {
|
||||
window.location.href = href;
|
||||
}, 350);
|
||||
|
||||
})
|
||||
.on('hashchange', function() {
|
||||
$window.scrollTop(oldScrollPos);
|
||||
});
|
||||
.append('<a class="close" href="#menu">Close</a>');
|
||||
|
||||
}
|
||||
$body
|
||||
.on('click', 'a[href="#menu"]', function(event) {
|
||||
|
||||
// Initialize.
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
|
||||
// Hide main, articles.
|
||||
$main.hide();
|
||||
$main_articles.hide();
|
||||
// Toggle.
|
||||
$menu._toggle();
|
||||
|
||||
})
|
||||
.on('click', function(event) {
|
||||
|
||||
// Hide.
|
||||
$menu._hide();
|
||||
|
||||
})
|
||||
.on('keydown', function(event) {
|
||||
|
||||
// Hide on escape.
|
||||
if (event.keyCode == 27)
|
||||
$menu._hide();
|
||||
|
||||
// Initial article.
|
||||
if (location.hash != ''
|
||||
&& location.hash != '#')
|
||||
$window.on('load', function() {
|
||||
$main._show(location.hash.substr(1), true);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
///
|
||||
/// Dimension by HTML5 UP
|
||||
/// Phantom by HTML5 UP
|
||||
/// html5up.net | @ajlkn
|
||||
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
///
|
||||
@@ -11,6 +11,11 @@
|
||||
width: device-width;
|
||||
}
|
||||
|
||||
// MSIE: Prevents scrollbar from overlapping content.
|
||||
body {
|
||||
-ms-overflow-style: scrollbar;
|
||||
}
|
||||
|
||||
// Ensures page width is always >=320px.
|
||||
@include breakpoint(xsmall) {
|
||||
html, body {
|
||||
@@ -23,12 +28,10 @@
|
||||
|
||||
// Prevents animation/transition "flicker" on page load.
|
||||
// Automatically added/removed by js/main.js.
|
||||
&.is-loading,
|
||||
&.is-switching {
|
||||
&.is-loading {
|
||||
*, *:before, *:after {
|
||||
@include vendor('animation', 'none !important');
|
||||
@include vendor('transition', 'none !important');
|
||||
@include vendor('transition-delay', 'none !important');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,47 +1,39 @@
|
||||
///
|
||||
/// Dimension by HTML5 UP
|
||||
/// Phantom by HTML5 UP
|
||||
/// html5up.net | @ajlkn
|
||||
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
///
|
||||
|
||||
/* Type */
|
||||
|
||||
html {
|
||||
font-size: 16pt;
|
||||
|
||||
@include breakpoint(xlarge) {
|
||||
font-size: 12pt;
|
||||
}
|
||||
|
||||
@include breakpoint(small) {
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
@include breakpoint(xxsmall) {
|
||||
font-size: 10pt;
|
||||
}
|
||||
}
|
||||
|
||||
body, input, select, textarea {
|
||||
color: _palette(fg);
|
||||
font-family: _font(family);
|
||||
font-size: 16pt;
|
||||
font-weight: _font(weight);
|
||||
font-size: 1rem;
|
||||
line-height: 1.65;
|
||||
line-height: 1.75;
|
||||
|
||||
@include breakpoint(xlarge) {
|
||||
font-size: 14pt;
|
||||
}
|
||||
|
||||
@include breakpoint(large) {
|
||||
font-size: 12pt;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
@include vendor('transition', (
|
||||
'color #{_duration(transition)} ease-in-out',
|
||||
'background-color #{_duration(transition)} ease-in-out',
|
||||
'border-bottom-color #{_duration(transition)} ease-in-out'
|
||||
'border-bottom-color #{_duration(transition)} ease',
|
||||
'color #{_duration(transition)} ease'
|
||||
));
|
||||
border-bottom: dotted 1px _palette(fg-light);
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
color: _palette(fg);
|
||||
border-bottom: dotted 1px transparentize(_palette(fg), 0.5);
|
||||
|
||||
&:hover {
|
||||
border-bottom-color: transparent;
|
||||
color: _palette(accent1) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -58,80 +50,89 @@
|
||||
margin: 0 0 _size(element-margin) 0;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
h1 {
|
||||
font-size: 2.75em;
|
||||
color: _palette(fg-bold);
|
||||
font-weight: _font(weight-bold-alt);
|
||||
line-height: 1.3;
|
||||
margin: 0 0 (_size(element-margin) * 0.5) 0;
|
||||
letter-spacing: _font(letter-spacing-alt);
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
@include breakpoint(small) {
|
||||
font-size: 2em;
|
||||
margin: 0 0 (_size(element-margin) * 0.5) 0;
|
||||
}
|
||||
|
||||
@include breakpoint(xxsmall) {
|
||||
font-size: 1.75em;
|
||||
}
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
color: _palette(fg-bold);
|
||||
font-weight: _font(weight-bold);
|
||||
line-height: 1.5;
|
||||
margin: 0 0 (_size(element-margin) * 0.5) 0;
|
||||
margin: 0 0 (_size(element-margin) * 1) 0;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: _font(letter-spacing);
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&.major {
|
||||
border-bottom: solid _size(border-width) _palette(border);
|
||||
width: -moz-max-content;
|
||||
width: -webkit-max-content;
|
||||
width: -ms-max-content;
|
||||
width: max-content;
|
||||
padding-bottom: 0.5rem;
|
||||
margin: 0 0 (_size(element-margin) * 1) 0;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.25rem;
|
||||
line-height: 1.3;
|
||||
letter-spacing: _font(letter-spacing-heading);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.4;
|
||||
letter-spacing: _font(letter-spacing-heading);
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1rem;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 0.8rem;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 0.7rem;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 0.6rem;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
@include breakpoint(medium) {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
br {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(small) {
|
||||
h1 {
|
||||
font-size: 1.75rem;
|
||||
line-height: 1.4;
|
||||
h2 {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.25em;
|
||||
line-height: 1.5;
|
||||
h3 {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
}
|
||||
|
||||
sub {
|
||||
font-size: 0.8rem;
|
||||
font-size: 0.8em;
|
||||
position: relative;
|
||||
top: 0.5rem;
|
||||
top: 0.5em;
|
||||
}
|
||||
|
||||
sup {
|
||||
font-size: 0.8rem;
|
||||
font-size: 0.8em;
|
||||
position: relative;
|
||||
top: -0.5rem;
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
@@ -144,22 +145,23 @@
|
||||
code {
|
||||
background: _palette(border-bg);
|
||||
border-radius: _size(border-radius);
|
||||
border: solid _size(border-width) _palette(border);
|
||||
font-family: _font(family-fixed);
|
||||
font-size: 0.9rem;
|
||||
margin: 0 0.25rem;
|
||||
padding: 0.25rem 0.65rem;
|
||||
font-size: 0.9em;
|
||||
margin: 0 0.25em;
|
||||
padding: 0.25em 0.65em;
|
||||
}
|
||||
|
||||
pre {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
font-family: _font(family-fixed);
|
||||
font-size: 0.9rem;
|
||||
font-size: 0.9em;
|
||||
margin: 0 0 _size(element-margin) 0;
|
||||
|
||||
code {
|
||||
display: block;
|
||||
line-height: 1.75;
|
||||
padding: 1rem 1.5rem;
|
||||
padding: 1em 1.5em;
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
@@ -167,7 +169,11 @@
|
||||
hr {
|
||||
border: 0;
|
||||
border-bottom: solid _size(border-width) _palette(border);
|
||||
margin: (_size(element-margin) * 1.375) 0;
|
||||
margin: _size(element-margin) 0;
|
||||
|
||||
&.major {
|
||||
margin: (_size(element-margin) * 1.5) 0;
|
||||
}
|
||||
}
|
||||
|
||||
.align-left {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
///
|
||||
/// Dimension by HTML5 UP
|
||||
/// Phantom by HTML5 UP
|
||||
/// html5up.net | @ajlkn
|
||||
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
///
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
///
|
||||
/// Dimension by HTML5 UP
|
||||
/// Phantom by HTML5 UP
|
||||
/// html5up.net | @ajlkn
|
||||
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
///
|
||||
@@ -12,34 +12,31 @@
|
||||
button,
|
||||
.button {
|
||||
@include vendor('appearance', 'none');
|
||||
@include vendor('transition', 'background-color #{_duration(transition)} ease-in-out, color #{_duration(transition)} ease-in-out');
|
||||
@include vendor('transition', (
|
||||
'background-color #{_duration(transition)} ease-in-out',
|
||||
'color #{_duration(transition)} ease-in-out',
|
||||
'box-shadow #{_duration(transition)} ease-in-out'
|
||||
));
|
||||
background-color: transparent;
|
||||
border-radius: _size(border-radius);
|
||||
border: 0;
|
||||
box-shadow: inset 0 0 0 _size(border-width) _palette(border);
|
||||
color: _palette(fg-bold) !important;
|
||||
box-shadow: inset 0 0 0 (_size(border-width) * 2) _palette(fg);
|
||||
color: _palette(fg) !important;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-size: 0.8rem;
|
||||
font-weight: _font(weight);
|
||||
height: _size(element-height);
|
||||
font-size: 0.8em;
|
||||
font-weight: _font(weight-bold);
|
||||
height: 3.5em;
|
||||
letter-spacing: _font(letter-spacing);
|
||||
line-height: _size(element-height);
|
||||
outline: 0;
|
||||
padding: 0 1.25rem 0 (1.25rem + (_font(letter-spacing) * 0.5));
|
||||
line-height: 3.45em;
|
||||
overflow: hidden;
|
||||
padding: 0 1.25em 0 #{1.25em + _font(letter-spacing)};
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
background-color: _palette(border-bg);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: _palette(border-bg-alt);
|
||||
}
|
||||
|
||||
&.icon {
|
||||
&:before {
|
||||
margin-right: 0.5em;
|
||||
@@ -52,29 +49,40 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.special {
|
||||
background-color: _palette(fg-bold);
|
||||
color: _palette(bg) !important;
|
||||
font-weight: _font(weight-bold);
|
||||
|
||||
&:hover {
|
||||
color: _palette(accent1) !important;
|
||||
box-shadow: inset 0 0 0 (_size(border-width) * 2) _palette(accent1);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: transparentize(_palette(accent1), 0.9);
|
||||
}
|
||||
|
||||
&.small {
|
||||
font-size: 0.6em;
|
||||
}
|
||||
|
||||
&.big {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
&.special {
|
||||
box-shadow: none;
|
||||
background-color: _palette(fg);
|
||||
color: _palette(bg) !important;
|
||||
|
||||
&:hover {
|
||||
background-color: _palette(accent1);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: darken(_palette(accent1), 8);
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
@include vendor('pointer-events', 'none');
|
||||
cursor: default;
|
||||
opacity: 0.25;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="submit"],
|
||||
input[type="reset"],
|
||||
input[type="button"],
|
||||
button {
|
||||
line-height: calc(#{_size(element-height)} - 2px);
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
///
|
||||
/// Dimension by HTML5 UP
|
||||
/// Phantom by HTML5 UP
|
||||
/// html5up.net | @ajlkn
|
||||
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
///
|
||||
@@ -7,70 +7,69 @@
|
||||
/* Form */
|
||||
|
||||
form {
|
||||
$gutter: _size(element-margin) * 0.75;
|
||||
margin: (_size(element-margin) * -0.5) 0 _size(element-margin) 0;
|
||||
|
||||
margin: 0 0 (_size(element-margin) * 1.25) 0;
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
clear: both;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
.field {
|
||||
margin: 0 0 ($gutter * 1) 0;
|
||||
|
||||
&.half {
|
||||
width: 50%;
|
||||
position: relative;
|
||||
float: left;
|
||||
padding: 0 0 0 ($gutter * 1 * 0.5);
|
||||
|
||||
&.first {
|
||||
padding: 0 ($gutter * 1 * 0.5) 0 0;
|
||||
}
|
||||
}
|
||||
margin: 0 0 (_size(element-margin) * 0.65) 0;
|
||||
vertical-align: top;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
> .actions {
|
||||
margin: ($gutter * 1.25) 0 0 0 !important;
|
||||
.half {
|
||||
width: calc(50% + #{_size(field-gutter) * 0.5}) !important;
|
||||
padding-left: _size(field-gutter);
|
||||
}
|
||||
|
||||
@include breakpoint(small) {
|
||||
.field {
|
||||
margin: 0 0 ($gutter * 0.75) 0;
|
||||
|
||||
&.half {
|
||||
padding: 0 0 0 ($gutter * 0.75 * 0.5);
|
||||
|
||||
&.first {
|
||||
padding: 0 ($gutter * 0.75 * 0.5) 0 0;
|
||||
}
|
||||
}
|
||||
.half.first {
|
||||
width: calc(50% - #{_size(field-gutter) * 0.5}) !important;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
> .actions {
|
||||
margin: ($gutter * 1) 0 0 0 !important;
|
||||
:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.half:nth-last-child(2) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.actions {
|
||||
position: relative;
|
||||
clear: both;
|
||||
padding-top: (_size(element-margin) * 0.5);
|
||||
}
|
||||
|
||||
@include breakpoint(xsmall) {
|
||||
.field {
|
||||
&.half {
|
||||
width: 100%;
|
||||
float: none;
|
||||
padding: 0;
|
||||
.half {
|
||||
width: 100% !important;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&.first {
|
||||
padding: 0;
|
||||
}
|
||||
.half.first {
|
||||
width: 100% !important;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.half:nth-last-child(2) {
|
||||
margin: 0 0 (_size(element-margin) * 0.65) 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
color: _palette(fg-bold);
|
||||
display: block;
|
||||
font-size: 0.8rem;
|
||||
font-weight: _font(weight);
|
||||
letter-spacing: _font(letter-spacing);
|
||||
line-height: 1.5;
|
||||
font-size: 0.9em;
|
||||
font-weight: _font(weight-bold);
|
||||
margin: 0 0 (_size(element-margin) * 0.5) 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
@@ -80,18 +79,14 @@
|
||||
select,
|
||||
textarea {
|
||||
@include vendor('appearance', 'none');
|
||||
@include vendor('transition', (
|
||||
'border-color #{_duration(transition)} ease-in-out',
|
||||
'box-shadow #{_duration(transition)} ease-in-out',
|
||||
'background-color #{_duration(transition)} ease-in-out'
|
||||
));
|
||||
background: transparent;
|
||||
border-radius: _size(border-radius);
|
||||
border: solid _size(border-width) _palette(border);
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
border-bottom: solid _size(border-width) _palette(border);
|
||||
color: inherit;
|
||||
display: block;
|
||||
outline: 0;
|
||||
padding: 0 1rem;
|
||||
padding: 0;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
|
||||
@@ -100,16 +95,8 @@
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background: _palette(border-bg);
|
||||
border-color: _palette(fg-bold);
|
||||
box-shadow: 0 0 0 _size(border-width) _palette(fg-bold);
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
option {
|
||||
background: _palette(bg);
|
||||
color: _palette(fg);
|
||||
border-bottom-color: _palette(accent1);
|
||||
box-shadow: inset 0 -1px 0 0 _palette(accent1);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -120,11 +107,10 @@
|
||||
|
||||
&:before {
|
||||
color: _palette(border);
|
||||
content: '\f107';
|
||||
content: '\f078';
|
||||
display: block;
|
||||
height: _size(element-height);
|
||||
//line-height: _size(element-height);
|
||||
line-height: calc(#{_size(element-height)} + 0em);
|
||||
line-height: _size(element-height);
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
@@ -146,7 +132,8 @@
|
||||
}
|
||||
|
||||
textarea {
|
||||
padding: 0.75rem 1rem;
|
||||
padding: 0;
|
||||
min-height: (_size(element-height) * 1.25);
|
||||
}
|
||||
|
||||
input[type="checkbox"],
|
||||
@@ -154,49 +141,41 @@
|
||||
@include vendor('appearance', 'none');
|
||||
display: block;
|
||||
float: left;
|
||||
margin-right: -2rem;
|
||||
margin-right: -2em;
|
||||
opacity: 0;
|
||||
width: 1rem;
|
||||
width: 1em;
|
||||
z-index: -1;
|
||||
|
||||
& + label {
|
||||
@include icon;
|
||||
@include vendor('user-select', 'none');
|
||||
color: _palette(fg);
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-size: 0.8rem;
|
||||
font-size: 1em;
|
||||
font-weight: _font(weight);
|
||||
margin: 0 0 (_size(element-margin) * 0.25) 0;
|
||||
padding-left: (_size(element-height) * 0.6) + 1rem;
|
||||
padding-right: 0.75rem;
|
||||
padding-left: (_size(element-height) * 0.6) + 0.75em;
|
||||
padding-right: 0.75em;
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
@include vendor('transition', (
|
||||
'border-color #{_duration(transition)} ease-in-out',
|
||||
'box-shadow #{_duration(transition)} ease-in-out',
|
||||
'background-color #{_duration(transition)} ease-in-out'
|
||||
));
|
||||
border-radius: _size(border-radius);
|
||||
border: solid _size(border-width) _palette(border);
|
||||
content: '';
|
||||
display: inline-block;
|
||||
height: (_size(element-height) * 0.6);
|
||||
left: 0;
|
||||
//line-height: (_size(element-height) * 0.575);
|
||||
line-height: calc(#{_size(element-height) * 0.575} + 0em);
|
||||
line-height: (_size(element-height) * 0.575);
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
top: -0.125rem;
|
||||
top: 0;
|
||||
width: (_size(element-height) * 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
&:checked + label {
|
||||
&:before {
|
||||
background: _palette(fg-bold) !important;
|
||||
border-color: _palette(fg-bold) !important;
|
||||
background: _palette(fg);
|
||||
border-color: _palette(fg);
|
||||
color: _palette(bg);
|
||||
content: '\f00c';
|
||||
}
|
||||
@@ -204,9 +183,8 @@
|
||||
|
||||
&:focus + label {
|
||||
&:before {
|
||||
background: _palette(border-bg);
|
||||
border-color: _palette(fg-bold);
|
||||
box-shadow: 0 0 0 _size(border-width) _palette(fg-bold);
|
||||
border-color: _palette(accent1);
|
||||
box-shadow: 0 0 0 _size(border-width) _palette(accent1);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -226,28 +204,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
color: _palette(fg-light) !important;
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
:-moz-placeholder {
|
||||
color: _palette(fg-light) !important;
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
::-moz-placeholder {
|
||||
color: _palette(fg-light) !important;
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
:-ms-input-placeholder {
|
||||
color: _palette(fg-light) !important;
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
.formerize-placeholder {
|
||||
color: _palette(fg-light) !important;
|
||||
opacity: 1.0;
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
///
|
||||
/// Dimension by HTML5 UP
|
||||
/// Phantom by HTML5 UP
|
||||
/// html5up.net | @ajlkn
|
||||
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
///
|
||||
@@ -14,4 +14,37 @@
|
||||
> .label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.style1 {
|
||||
}
|
||||
|
||||
&.style2 {
|
||||
@include vendor('transition', (
|
||||
'background-color #{_duration(transition)} ease-in-out',
|
||||
'color #{_duration(transition)} ease-in-out',
|
||||
'border-color #{_duration(transition)} ease-in-out'
|
||||
));
|
||||
background-color: transparent;
|
||||
border: solid 1px _palette(border);
|
||||
border-radius: _size(border-radius);
|
||||
width: 2.65em;
|
||||
height: 2.65em;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
line-height: 2.65em;
|
||||
color: inherit;
|
||||
|
||||
&:before {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: _palette(accent1);
|
||||
border-color: _palette(accent1);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: transparentize(_palette(accent1), 0.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
///
|
||||
/// Dimension by HTML5 UP
|
||||
/// Phantom by HTML5 UP
|
||||
/// html5up.net | @ajlkn
|
||||
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
///
|
||||
@@ -12,21 +12,6 @@
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
@include vendor('pointer-events', 'none');
|
||||
background-image: url('../../images/overlay.png');
|
||||
background-color: _palette(bg-overlay);
|
||||
border-radius: _size(border-radius);
|
||||
content: '';
|
||||
display: block;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
opacity: 0.5;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
border-radius: _size(border-radius);
|
||||
display: block;
|
||||
@@ -65,23 +50,15 @@
|
||||
|
||||
&.main {
|
||||
display: block;
|
||||
margin: (_size(element-margin) * 1.25) 0;
|
||||
margin: 0 0 (_size(element-margin) * 1.5) 0;
|
||||
width: 100%;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(small) {
|
||||
&.main {
|
||||
margin: (_size(element-margin) * 1) 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(xsmall) {
|
||||
&.main {
|
||||
margin: (_size(element-margin) * 0.75) 0;
|
||||
margin: 0 0 _size(element-margin) 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
///
|
||||
/// Dimension by HTML5 UP
|
||||
/// Phantom by HTML5 UP
|
||||
/// html5up.net | @ajlkn
|
||||
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
///
|
||||
@@ -44,32 +44,11 @@
|
||||
cursor: default;
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
margin: -1em 0 _size(element-margin) -1em;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
padding: 0 0.75em 0 0;
|
||||
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
border-radius: 100%;
|
||||
box-shadow: inset 0 0 0 _size(border-width) _palette(border);
|
||||
display: inline-block;
|
||||
height: 2.25rem;
|
||||
line-height: 2.25rem;
|
||||
text-align: center;
|
||||
width: 2.25rem;
|
||||
|
||||
&:hover {
|
||||
background-color: _palette(border-bg);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: _palette(border-bg-alt);
|
||||
}
|
||||
}
|
||||
padding: 1em 0 0 1em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,25 @@
|
||||
///
|
||||
/// Phantom by HTML5 UP
|
||||
/// html5up.net | @ajlkn
|
||||
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
///
|
||||
|
||||
/* Section/Article */
|
||||
|
||||
section, article {
|
||||
&.special {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
p {
|
||||
margin-top: _size(element-margin) * -0.5;
|
||||
}
|
||||
|
||||
@include breakpoint(small) {
|
||||
p {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
///
|
||||
/// Dimension by HTML5 UP
|
||||
/// Phantom by HTML5 UP
|
||||
/// html5up.net | @ajlkn
|
||||
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
///
|
||||
|
||||
@@ -0,0 +1,258 @@
|
||||
///
|
||||
/// Phantom by HTML5 UP
|
||||
/// html5up.net | @ajlkn
|
||||
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
///
|
||||
|
||||
/* Tiles */
|
||||
|
||||
.tiles {
|
||||
$gutter: _size(gutter);
|
||||
$duration: 0.5s;
|
||||
$ease: 'ease';
|
||||
|
||||
@include vendor('display', 'flex');
|
||||
@include vendor('flex-wrap', 'wrap');
|
||||
postiion: relative;
|
||||
margin: ($gutter * -1) 0 0 ($gutter * -1);
|
||||
|
||||
article {
|
||||
@include vendor('transition', (
|
||||
'transform #{$duration} #{$ease}',
|
||||
'opacity #{$duration} #{$ease}'
|
||||
));
|
||||
position: relative;
|
||||
width: calc(#{(100% / 3)} - #{$gutter * 1});
|
||||
margin: $gutter 0 0 $gutter;
|
||||
|
||||
> .image {
|
||||
@include vendor('transition', 'transform #{$duration} #{$ease}');
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
border-radius: _size(border-radius);
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:before {
|
||||
@include vendor('pointer-events', 'none');
|
||||
@include vendor('transition', (
|
||||
'background-color #{$duration} #{$ease}',
|
||||
'opacity #{$duration} #{$ease}'
|
||||
));
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 1.0;
|
||||
z-index: 1;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
&:after {
|
||||
@include vendor('pointer-events', 'none');
|
||||
@include vendor('transition', 'opacity #{$duration} #{$ease}');
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" preserveAspectRatio="none"><style>line { stroke-width: 0.25px; stroke: #ffffff; }</style><line x1="0" y1="0" x2="100" y2="100" /><line x1="100" y1="0" x2="0" y2="100" /></svg>');
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
opacity: 0.25;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
> a {
|
||||
@include vendor('display', 'flex');
|
||||
@include vendor('flex-direction', 'column');
|
||||
@include vendor('align-items', 'center');
|
||||
@include vendor('justify-content', 'center');
|
||||
@include vendor('transition', (
|
||||
'background-color #{$duration} #{$ease}',
|
||||
'transform #{$duration} #{$ease}'
|
||||
));
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 1em;
|
||||
border-radius: _size(border-radius);
|
||||
border-bottom: 0;
|
||||
color: _palette(fg-accent);
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
z-index: 3;
|
||||
|
||||
> :last-child {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: _palette(fg-accent) !important;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
@include vendor('transition', (
|
||||
'max-height #{$duration} #{$ease}',
|
||||
'opacity #{$duration} #{$ease}'
|
||||
));
|
||||
width: 100%;
|
||||
max-height: 0;
|
||||
line-height: 1.5;
|
||||
margin-top: 0.35em;
|
||||
opacity: 0;
|
||||
|
||||
> :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.style1 {
|
||||
> .image:before {
|
||||
background-color: _palette(accent1);
|
||||
}
|
||||
}
|
||||
|
||||
&.style2 {
|
||||
> .image:before {
|
||||
background-color: _palette(accent2);
|
||||
}
|
||||
}
|
||||
|
||||
&.style3 {
|
||||
> .image:before {
|
||||
background-color: _palette(accent3);
|
||||
}
|
||||
}
|
||||
|
||||
&.style4 {
|
||||
> .image:before {
|
||||
background-color: _palette(accent4);
|
||||
}
|
||||
}
|
||||
|
||||
&.style5 {
|
||||
> .image:before {
|
||||
background-color: _palette(accent5);
|
||||
}
|
||||
}
|
||||
|
||||
&.style6 {
|
||||
> .image:before {
|
||||
background-color: _palette(accent6);
|
||||
}
|
||||
}
|
||||
|
||||
body:not(.is-touch) & {
|
||||
&:hover {
|
||||
> .image {
|
||||
@include vendor('transform', 'scale(1.1)');
|
||||
|
||||
&:before {
|
||||
background-color: _palette(bg-accent);
|
||||
opacity: 0.35;
|
||||
}
|
||||
|
||||
&:after {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
max-height: 15em;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
* + & {
|
||||
margin-top: _size(element-margin);
|
||||
}
|
||||
|
||||
body.is-loading & {
|
||||
article {
|
||||
@include vendor('transform', 'scale(0.9)');
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
body.is-touch & {
|
||||
article {
|
||||
.content {
|
||||
max-height: 15em;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(large) {
|
||||
$gutter: _size(gutter) * 0.5;
|
||||
|
||||
margin: ($gutter * -1) 0 0 ($gutter * -1);
|
||||
|
||||
article {
|
||||
width: calc(#{(100% / 3)} - #{$gutter * 1});
|
||||
margin: $gutter 0 0 $gutter;
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(medium) {
|
||||
$gutter: _size(gutter);
|
||||
|
||||
margin: ($gutter * -1) 0 0 ($gutter * -1);
|
||||
|
||||
article {
|
||||
width: calc(#{(100% / 2)} - #{$gutter * 1});
|
||||
margin: $gutter 0 0 $gutter;
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(small) {
|
||||
$gutter: _size(gutter) * 0.5;
|
||||
|
||||
margin: ($gutter * -1) 0 0 ($gutter * -1);
|
||||
|
||||
article {
|
||||
width: calc(#{(100% / 2)} - #{$gutter * 1});
|
||||
margin: $gutter 0 0 $gutter;
|
||||
|
||||
&:hover {
|
||||
> .image {
|
||||
@include vendor('transform', 'scale(1.0)');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(xsmall) {
|
||||
$gutter: _size(gutter) * 0.5;
|
||||
|
||||
margin: 0;
|
||||
|
||||
article {
|
||||
width: 100%;
|
||||
margin: $gutter 0 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,92 @@
|
||||
@import 'libs/vars';
|
||||
@import 'libs/functions';
|
||||
@import 'libs/mixins';
|
||||
@import 'libs/skel';
|
||||
|
||||
/*
|
||||
Phantom by HTML5 UP
|
||||
html5up.net | @ajlkn
|
||||
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
*/
|
||||
|
||||
/* Form */
|
||||
|
||||
form {
|
||||
.field {
|
||||
float: none !important;
|
||||
width: 100% !important;
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Button */
|
||||
|
||||
input[type="submit"],
|
||||
input[type="reset"],
|
||||
input[type="button"],
|
||||
button,
|
||||
.button {
|
||||
border: solid 2px _palette(fg) !important;
|
||||
|
||||
&:hover {
|
||||
border-color: _palette(accent1) !important;
|
||||
}
|
||||
|
||||
&.special {
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tiles */
|
||||
|
||||
.tiles {
|
||||
article {
|
||||
> .image {
|
||||
&:before, &:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Header */
|
||||
|
||||
#header {
|
||||
.logo {
|
||||
.symbol {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
ul {
|
||||
li {
|
||||
a[href="#menu"] {
|
||||
text-indent: 0;
|
||||
width: auto;
|
||||
font-size: 0.8em;
|
||||
|
||||
&:before, &:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
|
||||
#footer {
|
||||
> .inner {
|
||||
section {
|
||||
width: 50%;
|
||||
margin-left: 3em;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
width: 40%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+36
-32
@@ -4,45 +4,49 @@
|
||||
@import 'libs/skel';
|
||||
|
||||
/*
|
||||
Dimension by HTML5 UP
|
||||
Phantom by HTML5 UP
|
||||
html5up.net | @ajlkn
|
||||
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
*/
|
||||
|
||||
/* BG */
|
||||
/* Tiles */
|
||||
|
||||
#bg {
|
||||
&:before {
|
||||
background: _palette(bg-overlay);
|
||||
}
|
||||
.tiles {
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
|
||||
#header {
|
||||
.logo {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
nav {
|
||||
ul {
|
||||
display: inline-block;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Main */
|
||||
|
||||
#main {
|
||||
article {
|
||||
margin: 0 auto;
|
||||
float: left;
|
||||
|
||||
> a {
|
||||
padding-top: 50%;
|
||||
margin-top: -1.75em;
|
||||
}
|
||||
|
||||
body:not(.is-touch) & {
|
||||
&:hover {
|
||||
> .image {
|
||||
@include vendor('transform', 'none');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
|
||||
#footer {
|
||||
> .inner {
|
||||
section {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
clear: both;
|
||||
padding-top: (_size(element-margin) * 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,68 +0,0 @@
|
||||
///
|
||||
/// Dimension by HTML5 UP
|
||||
/// html5up.net | @ajlkn
|
||||
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
///
|
||||
|
||||
/* BG */
|
||||
|
||||
#bg {
|
||||
@include vendor('transform', 'scale(1.0)');
|
||||
-webkit-backface-visibility: hidden;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
z-index: 1;
|
||||
|
||||
&:before, &:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&:before {
|
||||
@include vendor('transition', 'background-color #{_duration(bg)} ease-in-out');
|
||||
@include vendor('transition-delay', '#{_duration(intro)}');
|
||||
background-image: linear-gradient(to top, #{_palette(bg-overlay)}, #{_palette(bg-overlay)}),
|
||||
url('../../images/overlay.png');
|
||||
background-size: auto,
|
||||
256px 256px;
|
||||
background-position: center,
|
||||
center;
|
||||
background-repeat: no-repeat,
|
||||
repeat;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&:after {
|
||||
@include vendor('transform', 'scale(1.125)');
|
||||
@include vendor('transition', (
|
||||
'transform #{_duration(article)} ease-in-out',
|
||||
'filter #{_duration(article)} ease-in-out'
|
||||
));
|
||||
background-image: url('../../images/bg.jpg');
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
body.is-article-visible & {
|
||||
&:after {
|
||||
@include vendor('transform', 'scale(1.0825)');
|
||||
@include vendor('filter', 'blur(0.2rem)');
|
||||
}
|
||||
}
|
||||
|
||||
body.is-loading & {
|
||||
&:before {
|
||||
background-color: _palette(bg-alt);
|
||||
}
|
||||
}
|
||||
}
|
||||
+123
-21
@@ -1,5 +1,5 @@
|
||||
///
|
||||
/// Dimension by HTML5 UP
|
||||
/// Phantom by HTML5 UP
|
||||
/// html5up.net | @ajlkn
|
||||
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
///
|
||||
@@ -7,31 +7,133 @@
|
||||
/* Footer */
|
||||
|
||||
#footer {
|
||||
@include vendor('transition', (
|
||||
'transform #{_duration(article)} ease-in-out',
|
||||
'filter #{_duration(article)} ease-in-out',
|
||||
'opacity #{_duration(article)} ease-in-out',
|
||||
));
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin-top: 2rem;
|
||||
text-align: center;
|
||||
$gutter: _size(gutter);
|
||||
|
||||
@include padding(5em, 0, (0, 0, 3em, 0));
|
||||
background-color: _palette(bg-alt);
|
||||
|
||||
> .inner {
|
||||
@include vendor('display', 'flex');
|
||||
@include vendor('flex-wrap', 'wrap');
|
||||
@include vendor('flex-direction', 'row');
|
||||
|
||||
> * > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
section:nth-child(1) {
|
||||
width: calc(66% - #{$gutter});
|
||||
margin-right: $gutter;
|
||||
}
|
||||
|
||||
section:nth-child(2) {
|
||||
width: calc(33% - #{$gutter});
|
||||
margin-left: $gutter;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
letter-spacing: _font(letter-spacing);
|
||||
font-size: 0.6rem;
|
||||
opacity: 0.75;
|
||||
margin-bottom: 0;
|
||||
text-transform: uppercase;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin-top: 5em;
|
||||
list-style: none;
|
||||
font-size: 0.8em;
|
||||
color: transparentize(_palette(fg), 0.5);
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
body.is-article-visible & {
|
||||
@include vendor('transform', 'scale(0.95)');
|
||||
@include vendor('filter', 'blur(0.1rem)');
|
||||
opacity: 0;
|
||||
li {
|
||||
display: inline-block;
|
||||
border-left: solid 1px transparentize(_palette(fg), 0.85);
|
||||
line-height: 1;
|
||||
padding: 0 0 0 1em;
|
||||
margin: 0 0 0 1em;
|
||||
|
||||
&:first-child {
|
||||
border-left: 0;
|
||||
padding-left: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body.is-loading & {
|
||||
opacity: 0;
|
||||
@include breakpoint(large) {
|
||||
$gutter: _size(gutter) * 0.5;
|
||||
|
||||
@include padding(5em, 0);
|
||||
|
||||
> .inner {
|
||||
section:nth-child(1) {
|
||||
width: calc(66% - #{$gutter});
|
||||
margin-right: $gutter;
|
||||
}
|
||||
|
||||
section:nth-child(2) {
|
||||
width: calc(33% - #{$gutter});
|
||||
margin-left: $gutter;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(medium) {
|
||||
$gutter: _size(gutter);
|
||||
|
||||
> .inner {
|
||||
section:nth-child(1) {
|
||||
width: 66%;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
section:nth-child(2) {
|
||||
width: calc(33% - #{$gutter});
|
||||
margin-left: $gutter;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(small) {
|
||||
@include padding(3em, 0);
|
||||
|
||||
> .inner {
|
||||
@include vendor('flex-direction', 'column');
|
||||
|
||||
section:nth-child(1) {
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
margin: 3em 0 0 0;
|
||||
}
|
||||
|
||||
section:nth-child(2) {
|
||||
@include vendor('order', '-1');
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
margin-top: 3em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(xsmall) {
|
||||
> .inner {
|
||||
.copyright {
|
||||
margin-top: 3em;
|
||||
|
||||
li {
|
||||
border-left: 0;
|
||||
padding-left: 0;
|
||||
margin: 0.75em 0 0 0;
|
||||
display: block;
|
||||
line-height: inherit;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+78
-203
@@ -1,5 +1,5 @@
|
||||
///
|
||||
/// Dimension by HTML5 UP
|
||||
/// Phantom by HTML5 UP
|
||||
/// html5up.net | @ajlkn
|
||||
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
///
|
||||
@@ -7,253 +7,128 @@
|
||||
/* Header */
|
||||
|
||||
#header {
|
||||
@include vendor('display', 'flex');
|
||||
@include vendor('flex-direction', 'column');
|
||||
@include vendor('align-items', 'center');
|
||||
@include vendor('transition', (
|
||||
'transform #{_duration(article)} ease-in-out',
|
||||
'filter #{_duration(article)} ease-in-out',
|
||||
'opacity #{_duration(article)} ease-in-out',
|
||||
));
|
||||
background-image: -moz-radial-gradient(rgba(0,0,0,0.25) 25%, rgba(0,0,0,0) 55%);
|
||||
background-image: -webkit-radial-gradient(rgba(0,0,0,0.25) 25%, rgba(0,0,0,0) 55%);
|
||||
background-image: -ms-radial-gradient(rgba(0,0,0,0.25) 25%, rgba(0,0,0,0) 55%);
|
||||
background-image: radial-gradient(rgba(0,0,0,0.25) 25%, rgba(0,0,0,0) 55%);
|
||||
max-width: 100%;
|
||||
text-align: center;
|
||||
|
||||
> * {
|
||||
@include vendor('transition', 'opacity #{_duration(article)} ease-in-out');
|
||||
position: relative;
|
||||
margin-top: 3.5rem;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: calc(-3.5rem - 1px);
|
||||
left: calc(50% - #{_size(border-width) * 1});
|
||||
width: _size(border-width);
|
||||
height: calc(3.5rem + 1px);
|
||||
background: _palette(border);
|
||||
}
|
||||
}
|
||||
|
||||
> :first-child {
|
||||
margin-top: 0;
|
||||
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@include padding(5em, 0, (3em, 0, -5em, 0));
|
||||
|
||||
.logo {
|
||||
width: 5.5rem;
|
||||
height: 5.5rem;
|
||||
line-height: 5.5rem;
|
||||
border: solid _size(border-width) _palette(border);
|
||||
border-radius: 100%;
|
||||
|
||||
.icon {
|
||||
&:before {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
border-style: solid;
|
||||
border-color: _palette(border);
|
||||
border-top-width: _size(border-width);
|
||||
border-bottom-width: _size(border-width);
|
||||
max-width: 100%;
|
||||
|
||||
.inner {
|
||||
@include vendor('transition', (
|
||||
'max-height #{_duration(intro)} ease',
|
||||
'padding #{_duration(intro)} ease',
|
||||
'opacity #{_duration(article)} ease-in-out'
|
||||
));
|
||||
@include vendor('transition-delay', '0.25s');
|
||||
padding: 3rem 2rem;
|
||||
max-height: 40rem;
|
||||
overflow: hidden;
|
||||
|
||||
> :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
text-transform: uppercase;
|
||||
display: block;
|
||||
border-bottom: 0;
|
||||
color: inherit;
|
||||
font-weight: _font(weight-bold);
|
||||
letter-spacing: _font(letter-spacing);
|
||||
font-size: 0.8rem;
|
||||
line-height: 2;
|
||||
margin: 0 0 (_size(element-margin) * 1.25) 0;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
display: inline-block;
|
||||
|
||||
> * {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.symbol {
|
||||
margin-right: 0.65em;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
position: fixed;
|
||||
right: 2em;
|
||||
top: 2em;
|
||||
z-index: _misc(z-index-base);
|
||||
|
||||
ul {
|
||||
@include vendor('display', 'flex');
|
||||
margin-bottom: 0;
|
||||
@include vendor('align-items', 'center');
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
border: solid _size(border-width) _palette(border);
|
||||
border-radius: _size(border-radius);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
padding-left: 0;
|
||||
border-left: solid _size(border-width) _palette(border);
|
||||
|
||||
&:first-child {
|
||||
border-left: 0;
|
||||
}
|
||||
display: block;
|
||||
padding: 0;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
min-width: 7.5rem;
|
||||
height: 2.75rem;
|
||||
line-height: 2.75rem;
|
||||
padding: 0 1.25rem 0 (1.25rem + _font(letter-spacing));
|
||||
text-transform: uppercase;
|
||||
position: relative;
|
||||
height: 3em;
|
||||
line-height: 3em;
|
||||
padding: 0 1.5em;
|
||||
background-color: transparentize(_palette(bg), 0.5);
|
||||
border-radius: _size(border-radius);
|
||||
border: 0;
|
||||
font-size: 0.8em;
|
||||
font-weight: _font(weight-bold);
|
||||
letter-spacing: _font(letter-spacing);
|
||||
font-size: 0.8rem;
|
||||
border-bottom: 0;
|
||||
|
||||
&:hover {
|
||||
background-color: _palette(border-bg);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: _palette(border-bg-alt);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
a[href="#menu"] {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
width: 4em;
|
||||
text-indent: 4em;
|
||||
font-size: 1em;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
white-space: nowrap;
|
||||
|
||||
&.use-middle {
|
||||
&:after {
|
||||
&:before, &:after {
|
||||
@include vendor('transition', 'opacity #{_duration(transition)} ease');
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: calc(50% - #{_size(border-width) * 1});
|
||||
width: _size(border-width);
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: _palette(border);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 2em 2em;
|
||||
}
|
||||
|
||||
ul {
|
||||
li {
|
||||
&.is-middle {
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body.is-article-visible & {
|
||||
@include vendor('transform', 'scale(0.95)');
|
||||
@include vendor('filter', 'blur(0.1rem)');
|
||||
&:before {
|
||||
background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" preserveAspectRatio="none"><style>line { stroke-width: 8px; stroke: #{_palette(accent1)}; }</style><line x1="0" y1="25" x2="100" y2="25" /><line x1="0" y1="50" x2="100" y2="50" /><line x1="0" y1="75" x2="100" y2="75" /></svg>');
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
body.is-loading & {
|
||||
> * {
|
||||
opacity: 0;
|
||||
&:after {
|
||||
background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" preserveAspectRatio="none"><style>line { stroke-width: 8px; stroke: #{_palette(fg)}; }</style><line x1="0" y1="25" x2="100" y2="25" /><line x1="0" y1="50" x2="100" y2="50" /><line x1="0" y1="75" x2="100" y2="75" /></svg>');
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@include vendor('filter', 'blur(0.125rem)');
|
||||
&:hover {
|
||||
&:before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.content {
|
||||
.inner {
|
||||
max-height: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
&:after {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(medium) {
|
||||
.content {
|
||||
p {
|
||||
br {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(small) {
|
||||
> * {
|
||||
margin-top: 2rem;
|
||||
|
||||
&:before {
|
||||
top: calc(-2rem - 1px);
|
||||
height: calc(2rem + 1px);
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 4.75rem;
|
||||
height: 4.75rem;
|
||||
line-height: 4.75rem;
|
||||
|
||||
.icon {
|
||||
&:before {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
.inner {
|
||||
padding: 2.5rem 1rem;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.875;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(xsmall) {
|
||||
padding: 1.5rem 0;
|
||||
|
||||
.content {
|
||||
.inner {
|
||||
padding: 2.5rem 0;
|
||||
}
|
||||
}
|
||||
@include padding(3em, 0, (1em, 0, -3em, 0));
|
||||
|
||||
nav {
|
||||
right: 0.5em;
|
||||
top: 0.5em;
|
||||
|
||||
ul {
|
||||
@include vendor('flex-direction', 'column');
|
||||
min-width: 10rem;
|
||||
max-width: 100%;
|
||||
|
||||
li {
|
||||
border-left: 0;
|
||||
border-top: solid _size(border-width) _palette(border);
|
||||
|
||||
&:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
height: 3rem;
|
||||
line-height: 3rem;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.use-middle {
|
||||
&:after {
|
||||
display: none;
|
||||
a[href="#menu"] {
|
||||
&:before, &:after {
|
||||
background-size: 1.5em 1.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
///
|
||||
/// Dimension by HTML5 UP
|
||||
/// Phantom by HTML5 UP
|
||||
/// html5up.net | @ajlkn
|
||||
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
///
|
||||
@@ -7,96 +7,9 @@
|
||||
/* Main */
|
||||
|
||||
#main {
|
||||
@include vendor('flex-grow', '1');
|
||||
@include vendor('flex-shrink', '1');
|
||||
@include vendor('display', 'flex');
|
||||
@include vendor('align-items', 'center');
|
||||
@include vendor('justify-content', 'center');
|
||||
@include vendor('flex-direction', 'column');
|
||||
position: relative;
|
||||
max-width: 100%;
|
||||
z-index: 3;
|
||||
|
||||
article {
|
||||
@include vendor('transform', 'translateY(0.25rem)');
|
||||
@include vendor('transition', (
|
||||
'opacity #{_duration(article)} ease-in-out',
|
||||
'transform #{_duration(article)} ease-in-out'
|
||||
));
|
||||
@include padding(2.5rem, 2.5rem, (2rem, 0, 1rem, 0));
|
||||
position: relative;
|
||||
width: 40rem;
|
||||
max-width: 100%;
|
||||
background-color: transparentize(_palette(bg), 0.15);
|
||||
border-radius: _size(border-radius);
|
||||
opacity: 0;
|
||||
|
||||
&.active {
|
||||
@include vendor('transform', 'translateY(0)');
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.close {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
cursor: pointer;
|
||||
text-indent: 4rem;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
&:before {
|
||||
@include vendor('transition', 'background-color #{_duration(transition)} ease-in-out');
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0.75rem;
|
||||
left: 0.75rem;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
border-radius: 100%;
|
||||
background-position: center;
|
||||
background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" viewBox="0 0 20 20" zoomAndPan="disable"><style>line { stroke: #{_palette(border)}; stroke-width: 1; }</style><line x1="2" y1="2" x2="18" y2="18" /><line x1="18" y1="2" x2="2" y2="18" /></svg>');
|
||||
background-size: 20px 20px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:before {
|
||||
background-color: _palette(border-bg);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
&:before {
|
||||
background-color: _palette(border-bg-alt);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include padding(5em, 0, (-5em, 0, 3em, 0));
|
||||
|
||||
@include breakpoint(small) {
|
||||
article {
|
||||
@include padding(2rem, 2rem, (1.5rem, 0, 0.5rem, 0));
|
||||
|
||||
.close {
|
||||
&:before {
|
||||
top: 0.875rem;
|
||||
left: 0.875rem;
|
||||
width: 2.25rem;
|
||||
height: 2.25rem;
|
||||
background-size: 14px 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(xsmall) {
|
||||
article {
|
||||
@include padding(2rem, 1.5rem, (1rem, 0, 0.5rem, 0));
|
||||
}
|
||||
@include padding(3em, 0, (-3em, 0, 3em, 0));
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,164 @@
|
||||
///
|
||||
/// Phantom by HTML5 UP
|
||||
/// html5up.net | @ajlkn
|
||||
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
///
|
||||
|
||||
/* Menu */
|
||||
|
||||
#wrapper {
|
||||
@include vendor('transition', 'opacity #{_duration(menu)} ease');
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#menu {
|
||||
@include vendor('transform', 'translateX(#{_size(menu)})');
|
||||
@include vendor('transition', ('transform #{_duration(menu)} ease', 'visibility #{_duration(menu)}'));
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: _size(menu);
|
||||
max-width: 80%;
|
||||
height: 100%;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
background: _palette(fg);
|
||||
color: _palette(bg);
|
||||
cursor: default;
|
||||
visibility: hidden;
|
||||
z-index: _misc(z-index-base) + 2;
|
||||
|
||||
> .inner {
|
||||
@include vendor('transition', 'opacity #{_duration(menu)} ease');
|
||||
-webkit-overflow-scrolling: touch;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 2.75em;
|
||||
opacity: 0;
|
||||
overflow-y: auto;
|
||||
|
||||
> ul {
|
||||
list-style: none;
|
||||
margin: 0 0 (_size(element-margin) * 0.5) 0;
|
||||
padding: 0;
|
||||
|
||||
> li {
|
||||
padding: 0;
|
||||
border-top: solid 1px transparentize(_palette(bg), 0.85);
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 1em 0;
|
||||
line-height: 1.5;
|
||||
border: 0;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-top: 0;
|
||||
margin-top: -1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .close {
|
||||
@include vendor('transition', (
|
||||
'opacity #{_duration(menu)} ease',
|
||||
'transform #{_duration(menu)} ease'
|
||||
));
|
||||
@include vendor('transform', 'scale(0.25) rotate(180deg)');
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 2em;
|
||||
left: -6em;
|
||||
width: 6em;
|
||||
text-indent: 6em;
|
||||
height: 3em;
|
||||
border: 0;
|
||||
font-size: 1em;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
white-space: nowrap;
|
||||
|
||||
&:before, &:after {
|
||||
@include vendor('transition', 'opacity #{_duration(transition)} ease');
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 2em 2em;
|
||||
}
|
||||
|
||||
&:before {
|
||||
background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" preserveAspectRatio="none"><style>line { stroke-width: 8px; stroke: #{_palette(accent1)}; }</style><line x1="15" y1="15" x2="85" y2="85" /><line x1="85" y1="15" x2="15" y2="85" /></svg>');
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" preserveAspectRatio="none"><style>line { stroke-width: 8px; stroke: #{_palette(fg)}; }</style><line x1="15" y1="15" x2="85" y2="85" /><line x1="85" y1="15" x2="15" y2="85" /></svg>');
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:after {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(small) {
|
||||
@include vendor('transform', 'translateX(#{_size(menu) * 0.75})');
|
||||
width: (_size(menu) * 0.75);
|
||||
|
||||
> .inner {
|
||||
padding: 2.75em 1.5em;
|
||||
}
|
||||
|
||||
> .close {
|
||||
top: 0.5em;
|
||||
left: -4.25em;
|
||||
width: 4.25em;
|
||||
text-indent: 4.25em;
|
||||
|
||||
&:before, &:after {
|
||||
background-size: 1.5em 1.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body.is-menu-visible {
|
||||
#wrapper {
|
||||
@include vendor('pointer-events', 'none');
|
||||
cursor: default;
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
#menu {
|
||||
@include vendor('transform', 'translateX(0)');
|
||||
visibility: visible;
|
||||
|
||||
> * {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.close {
|
||||
@include vendor('transform', 'scale(1.0) rotate(0deg)');
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
///
|
||||
/// Dimension by HTML5 UP
|
||||
/// Phantom by HTML5 UP
|
||||
/// html5up.net | @ajlkn
|
||||
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
///
|
||||
@@ -7,30 +7,20 @@
|
||||
/* Wrapper */
|
||||
|
||||
#wrapper {
|
||||
@include vendor('display', 'flex');
|
||||
@include vendor('flex-direction', 'column');
|
||||
@include vendor('align-items', 'center');
|
||||
@include vendor('justify-content', 'space-between');
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
> * {
|
||||
> .inner {
|
||||
$gutter: _size(gutter);
|
||||
|
||||
width: 100%;
|
||||
padding: 4rem 2rem;
|
||||
z-index: 3;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
display: block;
|
||||
}
|
||||
|
||||
@include breakpoint(xlarge) {
|
||||
padding: 3rem 2rem;
|
||||
}
|
||||
max-width: _size(inner);
|
||||
margin: 0 auto;
|
||||
padding: 0 $gutter;
|
||||
|
||||
@include breakpoint(small) {
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
$gutter: _size(gutter) * 0.5;
|
||||
|
||||
@include breakpoint(xsmall) {
|
||||
padding: 1rem;
|
||||
padding: 0 $gutter;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+26
-19
@@ -5,39 +5,46 @@
|
||||
|
||||
// Duration.
|
||||
$duration: (
|
||||
transition: 0.2s,
|
||||
bg: 2.5s,
|
||||
intro: 0.75s,
|
||||
article: 0.325s
|
||||
menu: 0.45s,
|
||||
transition: 0.2s
|
||||
);
|
||||
|
||||
// Size.
|
||||
$size: (
|
||||
border-radius: 4px,
|
||||
border-width: 1px,
|
||||
element-height: 2.75rem,
|
||||
element-margin: 2rem
|
||||
element-height: 3em,
|
||||
element-margin: 2em,
|
||||
gutter: 2.5em,
|
||||
field-gutter: 2em,
|
||||
inner: 68em,
|
||||
menu: 22em
|
||||
);
|
||||
|
||||
// Font.
|
||||
$font: (
|
||||
family: ('Source Sans Pro', sans-serif),
|
||||
family: ('Source Sans Pro', Helvetica, sans-serif),
|
||||
family-fixed: ('Courier New', monospace),
|
||||
weight: 300,
|
||||
weight-bold: 600,
|
||||
letter-spacing: 0.2rem,
|
||||
letter-spacing-heading: 0.5rem
|
||||
weight-bold: 900,
|
||||
weight-bold-alt: 700,
|
||||
letter-spacing: 0.35em,
|
||||
letter-spacing-alt: -0.035em
|
||||
);
|
||||
|
||||
// Palette.
|
||||
$palette: (
|
||||
bg: #1b1f22,
|
||||
bg-alt: #000000,
|
||||
bg-overlay: rgba(19,21,25,0.5),
|
||||
fg: #ffffff,
|
||||
fg-bold: #ffffff,
|
||||
fg-light: rgba(255,255,255,0.5),
|
||||
border: #ffffff,
|
||||
border-bg: rgba(255,255,255,0.075),
|
||||
border-bg-alt: rgba(255,255,255,0.175)
|
||||
bg: #ffffff,
|
||||
bg-accent: #333333,
|
||||
bg-alt: #f6f6f6,
|
||||
fg: #585858,
|
||||
fg-accent: #ffffff,
|
||||
border: #c9c9c9,
|
||||
border-bg: rgba(144,144,144,0.075),
|
||||
accent1: #f2849e,
|
||||
accent2: #7ecaf6,
|
||||
accent3: #7bd0c1,
|
||||
accent4: #c75b9b,
|
||||
accent5: #ae85ca,
|
||||
accent6: #8499e7,
|
||||
);
|
||||
+24
-7
@@ -3,10 +3,10 @@
|
||||
@import 'libs/mixins';
|
||||
@import 'libs/skel';
|
||||
@import 'font-awesome.min.css';
|
||||
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300italic,600italic,300,600');
|
||||
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,700,900');
|
||||
|
||||
/*
|
||||
Dimension by HTML5 UP
|
||||
Phantom by HTML5 UP
|
||||
html5up.net | @ajlkn
|
||||
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
*/
|
||||
@@ -22,7 +22,22 @@
|
||||
|
||||
@include skel-layout((
|
||||
reset: 'full',
|
||||
boxModel: 'border'
|
||||
boxModel: 'border',
|
||||
grid: (
|
||||
gutters: 2em
|
||||
),
|
||||
breakpoints: (
|
||||
medium: (
|
||||
grid: (
|
||||
gutters: 1.5em
|
||||
)
|
||||
),
|
||||
small: (
|
||||
grid: (
|
||||
gutters: 1em
|
||||
)
|
||||
)
|
||||
)
|
||||
));
|
||||
|
||||
// Base.
|
||||
@@ -32,18 +47,20 @@
|
||||
|
||||
// Component.
|
||||
|
||||
@import 'components/section';
|
||||
@import 'components/icon';
|
||||
@import 'components/list';
|
||||
@import 'components/form';
|
||||
@import 'components/box';
|
||||
@import 'components/icon';
|
||||
@import 'components/image';
|
||||
@import 'components/list';
|
||||
@import 'components/table';
|
||||
@import 'components/button';
|
||||
@import 'components/tiles';
|
||||
|
||||
// Layout.
|
||||
|
||||
@import 'layout/bg';
|
||||
@import 'layout/wrapper';
|
||||
@import 'layout/header';
|
||||
@import 'layout/menu';
|
||||
@import 'layout/main';
|
||||
@import 'layout/footer';
|
||||
@import 'layout/wrapper';
|
||||
@@ -1,19 +0,0 @@
|
||||
@import 'libs/vars';
|
||||
@import 'libs/functions';
|
||||
@import 'libs/mixins';
|
||||
@import 'libs/skel';
|
||||
|
||||
/*
|
||||
Dimension by HTML5 UP
|
||||
html5up.net | @ajlkn
|
||||
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
*/
|
||||
|
||||
/* Main */
|
||||
|
||||
#main {
|
||||
article {
|
||||
opacity: 1;
|
||||
margin: (_size(element-margin) * 2) 0 0 0;
|
||||
}
|
||||
}
|
||||
+419
@@ -0,0 +1,419 @@
|
||||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Phantom by HTML5 UP
|
||||
html5up.net | @ajlkn
|
||||
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>Elements - Phantom by HTML5 UP</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
|
||||
<link rel="stylesheet" href="assets/css/main.css" />
|
||||
<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
|
||||
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
|
||||
</head>
|
||||
<body>
|
||||
<!-- Wrapper -->
|
||||
<div id="wrapper">
|
||||
|
||||
<!-- Header -->
|
||||
<header id="header">
|
||||
<div class="inner">
|
||||
|
||||
<!-- Logo -->
|
||||
<a href="index.html" class="logo">
|
||||
<span class="symbol"><img src="images/logo.svg" alt="" /></span><span class="title">Phantom</span>
|
||||
</a>
|
||||
|
||||
<!-- Nav -->
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#menu">Menu</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Menu -->
|
||||
<nav id="menu">
|
||||
<h2>Menu</h2>
|
||||
<ul>
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="generic.html">Ipsum veroeros</a></li>
|
||||
<li><a href="generic.html">Tempus etiam</a></li>
|
||||
<li><a href="generic.html">Consequat dolor</a></li>
|
||||
<li><a href="elements.html">Elements</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- Main -->
|
||||
<div id="main">
|
||||
<div class="inner">
|
||||
<h1>Elements</h1>
|
||||
|
||||
<!-- Text -->
|
||||
<section>
|
||||
<h2>Text</h2>
|
||||
<p>This is <b>bold</b> and this is <strong>strong</strong>. This is <i>italic</i> and this is <em>emphasized</em>.
|
||||
This is <sup>superscript</sup> text and this is <sub>subscript</sub> text.
|
||||
This is <u>underlined</u> and this is code: <code>for (;;) { ... }</code>. Finally, <a href="#">this is a link</a>.</p>
|
||||
<hr />
|
||||
<p>Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.</p>
|
||||
<hr />
|
||||
<h2>Heading Level 2</h2>
|
||||
<h3>Heading Level 3</h3>
|
||||
<h4>Heading Level 4</h4>
|
||||
<hr />
|
||||
<h3>Blockquote</h3>
|
||||
<blockquote>Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan faucibus. Vestibulum ante ipsum primis in faucibus lorem ipsum dolor sit amet nullam adipiscing eu felis.</blockquote>
|
||||
<h3>Preformatted</h3>
|
||||
<pre><code>i = 0;
|
||||
|
||||
while (!deck.isInOrder()) {
|
||||
print 'Iteration ' + i;
|
||||
deck.shuffle();
|
||||
i++;
|
||||
}
|
||||
|
||||
print 'It took ' + i + ' iterations to sort the deck.';</code></pre>
|
||||
</section>
|
||||
|
||||
<!-- Lists -->
|
||||
<section>
|
||||
<h2>Lists</h2>
|
||||
<div class="row">
|
||||
<div class="6u 12u$(medium)">
|
||||
<h3>Unordered</h3>
|
||||
<ul>
|
||||
<li>Dolor pulvinar etiam.</li>
|
||||
<li>Sagittis adipiscing.</li>
|
||||
<li>Felis enim feugiat.</li>
|
||||
</ul>
|
||||
<h3>Alternate</h3>
|
||||
<ul class="alt">
|
||||
<li>Dolor pulvinar etiam.</li>
|
||||
<li>Sagittis adipiscing.</li>
|
||||
<li>Felis enim feugiat.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="6u$ 12u$(medium)">
|
||||
<h3>Ordered</h3>
|
||||
<ol>
|
||||
<li>Dolor pulvinar etiam.</li>
|
||||
<li>Etiam vel felis viverra.</li>
|
||||
<li>Felis enim feugiat.</li>
|
||||
<li>Dolor pulvinar etiam.</li>
|
||||
<li>Etiam vel felis lorem.</li>
|
||||
<li>Felis enim et feugiat.</li>
|
||||
</ol>
|
||||
<h3>Icons</h3>
|
||||
<ul class="icons">
|
||||
<li><a href="#" class="icon style1 fa-twitter"><span class="label">Twitter</span></a></li>
|
||||
<li><a href="#" class="icon style1 fa-facebook"><span class="label">Facebook</span></a></li>
|
||||
<li><a href="#" class="icon style1 fa-instagram"><span class="label">Instagram</span></a></li>
|
||||
<li><a href="#" class="icon style1 fa-github"><span class="label">Github</span></a></li>
|
||||
</ul>
|
||||
<ul class="icons">
|
||||
<li><a href="#" class="icon style2 fa-twitter"><span class="label">Twitter</span></a></li>
|
||||
<li><a href="#" class="icon style2 fa-facebook"><span class="label">Facebook</span></a></li>
|
||||
<li><a href="#" class="icon style2 fa-instagram"><span class="label">Instagram</span></a></li>
|
||||
<li><a href="#" class="icon style2 fa-github"><span class="label">Github</span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<h2>Actions</h2>
|
||||
<div class="row">
|
||||
<div class="6u 12u$(medium)">
|
||||
<ul class="actions">
|
||||
<li><a href="#" class="button special">Default</a></li>
|
||||
<li><a href="#" class="button">Default</a></li>
|
||||
</ul>
|
||||
<ul class="actions small">
|
||||
<li><a href="#" class="button special small">Small</a></li>
|
||||
<li><a href="#" class="button small">Small</a></li>
|
||||
</ul>
|
||||
<ul class="actions vertical">
|
||||
<li><a href="#" class="button special">Default</a></li>
|
||||
<li><a href="#" class="button">Default</a></li>
|
||||
</ul>
|
||||
<ul class="actions vertical small">
|
||||
<li><a href="#" class="button special small">Small</a></li>
|
||||
<li><a href="#" class="button small">Small</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="6u 12u$(medium)">
|
||||
<ul class="actions vertical">
|
||||
<li><a href="#" class="button special fit">Default</a></li>
|
||||
<li><a href="#" class="button fit">Default</a></li>
|
||||
</ul>
|
||||
<ul class="actions vertical small">
|
||||
<li><a href="#" class="button special small fit">Small</a></li>
|
||||
<li><a href="#" class="button small fit">Small</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Table -->
|
||||
<section>
|
||||
<h2>Table</h2>
|
||||
<h3>Default</h3>
|
||||
<div class="table-wrapper">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Description</th>
|
||||
<th>Price</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Item One</td>
|
||||
<td>Ante turpis integer aliquet porttitor.</td>
|
||||
<td>29.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Item Two</td>
|
||||
<td>Vis ac commodo adipiscing arcu aliquet.</td>
|
||||
<td>19.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Item Three</td>
|
||||
<td> Morbi faucibus arcu accumsan lorem.</td>
|
||||
<td>29.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Item Four</td>
|
||||
<td>Vitae integer tempus condimentum.</td>
|
||||
<td>19.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Item Five</td>
|
||||
<td>Ante turpis integer aliquet porttitor.</td>
|
||||
<td>29.99</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="2"></td>
|
||||
<td>100.00</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h3>Alternate</h3>
|
||||
<div class="table-wrapper">
|
||||
<table class="alt">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Description</th>
|
||||
<th>Price</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Item One</td>
|
||||
<td>Ante turpis integer aliquet porttitor.</td>
|
||||
<td>29.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Item Two</td>
|
||||
<td>Vis ac commodo adipiscing arcu aliquet.</td>
|
||||
<td>19.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Item Three</td>
|
||||
<td> Morbi faucibus arcu accumsan lorem.</td>
|
||||
<td>29.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Item Four</td>
|
||||
<td>Vitae integer tempus condimentum.</td>
|
||||
<td>19.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Item Five</td>
|
||||
<td>Ante turpis integer aliquet porttitor.</td>
|
||||
<td>29.99</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="2"></td>
|
||||
<td>100.00</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Buttons -->
|
||||
<section>
|
||||
<h3>Buttons</h3>
|
||||
<ul class="actions">
|
||||
<li><a href="#" class="button special">Special</a></li>
|
||||
<li><a href="#" class="button">Default</a></li>
|
||||
</ul>
|
||||
<ul class="actions">
|
||||
<li><a href="#" class="button big">Big</a></li>
|
||||
<li><a href="#" class="button">Default</a></li>
|
||||
<li><a href="#" class="button small">Small</a></li>
|
||||
</ul>
|
||||
<ul class="actions fit">
|
||||
<li><a href="#" class="button special fit">Fit</a></li>
|
||||
<li><a href="#" class="button fit">Fit</a></li>
|
||||
<li><a href="#" class="button fit">Fit</a></li>
|
||||
</ul>
|
||||
<ul class="actions fit small">
|
||||
<li><a href="#" class="button special fit small">Fit + Small</a></li>
|
||||
<li><a href="#" class="button fit small">Fit + Small</a></li>
|
||||
<li><a href="#" class="button fit small">Fit + Small</a></li>
|
||||
</ul>
|
||||
<ul class="actions">
|
||||
<li><a href="#" class="button special icon fa-download">Icon</a></li>
|
||||
<li><a href="#" class="button icon fa-upload">Icon</a></li>
|
||||
<li><a href="#" class="button icon fa-save">Icon</a></li>
|
||||
</ul>
|
||||
<ul class="actions">
|
||||
<li><span class="button special disabled">Disabled</span></li>
|
||||
<li><span class="button disabled">Disabled</span></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<!-- Form -->
|
||||
<section>
|
||||
<h2>Form</h2>
|
||||
<form method="post" action="#">
|
||||
<div class="row uniform">
|
||||
<div class="6u 12u$(xsmall)">
|
||||
<input type="text" name="demo-name" id="demo-name" value="" placeholder="Name" />
|
||||
</div>
|
||||
<div class="6u$ 12u$(xsmall)">
|
||||
<input type="email" name="demo-email" id="demo-email" value="" placeholder="Email" />
|
||||
</div>
|
||||
<div class="12u$">
|
||||
<div class="select-wrapper">
|
||||
<select name="demo-category" id="demo-category">
|
||||
<option value="">- Category -</option>
|
||||
<option value="1">Manufacturing</option>
|
||||
<option value="1">Shipping</option>
|
||||
<option value="1">Administration</option>
|
||||
<option value="1">Human Resources</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="4u 12u$(small)">
|
||||
<input type="radio" id="demo-priority-low" name="demo-priority" checked>
|
||||
<label for="demo-priority-low">Low</label>
|
||||
</div>
|
||||
<div class="4u 12u$(small)">
|
||||
<input type="radio" id="demo-priority-normal" name="demo-priority">
|
||||
<label for="demo-priority-normal">Normal</label>
|
||||
</div>
|
||||
<div class="4u$ 12u$(small)">
|
||||
<input type="radio" id="demo-priority-high" name="demo-priority">
|
||||
<label for="demo-priority-high">High</label>
|
||||
</div>
|
||||
<div class="6u 12u$(small)">
|
||||
<input type="checkbox" id="demo-copy" name="demo-copy">
|
||||
<label for="demo-copy">Email me a copy</label>
|
||||
</div>
|
||||
<div class="6u$ 12u$(small)">
|
||||
<input type="checkbox" id="demo-human" name="demo-human" checked>
|
||||
<label for="demo-human">Not a robot</label>
|
||||
</div>
|
||||
<div class="12u$">
|
||||
<textarea name="demo-message" id="demo-message" placeholder="Enter your message" rows="6"></textarea>
|
||||
</div>
|
||||
<div class="12u$">
|
||||
<ul class="actions">
|
||||
<li><input type="submit" value="Send Message" class="special" /></li>
|
||||
<li><input type="reset" value="Reset" /></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<!-- Image -->
|
||||
<section>
|
||||
<h2>Image</h2>
|
||||
<h3>Fit</h3>
|
||||
<div class="box alt">
|
||||
<div class="row uniform">
|
||||
<div class="12u$"><span class="image fit"><img src="images/pic13.jpg" alt="" /></span></div>
|
||||
<div class="4u"><span class="image fit"><img src="images/pic01.jpg" alt="" /></span></div>
|
||||
<div class="4u"><span class="image fit"><img src="images/pic02.jpg" alt="" /></span></div>
|
||||
<div class="4u$"><span class="image fit"><img src="images/pic03.jpg" alt="" /></span></div>
|
||||
<div class="4u"><span class="image fit"><img src="images/pic03.jpg" alt="" /></span></div>
|
||||
<div class="4u"><span class="image fit"><img src="images/pic01.jpg" alt="" /></span></div>
|
||||
<div class="4u$"><span class="image fit"><img src="images/pic02.jpg" alt="" /></span></div>
|
||||
<div class="4u"><span class="image fit"><img src="images/pic02.jpg" alt="" /></span></div>
|
||||
<div class="4u"><span class="image fit"><img src="images/pic03.jpg" alt="" /></span></div>
|
||||
<div class="4u$"><span class="image fit"><img src="images/pic01.jpg" alt="" /></span></div>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Left & Right</h3>
|
||||
<p><span class="image left"><img src="images/pic14.jpg" alt="" /></span>Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent.</p>
|
||||
<p><span class="image right"><img src="images/pic15.jpg" alt="" /></span>Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent.</p>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer id="footer">
|
||||
<div class="inner">
|
||||
<section>
|
||||
<h2>Get in touch</h2>
|
||||
<form method="post" action="#">
|
||||
<div class="field half first">
|
||||
<input type="text" name="name" id="name" placeholder="Name" />
|
||||
</div>
|
||||
<div class="field half">
|
||||
<input type="email" name="email" id="email" placeholder="Email" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<textarea name="message" id="message" placeholder="Message"></textarea>
|
||||
</div>
|
||||
<ul class="actions">
|
||||
<li><input type="submit" value="Send" class="special" /></li>
|
||||
</ul>
|
||||
</form>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Follow</h2>
|
||||
<ul class="icons">
|
||||
<li><a href="#" class="icon style2 fa-twitter"><span class="label">Twitter</span></a></li>
|
||||
<li><a href="#" class="icon style2 fa-facebook"><span class="label">Facebook</span></a></li>
|
||||
<li><a href="#" class="icon style2 fa-instagram"><span class="label">Instagram</span></a></li>
|
||||
<li><a href="#" class="icon style2 fa-dribbble"><span class="label">Dribbble</span></a></li>
|
||||
<li><a href="#" class="icon style2 fa-github"><span class="label">GitHub</span></a></li>
|
||||
<li><a href="#" class="icon style2 fa-500px"><span class="label">500px</span></a></li>
|
||||
<li><a href="#" class="icon style2 fa-phone"><span class="label">Phone</span></a></li>
|
||||
<li><a href="#" class="icon style2 fa-envelope-o"><span class="label">Email</span></a></li>
|
||||
</ul>
|
||||
</section>
|
||||
<ul class="copyright">
|
||||
<li>© Untitled. All rights reserved</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="assets/js/jquery.min.js"></script>
|
||||
<script src="assets/js/skel.min.js"></script>
|
||||
<script src="assets/js/util.js"></script>
|
||||
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
|
||||
<script src="assets/js/main.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+112
@@ -0,0 +1,112 @@
|
||||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Phantom by HTML5 UP
|
||||
html5up.net | @ajlkn
|
||||
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>Generic - Phantom by HTML5 UP</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
|
||||
<link rel="stylesheet" href="assets/css/main.css" />
|
||||
<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
|
||||
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
|
||||
</head>
|
||||
<body>
|
||||
<!-- Wrapper -->
|
||||
<div id="wrapper">
|
||||
|
||||
<!-- Header -->
|
||||
<header id="header">
|
||||
<div class="inner">
|
||||
|
||||
<!-- Logo -->
|
||||
<a href="index.html" class="logo">
|
||||
<span class="symbol"><img src="images/logo.svg" alt="" /></span><span class="title">Phantom</span>
|
||||
</a>
|
||||
|
||||
<!-- Nav -->
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#menu">Menu</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Menu -->
|
||||
<nav id="menu">
|
||||
<h2>Menu</h2>
|
||||
<ul>
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="generic.html">Ipsum veroeros</a></li>
|
||||
<li><a href="generic.html">Tempus etiam</a></li>
|
||||
<li><a href="generic.html">Consequat dolor</a></li>
|
||||
<li><a href="elements.html">Elements</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- Main -->
|
||||
<div id="main">
|
||||
<div class="inner">
|
||||
<h1>Generic Page</h1>
|
||||
<span class="image main"><img src="images/pic13.jpg" alt="" /></span>
|
||||
<p>Donec eget ex magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque venenatis dolor imperdiet dolor mattis sagittis. Praesent rutrum sem diam, vitae egestas enim auctor sit amet. Pellentesque leo mauris, consectetur id ipsum sit amet, fergiat. Pellentesque in mi eu massa lacinia malesuada et a elit. Donec urna ex, lacinia in purus ac, pretium pulvinar mauris. Curabitur sapien risus, commodo eget turpis at, elementum convallis elit. Pellentesque enim turpis, hendrerit tristique.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dapibus rutrum facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam tristique libero eu nibh porttitor fermentum. Nullam venenatis erat id vehicula viverra. Nunc ultrices eros ut ultricies condimentum. Mauris risus lacus, blandit sit amet venenatis non, bibendum vitae dolor. Nunc lorem mauris, fringilla in aliquam at, euismod in lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In non lorem sit amet elit placerat maximus. Pellentesque aliquam maximus risus, vel venenatis mauris vehicula hendrerit.</p>
|
||||
<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque venenatis dolor imperdiet dolor mattis sagittis. Praesent rutrum sem diam, vitae egestas enim auctor sit amet. Pellentesque leo mauris, consectetur id ipsum sit amet, fersapien risus, commodo eget turpis at, elementum convallis elit. Pellentesque enim turpis, hendrerit tristique lorem ipsum dolor.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer id="footer">
|
||||
<div class="inner">
|
||||
<section>
|
||||
<h2>Get in touch</h2>
|
||||
<form method="post" action="#">
|
||||
<div class="field half first">
|
||||
<input type="text" name="name" id="name" placeholder="Name" />
|
||||
</div>
|
||||
<div class="field half">
|
||||
<input type="email" name="email" id="email" placeholder="Email" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<textarea name="message" id="message" placeholder="Message"></textarea>
|
||||
</div>
|
||||
<ul class="actions">
|
||||
<li><input type="submit" value="Send" class="special" /></li>
|
||||
</ul>
|
||||
</form>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Follow</h2>
|
||||
<ul class="icons">
|
||||
<li><a href="#" class="icon style2 fa-twitter"><span class="label">Twitter</span></a></li>
|
||||
<li><a href="#" class="icon style2 fa-facebook"><span class="label">Facebook</span></a></li>
|
||||
<li><a href="#" class="icon style2 fa-instagram"><span class="label">Instagram</span></a></li>
|
||||
<li><a href="#" class="icon style2 fa-dribbble"><span class="label">Dribbble</span></a></li>
|
||||
<li><a href="#" class="icon style2 fa-github"><span class="label">GitHub</span></a></li>
|
||||
<li><a href="#" class="icon style2 fa-500px"><span class="label">500px</span></a></li>
|
||||
<li><a href="#" class="icon style2 fa-phone"><span class="label">Phone</span></a></li>
|
||||
<li><a href="#" class="icon style2 fa-envelope-o"><span class="label">Email</span></a></li>
|
||||
</ul>
|
||||
</section>
|
||||
<ul class="copyright">
|
||||
<li>© Untitled. All rights reserved</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="assets/js/jquery.min.js"></script>
|
||||
<script src="assets/js/skel.min.js"></script>
|
||||
<script src="assets/js/util.js"></script>
|
||||
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
|
||||
<script src="assets/js/main.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 37 KiB |
@@ -0,0 +1,14 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="149.167px" height="172.243px" viewBox="0 0 149.167 172.243" enable-background="new 0 0 149.167 172.243"
|
||||
xml:space="preserve">
|
||||
<polygon fill="#585858" points="149.167,129.183 74.583,172.243 0,129.183 0,43.061 74.583,0 149.167,43.061 "/>
|
||||
<path fill="#FFFFFF" d="M41.88,84.75l25.09,26.783L54.889,84.75H41.88z M74.583,115.841L88.64,84.75H60.527L74.583,115.841z
|
||||
M55.009,79.594l8.217-15.466H52.673l-11.6,15.466H55.009z M82.196,111.533l25.091-26.783h-13.01L82.196,111.533z M60.849,79.594
|
||||
h27.469l-8.217-15.466H69.065L60.849,79.594z M94.157,79.594h13.936L96.494,64.128H85.942L94.157,79.594z M99.835,60.02
|
||||
l15.467,20.621c0.376,0.483,0.55,1.04,0.523,1.671c-0.027,0.632-0.257,1.174-0.686,1.632l-38.664,41.243
|
||||
c-0.483,0.536-1.113,0.804-1.893,0.804c-0.778,0-1.408-0.268-1.892-0.804L34.026,83.944c-0.429-0.457-0.658-1-0.685-1.632
|
||||
c-0.027-0.631,0.147-1.188,0.523-1.671L49.331,60.02c0.484-0.699,1.168-1.047,2.054-1.047h46.398
|
||||
C98.667,58.973,99.353,59.322,99.835,60.02z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.8 KiB After Width: | Height: | Size: 6.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.7 KiB After Width: | Height: | Size: 5.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.5 KiB After Width: | Height: | Size: 5.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
+197
-311
@@ -1,359 +1,245 @@
|
||||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Dimension by HTML5 UP
|
||||
Phantom by HTML5 UP
|
||||
html5up.net | @ajlkn
|
||||
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>Dimension by HTML5 UP</title>
|
||||
<title>Phantom by HTML5 UP</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
|
||||
<link rel="stylesheet" href="assets/css/main.css" />
|
||||
<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
|
||||
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
|
||||
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Wrapper -->
|
||||
<div id="wrapper">
|
||||
|
||||
<!-- Header -->
|
||||
<header id="header">
|
||||
<div class="logo">
|
||||
<span class="icon fa-diamond"></span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="inner">
|
||||
<h1>Dimension</h1>
|
||||
<p>A fully responsive site template designed by <a href="https://html5up.net">HTML5 UP</a> and released<br />
|
||||
for free under the <a href="https://html5up.net/license">Creative Commons</a> license.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Logo -->
|
||||
<a href="index.html" class="logo">
|
||||
<span class="symbol"><img src="images/logo.svg" alt="" /></span><span class="title">Phantom</span>
|
||||
</a>
|
||||
|
||||
<!-- Nav -->
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#intro">Intro</a></li>
|
||||
<li><a href="#work">Work</a></li>
|
||||
<li><a href="#about">About</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
<!--<li><a href="#elements">Elements</a></li>-->
|
||||
<li><a href="#menu">Menu</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Menu -->
|
||||
<nav id="menu">
|
||||
<h2>Menu</h2>
|
||||
<ul>
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="generic.html">Ipsum veroeros</a></li>
|
||||
<li><a href="generic.html">Tempus etiam</a></li>
|
||||
<li><a href="generic.html">Consequat dolor</a></li>
|
||||
<li><a href="elements.html">Elements</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- Main -->
|
||||
<div id="main">
|
||||
|
||||
<!-- Intro -->
|
||||
<article id="intro">
|
||||
<h2 class="major">Intro</h2>
|
||||
<span class="image main"><img src="images/pic01.jpg" alt="" /></span>
|
||||
<p>Aenean ornare velit lacus, ac varius enim ullamcorper eu. Proin aliquam facilisis ante interdum congue. Integer mollis, nisl amet convallis, porttitor magna ullamcorper, amet egestas mauris. Ut magna finibus nisi nec lacinia. Nam maximus erat id euismod egestas. By the way, check out my <a href="#work">awesome work</a>.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dapibus rutrum facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam tristique libero eu nibh porttitor fermentum. Nullam venenatis erat id vehicula viverra. Nunc ultrices eros ut ultricies condimentum. Mauris risus lacus, blandit sit amet venenatis non, bibendum vitae dolor. Nunc lorem mauris, fringilla in aliquam at, euismod in lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In non lorem sit amet elit placerat maximus. Pellentesque aliquam maximus risus, vel sed vehicula.</p>
|
||||
<div class="inner">
|
||||
<header>
|
||||
<h1>This is Phantom, a free, fully responsive site<br />
|
||||
template designed by <a href="http://html5up.net">HTML5 UP</a>.</h1>
|
||||
<p>Etiam quis viverra lorem, in semper lorem. Sed nisl arcu euismod sit amet nisi euismod sed cursus arcu elementum ipsum arcu vivamus quis venenatis orci lorem ipsum et magna feugiat veroeros aliquam. Lorem ipsum dolor sit amet nullam dolore.</p>
|
||||
</header>
|
||||
<section class="tiles">
|
||||
<article class="style1">
|
||||
<span class="image">
|
||||
<img src="images/pic01.jpg" alt="" />
|
||||
</span>
|
||||
<a href="generic.html">
|
||||
<h2>Magna</h2>
|
||||
<div class="content">
|
||||
<p>Sed nisl arcu euismod sit amet nisi lorem etiam dolor veroeros et feugiat.</p>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
|
||||
<!-- Work -->
|
||||
<article id="work">
|
||||
<h2 class="major">Work</h2>
|
||||
<span class="image main"><img src="images/pic02.jpg" alt="" /></span>
|
||||
<p>Adipiscing magna sed dolor elit. Praesent eleifend dignissim arcu, at eleifend sapien imperdiet ac. Aliquam erat volutpat. Praesent urna nisi, fringila lorem et vehicula lacinia quam. Integer sollicitudin mauris nec lorem luctus ultrices.</p>
|
||||
<p>Nullam et orci eu lorem consequat tincidunt vivamus et sagittis libero. Mauris aliquet magna magna sed nunc rhoncus pharetra. Pellentesque condimentum sem. In efficitur ligula tate urna. Maecenas laoreet massa vel lacinia pellentesque lorem ipsum dolor. Nullam et orci eu lorem consequat tincidunt. Vivamus et sagittis libero. Mauris aliquet magna magna sed nunc rhoncus amet feugiat tempus.</p>
|
||||
<article class="style2">
|
||||
<span class="image">
|
||||
<img src="images/pic02.jpg" alt="" />
|
||||
</span>
|
||||
<a href="generic.html">
|
||||
<h2>Lorem</h2>
|
||||
<div class="content">
|
||||
<p>Sed nisl arcu euismod sit amet nisi lorem etiam dolor veroeros et feugiat.</p>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
|
||||
<!-- About -->
|
||||
<article id="about">
|
||||
<h2 class="major">About</h2>
|
||||
<span class="image main"><img src="images/pic03.jpg" alt="" /></span>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur et adipiscing elit. Praesent eleifend dignissim arcu, at eleifend sapien imperdiet ac. Aliquam erat volutpat. Praesent urna nisi, fringila lorem et vehicula lacinia quam. Integer sollicitudin mauris nec lorem luctus ultrices. Aliquam libero et malesuada fames ac ante ipsum primis in faucibus. Cras viverra ligula sit amet ex mollis mattis lorem ipsum dolor sit amet.</p>
|
||||
<article class="style3">
|
||||
<span class="image">
|
||||
<img src="images/pic03.jpg" alt="" />
|
||||
</span>
|
||||
<a href="generic.html">
|
||||
<h2>Feugiat</h2>
|
||||
<div class="content">
|
||||
<p>Sed nisl arcu euismod sit amet nisi lorem etiam dolor veroeros et feugiat.</p>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
|
||||
<!-- Contact -->
|
||||
<article id="contact">
|
||||
<h2 class="major">Contact</h2>
|
||||
<form method="post" action="#">
|
||||
<div class="field half first">
|
||||
<label for="name">Name</label>
|
||||
<input type="text" name="name" id="name" />
|
||||
<article class="style4">
|
||||
<span class="image">
|
||||
<img src="images/pic04.jpg" alt="" />
|
||||
</span>
|
||||
<a href="generic.html">
|
||||
<h2>Tempus</h2>
|
||||
<div class="content">
|
||||
<p>Sed nisl arcu euismod sit amet nisi lorem etiam dolor veroeros et feugiat.</p>
|
||||
</div>
|
||||
<div class="field half">
|
||||
<label for="email">Email</label>
|
||||
<input type="text" name="email" id="email" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="message">Message</label>
|
||||
<textarea name="message" id="message" rows="4"></textarea>
|
||||
</div>
|
||||
<ul class="actions">
|
||||
<li><input type="submit" value="Send Message" class="special" /></li>
|
||||
<li><input type="reset" value="Reset" /></li>
|
||||
</ul>
|
||||
</form>
|
||||
<ul class="icons">
|
||||
<li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
|
||||
<li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
|
||||
<li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
|
||||
<li><a href="#" class="icon fa-github"><span class="label">GitHub</span></a></li>
|
||||
</ul>
|
||||
</a>
|
||||
</article>
|
||||
|
||||
<!-- Elements -->
|
||||
<article id="elements">
|
||||
<h2 class="major">Elements</h2>
|
||||
|
||||
<section>
|
||||
<h3 class="major">Text</h3>
|
||||
<p>This is <b>bold</b> and this is <strong>strong</strong>. This is <i>italic</i> and this is <em>emphasized</em>.
|
||||
This is <sup>superscript</sup> text and this is <sub>subscript</sub> text.
|
||||
This is <u>underlined</u> and this is code: <code>for (;;) { ... }</code>. Finally, <a href="#">this is a link</a>.</p>
|
||||
<hr />
|
||||
<h2>Heading Level 2</h2>
|
||||
<h3>Heading Level 3</h3>
|
||||
<h4>Heading Level 4</h4>
|
||||
<h5>Heading Level 5</h5>
|
||||
<h6>Heading Level 6</h6>
|
||||
<hr />
|
||||
<h4>Blockquote</h4>
|
||||
<blockquote>Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan faucibus. Vestibulum ante ipsum primis in faucibus lorem ipsum dolor sit amet nullam adipiscing eu felis.</blockquote>
|
||||
<h4>Preformatted</h4>
|
||||
<pre><code>i = 0;
|
||||
|
||||
while (!deck.isInOrder()) {
|
||||
print 'Iteration ' + i;
|
||||
deck.shuffle();
|
||||
i++;
|
||||
}
|
||||
|
||||
print 'It took ' + i + ' iterations to sort the deck.';</code></pre>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3 class="major">Lists</h3>
|
||||
|
||||
<h4>Unordered</h4>
|
||||
<ul>
|
||||
<li>Dolor pulvinar etiam.</li>
|
||||
<li>Sagittis adipiscing.</li>
|
||||
<li>Felis enim feugiat.</li>
|
||||
</ul>
|
||||
|
||||
<h4>Alternate</h4>
|
||||
<ul class="alt">
|
||||
<li>Dolor pulvinar etiam.</li>
|
||||
<li>Sagittis adipiscing.</li>
|
||||
<li>Felis enim feugiat.</li>
|
||||
</ul>
|
||||
|
||||
<h4>Ordered</h4>
|
||||
<ol>
|
||||
<li>Dolor pulvinar etiam.</li>
|
||||
<li>Etiam vel felis viverra.</li>
|
||||
<li>Felis enim feugiat.</li>
|
||||
<li>Dolor pulvinar etiam.</li>
|
||||
<li>Etiam vel felis lorem.</li>
|
||||
<li>Felis enim et feugiat.</li>
|
||||
</ol>
|
||||
<h4>Icons</h4>
|
||||
<ul class="icons">
|
||||
<li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
|
||||
<li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
|
||||
<li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
|
||||
<li><a href="#" class="icon fa-github"><span class="label">Github</span></a></li>
|
||||
</ul>
|
||||
|
||||
<h4>Actions</h4>
|
||||
<ul class="actions">
|
||||
<li><a href="#" class="button special">Default</a></li>
|
||||
<li><a href="#" class="button">Default</a></li>
|
||||
</ul>
|
||||
<ul class="actions vertical">
|
||||
<li><a href="#" class="button special">Default</a></li>
|
||||
<li><a href="#" class="button">Default</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3 class="major">Table</h3>
|
||||
<h4>Default</h4>
|
||||
<div class="table-wrapper">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Description</th>
|
||||
<th>Price</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Item One</td>
|
||||
<td>Ante turpis integer aliquet porttitor.</td>
|
||||
<td>29.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Item Two</td>
|
||||
<td>Vis ac commodo adipiscing arcu aliquet.</td>
|
||||
<td>19.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Item Three</td>
|
||||
<td> Morbi faucibus arcu accumsan lorem.</td>
|
||||
<td>29.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Item Four</td>
|
||||
<td>Vitae integer tempus condimentum.</td>
|
||||
<td>19.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Item Five</td>
|
||||
<td>Ante turpis integer aliquet porttitor.</td>
|
||||
<td>29.99</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="2"></td>
|
||||
<td>100.00</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<article class="style5">
|
||||
<span class="image">
|
||||
<img src="images/pic05.jpg" alt="" />
|
||||
</span>
|
||||
<a href="generic.html">
|
||||
<h2>Aliquam</h2>
|
||||
<div class="content">
|
||||
<p>Sed nisl arcu euismod sit amet nisi lorem etiam dolor veroeros et feugiat.</p>
|
||||
</div>
|
||||
|
||||
<h4>Alternate</h4>
|
||||
<div class="table-wrapper">
|
||||
<table class="alt">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Description</th>
|
||||
<th>Price</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Item One</td>
|
||||
<td>Ante turpis integer aliquet porttitor.</td>
|
||||
<td>29.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Item Two</td>
|
||||
<td>Vis ac commodo adipiscing arcu aliquet.</td>
|
||||
<td>19.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Item Three</td>
|
||||
<td> Morbi faucibus arcu accumsan lorem.</td>
|
||||
<td>29.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Item Four</td>
|
||||
<td>Vitae integer tempus condimentum.</td>
|
||||
<td>19.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Item Five</td>
|
||||
<td>Ante turpis integer aliquet porttitor.</td>
|
||||
<td>29.99</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="2"></td>
|
||||
<td>100.00</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3 class="major">Buttons</h3>
|
||||
<ul class="actions">
|
||||
<li><a href="#" class="button special">Special</a></li>
|
||||
<li><a href="#" class="button">Default</a></li>
|
||||
</ul>
|
||||
<ul class="actions">
|
||||
<li><a href="#" class="button">Default</a></li>
|
||||
<li><a href="#" class="button small">Small</a></li>
|
||||
</ul>
|
||||
<ul class="actions">
|
||||
<li><a href="#" class="button special icon fa-download">Icon</a></li>
|
||||
<li><a href="#" class="button icon fa-download">Icon</a></li>
|
||||
</ul>
|
||||
<ul class="actions">
|
||||
<li><span class="button special disabled">Disabled</span></li>
|
||||
<li><span class="button disabled">Disabled</span></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3 class="major">Form</h3>
|
||||
<form method="post" action="#">
|
||||
<div class="field half first">
|
||||
<label for="demo-name">Name</label>
|
||||
<input type="text" name="demo-name" id="demo-name" value="" placeholder="Jane Doe" />
|
||||
</div>
|
||||
<div class="field half">
|
||||
<label for="demo-email">Email</label>
|
||||
<input type="email" name="demo-email" id="demo-email" value="" placeholder="jane@untitled.tld" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="demo-category">Category</label>
|
||||
<div class="select-wrapper">
|
||||
<select name="demo-category" id="demo-category">
|
||||
<option value="">-</option>
|
||||
<option value="1">Manufacturing</option>
|
||||
<option value="1">Shipping</option>
|
||||
<option value="1">Administration</option>
|
||||
<option value="1">Human Resources</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field half first">
|
||||
<input type="radio" id="demo-priority-low" name="demo-priority" checked>
|
||||
<label for="demo-priority-low">Low</label>
|
||||
</div>
|
||||
<div class="field half">
|
||||
<input type="radio" id="demo-priority-high" name="demo-priority">
|
||||
<label for="demo-priority-high">High</label>
|
||||
</div>
|
||||
<div class="field half first">
|
||||
<input type="checkbox" id="demo-copy" name="demo-copy">
|
||||
<label for="demo-copy">Email me a copy</label>
|
||||
</div>
|
||||
<div class="field half">
|
||||
<input type="checkbox" id="demo-human" name="demo-human" checked>
|
||||
<label for="demo-human">Not a robot</label>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="demo-message">Message</label>
|
||||
<textarea name="demo-message" id="demo-message" placeholder="Enter your message" rows="6"></textarea>
|
||||
</div>
|
||||
<ul class="actions">
|
||||
<li><input type="submit" value="Send Message" class="special" /></li>
|
||||
<li><input type="reset" value="Reset" /></li>
|
||||
</ul>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
</a>
|
||||
</article>
|
||||
|
||||
<article class="style6">
|
||||
<span class="image">
|
||||
<img src="images/pic06.jpg" alt="" />
|
||||
</span>
|
||||
<a href="generic.html">
|
||||
<h2>Veroeros</h2>
|
||||
<div class="content">
|
||||
<p>Sed nisl arcu euismod sit amet nisi lorem etiam dolor veroeros et feugiat.</p>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
<article class="style2">
|
||||
<span class="image">
|
||||
<img src="images/pic07.jpg" alt="" />
|
||||
</span>
|
||||
<a href="generic.html">
|
||||
<h2>Ipsum</h2>
|
||||
<div class="content">
|
||||
<p>Sed nisl arcu euismod sit amet nisi lorem etiam dolor veroeros et feugiat.</p>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
<article class="style3">
|
||||
<span class="image">
|
||||
<img src="images/pic08.jpg" alt="" />
|
||||
</span>
|
||||
<a href="generic.html">
|
||||
<h2>Dolor</h2>
|
||||
<div class="content">
|
||||
<p>Sed nisl arcu euismod sit amet nisi lorem etiam dolor veroeros et feugiat.</p>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
<article class="style1">
|
||||
<span class="image">
|
||||
<img src="images/pic09.jpg" alt="" />
|
||||
</span>
|
||||
<a href="generic.html">
|
||||
<h2>Nullam</h2>
|
||||
<div class="content">
|
||||
<p>Sed nisl arcu euismod sit amet nisi lorem etiam dolor veroeros et feugiat.</p>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
<article class="style5">
|
||||
<span class="image">
|
||||
<img src="images/pic10.jpg" alt="" />
|
||||
</span>
|
||||
<a href="generic.html">
|
||||
<h2>Ultricies</h2>
|
||||
<div class="content">
|
||||
<p>Sed nisl arcu euismod sit amet nisi lorem etiam dolor veroeros et feugiat.</p>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
<article class="style6">
|
||||
<span class="image">
|
||||
<img src="images/pic11.jpg" alt="" />
|
||||
</span>
|
||||
<a href="generic.html">
|
||||
<h2>Dictum</h2>
|
||||
<div class="content">
|
||||
<p>Sed nisl arcu euismod sit amet nisi lorem etiam dolor veroeros et feugiat.</p>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
<article class="style4">
|
||||
<span class="image">
|
||||
<img src="images/pic12.jpg" alt="" />
|
||||
</span>
|
||||
<a href="generic.html">
|
||||
<h2>Pretium</h2>
|
||||
<div class="content">
|
||||
<p>Sed nisl arcu euismod sit amet nisi lorem etiam dolor veroeros et feugiat.</p>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer id="footer">
|
||||
<p class="copyright">© Untitled. Design: <a href="https://html5up.net">HTML5 UP</a>.</p>
|
||||
<div class="inner">
|
||||
<section>
|
||||
<h2>Get in touch</h2>
|
||||
<form method="post" action="#">
|
||||
<div class="field half first">
|
||||
<input type="text" name="name" id="name" placeholder="Name" />
|
||||
</div>
|
||||
<div class="field half">
|
||||
<input type="email" name="email" id="email" placeholder="Email" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<textarea name="message" id="message" placeholder="Message"></textarea>
|
||||
</div>
|
||||
<ul class="actions">
|
||||
<li><input type="submit" value="Send" class="special" /></li>
|
||||
</ul>
|
||||
</form>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Follow</h2>
|
||||
<ul class="icons">
|
||||
<li><a href="#" class="icon style2 fa-twitter"><span class="label">Twitter</span></a></li>
|
||||
<li><a href="#" class="icon style2 fa-facebook"><span class="label">Facebook</span></a></li>
|
||||
<li><a href="#" class="icon style2 fa-instagram"><span class="label">Instagram</span></a></li>
|
||||
<li><a href="#" class="icon style2 fa-dribbble"><span class="label">Dribbble</span></a></li>
|
||||
<li><a href="#" class="icon style2 fa-github"><span class="label">GitHub</span></a></li>
|
||||
<li><a href="#" class="icon style2 fa-500px"><span class="label">500px</span></a></li>
|
||||
<li><a href="#" class="icon style2 fa-phone"><span class="label">Phone</span></a></li>
|
||||
<li><a href="#" class="icon style2 fa-envelope-o"><span class="label">Email</span></a></li>
|
||||
</ul>
|
||||
</section>
|
||||
<ul class="copyright">
|
||||
<li>© Untitled. All rights reserved</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- BG -->
|
||||
<div id="bg"></div>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="assets/js/jquery.min.js"></script>
|
||||
<script src="assets/js/skel.min.js"></script>
|
||||
<script src="assets/js/util.js"></script>
|
||||
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
|
||||
<script src="assets/js/main.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user