Skip to content

Commit

Permalink
logo animation
Browse files Browse the repository at this point in the history
  • Loading branch information
@wentin
wentin committed Feb 3, 2015
1 parent 93fe31b commit 0afada5
Show file tree
Hide file tree
Showing 7 changed files with 106 additions and 108 deletions.
4 changes: 2 additions & 2 deletions css/mobile.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ Error: Undefined variable: "$green".
14: position: relative;
15: z-index: 1;
16: .logo {
17: width: 82px;
17: width: 60px;
Backtrace:
./mobile.scss:12
Expand Down Expand Up @@ -97,4 +97,4 @@ Backtrace:
body:before {
white-space: pre;
font-family: monospace;
content: "Error: Undefined variable: \"$green\".\A on line 12 of ./mobile.scss\A \A 7: font-size: 20px;\A 8: line-height: 28px;\A 9: header {\A 10: width: 100%;\A 11: height: 90px;\A 12: border-top: solid 3px $green;\A 13: border-bottom: none;\A 14: position: relative;\A 15: z-index: 1;\A 16: .logo {\A 17: width: 82px;"; }
content: "Error: Undefined variable: \"$green\".\A on line 12 of ./mobile.scss\A \A 7: font-size: 20px;\A 8: line-height: 28px;\A 9: header {\A 10: width: 100%;\A 11: height: 90px;\A 12: border-top: solid 3px $green;\A 13: border-bottom: none;\A 14: position: relative;\A 15: z-index: 1;\A 16: .logo {\A 17: width: 60px;"; }
36 changes: 14 additions & 22 deletions css/mobile.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,33 +14,25 @@ header {
position: relative;
z-index: 1;
.logo {
width: 82px;
-webkit-transform: scale(0.75, 0.75);
transform: scale(0.75, 0.75);
left: -1px;
top: -4px;
#bg {
width: 60px;
left: 20px;
top: 6px;
#underline {
opacity: 0;
}
#Hu {

}
#Hd {
-webkit-transform: translate(-143px, 0);
transform: translate(-143px, 0);
#js {
-webkit-transform: translate(-218.7px, 0);
transform: translate(-218.7px, 0);
fill: $green;
}
#ackthe {
opacity: 0;
}
#ackpad {
opacity: 0;
}
#bg, #Hu, #Hd, #ackthe, #ackpad {
#line {
-webkit-transform: translate(-218.7px, 0);
transform: translate(-218.7px, 0);
fill: $green;
}
&:hover {
#Hu {
}
#Hd {
#js, #line {
fill: $darkGreen;
}
}
}
Expand Down
83 changes: 40 additions & 43 deletions css/style.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion css/style.css.map
View file

Large diffs are not rendered by default.

66 changes: 27 additions & 39 deletions css/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,68 +101,55 @@ header {
top: 20px;
left: 40px;
overflow: hidden;
width: 325px;
width: 264px;
transition: all 0.6s cubic-bezier(0.7,0,0.3,1);
// -webkit-transition-delay: 0.25s;
// transition-delay: 0.25s;
#bg, #Hu, #Hd, #ackthe, #ackpad {
#underline, #js, #line {
transition: all 0.6s cubic-bezier(0.7,0,0.3,1);
}
#bg {

}
#Hu {
fill: $green;
#underline {
fill: $darkGreen;
}
#Hd {
#js {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
fill: $darkGreen;
}
#ackthe {
opacity: 1;
}
#ackpad {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
opacity: 1;
#line {
fill: $darkGreen;
}
&:hover {
-webkit-transition-delay: 0.25s;
transition-delay: 0.25s;
#Hu {
fill: $darkGreen;
}
#Hd {
#underline {
fill: $green;
}
#ackthe {
fill: $darkGreen;
#js {
fill: $green;
}
#ackpad {
#line {
fill: $green;
}
}
.collapse & {
width: 82px;
#bg, #Hu, #Hd, #ackthe, #ackpad {
width: 45px;
#underline, #js, #line {
}
#bg {
}
#Hu {
#line {
-webkit-transform: translate(-218.7px, 0);
transform: translate(-218.7px, 0);
fill: $green;

}
#Hd {
-webkit-transform: translate(-143px, 0);
transform: translate(-143px, 0);
}
#ackthe {
#underline {
opacity: 0;

}
#ackpad {
-webkit-transform: translate(-143px, 0);
transform: translate(-143px, 0);
opacity: 0;
#js {
-webkit-transform: translate(-218.7px, 0);
transform: translate(-218.7px, 0);
fill: $green;
}
}
}
Expand Down Expand Up @@ -220,7 +207,7 @@ header {
line-height: 60px;
position: absolute;
top: 2px;
right: 53px;
right: 40px;
height: 60px;
a {
font-family: $fira;
Expand Down Expand Up @@ -395,11 +382,12 @@ p {
margin-top: 24px;
}
p.text a {
font-size: 42px;
font-size: 48px;
line-height: 1.4em;
font-style: italic;
}
p a.title {
font-size: 112px;
font-size: 126px;
line-height: 1.4em;
}
p strong {
Expand Down
16 changes: 16 additions & 0 deletions i/logo-long.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 0afada5

Please sign in to comment.