forked from lokesh/color-thief
-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.sass
155 lines (124 loc) · 2.46 KB
/
app.sass
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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
@import "base"
/* =Global */
body, input, textarea
margin: 40px
color: $color
background: $bgColor
font: 16px/1.625em 'Varela Round',"lucida grande",tahoma,sans-serif
font-weight: 400
-webkit-font-smoothing: antialiased
h1,h2,h3,h4,h5,h6
font-family: 'Terminal Dosis', 'lucida grande', tahoma, sans-serif
line-height: 1em
font-weight: 600
margin-bottom: .5em
h1
font-size: 72px
line-height: .5em
margin-bottom: .3em
small
font-size: 20px
&:hover
.char1
color: greenyellow
.char2
color: indianred
.char3
color: khaki
.char4
color: lightsteelblue
.char5
color: violet
.char6
color: skyblue
.char7
color: lightseagreen
.char8
color: tan
.char9
color: darkmagenta
.char10
color: tomato
.char11
color: goldenrod
h2
font-size: 40px
line-height: 1.2em
text-align: center
h3
font-size: 16px
letter-spacing: 0.1em
text-transform: uppercase
h4
font-size: 20px
margin-bottom: 1.25em
p
margin-bottom: 1.25em
strong
font-weight: bold
/* Forms */
input[type=text],
input[type=password],
textarea
background: #fafafa
+box-shadow(inset 0 1px 1px rgba(0,0,0,0.1))
border: 1px solid #ddd
color: #888
+border-radius($radius)
input[type=text]:focus,
textarea:focus
color: #373737
textarea
padding-left: 3px
width: 98%
input[type=text]
padding: 3px
/* Links */
a
color: $blue
text-decoration: none
&:hover
color: scale-color($blue, $lightness: 50%)
header
padding-bottom: 40px
text-align: center
.imageSection
+clearfix
margin-bottom: 80px
.imageWrap
width: 400px
height: 300px
float: left
position: relative
margin-right: 20px
border: 1px solid #444
background: url(../img/dark_checkered_bg.png)
.targetImage
position: absolute
top: 50%
left: 50%
margin-left: -200px
margin-top: -150px
.colors
width: 400px
float: left
.function
clear: left
margin-bottom: 10px
.swatches
.swatch
width: 40px
height: 20px
margin: 0 4px 4px 0
background: #ddd
float: left
+transition(all .2s)
&:hover
+scale(1.2, 1.2)
+box-shadow(0 1px 10px rgba(0,0,0,1))
&:first-child
+border-left-radius($radius)
&:last-child
+border-right-radius($radius)
canvas
display: none