Browse files

new web files

  • Loading branch information...
1 parent 01be48e commit aedb8c1f724d3371f17f026c96fdab72b9c1b5ff @zakdances committed Dec 31, 2013
Showing with 138 additions and 81 deletions.
  1. +121 −67 app/styles/main.scss
  2. +17 −14 app/views/main.html
View
188 app/styles/main.scss
@@ -3,9 +3,11 @@ $body-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
@import 'bourbon/app/assets/stylesheets/bourbon';
@import 'foundation/scss/foundation';
+@import 'foundation-icons/foundation_icons_general/sass/general_foundicons';
$light-grey: #e5e5e5;
-$green: #b6ff07;
+$light-green: #b6ff07;
+$green: #B6F600;
$dark-green: #78ff00;
// .browsehappy {
@@ -17,11 +19,13 @@ $dark-green: #78ff00;
/* Space out content a bit */
body {
- padding-top: 40px;
- padding-bottom: 0px;
- // border-top: 3px solid #e5e5e5;
+ height: 100%;
+ padding-top: 20px;
+ padding-bottom: 20px;
+ border-top: 4px solid #e5e5e5;
+ border-bottom: 2px solid $light-green;
background-color: rgba(#f7f7f7, 1);
- color: #bbb;
+ color: #aaa;
}
/* Everything but the jumbotron gets side spacing for mobile first views */
@@ -35,31 +39,30 @@ body {
/* Custom page header */
.container > header {
padding-top: 0px;
- border-top: 1px solid $green;
+ border-top: 2px solid #eee;
border-bottom: 0px solid $light-grey;
- position: relative;
- perspective: 700px;
- z-index: 1;
+ position: relative;
+ perspective: 700px;
+ z-index: 1;
/* Make the masthead heading the same height as the navigation */
h1 {
font-size: 60px;
- font-weight: 200;
+ font-weight: 100;
text-align: center;
position: relative;
- left: -190px;
- margin-top: 50px;
+ left: -150px;
+ margin-top: 30px;
margin-bottom: 0;
// line-height: 40px;
- padding-bottom: 30px;
+ padding-bottom: 20px;
z-index: 2;
background-position: 20px 10px;
background-repeat: no-repeat;
background-clip: no-clip;
- transform:rotateY(40deg);
- transform:rotateX(5deg);
+ transform: rotateX(2deg) rotateY(40deg);
}
@@ -78,27 +81,33 @@ body {
.reflection {
position: absolute;
- top: 65px;
- right: 42px;
+ top: 45px;
+ right: 80px;
transform:rotateY(-210deg);
- font-weight: 200;
+ font-weight: 100;
font-size: 60px;
color: rgba(#000, .1);
}
.light {
position: absolute;
- top: -175px;
- left: -80px;
+ // top: -165px;
+ // left: 0px;
+ bottom: -415px;
+ left: 31px;
width: 900px;
- height: 600px;
+ height: 900px;
z-index: 1;
- transform:rotateX(85deg);
+ transform:rotateX(92deg);
+ // @include background(
+ // linear-gradient(180deg, rgba(#fff, 0), rgba(#fff, 0)),
+ // radial-gradient(#fff 10%, #ddd 50%, rgba(#fff, 0) 70%)
+ // );
@include background(
linear-gradient(180deg, rgba(#fff, 0), rgba(#fff, 0)),
- radial-gradient(#fff 10%, #ddd 50%, rgba(#fff, 0) 70%)
+ radial-gradient(#fff 10%, #ddd 20%, rgba(#fff, 0) 60%)
);
}
}
@@ -152,26 +161,28 @@ body {
// text-align: center;
position: relative;
// border-top: 1px solid #78ff00;
- border-bottom: 1px solid $green;
+ border-bottom: 0px solid $light-grey;
// @extend .top-border;
// padding-top: 0px;
// font-size: 32px;
- &:before {
+ &:after {
content: "";
+ width: 100%;
+ height: 5px;
display: block;
position: absolute;
- top: 2px;
+ bottom: -4px;
left: 0;
- border-top: 5px solid $dark-green;
+ border-top: 0px solid $light-green;
}
h2 {
margin-top: 0;
- // margin-bottom: 0.3rem;
+ margin-bottom: 0.1rem;
font-weight: 600;
- font-size: 38px;
- color: $green;
+ font-size: 20px;
+ color: #444;
position: relative;
z-index: 2;
}
@@ -184,20 +195,48 @@ body {
.links {
- margin-top: 35px;
+ margin-top: 1.0rem;
+ padding-top: 0px;
position: relative;
z-index: 2;
// text-align: center;
- // border-bottom: 1px solid #e5e5e5;
+ // border-top: 1px solid #e5e5e5;
a {
- // margin-top: 0px;
- font-size: 32px;
- font-weight: 600;
+ position: relative;
+ padding: 6px 12px 4px 5px;
+ // @extend h2;
+
+ font-size: 28px;
+ font-weight: 900;
+ letter-spacing: -1px;
// text-transform: uppercase;
- color: #ddd;
+ color: $green;
+
+ border-radius: 0px 0px 0 15px;
// border-top: 2px solid #b6ff07;
- // border-bottom: 1px solid #b6ff07;
+ border: 1px solid $green;
+ border-top: 1px solid $green;
+ border-left: 1px solid $green;
+ border-right: 0px solid $green;
+
+ &:before {
+ content: "";
+ width: 100%;
+ left: 0;
+ top: 0;
+ position: absolute;
+ border-top: 0px solid rgba($dark-green, .2);
+ }
+ // background-color: #eee;
+ }
+ a + a {
+ // margin-left: 0px;
+ // margin-right: 15px;
+ // padding-right: 5px;
+ border-left: 1px solid $green;
+ border-right: 1px solid $green;
+ border-radius: 0 6px 6px 0;
}
}
@@ -217,9 +256,9 @@ body {
a {
content:attr(data-text);
- margin-right: 10px;
- margin-top: 0px;
- margin-bottom: 5px;
+ // margin-right: 10px;
+ // margin-top: 0px;
+ // margin-bottom: 5px;
position: relative;
font-weight: 100;
@@ -243,11 +282,11 @@ a {
/* Supporting marketing content */
.marketing {
- padding-top: 12px;
+ padding-top: 28px;
padding-left: 0px;
- margin: 18px 0;
+ margin: 30px 0;
font-size: 10px;
- border-top: 0px solid rgba($light-grey, 1);
+ // border-top: 1px solid #b6ff07;
// &:before {
// content: "";
@@ -261,38 +300,38 @@ a {
}
}
-h4 {
- font-size: 32px;
- color: $green;
-}
+// h4 {
+// font-size: 32px;
+// color: $green;
+// }
.marketing p + h4 {
// margin-top: 0px;
// margin-bottom: 0.2rem;
- font-size: 23px;
+ font-size: 25px;
font-weight: 400;
// line-height: 3.4rem;
color: #111;
}
p {
- font-size: 26px;
+ font-size: 23px;
font-weight: 100;
// line-height: 1.8;
- margin-bottom: 0.7rem;
+ // margin-bottom: 0.7rem;
}
/* Custom page footer */
.footer {
display: flex;
- padding-top: 0px;
- padding-bottom: 10px;
+ padding-top: 20px;
+ padding-bottom: 20px;
position: relative;
border-top: 1px solid $green;
- border-bottom: 3px solid $green;
+ border-bottom: 1px solid $green;
background-clip: no-clip;
-
+ vertical-align: center;
color: #777;
// &:before {
@@ -307,27 +346,42 @@ p {
// }
h3 {
- margin-right: 7px;
- // font-size: 20px;
- font-weight: 600;
+ padding: 0rem;
+ margin: 0rem;
+ margin-right: 15px;
+ font-size: 20px;
+ font-weight: 100;
+ line-height: 100%;
color: $green;
}
.content {
- padding-top: 4px;
+ // padding-top: 0px;
+ height: 100%;
+ line-height: 100%;
+ vertical-align: center;
+ display: flex;
+ h3 {
+ margin-top: 0rem;
+ margin-bottom: 0rem;
+ font-weight: 900;
+ line-height: 100%;
+ color: #666;
+ }
p {
- font-size: 28px;
+ font-size: 20px;
font-weight: 900;
color: #777;
margin: 0;
padding: 0;
- line-height: 2.5rem;
+ line-height: 100%;
// flex: 1;
}
- p + p {
- color: #999;
- // font-size: 24px;
- font-weight: 100;
- }
+ // p + p {
+ // line-height: 1rem;
+ // color: #999;
+ // // font-size: 24px;
+ // font-weight: 100;
+ // }
}
}
@@ -345,8 +399,8 @@ p {
// .links,
// .footer,
.marketing {
- // padding-left: 45px;
- padding-right: 45px;
+ padding-left: 55px;
+ padding-right: 0px;
// color: #b6ff07;
&:after {
View
31 app/views/main.html
@@ -15,14 +15,10 @@ <h1 class="text-muted" data-text="CodeRorrim">CodeRorrim</h1>
</div>
<div class="links">
- <a class="lead" href="https://github.com/zakdances/ParseParty" data-text="Clone from GitHub">Clone on GitHub <span class="green">&#10149;</span></a>
- <a class="lead" href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=zakdances%40gmail%2ecom&lc=US&item_name=CodeRorrim%20development&currency_code=USD&bn=PP%2dDonationsBF%3abtn_donate_SM%2egif%3aNonHosted" data-text="Donate with PayPal">Donate with PayPal <span class="green">&#10149;</span></a>
-
-<!-- <span class="small">forkme</span> <span class="green">&#10149;</span>
- <span class="small">/gittip/stripe</span> -->
+ <a class="lead" href="https://github.com/zakdances/ParseParty" data-text="Clone from GitHub">Clone on GitHub</a><a class="lead" href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=zakdances%40gmail%2ecom&lc=US&item_name=CodeRorrim%20development&currency_code=USD&bn=PP%2dDonationsBF%3abtn_donate_SM%2egif%3aNonHosted" data-text="Donate with PayPal">Donate with PayPal</a>
</div>
-<!-- <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
+<!-- <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"> <span class="green">&#10149;</span> <span class="green">&#10149;</span>
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----
">
@@ -33,10 +29,16 @@ <h1 class="text-muted" data-text="CodeRorrim">CodeRorrim</h1>
<!-- <h4>What am I?</h4> -->
<div class="row marketing">
-
- <p>
- CodeRorrim is a multi-language parser written in Objective-C. It parses, syntax highlights, and tokenizes. It's powered by <a href="https://codemirror.net">CodeMirror.</a>
- </p>
+ <div class="row">
+ <div class="column">
+ <div class="foundicon-idea"></div>
+ </div>
+ <div class="column">
+ <p>
+ CodeRorrim is a multi-language parser written in Objective-C. It parses, syntax highlights, and tokenizes. It's powered by <a href="https://codemirror.net">CodeMirror.</a>
+ </p>
+ </div>
+ </div>
<h4>Many languages supported.</h4>
<p>
@@ -62,9 +64,10 @@ <h1 class="text-muted" data-text="CodeRorrim">CodeRorrim</h1>
<footer class="footer">
<h3>Made by</h3>
<div class="content">
- <p>zakdances</p>
- <p><a href="https://github.com/zakdances/ParseParty">github</a></p>
- <p><a href="https://twitter.com/zakdances">twitter</a></p>
- <p><a href="https://heroku.com/zaksblog">blog</a></p>
+ <h3>zakdances</h3>
+ <p><a href="https://github.com/zakdances/ParseParty">github</a></p>
+ <p><a href="https://twitter.com/zakdances">twitter</a></p>
+ <p><a href="https://heroku.com/zaksblog">blog</a></p>
</div>
</footer>
+<div></div>

0 comments on commit aedb8c1

Please sign in to comment.