diff --git a/src/comment-component.ts b/src/comment-component.ts index 363ad540..6da846e8 100644 --- a/src/comment-component.ts +++ b/src/comment-component.ts @@ -43,7 +43,7 @@ export class CommentComponent { } this.element.innerHTML = ` - @${user.login}
diff --git a/src/index.html b/src/index.html index 16f9ffcc..5c760dc6 100644 --- a/src/index.html +++ b/src/index.html @@ -46,7 +46,7 @@
- @utterances
diff --git a/src/new-comment-component.ts b/src/new-comment-component.ts index daae9130..f0dfa449 100644 --- a/src/new-comment-component.ts +++ b/src/new-comment-component.ts @@ -35,7 +35,7 @@ export class NewCommentComponent { this.element.innerHTML = ` - +
@@ -59,19 +59,19 @@ export class NewCommentComponent { `; diff --git a/src/reactions.ts b/src/reactions.ts index f6c75713..ccc9a4b5 100644 --- a/src/reactions.ts +++ b/src/reactions.ts @@ -113,4 +113,4 @@ export function getSignInToReactMenuHtml(align: 'center' | 'right') { } // tslint:disable-next-line:max-line-length -const addReactionSvgs = ``; +const addReactionSvgs = ``; diff --git a/src/stylesheets/email-fragment.scss b/src/stylesheets/email-fragment.scss index 065af2de..fe2dc4e9 100644 --- a/src/stylesheets/email-fragment.scss +++ b/src/stylesheets/email-fragment.scss @@ -4,11 +4,11 @@ .email-hidden-toggle a { display: inline-block; - height: 12px; - padding: 0 9px; - font-size: 12px; + height: rem(12px); + padding: 0 rem(9px); + font-size: rem($font-size-small); font-weight: 600; - line-height: 6px; + line-height: rem(6px); color: $border-gray-darker; text-decoration: none; vertical-align: middle; @@ -35,8 +35,8 @@ .email-quoted-reply, .email-signature-reply { - padding: 0 15px; - margin: 15px 0; + padding: 0 rem(15px); + margin: rem(15px) 0; color: $text-gray; border-left: 4px solid $gray-200; } diff --git a/src/stylesheets/index.scss b/src/stylesheets/index.scss index 4b0b582a..e04bbace 100644 --- a/src/stylesheets/index.scss +++ b/src/stylesheets/index.scss @@ -1,3 +1,4 @@ +@import "./scaling"; @import "@primer/css/base/index"; @import "@primer/css/buttons/button"; @import "@primer/css/forms/form-control"; @@ -9,38 +10,84 @@ @import "./timeline"; @import "./timeline-comment"; +html { + font-size: $scaling * 100%; +} + +body { + font-size: rem(14px); +} + .timeline { width: 100%; - max-width: 760px; + max-width: rem(760px); margin-left: auto; margin-right: auto; } .markdown-body { - font-size: 16px; + font-size: rem(16px); } form { - font-size: $body-font-size; + font-size: rem($body-font-size); } fieldset { border: none; - margin: 0 $spacer-3; + margin: 0 rem($spacer-3); padding: 0; } input:not([type=radio]) { - margin: $spacer-1 0; + margin: rem($spacer-1) 0; +} + +.form-checkbox { + label { + display: block; + cursor: pointer; + + input { + margin: rem(5px) 0 0 rem(-20px) !important; + } + } + + .note { + font-size: rem($font-size-small); + } } -.form-checkbox label { - display: block; - cursor: pointer; +.config-field { + pre { + margin-bottom: 0; + } } .code-action { float: right; - margin-top: -$spacer-2; - margin-bottom: $spacer-3; + margin-top: rem($spacer-2); + margin-bottom: rem($spacer-3); } + +.utterances { + max-width: 76rem; +} + +.note { + font-size: rem($font-size-small); +} + +.form-control, .form-select { + font-size: rem($body-font-size); +} + +.form-select { + height: rem($size-5); + padding-right: rem($spacer-4); + padding: rem(5px) rem(12px); + font-size: rem(14px); + line-height: rem(20px); + background-position: right rem(8px) center; + background-size: rem(8px) rem(10px); +} \ No newline at end of file diff --git a/src/stylesheets/permalink-code.scss b/src/stylesheets/permalink-code.scss index 33269a57..ad6f6f27 100644 --- a/src/stylesheets/permalink-code.scss +++ b/src/stylesheets/permalink-code.scss @@ -21,12 +21,12 @@ } .f6 { - font-size: 12px !important; + font-size: rem(12px) !important; } .my-2 { - margin-top: $spacer-2 !important; - margin-bottom: $spacer-2 !important; + margin-top: rem($spacer-2) !important; + margin-bottom: rem($spacer-2) !important; } .mb-0 { @@ -34,8 +34,8 @@ } .px-3 { - padding-right: $spacer-3 !important; - padding-left: $spacer-3 !important; + padding-right: rem($spacer-3) !important; + padding-left: rem($spacer-3) !important; } .py-0 { @@ -44,12 +44,12 @@ } .py-2 { - padding-top: $spacer-2 !important; - padding-bottom: $spacer-2 !important; + padding-top: rem($spacer-2) !important; + padding-bottom: rem($spacer-2) !important; } .blob-wrapper-embedded { - max-height: 240px; + max-height: rem(240px); } .blob-wrapper { @@ -65,11 +65,11 @@ .blob-num { width: 1%; - min-width: 50px; - padding-right: 10px; - padding-left: 10px; + min-width: rem(50px); + padding-right: rem(10px); + padding-left: rem(10px); font-family: $mono-font; - font-size: $font-size-small; + font-size: rem($font-size-small); line-height: $lh-default; color: $black-fade-30; text-align: right; @@ -86,7 +86,7 @@ .blob-code-inner { overflow: visible; font-family: $mono-font; - font-size: $font-size-small; + font-size: rem($font-size-small); color: $text-gray-dark; word-wrap: normal; white-space: pre; @@ -94,8 +94,8 @@ .blob-code { position: relative; - padding-right: 10px; - padding-left: 10px; + padding-right: rem(10px); + padding-left: rem(10px); line-height: $lh-default; vertical-align: top; } diff --git a/src/stylesheets/reactions.scss b/src/stylesheets/reactions.scss index a48d7f06..f2b52826 100644 --- a/src/stylesheets/reactions.scss +++ b/src/stylesheets/reactions.scss @@ -1,12 +1,8 @@ .reaction-list { display: flex; flex-wrap: nowrap; - margin-top: -1px; - margin-bottom: -1px; - margin-left: -1px; border-right: $border; - overflow-x: hidden; - overflow-y: visible; + overflow: visible; > .reaction-button:last-child { border-right: none !important; } @@ -14,8 +10,17 @@ .reaction-list > .reaction-button { font-weight: normal; - padding: $spacer-2 $spacer-3; + padding: rem($spacer-2) rem($spacer-3); border-radius: 0 !important; + border-top: none; + border-bottom: none; + + &:first-child { + border-left: $border; + border-bottom: $border; + margin-left: -1px; + margin-bottom: -1px; + } &[reaction-count="0"] { display: none; @@ -23,21 +28,35 @@ &::after { display: inline-block; - margin-left: 2px; + margin-left: rem(2px); content: attr(reaction-count); } } .reactions-popover { summary { - margin: -1px 0; - padding: $spacer-2 $spacer-3; + height: 100%; + min-height: 3rem; + display: flex; + align-items: center; color: $text-gray; white-space: nowrap; transition: opacity 0.3s ease-in-out; + padding: 0 rem($spacer-3); &:hover { color: $text-blue; } + + .plus-icon { + margin-right: rem(3px); + width: rem(7px); + height: rem(16px); + } + + .smile-icon { + width: rem(16px); + height: rem(16px); + } } .Popover { @@ -46,10 +65,10 @@ .Popover-message { position: relative; - padding: $spacer-1; + padding: rem($spacer-1); display: flex; flex-wrap: wrap; - width: 150px; + width: rem(150px); background-color: $bg-white; border: $border; border-radius: $border-radius; @@ -57,8 +76,11 @@ .BtnGroup { margin: 0 auto; + height: rem(28px); + display: flex; + &:first-of-type { - margin-top: $spacer-6; + margin-top: rem($spacer-6); } } @@ -68,7 +90,7 @@ transition: transform 0.15s cubic-bezier(0.2, 0, 0.13, 2); background: transparent !important; white-space: nowrap; - padding: $spacer-1 $spacer-2; + padding: rem($spacer-1) rem($spacer-2); &:hover { transform: scale(1.2); @@ -83,9 +105,9 @@ left: 0; right: 0; border-bottom: $border; - padding: $spacer-2 $spacer-3; - background-color: $bg-white; + padding: rem($spacer-2) rem($spacer-3); pointer-events: none; + background-color: $bg-white; .reaction-button + & { display: none; diff --git a/src/stylesheets/scaling.scss b/src/stylesheets/scaling.scss new file mode 100644 index 00000000..5080d97d --- /dev/null +++ b/src/stylesheets/scaling.scss @@ -0,0 +1,24 @@ +$scaling: 0.625; +$default-browser-font-size: 16; + +@function rem($number) { + $unit: str-slice($number * 0 + "", 2, -1); + + @if $unit != 'px' or unitless($number) { + @error "The 'rem' function is only applicable to 'px'."; + } + + $remValue: $number / ($number * 0 + 1) / ($default-browser-font-size * $scaling) * 1rem; + @return $remValue; +} + +@function em($number) { + $unit: str-slice($number * 0 + "", 2, -1); + + @if $unit != 'px' or unitless($number) { + @error "The 'em' function is only applicable to 'px'."; + } + + $emValue: $number / ($number * 0 + 1) / $default-browser-font-size * 1em; + @return $emValue; +} \ No newline at end of file diff --git a/src/stylesheets/timeline-comment.scss b/src/stylesheets/timeline-comment.scss index 7fca36a9..62d74434 100644 --- a/src/stylesheets/timeline-comment.scss +++ b/src/stylesheets/timeline-comment.scss @@ -1,7 +1,7 @@ .timeline-comment { display: flex; align-items: flex-start; - margin: $spacer-3 0; + margin: rem($spacer-3) 0; .avatar { display: none; @@ -10,13 +10,15 @@ .avatar > img { border-radius: $border-radius; + height: rem(44px); + width: rem(44px); } .comment { position: relative; flex-grow: 1; flex-basis: 0; - min-width: 0px; + min-width: 0; background-color: $bg-white; border: $border; border-radius: $border-radius; @@ -34,7 +36,7 @@ } .comment-meta { - padding: 10px $spacer-3; + padding: rem(10px) rem($spacer-3); } .comment-actions { @@ -43,7 +45,7 @@ } .new-comment-header { - padding: $spacer-2 $spacer-2 0 $spacer-2; + padding: rem($spacer-2) rem($spacer-2) 0 rem($spacer-2); background-color: $bg-gray; border-bottom: $border; margin-bottom: 0; @@ -52,25 +54,25 @@ } .markdown-body { - padding: $spacer-3 $spacer-3; - font-size: $body-font-size; + padding: rem($spacer-3) rem($spacer-3); + font-size: rem($body-font-size); } .comment-body { - padding: $spacer-2; + padding: rem($spacer-2); textarea { appearance: none; display: block; - max-height: 550px; + max-height: rem(550px); resize: vertical; } textarea, .markdown-body { - padding: $spacer-2; + padding: rem($spacer-2); width: 100%; - min-height: 90px; + min-height: rem(90px); border: $border; border-radius: $border-radius; } @@ -95,7 +97,6 @@ } &:not(:hover) .reactions-popover:not([open]) { - height: 0; overflow: hidden; opacity: 0; summary { @@ -108,11 +109,37 @@ display: flex; align-items: center; justify-content: space-between; - padding: 0 $spacer-2 $spacer-2 $spacer-2; + padding: 0 rem($spacer-2) rem($spacer-2) rem($spacer-2); + flex-direction: column; + + @media screen and (min-width: em(map-get($breakpoints, sm))) { + flex-direction: row; + } .markdown-info { - font-size: $font-size-small; - margin-right: $spacer-1; + font-size: rem($font-size-small); + margin-right: rem($spacer-1); + margin-bottom: rem($spacer-2); + + .markdown-icon { + width: rem(16px); + height: rem(16px); + vertical-align: bottom; + fill: currentColor; + } + } + + .btn-sign-in { + margin-bottom: rem($spacer-2); + + * { + vertical-align: middle; + } + + .github-icon { + width: rem(16px); + height: rem(16px); + } } } @@ -121,12 +148,12 @@ } .author-association-badge { - margin-top: -1px; - margin-right: $spacer-1; - padding: 2px 5px; + margin-top: rem(-1px); + margin-right: rem($spacer-1); + padding: rem(2px) rem(5px); border: $border; border-radius: $border-radius; - font-size: $font-size-small; + font-size: rem($font-size-small); font-weight: $font-weight-semibold; } @@ -134,10 +161,10 @@ display: none; } - @media screen and (min-width: map-get($breakpoints, sm)) { + @media screen and (min-width: em(map-get($breakpoints, sm))) { .avatar { display: block; - margin-right: $spacer-3; + margin-right: rem($spacer-3); } .comment { diff --git a/src/stylesheets/timeline.scss b/src/stylesheets/timeline.scss index 4e2551fb..dc8fb5bf 100644 --- a/src/stylesheets/timeline.scss +++ b/src/stylesheets/timeline.scss @@ -1,15 +1,15 @@ .timeline { - margin: $spacer-3 0; - padding: 0 $spacer-1; + margin: rem($spacer-3) 0; + padding: 0 rem($spacer-1); } .timeline-header { margin: 0; - padding-left: $spacer-3; - font-size: $body-font-size; + padding-left: rem($spacer-3); + font-size: rem($body-font-size); color: $text-gray; - @media screen and (min-width: map-get($breakpoints, sm)) { - padding-left: 44 + $spacer-3; + @media screen and (min-width: em(map-get($breakpoints, sm))) { + padding-left: rem(44 + $spacer-3); } } @@ -19,7 +19,7 @@ .page-loader { position: relative; - margin: 40px 0; + margin: rem(40px) 0; .btn { position: absolute; diff --git a/src/stylesheets/util.scss b/src/stylesheets/util.scss index a2e7c7b8..9b1754d5 100644 --- a/src/stylesheets/util.scss +++ b/src/stylesheets/util.scss @@ -12,16 +12,28 @@ } .markdown-body-scrollable { - max-height: 450px; + max-height: rem(450px); overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } +.markdown-body { + kbd { + font-size: rem($font-size-small); + padding: rem(3px) rem(5px); + } +} + .markdown-body .highlight-source-js > pre { -webkit-overflow-scrolling: touch; } +.btn { + font-size: rem($body-font-size); + padding: rem(5px) rem(16px); +} + .btn-outline { border-color: $border-gray; } @@ -36,3 +48,8 @@ } } } + +.tabnav-tab { + font-size: rem($font-size-small); + padding: rem(8px) rem(16px); +} \ No newline at end of file diff --git a/src/stylesheets/utterances.scss b/src/stylesheets/utterances.scss index 6c339851..41bb9f42 100644 --- a/src/stylesheets/utterances.scss +++ b/src/stylesheets/utterances.scss @@ -1,3 +1,4 @@ +@import "./scaling"; @import "@primer/css/base/index"; @import "@primer/css/utilities/details"; @import "@primer/css/utilities/box-shadow"; @@ -15,6 +16,10 @@ @import "./zigzag"; @import "./reactions"; +html { + font-size: $scaling * 100%; +} + html, body { background-color: transparent; @@ -22,17 +27,18 @@ body { body { overflow: hidden; - padding-bottom: 20px; + padding-bottom: rem(20px); + font-size: rem(14px); } .form-control { - font-size: $body-font-size; + font-size: rem($body-font-size); } .flash-not-installed { - margin-bottom: $spacer-3; + margin-bottom: rem($spacer-3); } textarea[disabled] { cursor: not-allowed; -} \ No newline at end of file +} diff --git a/src/stylesheets/zigzag.scss b/src/stylesheets/zigzag.scss index edf1b876..9e6c1811 100644 --- a/src/stylesheets/zigzag.scss +++ b/src/stylesheets/zigzag.scss @@ -8,7 +8,7 @@ $zz-line-color: $border-gray; .zigzag { background: $zz-background-color; position: relative; - height: $zz-height; + height: rem($zz-height); z-index: 1; &:before, &:after { @@ -24,7 +24,7 @@ $zz-line-color: $border-gray; background: linear-gradient(-135deg, $zz-line-color $zz-halfheight, transparent 0) 0 $zz-halfheight, linear-gradient( 135deg, $zz-line-color $zz-halfheight, transparent 0) 0 $zz-halfheight; background-position: top left; background-repeat: repeat-x; - background-size: $zz-height $zz-height; + background-size: rem($zz-height) rem($zz-height); } &:after { height: $zz-height; @@ -32,6 +32,6 @@ $zz-line-color: $border-gray; background: linear-gradient(-135deg, $zz-background-color $zz-halfheight, transparent 0) 0 $zz-halfheight, linear-gradient( 135deg, $zz-background-color $zz-halfheight, transparent 0) 0 $zz-halfheight; background-position: top left; background-repeat: repeat-x; - background-size: $zz-height $zz-height; + background-size: rem($zz-height) rem($zz-height); } }