Permalink
Browse files

Basic styles built out

  • Loading branch information...
chambaz committed Oct 3, 2013
1 parent 9ccf717 commit afe90f3e21b28d2d219b08014790388ef61336b2
Showing with 204 additions and 0 deletions.
  1. +48 −0 css/gumby.css
  2. +156 −0 sass/_custom.scss
View
@@ -2692,3 +2692,51 @@ table.rounded thead th, table.rounded thead td, table.rounded caption + tbody tr
.parallax { background-attachment: fixed !important; }
.oldie .parallax, .ie9 .parallax { background-attachment: static !important; }
+
+h1, h2, .btn a, .btn input, .btn button, .navbar li a { text-transform: uppercase; }
+
+h1.xlarge { font-weight: 900; white-space: nowrap; }
+@media only screen and (max-width: 768px) { h1.xlarge { font-size: 78px; font-size: 4.875rem; } }
+h1.xlarge span { display: block; font-weight: 400; line-height: 0; font-size: 24px; font-size: 1.5rem; }
+
+h3.xlarge, p.xlarge { font-weight: 300; font-size: 36px; font-size: 2.25rem; }
+
+sup { position: relative; top: -10px; font-size: 23px; font-size: 1.4375rem; }
+
+@media only screen and (max-width: 768px) { .tablet-center, .tablet-center p { text-align: center; } }
+
+.meta-nav li { display: inline; margin-left: 20px; font-size: 11px; font-size: 0.6875rem; }
+
+.navbar { margin-bottom: 0; padding: 10px 0; }
+.navbar .field i.icon-search { position: absolute; top: 1px; right: 3%; }
+.navbar .logo a { padding-left: 0; }
+
+#masthead { background: url(../img/bg_masthead.jpg) no-repeat black; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
+#masthead h1, #masthead p { color: #fff; }
+#masthead ul li { display: block; float: left; margin: 10px 10px 0 0; }
+#masthead .valign { height: 400px; }
+#masthead .features p { line-height: 23px; font-size: 23px; font-size: 1.4375rem; }
+
+#highlights { padding-top: 40px; padding-bottom: 20px; }
+#highlights figure figcaption { font-size: 23px; font-size: 1.4375rem; }
+@media only screen and (max-width: 768px) { #highlights figure { margin-bottom: 50px; } }
+
+#main { padding-top: 30px; }
+#main > article.row { margin-top: 60px; margin-bottom: 60px; }
+
+#fishfingers { border-bottom: solid 1px #ededed; line-height: 100%; }
+#fishfingers .copy { padding-top: 10%; }
+
+@media only screen and (max-width: 768px) { #extras .columns { margin-bottom: 60px; } }
+
+#cta { border-top: solid 1px #eeeeee; border-bottom: solid 1px #eeeeee; padding-top: 30px; padding-bottom: 20px; margin-top: 40px; margin-bottom: 40px; }
+@media only screen and (max-width: 768px) { #cta, #cta p { text-align: center; } }
+#cta .btn { margin-top: 10px; }
+
+@media only screen and (max-width: 768px) { #foot-links .two.columns { width: 25% !important; float: left; margin-bottom: 30px; } }
+#foot-links ul { margin-bottom: 20px; display: inline-block; float: left; padding-left: 0.90909%; padding-right: 0.90909%; }
+@media only screen and (min-width: 320px) { #foot-links ul { width: 25%; } }
+@media only screen and (min-width: 768px) { #foot-links ul { width: 12.5%; } }
+@media only screen and (min-width: 1100px) { #foot-links ul { width: 12.5%; } }
+#foot-links ul li { font-size: 11px; font-size: 0.6875rem; }
+#foot-links ul li:first-child a { font-weight: bold; }
View
@@ -1 +1,157 @@
// Your custom SCSS should be written here...
+
+// typography
+h1, h2, .btn a, .btn input, .btn button, .navbar li a {
+ text-transform: uppercase;
+}
+
+h1.xlarge {
+ font-weight: $font-weight-xbold;
+ white-space: nowrap;
+ @include respond(portrait-tablets) {
+ @include font-size($xxxxlarge);
+ }
+ span {
+ display: block;
+ font-weight: $font-weight-regular;
+ line-height: 0;
+ @include font-size($large);
+ }
+}
+
+h3.xlarge, p.xlarge {
+ font-weight: $font-weight-light;
+ @include font-size($xlarge);
+}
+
+sup {
+ position: relative;
+ top: -10px;
+ @include font-size($med);
+}
+
+// helpers
+.tablet-center {
+ &, p {
+ @include respond(portrait-tablets) {
+ text-align: center;
+ }
+ }
+}
+
+// meta nav
+.meta-nav li {
+ display: inline;
+ margin-left: 20px;
+ @include font-size(ms(-1));
+}
+
+// primary nav
+.navbar {
+ margin-bottom: 0;
+ padding: 10px 0;
+ .field i.icon-search {
+ position: absolute;
+ top: 1px;
+ right: 3%;
+ }
+ .logo a {
+ padding-left: 0;
+ }
+}
+
+// masthead
+#masthead {
+ background: url(../img/bg_masthead.jpg) no-repeat #000;
+ @include background-size(cover);
+ h1, p {
+ color: #fff;
+ }
+ ul li {
+ display: block;
+ float: left;
+ margin: 10px 10px 0 0;
+ }
+ .valign {
+ height: 400px;
+ }
+ .features p {
+ line-height: $med;
+ @include font-size($med);
+ }
+}
+
+// highlights
+#highlights {
+ padding-top: 40px;
+ padding-bottom: 20px;
+ figure {
+ figcaption {
+ @include font-size($med);
+ }
+ @include respond(portrait-tablets) {
+ margin-bottom: 50px;
+ }
+ }
+}
+
+// main content
+#main {
+ padding-top: 30px;
+ & > article.row {
+ margin-top: 60px;
+ margin-bottom: 60px;
+ }
+}
+
+#fishfingers {
+ border-bottom: solid 1px #ededed;
+ line-height: 100%;
+ .copy {
+ padding-top: 10%;
+ }
+}
+
+#extras .columns {
+ @include respond(portrait-tablets) {
+ margin-bottom: 60px;
+ }
+}
+
+#cta {
+ border-top: solid 1px #eeeeee;
+ border-bottom: solid 1px #eeeeee;
+ padding-top: 30px;
+ padding-bottom: 20px;
+ margin-top: 40px;
+ margin-bottom: 40px;
+ @include respond(portrait-tablets) {
+ &, p {
+ text-align: center;
+ }
+ }
+ .btn {
+ margin-top: 10px;
+ }
+}
+
+// footer
+#foot-links {
+ .two.columns {
+ @include respond(portrait-tablets) {
+ width: 25% !important;
+ float: left;
+ margin-bottom: 30px;
+ }
+ }
+ ul {
+ margin-bottom: 20px;
+ @include fancytiles(8,8,4);
+ li {
+ @include font-size($small);
+ &:first-child a {
+ font-weight: bold;
+ }
+ }
+ }
+}

0 comments on commit afe90f3

Please sign in to comment.