mirror of
https://github.com/pockethost/pockethost.git
synced 2025-03-30 15:08:30 +00:00
Finish cosmetics
This commit is contained in:
parent
32692fd131
commit
cfd04716c6
@ -1,22 +1,31 @@
|
||||
<script lang="ts">
|
||||
import { goto } from '$app/navigation'
|
||||
import { Button } from 'sveltestrap'
|
||||
import { ButtonStyles } from './types'
|
||||
import { ButtonColors, ButtonSizes } from './types'
|
||||
|
||||
export let style: ButtonStyles = ButtonStyles.Wide
|
||||
export let color: ButtonColors = ButtonColors.Primary
|
||||
export let size: ButtonSizes = ButtonSizes.Normal
|
||||
export let disabled = false
|
||||
export let href: string = '#'
|
||||
export let click: () => void = () => {
|
||||
goto(href)
|
||||
}
|
||||
const size = style === ButtonStyles.Micro ? 'sm' : 'lg'
|
||||
</script>
|
||||
|
||||
<Button
|
||||
class={style}
|
||||
color={'primary'}
|
||||
{disabled}
|
||||
block={style === ButtonStyles.Wide}
|
||||
{size}
|
||||
on:click={click}><slot /></Button
|
||||
>
|
||||
<div class="button">
|
||||
<Button
|
||||
class={size}
|
||||
{color}
|
||||
{disabled}
|
||||
block={size === ButtonSizes.Wide}
|
||||
size={size === ButtonSizes.Micro ? 'sm' : 'lg'}
|
||||
on:click={click}><slot /></Button
|
||||
>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.button {
|
||||
margin: 2px;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
|
@ -1,5 +1,21 @@
|
||||
export enum ButtonStyles {
|
||||
export enum ButtonSizes {
|
||||
Micro = 'micro',
|
||||
Normal = 'normal',
|
||||
Wide = 'wide',
|
||||
Wide = 'wide'
|
||||
}
|
||||
|
||||
/**
|
||||
* | 'primary'
|
||||
| 'secondary'
|
||||
| 'success'
|
||||
| 'danger'
|
||||
| 'warning'
|
||||
| 'info'
|
||||
| 'light'
|
||||
| 'dark'
|
||||
| 'link';
|
||||
*/
|
||||
export enum ButtonColors {
|
||||
Primary = 'primary',
|
||||
Light = 'light'
|
||||
}
|
||||
|
@ -1,35 +1,32 @@
|
||||
<script lang="ts">
|
||||
import { Highlight } from 'svelte-highlight'
|
||||
import { typescript } from 'svelte-highlight/languages'
|
||||
import Clipboard from './Clipboard.svelte'
|
||||
import 'svelte-highlight/styles/github.css'
|
||||
import Button from './Button/Button.svelte'
|
||||
import { ButtonStyles } from './Button/types'
|
||||
import CopyButton from './CopyButton.svelte'
|
||||
import { Highlight } from 'svelte-highlight'
|
||||
import { typescript } from 'svelte-highlight/languages'
|
||||
import 'svelte-highlight/styles/github.css'
|
||||
import CopyButton from './CopyButton.svelte'
|
||||
|
||||
export let code: string
|
||||
const handleCopy = () => {
|
||||
console.log('copied')
|
||||
}
|
||||
export let code: string
|
||||
const handleCopy = () => {
|
||||
console.log('copied')
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="copy-container">
|
||||
<Highlight language={typescript} {code} />
|
||||
<div class="copy-button">
|
||||
<CopyButton {code} copy={handleCopy} />
|
||||
</div>
|
||||
<Highlight language={typescript} {code} />
|
||||
<div class="copy-button">
|
||||
<CopyButton {code} copy={handleCopy} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style type="text/scss">
|
||||
.copy-container {
|
||||
position: relative;
|
||||
margin: 5px;
|
||||
border: 1px solid gray;
|
||||
.copy-container {
|
||||
position: relative;
|
||||
margin: 5px;
|
||||
border: 1px solid gray;
|
||||
|
||||
.copy-button {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
}
|
||||
}
|
||||
.copy-button {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
@ -1,17 +1,17 @@
|
||||
<script lang="ts">
|
||||
import Button from './Button/Button.svelte'
|
||||
import { ButtonStyles } from './Button/types'
|
||||
import Clipboard from './Clipboard.svelte'
|
||||
import Button from './Button/Button.svelte'
|
||||
import { ButtonSizes } from './Button/types'
|
||||
import Clipboard from './Clipboard.svelte'
|
||||
|
||||
let isCopied = false
|
||||
export let code: string
|
||||
export let copy: () => void
|
||||
const handleCopy = () => {
|
||||
isCopied = true
|
||||
copy()
|
||||
}
|
||||
let isCopied = false
|
||||
export let code: string
|
||||
export let copy: () => void
|
||||
const handleCopy = () => {
|
||||
isCopied = true
|
||||
copy()
|
||||
}
|
||||
</script>
|
||||
|
||||
<Clipboard text={code} let:copy on:copy={handleCopy}>
|
||||
<Button style={ButtonStyles.Micro} click={copy}>{isCopied ? 'Copied!' : 'Copy'}</Button>
|
||||
<Button size={ButtonSizes.Micro} click={copy}>{isCopied ? 'Copied!' : 'Copy'}</Button>
|
||||
</Clipboard>
|
||||
|
@ -0,0 +1,5 @@
|
||||
<script>
|
||||
import { Icon } from 'sveltestrap'
|
||||
</script>
|
||||
|
||||
<Icon name="github" />
|
@ -1,9 +1,24 @@
|
||||
<script lang="ts">
|
||||
import { redirect } from '$util/redirect'
|
||||
import { isLoggedIn, logOut, user } from '@pockethost/common/src/pocketbase'
|
||||
import { Collapse, Nav, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } from 'sveltestrap'
|
||||
import {
|
||||
Collapse,
|
||||
Dropdown,
|
||||
DropdownItem,
|
||||
DropdownMenu,
|
||||
DropdownToggle,
|
||||
Icon,
|
||||
Nav,
|
||||
Navbar,
|
||||
NavbarBrand,
|
||||
NavbarToggler,
|
||||
NavItem,
|
||||
NavLink
|
||||
} from 'sveltestrap'
|
||||
import logo from '../assets/logo-square.png'
|
||||
import Github from './Icons/Github.svelte'
|
||||
import NavbarBrandImage from './NavbarBrandImage.svelte'
|
||||
import NavbarText from './NavbarText.svelte'
|
||||
import Title from './Title/Title.svelte'
|
||||
import { TitleSize } from './Title/types'
|
||||
|
||||
@ -28,15 +43,21 @@
|
||||
<Collapse {isOpen} navbar expand="md" on:update={handleUpdate}>
|
||||
<Nav class="ms-auto" navbar>
|
||||
{#if isLoggedIn()}
|
||||
<NavItem>
|
||||
<div class="navbar-text">Welcome back, {user()?.email}</div>
|
||||
</NavItem>
|
||||
<NavItem />
|
||||
<NavItem>
|
||||
<NavLink href="/dashboard">Dashboard</NavLink>
|
||||
</NavItem>
|
||||
<NavItem>
|
||||
<NavLink on:click={handleLogout}>Logout</NavLink>
|
||||
</NavItem>
|
||||
<NavItem />
|
||||
<Dropdown nav inNavbar>
|
||||
<DropdownToggle nav><Icon name="person-fill" /></DropdownToggle>
|
||||
<DropdownMenu end>
|
||||
<DropdownItem>
|
||||
<NavbarText>{user()?.email}</NavbarText>
|
||||
</DropdownItem>
|
||||
<DropdownItem divider />
|
||||
<DropdownItem><NavLink on:click={handleLogout}>Logout</NavLink></DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
{/if}
|
||||
{#if !isLoggedIn()}
|
||||
<NavItem>
|
||||
@ -46,6 +67,9 @@
|
||||
<NavLink href="/login">Log in</NavLink>
|
||||
</NavItem>
|
||||
{/if}
|
||||
<NavItem>
|
||||
<NavLink href="https://github.com/benallfree/pockethost"><Github /></NavLink>
|
||||
</NavItem>
|
||||
</Nav>
|
||||
</Collapse>
|
||||
</Navbar>
|
||||
|
1
packages/pockethost.io/src/components/NavbarText.svelte
Normal file
1
packages/pockethost.io/src/components/NavbarText.svelte
Normal file
@ -0,0 +1 @@
|
||||
<div class="navbar-text"><slot /></div>
|
@ -1,8 +1,8 @@
|
||||
<script lang="ts">
|
||||
import { TitleSize } from './types'
|
||||
|
||||
export let first = 'Pocket'
|
||||
export let second = 'Host'
|
||||
export let first = ''
|
||||
export let second = ''
|
||||
export let third = ''
|
||||
export let size: TitleSize = TitleSize.Normal
|
||||
</script>
|
||||
@ -12,7 +12,7 @@
|
||||
<style type="text/scss">
|
||||
h1 {
|
||||
color: #ff3e00;
|
||||
font-size: 12vw;
|
||||
font-size: 30px;
|
||||
font-weight: 100;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
@ -5,4 +5,12 @@
|
||||
|
||||
<Styles />
|
||||
<Navbar />
|
||||
<slot />
|
||||
<main>
|
||||
<slot />
|
||||
</main>
|
||||
|
||||
<style lang="scss">
|
||||
main {
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
|
@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import Button from '$components/Button/Button.svelte'
|
||||
import { ButtonStyles } from '$components/Button/types'
|
||||
import { ButtonSizes } from '$components/Button/types'
|
||||
import Caption from '$components/Caption/Caption.svelte'
|
||||
import { CaptionSize } from '$components/Caption/types'
|
||||
import Feature from '$components/Feature.svelte'
|
||||
@ -11,7 +11,7 @@
|
||||
<Caption size={CaptionSize.Hero}>Firebase and Supabase...<br />ljbf</Caption>
|
||||
|
||||
<div style="max-width: 400px; margin-left: auto; margin-right: auto">
|
||||
<Button href="/signup" style={ButtonStyles.Wide}>Get Started Free</Button>
|
||||
<Button href="/signup" size={ButtonSizes.Wide}>Get Started Free</Button>
|
||||
</div>
|
||||
<Gap />
|
||||
<div>
|
||||
|
@ -1,5 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/stores'
|
||||
import Button from '$components/Button/Button.svelte'
|
||||
import Caption from '$components/Caption/Caption.svelte'
|
||||
import CodeSample from '$components/CodeSample.svelte'
|
||||
import Protected from '$components/Protected.svelte'
|
||||
@ -38,29 +39,39 @@
|
||||
</script>
|
||||
|
||||
<Protected>
|
||||
<Title />
|
||||
{#if instance}
|
||||
{#if instance.status === InstanceStatuses.Started}
|
||||
<Caption>Your PocketHost instance is now live.</Caption>
|
||||
<div>
|
||||
Admin URL: <a href={`${url}/_`} target="_blank">{`${url}/_`}</a>
|
||||
</div>
|
||||
<div>
|
||||
JavaScript:
|
||||
<CodeSample {code} />
|
||||
</div>
|
||||
<main>
|
||||
<Title />
|
||||
{#if instance}
|
||||
{#if instance.status === InstanceStatuses.Started}
|
||||
<ProvisioningStatus status={instance.status} />
|
||||
|
||||
<div>
|
||||
Admin URL: <a href={`${url}/_`} target="_blank">{`${url}/_`}</a>
|
||||
</div>
|
||||
<div>
|
||||
JavaScript:
|
||||
<CodeSample {code} />
|
||||
</div>
|
||||
{/if}
|
||||
{#if instance.status !== InstanceStatuses.Started}
|
||||
<Caption>Please stand by, your instance is starting now...</Caption>
|
||||
<div class="provisioning">
|
||||
<ProvisioningStatus status={instance.status} size={ProvisioningSize.Hero} />
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
{#if instance.status !== InstanceStatuses.Started}
|
||||
<Caption>Please stand by, your instance is starting now...</Caption>
|
||||
<div class="provisioning">
|
||||
<ProvisioningStatus status={instance.status} size={ProvisioningSize.Hero} />
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
<Button href="/dashboard">< Back to Dashboard</Button>
|
||||
</main>
|
||||
</Protected>
|
||||
|
||||
<style lang="scss">
|
||||
.provisioning {
|
||||
text-align: center;
|
||||
main {
|
||||
margin: 10px;
|
||||
.provisioning {
|
||||
text-align: center;
|
||||
}
|
||||
a {
|
||||
text-decoration: initial;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
@ -1,7 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { browser } from '$app/environment'
|
||||
import Button from '$components/Button/Button.svelte'
|
||||
import { ButtonStyles } from '$components/Button/types'
|
||||
import { ButtonColors, ButtonSizes } from '$components/Button/types'
|
||||
import Error from '$components/Error/Error.svelte'
|
||||
import { parseError } from '$components/Error/parseError'
|
||||
import Protected from '$components/Protected.svelte'
|
||||
@ -48,13 +48,12 @@
|
||||
</script>
|
||||
|
||||
<Protected>
|
||||
<Title />
|
||||
<Title first="New" second="App" />
|
||||
<main>
|
||||
<h2>New App</h2>
|
||||
<div class="caption">Choose a name for your PocketBase app.</div>
|
||||
<div class="subdomain">
|
||||
<label for="instanceName">Instance Name</label>
|
||||
<Button click={() => (instanceName = generateSlug(2))} style={ButtonStyles.Micro}>
|
||||
<Button click={() => (instanceName = generateSlug(2))} size={ButtonSizes.Micro}>
|
||||
<Fa icon={faRefresh} /></Button
|
||||
>
|
||||
|
||||
@ -67,6 +66,7 @@
|
||||
</div>
|
||||
<Error>{errorMessage}</Error>
|
||||
<Button click={handleCreate}>Create</Button>
|
||||
<Button href={`/dashboard`} color={ButtonColors.Light}>Cancel</Button>
|
||||
</main>
|
||||
</Protected>
|
||||
|
||||
|
@ -1,12 +1,14 @@
|
||||
<script lang="ts">
|
||||
import Button from '$components/Button/Button.svelte'
|
||||
import { ButtonStyles } from '$components/Button/types'
|
||||
import { ButtonSizes } from '$components/Button/types'
|
||||
import Gap from '$components/Gap.svelte'
|
||||
import Protected from '$components/Protected.svelte'
|
||||
import ProvisioningStatus from '$components/ProvisioningStatus/ProvisioningStatus.svelte'
|
||||
import Title from '$components/Title/Title.svelte'
|
||||
import { getAllInstancesById } from '@pockethost/common/src/pocketbase'
|
||||
import { InstanceStatuses, type Instance_Out_ByIdCollection } from '@pockethost/common/src/schema'
|
||||
import { values } from '@s-libs/micro-dash'
|
||||
import { Col, Container, Row } from 'sveltestrap'
|
||||
|
||||
let apps: Instance_Out_ByIdCollection = {}
|
||||
getAllInstancesById()
|
||||
@ -19,39 +21,56 @@
|
||||
</script>
|
||||
|
||||
<Protected>
|
||||
<Title />
|
||||
<Title first="Dash" second="board" />
|
||||
<main>
|
||||
<h2>Dashboard</h2>
|
||||
<h4>Apps</h4>
|
||||
{#each values(apps) as app}
|
||||
<div>
|
||||
<ProvisioningStatus status={app.status} />
|
||||
{app.subdomain}.pockethost.io
|
||||
<h2>Apps</h2>
|
||||
<Container>
|
||||
{#each values(apps) as app}
|
||||
<Row>
|
||||
<Col>
|
||||
<ProvisioningStatus status={app.status} />
|
||||
</Col>
|
||||
<Col>
|
||||
{app.subdomain}.pockethost.io
|
||||
</Col>
|
||||
|
||||
<Button style={ButtonStyles.Micro} href={`/app/instances/${app.id}`}>Details</Button>
|
||||
<Button
|
||||
disabled={app.status !== InstanceStatuses.Started}
|
||||
style={ButtonStyles.Micro}
|
||||
click={() => {
|
||||
window.open(`https://${app.subdomain}.pockethost.io/_`)
|
||||
}}>Admin</Button
|
||||
>
|
||||
</div>
|
||||
{/each}
|
||||
<Button href="/app/new">+</Button>
|
||||
<Col>
|
||||
<Button size={ButtonSizes.Micro} href={`/app/instances/${app.id}`}>Details</Button>
|
||||
|
||||
<Button
|
||||
disabled={app.status !== InstanceStatuses.Started}
|
||||
size={ButtonSizes.Micro}
|
||||
click={() => {
|
||||
window.open(`https://${app.subdomain}.pockethost.io/_`)
|
||||
}}>Admin</Button
|
||||
>
|
||||
</Col>
|
||||
</Row>
|
||||
{/each}
|
||||
</Container>
|
||||
<Gap />
|
||||
<div class="newApp">
|
||||
<Button href="/app/new" size={ButtonSizes.Wide}>+ New App</Button>
|
||||
</div>
|
||||
</main>
|
||||
</Protected>
|
||||
|
||||
<style type="text/scss">
|
||||
main {
|
||||
padding: 1em;
|
||||
margin-left: auto;
|
||||
margin-top: 10px;
|
||||
margin-right: auto;
|
||||
|
||||
.caption {
|
||||
font-size: 30px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 10px;
|
||||
margin-left: auto;
|
||||
max-width: 600px;
|
||||
padding: 10px;
|
||||
h2 {
|
||||
text-align: center;
|
||||
}
|
||||
.newApp {
|
||||
width: 200px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
@ -3,6 +3,7 @@
|
||||
import Title from '$components/Title/Title.svelte'
|
||||
import { redirect } from '$util/redirect'
|
||||
import { authViaEmail } from '@pockethost/common/src/pocketbase'
|
||||
import { Form, FormGroup, Input, Label } from 'sveltestrap'
|
||||
|
||||
let email = ''
|
||||
let password = ''
|
||||
@ -21,18 +22,21 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<Title first="Log" second="In" />
|
||||
<Title first="Log" second="in" />
|
||||
|
||||
<main>
|
||||
<error>{loginError}</error>
|
||||
<div>
|
||||
<label for="email">Email</label>
|
||||
<input name="email" type="email" bind:value={email} />
|
||||
</div>
|
||||
<div>
|
||||
<label for="password">Password</label>
|
||||
<input name="password" type="password" bind:value={password} />
|
||||
</div>
|
||||
<Form>
|
||||
<FormGroup>
|
||||
<Label for="email">Email</Label>
|
||||
<Input type="email" id="email" bind:value={email} />
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Label for="password">Password</Label>
|
||||
<Input type="password" id="password" bind:value={password} />
|
||||
</FormGroup>
|
||||
</Form>
|
||||
|
||||
<div>
|
||||
Need to <a href="/signup">create an account</a>?
|
||||
</div>
|
||||
@ -40,25 +44,9 @@
|
||||
</main>
|
||||
|
||||
<style type="text/scss">
|
||||
error {
|
||||
color: red;
|
||||
display: block;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
width: 200px;
|
||||
}
|
||||
main {
|
||||
padding: 1em;
|
||||
max-width: 300px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.caption {
|
||||
font-size: 30px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
@ -1,12 +1,15 @@
|
||||
<script lang="ts">
|
||||
import Button from '$components/Button/Button.svelte'
|
||||
import Error from '$components/Error/Error.svelte'
|
||||
import { parseError } from '$components/Error/parseError'
|
||||
import Title from '$components/Title/Title.svelte'
|
||||
import { TitleSize } from '$components/Title/types'
|
||||
import { redirect } from '$util/redirect'
|
||||
import { authViaEmail, createUser } from '@pockethost/common/src/pocketbase'
|
||||
import { Form, FormGroup, Input, Label } from 'sveltestrap'
|
||||
|
||||
let email = ''
|
||||
let errorMessage = ''
|
||||
let emailError = ''
|
||||
let password = ''
|
||||
let passwordError = ''
|
||||
|
||||
@ -19,7 +22,7 @@
|
||||
// .catch((e) => console.error(`user login error`, e))
|
||||
|
||||
const handleSignup = () => {
|
||||
errorMessage = ''
|
||||
emailError = ''
|
||||
passwordError = ''
|
||||
createUser(email, password)
|
||||
.then((user) => {
|
||||
@ -33,25 +36,27 @@
|
||||
.catch((e) => console.error(`user login error`, e))
|
||||
})
|
||||
.catch((e) => {
|
||||
errorMessage = parseError(e)
|
||||
console.error(errorMessage, e)
|
||||
emailError = parseError(e)
|
||||
console.error(emailError, e)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<Title first="Sign" second="Up" />
|
||||
<Title first="Sign" second="up" size={TitleSize.Normal} />
|
||||
|
||||
<main>
|
||||
<div>
|
||||
<label for="email">Email</label>
|
||||
<input name="email" type="email" bind:value={email} />
|
||||
<error>{errorMessage}</error>
|
||||
</div>
|
||||
<div>
|
||||
<label for="password">Password</label>
|
||||
<input name="password" type="password" bind:value={password} />
|
||||
<error>{passwordError}</error>
|
||||
</div>
|
||||
<Form>
|
||||
<FormGroup>
|
||||
<Label for="email">Email Address</Label>
|
||||
<Input type="email" bind:value={email} id="email" />
|
||||
<Error>{emailError}</Error>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Label for="password">Password</Label>
|
||||
<Input type="password" name="password" id="password" bind:value={password} />
|
||||
<Error>{passwordError}</Error>
|
||||
</FormGroup>
|
||||
</Form>
|
||||
<Button click={handleSignup} disabled={email.length === 0 || password.length === 0}>
|
||||
Sign Up
|
||||
</Button>
|
||||
@ -61,25 +66,30 @@
|
||||
</main>
|
||||
|
||||
<style type="text/scss">
|
||||
error {
|
||||
color: red;
|
||||
display: block;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
width: 200px;
|
||||
}
|
||||
main {
|
||||
padding: 1em;
|
||||
max-width: 300px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
error {
|
||||
color: red;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.caption {
|
||||
font-size: 30px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
label {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
width: 200px;
|
||||
}
|
||||
main {
|
||||
padding: 1em;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.caption {
|
||||
font-size: 30px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
Loading…
x
Reference in New Issue
Block a user