added current state from hippie main repo

commit state 175816
source/style/hippie

_abovethefold.scss

@@ -0,0 +1,23 @@
+/*
+ * # TABLE OF CONTENTS
+ *
+ * - Reset
+ * - Priority CSS Rules
+ *
+ */
+
+
+// Reset
+// Use a file outside of hippie i.e. vendor/normalize.css
+// -----------------------------------------------------------------------------
+// @import "vendor/normalize.css";
+
+
+
+/*
+ * # NOTE
+ *
+ * CSS rules for content which is presented immediately
+ * to the screen and needs priority loading
+ *
+ */

_basic.scss

@@ -0,0 +1,53 @@
+// Reset
+// Use a file outside of hippie i.e. vendor/normalize.css
+// -----------------------------------------------------------------------------
+@import "../../vendor/normalizecss/normalize.css";
+
+
+
+// Functions and Mixins
+// Important code constructions
+// -----------------------------------------------------------------------------
+@import "functions/all";
+@import "mixins/all";
+
+
+
+// Fonts
+// Use a central file outside of hippie for font definitions with @font-face
+// -----------------------------------------------------------------------------
+// @import "../../vendor/fonts.css";
+
+
+
+// Global configuration with default values
+// -----------------------------------------------------------------------------
+@import "global/config";
+
+
+
+// Modules and variables
+// -----------------------------------------------------------------------------
+@import "modules/vendor";
+// @import modules/all deprecated because of the new vendor mixin
+
+// Basic styles - this is the core of definitions
+// Individual styles can be added her
+// -----------------------------------------------------------------------------
+@import "global/common";
+@import "global/typography";
+// Following the w3c document element structure
+// https://w3c.github.io/html/index.html#contents
+@import "elements/sections";
+@import "elements/grouping";
+@import "elements/textlevel";
+@import "elements/embedded";
+@import "elements/tables";
+@import "elements/interactive";
+
+// Individual Modules and variables
+// in dependency to other styles
+// -----------------------------------------------------------------------------
+@import "modules/breakpoint/breakpoint_module";
+@import "modules/tables/tables_module";
+@import "modules/maintenance/maintenance_module";

_hippie.scss

@@ -0,0 +1,33 @@
+/*
+ * # TABLE OF CONTENTS
+ *
+ * - Reset
+ * - Global functions and mixins
+ * - Configuration
+ * - Special modules
+ * - Basic styles
+ *   - Common
+ *   - Typography
+ *
+ *   - Sections
+ *   - Grouping
+ *   - Textlevel
+ *   - Embedded
+ *   - Tables
+ *   - Interactive
+ * - Modules
+    - Breakpoint
+    - Tables
+    - Maintenance
+*
+ */
+@import "basic";
+
+// Additional Modules and variables
+// in dependency to other basic styles
+// -----------------------------------------------------------------------------
+@import "modules/navigation/nav_module";
+@import "modules/card/card_module";
+@import "modules/editor/editor_module";
+@import "modules/explanation/explanation_module";
+@import "modules/print/print_module";

elements/_embedded.scss

@@ -0,0 +1,64 @@
+// Embedded content
+// -----------------------------------------------------------------------------
+// picture
+// source
+// img
+// iframe
+// embed
+// object
+// param
+// video
+// audio
+// track
+// map
+// area
+
+
+
+picture {
+
+}
+
+source {
+
+}
+
+img {
+	vertical-align: top;
+}
+
+iframe {
+
+}
+
+embed {
+
+}
+
+object {
+
+}
+
+param {
+
+}
+
+video {
+
+}
+
+audio {
+
+}
+
+track {
+
+}
+
+map {
+
+}
+
+area {
+
+}

elements/_grouping.scss

@@ -0,0 +1,330 @@
+// Grouping content
+// -----------------------------------------------------------------------------
+// p
+// address
+// hr
+// pre
+// blockquote
+// ol
+// ul
+// li
+// dl
+// dt
+// dd
+// figure
+// figcaption
+// main
+// div
+
+
+
+// Paragraph
+// -----------------------------------------------------------------------------
+p {
+	@extend %basic;
+	margin-top: $space_basic;
+	margin-bottom: $space_basic;
+	code {
+		padding: $space_tiny $space_half;
+		font-size: 1em;
+		line-height: 1;
+	}
+}
+
+.column_line {
+	column-rule: $border_basic;
+}
+.column_2, .column_3 {
+	@extend p;
+}
+.column_2 {
+	column-count: 2;
+	column-gap: $space_small;
+}
+.column_3 {
+	column-count: 3;
+	column-gap: $space_medium;
+}
+
+// Address
+// -----------------------------------------------------------------------------
+address {
+	// @extend %basic;
+	margin-top: $space_double;
+	margin-bottom: $space_double;
+}
+
+// Line
+// -----------------------------------------------------------------------------
+hr {
+	margin-top: $space_small;
+	margin-bottom: $space_small;
+	border-width: $width_border_basic 0 0;
+	border-style: solid;
+	border-color: $color_border_basic;
+}
+
+.hr_hidden {
+	@extend hr;
+	border-color: transparent;
+}
+
+.hr_dotted {
+	@extend hr;
+	border-style: dotted;
+}
+
+// Preformat
+// -----------------------------------------------------------------------------
+pre {
+	@extend %basic_mono;
+	white-space: pre-wrap;
+}
+
+.pre_code {
+	overflow-x: auto;
+	border-color: darken($color_back_basic, $color_diff_tiny);
+	border-style: dotted;
+	border-width:  0 0 0 $width_border_4;
+	border-radius: $radius_basic;
+	padding: $space_basic;
+	background-color: lighten($color_back_basic, $color_diff_tiny);
+	code {
+		background-color: transparent;
+	}
+}
+
+// Quote
+// -----------------------------------------------------------------------------
+blockquote {
+	margin: $space_basic 0;
+	padding-right: $indent_basic;
+	padding-left: $indent_basic;
+}
+
+.quote_mark {
+	p::before {
+		content: "\201E \0020";
+	}
+	p::after {
+		content: "\0020 \201C";
+	}
+	.quote_source {
+		&::before, &::after {
+			content: "";
+		}
+	}
+}
+
+// List
+// -----------------------------------------------------------------------------
+dl, ul, ol {
+	margin: $space_double 0;
+}
+
+ul, ol {
+	padding-left: $indent_basic;
+}
+
+dl {
+		margin-left: $indent_basic;
+}
+
+li, dt, dd {
+	@extend %basic;
+}
+
+dd, .list_basic li {
+	margin-bottom: $space_basic;
+}
+
+dd {
+	margin-left: $indent_basic;
+}
+
+ul {
+	li {
+		list-style: square;
+	}
+}
+
+.list_dash {
+	li {
+		list-style: none;
+		position: relative;
+
+		&::before {
+			content: "_";
+			position: absolute;
+			left: -1em;
+		}
+	}
+}
+
+.list_link {
+	li {
+		margin-bottom: $space_tiny * 2;
+		text-transform: uppercase;
+		a {
+			display: block;
+			padding: $padding_basic;
+			color: $color_text_basic;
+			img {
+				margin-right: $space_basic;
+				padding-bottom: 0.2em;
+				vertical-align: text-bottom;
+			}
+			&:active,
+			&:focus,
+			&:hover {
+				background-color: $color_action_basic;
+				color: $color_highlight_basic;
+			}
+		}
+	}
+}
+
+.list_horizontal {
+	overflow: auto;
+	li {
+		@extend .float_space_left;
+	}
+}
+
+// Embedded
+// -----------------------------------------------------------------------------
+figure {
+	margin: $space_double $indent_basic;
+}
+
+figcaption {
+	@extend %basic;
+	color: $color_darker;
+}
+
+// Main content
+// -----------------------------------------------------------------------------
+main {
+
+}
+
+// Div
+// -----------------------------------------------------------------------------
+div {
+
+}
+
+.div_info {
+	padding: $space_double $indent_basic;
+	border-right: $space_basic solid rgba($echo_color, 0.6);
+	background-color: rgba($echo_color, 0.1) !important;
+}
+
+.box_space {
+	position: relative;
+	width: 100%;
+}
+
+.box_cube {
+	float: left;
+	display: table;
+	width: $space_medium;
+	text-align: center;
+	vertical-align: middle;
+
+	span {
+		display: table-cell;
+	}
+}
+
+.box_placeholder {
+	width: 100%;
+	height: $space_medium;
+	border: $width_border_4 solid transparentize($alpha_color, 0.1);
+	border-radius: $radius_basic;
+	background-color: transparentize($alpha_color, 0.2);
+}
+
+.box_placeholder_bkg {
+	width: 100%;
+	height: $space_medium * 2;
+	border: $width_border_4 solid transparentize($color_front_basic, 0.1);
+	border-radius: $radius_basic;
+	padding: $space_basic;
+	/*data:[<mime type>][;charset=<charset>][;base64],<encoded data>*/
+	background: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0' y='0' width='100%' height='100%'><line x1='0' y1='0' x2='100%' y2='100%' stroke='%23FFF' stroke-width='.5'/><line x1='0' y1='100%' x2='100%' y2='0' stroke='%23FFF' stroke-width='.5'/></svg>") no-repeat;
+	background-color: transparentize($color_front_basic, 0.1);
+}
+
+.box_file_tile {
+	@extend .float_space_left;
+}
+
+// Flex
+.flex {
+	display: flex;
+}
+
+.flex_wrap {
+	@extend .flex;
+	flex-wrap: wrap;
+}
+
+.flex_row {
+	@extend .flex;
+	flex-direction: column;
+	// align-items: flex-start;
+	justify-content: flex-start;
+}
+
+.flex_child {
+	flex: 0 1 auto;
+}
+
+.flex_child_one {
+	flex: 1;
+}
+
+.flex_child_end {
+	align-self: flex-end;
+}
+
+.flex_column_wrap {
+	@extend .flex_wrap;
+
+	.flex_column {
+		@extend .flex_child;
+		flex-grow: 1;
+	}
+}
+
+// Grid
+.grid {
+	display: grid;
+	grid-gap: $space_basic;
+
+	& > input,
+	& > select,
+	& > textarea {
+		margin: 0;
+	}
+
+	& > label {
+		margin: $width_border_io;
+		padding: $space_half;
+	}
+}
+
+.grid_column_2 {
+	grid-template-columns: max-content max-content;
+
+}
+
+.grid_column_4 {
+	grid-template-columns: max-content max-content max-content max-content;
+}
+
+// Sprites
+.sprite_img {
+	display: inline-block;
+}

elements/_interactive.scss

@@ -0,0 +1,259 @@
+// Forms
+// -----------------------------------------------------------------------------
+// form
+// label
+// input
+// button
+// select
+// datalist
+// optgroup
+// option
+// textarea
+// output
+// progress
+// meter
+// fieldset
+// legend
+
+
+
+// Form
+// -----------------------------------------------------------------------------
+form {
+
+}
+
+// Label
+// -----------------------------------------------------------------------------
+label {
+	@extend %basic;
+
+	input, button, textarea, select {
+		margin-left: $space_basic;
+	}
+}
+
+input + label {
+	margin-left: $space_basic;
+}
+
+.label {
+	line-height: 2.5;
+}
+
+.label > input,
+.label > textarea,
+.label > select {
+	margin: 0 $space_basic;
+}
+
+// Input
+// -----------------------------------------------------------------------------
+input {
+}
+
+label + input {
+	margin-left: $space_basic;
+}
+
+input, button, textarea, select {
+	margin: $margin_io;
+
+	&[disabled="disabled"],
+	&[disabled] {
+		cursor: not-allowed;
+	}
+}
+
+td > input,
+td > button,
+td > select,
+td > textarea {
+	margin: 0;
+}
+
+@each $input in $io_input_list, textarea, select {
+	#{$input} {
+		@extend %basic_mono;
+		line-height: 1;
+	}
+}
+
+.io_input, .io_textarea, .io_select {
+	padding: $space_half;
+	color: $color_text_io;
+	background-color: $color_back_io;
+
+	&:hover {
+		background-color: $color_highlight_basic;
+	}
+
+	&[readonly="readonly"],
+	&[readonly] {
+		background-color: darken($color_back_io, $color_diff_double);
+	}
+
+	&[disabled="disabled"],
+	&[disabled] {
+		&:hover {
+			background-color: $color_back_io;
+		}
+	}
+}
+
+@each $input in $io_date_list {
+	#{$input} {
+		padding-top: 0;
+		padding-bottom: 0;
+	}
+}
+
+@each $input in $io_input_list, textarea {
+	#{$input} {
+		// border: $border_io;
+	}
+}
+
+.io_input, .io_textarea {
+	border: $border_io;
+
+	&[readonly="readonly"],
+	&[readonly] {
+		border-color: darken($color_border_io, $color_diff_double);
+	}
+
+	&[disabled="disabled"],
+	&[disabled] {
+		border-color: transparent;
+	}
+}
+
+// Fieldset
+// -----------------------------------------------------------------------------
+fieldset {
+	margin: $margin_double;
+	padding: $space_basic;
+	border: $border_basic;
+}
+
+// Legend
+// -----------------------------------------------------------------------------
+legend {
+	@extend %basic;
+	padding: 0 $space_half;
+}
+
+// Button
+// -----------------------------------------------------------------------------
+button {
+
+}
+
+.io_button {
+	@extend %basic_button;
+	border: $width_border_io solid $color_border_button;
+	padding: $padding_basic;
+	color: $color_text_button;
+	background-color: $color_back_button;
+
+	&:hover {
+		// border-color: #0059F6;
+		border-color: transparent;
+		color: white;
+		background-color: $foxtrot_color;
+	}
+
+	&[disabled="disabled"],
+	&[disabled] {
+		border-color: transparent;
+		color: lighten($color_text_button, $color_diff_double);
+
+		&:hover {
+			background-color: $color_back_button;
+		}
+	}
+}
+
+// Selection
+// -----------------------------------------------------------------------------
+select {
+	border: none;
+}
+
+// Datalist
+// -----------------------------------------------------------------------------
+datalist {
+
+}
+
+// Options
+// -----------------------------------------------------------------------------
+optgroup {
+
+}
+
+option {
+
+}
+
+// Textarea
+// -----------------------------------------------------------------------------
+textarea {
+}
+
+.io_textarea {
+	line-height: 1.2;
+}
+
+// Output
+// -----------------------------------------------------------------------------
+output {
+
+}
+
+// Progress
+// -----------------------------------------------------------------------------
+progress {
+
+}
+
+meter {
+
+}
+
+
+
+// Interactive elements
+// -----------------------------------------------------------------------------
+// details
+// summary
+// dialog
+
+
+
+details {
+
+}
+
+summary {
+
+}
+
+dialog {
+
+}
+
+
+
+// Scripting
+// -----------------------------------------------------------------------------
+// script
+// noscript
+// template
+// canvas
+
+
+
+canvas {
+
+}

elements/_sections.scss

@@ -0,0 +1,189 @@
+// Root
+// -----------------------------------------------------------------------------
+html {
+	// height: 100%;
+}
+
+
+
+// Sections
+// -----------------------------------------------------------------------------
+// body
+// article
+// section
+// nav
+// aside
+// h1-h6
+// header
+// footer
+
+
+
+// Body
+// -----------------------------------------------------------------------------
+body {
+	position: relative;
+	box-sizing: $box_sizing;
+	margin: 0;
+	font-family: $family_text_basic;
+	font-size: $size_text_basic;
+	line-height: $line_basic;
+	line-height: $line_text_basic;
+	color: $color_text_basic;
+	background-color: $color_back_basic;
+
+	*,
+	::before,
+	::after {
+		box-sizing: inherit;
+	}
+
+	&:hover {
+
+		.mouse_over {
+			background-color: transparent !important;
+			transition: background-color $duration_double $timing_basic 0s !important;
+		}
+	}
+}
+
+// Article
+// -----------------------------------------------------------------------------
+article {
+
+}
+
+// Section
+// -----------------------------------------------------------------------------
+section {
+
+}
+
+.sec_main_center {
+	width: $width_basic;
+	margin: 0 auto;
+	padding-top: $space_small;
+
+	@include forTabletPortraitUp {
+		width: $width_small;
+	}
+	@include forTabletLandscapeUp {
+		width: $width_medium;
+	}
+	@include forBigDesktopUp {
+		width: $width_large;
+	}
+}
+
+.sec_main_status {
+	border-top-width: $width_border_8;
+	border-top-style: solid;
+	border-color: $color_border_basic;
+	padding-top: $space_small;
+}
+
+// Navigation
+// -----------------------------------------------------------------------------
+nav {
+
+}
+
+// Aside element
+// -----------------------------------------------------------------------------
+aside {
+	width: $width_aside_basic;
+
+	&.right + .bside {
+		margin-right: calc(#{$width_aside_basic} + #{$space_basic});
+	}
+
+	&.left + .bside {
+		margin-left: calc(#{$width_aside_basic} + #{$space_basic});
+	}
+
+	&.right {
+		float: right;
+	}
+
+	&.left {
+		float: left;
+	}
+
+	*:first-child {
+		margin-top: 0;
+	}
+}
+
+// Headings
+// -----------------------------------------------------------------------------
+h1, h2, h3, h4, h5, h6 {
+	@extend %head_all;
+}
+
+h1 {
+	@extend %head_1;
+	margin: $space_large 0 $space_small;
+}
+
+h1 + h1 {
+	margin-top: 0;
+}
+
+h2 {
+	@extend %head_2;
+	margin: $space_medium 0 $space_small;
+}
+
+h2 + h2 {
+	margin-top: 0;
+}
+
+h3 {
+	@extend %head_3;
+	margin: $space_double 0;
+	text-transform: uppercase;
+}
+
+h4 {
+	@extend %head_3;
+	margin: $space_double 0;
+	text-transform: none;
+}
+
+h5 {
+	@extend %head_4;
+	margin: $space_double 0 $space_basic;
+	text-transform: none;
+}
+
+h6 {
+	@extend %basic;
+	margin: $space_basic 0;
+	text-transform: none;
+	font-weight: bold;
+}
+
+// Header
+// -----------------------------------------------------------------------------
+header {
+
+}
+
+.header_page {
+	overflow: auto;
+}
+
+.header_txt {
+	margin-bottom: $space_small;
+	border-bottom: $border_dotted;
+
+	h1 {
+		border-top: $border_basic;
+	}
+}
+
+// Footer
+// -----------------------------------------------------------------------------
+footer {
+
+}

elements/_tables.scss

@@ -0,0 +1,130 @@
+// Tabular data
+// -----------------------------------------------------------------------------
+// table
+// caption
+// colgroup
+// col
+// tbody
+// thead
+// tfoot
+// tr
+// td
+// th
+
+
+
+// Table
+// -----------------------------------------------------------------------------
+table {
+	margin: $margin_double;
+	border: $border_basic;
+	border-collapse: collapse;
+}
+
+.table_blank {
+	border: $width_border_basic solid transparent;
+
+	th, td {
+		border: $width_border_basic solid transparent;
+	}
+}
+
+.table_free {
+	border: $width_border_basic solid transparent;
+}
+
+.table_stripe {
+	td {
+		border-top: 0;
+		border-bottom: 0;
+	}
+
+	tr:nth-child(even) td {
+		background-color: lighten($color_back_basic, $color_diff_tiny);
+	}
+}
+
+.table_fix {
+	table-layout: fixed;
+}
+
+.table_file_simple {
+	@extend .width_full;
+}
+
+// Caption
+// -----------------------------------------------------------------------------
+caption {
+	@extend p;
+	padding: $space_half 0;
+	border: $border_dotted;
+	text-align: center;
+}
+
+// Columns
+// -----------------------------------------------------------------------------
+colgroup {
+
+}
+
+col {
+
+}
+
+// Table body
+// -----------------------------------------------------------------------------
+tbody {
+
+}
+
+// Table head
+// -----------------------------------------------------------------------------
+thead {
+
+}
+
+// Table foot
+// -----------------------------------------------------------------------------
+tfoot {
+
+	tr:first-child td {
+		border-top: $border_basic;
+	}
+}
+
+// Row
+// -----------------------------------------------------------------------------
+tr {
+
+}
+
+// Cells
+// -----------------------------------------------------------------------------
+th, td {
+	@extend %basic;
+	padding: $space_half;
+}
+
+th {
+	border: $border_basic;
+	text-align: left;
+}
+
+td {
+	border-right: $border_basic;
+	border-bottom: $border_basic;
+}
+
+td:last-child {
+	border-right: 0;
+
+	td {
+		border-bottom: 0;
+	}
+}
+
+.cell_pre {
+	// border-right-width: $width_border_4;
+	// border-right-color: lighten($color_back_basic, $color_diff_basic);
+	background-color: lighten($color_back_basic, $color_diff_tiny);
+}

elements/_textlevel.scss

@@ -0,0 +1,303 @@
+// Text-Level semantics
+// -----------------------------------------------------------------------------
+// a
+// em
+// strong
+// small
+// s
+// cite
+// q
+// dfn
+// abbr
+// ruby
+// rb
+// rt
+// rtc
+// rp
+// data
+// time
+// code
+// var
+// samp
+// kbd
+// sub
+// sup
+// i
+// b
+// u
+// mark
+// bdi
+// bdo
+// span
+// br
+// wbr
+
+
+
+// Links
+// -----------------------------------------------------------------------------
+a {
+	color: $color_link_basic;
+	//  color: lighten($color_action_basic, 20%);
+	text-decoration: none;
+
+	&:active,
+	&:focus,
+	&:hover {
+		color: $color_highlight_basic;
+	}
+}
+
+.a_internal {
+	color: $charlie_color;
+}
+
+.a_external {
+	color: $delta_color;
+}
+
+.a_line {
+	border-bottom-width: $space_tiny;
+	border-bottom-style: dotted;
+	border-color: $color_border_basic;
+	color: $color_text_basic;
+	background-color: transparent;
+	transition: color $duration_basic $timing_basic;
+
+	&:active,
+	&:focus,
+	&:hover {
+		color: $color_highlight_basic;
+		background-color: $color_action_basic;
+	}
+}
+
+.a_button {
+	display: inline-block;
+	padding: $padding_basic;
+	border-radius: $radius_basic;
+	background-color: transparentize($color_link_basic, 0.8);
+
+	&:active,
+	&:focus,
+	&:hover {
+		border-color: transparent;
+		background-color: transparentize($color_highlight_basic, 0.8);
+	}
+}
+
+.a_button_text {
+	@extend .a_button;
+	padding: $padding_link;
+	color: $color_text_basic;
+	background-color: transparent;
+}
+
+.a_button_border {
+	@extend .a_button_text;
+	border: $border_basic;
+}
+
+
+// Italic, Emphasis
+// -----------------------------------------------------------------------------
+i, em {
+	font-style: italic;
+}
+
+.i_bright {
+	color: $color_highlight_basic;
+	font-style: normal;
+}
+
+// Bold, Strong
+// -----------------------------------------------------------------------------
+b, strong {
+	font-weight: 500; // TODO maybe bolder
+}
+
+// Small
+// -----------------------------------------------------------------------------
+small {
+
+}
+
+// No longer accurate or no longer relevant
+// -----------------------------------------------------------------------------
+s {
+
+}
+
+// Citation
+// -----------------------------------------------------------------------------
+cite {
+	font-style: italic;
+}
+
+// Phrasing content, quoted
+// -----------------------------------------------------------------------------
+q {
+
+}
+
+// Definition
+// -----------------------------------------------------------------------------
+dfn {
+
+}
+
+// Abbreviation
+// -----------------------------------------------------------------------------
+abbr {
+
+}
+
+// Ruby annotations
+// -----------------------------------------------------------------------------
+ruby {
+
+}
+
+rb {
+
+}
+
+rt {
+
+}
+
+rtc {
+
+}
+
+rp {
+
+}
+
+// Machine readable data
+// -----------------------------------------------------------------------------
+data {
+
+}
+
+// Machine readable time
+// -----------------------------------------------------------------------------
+time {
+
+}
+
+// Code
+// -----------------------------------------------------------------------------
+code {
+	@extend %basic_mono;
+	color: lighten($color_text_basic, $color_diff_basic);
+	background-color: lighten($color_back_basic, $color_diff_tiny);
+}
+
+.code_solo {
+	@extend %basic_mono;
+	padding: $space_tiny $space_half;
+	color: $color_text_basic;
+}
+
+// Variable
+// -----------------------------------------------------------------------------
+var {
+
+}
+
+// Sample
+// -----------------------------------------------------------------------------
+samp {
+	@extend %basic_mono;
+}
+
+// Keyboard input
+// -----------------------------------------------------------------------------
+kbd {
+	@extend %basic_mono;
+	// font-size: .9em;
+	// font-weight: bold;
+	padding: 0 $space_half;
+	border-width: $width_border_basic;
+	border-style: solid;
+	border-color: $color_darker;
+	border-radius: $radius_basic;
+	color: lighten($color_text_basic, $color_diff_basic);
+}
+
+// Sub- and superscript
+// -----------------------------------------------------------------------------
+sub, sup {
+
+}
+
+// Unarticulated, non-textual annotation
+// -----------------------------------------------------------------------------
+u {
+
+}
+
+// Marks
+// -----------------------------------------------------------------------------
+mark {
+	background-color: $alpha_color;
+}
+
+.mark_cursor {
+	color: invert($color_text_basic);
+	background-color: $color_text_basic;
+}
+
+::-moz-selection {
+	color: invert($color_text_basic);
+	background-color: $color_text_basic;
+}
+
+::selection {
+	color: invert($color_text_basic);
+	background-color: $color_text_basic;
+}
+
+// Text direction
+// -----------------------------------------------------------------------------
+bdi, bdo {
+
+}
+
+// Span
+// -----------------------------------------------------------------------------
+span {
+
+}
+
+.span_solo {
+	@extend %solo;
+}
+
+// Linebreaks
+// -----------------------------------------------------------------------------
+br {
+
+}
+
+wbr {
+
+}
+
+
+
+// Edits
+// -----------------------------------------------------------------------------
+// ins
+// del
+
+
+
+ins {
+
+}
+
+del {
+
+}

functions/_all.scss

@@ -0,0 +1,3 @@
+@import "color";
+@import "shade";
+@import "tint";

functions/_color.scss

@@ -0,0 +1,13 @@
+@function createColorMap($color, $percentage, $opacity) {
+  $map: (
+    base: $color,
+    light: lighten($color, $percentage),
+    dark: darken($color, $percentage),
+    trans: transparentize($color, $opacity)
+  );
+  @return $map;
+}
+
+@function basic_color($key: 'alpha') {
+  @return map-get($color_palette, $key);
+}

functions/_shade.scss

@@ -0,0 +1,24 @@
+@charset "UTF-8";
+
+// Mixes a color with black.
+//
+// @param {Color} $color
+//
+// @param {Number (Percentage)} $percent
+//   The amount of black to be mixed in.
+//
+// @example scss - Usage
+//   .element {
+//     background-color: shade(#0c85ff, 60%);
+//   }
+//
+// @example css - CSS Output
+//   .element {
+//     background-color: #074f99;
+//   }
+//
+// @return {Color}
+
+@function shade($color, $percent) {
+  @return mix(#000, $color, $percent);
+}

functions/_tint.scss

@@ -0,0 +1,24 @@
+@charset "UTF-8";
+
+// Mixes a color with white.
+//
+// @param {Color} $color
+//
+// @param {Number (Percentage)} $percent
+//   The amount of white to be mixed in.
+//
+// @example scss - Usage
+//   .element {
+//     background-color: tint(#0c85ff, 40%);
+//   }
+//
+// @example css - CSS Output
+//   .element {
+//     background-color: #9dceff;
+//   }
+//
+// @return {Color}
+
+@function tint($color, $percent) {
+  @return mix(#fff, $color, $percent);
+}

global/_common.scss

@@ -0,0 +1,316 @@
+// General classes
+// -----------------------------------------------------------------------------
+
+
+
+%size_content {
+	box-sizing: content-box;
+}
+
+%size_content_solo {
+	@extend %size_content;
+
+	*,
+	::before,
+	::after {
+		box-sizing: $box_sizing;
+	}
+}
+
+%h_content_full {
+	height: 100%;
+
+	body {
+		min-height: 100%;
+	}
+}
+
+%hidden {
+	display: none;
+}
+
+.hide {
+	@extend %hidden;
+}
+
+.space_even_auto {
+	margin-right: auto;
+	margin-left: auto;
+}
+
+.space_even_half {
+	margin-right: 25%;
+	margin-left: 25%;
+}
+
+.space_even_fourth {
+	margin-right: 37.5%;
+	margin-left: 37.5%;
+}
+
+@each $size, $variable in (basic, #{$space_basic}),
+                          (small, #{$space_small}),
+                          (medium, #{$space_medium}),
+                          (large, #{$space_large}) {
+  .space_top_#{$size} {
+    margin-top: $variable;
+  }
+  .space_right_#{$size} {
+    margin-right: $variable;
+  }
+  .space_bottom_#{$size} {
+    margin-bottom: $variable;
+  }
+  .space_left_#{$size} {
+    margin-left: $variable;
+  }
+}
+
+.space_left_fourth {
+	margin-left: 25%;
+}
+
+.width_full {
+	width: 100%;
+	margin-right: 0;
+	margin-left: 0;
+}
+
+.width_half {
+	width: 50%;
+	margin-right: 0;
+	margin-left: 0;
+}
+
+.width_third {
+	width: 33.3%;
+	margin-right: 0;
+	margin-left: 0;
+}
+
+.h_basic {
+	height: 1024px;
+}
+
+.h_full_view {
+	height: 100vh;
+}
+
+.h_100 {
+	height: 100%;
+}
+
+.wrap_center {
+	&	> * {
+		margin-right: (100% - $width_basic) / 2;
+		margin-left: (100% - $width_basic) / 2;
+
+		@include forTabletPortraitUp {
+			margin-right: (100% - $width_small) / 2;
+			margin-left: (100% - $width_small) / 2;
+		}
+		@include forTabletLandscapeUp {
+			margin-right: (100% - $width_medium) / 2;
+			margin-left: (100% - $width_medium) / 2;
+		}
+		@include forBigDesktopUp {
+			margin-right: (100% - $width_large) / 2;
+			margin-left: (100% - $width_large) / 2;
+		}
+	}
+}
+
+
+
+// Clearing and floating
+// -----------------------------------------------------------------------------
+.clear {
+	clear: both;
+
+	&::before,
+	&::after {
+		clear: both;
+	}
+}
+
+.overflow {
+	overflow: auto;
+}
+
+.float_left {
+	float: left;
+}
+
+.float_right {
+	float: right;
+}
+
+.float_space_left {
+	@extend .float_left;
+	margin-right: $space_small;
+}
+
+.float_half_size {
+	float: left;
+	width: 50%;
+}
+
+.x_long {
+	overflow-x: scroll;
+}
+
+
+
+// Inlining
+// -----------------------------------------------------------------------------
+.inline {
+	display: inline-block;
+}
+
+
+
+// Positioned elements
+// -----------------------------------------------------------------------------
+%viewport_fixed {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100vw;
+	height: 100vh;
+}
+
+%full_parent {
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	// width: 100%;
+	// height: 100%;
+}
+
+.pos_abs {
+	position: absolute;
+}
+
+.pos_rel {
+	position: relative;
+}
+
+.pos_fix {
+	position: fixed;
+}
+
+.pin_top {
+	top: 0;
+}
+
+.pin_right {
+	right: 0;
+}
+
+.pin_bottom {
+	bottom: 0;
+}
+
+.pin_left {
+	left: 0;
+}
+
+.pos_full_view {
+	@extend %viewport_fixed;
+	background-color: rgba($alpha_color, 0.5);
+}
+
+.pos_full_page {
+	@extend %full_parent;
+	background-color: rgba($charlie_color, 0.25);
+}
+
+.hover_back_change {
+	background-color: $color_darker;
+	transition: background-color 0.2s ease-in-out;
+
+	&:hover {
+		background-color: $color_back_basic;
+	}
+}
+
+.mouse_over {
+	@extend %viewport_fixed;
+	z-index: $z_heaven;
+	background-color: transparentize($color_darkest, 0.5);
+	transition: background-color $duration_long $timing_basic $duration_long;
+	pointer-events: none;
+}
+
+
+
+// Colors
+// -----------------------------------------------------------------------------
+.txt_color_light {
+	color: $color_brighter;
+}
+
+.txt_color_dark {
+	color: $color_darker;
+}
+
+
+
+// Text
+// -----------------------------------------------------------------------------
+.txt_tiny {
+	font-size: .5em !important;
+}
+
+.txt_smaller {
+	font-size: .75em !important;
+}
+
+.txt_larger {
+	font-size: 1.2em !important;
+}
+
+.txt_huge {
+	font-size: 3em !important;
+}
+
+.txt_hero {
+	font-size: $size_hero;
+}
+
+.txt_center {
+	text-align: center !important;
+}
+
+.txt_right {
+	text-align: right !important;
+}
+
+.txt_left {
+	text-align: left !important;
+}
+
+.txt_top {
+	vertical-align: top !important;
+}
+
+.txt_bottom {
+	vertical-align: bottom !important;
+}
+
+.txt_white {
+	color: white;
+}
+
+.txt_black {
+	color: black;
+}
+
+.txt_gradient {
+	background: linear-gradient(165deg, $alpha_color 30%, $bravo_color 45%, $charlie_color 50%, $delta_color, $echo_color 80%, $foxtrot_color);
+	background-clip: text;
+	-webkit-background-clip: text;
+	-webkit-text-fill-color: transparent;
+}

global/_config.scss

@@ -0,0 +1,272 @@
+// Default configuration
+// ------------------------------------------------------------------------------
+
+
+
+// TEXT
+// ------------------------------------------------------------------------------
+$size_text_basic: 17px !default;
+$size_text_print: 10pt !default;
+
+$line_basic: 1;
+
+// $i: 1;
+// @while $i < 7 {
+//   %head_#{$i} { width: 2em * $i; }
+//   $i: $i + 1;
+// }
+// $head_sizes: (h1: 3.1em, h2: 2.5em, h3: 1.8em, h4: 1.35em);
+//
+// @each $head, $size in $head_sizes {
+// 	#{$head} {
+// 		font-size: $size;
+// 	}
+// }
+
+// $head_sizes: (
+//   basic: (
+//     'h1': ('font-size': 24),
+//     'h2': ('font-size': 20),
+//     'h3': ('font-size': 19),
+//     'h4': ('font-size': 18),
+//     'h5': ('font-size': 17),
+//     'h6': ('font-size': 16),
+//   ),
+//   print: (
+//     'h1': ('font-size': 48),
+//     'h2': ('font-size': 40),
+//     'h3': ('font-size': 31),
+//     'h4': ('font-size': 25),
+//     'h5': ('font-size': 20),
+//     'h6': ('font-size': 16),
+//   ),
+// );
+
+$size_head_1: 3.1em !default;
+$size_head_2: 2.5em !default;
+$size_head_3: 1.8em !default;
+$size_head_4: 1.35em !default;
+
+$size_text_1: 1em;
+$size_text_2: 20;
+
+$size_hero: $size_head_1 * 3;
+
+$line_text_basic: 1.28 !default;
+$line_text_mono: 1.1 !default;
+$line_head_basic: $line_text_basic !default;
+
+$family_text_basic: #{'Roboto', 'Segoe UI', 'Liberation Sans', 'Source Sans', 'Trebuchet MS', Helvetica, Arial, sans-serif, sans} !default;
+$family_text_print: #{'Times New Roman', times} !default;
+$family_text_mono: #{'Courier New', monospace} !default;
+$family_text_card: #{'Trebuchet MS', 'Roboto', 'Segoe UI', 'Liberation Sans', 'Source Sans', 'Trebuchet MS', Helvetica, Arial, sans-serif, sans} !default;
+$family_head_basic: $family_text_basic !default;
+
+
+
+// COLORS
+// ------------------------------------------------------------------------------
+$color_palette: (
+  alpha: #fad803,
+  bravo: #d30a51,
+  charlie: #273f8b,
+  delta: #b7e0f0,
+  echo: #52bed1,
+	foxtrot: #0c85ff
+) !default;
+
+@include addDefaultColors;
+
+$color_diff_basic: 12% !default;
+$color_diff_tiny: 4% !default;
+$color_diff_double: $color_diff_basic * 2;
+
+$color_darkest: black !default;
+$color_brightest: white !default;
+
+$color_text_basic: black !default;
+$color_back_basic: #808080 !default;
+$color_border_basic: lighten($color_text_basic, $color_diff_basic) !default;
+$color_front_basic: white !default;
+
+$color_medium: lighten($color_darkest, 50%);
+$color_dark: lighten($color_darkest, $color_diff_double);
+$color_darker: darken($color_back_basic, $color_diff_basic);
+$color_brighter: lighten($color_back_basic, $color_diff_basic);
+$color_bright: darken($color_brightest, $color_diff_double);
+
+$color_head_basic: $color_text_basic !default;
+$color_link_basic: $delta_color !default;
+$color_highlight_basic: $color_front_basic !default;
+$color_action_basic: $foxtrot_color !default;
+
+
+// default shadow colors
+// $shadow_color: fade-out($color_medium, 0.5);
+
+$color_list: ();
+
+@each $key, $value in $color_palette {
+  $map: ();
+  $map: map-merge($map, ($key: createColorMap($value, 15%, 0.5)) );
+  $color_list: map-merge($color_list, $map);
+}
+
+
+
+// LAYOUT
+// ------------------------------------------------------------------------------
+$box_sizing: border-box !default;
+
+$z_heaven: 100 !default;
+$z_top: 10 !default;
+$z_basic: 1 !default;
+$z_earth: -100 !default;
+
+$width_basic: 96% !default;
+$width_small: 80% !default;
+$width_medium: 60% !default;
+$width_large: 48% !default;
+$width_aside_basic: 20% !default;
+
+$space_tiny: 1px !default;
+$space_basic: $space_tiny * 8 !default;
+$space_half: $space_basic / 2;
+$space_double: $space_basic * 2;
+$space_small: $space_basic * 4;
+$space_medium: $space_basic * 8;
+$space_large: $space_basic * 16;
+
+$margin_basic: $space_basic 0 !default;
+$margin_double: $space_double 0 !default;
+$margin_io: 0 $space_small 0 0 !default;
+
+$padding_basic: calc(#{$space_basic} - 3px) $space_basic !default;
+$padding_link: calc(#{$space_basic} - 1px) calc(#{$space_basic} * 2) !default;
+
+$indent_basic: 2em !default;
+
+$border_basic: $space_tiny solid $color_border_basic;
+$border_dotted: $space_tiny dotted $color_border_basic;
+$width_border_basic: $space_tiny !default;
+$width_border_4: $width_border_basic * 4;
+$width_border_8: $width_border_basic * 8;
+
+$radius_basic: $space_tiny * 2 !default;
+
+
+
+// IO
+// ------------------------------------------------------------------------------
+$io_input_list:
+  'input[type="text"]',
+  'input[type="number"]',
+	'input[type="color"]',
+	'input[type="range"]',
+	'input[type="date"]',
+	'input[type="time"]',
+  'input[type="datetime-local"]',
+  'input[type="month"]',
+  'input[type="week"]',
+	'input[type="email"]',
+  'input[type="password"]',
+  'input[type="tel"]',
+  'input[type="url"]',
+	'input[type="search"]',
+	'input:not([type])';
+
+$io_date_list:
+  '.io_input[type="date"]',
+  '.io_input[type="time"]',
+  '.io_input[type="datetime-local"]',
+  '.io_input[type="month"]',
+  '.io_input[type="week"]';
+
+$io_button_list:
+	'button',
+	'input[type="button"]',
+	// 'input[type="file"]',
+	'input[type="reset"]',
+	'input[type="image"]',
+	'input[type="submit"]';
+
+$io_focus_list:
+	'a[href]',
+	'area[href]',
+	'button:not([disabled])',
+	'input:not([disabled])',
+	'select:not([disabled])',
+	'textarea:not([disabled])',
+	'*[tabindex]';
+
+$color_text_io: lighten($color_text_basic, $color_diff_basic) !default;
+$color_text_button: $color_text_basic !default;
+$color_back_io: darken($color_front_basic, $color_diff_basic) !default;
+$color_back_button: $color_darker !default;
+$color_border_io: $color_front_basic !default;
+$color_border_button: $color_dark !default;
+
+$width_border_io: $space_tiny * 2 !default;
+$border_io: $width_border_io solid $color_border_io;
+$border_io_dotted: $width_border_io dotted $color_border_io;
+
+$shadow_basic: inset 0 1px 3px rgba($color_darkest, 0.06);
+$shadow_focus: $shadow_basic, 0 0 5px adjust-color($color_action_basic, $lightness: -5%, $alpha: -0.3);
+
+
+
+// ANIMATIONS
+// ------------------------------------------------------------------------------
+$duration_basic: 250ms !default;
+$duration_double: $duration_basic * 2;
+$duration_long: 2s !default;
+$timing_basic: ease-out !default;
+
+
+
+// HARDWARE BREAKPOINTS
+// ------------------------------------------------------------------------------
+$screen_tiny: 768px;
+$screen_small: 1024px;
+$screen_medium: 1280px;
+$screen_large: 1440px;
+$screen_huge: 1680px;
+$screen_gigantic: 1920px;
+
+
+
+// VENDOR PREFIX
+// ------------------------------------------------------------------------------
+$prefix_defaults: -moz- -webkit- -o- -ms- '';
+$webkit_support: -webkit- '';
+$moz_support: -moz- '';
+$ms_support: -ms- '';
+$moz_webkit_support: -moz- -webkit- '';
+$moz_ms_support: -moz- -ms- '';
+$webkit_ms_support: -webkit- -ms- '';
+
+
+
+// SYMBOLS
+// ------------------------------------------------------------------------------
+$icons: (
+  glass: "\f000",
+  music: "\f001",
+  search: "\f002",
+  envelope-o: "\f003",
+  heart: "\f004"
+);
+
+@each $name, $icon in $icons {
+  .sym_#{$name}::before {
+    content: $icon;
+  }
+}
+
+
+
+// USER AGENT
+// ------------------------------------------------------------------------------
+$no_agent_focus: true;
+
+@include overrideUserAgent;

global/_typography.scss

@@ -0,0 +1,60 @@
+// Basic styles
+// -----------------------------------------------------------------------------
+
+%basic {
+	font-family: $family_text_basic;
+	font-size: $size_text_1;
+	line-height: $line_text_basic;
+}
+
+%basic_mono {
+	font-family: $family_text_mono;
+	font-size: $size_text_1;
+	line-height: $line_text_mono;
+}
+
+%basic_print {
+	font-family: $family_text_print;
+	font-size: $size_text_1;
+	line-height: $line_text_basic;
+}
+
+%head_all {
+	color: $color_head_basic;
+	font-family: $family_head_basic;
+	line-height: $line_head_basic;
+}
+
+%head_1 {
+	font-size: $size_head_1;
+	font-weight: 300;
+}
+
+%head_2 {
+	font-size: $size_head_2;
+	font-weight: 300;
+}
+
+%head_3 {
+	font-size: $size_head_3;
+	font-weight: 300;
+}
+
+%head_4 {
+	font-size: $size_head_4;
+	font-weight: 300;
+}
+
+%basic_button {
+	@extend %basic;
+}
+
+%solo {
+	@extend %basic;
+}
+
+%short {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	-o-text-overflow: ellipsis; // vendor
+}

mixins/_all.scss

@@ -0,0 +1,5 @@
+@import "media_query";
+@import "sprite";
+@import "flow";
+@import "color";
+@import "user_agent";

mixins/_color.scss

@@ -0,0 +1,20 @@
+@mixin addDefaultColors() {
+  @if map-has-key($color_palette, alpha) {
+    $alpha_color: map-get($color_palette, alpha) !global;
+  }
+  @if map-has-key($color_palette, bravo) {
+    $bravo_color: map-get($color_palette, bravo) !global;
+  }
+  @if map-has-key($color_palette, charlie) {
+    $charlie_color: map-get($color_palette, charlie) !global;
+  }
+  @if map-has-key($color_palette, delta) {
+    $delta_color: map-get($color_palette, delta) !global;
+  }
+  @if map-has-key($color_palette, echo) {
+    $echo_color: map-get($color_palette, echo) !global;
+  }
+  @if map-has-key($color_palette, foxtrot) {
+    $foxtrot_color: map-get($color_palette, foxtrot) !global;
+  }
+}

mixins/_flow.scss

@@ -0,0 +1,25 @@
+@charset "UTF-8";
+
+// Provides an easy way to include a clearflow for containing floats.
+//
+// @link http://cssmojo.com/latest_new_clearfix_so_far/
+//
+// @example scss - Usage
+//   .element {
+//     @include clearFlow;
+//   }
+//
+// @example css - CSS Output
+//   .element::after {
+//     content: "";
+//     clear: both;
+//     display: table;
+//   }
+
+@mixin clearFlow {
+  &::after {
+    content: "";
+    clear: both;
+    display: table;
+  }
+}

mixins/_media_query.scss

@@ -0,0 +1,38 @@
+//Sections for Media Queries
+@mixin forPhoneUp {
+  @media (min-width: #{$screen_tiny - 1}) { @content; } //599px
+}
+@mixin forPhoneOnly {
+  @media (max-width: #{$screen_tiny - 1}) { @content; } //599px
+}
+@mixin forTabletPortraitUp {
+  @media (min-width: $screen_small) { @content; } //600px
+}
+@mixin forTabletPortraitOnly {
+  @media (min-width: $screen_tiny) and (max-width: #{$screen_small - 1}) { @content; } //600px - 899px
+}
+@mixin forTabletLandscapeUp {
+  @media (min-width: $screen_small) { @content; } //900px
+}
+@mixin forTabletLandscapeOnly {
+  @media (min-width: $screen_small) and (max-width: #{$screen_medium - 1}) { @content; } //900px - 1199px
+}
+@mixin forDesktopUp {
+  @media (min-width: $screen_medium) { @content; } //1200px
+}
+@mixin forDesktopOnly {
+  @media (min-width: $screen_medium) and (max-width: #{$screen_huge - 1}) { @content; } //1200px - 1799px
+}
+@mixin forBigDesktopUp {
+  @media (min-width: $screen_huge) { @content; } //1800px
+}
+
+//Mobile-first Media Query
+@mixin goingLarge($width) {
+  @media (min-width: $width/16+em) { @content; }
+}
+
+//Desktop-first Media Query
+@mixin goingSmall($width) {
+  @media (max-width: $width/16+em) { @content; }
+}

mixins/_sprite.scss

@@ -0,0 +1,123 @@
+// SCSS variables are information about icon's compiled state, stored under its original file name
+//
+// .icon-home {
+//   width: $icon-home-width;
+// }
+//
+// The large array-like variables contain all information about a single icon
+// $icon-home: x y offset_x offset_y width height total_width total_height image_path;
+//
+// At the bottom of this section, we provide information about the spritesheet itself
+// $spritesheet: width height image $spritesheet-sprites;
+$down-name: 'down';
+$down-x: 64px;
+$down-y: 0px;
+$down-offset-x: -64px;
+$down-offset-y: 0px;
+$down-width: 32px;
+$down-height: 32px;
+$down-total-width: 96px;
+$down-total-height: 64px;
+$down-image: '../art/sprite.png';
+$down: (64px, 0px, -64px, 0px, 32px, 32px, 96px, 64px, '../art/sprite.png', 'down', );
+$meta-name: 'meta';
+$meta-x: 64px;
+$meta-y: 32px;
+$meta-offset-x: -64px;
+$meta-offset-y: -32px;
+$meta-width: 32px;
+$meta-height: 32px;
+$meta-total-width: 96px;
+$meta-total-height: 64px;
+$meta-image: '../art/sprite.png';
+$meta: (64px, 32px, -64px, -32px, 32px, 32px, 96px, 64px, '../art/sprite.png', 'meta', );
+$up-name: 'up';
+$up-x: 0px;
+$up-y: 0px;
+$up-offset-x: 0px;
+$up-offset-y: 0px;
+$up-width: 32px;
+$up-height: 64px;
+$up-total-width: 96px;
+$up-total-height: 64px;
+$up-image: '../art/sprite.png';
+$up: (0px, 0px, 0px, 0px, 32px, 64px, 96px, 64px, '../art/sprite.png', 'up', );
+$up2-name: 'up2';
+$up2-x: 32px;
+$up2-y: 0px;
+$up2-offset-x: -32px;
+$up2-offset-y: 0px;
+$up2-width: 32px;
+$up2-height: 64px;
+$up2-total-width: 96px;
+$up2-total-height: 64px;
+$up2-image: '../art/sprite.png';
+$up2: (32px, 0px, -32px, 0px, 32px, 64px, 96px, 64px, '../art/sprite.png', 'up2', );
+$spritesheet-width: 96px;
+$spritesheet-height: 64px;
+$spritesheet-image: '../art/sprite.png';
+$spritesheet-sprites: ($down, $meta, $up, $up2, );
+$spritesheet: (96px, 64px, '../art/sprite.png', $spritesheet-sprites, );
+
+// The provided mixins are intended to be used with the array-like variables
+//
+// .icon-home {
+//   @include sprite-width($icon-home);
+// }
+//
+// .icon-email {
+//   @include sprite($icon-email);
+// }
+//
+// Example usage in HTML:
+//
+// `display: block` sprite:
+// <div class="icon-home"></div>
+//
+// To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class:
+//
+// // CSS
+// .icon {
+//   display: inline-block;
+// }
+//
+// // HTML
+// <i class="icon icon-home"></i>
+@mixin sprite-width($sprite) {
+  width: nth($sprite, 5);
+}
+
+@mixin sprite-height($sprite) {
+  height: nth($sprite, 6);
+}
+
+@mixin sprite-position($sprite) {
+  $sprite-offset-x: nth($sprite, 3);
+  $sprite-offset-y: nth($sprite, 4);
+  background-position: $sprite-offset-x  $sprite-offset-y;
+}
+
+@mixin sprite-image($sprite) {
+  $sprite-image: nth($sprite, 9);
+  background-image: url(#{$sprite-image});
+}
+
+@mixin sprite($sprite) {
+  @include sprite-image($sprite);
+  @include sprite-position($sprite);
+  @include sprite-width($sprite);
+  @include sprite-height($sprite);
+}
+
+// The `sprites` mixin generates identical output to the CSS template
+//   but can be overridden inside of SCSS
+//
+// @include sprites($spritesheet-sprites);
+@mixin sprites($sprites) {
+  @each $sprite in $sprites {
+    $sprite-name: nth($sprite, 10);
+    .#{$sprite-name} {
+      @include sprite($sprite);
+    }
+  }
+}

mixins/_user_agent.scss

@@ -0,0 +1,9 @@
+@mixin overrideUserAgent() {
+  @if $no_agent_focus == true {
+    @each $el in $io_focus_list {
+      #{$el}:focus {
+        outline: 0;
+      }
+    }
+  }
+}

modules/_vendor.scss

@@ -0,0 +1,23 @@
+/**
+ * @description
+ * Generates cross-browser-compatible output for a given element with its value.
+ *
+ * @author sthag
+ *
+ * @param values
+ * @returns
+ *   -webkit-<name>: <values>
+ *       ...-<name>: <values>
+ *
+ * @example
+ *   .selector
+ *     @include vendor-prefix(hyphens, auto)
+ */
+@mixin vendor-prefix($name, $argument) {
+	-webkit-#{$name}: #{$argument};
+	-ms-#{$name}: #{$argument};
+	-moz-#{$name}: #{$argument};
+	-o-#{$name}: #{$argument};
+	#{$name}: #{$argument};
+}
+

modules/breakpoint/_breakpoint_module.scss

@@ -0,0 +1,47 @@
+.query_goingLarge {
+  @include goingLarge($screen_tiny) {};
+}
+
+.query_goingSmall {
+  @include goingSmall($screen_gigantic) {};
+}
+
+.query_phoneUp {
+  @include forPhoneUp {}
+}
+
+.query_phoneOnly {
+  @include forPhoneOnly {}
+}
+
+.query_tabletPortaitOnly {
+  @include forTabletPortraitOnly {
+  }
+}
+
+.query_tabletPortraitUp {
+  @include forTabletPortraitUp {
+  }
+}
+
+.query_tabletLandscapeOnly {
+  @include forTabletLandscapeOnly {}
+}
+
+.query_tabletLandscapeUp {
+  @include forTabletLandscapeUp {}
+}
+
+.query_desktopOnly {
+  @include forDesktopOnly {
+  }
+}
+
+.query_desktopUp {
+  @include forDesktopUp {
+  }
+}
+
+.query_bigDesktopUp {
+  @include forBigDesktopUp {}
+}

modules/card/_card_module.scss

@@ -0,0 +1,76 @@
+// Card module styles
+// ------------------------------------------------------------------------------
+
+.html_card {
+	@extend %h_content_full;
+
+	body {
+
+		.card_bkg {
+			@extend %full_parent;
+			transition-duration: 800ms;
+			overflow: hidden;
+			vertical-align: top;
+			z-index: -1;
+
+			& > svg {
+				position: relative;
+			}
+		}
+
+		.card_box {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			height: 100vh;
+
+			* {
+				font-family: $family_text_card;
+				// text-align: center;
+			}
+
+			& > div {
+				position: relative;
+				padding: 64px 64px 24px 64px;
+				border: 1px solid #FFF;
+				background-color: #F5F5F5;
+				z-index: 40;
+			}
+		}
+
+		h1 {
+			margin: 16px 0;
+			color: #1E1E1E;
+			font-size: 24px;
+			line-height: 1.4em;
+			font-weight: normal;
+		}
+
+		p {
+			margin-top: 0;
+			margin-bottom: 16px;
+			font-size: 12px;
+			line-height: 1.4em;
+		}
+
+		.marked {
+			// padding-left: 1em;
+			// text-indent: -1em;
+
+			&::before { content: "*\0000a0" }
+		}
+
+		.decent { color: #666 }
+
+		a {
+			color: #000;
+			text-decoration: none;
+
+			&:hover {
+				color: #F4F9FA;
+				background-color: #0C85FF;
+				text-decoration: none;
+			}
+		}
+	}
+}

modules/editor/_editor_module.scss

@@ -0,0 +1,23 @@
+// Custom extends and mixins
+// ------------------------------------------------------------------------------
+@import "mixins";
+@import "extends";
+
+// Editor module styles
+// ------------------------------------------------------------------------------
+
+%wip {
+  border-right: $space_basic solid rgba(crimson, 0.8);
+  background-color: rgba(crimson, 0.1) !important;
+}
+.wip {
+  @extend %wip;
+  &::before, &::after {
+    content: "";
+    display: block;
+    height: 48px;
+  }
+}
+.wip_txt {
+  @extend %wip;
+}

modules/explanation/_explanation_module.scss

@@ -0,0 +1,115 @@
+// Explanation module styles
+// ------------------------------------------------------------------------------
+
+%expose_after {
+	&::after {
+		content: "";
+		display: block;
+		height: 48px;
+		background-color: rgba($delta_color, 0.1) !important;
+	}
+}
+%expose_before {
+	&::before {
+		content: "";
+		display: block;
+		height: 48px;
+		background-color: rgba($delta_color, 0.1) !important;
+	}
+}
+%expose {
+	&::before, &::after {
+		content: "";
+		display: block;
+		height: 48px;
+		background-color: rgba($delta_color, 0.1) !important;
+	}
+}
+%exp {
+}
+%exp_hidden {
+	display: none;
+}
+
+.exp_wrap {
+	position: relative;
+}
+
+.exp_overlay {
+	@extend %full_parent;
+	background-color: transparentize($alpha_color, .6);
+}
+
+.exp_pop {
+	@extend %exp_hidden !optional;
+	position: absolute;
+	z-index: 100;
+	top: $space_large;
+	left: $space_large;
+	padding: $space_half;
+	border: 4px solid $color_back_basic;
+	border-radius: 4px;
+	background-color: $color_back_basic;
+	pointer-events: none;
+}
+.exp_marker_pop {
+	position: absolute;
+	top: -$size_text_basic / 4 * 3;
+	right: -$size_text_basic / 2;
+	width: $size_text_basic;
+	height: $size_text_basic;
+	border: $space_tiny solid $color_highlight_basic;
+	border-radius: $size_text_basic;
+	color: $color_highlight_basic;
+	background-color: $color_darkest;
+}
+
+.exp_expose {
+	@extend %expose !optional;
+}
+.exp_expose_pre {
+	@extend %expose_after;
+}
+.exp_expose_post {
+	@extend %expose_before;
+}
+
+.exp_overlay_btn {
+	position: fixed;
+	width: 3em;
+	height: 2em;
+	// padding: $space_basic $space_basic * 2;
+	cursor: pointer;
+}
+.exp_help_btn {
+	display: table;
+	right: $space_double;
+	bottom: $space_double;
+	background-color: rgba($color_darkest, 0.4);
+	&:hover {
+		background-color: $color_brightest;
+		> .span_solo {
+			color: $color_darkest;
+		}
+	}
+	.span_solo {
+		display: table-cell;
+		color: rgba($color_brightest, 0.8);
+		font-family: $family_text_mono;
+		font-size: 1.4em;
+		text-align: center;
+		vertical-align: middle;
+	}
+}
+
+
+
+.expose_height {
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	background-color: rgba($delta_color, 0.1) !important;
+	@include vendor-prefix(transition, height 0.5s ease);
+}

modules/maintenance/_maintenance_module.scss

@@ -0,0 +1,19 @@
+.body_status {
+  @extend .sec_main_status;
+  height: 100vh;
+  border-color: $foxtrot_color;
+
+  .main_site {
+    @extend .wrap_center;
+    & > h1:first-of-type {
+      margin-top: 0;
+      margin-bottom: 0;
+      font-weight: bold;
+      line-height: 1;
+    }
+    & > h1 + h3 {
+      margin-top: 0;
+      margin-bottom: $space_small;
+    }
+  }
+}

modules/media/_media_module.scss

@@ -0,0 +1,4 @@
+.nomedia {
+	@extend .box_placeholder;
+	height: inherit;
+}

modules/navigation/_nav_module.scss

@@ -0,0 +1,171 @@
+nav {
+
+	ul {
+		padding-left: 0;
+	}
+
+	li {
+		margin-bottom: $space_basic;
+		list-style: none;
+	}
+}
+
+.nav_horizontal {
+	ul {
+		@extend .overflow;
+
+		ul {
+			margin: $space_basic 0;
+		}
+
+		li {
+			@extend .float_space_left;
+			margin-right: $space_basic;
+			margin-bottom: 0;
+
+			&:last-child {
+				margin-right: 0;
+			}
+		}
+	}
+}
+
+.nav_right {
+	float: right;
+	margin-left: $space_basic;
+
+	.align_parent {
+		margin-right: $space_basic * -1;
+	}
+}
+
+.nav_separate {
+	li {
+		position: relative;
+		padding-left: $space_tiny;
+
+		&:not(:first-child) {
+
+			&::before {
+				content: "";
+				position: absolute;
+				width: $space_tiny;
+				height: 100%;
+				left: 0;
+				top: 0;
+				background-color: $color_border_basic;
+			}
+		}
+	}
+}
+
+.nav_separate_right {
+	float: right;
+	li {
+		position: relative;
+
+		&:first-child {
+			padding-left: $space_basic * 2 + $space_tiny;
+
+			&::before {
+				content: "";
+				position: absolute;
+				width: $space_tiny;
+				height: 100%;
+				left: 0;
+				top: 0;
+				background-color: $color_front_basic;
+				margin: 0 $space_basic;
+			}
+		}
+	}
+}
+
+.nav_center_old {
+	@extend .nav_horizontal;
+	float: right;
+	position: relative;
+	left: -50%;
+
+	ul {
+		position: relative;
+		left: 50%;
+		text-align: center;
+	}
+}
+
+.nav_column {
+	position: relative;
+	margin: $space_basic 0;
+
+	ul {
+		@extend .flex;
+		margin: 0 $space_large;
+
+		li {
+			@extend .flex_child;
+			flex-grow: 1;
+			margin: 0;
+			text-align: center;
+
+			a {
+				display: block;
+			}
+		}
+	}
+}
+
+.nav_page_meta {
+	position: fixed;
+	// display: table;
+	// width: 3em;
+  right: $space_half;
+  bottom: $space_double;
+
+	ul {
+		margin: $space_basic 0;
+	}
+
+	li {
+		margin-bottom: 0;
+		line-height: 1;
+	}
+	button {
+		width: 32px;
+		margin-right: 0;
+		margin-left: 0;
+	}
+	.a_button_meta {
+		// display: table-cell;
+		display: inline-block;
+
+		&:active,
+		&:focus {
+			background-color: transparent;
+		}
+
+		&:hover {
+			background-color: $color_action_basic;
+		}
+	}
+	.sprite_img {
+		vertical-align: top;
+	}
+}
+
+.header_page {
+
+	nav {
+		@extend .nav_horizontal;
+
+		a {
+
+			&:active,
+			&:focus,
+			&:hover {
+				background-color: rgba($color_text_basic, 0.2);
+				color: $color_text_basic;
+			}
+		}
+	}
+}

modules/print/_print_module.scss

@@ -0,0 +1,128 @@
+// Custom extends and mixins
+// ------------------------------------------------------------------------------
+@import "mixins";
+@import "extends";
+
+// Print module styles
+// ------------------------------------------------------------------------------
+
+%paper {
+	background-color: $color_front_basic;
+}
+
+$a4: ".dina4" 1.2cm 1.2cm 1.2cm 2.4cm;
+$a5: ".dina5" 0 0 0 1.2cm;
+$a6: ".dina6" 0 0 0 1.2cm;
+
+$din: $a4, $a5, $a6;
+
+.print_body {
+	font-size: $size_text_print;
+	margin: 10vh 20vw;
+
+	@page {
+		size: A4;
+		margin: 1.2cm;
+	}
+
+	@page:first {
+		size: A4;
+		margin: 0;
+	}
+
+	@each $space in $din {
+		#{nth($space, 1)} {
+			padding-top: nth($space, 2);
+			padding-right: nth($space, 3);
+			padding-bottom: nth($space, 4);
+			padding-left: nth($space, 5);
+
+			.page_head, .page_foot {
+				right: nth($space, 3);
+				left: nth($space, 5);
+			}
+			.page_head {
+				top: nth($space, 2);
+			}
+			.page_foot {
+				bottom: nth($space, 4);
+			}
+		}
+	}
+
+	*[class^="din"] {
+		@extend %paper;
+		position: relative;
+		overflow: auto;
+
+		p {
+			@extend %basic_print;
+		}
+
+		.page_head, .page_foot {
+			position: absolute;
+		}
+
+		.page_head {
+			page: cover;
+		}
+
+		.page_foot {
+			display: flex;
+			flex-direction: row;
+
+			*:last-child {
+				margin-bottom: 0;
+			}
+
+			p {
+				flex: 1 0 auto;
+				margin: 0;
+				font-size: 8pt;
+				line-height: 10pt;
+				text-align: center;
+			}
+
+			.page_no {
+				flex: 1 0 auto;
+				font-size: 20pt;
+				line-height: 1;
+				text-align: right;
+			}
+			p:first-child {
+				text-align: left;
+			}
+		}
+		.page_content {
+			margin-top: 10cm;
+			margin-bottom: 2cm;
+		}
+		margin: $space_small auto;
+	}
+
+	.page_title, .page_date {
+		font-size: 14pt;
+	}
+
+	.page_title {
+		margin: 0;
+	}
+
+	.page_date, .page_no {
+		@extend %head_1;
+		float: right;
+	}
+
+	.page_author {
+		position: absolute;
+		top: 5cm;
+		right: 0;
+		text-align: right;
+	}
+
+	.page_recipient {
+		position: absolute;
+		top: 5cm;
+		left: 0;
+	}
+}

modules/tables/_tables_module.scss

@@ -0,0 +1,68 @@
+.table_link {
+	width: 100%;
+	border: 0;
+	table-layout: auto;
+
+	tbody {
+		border-bottom: $border_basic;
+
+		&:hover {
+			background-color: $color_bright;
+		}
+	}
+
+	th, td {
+		border: 0;
+	}
+
+	.cell_icon {
+		width: 48px;
+		text-align: center;
+		img {
+			vertical-align: text-top;
+		}
+	}
+
+	.cell_link {
+		padding-right: $space_basic;
+		padding-left: $space_basic;
+
+		&:hover {
+			background-color: $foxtrot_color;
+			a:first-child {
+				display: none;
+			}
+			a:last-child {
+				display: block;
+				color: $color_highlight_basic;
+			}
+		}
+
+		a {
+			display: block;
+		}
+
+		a:last-child {
+			display: none;
+		}
+	}
+
+	th:last-child, .cell_date {
+		width: 16%;
+		text-align: center;
+	}
+
+	.cell_text {
+		padding-right: $space_basic;
+		padding-left: $space_basic;
+
+		div {
+			width: 100%;
+		}
+
+		.shorten {
+			@extend %short;
+			max-height: 44px;
+		}
+	}
+}