-
Notifications
You must be signed in to change notification settings - Fork 10
/
index.html
54 lines (51 loc) · 1.63 KB
/
index.html
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
<html>
<head>
<title>rhes.es</title>
<style type="text/css">
body {
background-color: rgb(46,36,30);
background-image: url(img/background-r.png);
height: 100%;
}
@font-face {
font-family: 'wildride';
src: url('fonts/WildRide.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
.trans {
background-color: rgba(255,255,255,.5);
width: 80%;
height: 80%;
display:none;
}
#logo {
background: url(img/rheses-color.png);
background-repeat: no-repeat;
width:171;
height:64;
position: absolute;
}
#slogan {
font-family: wildride;
color: rgb(154,123,75);
font-size: 72px;
position: absolute;
text-shadow: 0px 0px 4px rgb(46,36,30);
}
</style>
<script type="text/javascript" src="lib/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="lib/acorn.js"></script>
<script type="text/javascript" src="rheses.min.js"></script>
</head>
<body>
<div class="trans">
Let's say you want a div to follow another div, no matter what.
What if you could use the power of Javascript to change your CSS?
What if when you changed your CSS anyone who cared would know something changed?
Welcome to rhes.es
</div>
<div id="logo" onclick="rheses.applyConstraint(this, 'left', 'Math.min((parent.width * .5) - (this.width * .5), slogan.left)')"></div>
<div id="slogan" r-style="top: Math.max(logo.height + logo.top, Math.min(parent.height - this.height, Mouse.top - this.height + 3)); left: Math.max(0, Math.min(parent.width - this.width, Mouse.left - (this.width / 2)));">You got your javascript in my css!</div>
</body>
</html>