You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
137 lines
3.1 KiB
137 lines
3.1 KiB
import { Meta } from '@storybook/addon-docs'; |
|
import Code from './assets/code-brackets.svg'; |
|
import Colors from './assets/colors.svg'; |
|
import Comments from './assets/comments.svg'; |
|
import Direction from './assets/direction.svg'; |
|
import Flow from './assets/flow.svg'; |
|
import Plugin from './assets/plugin.svg'; |
|
import Repo from './assets/repo.svg'; |
|
import StackAlt from './assets/stackalt.svg'; |
|
|
|
<Meta title="Example/Introduction" /> |
|
|
|
<style>{` |
|
.subheading { |
|
--mediumdark: '#999999'; |
|
font-weight: 900; |
|
font-size: 13px; |
|
color: #999; |
|
letter-spacing: 6px; |
|
line-height: 24px; |
|
text-transform: uppercase; |
|
margin-bottom: 12px; |
|
margin-top: 40px; |
|
} |
|
|
|
.link-list { |
|
display: grid; |
|
grid-template-columns: 1fr; |
|
grid-template-rows: 1fr 1fr; |
|
row-gap: 10px; |
|
} |
|
|
|
@media (min-width: 620px) { |
|
.link-list { |
|
row-gap: 20px; |
|
column-gap: 20px; |
|
grid-template-columns: 1fr 1fr; |
|
} |
|
} |
|
|
|
@media all and (-ms-high-contrast:none) { |
|
.link-list { |
|
display: -ms-grid; |
|
-ms-grid-columns: 1fr 1fr; |
|
-ms-grid-rows: 1fr 1fr; |
|
} |
|
} |
|
|
|
.link-item { |
|
display: block; |
|
padding: 20px 30px 20px 15px; |
|
border: 1px solid #00000010; |
|
border-radius: 5px; |
|
transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out; |
|
color: #333333; |
|
display: flex; |
|
align-items: flex-start; |
|
} |
|
|
|
.link-item:hover { |
|
border-color: #1EA7FD50; |
|
transform: translate3d(0, -3px, 0); |
|
box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0; |
|
} |
|
|
|
.link-item:active { |
|
border-color: #1EA7FD; |
|
transform: translate3d(0, 0, 0); |
|
} |
|
|
|
.link-item strong { |
|
font-weight: 700; |
|
display: block; |
|
margin-bottom: 2px; |
|
} |
|
|
|
.link-item img { |
|
height: 40px; |
|
width: 40px; |
|
margin-right: 15px; |
|
flex: none; |
|
} |
|
|
|
.link-item span { |
|
font-size: 14px; |
|
line-height: 20px; |
|
} |
|
|
|
.tip { |
|
display: inline-block; |
|
border-radius: 1em; |
|
font-size: 11px; |
|
line-height: 12px; |
|
font-weight: 700; |
|
background: #E7FDD8; |
|
color: #66BF3C; |
|
padding: 4px 12px; |
|
margin-right: 10px; |
|
vertical-align: top; |
|
} |
|
|
|
.tip-wrapper { |
|
font-size: 13px; |
|
line-height: 20px; |
|
margin-top: 40px; |
|
margin-bottom: 40px; |
|
} |
|
|
|
.tip-wrapper code { |
|
font-size: 12px; |
|
display: inline-block; |
|
} |
|
|
|
|
|
`}</style> |
|
|
|
# Owncast Component Library |
|
|
|
This is a place to build and experiment with styling individual components. |
|
|
|
This approach helps build UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages. |
|
|
|
## How to Edit |
|
|
|
In the web project edit the `styles/theme.less` file to change or add variables used in the components. When customizing Ant Design components refer to the list of variables at https://github.com/ant-design/ant-design/blob/master/components/style/themes/dark.less that you can override. |
|
|
|
<div className="subheading">Learn</div> |
|
|
|
<div className="link-list"> |
|
<a className="link-item" href="https://storybook.js.org/tutorials/" target="_blank"> |
|
<img src={Direction} alt="direction" /> |
|
<span> |
|
<strong>In-depth guides</strong> |
|
Best practices from leading teams |
|
</span> |
|
</a> |
|
</div>
|
|
|