fortyone-jekyll-theme 1.0.0

data/_sass/components/_section.scss

@@ -0,0 +1,69 @@
+///
+/// Forty by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Section/Article */
+
+	section, article {
+		&.special {
+			text-align: center;
+		}
+	}
+
+	header {
+		&.major {
+			width: -moz-max-content;
+			width: -webkit-max-content;
+			width: -ms-max-content;
+			width: max-content;
+			margin-bottom: _size(element-margin);
+
+			> :first-child {
+				margin-bottom: 0;
+				width: calc(100% + 0.5em);
+
+				&:after {
+					content: '';
+					background-color: _palette(fg-bold);
+					display: block;
+					height: 2px;
+					margin: 0.325em 0 0.5em 0;
+					width: 100%;
+				}
+			}
+
+			> p {
+				font-size: 0.7em;
+				font-weight: _font(weight-bold);
+				letter-spacing: _font(letter-spacing-alt);
+				margin-bottom: 0;
+				text-transform: uppercase;
+			}
+
+			body.is-ie & {
+				> :first-child {
+					&:after {
+						max-width: 9em;
+					}
+				}
+
+				> h1 {
+					&:after {
+						max-width: 100% !important;
+					}
+				}
+			}
+		}
+
+		@include breakpoint(small) {
+			&.major {
+				> p {
+					br {
+						display: none;
+					}
+				}
+			}
+		}
+	}

data/_sass/components/_spotlights.scss

@@ -0,0 +1,119 @@
+///
+/// Forty by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Spotlights */
+
+	.spotlights {
+		border-top: 0 !important;
+
+		& + * {
+			border-top: 0 !important;
+		}
+
+		> section {
+			@include vendor('display', 'flex');
+			@include vendor('flex-direction', 'row');
+			background-color: desaturate(lighten(_palette(bg-alt), 2), 1);
+
+			> .image {
+				background-position: center center;
+				background-size: cover;
+				border-radius: 0;
+				display: block;
+				position: relative;
+				width: 30%;
+
+				img {
+					border-radius: 0;
+					display: block;
+					width: 100%;
+				}
+
+				&:before {
+					background: transparentize(_palette(bg), 0.1);
+					content: '';
+					display: block;
+					height: 100%;
+					left: 0;
+					opacity: 0;
+					position: absolute;
+					top: 0;
+					width: 100%;
+				}
+			}
+
+			> .content {
+				@include vendor('display', 'flex');
+				@include vendor('flex-direction', 'column');
+				@include vendor('justify-content', 'center');
+				@include vendor('align-items', 'center');
+				@include padding(2em, 3em);
+				width: 70%;
+
+				> .inner {
+					margin: 0 auto;
+					max-width: 100%;
+					width: _size(inner);
+				}
+			}
+
+			&:nth-child(2n) {
+				@include vendor('flex-direction', 'row-reverse');
+				background-color: desaturate(lighten(_palette(bg-alt), 4), 2);
+
+				> .content {
+					@include vendor('align-items', 'flex-end');
+				}
+			}
+		}
+
+		@include breakpoint(xlarge) {
+			> section {
+				> .image {
+					width: 40%;
+				}
+
+				> .content {
+					width: 60%;
+				}
+			}
+		}
+
+		@include breakpoint(large) {
+			> section {
+				> .image {
+					width: 45%;
+				}
+
+				> .content {
+					width: 55%;
+				}
+			}
+		}
+
+		@include breakpoint(medium) {
+			> section {
+				display: block;
+
+				> .image {
+					width: 100%;
+				}
+
+				> .content {
+					@include padding(4em, 3em);
+					width: 100%;
+				}
+			}
+		}
+
+		@include breakpoint(small) {
+			> section {
+				> .content {
+					@include padding(3em, 1.5em);
+				}
+			}
+		}
+	}

data/_sass/components/_table.scss

@@ -0,0 +1,81 @@
+///
+/// Forty by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Table */
+
+	.table-wrapper {
+		-webkit-overflow-scrolling: touch;
+		overflow-x: auto;
+	}
+
+	table {
+		margin: 0 0 _size(element-margin) 0;
+		width: 100%;
+
+		tbody {
+			tr {
+				border: solid 1px _palette(border);
+				border-left: 0;
+				border-right: 0;
+
+				&:nth-child(2n + 1) {
+					background-color: _palette(border-bg);
+				}
+			}
+		}
+
+		td {
+			padding: 0.75em 0.75em;
+		}
+
+		th {
+			color: _palette(fg-bold);
+			font-size: 0.9em;
+			font-weight: _font(weight-bold);
+			padding: 0 0.75em 0.75em 0.75em;
+			text-align: left;
+		}
+
+		thead {
+			border-bottom: solid 2px _palette(border);
+		}
+
+		tfoot {
+			border-top: solid 2px _palette(border);
+		}
+
+		&.alt {
+			border-collapse: separate;
+
+			tbody {
+				tr {
+					td {
+						border: solid 1px _palette(border);
+						border-left-width: 0;
+						border-top-width: 0;
+
+						&:first-child {
+							border-left-width: 1px;
+						}
+					}
+
+					&:first-child {
+						td {
+							border-top-width: 1px;
+						}
+					}
+				}
+			}
+
+			thead {
+				border-bottom: 0;
+			}
+
+			tfoot {
+				border-top: 0;
+			}
+		}
+	}

data/_sass/components/_tiles.scss

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