feat: create the themes list on the banner

src/App.vue

@@ -38,5 +38,7 @@ export default class App extends Vue {
 		flex-flow: column nowrap;
 
 		overflow: hidden;
+
+		background: #1a1a1a;
 	}
 </style>

src/assets/theme-tick.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16" height="16" version="1.1" viewBox="0 0 4.2333 4.2333" xmlns="http://www.w3.org/2000/svg">
+	<g transform="translate(-157.14 -77.615)">
+		<g transform="matrix(0 -.11388 -.11388 0 185.25 96.78)" fill="#f8f8f8" stroke="#1a1a1a" stroke-width="11.855">
+			<path d="m168.29 228.24c0 10.195-8.3886 18.587-18.585 18.587s-18.59-8.3921-18.59-18.587c0-10.195 8.3931-18.587 18.59-18.587s18.585 8.3921 18.585 18.587zm-5.9273 0c0-6.9441-5.7129-12.661-12.658-12.661s-12.662 5.7168-12.662 12.661c0 6.9441 5.7175 12.661 12.662 12.661s12.658-5.7168 12.658-12.661z" color="#000000" fill="#1a1a1a" stroke="none" style="paint-order:stroke fill markers"/>
+			<circle cx="149.71" cy="228.24" r="6.4803" fill="#1a1a1a" stroke="none" style="paint-order:stroke fill markers"/>
+		</g>
+	</g>
+</svg>

src/components/Banner.vue

@@ -13,22 +13,38 @@
 				{{ model.lastname.toUpperCase() }}
 			</h1>
 			<h2 class='headline'>{{ model.headline.toUpperCase() }}</h2>
-		</div>
 
 			<form class='themes'>
 				<input type='radio' name='theme' id='bw' checked/>
-			<label for='bw'></label>
+				<label for='bw'>
+					<div class='spacer'>
+						<div class='tick'></div>
+					</div>
+				</label>
 
 				<input type='radio' name='theme' id='gooey'/>
-			<label for='gooey'></label>
+				<label for='gooey'>
+					<div class='spacer'>
+						<div class='tick'></div>
+					</div>
+				</label>
 
 				<input type='radio' name='theme' id='flat'/>
-			<label for='flat'></label>
+				<label for='flat'>
+					<div class='spacer'>
+						<div class='tick'></div>
+					</div>
+				</label>
 
 				<input type='radio' name='theme' id='glass'/>
-			<label for='glass'></label>
+				<label for='glass'>
+					<div class='spacer'>
+						<div class='tick'></div>
+					</div>
+				</label>
 			</form>
 		</div>
+	</div>
 </template>
 
 <script lang="ts">
@@ -53,11 +69,11 @@
 	// horizontal spacing between theme chips
 	$theme-chip-spacing: 1rem;
 	// full size of a theme chip
-	$theme-chip-size:    1.6rem;
+	$theme-chip-size:    1.8rem;
-	// empty space inside the chip
+	// empty space inside the chip (relative to the chip size)
-	$theme-chip-empty:   1.1rem;
+	$theme-chip-void:    1.2rem;
-	// size of the inner (checked) circle
+	// size of the inner (checked) circle (relative to the chip void)
-	$theme-chip-inner:   .5rem;
+	$theme-chip-inner:   .6rem;
 
 	// MEDIA QUERIES
 	// optimize vertical space
@@ -123,15 +139,17 @@
 
 		border-radius: 3rem;
 
-		transform: rotate(30deg);
+		transform: rotate(35deg);
 	}
 
 	.content {
 		flex: auto 0 1;
 
-		display: block;
+		display: flex;
 		position: relative;
 
+		flex-flow: column nowrap;
+
 		margin: 0 10rem;
 		margin-bottom: $wave-height;
 
@@ -155,29 +173,30 @@
 
 	.themes {
 		display: flex;
-		position: absolute;
+		position: relative;
-			top: calc( #{$banner-size} - #{$wave-height} - #{$themes-spacing} );
-			left: 50vw;
 
 		flex-flow: row wrap;
-		justify-content: space-between;
+		justify-content: flex-start;
 		align-items: center;
 
-		transform: translateX(-50%) translateY(-100%);
+		margin-top: 1em;
 
 		input[type=radio]{
 			display: none;
 		}
 
-		label {
+		& > label {
-			display: block;
+			display: flex;
 			position: relative;
 				width: $theme-chip-size;
 				height: $theme-chip-size;
 
+			justify-content: center;
+			align-items: center;
+
 			margin: 0 #{$theme-chip-spacing};
 
-			background: $bg-color;
+			background: transparent;
 
 			border-radius: 50% / 50%;
 
@@ -186,32 +205,25 @@
 			transition: transform .2s ease-in;
 
 			// hide the center to make a ring
-			&:before {
+			.spacer {
-				content: '';
+				display: flex;
+				position: relative;
+					width: $theme-chip-void;
+					height: $theme-chip-void;
 
-				display: block;
+				justify-content: center;
-				position: absolute;
+				align-items: center;
-					top: 50%;
-					left: 50%;
-					width: $theme-chip-empty;
-					height: $theme-chip-empty;
 
 				background: $bg-color;
 
 				border-radius: 50% / 50%;
-
-				transform: translateX(-50%) translateY(-50%);
 			}
 
-			&:after {
+			.tick {
-				content: '';
-
 				opacity: 0;
 
 				display: block;
-				position: absolute;
+				position: relative;
-					top: 50%;
-					left: 50%;
 					width: $theme-chip-inner;
 					height: $theme-chip-inner;
 
@@ -219,44 +231,39 @@
 
 				border-radius: 50% / 50%;
 
-				transform: translateX(-50%) translateY(-50%) scale(1);
-
 				transition: opacity .1s ease-in-out;
 			}
 		}
 
-		label:first-child { margin-left:  0; }
+		label:nth-child(2) { margin-left:  0; }
 		label:last-child   { margin-right: 0; }
 
-		input:checked + label {
+		input:checked + label .tick {
-			transform: scale(1.1);
-			&:after {
 			opacity: 1;
 		}
-		}
 
 
 		input#bw + label {
 			background: #3d3d3d;
-			&:after{
+			.tick{
 				background: #3d3d3d;
 			}
 		}
 		input#gooey + label {
 			background: linear-gradient(#7936dc, #bd8eff);
-			&:after{
+			.tick{
 				background: linear-gradient(#7936dc, #bd8eff);
 			}
 		}
 		input#flat + label {
 			background: #3d3d3d;
-			&:after{
+			.tick{
 				background: #3d3d3d;
 			}
 		}
 		input#glass + label {
 			background: #3d3d3d;
-			&:after{
+			.tick{
 				background: #3d3d3d;
 			}
 		}
@@ -286,6 +293,12 @@
 			}
 		}
 	}
+	// not enough vertical space
+	@media screen and (max-height: 615px){
+		#banner {
+			font-size: 1vw;
+		}
+	}
 
 	// border-card overlaps with the text
 	@media screen and (max-width: 1010px){

src/components/Experiences.vue

@@ -70,7 +70,7 @@
 					position: absolute;
 					display: block;
 						top: calc( 1em - #{$timeline-dot-size});
-						left: calc( #{-$timeline-spacing} - #{$timeline-dot-size/2} + #{$timeline-width/5} );
+						left: calc( #{-$timeline-spacing} - #{$timeline-dot-size} / 2 + #{$timeline-width} / 5 );
 						width: $timeline-dot-size;
 						height: $timeline-dot-size;