Add inter font to project

web/.storybook/preview.js

@@ -1,5 +1,7 @@
 import '../styles/variables.scss';
 import '../styles/global.less';
+import '../styles/theme.less';
+import '../stories/preview.scss';
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },

web/pages/_app.tsx

@@ -1,7 +1,7 @@
 // order matters!
-import '../styles/global.less';
-// import '../styles/globals.scss';
 import '../styles/variables.scss';
+import '../styles/global.less';
+import '../styles/globals.scss';
 // import '../styles/ant-overrides.scss';
 import '../styles/markdown-editor.scss';
 

web/public/fonts/inter/inter.css

@@ -0,0 +1,200 @@
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 100;
+  font-display: swap;
+  src: url("Inter-Thin.woff2?v=3.19") format("woff2"),
+       url("Inter-Thin.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 100;
+  font-display: swap;
+  src: url("Inter-ThinItalic.woff2?v=3.19") format("woff2"),
+       url("Inter-ThinItalic.woff?v=3.19") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 200;
+  font-display: swap;
+  src: url("Inter-ExtraLight.woff2?v=3.19") format("woff2"),
+       url("Inter-ExtraLight.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 200;
+  font-display: swap;
+  src: url("Inter-ExtraLightItalic.woff2?v=3.19") format("woff2"),
+       url("Inter-ExtraLightItalic.woff?v=3.19") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url("Inter-Light.woff2?v=3.19") format("woff2"),
+       url("Inter-Light.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 300;
+  font-display: swap;
+  src: url("Inter-LightItalic.woff2?v=3.19") format("woff2"),
+       url("Inter-LightItalic.woff?v=3.19") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("Inter-Regular.woff2?v=3.19") format("woff2"),
+       url("Inter-Regular.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url("Inter-Italic.woff2?v=3.19") format("woff2"),
+       url("Inter-Italic.woff?v=3.19") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("Inter-Medium.woff2?v=3.19") format("woff2"),
+       url("Inter-Medium.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 500;
+  font-display: swap;
+  src: url("Inter-MediumItalic.woff2?v=3.19") format("woff2"),
+       url("Inter-MediumItalic.woff?v=3.19") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("Inter-SemiBold.woff2?v=3.19") format("woff2"),
+       url("Inter-SemiBold.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 600;
+  font-display: swap;
+  src: url("Inter-SemiBoldItalic.woff2?v=3.19") format("woff2"),
+       url("Inter-SemiBoldItalic.woff?v=3.19") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("Inter-Bold.woff2?v=3.19") format("woff2"),
+       url("Inter-Bold.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url("Inter-BoldItalic.woff2?v=3.19") format("woff2"),
+       url("Inter-BoldItalic.woff?v=3.19") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url("Inter-ExtraBold.woff2?v=3.19") format("woff2"),
+       url("Inter-ExtraBold.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 800;
+  font-display: swap;
+  src: url("Inter-ExtraBoldItalic.woff2?v=3.19") format("woff2"),
+       url("Inter-ExtraBoldItalic.woff?v=3.19") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 900;
+  font-display: swap;
+  src: url("Inter-Black.woff2?v=3.19") format("woff2"),
+       url("Inter-Black.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 900;
+  font-display: swap;
+  src: url("Inter-BlackItalic.woff2?v=3.19") format("woff2"),
+       url("Inter-BlackItalic.woff?v=3.19") format("woff");
+}
+
+/* -------------------------------------------------------
+Variable font.
+Usage:
+
+  html { font-family: 'Inter', sans-serif; }
+  @supports (font-variation-settings: normal) {
+    html { font-family: 'Inter var', sans-serif; }
+  }
+*/
+@font-face {
+  font-family: 'Inter var';
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: normal;
+  font-named-instance: 'Regular';
+  src: url("Inter-roman.var.woff2?v=3.19") format("woff2");
+}
+@font-face {
+  font-family: 'Inter var';
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: italic;
+  font-named-instance: 'Italic';
+  src: url("Inter-italic.var.woff2?v=3.19") format("woff2");
+}
+
+
+/* --------------------------------------------------------------------------
+[EXPERIMENTAL] Multi-axis, single variable font.
+
+Slant axis is not yet widely supported (as of February 2019) and thus this
+multi-axis single variable font is opt-in rather than the default.
+
+When using this, you will probably need to set font-variation-settings
+explicitly, e.g.
+
+  * { font-variation-settings: "slnt" 0deg }
+  .italic { font-variation-settings: "slnt" 10deg }
+
+*/
+@font-face {
+  font-family: 'Inter var experimental';
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: oblique 0deg 10deg;
+  src: url("Inter.var.woff2?v=3.19") format("woff2");
+}

web/stories/preview.scss

@@ -0,0 +1,4 @@
+html,
+body {
+  font-family: var(--font-family);
+}

web/styles/globals.scss

@@ -4,185 +4,182 @@ html,
 body {
   padding: 0;
   margin: 0;
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
+  font-family: var(--font-family);
-    Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
-    'Noto Color Emoji';
-
   font-size: 16px;
 
   background-color: var(--default-bg-color);
   color: var(--default-text-color);
 }
 
-a {
+// a {
-  color: inherit;
+//   color: inherit;
-  text-decoration: none;
+//   text-decoration: none;
-  color: var(--default-link-color);
+//   color: var(--default-link-color);
 
-  &:hover {
+//   &:hover {
-    color: var(--default-text-color);
+//     color: var(--default-text-color);
-  }
+//   }
-}
+// }
 
-* {
+// * {
-  box-sizing: border-box;
+//   box-sizing: border-box;
-}
+// }
 
-p,
+// p,
-p.description,
+// p.description,
-.description,
+// .description,
-.ant-typography {
+// .ant-typography {
-  font-weight: 500;
+//   font-weight: 500;
-  margin: 1em 0;
+//   margin: 1em 0;
-  color: var(--white-75);
+//   color: var(--white-75);
-}
+// }
 
-.description.reduced-margins {
+// .description.reduced-margins {
-  margin-top: 5px;
+//   margin-top: 5px;
-  margin-bottom: 5px;
+//   margin-bottom: 5px;
-}
+// }
 
-pre {
+// pre {
-  display: block;
+//   display: block;
-  padding: 1rem;
+//   padding: 1rem;
-  margin: 0.5rem 0;
+//   margin: 0.5rem 0;
-  background-color: var(--code-bg-color);
+//   background-color: var(--code-bg-color);
-  color: var(--white-50);
+//   color: var(--white-50);
-}
+// }
 
-code {
+// code {
-  color: var(--code-color);
+//   color: var(--code-color);
-  background-color: var(--white-15);
+//   background-color: var(--white-15);
-  display: inline-block;
+//   display: inline-block;
-  padding: 2px 4px;
+//   padding: 2px 4px;
-  border-radius: 4px;
+//   border-radius: 4px;
-  font-size: 0.88em;
+//   font-size: 0.88em;
-}
+// }
 
-strong {
+// strong {
-  font-weight: 600;
+//   font-weight: 600;
-}
+// }
 
-.logo-svg {
+// .logo-svg {
-  height: 2rem;
+//   height: 2rem;
-  width: 2rem;
+//   width: 2rem;
-}
+// }
 
-.line-chart-container {
+// .line-chart-container {
-  margin: 2em auto;
+//   margin: 2em auto;
-  margin-bottom: 0px;
+//   margin-bottom: 0px;
-  padding: 1em;
+//   padding: 1em;
-  border: 1px solid var(--gray-dark);
+//   border: 1px solid var(--gray-dark);
 
-  canvas {
+//   canvas {
-    max-width: 100%;
+//     max-width: 100%;
-  }
+//   }
-}
+// }
 
-.form-module {
+// .form-module {
-  margin: 1em 0;
+//   margin: 1em 0;
-  background-color: var(--container-bg-color);
+//   background-color: var(--container-bg-color);
-  padding: 2em;
+//   padding: 2em;
-  border-radius: var(--container-border-radius);
+//   border-radius: var(--container-border-radius);
 
-  h3 {
+//   h3 {
-    &:first-of-type {
+//     &:first-of-type {
-      margin-top: 0;
+//       margin-top: 0;
-    }
+//     }
-  }
+//   }
-}
+// }
 
-.form-module.disabled {
+// .form-module.disabled {
-  opacity: 0.4;
+//   opacity: 0.4;
-  cursor: not-allowed;
+//   cursor: not-allowed;
-}
+// }
 
-.row {
+// .row {
-  display: flex;
+//   display: flex;
-  flex-direction: row;
+//   flex-direction: row;
-  justify-content: space-between;
+//   justify-content: space-between;
-  align-items: flex-start;
+//   align-items: flex-start;
 
-  @media (max-width: 980px) {
+//   @media (max-width: 980px) {
-    flex-direction: column;
+//     flex-direction: column;
-    .form-module {
+//     .form-module {
-      width: 100%;
+//       width: 100%;
-    }
+//     }
-  }
+//   }
-}
+// }
 
-input {
+// input {
-  &:not(:focus) {
+//   &:not(:focus) {
-    &:invalid {
+//     &:invalid {
-      color: var(--ant-error);
+//       color: var(--ant-error);
-    }
+//     }
-  }
+//   }
-}
+// }
 
-.table-container {
+// .table-container {
-  .ant-table-tbody > tr > td {
+//   .ant-table-tbody > tr > td {
-    transition: background-color 0.15s;
+//     transition: background-color 0.15s;
-  }
+//   }
-  .ant-table-tbody > tr.ant-table-row:hover > td {
+//   .ant-table-tbody > tr.ant-table-row:hover > td {
-    background-color: var(--gray);
+//     background-color: var(--gray);
-  }
+//   }
-  .ant-table-small {
+//   .ant-table-small {
-    .ant-table-cell {
+//     .ant-table-cell {
-      font-size: 12px;
+//       font-size: 12px;
-    }
+//     }
-    .ant-table-selection-column {
+//     .ant-table-selection-column {
-      width: 20px;
+//       width: 20px;
-      min-width: 20px;
+//       min-width: 20px;
-    }
+//     }
-  }
+//   }
-  .ant-table-row.hidden {
+//   .ant-table-row.hidden {
-    .ant-table-cell {
+//     .ant-table-cell {
-      color: var(--black-35);
+//       color: var(--black-35);
-    }
+//     }
-    @media (prefers-color-scheme: dark) {
+//     @media (prefers-color-scheme: dark) {
-      .ant-table-cell {
+//       .ant-table-cell {
-        color: var(--white-25);
+//         color: var(--white-25);
-      }
+//       }
-    }
+//     }
-  }
+//   }
-  .ant-table-cell {
+//   .ant-table-cell {
-    &.actions-col {
+//     &.actions-col {
-      text-align: right;
+//       text-align: right;
-    }
+//     }
-  }
+//   }
-  td.number-col {
+//   td.number-col {
-    text-align: right;
+//     text-align: right;
-  }
+//   }
-}
+// }
 
-.ant-tabs-tab {
+// .ant-tabs-tab {
-  color: var(--owncast-purple);
+//   color: var(--owncast-purple);
 
-  .ant-tabs-tab-active {
+//   .ant-tabs-tab-active {
-    border-color: var(--nav-selected-text);
+//     border-color: var(--nav-selected-text);
-  }
+//   }
-}
+// }
 
-.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
+// .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
-  color: var(--nav-selected-text);
+//   color: var(--nav-selected-text);
-}
+// }
 
-.ant-tabs-ink-bar {
+// .ant-tabs-ink-bar {
-  background: var(--nav-selected-text);
+//   background: var(--nav-selected-text);
-}
+// }
 
-#fediverse-post-container {
+// #fediverse-post-container {
-  max-width: 50vw;
+//   max-width: 50vw;
-  width: 100%;
+//   width: 100%;
 
-  #fediverse-post-input {
+//   #fediverse-post-input {
-    color: var(--white-75);
+//     color: var(--white-75);
-    border-color: var(--owncast-purple);
+//     border-color: var(--owncast-purple);
-    background-color: var(--default-bg-color);
+//     background-color: var(--default-bg-color);
-    height: 250px;
+//     height: 250px;
-  }
+//   }
 
-  .ant-input-textarea-show-count::after {
+//   .ant-input-textarea-show-count::after {
-    color: var(--owncast-purple);
+//     color: var(--owncast-purple);
-  }
+//   }
-}
+// }

web/styles/theme.less

@@ -37,3 +37,4 @@
 @border-color-base: #d9d9d9; // major border color
 @box-shadow-base: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
   0 9px 28px 8px rgba(0, 0, 0, 0.05); // major shadow for layers
+

web/styles/variables.scss

@@ -1,3 +1,5 @@
+@import url('../public/fonts/inter/inter.css');
+
 // See theme.less for specific Ant Design overrides.
 :root {
   // old colors
@@ -87,4 +89,8 @@
   //
   --popover-base-color: var(--gray);
   --tooltip-base-color: var(--gray-medium);
+
+  --font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
+  Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+  'Noto Color Emoji';
 }