Categories page is even better on Nexus 7 (and probably iPad mini)

This commit is contained in:
Neil Lalonde 2013-12-19 16:51:18 -05:00
parent 854d9c8fc6
commit 66616c9574
2 changed files with 30 additions and 17 deletions

View File

@ -41,17 +41,11 @@
} }
} }
@mixin portrait { @mixin mobile-portrait { @media only screen and (max-width : 320px) { @content; } }
@media only screen and (max-width : 320px) { @mixin not-mobile-portrait { @media only screen and (min-width : 321px) { @content; } }
@content; @mixin mobile-landscape { @media only screen and (min-width : 321px) and (max-width : 959px) { @content; } }
} @mixin not-tablet-landscape { @media only screen and (max-width : 959px) { @content; } }
} @mixin tablet-landscape { @media only screen and (min-width : 960px) { @content; } }
@mixin landscape {
@media only screen and (min-width : 321px) {
@content;
}
}
// CSS3 properties // CSS3 properties
// -------------------------------------------------- // --------------------------------------------------

View File

@ -50,7 +50,7 @@
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
tbody tr { > tbody > tr {
background-color: $white; background-color: $white;
&:nth-child(even) { &:nth-child(even) {
background-color: darken($white, 4%); background-color: darken($white, 4%);
@ -167,19 +167,23 @@
display: inline-block; display: inline-block;
margin-top: 1px; margin-top: 1px;
} }
.category-description {
margin-top: 8px;
}
.featured-users { .featured-users {
@include portrait { @include mobile-portrait {
margin-bottom: 10px; margin-bottom: 10px;
padding-top: 8px; padding-top: 8px;
clear: left; clear: left;
} }
@include landscape { @include not-mobile-portrait {
float: right; float: right;
} }
} }
.latest { .latest {
@include portrait { width: 150px; } @include mobile-portrait { width: 150px; }
@include landscape { width: 270px; } @include mobile-landscape { width: 270px; }
@include tablet-landscape { width: 450px; }
.featured-topic { .featured-topic {
margin: 8px 0; margin: 8px 0;
a.last-posted-at, a.last-posted-at:visited { a.last-posted-at, a.last-posted-at:visited {
@ -188,7 +192,22 @@
} }
} }
.stats { .stats {
display: none; @include not-tablet-landscape { display: none; }
@include tablet-landscape { min-width: 80px; }
}
td.stats {
.unit {
font-size: 11px;
}
}
table.categoryStats {
td {
padding: 2px;
vertical-align: bottom;
line-height: 17px;
&.value { text-align: right; }
&.unit { text-align: left; }
}
} }
} }