hippie/source/style/modules/demo/_demo_module.scss

@use "sass:color";

@use "../../hippie-style/hippie";

.demo__intro {
	@extend .sec_main_center;
	@extend .sec_main_status;
}

.demo__status {
	@extend .sec_main_status;
	position: relative;
	min-height: 50vh;
	border-color: hippie.basic_color(foxtrot);

	h1:first-of-type {
		margin-top: 0;
		font-weight: bold;
	}

	@media (max-height: 512px) {
		.pos_abs {
			position: static !important;
		}
	}
}

.demo__header {
	padding: hippie.$space_double;

	nav {

		ul {
			margin: 0;
		}
	}
}

.header_fancy {
	background-color: color.adjust(hippie.basic_color(bravo), $alpha: -0.4);

	nav {

		a {
			background-color: color.adjust(hippie.basic_color(alpha), $alpha: -0.4);
			color: hippie.basic_color(alpha);

			&:active,
			&:focus,
			&:hover {
				background-color: rgba(hippie.$color_brightest, 0.2);
				color: hippie.$color_brightest;
			}
		}
	}
}

.header_fix {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	background-color: color.adjust(hippie.basic_color(charlie), $alpha: -0.4);

	nav {

		a {

			&:active,
			&:focus,
			&:hover {
				background-color: rgba(hippie.$color_brightest, 0.2);
				color: hippie.$color_brightest;
			}
		}
	}
}

.demo__footer {
	width: 100%;
	// height: 128px;
	padding: hippie.$space_double 0;
	background-color: hippie.$color_dark;
	color: hippie.$color_bright;

	nav {

		a {
			color: hippie.$color_brightest;
		}
	}
}

.demo__sprite_down {
	@include hippie.sprite(hippie.$down);
	// width: 32px;
	// height: 32px;
	// background-image: url(../art/sprites.png);
	// background-position: -32px 0;
}

.demo__sprite_up {
	@include hippie.sprite(hippie.$up);
	// width: 32px;
	// height: 64px;
	// background-image: url(../art/sprites.png);
	// background-position: 0 0;
}

.demo__sprite_meta {
	@include hippie.sprite(hippie.$meta);
	// width: 32px;
	// height: 32px;
	// background-image: url(../art/sprites.png);
	// background-position: -32px 32px;
}

.demo__avatar {

	img {
		opacity: 1;
		width: 128px;
		height: auto;
		min-width: 128px;
		min-height: 128px;
		border-radius: 50%;
		background-color: hippie.basic_color(delta);
	}
}

.demo__flag {
	height: 40vh;
}

.demo__credits {
	margin: hippie.$space_small 0 hippie.$space_basic 0;
}

.demo__queries > p {
	padding: hippie.$padding_basic;
}

.query_phoneUp {
	@include hippie.forPhoneUp {
		background-color: rgba(hippie.$color_text_basic, 0.2)
	}
;
}

.query_phoneOnly {
	@include hippie.forPhoneOnly {
		background-color: rgba(hippie.$color_text_basic, 0.2);
	}
}

.query_tabletPortraitOnly {
	@include hippie.forTabletPortraitOnly {
		background-color: rgba(hippie.$color_text_basic, 0.2);
	}
}

.query_tabletPortraitUp {
	@include hippie.forTabletPortraitUp {
		background-color: rgba(hippie.$color_text_basic, 0.2);
	}
}

.query_tabletLandscapeOnly {
	@include hippie.forTabletLandscapeOnly {
		background-color: rgba(hippie.$color_text_basic, 0.2);
	}
}

.query_tabletLandscapeUp {
	@include hippie.forTabletLandscapeUp {
		background-color: rgba(hippie.$color_text_basic, 0.2);
	}
}

.query_desktopOnly {
	@include hippie.forDesktopOnly {
		background-color: rgba(hippie.$color_text_basic, 0.2);
	}
}

.query_desktopUp {
	@include hippie.forDesktopUp {
		background-color: rgba(hippie.$color_text_basic, 0.2);
	}
}

.query_bigDesktopUp {
	@include hippie.forBigDesktopUp {
		background-color: rgba(hippie.$color_text_basic, 0.2);
	}
}

.demo__query_example {
	@include hippie.goingLarge(hippie.$screen_tiny) {
		background-color: hippie.basic_color(alpha);
	}
	@include hippie.goingLarge(hippie.$screen_small) {
		background-color: hippie.basic_color(bravo);
	}
	@include hippie.goingLarge(hippie.$screen_medium) {
		background-color: hippie.basic_color(charlie);
	}
	@include hippie.goingLarge(hippie.$screen_large) {
		background-color: hippie.basic_color(delta);
	}
	@include hippie.goingLarge(hippie.$screen_huge) {
		background-color: hippie.basic_color(echo);
	}
	@include hippie.goingLarge(hippie.$screen_gigantic) {
		background-color: hippie.basic_color(foxtrot);
	}
	margin-bottom: hippie.$space_small;
	padding: hippie.$space_small;
	text-align: center;

	&:after {
		@extend code;
		@include hippie.goingLarge(hippie.$screen_tiny) {
			& {
				content: '768px';
			}
		}
		@include hippie.goingLarge(hippie.$screen_small) {
			& {
				content: '1024px';
			}
		}
		@include hippie.goingLarge(hippie.$screen_medium) {
			& {
				content: '1280px';
			}
		}
		@include hippie.goingLarge(hippie.$screen_huge) {
			& {
				content: '1680px';
			}
		}
		@include hippie.goingLarge(hippie.$screen_gigantic) {
			& {
				content: '1920px';
			}
		}
		content: '< 768px';
		padding: hippie.$padding_basic;
		border-radius: hippie.$radius_basic;
		color: hippie.$color_brightest;
		background-color: rgba(hippie.$color_front_basic, 0.2);
	}
}

// Tables
.demo__td_no_bl {
	border-left: none;
}

.demo__td_no_br {
	border-right: none;
}

.demo__td_pr {
	padding-right: hippie.$space_double;
}

.demo__td_pl {
	padding-left: hippie.$space_double;
}

#demo {
	.wrap {
		display: flex;
		// height: 100%;
		align-items: center;
		justify-content: center;
	}

	.hello {
		flex: 0 1 auto;
		width: 80%;
	}

	.responsive {
		@include hippie.forTabletPortraitUp {
			display: flex;
			flex-flow: row wrap;
			align-items: stretch;
			justify-content: space-between;
			gap: hippie.$space_half hippie.$space_basic;

			& > * {
				flex: auto;
			}
		}
	}
}