hippie/basic/_grouping.scss

// Basic content
// -----------------------------------------------------------------------------

// Paragraph
p {
	@extend %basic;
	margin: $basic_space 0;
	color: $basic_font_color;
	code {
		padding: $tiny_space $half_space;
		font-size: 1em;
		line-height: 1;
	}
}

.p__col_line {
	column-rule: $basic_border_width solid $black;
}
.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: $black;
}

.hr__hidden {
	@extend hr;
	border-color: transparent;
}

.hr__dotted {
	@extend hr;
	border-style: dotted;
}

// Preformat
pre {
	@extend %basic_mono;
}

.pre__code {
	border-color: rgba($white,.1);
	border-style: dotted;
	border-width:  0 0 0 $border_width_4;
	border-radius: $basic_corner;
	padding: $basic_space;
	background-color: rgba($white,.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;
		}
	}
}

// Embedded
figure {
	margin: $space_2 $basic_indent;
}

figcaption {
	@extend %basic;
}



// Special elements
// -----------------------------------------------------------------------------

main {

}

div {

}

.box__screen {
	width: $basic_width;
	@media screen and (orientation: landscape) {
		@media (min-width: $screen_small) {
			width: $width_2;
		}
		@media (min-width: $screen_medium) {
			width: $width_3;
		}
		@media (min-width: $screen_large) {
			width: $width_4;
		}
	}
	@media screen and (orientation: portrait) {
		@media (min-width: $screen_small) {
			width: $width_2;
		}
	}
	margin: 0 auto;
	border-top-width: $border_width_8;
	border-top-style: solid;
	border-color: $basic_border_color;
	padding-top: $space_3;
}

.box__info {
	padding: $space_2 $basic_indent;
	border-right: $basic_space solid rgba($echo_color, .6);
	background-color: rgba($echo_color, .1) !important;
}

// Space and placeholders
.box__space {
	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($black,.1);
	border-radius: $basic_corner;
	padding: $basic_space;
	background-color: rgba($black,.1);
	svg {
		vertical-align: top;
	}
}
.box__placeholder_bkg {
	width: 100%;
	height: $space_4;
	border: $border_width_4 solid rgba($black,.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($black,.1);
}