forked from crizzo/Space-CaCSS
-
Notifications
You must be signed in to change notification settings - Fork 0
/
style.css
128 lines (105 loc) · 3.11 KB
/
style.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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
/* If you're looking for the CSS for the patterns, see cacss.css */
@import url(http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold);
@import url(http://fonts.googleapis.com/css?family=Terminal+Dosis);
html {
background-color: hsl(0,0%,18%);
-webkit-background-size: 3px 3px;
background-image: -webkit-linear-gradient( 0deg, hsla(0,0%,0%,0) 0, hsla(0,0%,10%,1) 3px),
-webkit-linear-gradient( 90deg, hsla(0,0%,0%,0) 0, hsla(0,0%,10%,1) 5px);
background-image: -moz-linear-gradient( hsl(0,0%,11%), hsl(0,0%,11%) );
background-image: -ms-linear-gradient( hsl(0,0%,11%), hsl(0,0%,11%) );
background-image: -o-linear-gradient( hsl(0,0%,11%), hsl(0,0%,11%) );
}
body {
margin: 0;
padding: 100px 0 0 0;
text-align: center;
font: 13px/18px "Droid Sans", "Lucida Grande", Lucida, Verdana, sans-serif;
}
/* Space CaCSS ------------------------------------------------- */
div {
display: inline-block;
position: relative;
width: 200px;
height: 200px;
margin: 0px auto;
border-radius: 50%;
border: 10px solid hsla(0,0%,0%,.7);
box-shadow: inset 0 15px 15px -5px hsla(0,0%,100%,.7),
inset 0 -5px 10px 3px hsla(0,0%,0%,.6),
0 8px 10px 2px hsla(0,0%,0%,.3);
background-position: center;
-webkit-transform: scale3d(.66,.66,1);
-moz-transform: scale(.66);
-ms-transform: scale(.66);
-o-transform: scale(.66);
transform: scale(.66);
-webkit-transition: -webkit-transform .5s cubic-bezier(.32,0,.15,1);
-moz-transition: -moz-transform .5s cubic-bezier(.32,0,.15,1);
-ms-transition: -ms-transform .5s cubic-bezier(.32,0,.15,1);
-o-transition: -o-transform .5s cubic-bezier(.32,0,.15,1);
transition: transform .5s cubic-bezier(.32,0,.15,1);
}
div:hover {
cursor: none;
-webkit-transform: scale3d(1,1,1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-webkit-transition: -webkit-transform .2s cubic-bezier(.32,0,.15,1);
-moz-transition: -moz-transform .2s cubic-bezier(.32,0,.15,1);
-ms-transition: -ms-transform .2s cubic-bezier(.32,0,.15,1);
-o-transition: -o-transform .2s cubic-bezier(.32,0,.15,1);
transition: transform .2s cubic-bezier(.32,0,.15,1);
}
/* Info ------------------------------------------------- */
section {
padding: 0 100px;
}
footer {
margin-top: 100px;
padding: 50px;
background-color: hsla(0,0%,14%,.95);
}
article {
max-width: 500px;
margin: 0 auto;
color: #555555;
text-align: left;
border-radius: 20px;
}
h1 {
margin: 0;
color: hsla(312,0%,18%,1);
font-size: 80px;
line-height: 1.8em;
font-family: 'Terminal Dosis', sans-serif;
}
h2 {
color: hsl(312, 100%, 76%);
margin: 0 0 50px 0;
font-size: 30px;
line-height: 1.2em;
font-weight: normal;
font-style: normal;
font-family: 'Terminal Dosis', sans-serif;
}
a {
text-decoration: none;
color: hsl(212, 100%, 76%);
}
a:hover {
color: hsl(212, 100%, 90%);
}
a:active {
color: hsl(212, 50%, 56%);
}
p {
margin-bottom: 20px;
text-shadow: 0 1px hsla(0,0%,0%,.2);
}
strong {
font-weight: normal;
color: #999;
}