[404] upgrade

public_html/asset/svg/filter.svg

@@ -5,5 +5,11 @@
 			<feColorMatrix in='blur' mode='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 15 -5' result='goo' />
 			<feComposite in='SourceGraphic' in2='goo' operator='atop'/>
 		</filter>
+
+		<filter id='goo-rocket'>
+			<feGaussianBlur in='SourceGraphic' stdDeviation='13' result='blur' />
+			<feColorMatrix in='blur' mode='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10' result='goo' />
+			<feComposite in='SourceGraphic' in2='goo' operator='atop'/>
+		</filter>
 	</defs>
 </svg>

public_html/asset/svg/planet.svg

@@ -0,0 +1,100 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xml:space="preserve"
+   viewBox="0 0 512 512"
+   version="1.1"
+   style="enable-background:new 0 0 512 512;"
+   id="Layer_1"><metadata
+     id="metadata25"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+     id="defs23" /><style
+     id="style2"
+     type="text/css">
+	.st0{fill:#5BB28E;stroke:#414042;stroke-width:20;stroke-miterlimit:10;}
+	.st1{fill:#AEDEEF;}
+	.st2{fill:#6DC5A5;}
+	.st3{fill:#F15A29;stroke:#414042;stroke-width:14;stroke-miterlimit:10;}
+	.st4{fill:#414042;}
+	.st5{fill:none;stroke:#414042;stroke-width:14;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
+	.st6{fill:#F9ED32;stroke:#414042;stroke-width:14;stroke-miterlimit:10;}
+</style><circle
+     r="195.1"
+     id="XMLID_363_"
+     cy="247.6"
+     cx="256.9"
+     class="st0" /><path
+     id="XMLID_362_"
+     d="M439.6,249.7c0,97.4-54,167.5-151.1,181.3c-96.3,13.7-201.1-83.9-201.1-181.3  S166.2,63.5,263.5,63.5S439.6,152.3,439.6,249.7z"
+     class="st1" /><path
+     id="XMLID_361_"
+     d="M431,248.9c0,96.4-53.6,165.8-150,179.5c-95.6,13.5-199.6-83.1-199.6-179.5  S159.7,64.5,256.2,63.5C369.6,62.3,431,152.5,431,248.9z"
+     class="st2" /><circle
+     r="41.1"
+     id="XMLID_360_"
+     cy="260.5"
+     cx="205.6"
+     class="st3" /><circle
+     r="5"
+     id="XMLID_359_"
+     cy="41.8"
+     cx="103.9"
+     class="st4" /><circle
+     r="5"
+     id="XMLID_358_"
+     cy="310.2"
+     cx="239.3"
+     class="st4" /><circle
+     r="11.3"
+     id="XMLID_357_"
+     cy="422.7"
+     cx="120.2"
+     class="st4" /><circle
+     r="5"
+     id="XMLID_356_"
+     cy="470.5"
+     cx="334.5"
+     class="st4" /><circle
+     r="5"
+     id="XMLID_354_"
+     cy="160.7"
+     cx="254.2"
+     class="st4" /><circle
+     r="7.7"
+     id="XMLID_353_"
+     cy="160.7"
+     cx="279.6"
+     class="st4" /><path
+     id="XMLID_352_"
+     d="M274.1,394.2c7.9-5.6,17.6-8.8,28-8.8c27,0,48.9,21.9,48.9,48.9c0,9.6-2.8,18.6-7.6,26.2"
+     class="st5" /><circle
+     r="15.1"
+     id="XMLID_351_"
+     cy="82.1"
+     cx="81.4"
+     class="st6" /><circle
+     r="15.2"
+     id="XMLID_23_"
+     cy="300.2"
+     cx="287.3"
+     class="st3" /><circle
+     r="9.6"
+     id="XMLID_355_"
+     cy="324.6"
+     cx="189.6"
+     class="st4" /><circle
+     r="5"
+     id="XMLID_42_"
+     cy="442.6"
+     cx="164.6"
+     class="st4" /><circle
+     r="15.1"
+     id="XMLID_43_"
+     cy="445.3"
+     cx="389.5"
+     class="st6" /></svg>

webpack/scss/layout.scss

@@ -164,45 +164,89 @@ body{
 
 }
 
+body.body404{
+
+	filter: url('/asset/svg/filter.svg#goo-rocket');
+	background-color: #333;
+}
+
 #cont404{
 	display: flex;
 	position: fixed;
-		top: calc( 50% - #{$c404-bubble-width / 2} - 2em );
+		top: calc( 50% - #{$c404-bubble-width / 2} - 4em );
-		left: calc( 50% - #{$c404-bubble-width / 2} - 2em );
+		left: calc( 50% - #{$c404-bubble-width / 2} - 4em );
 		width: #{$c404-bubble-width};
 		height: $c404-bubble-width;
 
-	padding: 2em;
+	padding: 4em;
 
-	background-color: #fff;
-	border: 1px solid #ddd;
-	box-shadow: 0 0 5px #ddd;
-
-	border-radius: 50% / 50%;
-
-	font-size: 3vh;
-	color: #444;
 
 	flex-direction: column;
-	justify-content: space-around;
+	justify-content: space-between;
 	align-items: center;
 
 	p{
 		text-align: center;
+		z-index: 100;
 	}
 
-	svg{
 
-		path{ fill: #888 !important; }
+	border-radius: 50%;
-		transform: translateY(0em) scale(2);
+	background: #fff;
+
+	font-size: 3vh;
+	color: #444;
+
+
+	@keyframes rocket-round{
+		// 0%{   transform: rotate(360deg) translateY(0) rotate(0deg); }
+		// 10%{  transform: rotate(360deg) translateY(#{-$c404-bubble-width * .5}) translateY(+1vh) rotate(0deg); }
+		// 20%{  transform: rotate(350deg) translateY(#{-$c404-bubble-width}) rotate(-45deg); }
+		// 25%{  transform: rotate(350deg) translateY(#{-$c404-bubble-width*1.1}) rotate(-120deg); }
+		0%{  transform: rotate(360deg) translateY(#{-$c404-bubble-width}) rotate(-90deg); }
+		// 35%{  transform: rotate(320deg) translateY(#{-$c404-bubble-width}) rotate(-90deg); }
+		100%{ transform: rotate(0deg) translateY(#{-$c404-bubble-width*1.05}) rotate(-120deg); }
+	}
+
+	#rocket{
+		display: flex;
+		width: 20vh;
+		height: 20vh;
+
+		border-radius: 50%;
+
+		justify-content: center;
+		align-items: center;
+		background: inherit;
+
+		animation: rocket-round 30s linear infinite;
+
+		z-index: 99;
+
+		a:after{
+			content: none;
+
+		}
+
+		& svg{
+			transform: scale(2);
 			cursor: pointer;
 
-		transition: transform .2s ease-in-out;
+			path{
+				fill: #333 !important;
+				transition: fill .2s ease-in-out;
+			}
+
+
+		}
+
 		&:hover{
-			transform: translateY(-.5em) scale(2);
+			& svg{
-			path{ fill: #222 !important; }
+				path{ fill: rgb(238, 89, 20) !important; }
 			}
 		}
+	}
+
 }