New stuff

elements/_grouping.scss

@@ -0,0 +1,249 @@
+// Basic content
+// -----------------------------------------------------------------------------
+
+// Paragraph
+p {
+	@extend %basic;
+	margin: $basic_space 0;
+	code {
+		padding: $tiny_space $half_space;
+		font-size: 1em;
+		line-height: 1;
+	}
+}
+
+.p__col_line {
+	column-rule: $basic_border_width solid $darkest_color;
+}
+.p__col_2, .p__col_3 {
+	@extend p;
+}
+.p__col_2 {
+	column-count: 2;
+	column-gap: $space_3;
+}
+.p__col_3 {
+	column-count: 3;
+	column-gap: $space_4;
+}
+
+// Address
+address {
+
+}
+
+// Line
+hr {
+	margin: $space_3 auto;
+	border-width: $basic_border_width 0 0;
+	border-style: solid;
+	border-color: $darkest_color;
+}
+
+.hr__hidden {
+	@extend hr;
+	border-color: transparent;
+}
+
+.hr__dotted {
+	@extend hr;
+	border-style: dotted;
+}
+
+// Preformat
+pre {
+	@extend %basic_mono;
+}
+
+.pre__code {
+	// overflow-x: scroll;
+	border-color: rgba($brightest_color,.1);
+	border-style: dotted;
+	border-width:  0 0 0 $border_width_4;
+	border-radius: $basic_corner;
+	padding: $basic_space;
+	background-color: rgba($brightest_color,.1);
+	code {
+		background-color: transparent;
+	}
+}
+
+// Quote
+blockquote {
+	margin: $basic_space $basic_indent;
+}
+
+.quote__mark {
+	p::before {
+		content: "\201E \0020";
+	}
+	p::after {
+		content: "\201C \0020";
+	}
+	.quote__source {
+		&::before, &::after {
+			content: "";
+		}
+	}
+}
+
+// List
+dl, ul, ol {
+	margin: $space_2 0 $basic_space;
+}
+
+ul, ol {
+	padding-left: $basic_indent;
+}
+
+li, dt, dd {
+	@extend %basic;
+	color: $basic_font_color;
+}
+
+dd {
+	margin-left: $basic_indent;
+}
+
+ul {
+	li {
+		list-style: square;
+	}
+}
+
+.list__dash {
+	li {
+		list-style: none;
+		position: relative;
+
+		&::before {
+			content: "_";
+			position: absolute;
+			left: -1em;
+		}
+	}
+}
+
+.list__link {
+	li {
+		margin-bottom: $tiny_space * 2;
+		text-transform: uppercase;
+		a {
+			display: block;
+			padding: $basic_padding;
+			color: $basic_font_color;
+			img {
+				margin-right: $basic_space;
+				padding-bottom: .2em;
+				vertical-align: text-bottom;
+			}
+			&:active,
+			&:focus,
+			&:hover {
+				background-color: $basic_action_color;
+				color: $basic_highlight_color;
+			}
+		}
+	}
+}
+
+.list__horizontal {
+	overflow: auto;
+	li {
+		@extend .float_left;
+	}
+}
+
+// Embedded
+figure {
+	margin: $space_2 $basic_indent;
+}
+
+figcaption {
+	@extend %basic;
+}
+
+
+
+// Special elements
+// -----------------------------------------------------------------------------
+
+main {
+
+}
+
+div {
+
+}
+
+.box__info {
+	padding: $space_2 $basic_indent;
+	border-right: $basic_space solid rgba($echo_color, .6);
+	background-color: rgba($echo_color, .1) !important;
+}
+
+.box__main_indent {
+	margin-left: 25%;
+}
+
+.box__full_width {
+	// position: relative;
+	// overflow: hidden;
+	// width: 100%;
+}
+
+// Inline
+.box__inline_left {
+	@extend .float_left;
+	// padding: $basic_space / 2;
+}
+
+// Space and placeholders
+.box__space {
+	position: relative;
+	width: 100%;
+}
+
+.box__cube {
+	float: left;
+	display: table;
+	width: $space_4;
+	text-align: center;
+	vertical-align: middle;
+	span {
+		display: table-cell;
+	}
+}
+
+.box__placeholder {
+	width: 100%;
+	height: $space_4;
+	border: $border_width_4 solid rgba($darkest_color,.1);
+	border-radius: $basic_corner;
+	padding: $basic_space;
+	background-color: rgba($darkest_color,.1);
+	svg {
+		vertical-align: top;
+	}
+}
+
+.box__placeholder_bkg {
+	width: 100%;
+	height: $space_4;
+	border: $border_width_4 solid rgba($darkest_color,.1);
+	border-radius: $basic_corner;
+	padding: $basic_space;
+	/*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='2%' y1='2%' x2='98%' y2='98%' stroke='#000' stroke-width='.5'/><line x1='0' y1='100%' x2='100%' y2='0' stroke='#000' stroke-width='.5'/></svg>") no-repeat;
+	background-color: rgba($darkest_color,.1);
+}
+
+// Flex
+.box__column {
+	@extend .flex;
+
+	.column {
+		@extend .flex_child;
+		flex-grow: 1;
+	}
+}