use default system font

2022-04-10 15:34:54 -05:00
parent f7bddd757d
commit 145b4c474c
15 changed files with 21 additions and 39 deletions
@@ -15,10 +15,6 @@ module.exports = [
    path: 'public/last-comments.mjs',
    limit: '32 KB',
  },
-  {
-    path: 'public/last-comments.css',
-    limit: '6 KB',
-  },
  {
    path: 'public/deleteme.mjs',
    limit: '11 KB',
@@ -1,6 +1,6 @@
 .button_kind_link {
  background: transparent;
-  font-weight: bold;
+  font-weight: 600;
  color: var(--color9);

  &:hover {
@@ -9,7 +9,6 @@
  min-height: var(--height);
  padding: 10px 12px;
  margin: 0;
-  font-family: 'PT Sans', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  border: 0;
@@ -1,7 +1,6 @@
 .comment__action {
  font-size: 14px;
  vertical-align: middle;
-  font-weight: normal;

  & + .comment__action {
    margin-left: 8px;
@@ -1,6 +1,5 @@
 .comment__control {
  margin-right: 8px;
-  color: var(--color33);

  &:last-child {
    margin-right: 0;
@@ -3,10 +3,10 @@
  vertical-align: middle;
  user-select: none;
  font-size: 14px;
-  font-weight: 700;

  @media (hover: hover) {
    opacity: 0;
+    transition: opacity 0.15s;

    &:hover,
    &:focus-within {
@@ -2,7 +2,7 @@
  display: block;
  padding: 12px 0 8px;
  font-size: 16px;
-  line-height: 1.2;
+  line-height: 1.4;
  transition: background 0.3s ease-in-out;

  @media (hover: hover) {
@@ -398,18 +398,15 @@ export class Comment extends Component<CommentProps, State> {
    if (isAdmin) {
      controls.push(
        this.state.isCopied ? (
-          <span className="comment__control comment__control_view_inactive">
+          <span className="comment__control comment__control_view_inactive comment__action">
            <FormattedMessage id="comment.copied" defaultMessage="Copied!" />
          </span>
        ) : (
-          <Button kind="link" onClick={this.copyComment} mix="comment__control">
+          <Button kind="link" onClick={this.copyComment} mix={['comment__control', 'comment__action']}>
            <FormattedMessage id="comment.copy" defaultMessage="Copy" />
          </Button>
-        )
-      );
-
-      controls.push(
-        <Button kind="link" onClick={this.togglePin} mix="comment__control">
+        ),
+        <Button kind="link" onClick={this.togglePin} mix={['comment__control', 'comment__action']}>
          {this.props.data.pin ? (
            <FormattedMessage id="comment.unpin" defaultMessage="Unpin" />
          ) : (
@@ -421,7 +418,7 @@ export class Comment extends Component<CommentProps, State> {

    if (!isCurrentUser) {
      controls.push(
-        <Button kind="link" onClick={this.hideUser} mix="comment__control">
+        <Button kind="link" onClick={this.hideUser} mix={['comment__control', 'comment__action']}>
          <FormattedMessage id="comment.hide" defaultMessage="Hide" />
        </Button>
      );
@@ -430,7 +427,7 @@ export class Comment extends Component<CommentProps, State> {
    if (isAdmin) {
      if (this.props.isUserBanned) {
        controls.push(
-          <Button kind="link" onClick={this.onUnblockUserClick} mix="comment__control">
+          <Button kind="link" onClick={this.onUnblockUserClick} mix={['comment__control', 'comment__action']}>
            <FormattedMessage id="comment.unblock" defaultMessage="Unblock" />
          </Button>
        );
@@ -456,7 +453,7 @@ export class Comment extends Component<CommentProps, State> {

      if (!this.props.data.delete) {
        controls.push(
-          <Button kind="link" onClick={this.deleteComment} mix="comment__control">
+          <Button kind="link" onClick={this.deleteComment} mix={['comment__control', 'comment__action']}>
            <FormattedMessage id="comment.delete" defaultMessage="Delete" />
          </Button>
        );
@@ -1,3 +0,0 @@
-.root {
-  font-family: 'PT Sans', Helvetica, Arial, sans-serif;
-}
@@ -1,12 +1,9 @@
 import { h } from 'preact';
 import { useIntl } from 'react-intl';
-import clsx from 'clsx';

 import type { Comment as CommentType } from 'common/types';
 import { Comment } from 'components/comment';

-import styles from './list-comments.module.css';
-
 type Props = {
  comments: CommentType[];
 };
@@ -15,7 +12,7 @@ export function ListComments({ comments = [] }: Props) {
  const intl = useIntl();

  return (
-    <div className={clsx('comments-list', styles.root)}>
+    <div className="comments-list">
      {comments.map((comment) => (
        <Comment
          intl={intl}
@@ -14,7 +14,7 @@

  & p,
  & blockquote {
-    margin: 1rem 0;
+    margin: 0.5rem 0;

    &:first-child {
      margin-top: 0;
@@ -23,13 +23,6 @@
    &:last-child {
      margin-bottom: 0;
    }
-
-    /* imported comments have br instead of p */
-    & br {
-      content: '';
-      display: block;
-      margin-top: 1rem;
-    }
  }

  & a {
@@ -7,6 +7,8 @@ import { loadLocale } from 'utils/loadLocale';
 import { getLocale } from 'utils/getLocale';
 import { ListComments } from 'components/list-comments';

+import 'styles/global.css';
+
 const LAST_COMMENTS_NODE_CLASSNAME = 'remark42__last-comments';
 const DEFAULT_LAST_COMMENTS_MAX = 15;

@@ -3,14 +3,18 @@ body {
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 6px;
-  font-family: "PT Sans", Helvetica, Arial, sans-serif;
+  font-family: system-ui;
+  font-size: 14px;
  color: rgb(var(--primary-text-color));
  box-sizing: border-box;
 }

 input,
+textarea,
+select,
 button {
  font-family: inherit;
+  font-size: inherit;
  color: inherit;
 }

@@ -19,7 +23,6 @@ button {
  margin: 0;
  border: 0;
  background: unset;
-  font-size: inherit;
  transition-property: color, background, border-color;
  transition-timing-function: linear;
  transition-duration: 150ms;
@@ -16,7 +16,7 @@
      }
    </style>
    <% if (htmlWebpackPlugin.options.env === 'production') { %>
-    <link rel="stylesheet" href="last-comments.css" />
+    <link rel="stylesheet" href="remark42.css" />
    <% } %>
  </head>
  <body>
@@ -54,7 +54,7 @@
      }

      body {
-        font: 16px/26px Helvetica, "Helvetica Neue", Arial, sans-serif;
+        font: 16px/26px Helvetica, 'Helvetica Neue', Arial, sans-serif;
      }

      .wrapper {