Permalink
Browse files

reworking responsive CSS with mobile first: public

  • Loading branch information...
arpancj committed Mar 15, 2012
1 parent b4ceb7f commit b17d599b481f6ee8e7c8636faff17e9a11460fd4
Showing with 671 additions and 672 deletions.
  1. +1 −1 2012/assets/application.css
  2. BIN 2012/assets/icons-small.png
  3. +2 −1 2012/sass/base.scss
  4. +0 −11 2012/sass/index.scss
  5. +25 −70 2012/sass/public.scss
  6. +643 −589 stock/2012-icons.ai

Large diffs are not rendered by default.

Oops, something went wrong.
View
Binary file not shown.
View
@@ -9,6 +9,7 @@
@import "compass/css3";
@import "compass/css3/pie";
+@import "compass/css3/transition";
@import "normalize";
$white: #fff;
@@ -24,7 +25,7 @@ $highlight-color: #ffa;
$total-cols: 12;
$col-width: 80px;
-$gutter-width: 2px;
+$gutter-width: 0px;
$side-gutter-width: 0px;
@font-face {
View
@@ -69,17 +69,6 @@ section#index{
}
}
-footer{
- @include full;
- padding-top: 100px;
- position: relative;
- text-align: center;
- color: rgba($white, 0.6);
- font-size: 11px;
-
- a{color: rgba($highlight-color, 0.7); text-decoration: none; border-bottom: dotted 1px;}
-}
-
@media screen and (max-width: 800px) {
}
View
@@ -15,11 +15,9 @@ a{color: $highlight-color; text-decoration: none; border-bottom: dotted 1px;}
header{
@include full;
position: relative;
- opacity: 1;
-
- padding-top: 30px;
+ padding-top: 50px;
height: 200px;
- background: transparent url('logo.png') no-repeat center 26px;
+ background: transparent url('logo.png') no-repeat center 46px;
overflow: hidden;
z-index: 10;
@@ -35,20 +33,17 @@ header{
p#twitter{
display: block;
position: absolute;
- top: 5px;
- right: 5px;
-
- height: 90px;
- width: 160px;
- background: transparent url('twitter.png') no-repeat center top;
- padding: 15px 20px;
+ background: $black;
+ top: 0;
+ width: 100%;
margin: 0;
-
+ padding: 4px 0;
+
color: $dark-gray;
font-size: 13px;
line-height: 18px;
text-align: center;
-
+
a{color: $primary-color;text-decoration: none;}
}
}
@@ -57,33 +52,25 @@ nav{
@include full;
@include clearfix;
position: relative;
- opacity: 1;
-
background: $white;
@include box-shadow(0 0 5px rgba(0,0,0,0.3));
- @include border-radius(10px);
- z-index: 1;
ul{
margin: 0; padding: 0;
-
li{display: inline;}
-
- li:first-child a{ @include border-radius(10px 0 0 10px);}
- li:last-child a{ @include border-radius(0 10px 10px 0);}
-
+
a{
display: block;
- @include columns(2);
+ @include columns(4);
+ @include transition-duration(2s);
text-align: center;
text-decoration: none;
color: $primary-color;
border: none;
- padding: 80px 0 16px 0;
-
- background: transparent url("icons.png") no-repeat top center;
+ padding: 50px 0 8px 0;
+ background: transparent url("icons-small.png") no-repeat top center;
&.register{background-position: center 0px;}
&.talks{background-position: center -100px;}
@@ -95,9 +82,6 @@ nav{
&.index{background-position: center -700px;}
&.sponsors{background-position: center -800px;}
- &.index{@include alpha;}
- &.directions{@include omega;}
-
body#page_index &.index,
body#page_talks &.talks,
body#page_schedule &.schedule,
@@ -107,31 +91,9 @@ nav{
background-color: $highlight-color;
}
}
-
-
}
}
-nav#secondary{
- @include full;
- @include clearfix;
- position: relative;
-
- ul{
- margin: 0; padding: 0;
- text-align: center;
-
- li{display: inline;}
-
- a{
- color: $white;
-
- }
-
- }
-
-}
-
footer{
@include full;
padding-top: 100px;
@@ -143,31 +105,24 @@ footer{
a{color: rgba($highlight-color, 0.7); text-decoration: none; border-bottom: dotted 1px;}
}
-@media screen and (max-width: 800px) {
-
-}
-
-@media screen and (max-width: 640px) {
+@media screen and (min-width: 640px) {
header{
- padding-top: 40px;
- background-position: center 40px;
+ padding-top: 4px;
+ background-position: center 0px;
p#twitter{
- background: $black;
- top: 0; right: 0; left: 0;
- padding: 4px;
- width: auto; height: auto;
+ top: 5px;
+ right: 5px;
+ left: auto;
+
+ height: 90px;
+ width: 160px;
+ background: transparent url('twitter.png') no-repeat center top;
+ padding: 15px 20px;
}
}
nav ul a{
- @include columns(4);
- &.schedule{@include omega;}
- &.directions{@include alpha;}
+ @include columns(2);
}
}
-
-@media screen and (max-width: 480px) {
- header{ background-image: url('logo-small.png'); height: 200px; }
- nav ul a{ background-image: url('icons-small.png'); padding: 60px 0 8px 0;}
-}
Oops, something went wrong.

0 comments on commit b17d599

Please sign in to comment.