-
Notifications
You must be signed in to change notification settings - Fork 500
/
styles0.css
106 lines (89 loc) · 1.88 KB
/
styles0.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
/**
*
* Hey. My name's Samuel Reed. I'm a co-founder of BitMEX and frequent
* open source contributor.
*
* I build interactive websites.
*
* How about some live coding?
*/
/**
* Let's begin. We start by animating... well, everything.
*/
* {
-webkit-transition: all 1s;
}
/**
* That didn't do much. But you'll see.
*
* Black on white is really boring,
* so let's do something about it.
*/
html {
background: rgb(63, 82, 99);
}
/***
* Hold on...
*/
pre, a {
color: white;
}
/**
* That's better. Sorry about your eyes.
*
* Working in this big empty space is tough.
*
* I'm going to make a nice area for us to work in.
*/
pre:not(:empty) {
overflow: auto;
background: rgb(48, 48, 48);
border: 1px solid #ccc;
max-height: 45vh;
width: 49%;
font-size: 14px;
font-family: monospace;
padding: 1vh 0.5vw;
box-shadow: -4px 4px 2px 0 rgba(0,0,0,0.3);
white-space: pre-wrap;
outline: 0;
margin: 1vh 0.5vw;
}
/**
* Okay. We're going to start filling up the screen.
* Let's get ready to do some work.
*/
#style-text {
-webkit-transform: translateX(95%);
position: absolute;
}
/**
* This is good, but all the text is white!
* Let's make it even more readable.
*/
.comment { color: #857F6B; font-style: italic; }
.selector { color: #E69F0F; }
.selector .key { color: #64D5EA; }
.key { color: #64D5EA; }
.value { color: #BE84F2; }
.value.px { color: #F92772; }
/**
* Now we're getting somewhere.
* Time to get a little perspective.
*/
body {
-webkit-perspective: 1000px;
}
#style-text {
-webkit-transform: translateX(98.5%) rotateY(-10deg);
-webkit-transform-origin: right;
max-height: 93.1vh;
}
/**
* So, let's talk projects. That's why you're here, right?
* I can't imagine you'd come just to see the pretty colors.
*/
pre:not(#style-text) {
-webkit-transform: rotateY(10deg);
-webkit-transform-origin: left;
}