Initial public commit

codesignd/2-blocks/contact/contact.html.php

@@ -0,0 +1,41 @@
+<div class="contact">
+	<div class="contact__main">
+		<form class="contact__form form" action="" method="post">
+			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+			
+			<img class="contact__stamp" src="<?= url('assets/img/stamp.svg') ?>" alt="">
+		</form>
+		
+		<div class="contact__thank-you">
+			Thank you for your message.
+		</div>
+	</div>
+	
+	<aside class="contact__sidebar">
+		<div class="contact__detail">
+			<h2 class="contact__heading">Email</h2>
+			<div class="contact__email"><?= str::email('lukas@example.com') ?> <a href="<?= url('legal') ?>#contact">?</a></div>
+			<small><a href="<?= url('pgp.asc') ?>" rel="pgpkey">PGP: 2E2A DD32 FE50 61C1</a></small>
+		</div>
+		
+		<div class="contact__detail">
+			<h2 class="contact__heading">Twitter</h2>
+			<?= twitter('lukasbestle') ?>
+		</div>
+	</aside>
+</div>
+
+<script>
+// Demonstration of the form animation
+setTimeout(function() {
+	document.querySelector('.form').classList.add('form--sent');
+}, 2000);
+setTimeout(function() {
+	document.querySelector('.form').classList.add('form--success');
+}, 2750);
+</script>

codesignd/2-blocks/contact/contact.scss

@@ -0,0 +1,100 @@
+.contact {
+	position: relative;
+	
+	display: flex;
+	justify-content: space-between;
+	
+	@media (max-width: 50em) {
+		flex-direction: column;
+	}
+}
+
+.contact__main {
+	flex: 1;
+}
+
+.contact__form {
+	position: relative;
+}
+
+.contact__stamp {
+	position: absolute;
+	bottom: -1.5rem;
+	right: 1rem;
+	width: 6rem;
+	
+	visibility: hidden;
+	opacity: 0;
+	filter: blur(2px);
+	transform: scale(1.3);
+	transition: visibility 0s linear 0.3s, opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease;
+	
+	.form--sent & {
+		visibility: visible;
+		opacity: 1;
+		filter: none;
+		transform: none;
+		transition-delay: 0s;
+	}
+}
+
+.contact__thank-you {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	z-index: -1;
+}
+
+.contact__sidebar {
+	max-width: 16rem;
+	margin-left: 2rem;
+	
+	@media (max-width: 50em) {
+		max-width: 100%;
+		margin: 0;
+		margin-top: 2rem;
+		
+		display: flex;
+		flex-wrap: wrap;
+	}
+}
+
+.contact__detail {
+	@media (min-width: 50em), (max-width: 42em) {
+		&:not(:last-child) {
+			margin-bottom: 1.8rem;
+		}
+	}
+	
+	@media (max-width: 50em) {
+		width: 50%;
+	}
+	
+	@media (max-width: 42em) {
+		width: 100%;
+	}
+}
+
+.contact__heading {
+	font-size: -cdd-rem(20);
+	margin-bottom: 0.3em;
+}
+
+.contact__email {
+	display: flex;
+	margin-bottom: 0.3rem;
+	
+	> :nth-child(1) {
+		margin-right: 0.5rem;
+		padding-right: 0.5rem;
+		border-right: 1px solid $color--passive;
+	}
+	
+	> :nth-child(2) {
+		align-self: center;
+		
+		font-size: -cdd-rem(22);
+	}
+}