added dark theme option. It ìs selected automagically based on system choiche of...

[theme-danix.xyz.git] / assets / sass / components / _tiles.scss

///\r
/// Forty by HTML5 UP\r
/// html5up.net | @ajlkn\r
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)\r
///\r
\r
/* Tiles */\r
\r
	.tiles {\r
		@include vendor('display', 'flex');\r
		@include vendor('flex-wrap', 'wrap');\r
		border-top: 0 !important;\r
\r
		& + * {\r
			border-top: 0 !important;\r
		}\r
\r
		article {\r
			@include vendor('align-items', 'center');\r
			@include vendor('display', 'flex');\r
			@include vendor('transition', (\r
				'transform 0.25s ease',\r
				'opacity 0.25s ease',\r
				'filter 1s ease',\r
				'-webkit-filter 1s ease'\r
			));\r
			@include padding(4em, 4em);\r
			background-position: center;\r
			background-repeat: no-repeat;\r
			background-size: cover;\r
			cursor: default;\r
			height: 40vh;\r
			max-height: 40em;\r
			min-height: 23em;\r
			overflow: hidden;\r
			position: relative;\r
			width: 40%;\r
\r
			.image {\r
				display: none;\r
			}\r
\r
			header {\r
				position: relative;\r
				z-index: 3;\r
			}\r
\r
			h3 {\r
				font-size: 1.75em;\r
\r
				a {\r
					&:hover {\r
						color: inherit !important;\r
					}\r
				}\r
			}\r
\r
			.link.primary {\r
				border: 0;\r
				height: 100%;\r
				left: 0;\r
				position: absolute;\r
				top: 0;\r
				width: 100%;\r
				z-index: 4;\r
			}\r
\r
			&:before {\r
				@include vendor('transition', 'opacity 0.5s ease');\r
				bottom: 0;\r
				content: '';\r
				display: block;\r
				height: 100%;\r
				left: 0;\r
				opacity: 0.85;\r
				position: absolute;\r
				width: 100%;\r
				z-index: 2;\r
			}\r
\r
			&:after {\r
				background-color: transparentize(_palette_light(bg), 0.75);\r
				content: '';\r
				display: block;\r
				height: 100%;\r
				left: 0;\r
				position: absolute;\r
				top: 0;\r
				width: 100%;\r
				z-index: 1;\r
				@media screen and (prefers-color-scheme: dark) {\r
					background-color: transparentize(_palette_dark(bg), 0.75);\r
				}\r
			}\r
\r
			&:hover {\r
				&:before {\r
					opacity: 0;\r
				}\r
			}\r
\r
			&.is-transitioning {\r
				@include vendor('transform', 'scale(0.95)');\r
				@include vendor('filter', 'blur(0.5em)');\r
				opacity: 0;\r
			}\r
\r
			&:nth-child(4n - 1),\r
			&:nth-child(4n - 2) {\r
				width: 60%;\r
			}\r
\r
			&:nth-child(6n - 5) {\r
				&:before {\r
					background-color: _palette_light(accent1);\r
					@media screen and (prefers-color-scheme: dark) {\r
						background-color: _palette_dark(accent1);\r
					}\r
				}\r
			}\r
\r
			&:nth-child(6n - 4) {\r
				&:before {\r
					background-color: _palette_light(accent2);\r
					@media screen and (prefers-color-scheme: dark) {\r
						background-color: _palette_dark(accent2);\r
					}\r
				}\r
			}\r
\r
			&:nth-child(6n - 3) {\r
				&:before {\r
					background-color: _palette_light(accent3);\r
					@media screen and (prefers-color-scheme: dark) {\r
						background-color: _palette_dark(accent3);\r
					}\r
				}\r
			}\r
\r
			&:nth-child(6n - 2) {\r
				&:before {\r
					background-color: _palette_light(accent4);\r
					@media screen and (prefers-color-scheme: dark) {\r
						background-color: _palette_dark(accent4);\r
					}\r
				}\r
			}\r
\r
			&:nth-child(6n - 1) {\r
				&:before {\r
					background-color: _palette_light(accent5);\r
					@media screen and (prefers-color-scheme: dark) {\r
						background-color: _palette_dark(accent5);\r
					}\r
				}\r
			}\r
\r
			&:nth-child(6n) {\r
				&:before {\r
					background-color: _palette_light(accent6);\r
					@media screen and (prefers-color-scheme: dark) {\r
						background-color: _palette_dark(accent6);\r
					}\r
				}\r
			}\r
		}\r
\r
		@include breakpoint('<=large') {\r
			article {\r
				@include padding(4em, 3em);\r
				height: 30vh;\r
				max-height: 30em;\r
				min-height: 20em;\r
			}\r
		}\r
\r
		@include breakpoint('<=medium') {\r
			article {\r
				width: 50% !important;\r
			}\r
		}\r
\r
		@include breakpoint('<=small') {\r
			article {\r
				@include padding(3em, 1.5em);\r
				height: 16em;\r
				max-height: none;\r
				min-height: 0;\r
\r
				h3 {\r
					font-size: 1.5em;\r
				}\r
			}\r
		}\r
\r
		@include breakpoint('<=xsmall') {\r
			display: block;\r
\r
			article {\r
				height: 20em;\r
				width: 100% !important;\r
			}\r
		}\r
	}