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 {
font-size: 28px;
font-size: 2em;
}
small {
font-size: 9px;
font-size: .643em;
}
//setting a static limit on big and small prevents nesting abuse

View File

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

View File

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

View File

@ -180,7 +180,7 @@
color: rgb(255,255,255);
position: absolute;
top: 40%;
font-size: 36px;
font-size: 2.571em;
text-align: center;
line-height: 38px;
margin-left: auto;
@ -197,7 +197,7 @@
.jsfu-separator {
vertical-align: middle;
display: table-cell;
font-size: 36px;
font-size: 2.571em;
padding-left: 10px;
padding-right: 10px;
}
@ -225,7 +225,7 @@
// password reset modal
.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;
text-align:right;
padding-right:5px;
font-size:12px;
font-size:.857em;
line-height: 1.9em;
content: counter(li-counter);
counter-increment: li-counter;
@ -331,7 +331,7 @@ pre.onebox code {
.onebox-body .build_status
{
padding: 2px;
font-size:12px;
font-size:.857em;
}
.onebox-body .status_tag.open {
@ -379,7 +379,7 @@ aside.onebox.twitterstatus .onebox-body {
z-index: 935;
height: 30px;
overflow: hidden;
font-size: 12px;
font-size: .857em;
color: #fff;
background-color: rgba(0, 0, 0, 0.6);
text-overflow: ellipsis;
@ -395,7 +395,7 @@ aside.onebox.twitterstatus .onebox-body {
.album-title {
width: 100%;
font-size: 13px;
font-size: 1.083em;
line-height: 30px;
color: #ccc;
text-decoration: none;

View File

@ -11,7 +11,7 @@
.like-count {
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 {
@ -80,7 +80,7 @@
}
a {
margin-right: 15px;
font-size: 12px;
font-size: .857em;
padding: 2px 5px;
}
}

View File

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

View File

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

View File

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

View File

@ -20,10 +20,10 @@ div.tagsinput span.tag {
margin-right: 5px;
margin-bottom:5px;
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 {
width:80px;
font-family: helvetica;

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -328,7 +328,7 @@ a.star {
padding: 4px 5px 2px 5px;
text-align: center;
font-weight: normal;
font-size: 11px;
font-size: .786em;
line-height: 1;
}
}
@ -473,7 +473,7 @@ a.star {
#suggested-topics .topic-statuses .topic-status {
padding: 0;
i {
font-size:15px;
font-size:1.071em;
}
}

View File

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

View File

@ -196,7 +196,7 @@ a.star {
padding: 4px 5px 2px 5px;
text-align: center;
font-weight: normal;
font-size: 11px;
font-size: .786em;
line-height: 1;
}
}

View File

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