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

Update CSS guidelines + Prefer rem

Browse Source
This commit is contained in:
venashial
2022-06-07 14:00:53 -07:00
parent c9ec9f14de
commit eb171ecb21
52 changed files with 768 additions and 606 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/docs/components/Example.svelte
View File

@@ -31,19 +31,19 @@
<style lang="postcss">
.example {
margin: 15px 0 32px;
margin: 1rem 0 2rem;
&__preview {
border-radius: var(--rounded-sm-top);
border: solid 2px hsl(0, 0%, 20%);
border-bottom: none;
display: flex;
grid-gap: 16px;
gap: 1rem;
flex-wrap: wrap;
position: relative;
justify-content: flex-start;
z-index: 1;
padding: 16px;
padding: 1rem;
}
&__source {
@@ -53,7 +53,7 @@
position: absolute;
top: 0;
right: 0;
padding: 8px;
padding: 0.5rem;
display: flex;
justify-content: flex-end;

14
src/docs/components/Header.svelte
View File

@@ -40,10 +40,10 @@
<style lang="postcss">
.header {
display: flex;
grid-gap: 10px;
gap: 0.5rem;
align-items: center;
flex-wrap: wrap;
padding: 16px 24px;
padding: 1rem 1.5rem;
position: fixed;
left: 0;
right: 0;
@@ -58,12 +58,12 @@
}
@media (--sm) {
padding: 10px 32px;
padding: 12px 2rem;
}
:global(&__logo) {
max-width: 32px;
min-width: 32px;
max-width: 2rem;
min-width: 2rem;
aspect-ratio: 1 / 1;
}
@@ -74,7 +74,7 @@
&__links {
margin-left: auto;
grid-gap: 16px;
gap: 1rem;
align-items: center;
justify-content: center;
display: flex;
@@ -104,7 +104,7 @@
.spacer-dot {
background-color: hsla(0, 0%, 0%, 0.2);
border-radius: 999px;
border-radius: var(--rounded-max);
width: 5px;
aspect-ratio: 1 / 1;
}

22
src/docs/components/Sidebar.svelte
View File

@@ -25,7 +25,7 @@
<a href="/" class="section__link">Introduction</a>
<a href="/getting-started/configure" class="section__link">Configure</a>
<a href="/getting-started/icons" class="section__link">Using Icons</a>
<!-- <a href="/getting-started/css" class="section__link">Writing CSS</a> -->
<a href="/getting-started/css" class="section__link">Writing CSS</a>
<a href="/getting-started/illustrations" class="section__link">Illustrations</a>
<a href="/getting-started/utils" class="section__link">Built-in utilities</a>
<a href="/getting-started/generator" class="section__link">Generator plugin</a>
@@ -77,18 +77,18 @@
&__content {
mask-image: linear-gradient(to bottom, transparent, hsla(0, 0%, 0%, 1) 5% 95%, transparent);
padding: 88px 32px 32px;
padding: 88px 2rem 2rem;
height: 100vh;
max-height: 100vh;
overflow-y: auto;
grid-gap: 40px;
gap: 2.5rem;
display: flex;
flex-direction: column;
.section {
display: flex;
flex-direction: column;
grid-gap: 0.5rem;
gap: 0.5rem;
&__title {
text-transform: uppercase;
@@ -109,9 +109,9 @@
&__toggle {
position: fixed;
left: 16px;
bottom: 16px;
padding: 8px;
left: 1rem;
bottom: 1rem;
padding: 0.5rem;
aspect-ratio: 1 / 1;
background-color: var(--accent-color);
z-index: 20;
@@ -121,7 +121,7 @@
transition: left 0.2s cubic-bezier(0.38, 0.52, 0.37, 1.27);
:global(.icon) {
width: 32px;
width: 2rem;
height: auto;
}
@@ -134,14 +134,14 @@
left: 0;
.sidebar__toggle {
left: calc(32px + min(70vw, var(--sidebar-width)));
left: calc(2rem + min(70vw, var(--sidebar-width)));
}
}
scrollbar-color: var(--scrollbar-thumb-color) var(--sidebar-color);
&::-webkit-scrollbar {
width: 14px;
width: 1rem;
}
&::-webkit-scrollbar-track {
@@ -150,7 +150,7 @@
&::-webkit-scrollbar-thumb {
background-color: var(--scrollbar-thumb-color);
border-radius: 999px;
border-radius: var(--rounded-max);
border: 3px solid var(--sidebar-color);
}
}

12
src/docs/layout/page.svelte
View File

@@ -2,6 +2,7 @@
import IconPencil from 'virtual:icons/heroicons-outline/pencil'
import { page } from '$app/stores'
import COMPONENT_API from '../../generated/COMPONENT_API.json'
import { markdownInline } from 'omorphia/utils'
export let fileName = $page.url.pathname
.substring($page.url.pathname.lastIndexOf('/') + 1)
@@ -57,9 +58,10 @@
<td><code>{prop.name}</code></td>
<td><code>{prop.type ?? ''}</code></td>
<td><code>{prop.value ?? ''}</code></td>
<td
>{prop.constant ? '[Read only] ' : ''}{prop.description?.replace('null', '') ||
''}</td>
<td>
{prop.constant ? '[Read only] ' : ''}
{@html markdownInline(prop.description?.replace('null', '') || '')}
</td>
</tr>
{/each}
</tbody>
@@ -112,13 +114,13 @@
.edit-link {
display: flex;
align-items: center;
grid-gap: 8px;
gap: 0.5rem;
margin-bottom: 54px;
color: var(--accent-color);
}
.extra-info {
margin-top: 64px;
margin-top: 4rem;
}
.api-table {

1
src/docs/styles/prism-one-dark.css
View File

@@ -32,7 +32,6 @@ code[class*='language-'],
pre[class*='language-'] {
background: hsl(220, 13%, 18%);
color: hsl(220, 14%, 71%);
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
font-family: 'Fira Code', 'Fira Mono', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
direction: ltr;
text-align: left;