Merge pull request #35 from acid-info/css-updates

CSS updates

packages/logos-docusaurus-theme/src/client/components/Icon/Icon.tsx

@@ -23,6 +23,7 @@ import SearchSvg from '../../static/icons/search.svg'
 import StatusSvg from '../../static/icons/status.svg'
 import TelegramSvg from '../../static/icons/telegram.svg'
 import TwitterSvg from '../../static/icons/twitter.svg'
+import EditSvg from '../../static/icons/edit.svg'
 
 type TIconProps = {
   size?: 's' | 'm' | 'l'
@@ -171,3 +172,9 @@ export const IconClose = (props: TIconProps): JSX.Element => (
     <CloseSvg />
   </Icon>
 )
+
+export const IconEdit = (props: TIconProps): JSX.Element => (
+  <Icon {...props}>
+    <EditSvg />
+  </Icon>
+)

packages/logos-docusaurus-theme/src/client/css/custom.scss

@@ -86,12 +86,12 @@
   --ifm-font-weight-bold: 600;
   --ifm-font-weight-base: var(--ifm-font-weight-normal);
 
-  --ifm-h1-font-size: 4rem;
-  --ifm-h2-font-size: 2rem;
-  --ifm-h3-font-size: 1.25rem;
-  --ifm-h4-font-size: 1.15rem;
-  --ifm-h5-font-size: 1rem;
-  --ifm-h6-font-size: 0.85rem;
+  --ifm-h1-font-size: var(--lsd-h1-fontSize);
+  --ifm-h2-font-size: var(--lsd-h2-fontSize);
+  --ifm-h3-font-size: var(--lsd-h3-fontSize);
+  --ifm-h4-font-size: var(--lsd-h4-fontSize);
+  --ifm-h5-font-size: var(--lsd-h5-fontSize);
+  --ifm-h6-font-size: var(--lsd-h6-fontSize);
 
   /* Spacing. */
   --ifm-global-spacing: 0.67rem;
@@ -283,7 +283,24 @@ svg * {
   color: rgb(var(--lsd-text-secondary)) !important;
 }
 
+h1 {
+  @include lsd.typography('h1');
+}
+
+h2 {
+  @include lsd.typography('h2');
+}
+
+h3 {
+  @include lsd.typography('h3');
+}
+
+h4 {
+  @include lsd.typography('h4');
+}
+
 code {
+  @include lsd.typography('body1');
   color: rgb(var(--lsd-text-primary));
   border-radius: 0;
   background: rgba(255, 255, 255, 0.15);
@@ -374,6 +391,16 @@ small {
   align-items: center;
 }
 
+.theme-edit-this-page {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.external-link {
+  @include lsd.typography('body2');
+}
+
 .dropdown__link:hover {
   color: rgb(var(--lsd-text-secondary));
 }
@@ -449,6 +476,10 @@ small {
 
 .menu__list-item-collapsible > a {
   border: none !important;
+
+  span {
+    color: rgb(var(--lsd-text-primary), 0.6);
+  }
 }
 
 .table-of-contents__link--active code {
@@ -777,6 +808,7 @@ a[class^='sidebarLogo_'] {
   text-align: unset;
   grid-column: 1 / 12;
   grid-row: 1 / 1;
+  @include lsd.typography('body2');
 
   & > div:first-of-type {
     display: none;

packages/logos-docusaurus-theme/src/client/static/icons/edit.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.7067 2.39333L13.6067 3.29333C14.1333 3.81333 14.1333 4.65999 13.6067 5.17999L4.78667 14H2V11.2133L8.93333 4.27333L10.82 2.39333C11.34 1.87333 12.1867 1.87333 12.7067 2.39333ZM3.33333 12.6667L4.27333 12.7067L10.82 6.15333L9.88 5.21333L3.33333 11.76V12.6667Z" fill="white"/>
+</svg>

packages/logos-docusaurus-theme/src/client/theme/EditThisPage/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import Translate from '@docusaurus/Translate'
+import { ThemeClassNames } from '@docusaurus/theme-common'
+import { IconEdit } from '@logos-theme/components/Icon'
+import { Typography } from '@acid-info/lsd-react'
+
+export default function EditThisPage({ editUrl }) {
+  return (
+    <a
+      href={editUrl}
+      target="_blank"
+      rel="noreferrer noopener"
+      className={ThemeClassNames.common.editThisPage}
+    >
+      <IconEdit />
+      <Typography variant="body2">
+        <Translate
+          id="theme.common.editThisPage"
+          description="The link label to edit the current page"
+        >
+          Edit this page
+        </Translate>
+      </Typography>
+    </a>
+  )
+}