Merge pull request #382 from vordgi/rd-377

rd-377 improve package links styles
vordgi · Nov 9, 2024 · 745d176 · 745d176
2 parents 31dcd67 + 67770d8
commit 745d176
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -13,7 +13,7 @@ Read the documentation in a convenient interface at [robindoc.com/docs](https://
 
 Robindoc is a framework for automatically creating documentation websites based on markdown files, built on React.js Server Components.
 
-```tsx filename="app/docs/page.tsx"
+```tsx filename="app/docs/page.tsx" switcher tab="TypeScript" clone="jsx|JavaScript|app/docs/page.jsx"
 const DocumentationPage = () => (
   <RobinProvider>
     <Header logo={<Logo />} />

diff --git a/site/src/components/ui/package-links/package-links.scss b/site/src/components/ui/package-links/package-links.scss
@@ -1,21 +1,41 @@
 .package-links {
   display: flex;
+  margin: 0 -6px;
+  margin-block-start: 12px;
+  margin-block-end: 28px;
 }
 
 .package-links-link {
   font-weight: 500;
-  border-radius: 6px;
+  border-radius: 8px;
   text-decoration: none;
   color: inherit;
   padding: 2px;
-  margin-right: 12px;
+  margin: 0 6px;
+
+  @media screen and (max-width: 480px) {
+    flex: 1;
+    text-align: center;
+  }
+
+  &:hover .package-links-link-inner {
+    background: inherit;
+    color: var(--body);
+  }
 }
 
 .package-links-link-inner {
   display: block;
-  padding: 4px 12px;
+  padding: 6px 20px;
   background-color: var(--body);
-  border-radius: 4px;
+  border-radius: 6px;
+  transition: background .15s, color .15s;
+  letter-spacing: 0.5px;
+
+  @media screen and (max-width: 480px) {
+    padding: 8px 20px;
+    font-weight: 700;
+  }
 }
 
 .package-links-link-npm {