themes-wordpress/affinity/assets/stylesheets/style.scss

/*
Theme Name: Affinity
Theme URI: http://wordpress.com/themes/affinity/
Author: Automattic
Author URI: http://wordpress.com/themes/
Description: Affinity is a classic one-page theme designed with weddings and family announcements in mind.
Version: 1.0.0-wpcom
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: affinity
Tags: blog, wedding, contemporary, elegant, modern, sophisticated, brown, dark, custom-background, custom-colors, custom-header, featured-image-header, featured-images, flexible-header, full-width-template, infinite-scroll, rtl-language-support, site-logo, theme-options, threaded-comments, translation-ready, responsive-layout, one-column, two-columns, right-sidebar

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Affinity is based on Underscores http://underscores.me/, (C) 2012-2016 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Normalize
# Accessibility
# Alignments
# Clearings
# Typography
# Forms
# Buttons
# Formatting
# Lists
# Tables
# Navigation
# Links
# Layout
	## Posts
	## Pages
# Comments
# Widgets
# Infinite scroll
# Media
	## Galleries
--------------------------------------------------------------*/
@import "variables/variables-base";
@import "mixins/mixins-base";

/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/
@import "shared/normalize";

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
@import "shared/accessibility";

/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
@import "shared/alignments";

/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/
@import "shared/clearings";

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
@import "shared/typography";

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
@import "shared/forms";

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
@import "shared/buttons";

/*--------------------------------------------------------------
# Formattings
--------------------------------------------------------------*/
@import "shared/formatting";

/*--------------------------------------------------------------
# Lists
--------------------------------------------------------------*/
@import "shared/lists";

/*--------------------------------------------------------------
# Tables
--------------------------------------------------------------*/
@import "shared/tables";

/*--------------------------------------------------------------
# Links
--------------------------------------------------------------*/
@import "shared/links";

/*--------------------------------------------------------------
# Links
--------------------------------------------------------------*/
@import "shared/links";

/*--------------------------------------------------------------
# Layout
--------------------------------------------------------------*/
@import "layout/layout";

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
@import "shared/navigation";

/*--------------------------------------------------------------
# Comments
--------------------------------------------------------------*/
@import "sections/comments";

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
@import "sections/widgets";

/*--------------------------------------------------------------
# Infinite scroll
--------------------------------------------------------------*/
@import "shared/infinitescroll";

/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/
@import "shared/media";


/*--------------------------------------------------------------
# Customizer
--------------------------------------------------------------*/

/* Hide this until we're in the Customizer */
.affinity-panel-title {
	display: none;
}

.affinity-customizer.affinity-front-page .affinity-panel {
	/* Colour-code all panels (add 1 to account for #affinity-hero, so 2 is actually panel 1)*/
}
.affinity-customizer.affinity-front-page .affinity-panel::after {
	border: 2px dashed;
	bottom: 1.6em;
	content: '';
	display: block;
	left: 1.6em;
	position: absolute;
	right: 1.6em;
	top: 1.6em;
}
.affinity-customizer.affinity-front-page .affinity-panel .affinity-panel-title {
	color: #fff;
	display: inline-block;
	font-family: $font__headings;
	@include font-size(.875);
	letter-spacing: 1px;
	padding: 5px 10px;
	position: absolute;
	top: 3.2em;
	right: 3.2em;
	text-transform: uppercase;
	transform: translate(3px,-3px);
	font-weight: bold;
}
.affinity-customizer.affinity-front-page .affinity-panel:nth-of-type(1)::after {
	display: none;
}
.affinity-customizer.affinity-front-page .affinity-panel:nth-of-type(2) .affinity-panel-title {
	background: #a64b55;
}
.affinity-customizer.affinity-front-page .affinity-panel:nth-of-type(2)::after {
	border-color: #a64b55;
	color: #a64b55;
}
.affinity-customizer.affinity-front-page .affinity-panel:nth-of-type(3) .affinity-panel-title {
	background: #b569a2;
}
.affinity-customizer.affinity-front-page .affinity-panel:nth-of-type(3)::after {
	border-color: #b569a2;
	color: #b569a2;
}
.affinity-customizer.affinity-front-page .affinity-panel:nth-of-type(4) .affinity-panel-title {
	background: #8f68bd;
}
.affinity-customizer.affinity-front-page .affinity-panel:nth-of-type(4)::after {
	border-color: #8f68bd;
	color: #8f68bd;
}
.affinity-customizer.affinity-front-page .affinity-panel:nth-of-type(5) .affinity-panel-title {
	background: #575ebd;
}
.affinity-customizer.affinity-front-page .affinity-panel:nth-of-type(5)::after {
	border-color: #575ebd;
	color: #575ebd;
}
.affinity-customizer.affinity-front-page .affinity-panel:nth-of-type(6) .affinity-panel-title {
	background: #55a1bd;
}
.affinity-customizer.affinity-front-page .affinity-panel:nth-of-type(6)::after {
	border-color: #55a1bd;
	color: #55a1bd;
}
.affinity-customizer.affinity-front-page .affinity-panel:nth-of-type(7) .affinity-panel-title {
	background: #7dbd8f;
}
.affinity-customizer.affinity-front-page .affinity-panel:nth-of-type(7)::after {
	border-color: #7dbd8f;
	color: #7dbd8f;
}
.affinity-customizer.affinity-front-page .affinity-panel:nth-of-type(8) .affinity-panel-title {
	background: #c8b247;
}
.affinity-customizer.affinity-front-page .affinity-panel:nth-of-type(8)::after {
	border-color: #c8b247;
	color: #c8b247;
}
.affinity-customizer.affinity-front-page .affinity-panel:nth-of-type(9) .affinity-panel-title {
	background: #bd7555;
}
.affinity-customizer.affinity-front-page .affinity-panel:nth-of-type(9)::after {
	border-color: #bd7555;
	color: #bd7555;
}

/* Add a highlight class to improve Customizer behaviour */
@-webkit-keyframes flash {
	0%,
	20%,
	40%,
	60%,
	80%,
	100% {
		opacity: 1;
	}
	10%,
	30%,
	50%,
	70%,
	90% {
		opacity: 0;
	}
}
@keyframes flash {
	0%,
	20%,
	40%,
	60%,
	80%,
	100% {
		opacity: 1;
	}
	10%,
	30%,
	50%,
	70%,
	90% {
		opacity: 0;
	}
}

.affinity-highlight::after {
	-webkit-animation-duration: 2s;
	        animation-duration: 2s;
	-webkit-animation-name: flash;
	        animation-name: flash;
	-webkit-animation-timing-function: ease-in-out;
	        animation-timing-function: ease-in-out;

	-webkit-animation-fill-mode: both;
	        animation-fill-mode: both;
}

/*--------------------------------------------------------------
# Media Queries
--------------------------------------------------------------*/

@media screen and (min-width: 46em) {

	body {
		position: relative;
	}

	.site-footer .sep {
		clear: none;
		display: inline;
		width: auto;
		height: auto;
		visibility: visible;
		margin: 0 .4em;
	}

	.panel-navigation {
		display: block;
	}

	.site-header {
		margin-bottom: 3.2em;
		overflow: hidden;
	}

	.site-header .entry-title {
		display: block;
	}

	.affinity-front-page {

		.entry-title {
			margin: 0;
		}

		.custom-header .entry-title {
			color: $color__border-button;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			z-index: 1;
		}

		.hentry .entry-content {
			margin-top: 3.2em;
			margin-bottom: 3.2em;
		}

		.edit-link a,
		.edit-link a:visited {
			border: 3px solid rgba($color__border-button,0.5);
			color: rgba($color__border-button,0.5);
			display: inline-block;
			@include font-size(.8);
			font-family: $font__headings;
			text-transform: uppercase;
			letter-spacing: 1px;
			font-weight: bold;
			text-decoration: none;
			padding: 3px 6px;
			position: absolute;
				top: 1.6em;
				left: 1.6em;
			z-index: 2;
			transition: 0.3s;
			
			&:hover {
				border-color: $color__border-button;
				color: $color__border-button;
			}
		}

		.hentry:first-of-type .edit-link a,
		.hentry:first-of-type .edit-link a:visited {
			color: inherit;
			border: 0;
			padding: 0;
			position: static;
			top: auto;
			left: auto;
			display: inline-block;
			text-transform: none;
			letter-spacing: 0;
			@include font-size(1);
			font-family: $font__main;
			font-weight: normal;
			margin-bottom: 3.2em;
		}

		.custom-header.in-panel {
			background-color: $color__text-main;
			min-height: 200px;
		}

		.no-featured-image {

			.custom-header.in-panel {
				border-top: 1px solid $color__border-button;
				background-color: transparent;
				min-height: auto;
				padding-top: 3.2em;
			}

			.entry-title {
				color: $color__text-screen;
				position: relative;
				top: auto;
				left: auto;
				transform: none;
			}

			.edit-link {
				max-width: 716px;
			}

			.edit-link a,
			.edit-link a:visited {
				color: inherit;
				border: 0;
				padding: 0;
				position: static;
				top: auto;
				left: auto;
				display: inline-block;
				text-transform: none;
				letter-spacing: 0;
				@include font-size(1);
				font-family: $font__main;
				font-weight: normal;
				margin-bottom: 3.2em;
			}

			.hentry:first-of-type .edit-link {
				width: 100%;
			}
		}
	}
	
	h1 {
		@include font-size(2.945);
	}

	h2 {
		@include font-size(2.625);
	}

	h3 {
		@include font-size(1.825);
	}

	h4 {
		@include font-size(1.625);
	}

	h5 {
		@include font-size(1.125);
	}

	h6 {
		@include font-size(1);
	}

	.entry-title {
		line-height: 1.2;
		@include font-size(2.945);
		text-align: left;
	}

	.site-description {
		@include font-size(2);
		line-height: 1.4;
		color: $color__border-button;
		border-bottom: 0;
		padding-bottom: 0;
		margin-bottom: 0;

		a {
			color: $color__border-button;

			&:hover {
				color: $color__border-button;
			}
		}
	}

	.page-title {
		@include font-size(1.825);
	}

	.entry-summary {
		@include font-size(1.625);
	}

	.menu-toggle {
		display: none;
	}

	.header-wrapper {
		min-height: 0;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		padding-left: 1.6em;
		padding-right: 1.6em;
	}

	.no-custom-header .custom-header {
		display: block;
	}

	.no-custom-header .header-wrapper {
		padding-bottom: .8em;
	}

	.no-custom-header .site-title,
	.site-title {
		text-align: left;
		transform: translateY(0);
		position: relative;
		top: auto;
		left: auto;
	}

	.site-description-wrapper {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		z-index: 2;
		width: $size_site-main;
	}

	.site-branding {
		max-width: 50%;
		float: left;
	}

	.main-navigation {
		float: right;
		max-width: 50%;
		text-align: right;

		a,
		a:visited {
			margin-top: 0 !important;
			margin-bottom: 1.3em;
			padding-top: 0 !important;
			border-top: 0 !important;
			color: $color__border-button;
		}

		.current_page_item > a,
		.current-menu-item > a,
		.current_page_ancestor > a,
		.current-menu-ancestor > a {
			color: rgba($color__border-button,0.5);
		}

		&.toggled > div {
			clear: none;
			background-color: transparent;
			margin-left: auto;
			margin-right: auto;
			margin-bottom: auto;
			padding-top: 0;
			padding-bottom: 0;

			& > ul > li {
				padding-left: 0;
				padding-right: 0;
			}
		}

		ul {
			display: block;
			list-style: none;
			margin: 0 0 -1.3em;
			padding: 0;

			ul {
				background-color: white;
				box-shadow: 0 0 2px 1px rgba(0,0,0,0.1);
				border: 6px solid white;
				float: left;
				font-family: $font__main;
				font-weight: normal;
				font-style: italic;
				text-transform: none;
				letter-spacing: 0;
				position: absolute;
				top: 2.55em;
				left: -9999em;
				z-index: 99999;

				a {
					padding: .8em !important;
					padding-left: inherit;
				}

				&:before {
					content: "";
					width: 0;
					height: 0;
					border-bottom: 14px solid white;
					border-top: 0 solid transparent;
					border-left: 14px solid transparent;
					border-right: 14px solid transparent;
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					top: -20px;
				}

				&:after {
					border: 3px solid $color__border-button;
					content: "";
					display: block;
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
					z-index: -1;
				}

				ul {
					left: -999em;
					top: -6px;

					a {
						padding-left: inherit;
					}

					&:before {
						display: none;
					}
				}

				li {
					margin-left: 0;
					text-align: center;
					&:hover > ul,
					&.focus > ul {
						left: 100%;
					}

					a:after {
						display: none;
					}

					&:hover > a,
					&.focus > a {
						color: $color__link;

						&:visited {
							color: $color__link;
						}
					}

					&:first-of-type a {
						margin-top: 0;
						padding-top: 0;
						border-top: 0;
					}
				}

				li:hover > ul,
				li.focus > ul {
					transform: translateX(0);
					left: 100%;
				}

				a,
				a:visited {
					border-bottom: 1px solid $color__border-button;
					color: $color__text-screen;
					padding: .8em;
					margin: 0;
					width: 180px;
				}

				:hover > a,
				.focus > a {
					color: $color__link;
				}

				a:hover,
				a.focus {
					color: $color__link;
				}
			}

			li:hover > ul,
			li.focus > ul {
				left: 50%;
				transform: translateX(-.75em) translateX(-50%);
			}
		}
		
		li {
			display: inline-block;
			margin-left: 0.8em;
			position: relative;

			&:hover > a,
			&.focus > a {
				color: rgba($color__border-button,0.5);

				&:visited {
					color: rgba($color__border-button,0.5);
				}
			}

			a:after {
				content: "\2666";
				color: rgba($color__border-button,0.25);
				display: inline-block;
				font-family: Arial, Helvetica, sans-serif;
				margin-left: 1em;
			}

			&:last-of-type a:after {
				display: none;
			}
		}

		li.menu-item-has-children > a,
		li.page_item_has_children > a {

			position: relative;
			padding-right: 1.6em;

			&:before {
				content: "\f431";
				font-family: Genericons;
				font-size: 14px;
				line-height: 1;
				display: inline-block;
				position: absolute;
					right: 1.4em;
					top: 3px;
				vertical-align: text-top;
				-webkit-font-smoothing: antialiased;
			}

			&:after {
				position: relative;
				left: 1.6em;
			}
		}

		li.menu-item-has-children:last-of-type > a:before,
		li.page_item_has_children:last-of-type > a:before {
			right: -.1em;
		}

		ul ul li.menu-item-has-children > a,
		ul ul li.page_item_has_children > a {

			&:before {
				display: none;
			}

			&:after {
				content: "\f431";
				color: $color__link;
				font-family: Genericons;
				font-size: 14px;
				font-style: normal;
				font-weight: normal;
				margin: 0 0 0 0.4em;
				padding: 0;
				line-height: 1;
				display: inline-block;
				vertical-align: text-top;
				transform: rotate(-90deg);
				-webkit-font-smoothing: antialiased;
			}
		}
	}

	.header-wrapper {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
		transition: 0.3s;
	}

	.admin-bar .header-wrapper {
		top: 32px;
	}

	.header-wrapper.without-transparency {
		background-color: $color__text-main;
		box-shadow: 0 0 5px 0 rgba(0,0,0,0.1);
	}

	.affinity-customizer .header-wrapper {
		z-index: 5;
	}
}

@media screen and (max-width: 782px) {
	.admin-bar .header-wrapper {
		top: 46px;
	}
}

@media screen and ( min-width: 58em ) {

	.site-description {
		@include font-size(2.945);
	}

	.site-description-wrapper {
		margin: 0 auto;
		width: $size_site-content;
	}

	.content-area {
		float: left;
		margin: 0 (-$size_site-sidebar) 0 0;
	}

	.page-template-guestbook .content-area,
	.page-template-fullwidth-page-php .content-area,
	.no-sidebar .content-area {
		float: none;
		margin: 0 auto;
	}

	.site-main {
		margin: 0 30% 0 0;
	}

	.page-template-guestbook .site-main,
	.page-template-fullwidth-page-php .site-main,
	.no-sidebar .site-main,
	.affinity-front-page .site-main {
		margin: 0 auto;
	}

	.page-template-guestbook .site-main,
	.no-sidebar .site-main {
		max-width: 716px;
	}

	.affinity-front-page .site-content {
		max-width: 100%;

		.entry-header,
		.entry-content,
		.entry-footer {
			margin-left: auto;
			margin-right: auto;
			max-width: 716px;
			width: 90%;
		}
	}

	.affinity-front-page.no-sidebar .site-main {
		width: 100%;
		max-width: 100%;
	}

	.affinity-front-page .contact-form {
		max-width: 80%;
	}

	.site-content .widget-area {
		float: right;
		overflow: hidden;
		width: $size_site-sidebar;
	}

	.site-footer {
		clear: both;
	}

	.comment-author .avatar {
		clear: both;
		display: block;
		float: none;
		margin-bottom: .8em;
		margin-right: 0;
	}

	.comment-content {
		clear: none;
	}

	.comment-meta .edit-link:before {
		display: none;
	}

	.jetpack-social-navigation ul {
		display: block;
		margin: 0 auto !important;
		width: $size_site-content;
	}

	.entry-meta,
	.comment-meta {
		border-right: 1px solid $color__border-button;
		padding-right: .8em;
		float: left;
		width: 21%;
	}

	.entry-content,
	.search-results .entry-summary,
	.entry-footer,
	.comment-content,
	.reply {
		width: 75%;
		float: right;
	}

	.page-template-guestbook {
		.comment-content,
		.comment-meta {
			width: 100%;
			float: none;
			padding: 0;
			border: 0;
		}

		.comments-area .comment {
			width: calc(50% - 15px);
		}
	}

	.page,
	.jetpack-portfolio {
		.entry-content,
		.entry-summary,
		.entry-footer {
			width: 100%;
			float: none;
		}
	}

	.comment-navigation,
	.posts-navigation,
	.post-navigation {

		.nav-previous {
			float: left;
			width: 50%;
			padding: 0;
			margin: 0;
			border: 0;
		}

		.nav-next {
			float: right;
			text-align: right;
			width: 50%;
		}
	}

	.footer-widgets .widget-areas {
		margin: 0 auto;
		width: $size_site-content;
	}

	.footer-widgets .widget-areas .widget-area:nth-child(1):nth-last-child(2),
	.footer-widgets .widget-areas .widget-area:nth-child(2):nth-last-child(1) {
		width: 47%;
		margin-right: 6%;

		&:last-of-type {
			margin-right: 0;
		}
	}
	.footer-widgets .widget-areas .widget-area:nth-child(1):nth-last-child(3),
	.footer-widgets .widget-areas .widget-area:nth-child(2):nth-last-child(2),
	.footer-widgets .widget-areas .widget-area:nth-child(3):nth-last-child(1) {
		width: 20%;
		margin-right: 5%;

		&:last-of-type {
			margin-right: 0;
		}
	}

	.footer-widgets .widget-areas .widget-area:nth-child(1):nth-last-child(3) {
		width: 50%;
	}
}

@media screen and ( min-width: 68em ) {

	.page-template-guestbook .site-main,
	.no-sidebar .site-main {
		width: $size_site-content;
	}

	.site-content {
		max-width: 1068px;
		width: $size_site-content;
	}

	blockquote {
		@include font-size(1.625);

		&.alignright,
		&.alignleft {
			max-width: 12em;
		}

		&.alignleft.below-entry-meta {
			margin-left: -7.2em;
		}

		&.alignright.below-sidebar {
			margin-right: -7.2em;
		}
	}

	img {
		&.alignleft.below-entry-meta {
			margin-left: -7.2em;
		}

		&.alignright.below-sidebar {
			margin-right: -7.2em;
		}
	}

	.wp-caption.alignleft.below-entry-meta,
	.wp-caption.alignright.below-sidebar {
		position: relative;

		.wp-caption-text {
			border-top: 3px solid $color__border-button;
			margin: 0;
			padding-top: .8em;
			position: absolute;
			top: 0;
			width: 158px;
		}
	}

	.wp-caption.alignleft.below-entry-meta {
		.wp-caption-text {
			transform: translateX(-100%) translateX(-1.6em);
			text-align: right;
		}
	}

	.wp-caption.alignright.below-sidebar {
		.wp-caption-text {
			right: 0;
			transform: translateX(100%) translateX(1.6em);
			text-align: left;
		}
	}
}