Skip to content

Commit 93b0059

Browse files
committed
complete background transitions
1 parent 636c7ec commit 93b0059

20 files changed

+1090
-231
lines changed

.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.DS_Store
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.

css/body.scss

Lines changed: 0 additions & 15 deletions
This file was deleted.

css/main.css

Lines changed: 25 additions & 196 deletions
Original file line numberDiff line numberDiff line change
@@ -1,196 +1,25 @@
1-
* {
2-
box-sizing: border-box;
3-
}
4-
5-
section {
6-
margin: auto;
7-
width: 80%;
8-
}
9-
10-
h1 {
11-
font-family: 'Spicy Rice', serif;
12-
font-size: 30px;
13-
letter-spacing: 3px;
14-
text-align: center;
15-
}
16-
17-
button {
18-
background: #ccc;
19-
border: none;
20-
border-radius: 5px;
21-
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
22-
color: #111;
23-
font-family: 'Puritan', sans-serif;
24-
font-size: 20px;
25-
padding: 15px;
26-
margin: 5px;
27-
}
28-
29-
.button1 {
30-
transition: background 0.3s ease;
31-
}
32-
.button1:hover, .button1:focus {
33-
background: #5543e0;
34-
color: #fff;
35-
}
36-
37-
.button2 {
38-
transition: background 1s ease;
39-
}
40-
.button2:hover, .button2:focus {
41-
background: #5543e0;
42-
color: #fff;
43-
}
44-
45-
.button3 {
46-
transition: background 0.3s ease 0.5s, color 0.3s ease 0.5s;
47-
}
48-
.button3:hover, .button3:focus {
49-
background: #5543e0;
50-
color: #fff;
51-
}
52-
53-
.button4 {
54-
transition: background 0.5s ease, color 0.5s linear;
55-
}
56-
.button4:hover {
57-
background: #5543e0;
58-
color: #fe29b5;
59-
}
60-
61-
.button5 {
62-
position: relative;
63-
transform: translateZ(0);
64-
transition: color 0.3s ease;
65-
}
66-
.button5:hover, .button5:focus, .button5:active {
67-
color: #fff;
68-
}
69-
.button5:hover:before, .button5:focus:before, .button5:active:before {
70-
transform: scaleX(1);
71-
}
72-
73-
.button5:before {
74-
position: absolute;
75-
top: 0;
76-
left: 0;
77-
right: 0;
78-
bottom: 0;
79-
background: #5543e0;
80-
border-radius: 5px;
81-
content: "";
82-
transform: scaleX(0);
83-
transform-origin: 0 50%;
84-
transition: transform 0.3s ease-out;
85-
z-index: -1;
86-
}
87-
88-
.button6 {
89-
position: relative;
90-
transform: translateZ(0);
91-
transition: color 0.3s ease;
92-
}
93-
.button6:hover, .button6:focus, .button6:active {
94-
color: #fff;
95-
}
96-
.button6:hover:before, .button6:focus:before, .button6:active:before {
97-
transform: scaleX(1);
98-
}
99-
100-
.button6:before {
101-
position: absolute;
102-
top: 0;
103-
left: 0;
104-
right: 0;
105-
bottom: 0;
106-
background: #5543e0;
107-
border-radius: 5px;
108-
content: "";
109-
transform: scaleX(0);
110-
transform-origin: 100% 50%;
111-
transition: transform 0.3s ease-out;
112-
z-index: -1;
113-
}
114-
115-
.button7 {
116-
position: relative;
117-
transform: translateZ(0);
118-
transition: color 0.3s ease;
119-
}
120-
.button7:hover, .button7:focus, .button7:active {
121-
color: #fff;
122-
}
123-
.button7:hover:before, .button7:focus:before, .button7:active:before {
124-
transform: scaleX(1);
125-
}
126-
127-
.button7:before {
128-
position: absolute;
129-
top: 0;
130-
left: 0;
131-
right: 0;
132-
bottom: 0;
133-
background: #5543e0;
134-
border-radius: 5px;
135-
content: "";
136-
transform: scaleX(0);
137-
transform-origin: 50% 0;
138-
transition: transform 0.3s ease-out;
139-
z-index: -1;
140-
}
141-
142-
.button8 {
143-
position: relative;
144-
transform: translateZ(0);
145-
transition: color 0.3s ease;
146-
}
147-
.button8:hover, .button8:focus, .button8:active {
148-
color: #fff;
149-
}
150-
.button8:hover:before, .button8:focus:before, .button8:active:before {
151-
transform: scaleY(1);
152-
}
153-
154-
.button8:before {
155-
position: absolute;
156-
top: 0;
157-
left: 0;
158-
right: 0;
159-
bottom: 0;
160-
background: #5543e0;
161-
border-radius: 5px;
162-
content: "";
163-
transform: scaleY(0);
164-
transform-origin: 100% 0;
165-
transition: transform 0.3s ease-out;
166-
z-index: -1;
167-
}
168-
169-
.button9 {
170-
position: relative;
171-
transform: translateZ(0);
172-
transition: color 0.3s ease;
173-
}
174-
.button9:hover, .button9:focus, .button9:active {
175-
color: #fff;
176-
}
177-
.button9:hover:before, .button9:focus:before, .button9:active:before {
178-
transform: scaleY(1);
179-
}
180-
181-
.button9:before {
182-
position: absolute;
183-
top: 0;
184-
left: 0;
185-
right: 0;
186-
bottom: 0;
187-
background: #5543e0;
188-
border-radius: 5px;
189-
content: "";
190-
transform: scaleY(0);
191-
transform-origin: 0 100%;
192-
transition: transform 0.3s ease-out;
193-
z-index: -1;
194-
}
195-
196-
/*# sourceMappingURL=main.css.map */
1+
/*
2+
Errno::ENOENT: No such file or directory @ rb_sysopen - css/main.scss
3+
4+
Backtrace:
5+
/Users/kirstenswanson/.rvm/gems/ruby-2.3.1/gems/sass-3.4.22/lib/sass/plugin/compiler.rb:484:in `read'
6+
/Users/kirstenswanson/.rvm/gems/ruby-2.3.1/gems/sass-3.4.22/lib/sass/plugin/compiler.rb:484:in `update_stylesheet'
7+
/Users/kirstenswanson/.rvm/gems/ruby-2.3.1/gems/sass-3.4.22/lib/sass/plugin/compiler.rb:215:in `block in update_stylesheets'
8+
/Users/kirstenswanson/.rvm/gems/ruby-2.3.1/gems/sass-3.4.22/lib/sass/plugin/compiler.rb:209:in `each'
9+
/Users/kirstenswanson/.rvm/gems/ruby-2.3.1/gems/sass-3.4.22/lib/sass/plugin/compiler.rb:209:in `update_stylesheets'
10+
/Users/kirstenswanson/.rvm/gems/ruby-2.3.1/gems/sass-3.4.22/lib/sass/plugin/compiler.rb:294:in `watch'
11+
/Users/kirstenswanson/.rvm/gems/ruby-2.3.1/gems/sass-3.4.22/lib/sass/plugin.rb:109:in `method_missing'
12+
/Users/kirstenswanson/.rvm/gems/ruby-2.3.1/gems/sass-3.4.22/lib/sass/exec/sass_scss.rb:360:in `watch_or_update'
13+
/Users/kirstenswanson/.rvm/gems/ruby-2.3.1/gems/sass-3.4.22/lib/sass/exec/sass_scss.rb:51:in `process_result'
14+
/Users/kirstenswanson/.rvm/gems/ruby-2.3.1/gems/sass-3.4.22/lib/sass/exec/base.rb:52:in `parse'
15+
/Users/kirstenswanson/.rvm/gems/ruby-2.3.1/gems/sass-3.4.22/lib/sass/exec/base.rb:19:in `parse!'
16+
/Users/kirstenswanson/.rvm/gems/ruby-2.3.1/gems/sass-3.4.22/bin/sass:13:in `<top (required)>'
17+
/Users/kirstenswanson/.rvm/gems/ruby-2.3.1/bin/sass:23:in `load'
18+
/Users/kirstenswanson/.rvm/gems/ruby-2.3.1/bin/sass:23:in `<main>'
19+
/Users/kirstenswanson/.rvm/gems/ruby-2.3.1/bin/ruby_executable_hooks:15:in `eval'
20+
/Users/kirstenswanson/.rvm/gems/ruby-2.3.1/bin/ruby_executable_hooks:15:in `<main>'
21+
*/
22+
body:before {
23+
white-space: pre;
24+
font-family: monospace;
25+
content: "Errno::ENOENT: No such file or directory @ rb_sysopen - css/main.scss"; }

css/main.css.map

Lines changed: 0 additions & 7 deletions
This file was deleted.

0 commit comments

Comments
 (0)