CodePen Embed - CSS Boulder Colorado Patch

// Based on design by Patrick Moriarty https://dribbble.com/shots/4059798-Boulder-Badge

.patch-container
	.patch-top
		.patch-top-rounding
	.patch-base
		.mountains
			.mountain__left
			.mountain__right
			.mountain__middle
			.tent
				.tent__flag
			.tree__left
			.tree__right
	.ribbon
		span WONDER & WANDER
	.sun
		each rayNum in [1, 2, 3, 4, 5, 6, 7, 8]
			.ray(class="ray" + rayNum)
	.curved-text
		each letter in ['B','O','U','L','D','E','R',',','C','O','L','O','R','A','D','O']
			span=letter
	.moon
	.cloud__small.left
	.cloud__small.right
	.cloud__big.left
	.cloud__big.right
	.stars
		each num in [1, 2, 3, 4, 5, 6, 7, 8]
			.star(class="star"+num)
				.cover.left
				.cover.right
.link-container
	span Original artwork by 
	a(href='https://dribbble.com/shots/4059798-Boulder-Badge' target='_blank') Patrick Moriarty

View Compiled

$font-size: 10px; // Change to scale

$white: #faf7e8;
$aqua: #86beb3;
$blue: #395a6d;
$bgcolor: #DCC48E;
// Original background color: #9fcc71
// Alternative background colors: #779CAB, #DCC48E

@mixin absolute-horizontal-center {
	position: absolute;
	transform: translateX(-50%);
	left: 50%;
}

@mixin absolute-vertical-center {
	position: absolute;
	transform: translateY(-50%);
	top: 50%;
}

@mixin centerAbsolute() {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

@mixin circle($radius) {
	height: $radius;
	width: $radius;
	border-radius: 100%;
}

@mixin isosceles-triangle($height, $width, $color) {
	border-bottom: solid $height $color;
	border-left: solid ($width/2) transparent;
	border-right: solid ($width/2) transparent;
}

@mixin isosceles-triangle-pointed-right($height, $width, $color) {
	border-left: solid $height $color;
	border-top: solid ($width/2) transparent;
	border-bottom: solid ($width/2) transparent;
}

@mixin isosceles-triangle-pointed-left($height, $width, $color) {
	border-right: solid $height $color;
	border-top: solid ($width/2) transparent;
	border-bottom: solid ($width/2) transparent;
}

@mixin right-triangle($height, $width, $color) {
	border-bottom: solid $height $color;
	border-right: solid $width transparent;
}

@mixin right-triangle-pointed-left($height, $width, $color) {
	border-bottom: solid $height $color;
	border-left: solid $width transparent;
}

// Styles to extend

.pseudo {
	content: '';
	position: absolute;
}

// ===============================

.star {
	height: 2.5em;
	width: 2.5em;
	background: $white;
	position: absolute;
	
	&:before, &:after { @extend .pseudo; }
	
	&:before, &:after, .cover {
		@include circle(2.5em);
		background: $blue;
		position: absolute;
	}
	
	&:before {
		top: -1.25em;
		left: -1.25em;
	}
	&:after {
		top: -1.25em;
		right: -1.25em;
	}
	.cover.left {
		left: -1.25em;
		bottom: -1.25em;
	}
	.cover.right {
		bottom: -1.25em;
		right: -1.25em;
	}
}

.cloud-small {
	// Bigger half circle
	width: 4em;
	height: 2em;
	border-radius: 4em 4em 0 0;
	position: absolute;
	background: $aqua;
	
	&:before { // Small half circle
		@extend .pseudo;
		background: $aqua;
		height: 1em;
		width: 2em;
		border-radius: 2em 2em 0 0;
		left: -1.2em;
		bottom: 0;
	}
}

.cloud-big {
	@extend .cloud-small;
	
	&:after {
		@extend .pseudo;
		width: 4.2em;
		height: 2.1em;
		border-radius: 4.2em 4.2em 0 0;
		background: $aqua;
		position: absolute;
		right: -3.1em;
		bottom: 0;
	}
}

body {
	font-size: $font-size;
	min-height: 97vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #DCC48E;
}

.patch-container {
	position: relative;
	z-index: -2; // So ribbons sides will show
	height: 50em;
	width: 46em;
	top: -1em;
}

.patch-base {
	height: 45.5em;
	width: 40em;
	//background: #395a6d;
	background: linear-gradient(180deg, $blue 55%, $aqua 55%);
	@include absolute-horizontal-center;
	bottom: 0;
	border-radius: 0 0 20em 20em;	
	border: 1.3em solid $white;
	border-top: none;
	box-sizing: border-box;
}

.patch-top {
	height: 4.5em;
	width: 40em;
	@include absolute-horizontal-center;
	top: 0;
	overflow: hidden;
	
	.patch-top-rounding {
		@include circle(110em); // Calculated as 104
		background: $blue;
		@include absolute-horizontal-center;
		top: 0;
		border: 1.3em solid $white; 
	}
}

.ribbon {
	width: 42.5em;
	height: 7.6em;
	position: relative; // So that :before and :after can be positioned behind
	top: 26.5em;
	left: (46em - 42.5em) / 2;
	border: (7.6em / 2) solid $blue;
	border-right-width: 1em;
	border-right-color: $white;
	border-left-width: 1em;
	border-left-color: $white;
	box-sizing: border-box;
	
	text-align: center;

	&:before, &:after {
		@extend .pseudo;
		border: 5em solid $white;
		top: -5em;
		z-index: -1;
	}
	
	&:before {
		border-left-width: 1.3em;
		border-left-color: transparent;
		left: -2.7em;
	}
	
	&:after {
		border-right-width: 1.3em;
		border-right-color: transparent;
		right: -2.7em;
	}
}

// Text in ribbon
.ribbon span {
	@include centerAbsolute;
	width: 100%;
	font-size: 3.2em;
	font-family: 'Montserrat', sans-serif;		
	font-weight: 900;
	color: $white;
}

.sun {
	font-size: 1.05em;
	position: absolute;
	height: 0;
	width: 0;
	//@include circle(4em);
	//border: 0.6em solid $white;
	box-sizing: border-box;
	
	@include absolute-horizontal-center;
	bottom: 8.2em + 1.7em;
	
	&:after {
		@extend .pseudo;
		@include circle(2.8em);
		border: 0.6em solid $white;
		@include centerAbsolute;
		background: $aqua;
	}
	
	.ray {
		width: 0.55em;
		background: $white;
		border-radius: 1.1em;
		@include centerAbsolute;
	}

	.ray1 { height: 7.6em; width: 0.6em; }
	.ray2 {
		transform: translate(-50%, -50%) rotate(22.5deg);
		height: 8em;
		top: -0.05em;
		right: -0.05em;
	}
	.ray3 {
		transform: translate(-50%, -50%) rotate(2*22.5deg);
		height: 9.7em;
		top: -0.25em;
		left: 0.28em;
	}
	.ray4 {
		transform: translate(-50%, -50%) rotate(3 * 22.5deg);
		height: 15.6em;
		top: -0.585em;
		left: 1.4em;
	}
	.ray5 {
		transform: translate(-50%, -50%) rotate(4 * 22.5deg);
		height: 18.6em;
	}
	.ray6 {
		transform: translate(-50%, -50%) rotate(5 * 22.5deg);
		height: 15.6em;
		top: -0.585em;
		left: -1.4em;
	}
	.ray7 {
		transform: translate(-50%, -50%) rotate(6 * 22.5deg);
		height: 9.7em;
		top: -0.25em;
		left: -0.28em;
	}
	.ray8 {
		transform: translate(-50%, -50%) rotate(7 * 22.5deg);
		height: 8em;
	}
}

// Referenced: https://codepen.io/oloman/pen/sHGAl
.curved-text {
	font-family: 'Montserrat', sans-serif;	
	font-weight: 800;
	color: $white;
	
	//width: 32em;
	width: 36em;
	//height: 16em;
	height: 18em;
	position: relative;
	margin: 0 auto;
	//top: 30.2em;
	top: 22.6em;
	
	span {
		//font-size: 2.6em;
		font-size: 2.8em;
		position: absolute;
		top: 0;
		height: 7.4em;
		width: 1em;
		margin-left: -0.5em;
		//line-height: 12.4em;
		line-height: 11.5em;
		transform-origin: top center;
		@include absolute-horizontal-center;
		text-align: center;
		//border: 1px solid black;
	}
	
	// Python: [66.6 - (x * 7.4) for x in range(9)]
	// (180 - 2*23.25) / 15 = 8.9
	// >>> [66.75 - (x * 8.9) for x in range(8)]
// [66.75, 57.85, 48.95, 40.05, 31.15, 22.25, 13.35, 4.45]
	span:nth-child(1) { transform: rotate(66.75deg); } // B
	span:nth-child(2) { transform: rotate(57.85deg); } // O
	span:nth-child(3) { transform: rotate(48.95deg); } // U
	span:nth-child(4) { transform: rotate(40.05deg); } // L
	span:nth-child(5) { transform: rotate(31.15deg); } // D
	span:nth-child(6) { transform: rotate(22.25deg); } // E
	span:nth-child(7) { transform: rotate(13.35deg); } // R
	span:nth-child(8) { transform: rotate(4.45deg); } //
	span:nth-child(9) { transform: rotate(-4.45deg); } // C
	span:nth-child(10) { transform: rotate(-13.35deg); } // O
	span:nth-child(11) { transform: rotate(-22.25deg); } // L
	span:nth-child(12) { transform: rotate(-31.15deg); } // O
	span:nth-child(13) { transform: rotate(-40.05deg); } // R
	span:nth-child(14) { transform: rotate(-48.95deg); } // A
	span:nth-child(15) { transform: rotate(-57.85deg); } // D
	span:nth-child(16) { transform: rotate(-66.75deg); } // O*/
	
}

.moon {
	@include circle(6.2em);
	background: $white;
	position: absolute;
	@include absolute-horizontal-center;
	top: 4.7em;
	
	&:before {
		@extend .pseudo;
		@include circle(3.6em);
		background: $blue;
		@include absolute-vertical-center;
		right: -0.6em;
	}
}

.cloud__small {
	@extend .cloud-small;
	top: 7.4em;
	
	&.left { left: 12.5em; }
	&.right {
		transform: scaleX(-1);
		right: 12.5em;
	}
}

.cloud__big {
	@extend .cloud-big;
	top: 12.8em;
	
	&.left { left: 7.3em; }
	&.right {
		transform: scaleX(-1);
		right: 7.3em;
	}
}

.mountains {
	//z-index: 5;
	height: 13em;
	width: 37.4;
	position: absolute;
	@include absolute-horizontal-center;
	top: 9em;
	
	.mountain__left, .mountain__right, .mountain__middle {
		position: absolute;
		bottom: 0;
	}
	
	.mountain__left {
		@include right-triangle-pointed-left(9.2em, 9.3em, $aqua);
		
		&:before {
			@extend .pseudo;
			@include right-triangle(9.2em, 9.3em, $white);
		}
	}
	
	.mountain__right {
		@include right-triangle(9.2em, 9.3em, $white);
		right: 0;
		
		&:before {
			@extend .pseudo;
			@include right-triangle-pointed-left(9.2em, 9.3em, $aqua);
			left: -9.3em;
		}
	}
	
	.mountain__middle {
		@include isosceles-triangle(13em, 26em, $aqua);
		@include absolute-horizontal-center;
		
		&:before {
			@extend .pseudo;
			@include right-triangle(13em, 13em, $white);
		}
	}
}

.tent {
	@include isosceles-triangle(4.5em, 9.6em, $blue);
	@include absolute-horizontal-center;
	bottom: 0;
	
	&:before, &:after {
		@extend .pseudo;
		bottom: -4.5em;
	}
	
	&:before {
		height: 1.7em;
		width: 1.7em;
		background: $aqua;
	}
	
	// Doorway
	&:after {
		@include absolute-horizontal-center;
		@include isosceles-triangle(1.7em, 3.4em, $white);
	}
	
	.tent__flag {
		@include isosceles-triangle-pointed-right(3em, 1.1em, $blue);
		position: absolute;
		bottom: 0;
	}
}

.tree__left, .tree__right {
	@include isosceles-triangle(1.4em, 3.2em, $blue);
	position: absolute;
	bottom: 0;
	
	&:before, &:after {
		@extend .pseudo;
		@include isosceles-triangle(1.4em, 3.2em, $blue);
		@include absolute-horizontal-center;
	}
	
	&:before { bottom: -0.15em; }
	&:after { bottom: 1.1em; }
}

.tree__left {
	right: 4.8em;
}

.tree__right {
		right: -4.8em - 3.2em;
}

// --- Stars ---
.stars {
	width: 32.5em;
	height: 16em;
	@include absolute-horizontal-center;
	top: 3em;
	
	.star1 { top: 2.7em; left: 0em; }
	.star2 { top: 0em; left: 9.3em; }
	.star3 { top: 0em; right: 9.3em; }
	.star4 { top: 2.7em; right: 0em; }
	.star5 { bottom: 0em; left: 0em; }
	.star6 { top: 8.2em; left: 9em; }
	.star7 { top: 8.2em; right: 9em; }
	.star8 { bottom: 0em; right: 0em; }	
}

.link-container {
	position: fixed;
	bottom: 0;
	right: 0;
	width: auto;
	padding: 0.75em;
	font-size: 1.5em;
	color: $blue;
	font-family: sans-serif;
	
	a {
		color: darken($aqua, 25);
		font-weight: 600;
		text-decoration: none;
		
		&:hover, &:focus {
			color: darken($aqua, 10);
		}
	}
}

View Compiled

// ¯\_(ツ)_/¯

This Pen is owned by Ossian on CodePen.

See more by @Rikkokiri on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.