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 {
@media only screen and (max-width : 320px) {
@content;
}
}
@mixin landscape {
@media only screen and (min-width : 321px) {
@content;
}
}
@mixin mobile-portrait { @media only screen and (max-width : 320px) { @content; } }
@mixin not-mobile-portrait { @media only screen and (min-width : 321px) { @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; } }
// CSS3 properties
// --------------------------------------------------

View File

@ -50,7 +50,7 @@
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
tbody tr {
> tbody > tr {
background-color: $white;
&:nth-child(even) {
background-color: darken($white, 4%);
@ -167,19 +167,23 @@
display: inline-block;
margin-top: 1px;
}
.category-description {
margin-top: 8px;
}
.featured-users {
@include portrait {
@include mobile-portrait {
margin-bottom: 10px;
padding-top: 8px;
clear: left;
}
@include landscape {
@include not-mobile-portrait {
float: right;
}
}
.latest {
@include portrait { width: 150px; }
@include landscape { width: 270px; }
@include mobile-portrait { width: 150px; }
@include mobile-landscape { width: 270px; }
@include tablet-landscape { width: 450px; }
.featured-topic {
margin: 8px 0;
a.last-posted-at, a.last-posted-at:visited {
@ -188,7 +192,22 @@
}
}
.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; }
}
}
}