|
/* |
|
Data on revolution of planets in earth days |
|
Mercury : ~87,5 days |
|
Venus : ~224,7 days |
|
Earth : ~365,2563 days |
|
+ Moon : ~27,3216 days (around earth) |
|
Mars : ~687 days (~1,8 year) |
|
Jupiter : ~4 331 days (~12 years) |
|
Saturn : ~10 747 days (~30 years) |
|
Uranus : ~30 589 days (~84 years) |
|
Neptune : ~59 802 days (~165 years) |
|
Pluto : ~90 580 days (~248 years) |
|
*/ |
|
|
|
$year-in-second : 20; // 1 Earth year = 30 sec |
|
|
|
@function revolution($pl-year-in-days){ |
|
@return $pl-year-in-days * $year-in-second / 365.2563 + s //Earth reference |
|
} |
|
@function alphaRandom(){ |
|
@return random(1000)*.001; |
|
} |
|
@function stars($s, $max-area, $min-area : 0, $star-size : 0){ |
|
$stars : #{$min-area + random($max-area)}px #{$min-area + random($max-area)}px 0 #{$star-size}px rgba(255,255,255, alphaRandom()); |
|
@for $i from 1 to $s{ |
|
$stars: '#{$stars} , #{$min-area + random($max-area)}px #{$min-area + random($max-area)}px 0 #{$star-size}px rgba(255,255,255, #{alphaRandom()})' |
|
} |
|
@return unquote($stars); |
|
} |
|
|
|
$sun: 48px; |
|
$mercury-orb : 70px; $mercury-pl: 5px; |
|
$venus-orb : 100px; $venus-pl: 11px; |
|
$earth-orb : 145px; $earth-pl: 8px; |
|
$mars-orb : 190px; $mars-pl: 6px; |
|
$jupiter-orb : 340px; $jupiter-pl: 18px; |
|
$saturn-orb : 440px; $saturn-pl: 12px; |
|
$uranus-orb : 520px; $uranus-pl: 10px; |
|
$neptune-orb : 630px; $neptune-pl: 10px; |
|
$pluto-orb : 780px; $pluto-pl: 3px; |
|
|
|
$asteroids-belt-orb : 300px; $asteroids-belt-pl: 210px; |
|
|
|
|
|
*, *:before, *:after{ |
|
padding:0; |
|
margin:0; |
|
box-sizing:border-box; |
|
} |
|
|
|
html, body{ |
|
height:100%; |
|
width:100%; |
|
} |
|
|
|
body{ |
|
font:normal 1em/1.45em "Helvetica Neue", Helvetica, Arial, sans-serif; |
|
-webkit-font-smoothing: antialiased; |
|
color:#fff; |
|
background: radial-gradient(ellipse at bottom, #1C2837 0%, #050608 100%); |
|
background-attachment:fixed; |
|
} |
|
|
|
h1{ |
|
font-weight:300; |
|
font-size:2.5em; |
|
text-transform:uppercase; |
|
font-family: Lato; |
|
line-height:1.6em; |
|
letter-spacing:.1em; |
|
} |
|
|
|
a, a:visited{ |
|
text-decoration:none; |
|
color:white; |
|
opacity:.7; |
|
&:hover{ |
|
opacity:1 |
|
} |
|
&.icon{ |
|
margin-right:2px; |
|
padding:3px; |
|
} |
|
} |
|
|
|
.description{ |
|
padding:30px; |
|
position:absolute; |
|
top:0; |
|
left:0; |
|
width:25%; |
|
z-index:999; |
|
p{ |
|
font-size:.9em; |
|
& + p{ |
|
margin-top:20px; |
|
} |
|
&.author{ |
|
font-size:.7em; |
|
.fa-heart{ |
|
color:#860014; |
|
} |
|
} |
|
} |
|
} |
|
|
|
hr{ |
|
margin:26px 0; |
|
border:0; |
|
border-top:1px solid white; |
|
background:transparent; |
|
width:25%; |
|
opacity:.1; |
|
} |
|
|
|
code{ |
|
color: #ae94c0; |
|
font-family:Menlo, Monaco, Consolas, 'Courier New', monospace; |
|
font-size:.9em; |
|
} |
|
|
|
.solar-syst{ |
|
&:after{ |
|
content:""; |
|
position:absolute; |
|
height:2px; |
|
width:2px; |
|
top:-2px; |
|
background:white; |
|
box-shadow: stars(500, 1800); |
|
border-radius:100px; |
|
} |
|
margin:0 auto; |
|
width:100%; |
|
height:100%; |
|
position:relative; |
|
div{ |
|
border-radius:1000px; |
|
top:50%; |
|
left:50%; |
|
position:absolute; |
|
z-index:999; |
|
&:not(.sun){ |
|
border: 1px solid rgba(102, 166, 229, 0.12); |
|
&:before{ |
|
left:50%; |
|
border-radius:100px; |
|
content:""; |
|
position:absolute; |
|
} |
|
} |
|
&:not(.asteroids-belt){ |
|
&:before{ |
|
box-shadow: inset 0 6px 0 -2px rgba(0, 0, 0, 0.25); |
|
} |
|
} |
|
} |
|
} |
|
|
|
.sun{ |
|
background:radial-gradient(ellipse at center, #ffd000 1%,#f9b700 39%,#f9b700 39%,#e06317 100%); |
|
height:$sun; |
|
width:$sun; |
|
margin-top: -$sun / 2; |
|
margin-left: -$sun / 2; |
|
background-clip: padding-box; |
|
border:0 !important; |
|
background-position: -28px -103px; |
|
background-size: 175%; |
|
box-shadow: 0 0 10px 2px rgba(255, 107, 0, 0.4), 0 0 22px 11px rgba(255, 203, 0, 0.13); |
|
} |
|
|
|
.mercury{ |
|
height: $mercury-orb; |
|
width: $mercury-orb; |
|
margin-top: -$mercury-orb / 2; |
|
margin-left: -$mercury-orb / 2; |
|
animation: orb revolution(87.5) linear infinite; |
|
&:before{ |
|
height:$mercury-pl; |
|
width:$mercury-pl; |
|
background: #9f5e26; |
|
margin-top: -$mercury-pl / 2; |
|
margin-left: -$mercury-pl / 2; |
|
} |
|
} |
|
|
|
.venus{ |
|
height: $venus-orb; |
|
width: $venus-orb; |
|
margin-top: -$venus-orb / 2; |
|
margin-left: -$venus-orb / 2; |
|
animation: orb revolution(224.7) linear infinite; |
|
&:before{ |
|
height:$venus-pl; |
|
width:$venus-pl; |
|
background:#BEB768; |
|
margin-top: -$venus-pl / 2; |
|
margin-left: -$venus-pl / 2; |
|
} |
|
} |
|
|
|
.earth{ |
|
height: $earth-orb; |
|
width: $earth-orb; |
|
margin-top: -$earth-orb / 2; |
|
margin-left: -$earth-orb / 2; |
|
animation: orb revolution(365.2563) linear infinite; |
|
&:before{ |
|
height:$earth-pl; |
|
width:$earth-pl; |
|
background:#11abe9; |
|
margin-top: -$earth-pl / 2; |
|
margin-left: -$earth-pl / 2; |
|
} |
|
&:after{ |
|
position: absolute; |
|
content: ""; |
|
height: 18px; |
|
width: 18px; |
|
left: 50%; |
|
top: 0px; |
|
margin-left: -9px; |
|
margin-top: -9px; |
|
border-radius: 100px; |
|
box-shadow: 0 -10px 0 -8px grey; |
|
animation: orb revolution(27.3216) linear infinite; |
|
} |
|
} |
|
.mars{ |
|
height: $mars-orb; |
|
width: $mars-orb; |
|
margin-top: -$mars-orb / 2; |
|
margin-left: -$mars-orb / 2; |
|
animation: orb revolution(687) linear infinite; |
|
&:before{ |
|
height:$mars-pl; |
|
width:$mars-pl; |
|
background:#cf3921; |
|
margin-top: -$mars-pl / 2; |
|
margin-left: -$mars-pl / 2; |
|
} |
|
} |
|
|
|
.jupiter{ |
|
height: $jupiter-orb; |
|
width: $jupiter-orb; |
|
margin-top: -$jupiter-orb / 2; |
|
margin-left: -$jupiter-orb / 2; |
|
animation: orb revolution(4331) linear infinite; |
|
&:before{ |
|
height:$jupiter-pl; |
|
width:$jupiter-pl; |
|
background:#c76e2a; |
|
margin-top: -$jupiter-pl / 2; |
|
margin-left: -$jupiter-pl / 2; |
|
} |
|
} |
|
.saturn{ |
|
height: $saturn-orb; |
|
width: $saturn-orb; |
|
margin-top: -$saturn-orb / 2; |
|
margin-left: -$saturn-orb / 2; |
|
animation: orb revolution(10747) linear infinite; |
|
&:before{ |
|
height:$saturn-pl; |
|
width:$saturn-pl; |
|
background:#e7c194; |
|
margin-top: -$saturn-pl / 2; |
|
margin-left: -$saturn-pl / 2; |
|
} |
|
&:after{ |
|
position: absolute; |
|
content: ""; |
|
height: 2.34%; |
|
width: 4.676%; |
|
left: 50%; |
|
top: 0px; |
|
transform: rotateZ(-52deg); |
|
margin-left: -2.3%; |
|
margin-top: -1.2%; |
|
border-radius: 50% 50% 50% 50%; |
|
box-shadow: 0 1px 0 1px #987641, 3px 1px 0 #987641, -3px 1px 0 #987641; |
|
animation: orb revolution(10747) linear infinite; |
|
animation-direction: reverse; // compensate to reverse main orbit animation |
|
transform-origin: 52% 60%; |
|
} |
|
} |
|
|
|
.uranus{ |
|
height: $uranus-orb; |
|
width: $uranus-orb; |
|
margin-top: -$uranus-orb / 2; |
|
margin-left: -$uranus-orb / 2; |
|
animation: orb revolution(30589) linear infinite; |
|
&:before{ |
|
height:$uranus-pl; |
|
width:$uranus-pl; |
|
background:#b5e3e3; |
|
margin-top: -$uranus-pl / 2; |
|
margin-left: -$uranus-pl / 2; |
|
} |
|
} |
|
|
|
.neptune{ |
|
height: $neptune-orb; |
|
width: $neptune-orb; |
|
margin-top: -$neptune-orb / 2; |
|
margin-left: -$neptune-orb / 2; |
|
animation: orb revolution(59802) linear infinite; |
|
&:before{ |
|
height:$neptune-pl; |
|
width:$neptune-pl; |
|
background:#175e9e; |
|
margin-top: -$neptune-pl / 2; |
|
margin-left: -$neptune-pl / 2; |
|
} |
|
} |
|
|
|
.asteroids-belt{ |
|
opacity:.7; |
|
border-color: transparent !important; |
|
height: $asteroids-belt-orb; |
|
width: $asteroids-belt-orb; |
|
margin-top: -$asteroids-belt-orb / 2; |
|
margin-left: -$asteroids-belt-orb / 2; |
|
animation: orb revolution(2191) linear infinite; |
|
overflow:hidden; |
|
&:before{ |
|
top:50%; |
|
height:$asteroids-belt-pl; |
|
width:$asteroids-belt-pl; |
|
margin-left: -$asteroids-belt-pl / 2; |
|
margin-top: -$asteroids-belt-pl / 2; |
|
background: transparent; |
|
border-radius:140px !important; |
|
box-shadow: stars(390, 290, -290/2, -104); |
|
} |
|
} |
|
|
|
.pluto{ |
|
height: $pluto-orb; |
|
width: $pluto-orb; |
|
margin-top: -$pluto-orb / 2 + -60; |
|
margin-left: -$pluto-orb / 2 + 70; |
|
animation: orb revolution(90580) linear infinite; |
|
&:before{ |
|
height:$pluto-pl; |
|
width:$pluto-pl; |
|
background:#fff; |
|
margin-top: -$pluto-pl / 2; |
|
margin-left: -$pluto-pl / 2; |
|
} |
|
} |
|
|
|
.hide{ |
|
display:none; |
|
} |
|
.links{ |
|
margin-top:5px !important; |
|
font-size:1em !important; |
|
} |
|
|
|
@keyframes orb{ |
|
from { |
|
transform:rotate(0deg) |
|
} |
|
to{ |
|
transform:rotate(-360deg) |
|
} |
|
} |
|
|
|
/* |
|
SOCIAL STYLES APPEAR BELOW. |
|
ALSO REMEMBER TO REFERENCE THE JS URL IN THE JS PAN SETTINGS: http://codepen.io/Sander-Nizni/pen/mPoOjg |
|
*/ |
|
|
|
#social-container { |
|
opacity: 3.3; |
|
bottom: 5px; |
|
right: 5px; |
|
} |
|
#social-container p{ |
|
padding-bottom: 0; |
|
margin-bottom: 0; |
|
} |
|
#social-container #social-links a { |
|
font-size: 3.5rem; |
|
} |
|
#social-message { |
|
font-size: 1.15rem; |
|
} |
