Responsify-ay-ay-ay

This commit is contained in:
perryharlock
2013-09-19 14:53:07 +01:00
parent ea295a96b1
commit 5ff19890b8
5 changed files with 118 additions and 59 deletions

View File

@@ -1,15 +1,25 @@
/* Media queries */
@media (max-width:991px) {
h1 {
font-size:32px;
.h1, h1 {
font-size:floor(@font-size-base * 2.15); // ~32px;
}
h2 {
font-size:28px;
.h2, h2 {
font-size:floor(@font-size-base * 1.9); // ~28px;
}
.task-header .h4 {
font-size:floor(@font-size-base * 1.15); // ~17px;
}
.header {
margin-bottom:2rem;
padding-bottom:1rem;
}
.btn-full-width {
margin-top:0;
}
.ruled {
padding-bottom:1.5rem;
margin-bottom:2rem;
}
.task-header .run-details {
text-align:left;
}
@@ -22,34 +32,29 @@
margin-bottom:3px;
}
.date {
margin-top:2px;
margin-top:10px;
float:right;
font-size:;
}
.action-buttons button {
width:49%;
margin-right:2%;
float:left;
}
.action-buttons button:last-child {
margin-right:0;
.other-tasks {
.sr-only();
}
}
@media (max-width:640px) {
body {
font-size:14px;
}
h1 {
font-size:26px;
.h1, h1 {
font-size:floor(@font-size-base * 1.75); // ~26px;
}
h2 {
font-size:24px;
.h2, h2 {
font-size:floor(@font-size-base * 1.6); // ~24px;
}
.action-buttons button {
width:100%;
margin-right:0;
float:none;
.task-header .h4 {
font-size:floor(@font-size-base * 1.1); // ~16px;
}
.label, .badge {
font-size:11px;
font-size:floor(@font-size-base * 0.75); // ~11px;
padding:7px;
}
.rule-name .badge {
@@ -58,12 +63,66 @@
.graph {
margin-bottom:3rem;
}
.task-stats li a {
padding:11px 0;
font-size:ceil(@font-size-base * 1.25); // ~18px
line-height:1.1;
}
.btn-full-width {
margin-top:8px;
margin:0;
}
.delete-button {
font-size:floor(@font-size-base * 1.35); // ~20px;
top:10px;
right:25px;
}
.standards-lists {
.tooltip {
&.top .tooltip-inner {
max-width:400px;
}
}
}
.tasks-list {
li {
margin-bottom:20px;
}
}
}
@media (max-width:480px) {
.graph {
height:200px;
margin-bottom:1.5rem;
}
.series-checkboxes li {
font-size:floor(@font-size-base * 0.8); // ~12px;
}
}
@media (max-width:360px) {
.task-stats li a {
padding:8px 0;
}
.delete-button {
display:block !important;
font-size:floor(@font-size-base * 1); // ~15px;
top:5px;
right:20px;
.opacity(0.7)
}
.standards-lists {
.checkbox {
font-size:floor(@font-size-base * 0.9); // ~13px;
}
.tooltip {
&.top .tooltip-inner {
max-width:260px;
}
}
}
.task-stats li a {
padding:11px 0;
font-size:floor(@font-size-base * 1.1); // ~16px;
line-height:1.3;
}
}