aziz/AstralRinth
0
0
Fork 0
forked from xxxOFFxxx/AstralRinth
Code Pull Requests Activity

Add classes: Actions + Divider + Illustration + InfoTable + Stat, Add utilities (needs docs)

Browse Source
This commit is contained in:
venashial
2022-04-02 16:17:58 -07:00
parent 6b54c342aa
commit 85b7147927
82 changed files with 1189 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/routes/classes/Actions.md Normal file
View File

@@ -0,0 +1,15 @@
```svelte example
<script>
import { Button } from 'omorphia'
import IconHeartSolid from 'virtual:icons/heroicons-solid/heart'
import IconCalendar from 'virtual:icons/lucide/calendar'
</script>
<div class="actions">
<Button><IconHeartSolid /> Unfollow </Button>
<span class="stat">
<IconCalendar/>
Updated 12 days ago
</span>
</div>
```

7
src/routes/classes/Base.md Normal file
View File

@@ -0,0 +1,7 @@
Base should be applied to a "root" element, like `<body>`, to provide base styles for common things like text. The theme mode, `light-theme`, `dark-theme`, or `oled-theme`, should also be added to this element.
```svelte example
<div class="base theme-light">
...
</div>
```

4
src/routes/classes/Card.md
View File

@@ -14,9 +14,9 @@
```svelte example
<script lang="ts">
import Button from "omorphia/components/Button.svelte";
import { Button } from "omorphia";
import IconPencil from 'virtual:icons/heroicons-outline/pencil'
import Avatar from "omorphia/components/Avatar.svelte";
import { Avatar } from "omorphia";
</script>
<div class="card">

9
src/routes/classes/Divider.md Normal file
View File

@@ -0,0 +1,9 @@
```svelte example
<div class="card">
Some words could go here.
<hr class="divider" />
And some other words could go here.
</div>
```

10
src/routes/classes/InfoTable.md Normal file
View File

@@ -0,0 +1,10 @@
```svelte example
<div class="info-table">
<span class="info-table__label">License</span>
<a href="#mit" class="link">MIT</a>
<span class="info-table__label">Project ID</span>
<span>11223344</span>
<span class="info-table__label">Visibilty</span>
<span>Approved</span>
</div>
```

19
src/routes/classes/Link.md
View File

@@ -1,3 +1,22 @@
### Single example
```svelte example
<a class="link" href="#place"> Go somewhere! </a>
```
### Group example
```svelte example
<script>
import IconIssues from 'virtual:icons/heroicons-outline/exclamation'
import IconCode from 'virtual:icons/heroicons-outline/code'
import IconClock from 'virtual:icons/lucide/flag-triangle-right'
import IconWiki from 'virtual:icons/heroicons-outline/book-open'
</script>
<div class="link-group">
<a class="link" href="#issues"><IconIssues /> Issues</a>
<a class="link" href="#source"><IconCode /> Source</a>
<a class="link" href="#wiki"><IconWiki /> Wiki</a>
</div>
```

13
src/routes/classes/Member.md Normal file
View File

@@ -0,0 +1,13 @@
```svelte example
<script lang="ts">
import { Avatar } from "omorphia";
</script>
<a class="member" href="#user">
<Avatar src="https://avatars1.githubusercontent.com/u/6166773" size="sm" circle/>
<div class="member__info">
<span class="member__info__link">Prospector</span>
<span>Owner</span>
</div>
</a>
```

32
src/routes/classes/Stat.md Normal file
View File

@@ -0,0 +1,32 @@
### Single Example
```svelte example
<script>
import IconStar from 'virtual:icons/heroicons-outline/star'
</script>
<div class="stat">
<IconStar/>
123K stars
</div>
```
### Group Example
```svelte example
<script>
import IconDownload from 'virtual:icons/heroicons-outline/download'
import IconHeart from 'virtual:icons/heroicons-outline/heart'
</script>
<div class="stat-group">
<div class="stat">
<IconDownload/>
4.1B downloads
</div>
<div class="stat stat--light">
<IconHeart/>
3 followers
</div>
</div>
```

15
src/routes/classes/Tags.md Normal file
View File

@@ -0,0 +1,15 @@
```svelte example
<script>
import IconCarrot from 'virtual:icons/lucide/carrot'
import IconGlobe from 'virtual:icons/heroicons-outline/globe'
</script>
<div class="tag-group">
<div class="tag">
<IconCarrot/> Food
</div>
<div class="tag">
<IconGlobe/> World generation
</div>
</div>
```

5
src/routes/classes/Title.md Normal file
View File

@@ -0,0 +1,5 @@
```svelte example
<h1 class="title-primary">Tree Mod</h1>
<h2 class="title-secondary">Information</h2>
<h3 class="title-tertiary">Members</h3>
```