mti
/
ptut-vhost
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[404] upgrade

This commit is contained in:
xdrm-brackets 2018-03-08 15:07:16 +01:00
parent 45a7f126bb
commit 0e305499ad
4 changed files with 175 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public_html/asset/svg/filter.svg
View File

@ -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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 359 B

After

Width:  |  Height:  |  Size: 645 B

100
public_html/asset/svg/planet.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

8
public_html/page/404.php
View File

File diff suppressed because one or more lines are too long

82
webpack/scss/layout.scss
View File

@ -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 );
left: calc( 50% - #{$c404-bubble-width / 2} - 2em );
top: calc( 50% - #{$c404-bubble-width / 2} - 4em );
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; }
transform: translateY(0em) scale(2);
cursor: pointer;
border-radius: 50%;
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;
path{
fill: #333 !important;
transition: fill .2s ease-in-out;
}
}
transition: transform .2s ease-in-out;
&:hover{
transform: translateY(-.5em) scale(2);
path{ fill: #222 !important; }
& svg{
path{ fill: rgb(238, 89, 20) !important; }
}
}
}
}