UX: Removing px font defintions and replacing with em

This commit is contained in:
Kris 2017-12-18 15:49:11 -05:00
parent 70b6030c74
commit 2d9d43ed1a
24 changed files with 42 additions and 42 deletions

View File

@ -47,11 +47,11 @@ body {
} }
big { big {
font-size: 28px; font-size: 2em;
} }
small { small {
font-size: 9px; font-size: .643em;
} }
//setting a static limit on big and small prevents nesting abuse //setting a static limit on big and small prevents nesting abuse

View File

@ -3,7 +3,7 @@
padding-top: 2em; padding-top: 2em;
.face { .face {
font-size: 60px; font-size: 4.286em;
height: 60px; height: 60px;
} }
.reason { .reason {
@ -12,7 +12,7 @@
} }
.url { .url {
font-style: italic; font-style: italic;
font-size: 11px; font-size: .786em;
} }
.desc { .desc {
margin-top: 16px; margin-top: 16px;

View File

@ -90,7 +90,7 @@
b.topics-count { b.topics-count {
color: dark-light-choose($primary-medium, $secondary-medium); color: dark-light-choose($primary-medium, $secondary-medium);
font-weight: normal; font-weight: normal;
font-size: 11px; font-size: .786em;
} }
span.badge-category { span.badge-category {

View File

@ -180,7 +180,7 @@
color: rgb(255,255,255); color: rgb(255,255,255);
position: absolute; position: absolute;
top: 40%; top: 40%;
font-size: 36px; font-size: 2.571em;
text-align: center; text-align: center;
line-height: 38px; line-height: 38px;
margin-left: auto; margin-left: auto;
@ -197,7 +197,7 @@
.jsfu-separator { .jsfu-separator {
vertical-align: middle; vertical-align: middle;
display: table-cell; display: table-cell;
font-size: 36px; font-size: 2.571em;
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
} }
@ -225,7 +225,7 @@
// password reset modal // password reset modal
.modal-body.forgot-password-modal p { .modal-body.forgot-password-modal p {
font-size: 14px; font-size: 1em;
} }
} }

View File

@ -270,7 +270,7 @@ pre.onebox code ol.lines li:before {
color:#AFAFAF; color:#AFAFAF;
text-align:right; text-align:right;
padding-right:5px; padding-right:5px;
font-size:12px; font-size:.857em;
line-height: 1.9em; line-height: 1.9em;
content: counter(li-counter); content: counter(li-counter);
counter-increment: li-counter; counter-increment: li-counter;
@ -331,7 +331,7 @@ pre.onebox code {
.onebox-body .build_status .onebox-body .build_status
{ {
padding: 2px; padding: 2px;
font-size:12px; font-size:.857em;
} }
.onebox-body .status_tag.open { .onebox-body .status_tag.open {
@ -379,7 +379,7 @@ aside.onebox.twitterstatus .onebox-body {
z-index: 935; z-index: 935;
height: 30px; height: 30px;
overflow: hidden; overflow: hidden;
font-size: 12px; font-size: .857em;
color: #fff; color: #fff;
background-color: rgba(0, 0, 0, 0.6); background-color: rgba(0, 0, 0, 0.6);
text-overflow: ellipsis; text-overflow: ellipsis;
@ -395,7 +395,7 @@ aside.onebox.twitterstatus .onebox-body {
.album-title { .album-title {
width: 100%; width: 100%;
font-size: 13px; font-size: 1.083em;
line-height: 30px; line-height: 30px;
color: #ccc; color: #ccc;
text-decoration: none; text-decoration: none;

View File

@ -11,7 +11,7 @@
.like-count { .like-count {
color: dark-light-choose($primary-medium, $secondary-medium); color: dark-light-choose($primary-medium, $secondary-medium);
.fa { color: $love; font-size: 12px; } .fa { color: $love; font-size: .857em; }
} }
.badge-wrapper span.badge-category { .badge-wrapper span.badge-category {
@ -80,7 +80,7 @@
} }
a { a {
margin-right: 15px; margin-right: 15px;
font-size: 12px; font-size: .857em;
padding: 2px 5px; padding: 2px 5px;
} }
} }

View File

@ -31,7 +31,7 @@
color: $success; color: $success;
opacity: 1; opacity: 1;
transition: opacity 0.25s; transition: opacity 0.25s;
font-size: 13px; font-size: .929em;
&:not(.success) { &:not(.success) {
opacity: 0; opacity: 0;
} }

View File

@ -35,8 +35,8 @@
.bullet + .topic-header-extra { .bullet + .topic-header-extra {
display: block; display: block;
line-height: 15px; line-height: 15px;
font-size: 12px; font-size: .857em;
.list-tags { font-size: 12px; } .list-tags { font-size: 1em; }
} }
.bar + .topic-header-extra { .bar + .topic-header-extra {

View File

@ -34,7 +34,7 @@
} }
} }
.fa { .fa {
font-size: 11px; font-size: .786em;
margin-left: 3px; margin-left: 3px;
color: dark-light-choose($primary-medium, $secondary-medium); color: dark-light-choose($primary-medium, $secondary-medium);
} }
@ -204,7 +204,7 @@ aside.quote {
right: -4px; right: -4px;
} }
.fa { .fa {
font-size: 24px; font-size: 1.714em;
} }
} }
.topic-map .poster .avatar-flair { .topic-map .poster .avatar-flair {
@ -222,7 +222,7 @@ aside.quote {
right: 0; right: 0;
} }
.fa { .fa {
font-size: 14px; font-size: 1em;
} }
} }
.topic-avatar .poster-avatar-extra { .topic-avatar .poster-avatar-extra {
@ -351,7 +351,7 @@ blockquote > *:last-child {
border-top: none; border-top: none;
float: left; float: left;
i { i {
font-size: 35px; font-size: 2.500em;
width: 45px; width: 45px;
text-align: center; text-align: center;
color: dark-light-choose($primary-low-mid, $secondary-high); color: dark-light-choose($primary-low-mid, $secondary-high);
@ -378,7 +378,7 @@ blockquote > *:last-child {
text-transform: none; text-transform: none;
margin: 15px 0px 5px; margin: 15px 0px 5px;
font-weight: normal; font-weight: normal;
font-size: 14px; font-size: 1.11em;
p { p {
margin: 5px 0; margin: 5px 0;
} }
@ -479,7 +479,7 @@ a.mention, a.mention-group {
.broken-image, .large-image { .broken-image, .large-image {
color: dark-light-choose($primary-low-mid, $secondary-high); color: dark-light-choose($primary-low-mid, $secondary-high);
border: 1px solid $primary-low; border: 1px solid $primary-low;
font-size: 32px; font-size: 2.286em;
padding: 16px; padding: 16px;
} }

View File

@ -20,10 +20,10 @@ div.tagsinput span.tag {
margin-right: 5px; margin-right: 5px;
margin-bottom:5px; margin-bottom:5px;
font-family: helvetica; font-family: helvetica;
font-size:13px; font-size: .929em;
} }
div.tagsinput span.tag a { font-weight: bold; color: #82ad2b; text-decoration:none; font-size: 11px; } div.tagsinput span.tag a { font-weight: bold; color: #82ad2b; text-decoration:none; font-size: .786em; }
div.tagsinput input { div.tagsinput input {
width:80px; width:80px;
font-family: helvetica; font-family: helvetica;

View File

@ -60,7 +60,7 @@
display: inline-flex; display: inline-flex;
align-items: baseline; align-items: baseline;
margin-right: 5px; margin-right: 5px;
font-size: 12px; font-size: .857em;
line-height: 15px; line-height: 15px;
span.badge-category { span.badge-category {
@ -251,7 +251,7 @@
padding: 4px 5px 2px 5px; padding: 4px 5px 2px 5px;
vertical-align: middle; vertical-align: middle;
color: $secondary; color: $secondary;
font-size: 11px; font-size: .786em;
line-height: 1; line-height: 1;
text-align: center; text-align: center;
background-color: dark-light-choose($primary-low-mid, $secondary-low); background-color: dark-light-choose($primary-low-mid, $secondary-low);

View File

@ -127,7 +127,7 @@
&:before { &:before {
margin-right: 9px; margin-right: 9px;
font-family: FontAwesome; font-family: FontAwesome;
font-size: 17px; font-size: 1.214em;
} }
&.google, &.google_oauth2 { &.google, &.google_oauth2 {
background: $google; background: $google;

View File

@ -13,7 +13,7 @@
float: left; float: left;
width: 70%; width: 70%;
padding-left: 5px; padding-left: 5px;
font-size: 13px; font-size: .929em;
.name-line { .name-line {
white-space: nowrap; white-space: nowrap;

View File

@ -36,7 +36,7 @@
display: block; display: block;
float: right; float: right;
color: lighten($primary, 40%); color: lighten($primary, 40%);
font-size: 11px; font-size: .786em;
} }
.delete-info i { .delete-info i {

View File

@ -21,7 +21,7 @@
} }
.topic-count { .topic-count {
font-size: 11px; font-size: .786em;
color: $primary; color: $primary;
} }

View File

@ -5,7 +5,7 @@
.future-date-input-selector-datetime { .future-date-input-selector-datetime {
color: lighten($primary, 40%); color: lighten($primary, 40%);
font-size: 13px; font-size: .929em;
} }
.future-date-input-selector-icons { .future-date-input-selector-icons {

View File

@ -10,7 +10,7 @@
display: inline-block; display: inline-block;
} }
.topic-count { .topic-count {
font-size: 11px; font-size: .786em;
color: $primary; color: $primary;
display: inline-block; display: inline-block;
} }

View File

@ -159,7 +159,7 @@
.d-icon { .d-icon {
color: $primary-medium; color: $primary-medium;
cursor: pointer; cursor: pointer;
font-size: 14px; font-size: 1em;
&:hover { &:hover {
color: $primary; color: $primary;

View File

@ -34,7 +34,7 @@ and (max-width : 570px) {
color: dark-light-choose($primary-high, $secondary-medium); color: dark-light-choose($primary-high, $secondary-medium);
display: block; display: block;
word-wrap: break-word; word-wrap: break-word;
font-size: 11px; font-size: .786em;
line-height: 1.3em; line-height: 1.3em;
.search-highlight { .search-highlight {
color: dark-light-choose($primary-high, $secondary-low); color: dark-light-choose($primary-high, $secondary-low);

View File

@ -136,13 +136,13 @@
width: auto; width: auto;
color: dark-light-choose($primary-medium, $secondary-medium); color: dark-light-choose($primary-medium, $secondary-medium);
text-align: left; text-align: left;
font-size: 12px; font-size: .857em;
margin-top: 5px; margin-top: 5px;
.fa { .fa {
margin-right: 2px; margin-right: 2px;
} }
a { a {
font-size: 11px; font-size: 0.917em;
color: dark-light-choose($primary-medium, $secondary-medium); color: dark-light-choose($primary-medium, $secondary-medium);
margin-right: 3px; margin-right: 3px;
line-height: 20px; line-height: 20px;

View File

@ -328,7 +328,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: 11px; font-size: .786em;
line-height: 1; line-height: 1;
} }
} }
@ -473,7 +473,7 @@ a.star {
#suggested-topics .topic-statuses .topic-status { #suggested-topics .topic-statuses .topic-status {
padding: 0; padding: 0;
i { i {
font-size:15px; font-size:1.071em;
} }
} }

View File

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

View File

@ -196,7 +196,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: 11px; font-size: .786em;
line-height: 1; line-height: 1;
} }
} }

View File

@ -171,7 +171,7 @@ body.wizard {
span { span {
position: absolute; position: absolute;
font-size: 15px; font-size: 1.071em;
mix-blend-mode: difference; mix-blend-mode: difference;
color: white; color: white;
z-index: 13; z-index: 13;