Separate CSS

Author: crnacura

css/base.css

@@ -190,52 +190,6 @@ main {
 	outline: none;
 }
 
-.particles {
-	position: relative;
-	grid-area: 1 / 1 / 2 / 2;
-}
-
-.particles-canvas {
-	position: absolute;
-	pointer-events: none;
-	top: 50%;
-	left: 50%;
-	transform: translate3d(-50%,-50%,0);
-}
-
-.particles-wrapper {
-	position: relative;
-	display: inline-block;
-    overflow: hidden;
-}
-
-.particles-button {
-	-webkit-touch-callout: none;
-	-webkit-user-select: none;
-	-khtml-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-	position: relative;
-	border-radius: 5px;
-	border-radius: var(--radius-button);
-	background: var(--color-button-bg);
-	color: var(--color-button-text);
-	border: 0;
-	border: var(--border-button);
-	margin: 0;
-	padding: 1.5rem 3rem;
-	padding: var(--button-padding);
-}
-
-.particles-button:focus {
-	outline: none;
-}
-
-.no-js .particles-button {
-	grid-area: 1 / 1 / 2 / 2;
-}
-
 .theme-1 {
 	--color-item-bg: linear-gradient(120deg, #a8edea 0%, #fed6e3 100%);
 	--color-action: #121019;

css/particles.css

@@ -0,0 +1,45 @@
+.particles {
+	position: relative;
+	grid-area: 1 / 1 / 2 / 2;
+}
+
+.particles-canvas {
+	position: absolute;
+	pointer-events: none;
+	top: 50%;
+	left: 50%;
+	transform: translate3d(-50%,-50%,0);
+}
+
+.particles-wrapper {
+	position: relative;
+	display: inline-block;
+    overflow: hidden;
+}
+
+.particles-button {
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	position: relative;
+	border-radius: 5px;
+	border-radius: var(--radius-button);
+	background: var(--color-button-bg);
+	color: var(--color-button-text);
+	border: 0;
+	border: var(--border-button);
+	margin: 0;
+	padding: 1.5rem 3rem;
+	padding: var(--button-padding);
+}
+
+.particles-button:focus {
+	outline: none;
+}
+
+.no-js .particles-button {
+	grid-area: 1 / 1 / 2 / 2;
+}

index.html

@@ -8,6 +8,7 @@
 		<meta name="keywords" content="bursting, exploding, particles, buttons, canvas, animation, javascript" />
 		<meta name="author" content="Codrops" />
 		<link rel="shortcut icon" href="favicon.ico">
+		<link rel="stylesheet" type="text/css" href="css/particles.css" />
 		<link rel="stylesheet" type="text/css" href="css/base.css" />
 		<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
 	</head>