app.css in edge_framework-0.2.0

- old
+ new
@@ -1,26 +1,62 @@
+.block-hero .logo-letter, .block-hero .logo-shape, .block-feature .feature-button { -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; transition: all 0.2s ease-in; }
+
+.block-hero { position: relative; background: #efeddf; overflow: hidden; }
+.block-hero .logo { position: relative; top: 20%; max-height: 18.75em; }
+@media only screen and (max-width: 767px) { .block-hero .logo { min-height: 0; } }
+.block-hero .logo-letter, .block-hero .logo-shape { opacity: 0.6; }
+.block-hero .logo-letter:hover, .block-hero .logo-shape:hover { opacity: 1; }
+.block-hero .pitch-intro { padding: 1.25em 0.625em 1.25em; z-index: 2; }
+@media only screen and (max-width: 767px) { .block-hero .pitch-intro { padding-top: 0; } }
+.block-hero .pitch-intro h1, .block-hero .pitch-intro h2 { font-family: "Source Sans Pro", Helvetica, Arial, sans-serif; font-weight: 300; }
+.block-hero .pitch-intro h1 { font-size: 3.5em; margin-bottom: 0.35714em; }
+.block-hero .pitch-intro h2 { font-size: 1.875em; margin-bottom: 0.66667em; }
+.block-hero .pitch-intro code { background: white; font-size: 1.25em; padding: 0.3125em 0.625em; border: 1px solid rgba(0, 0, 0, 0.1); margin-bottom: 1em; }
+.block-hero .pitch-intro .hero-button { background: #1d7886; color: white; border: 1px solid #14525c; text-transform: uppercase; font-size: 1.25em; }
+.block-hero .pitch-intro .hero-button:active { border: 1px solid #0b2d32; }
+.block-hero .pitch-intro.has-logo { background: #efeddf url("../img/logo/edge-logo-transparent.svg") center right no-repeat; background-size: auto 125%; }
+@media only screen and (max-width: 767px) { .block-hero .pitch-intro.has-logo { background: none; } }
+.block-hero .ruby-install { margin-top: 1.29em; }
+@media only screen and (max-width: 767px) { .block-hero .ruby-install { margin-top: 0; } }
+@media only screen and (max-width: 767px) { .block-hero { font-size: 12px; background: #efeddf url("../img/logo/edge-logo-transparent.svg") center right no-repeat; background-size: auto 125%; } }
+
+.block-feature { background: #e4e3d5; padding: 1.25em 0.625em 1.25em; margin-bottom: 0.9375em; }
+.block-feature .feature-button { display: block; padding: 1.25em 0; color: inherit; text-align: center; }
+.block-feature .feature-button:hover { color: white; }
+.block-feature .feature-button:active { -webkit-box-shadow: inset 0.0625em 0.0625em 0.75em rgba(0, 0, 0, 0.1), inset -0.0625em -0.0625em 0.75em rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0.0625em 0.0625em 0.75em rgba(0, 0, 0, 0.1), inset -0.0625em -0.0625em 0.75em rgba(0, 0, 0, 0.1); box-shadow: inset 0.0625em 0.0625em 0.75em rgba(0, 0, 0, 0.1), inset -0.0625em -0.0625em 0.75em rgba(0, 0, 0, 0.1); }
+.block-feature .feature-list > li { margin-bottom: 0.9375em; }
+.block-feature .feature-list > li:nth-child(1) .feature-button { border-top: 2px solid #0099cc; }
+.block-feature .feature-list > li:nth-child(1) .feature-button:hover { background: #0099cc; }
+.block-feature .feature-list > li:nth-child(2) .feature-button { border-top: 2px solid #dba924; }
+.block-feature .feature-list > li:nth-child(2) .feature-button:hover { background: #dba924; }
+.block-feature .feature-list > li:nth-child(3) .feature-button { border-top: 2px solid #cc0000; }
+.block-feature .feature-list > li:nth-child(3) .feature-button:hover { background: #cc0000; }
+.block-feature .feature-list > li:nth-child(4) .feature-button { border-top: 2px solid #99cc00; }
+.block-feature .feature-list > li:nth-child(4) .feature-button:hover { background: #99cc00; }
+.block-feature .feature-item { position: relative; background-color: white; -webkit-box-shadow: 0 0.0625em 0.125em rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0.0625em 0.125em rgba(0, 0, 0, 0.2); box-shadow: 0 0.0625em 0.125em rgba(0, 0, 0, 0.2); }
+.block-feature .feature-description, .block-feature .feature-title { text-align: center; }
+.block-feature .feature-description { padding: 0 0.9375em 0.9375em; }
+.block-feature .feature-title { padding: 0.6em; font-size: 1.5625em; }
+
+#footer { background: #3F4944; color: #BBB; padding: 2.5em 0.625em 1.25em; }
+#footer .footer-nav-title { margin-bottom: 0.55556em; }
+#footer .footer-nav a { padding-bottom: 0.5em; color: inherit; }
+#footer .copyright { text-align: center; padding: 1.25em 0; }
+
 .demo-grid p { text-align: center; margin: 0; }
 .demo-grid .column, .demo-grid .columns { margin-bottom: 15px; padding-top: 10px; padding-bottom: 10px; background: #eee; text-align: center; }
 .demo-grid .column .column, .demo-grid .column .columns, .demo-grid .columns .column, .demo-grid .columns .columns { background: #ddd; margin-bottom: 0; }
 .demo-grid .column .column .column, .demo-grid .column .column .columns, .demo-grid .column .columns .column, .demo-grid .column .columns .columns, .demo-grid .columns .column .column, .demo-grid .columns .column .columns, .demo-grid .columns .columns .column, .demo-grid .columns .columns .columns { background: #ccc; margin-bottom: 0; }
 
 .demo-block [class*="block-grid"] li { margin-bottom: 15px; padding-top: 10px; padding-bottom: 10px; background: #eee; text-align: center; }
 
 .demo-em { -webkit-box-shadow: inset 0.0625em 0 0.0625em rgba(0, 0, 0, 0.2); -moz-box-shadow: inset 0.0625em 0 0.0625em rgba(0, 0, 0, 0.2); box-shadow: inset 0.0625em 0 0.0625em rgba(0, 0, 0, 0.2); padding: 0.625em 0.9375em 1.5625em; }
 
-html, body { height: 100%; background-color: #eee; }
-
-#main-wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -54px; max-width: 1440px; background: white; -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2); }
-
-#footer, #footer-push { margin: 0 auto; height: 54px; max-width: 1440px; }
-
 .ic { background: url('../img/icons-se85c66def2.png'); display: inline-block; }
 .ic.bulbasaur { background-position: 0 -100px; height: 100px; width: 100px; }
 .ic.charizard { background-position: 0 -500px; height: 200px; width: 200px; }
 .ic.charmander { background-position: 0 0; height: 100px; width: 100px; }
 .ic.charmeleon { background-position: 0 -350px; height: 150px; width: 150px; }
 .ic.ivysaur { background-position: 0 -200px; height: 150px; width: 150px; }
 .ic.squirtle { background-position: -100px -100px; height: 100px; width: 100px; }
 .ic.venusaur { background-position: 0 -700px; height: 200px; width: 200px; }
 @media only screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .ic { background: url('../img/icons@2x-sf605bc03f7.png'); background-size: 200px 900px; } }
-
-body { text-shadow: 2px 2px 3px yellow; }