start splitting up massive main.scss file

2017-09-22 14:22:47 +01:00
parent ca608273e2
commit 402bc34d2c
16 changed files with 1637 additions and 1615 deletions
--- a/src/assets/styles/components/_banner.scss
+++ b/src/assets/styles/components/_banner.scss
@ -0,0 +1,130 @@
+
+/* Banner */
+
+#banner {
+	@include vendor('display', 'flex');
+	@include vendor('flex-direction', 'column');
+	@include vendor('justify-content', 'center');
+	cursor: default;
+	height: 100vh;
+	min-height: 35em;
+	overflow: hidden;
+	position: relative;
+	text-align: center;
+
+	h2 {
+		@include vendor('transform', 'scale(1)');
+		@include vendor('transition', ('transform 0.5s ease', 'opacity 0.5s ease'));
+		display: inline-block;
+		font-size: 1.75em;
+		opacity: 1;
+		padding: 0.35em 1em;
+		position: relative;
+		z-index: 1;
+
+		&:before, &:after {
+			@include vendor('transition', 'width 1s ease');
+			@include vendor('transition-delay', '0.25s');
+			background: _palette(fg-bold);
+			content: '';
+			display: block;
+			height: 2px;
+			position: absolute;
+			width: 100%;
+		}
+
+		&:before {
+			top: 0;
+			left: 0;
+		}
+
+		&:after {
+			bottom: 0;
+			right: 0;
+		}
+	}
+
+	h1 {
+		@include vendor('transition', 'opacity 0.5s ease');
+		@include vendor('transition-delay', '1s');
+		margin-bottom: 25px;
+		opacity: 1;
+
+		a {
+			color: inherit;
+		}
+	}
+
+	.particles-js-canvas-el {
+		@include vendor('transition', 'opacity #{_duration(fadein)} ease-in-out');
+		@include vendor('transition-delay', '1s');
+		opacity: 1;
+	}
+
+	@include breakpoint(small) {
+		@include padding(7em, 3em);
+		height: auto;
+		min-height: 0;
+
+		h2 {
+			font-size: 1.25em;
+		}
+
+		br {
+			display: none;
+		}
+	}
+}
+
+body.is-loading {
+	#banner {
+		h1 {
+			opacity: 0;
+		}
+
+		h2 {
+			@include vendor('transform', 'scale(0.95)');
+			opacity: 0;
+
+			&:before, &:after {
+				width: 0;
+			}
+		}
+  
+		.particles-js-canvas-el {
+			opacity: 0;
+		}
+	}
+}
+
+
+
+
+.particle {
+	position: relative;
+	user-select: none;	
+	
+	#particles-js {
+		vertical-align: bottom;
+		width: 100%;
+		min-height: 100vh;
+		background-repeat: no-repeat;
+		background-size: cover;
+		background-attachment: fixed;
+  
+		.particles-js-canvas-el {
+			width: 100%;
+			height: 100%;	
+		}
+	}
+	
+	.content {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		-webkit-transform: translate(-50%, -50%);
+		transform: translate(-50%, -50%);
+		z-index: 1;
+		user-select: auto;
+	}
+}