docs: Improve theming + introduction
This commit is contained in:
venashial
parent
6dcd33bbc5
commit
de536d7305
@ -1,7 +1,8 @@
|
||||
<script lang="ts">
|
||||
import "$lib/styles/variables.postcss"
|
||||
import "$lib/styles/themes.postcss"
|
||||
import "./_docs/prism-one-dark.css"
|
||||
import "./_docs/styles/prism-one-dark.css"
|
||||
import "./_docs/styles/gh-markdown.css"
|
||||
import Sidebar from "./_docs/Sidebar.svelte"
|
||||
</script>
|
||||
|
||||
@ -31,7 +32,7 @@
|
||||
overflow: hidden;
|
||||
|
||||
&__content {
|
||||
padding: 1rem max(8vw, 1rem);
|
||||
padding: 5rem max(8vw, 1rem);
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
@ -39,6 +40,14 @@
|
||||
:global(a) {
|
||||
color: hsl(216, 50%, 50%);
|
||||
}
|
||||
|
||||
:global(h1) {
|
||||
font-size: 54px;
|
||||
}
|
||||
|
||||
:global(p) {
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -2,8 +2,8 @@
|
||||
<div class="section">
|
||||
<span class="section__title">Getting started</span>
|
||||
<a href="/" class="section__link">Introduction</a>
|
||||
<a href="/general/icons" class="section__link">Using Icons</a>
|
||||
<a href="/general/css" class="section__link">CSS configuration</a>
|
||||
<a href="/getting-started/icons" class="section__link">Using Icons</a>
|
||||
<a href="/getting-started/css" class="section__link">CSS configuration</a>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
|
||||
367
src/routes/_docs/styles/gh-markdown.css
Normal file
367
src/routes/_docs/styles/gh-markdown.css
Normal file
@ -0,0 +1,367 @@
|
||||
a {
|
||||
color: #4183C4;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a.absent {
|
||||
color: #cc0000;
|
||||
}
|
||||
|
||||
a.anchor {
|
||||
display: block;
|
||||
padding-left: 30px;
|
||||
margin-left: -30px;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: 20px 0 10px;
|
||||
padding: 0;
|
||||
font-weight: bold;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
cursor: text;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
h2:first-child, h1:first-child, h1:first-child + h2, h3:first-child, h4:first-child, h5:first-child, h6:first-child {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
h1:hover a.anchor, h2:hover a.anchor, h3:hover a.anchor, h4:hover a.anchor, h5:hover a.anchor, h6:hover a.anchor {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
h1 tt, h1 code {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
h2 tt, h2 code {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
h3 tt, h3 code {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
h4 tt, h4 code {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
h5 tt, h5 code {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
h6 tt, h6 code {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 28px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
border-bottom: 1px solid #cccccc;
|
||||
color: black;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
h6 {
|
||||
color: #777777;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
p, blockquote, ul, ol, dl, li, table, pre {
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 0 none;
|
||||
color: #cccccc;
|
||||
height: 4px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body > h2:first-child {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
body > h1:first-child {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
body > h1:first-child + h2 {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
body > h3:first-child, body > h4:first-child, body > h5:first-child, body > h6:first-child {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
h1 p, h2 p, h3 p, h4 p, h5 p, h6 p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
li p.first {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
ul :first-child, ol :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
ul :last-child, ol :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
dl {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
dl dt {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
padding: 0;
|
||||
margin: 15px 0 5px;
|
||||
}
|
||||
|
||||
dl dt:first-child {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
dl dt > :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
dl dt > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
dl dd {
|
||||
margin: 0 0 15px;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
dl dd > :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
dl dd > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 4px solid #dddddd;
|
||||
padding: 0 15px;
|
||||
color: #777777;
|
||||
}
|
||||
|
||||
blockquote > :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
blockquote > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
table {
|
||||
padding: 0;
|
||||
}
|
||||
table tr {
|
||||
border-top: 1px solid #cccccc;
|
||||
background-color: white;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
table tr:nth-child(2n) {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
table tr th {
|
||||
font-weight: bold;
|
||||
border: 1px solid #cccccc;
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
padding: 6px 13px;
|
||||
}
|
||||
|
||||
table tr td {
|
||||
border: 1px solid #cccccc;
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
padding: 6px 13px;
|
||||
}
|
||||
|
||||
table tr th :first-child, table tr td :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
table tr th :last-child, table tr td :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
span.frame {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
span.frame > span {
|
||||
border: 1px solid #dddddd;
|
||||
display: block;
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
margin: 13px 0 0;
|
||||
padding: 7px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
span.frame span img {
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
|
||||
span.frame span span {
|
||||
clear: both;
|
||||
color: #333333;
|
||||
display: block;
|
||||
padding: 5px 0 0;
|
||||
}
|
||||
|
||||
span.align-center {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
span.align-center > span {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
margin: 13px auto 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
span.align-center span img {
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
span.align-right {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
span.align-right > span {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
margin: 13px 0 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
span.align-right span img {
|
||||
margin: 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
span.float-left {
|
||||
display: block;
|
||||
margin-right: 13px;
|
||||
overflow: hidden;
|
||||
float: left;
|
||||
}
|
||||
|
||||
span.float-left span {
|
||||
margin: 13px 0 0;
|
||||
}
|
||||
|
||||
span.float-right {
|
||||
display: block;
|
||||
margin-left: 13px;
|
||||
overflow: hidden;
|
||||
float: right;
|
||||
}
|
||||
|
||||
span.float-right > span {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
margin: 13px auto 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
code, tt {
|
||||
margin: 0 2px;
|
||||
padding: 0 5px;
|
||||
white-space: nowrap;
|
||||
border: 1px solid #eaeaea;
|
||||
background-color: #f8f8f8;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
pre code {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
white-space: pre;
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.highlight pre {
|
||||
background-color: #f8f8f8;
|
||||
border: 1px solid #cccccc;
|
||||
font-size: 13px;
|
||||
line-height: 19px;
|
||||
overflow: auto;
|
||||
padding: 6px 10px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
pre {
|
||||
background-color: #f8f8f8;
|
||||
border: 1px solid #cccccc;
|
||||
font-size: 13px;
|
||||
line-height: 19px;
|
||||
overflow: auto;
|
||||
padding: 6px 10px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
pre code, pre tt {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
@ -1,3 +1,7 @@
|
||||
<script>
|
||||
import IconHeart from 'virtual:icons/heroicons-outline/heart'
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Icons - Kleos</title>
|
||||
</svelte:head>
|
||||
@ -54,6 +58,10 @@ Import an icon in the `<script>` tag of your component:
|
||||
|
||||
Then use the icon as if it were a Svelte component:
|
||||
|
||||
> The `height` and `width` props are optional, and take CSS compatible values
|
||||
|
||||
```html
|
||||
<IconHeart />
|
||||
```
|
||||
That's lovely <IconHeart height="14px" />!
|
||||
```
|
||||
|
||||
That's lovely <IconHeart height="14px" />!
|
||||
@ -4,4 +4,39 @@
|
||||
|
||||
# Introduction
|
||||
|
||||
This is `kleos`, Modrinth's style and component library. Go to [its repository](https://github.com/modrinth/kleos) for more information.
|
||||
> Kleos is in early development, and not ready for use in any application. Contribute to it on [GitHub](https://github.com/modrinth/kleos).
|
||||
|
||||
### What is Kleos?
|
||||
|
||||
Kleos is Modrinth's style and reusable component library for use in all of its frontend applications, including [knossos](https://github.com/modrinth/knossos) (modrinth.com), [theseus](https://github.com/modrinth/theseus) (launcher), and planned projects such as Modrinth's in-house auth and ad-server.
|
||||
|
||||
It uses [Svelte](https://svelte.dev/) to deliver the best performance with the least boilerplate.
|
||||
|
||||
### Getting started
|
||||
|
||||
Adding Kleos to your project is as easy as:
|
||||
|
||||
```bash
|
||||
pnpm add kleos
|
||||
```
|
||||
|
||||
#### Components
|
||||
|
||||
Import a component with:
|
||||
```js
|
||||
import { Button } from "kleos"
|
||||
```
|
||||
|
||||
Then, use it in your HTML:
|
||||
|
||||
```html
|
||||
<Button color="primary">Click me!</Button>
|
||||
```
|
||||
|
||||
For more information on each component, check out the pages on the sidebar navigation.
|
||||
|
||||
> To get Svelte language support in your code editor, [use this list.](https://sveltesociety.dev/tools#editor-support)
|
||||
|
||||
#### Icons, Styles, and more
|
||||
|
||||
Follow the guides on the sidebar to learn how to use [icons](/getting-started/icons) and general concepts.
|
||||
Loading…
x
Reference in New Issue
Block a user