-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit 76513e9
Showing
8 changed files
with
654 additions
and
0 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,307 @@ | ||
/* Animations */ | ||
.bg-anim { | ||
-webkit-animation-name: flash; | ||
-moz-animation-name: flash; | ||
-o-animation-name: flash; | ||
animation-name: flash; | ||
-webkit-animation-timing-function: linear; | ||
-moz-animation-timing-function: linear; | ||
-o-animation-timing-function: linear; | ||
animation-timing-function: linear; | ||
-webkit-animation-duration: 2s; | ||
-moz-animation-duration: 2s; | ||
-o-animation-duration: 2s; | ||
animation-duration: 2s; | ||
-webkit-animation-iteration-count: infinite; | ||
-moz-animation-iteration-count: infinite; | ||
-o-animation-iteration-count: infinite; | ||
animation-iteration-count: infinite; | ||
-webkit-animation-fill-mode: both; | ||
-moz-animation-fill-mode: both; | ||
-o-animation-fill-mode: both; | ||
animation-fill-mode: both; | ||
-webkit-animation-play-state: running; | ||
-moz-animation-play-state: running; | ||
-o-animation-play-state: running; | ||
animation-play-state: running; | ||
} | ||
|
||
@-webkit-keyframes flash { | ||
0% { background-position: 0px 0px; border-bottom-color:#888; } | ||
20% { background-position: -200px -10px; border-bottom-color:#d188d9; } | ||
50% { background-position: -500px -0px; border-bottom-color:#dbdfa0; } | ||
70% { background-position: -700px -10px; border-bottom-color:#8fdac2; } | ||
100% { background-position: -1000px 0px; border-bottom-color:#888; } | ||
|
||
} | ||
/* --------- */ | ||
html, body { padding:0; margin:0; background-color: #888 } | ||
html { | ||
height:100%; | ||
padding-left:15px; | ||
} | ||
body { | ||
position:relative; | ||
height:100%; | ||
-webkit-backface-visibility: hidden; | ||
} | ||
|
||
code { | ||
background-color:rgba(255,255,255,0.15); | ||
padding:1px 6px; | ||
} | ||
|
||
sup small { | ||
font-weight:bold; | ||
} | ||
sup, sup small { | ||
margin:0; padding:0; | ||
height:0; | ||
line-height:0; | ||
} | ||
|
||
a { | ||
color:#dbdfa0; | ||
text-decoration:none; | ||
} | ||
a:hover { | ||
color:#000; | ||
} | ||
|
||
.bm { | ||
position:absolute; | ||
top:0; | ||
bottom:0; | ||
left:-15px; | ||
width:15px; | ||
background-color: #333; | ||
} | ||
|
||
#crafted { | ||
position:absolute; | ||
display:block; | ||
top:0; | ||
right:0; | ||
text-align:right; | ||
padding:6px 12px; | ||
z-index:999; | ||
background-color:#8f8f8f; | ||
font-size:12px; | ||
font-family:"Helvetica", sans-serif; | ||
color:#333; | ||
border-bottom:1px dashed #888; | ||
} | ||
.bg-anim { | ||
padding-top:8px; | ||
padding-bottom:8px; | ||
background-image:url(bg.png) !important; | ||
background-repeat: repeat-x; | ||
background-position: 0px 0px; | ||
} | ||
|
||
#crafted em { color:#dbdfa0;} | ||
|
||
.col1, .col2 { | ||
position:absolute; | ||
padding:32px 0 0 0; | ||
margin:0; | ||
vertical-align: top; | ||
top:0; | ||
bottom:0; | ||
-webkit-transition: left 0.4s ease-in-out; | ||
-moz-transition: left 0.4s ease-in-out; | ||
-o-transition: left 0.4s ease-in-out; | ||
transition: left 0.4s ease-in-out; | ||
} | ||
|
||
.col1 { | ||
width:380px; | ||
padding-top:15px; | ||
} | ||
.col2 { | ||
padding-top:38px; | ||
right:0px; | ||
left:430px; | ||
} | ||
|
||
body.mini .col1{ | ||
left:-380px; | ||
} | ||
body.mini .col2 { | ||
left:40px; | ||
} | ||
|
||
body.mini h1 { | ||
background-color:#333 !important; | ||
/*border:0px solid #888;*/ | ||
box-shadow:none; | ||
margin:0 -25px 0 0px; | ||
} | ||
body.mini h1:after { | ||
content:"i"; | ||
display:block; | ||
position:absolute; | ||
top:24px; | ||
bottom:0; | ||
right:-10px; | ||
color:#888; | ||
font-family:"Georgia", serif; | ||
z-index:999; | ||
font-size:30px; | ||
opacity:0.8; | ||
font-weight:bold; | ||
} | ||
body.mini h1:hover { | ||
margin:0 -25px 0 0px; | ||
|
||
} | ||
body.mini h1:hover:after { opacity:1; color:#8fdac2; } | ||
|
||
.col1 p { | ||
margin-left:18px; | ||
/*line-height:18px;*/ | ||
} | ||
|
||
.controls { | ||
white-space:nowrap; | ||
} | ||
|
||
.footnotes { | ||
position:absolute; | ||
bottom:0px; | ||
font-size:13px; | ||
color:#1f2c40; | ||
} | ||
|
||
.clearfix { clear: both; } | ||
|
||
a.btn, span.bx { | ||
padding:6px 10px; | ||
border-radius: 30px; | ||
background-color:#bcca46; | ||
border: 1px solid rgba(0,0,0,0.3); | ||
box-shadow:inset 0 4px 0 rgba(255,255,255,0.4), 0 1px 4px rgba(0,0,0,0.3); | ||
margin:0 4px; | ||
} | ||
a.btn:hover { | ||
box-shadow:inset 0 4px 0 rgba(255,255,255,0.4), 0 1px 6px rgba(0,0,0,0.45), inset 0 0 6px 50px rgba(255,255,255,0.1); | ||
} | ||
|
||
span.bx { | ||
background-color:#d7c9b5; | ||
border-radius:30px 0 0 30px; | ||
margin-right:0; | ||
} | ||
|
||
.js-len { | ||
box-shadow:inset 0 2px 0 rgba(255,255,255,0.4), 0 1px 4px rgba(0,0,0,0.3) !important; | ||
background-color: #b29db4 !important; | ||
border-radius:4px !important; | ||
text-align:center; | ||
position:absolute; | ||
top:12px; | ||
right:23px; | ||
opacity:0.85; | ||
padding:3px 12px !important; | ||
-webkit-user-select: none; | ||
-moz-user-select: none; | ||
-ms-user-select: none; | ||
user-select: none; | ||
} | ||
|
||
.wrap1 { | ||
position:absolute; | ||
top:100px; | ||
left:0; | ||
right:0; | ||
bottom:0; | ||
min-width:300px; | ||
} | ||
|
||
input.char { | ||
padding:4px 10px 4px 2px; | ||
border: 1px solid rgba(0,0,0,0.3); | ||
box-shadow:inset 0 4px 0 rgba(255,255,255,0.4), 0 1px 4px rgba(0,0,0,0.3); | ||
font-size:18px; | ||
line-height:25px; | ||
margin-left:0; | ||
border-left-width:0; | ||
width:80px; | ||
border-radius:0 30px 30px 0; | ||
} | ||
|
||
#js-show { | ||
background-color:#f8983d; | ||
} | ||
h1 { | ||
font-family:"Codystar", "Helvetica Neue", "Helvetica", sans-serif; | ||
font-size:60px; | ||
line-height:70px; | ||
margin:0 -20px 0 0px; | ||
padding:8px 0px 8px 10px; | ||
font-weight:400; | ||
border-radius:0 100px 100px 0; | ||
/*background-color:#333 !important;*/ | ||
background-color:rgba(0,0,0,0.1); | ||
box-shadow:inset -10px -4px 30px rgba(0,0,0,0.1); | ||
border-bottom:1px solid rgba(255,255,255,0.18); | ||
border-top:1px solid rgba(0,0,0,0.18); | ||
color:#fff; | ||
cursor:pointer; | ||
} | ||
|
||
h1:hover { | ||
color:#8fdac2; | ||
} | ||
|
||
h3 { | ||
color:#000; | ||
font-family:"Helvetica Neue", "Helvetica", sans-serif; | ||
font-size:20px; | ||
font-weight:bold; | ||
margin:15px; | ||
} | ||
|
||
.col2 a, p, div, span.bx { | ||
font-family:"Helvetica Neue", "Helvetica", sans-serif; | ||
font-size:18px; | ||
line-height:25px; | ||
color:#333; | ||
} | ||
|
||
.ta { | ||
position:absolute; | ||
right:0; | ||
bottom:0; | ||
left:0; | ||
top:0; | ||
font-size:18px; | ||
line-height:20px; | ||
color:#000; | ||
background-color:#aaa; | ||
display:inline-block; | ||
padding:10px; | ||
border:0px solid #fff; | ||
border-top:5px solid #bcca46; | ||
overflow-y:scroll; | ||
white-space: pre; | ||
min-width:600px; | ||
} | ||
.ta.hidden { | ||
border-color:#f8983d !important | ||
} | ||
.ta:focus { | ||
background-color: #bbb; | ||
} | ||
|
||
|
||
.ta:focus, input:focus, textarea:focus { | ||
outline: none; | ||
} | ||
|
||
.gh { | ||
background: url(https://github.com/favicon.ico) no-repeat 0% 50%; | ||
padding:10px 0; | ||
padding-left:20px; | ||
background-size:12%; | ||
} |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
Oops, something went wrong.