UX: Reducing number of font sizes used in mobile view

This commit is contained in:
Kris 2017-12-19 17:39:17 -05:00
parent b3fda0ea86
commit d90fc415a1
8 changed files with 18 additions and 32 deletions

View File

@ -8,5 +8,5 @@
margin-bottom: -3px; margin-bottom: -3px;
margin-top: -5px; margin-top: -5px;
padding: 15px; padding: 15px;
font-size: 1.1em; font-size: 1em;
} }

View File

@ -31,7 +31,6 @@
} }
.user-stat { .user-stat {
margin-left: 55px; margin-left: 55px;
font-size: .929em;
.value { .value {
font-weight: bold; font-weight: bold;

View File

@ -4,7 +4,7 @@
@media only screen and (max-width: 320px) { @media only screen and (max-width: 320px) {
#site-text-logo { #site-text-logo {
font-size: 18px; font-size: 1.286em;
} }
} }

View File

@ -40,7 +40,6 @@ a#forgot-password-link {clear: left; float: left; }
.login-modal, .create-account { .login-modal, .create-account {
.btn-primary { .btn-primary {
margin-bottom: 10px; margin-bottom: 10px;
font-size: 15;
float: left; float: left;
} }
} }

View File

@ -64,7 +64,7 @@
} }
} }
.close { .close {
font-size: 1.714em; font-size: 1.857em;
padding: 10px 15px 5px 5px; padding: 10px 15px 5px 5px;
color: $primary; color: $primary;
} }
@ -106,7 +106,7 @@
.custom-message-length { .custom-message-length {
margin: -4px 0 10px 20px; margin: -4px 0 10px 20px;
color: dark-light-choose($primary-high, $secondary-low); color: dark-light-choose($primary-high, $secondary-low);
font-size: 85%; font-size: .857em;
} }
.flag-message { .flag-message {

View File

@ -85,7 +85,7 @@
.badge-notification, .category-topic-link td.num .badge-notification { .badge-notification, .category-topic-link td.num .badge-notification {
position: relative; position: relative;
top: -1px; top: -1px;
font-size: 1.071em; font-size: 1em;
padding: 4px 6px 3px 6px; padding: 4px 6px 3px 6px;
i {color: $secondary;} i {color: $secondary;}
@ -260,15 +260,11 @@ tr.category-topic-link {
th .badge-category { th .badge-category {
margin: 0; margin: 0;
font-size: 110%;
} }
.category-topic-link { .category-topic-link {
.num { .num {
white-space: nowrap; white-space: nowrap;
.number {
font-size: 1.071em;
}
} }
.topic-excerpt { .topic-excerpt {
width: 110%; width: 110%;
@ -438,7 +434,7 @@ td .main-link {
} }
.topic-list { .topic-list {
.posts-map { .posts-map {
font-size: 1.15em; font-size: 1.143em;
} }
// so the topic excerpt is full width // so the topic excerpt is full width
// as the containing div is 80% // as the containing div is 80%

View File

@ -33,7 +33,6 @@ span.badge-posts {
} }
button { button {
border: none; border: none;
font-size: 1.214em;
padding: 8px 10px; padding: 8px 10px;
vertical-align: top; vertical-align: top;
background: transparent; background: transparent;
@ -135,12 +134,6 @@ a.reply-to-tab {
color: dark-light-choose($primary-medium, $secondary-medium); color: dark-light-choose($primary-medium, $secondary-medium);
} }
a.star {
display: inline-block;
float: left;
font-size: 1.3em;
}
.topic-post .boxed .contents { .topic-post .boxed .contents {
clear: both; clear: both;
} }
@ -196,7 +189,7 @@ a.star {
padding: 4px 5px 2px 5px; padding: 4px 5px 2px 5px;
text-align: center; text-align: center;
font-weight: normal; font-weight: normal;
font-size: .786em; font-size: .857em;
line-height: 1; line-height: 1;
} }
} }
@ -225,7 +218,7 @@ a.star {
} }
.number, i { .number, i {
color: dark-light-choose($primary-high, $secondary-low); color: dark-light-choose($primary-high, $secondary-low);
font-size: 110%; font-size: 1.143em;
} }
.avatar + a { .avatar + a {
@ -318,13 +311,11 @@ a.star {
} }
a.badge-category, a.badge-category-parent { a.badge-category, a.badge-category-parent {
font-size: 0.714em; font-size: 0.857em;
vertical-align: top; vertical-align: top;
} }
} }
span.post-count { span.post-count {
background: $primary; background: $primary;
color: $secondary; color: $secondary;
@ -452,7 +443,7 @@ button.select-post {
} }
.deleted-user-avatar { .deleted-user-avatar {
font-size: 2.571em; font-size: 2.286em;
} }
span.btn-text {display: none;} span.btn-text {display: none;}
@ -490,7 +481,6 @@ span.highlighted {
} }
.post-info { .post-info {
float: right; float: right;
font-size: 0.929em;
margin: 4px 10px 0 0; margin: 4px 10px 0 0;
.edits { margin-right: 5px; } .edits { margin-right: 5px; }
} }

View File

@ -17,8 +17,8 @@
//margin-bottom: 20px; //margin-bottom: 20px;
margin: 0 60px 10px 0; margin: 0 60px 10px 0;
h1 { h1 {
font-size: 1.5em; font-size: 1.429em;
line-height: 1.25em; line-height: 1.25;
a { a {
color: $primary; color: $primary;
vertical-align: middle; vertical-align: middle;
@ -155,8 +155,8 @@
width: 90%; width: 90%;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
font-size: 1.714em; font-size: 1.857em;
line-height: 1.1em; line-height: 1.25;
.topic-retry { .topic-retry {
display: block; display: block;
@ -207,8 +207,10 @@ sup sup, sub sup, sup sub, sub sub { top: 0; }
// make mobile timeline top and bottom dates easier to select // make mobile timeline top and bottom dates easier to select
.topic-timeline { .topic-timeline {
.start-date { font-size: 110%; padding: 5px; } .start-date, .now-date {
.now-date { font-size: 110%; padding: 5px; } font-size: 1.143em;
padding: 5px;
}
} }
.edit-topic-timer-modal { .edit-topic-timer-modal {