phantom-blergh 0.1.0

data/_sass/phantom-blergh.scss

@@ -0,0 +1,68 @@
+@import 'phantom-blergh/libs/vars';
+@import 'phantom-blergh/libs/functions';
+@import 'phantom-blergh/libs/mixins';
+@import 'phantom-blergh/libs/skel';
+@import 'font-awesome.min.css';
+@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,700,900');
+
+/*
+	Phantom by HTML5 UP
+	html5up.net | @ajlkn
+	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+*/
+
+@include skel-breakpoints((
+  xlarge: '(max-width: 1680px)',
+  large: '(max-width: 1280px)',
+  medium: '(max-width: 980px)',
+  small: '(max-width: 736px)',
+  xsmall: '(max-width: 480px)',
+  xxsmall: '(max-width: 360px)'
+));
+
+@include skel-layout((
+  reset: 'full',
+  boxModel: 'border',
+  grid: (
+    gutters: 2em
+  ),
+  breakpoints: (
+    medium: (
+      grid: (
+        gutters: 1.5em
+      )
+    ),
+    small: (
+      grid: (
+        gutters: 1em
+      )
+    )
+  )
+));
+
+// Base.
+
+@import 'phantom-blergh/base/page';
+@import 'phantom-blergh/base/typography';
+
+// Component.
+
+@import 'phantom-blergh/components/section';
+@import 'phantom-blergh/components/icon';
+@import 'phantom-blergh/components/list';
+@import 'phantom-blergh/components/form';
+@import 'phantom-blergh/components/box';
+@import 'phantom-blergh/components/image';
+@import 'phantom-blergh/components/table';
+@import 'phantom-blergh/components/button';
+@import 'phantom-blergh/components/tiles';
+@import 'phantom-blergh/components/syntax_highlighting';
+
+// Layout.
+
+@import 'phantom-blergh/layout/header';
+@import 'phantom-blergh/layout/menu';
+@import 'phantom-blergh/layout/main';
+@import 'phantom-blergh/layout/footer';
+@import 'phantom-blergh/layout/wrapper';
+@import 'phantom-blergh/layout/articles';

data/_sass/phantom-blergh/base/_page.scss

@@ -0,0 +1,40 @@
+///
+/// Phantom by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Basic */
+
+// MSIE: Required for IEMobile.
+@-ms-viewport {
+  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 {
+    min-width: 320px;
+  }
+}
+
+body {
+  background: _palette(bg);
+
+  // Prevents animation/transition "flicker" on page load.
+  // Automatically added/removed by js/main.js.
+  &.is-loading {
+    *,
+    *:before,
+    *:after {
+      @include vendor('animation', 'none !important');
+      @include vendor('transition', 'none !important');
+    }
+  }
+
+}

data/_sass/phantom-blergh/base/_typography.scss

@@ -0,0 +1,203 @@
+///
+/// Phantom by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Type */
+
+body,
+input,
+select,
+textarea {
+  color: _palette(fg);
+  font-family: _font(family);
+  font-size: 16pt;
+  font-weight: _font(weight);
+  line-height: 1.75;
+
+  @include breakpoint(xlarge) {
+    font-size: 14pt;
+  }
+
+  @include breakpoint(large) {
+    font-size: 12pt;
+  }
+}
+
+a {
+  @include vendor('transition', (
+  'border-bottom-color #{_duration(transition)} ease',
+  'color #{_duration(transition)} ease'
+  ));
+  text-decoration: none;
+  color: _palette(fg);
+  border-bottom: dotted 1px transparentize(_palette(fg), 0.5);
+
+  &:hover {
+    border-bottom-color: transparent;
+    color: _palette(accent1) !important;
+  }
+}
+
+strong,
+b {
+  color: _palette(fg-bold);
+  font-weight: _font(weight-bold);
+}
+
+em,
+i {
+  font-style: italic;
+}
+
+p {
+  margin: 0 0 _size(element-margin) 0;
+}
+
+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) * 1) 0;
+  text-transform: uppercase;
+  letter-spacing: _font(letter-spacing);
+
+  a {
+    color: inherit;
+  }
+}
+
+h2 {
+  font-size: 1.1em;
+}
+
+h3 {
+  font-size: 1em;
+}
+
+h4 {
+  font-size: 0.8em;
+}
+
+h5 {
+  font-size: 0.8em;
+}
+
+h6 {
+  font-size: 0.8em;
+}
+
+@include breakpoint(medium) {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    br {
+      display: none;
+    }
+  }
+}
+
+@include breakpoint(small) {
+  h2 {
+    font-size: 1em;
+  }
+
+  h3 {
+    font-size: 0.8em;
+  }
+}
+
+sub {
+  font-size: 0.8em;
+  position: relative;
+  top: 0.5em;
+}
+
+sup {
+  font-size: 0.8em;
+  position: relative;
+  top: -0.5em;
+}
+
+blockquote {
+  border-left: solid (_size(border-width) * 4) _palette(border);
+  font-style: italic;
+  margin: 0 0 _size(element-margin) 0;
+  padding: (_size(element-margin) / 4) 0 (_size(element-margin) / 4) _size(element-margin);
+}
+
+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.9em;
+  margin: 0 0.25em;
+  padding: 0.25em 0.65em;
+}
+
+pre {
+  -webkit-overflow-scrolling: touch;
+  font-family: _font(family-fixed);
+  font-size: 0.9em;
+  margin: 0 0 _size(element-margin) 0;
+
+  code {
+    display: block;
+    line-height: 1.75;
+    padding: 1em 1.5em;
+    overflow-x: auto;
+  }
+}
+
+hr {
+  border: 0;
+  border-bottom: solid _size(border-width) _palette(border);
+  margin: _size(element-margin) 0;
+
+  &.major {
+    margin: (_size(element-margin) * 1.5) 0;
+  }
+}
+
+.align-left {
+  text-align: left;
+}
+
+.align-center {
+  text-align: center;
+}
+
+.align-right {
+  text-align: right;
+}

data/_sass/phantom-blergh/components/_box.scss

@@ -0,0 +1,26 @@
+///
+/// Phantom by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Box */
+
+.box {
+  border-radius: _size(border-radius);
+  border: solid _size(border-width) _palette(border);
+  margin-bottom: _size(element-margin);
+  padding: 1.5em;
+
+  > :last-child,
+  > :last-child > :last-child,
+  > :last-child > :last-child > :last-child {
+    margin-bottom: 0;
+  }
+
+  &.alt {
+    border: 0;
+    border-radius: 0;
+    padding: 0;
+  }
+}

data/_sass/phantom-blergh/components/_button.scss

@@ -0,0 +1,88 @@
+///
+/// Phantom by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Button */
+
+input[type="submit"],
+input[type="reset"],
+input[type="button"],
+button,
+.button {
+  @include vendor('appearance', 'none');
+  @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) * 2) _palette(fg);
+  color: _palette(fg) !important;
+  cursor: pointer;
+  display: inline-block;
+  font-size: 0.8em;
+  font-weight: _font(weight-bold);
+  height: 3.5em;
+  letter-spacing: _font(letter-spacing);
+  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;
+
+  &.icon {
+    &:before {
+      margin-right: 0.5em;
+    }
+  }
+
+  &.fit {
+    display: block;
+    margin: 0 0 (_size(element-margin) * 0.5) 0;
+    width: 100%;
+  }
+
+  &: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');
+    opacity: 0.25;
+  }
+}

data/_sass/phantom-blergh/components/_form.scss

@@ -0,0 +1,206 @@
+///
+/// Phantom by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Form */
+
+	form {
+		margin: (_size(element-margin) * -0.5) 0 _size(element-margin) 0;
+
+		&:after {
+			content: '';
+			display: block;
+			clear: both;
+			height: 1px;
+		}
+
+		.field {
+			position: relative;
+			float: left;
+			margin: 0 0 (_size(element-margin) * 0.65) 0;
+			vertical-align: top;
+			width: 100%;
+		}
+
+		.half {
+			width: calc(50% + #{_size(field-gutter) * 0.5}) !important;
+			padding-left: _size(field-gutter);
+		}
+
+		.half.first {
+			width: calc(50% - #{_size(field-gutter) * 0.5}) !important;
+			padding-left: 0;
+		}
+
+		: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) {
+			.half {
+				width: 100% !important;
+				padding-left: 0;
+			}
+
+			.half.first {
+				width: 100% !important;
+				padding-left: 0;
+			}
+
+			.half:nth-last-child(2) {
+				margin: 0 0 (_size(element-margin) * 0.65) 0;
+			}
+		}
+	}
+
+	label {
+		display: block;
+		font-size: 0.9em;
+		font-weight: _font(weight-bold);
+		margin: 0 0 (_size(element-margin) * 0.5) 0;
+	}
+
+	input[type="text"],
+	input[type="password"],
+	input[type="email"],
+	input[type="tel"],
+	select,
+	textarea {
+		@include vendor('appearance', 'none');
+		background-color: transparent;
+		border: none;
+		border-radius: 0;
+		border-bottom: solid _size(border-width) _palette(border);
+		color: inherit;
+		display: block;
+		outline: 0;
+		padding: 0;
+		text-decoration: none;
+		width: 100%;
+
+		&:invalid {
+			box-shadow: none;
+		}
+
+		&:focus {
+			border-bottom-color: _palette(accent1);
+			box-shadow: inset 0 -1px 0 0 _palette(accent1);
+		}
+	}
+
+	.select-wrapper {
+		@include icon;
+		display: block;
+		position: relative;
+
+		&:before {
+			color: _palette(border);
+			content: '\f078';
+			display: block;
+			height: _size(element-height);
+			line-height: _size(element-height);
+			pointer-events: none;
+			position: absolute;
+			right: 0;
+			text-align: center;
+			top: 0;
+			width: _size(element-height);
+		}
+
+		select::-ms-expand {
+			display: none;
+		}
+	}
+
+	input[type="text"],
+	input[type="password"],
+	input[type="email"],
+	select {
+		height: _size(element-height);
+	}
+
+	textarea {
+		padding: 0;
+		min-height: (_size(element-height) * 1.25);
+	}
+
+	input[type="checkbox"],
+	input[type="radio"], {
+		@include vendor('appearance', 'none');
+		display: block;
+		float: left;
+		margin-right: -2em;
+		opacity: 0;
+		width: 1em;
+		z-index: -1;
+
+		& + label {
+			@include icon;
+			color: _palette(fg);
+			cursor: pointer;
+			display: inline-block;
+			font-size: 1em;
+			font-weight: _font(weight);
+			padding-left: (_size(element-height) * 0.6) + 0.75em;
+			padding-right: 0.75em;
+			position: relative;
+
+			&:before {
+				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);
+				position: absolute;
+				text-align: center;
+				top: 0;
+				width: (_size(element-height) * 0.6);
+			}
+		}
+
+		&:checked + label {
+			&:before {
+				background: _palette(fg);
+				border-color: _palette(fg);
+				color: _palette(bg);
+				content: '\f00c';
+			}
+		}
+
+		&:focus + label {
+			&:before {
+				border-color: _palette(accent1);
+				box-shadow: 0 0 0 _size(border-width) _palette(accent1);
+			}
+		}
+	}
+
+	input[type="checkbox"] {
+		& + label {
+			&:before {
+				border-radius: _size(border-radius);
+			}
+		}
+	}
+
+	input[type="radio"] {
+		& + label {
+			&:before {
+				border-radius: 100%;
+			}
+		}
+	}