Compare commits
No commits in common. "a8066ab7b11c083887b0bb1231cd3b455752a1f0" and "c5b341ab5215710683562d6e969f765a192754d0" have entirely different histories.
a8066ab7b1
...
c5b341ab52
|
Before Width: | Height: | Size: 86 KiB |
|
Before Width: | Height: | Size: 126 KiB |
|
Before Width: | Height: | Size: 3.5 KiB |
|
Before Width: | Height: | Size: 4.7 KiB |
|
Before Width: | Height: | Size: 2.9 KiB |
|
Before Width: | Height: | Size: 3.9 KiB |
|
Before Width: | Height: | Size: 4.7 MiB |
|
Before Width: | Height: | Size: 11 KiB |
BIN
src/assets/images/sample.avif
Normal file
|
After Width: | Height: | Size: 963 KiB |
|
Before Width: | Height: | Size: 47 KiB |
|
|
@ -4,13 +4,13 @@
|
||||||
.button
|
.button
|
||||||
background: vars.$primaryColor
|
background: vars.$primaryColor
|
||||||
border: none
|
border: none
|
||||||
border-radius: 32px
|
border-radius: 16px
|
||||||
color: white
|
color: white
|
||||||
padding: 0.5rem 1.25rem
|
padding: 0.5rem 1.25rem
|
||||||
text-align: center
|
text-align: center
|
||||||
text-decoration: none
|
text-decoration: none
|
||||||
display: inline-block
|
display: inline-block
|
||||||
font-size: 1rem
|
font-size: 0.75rem
|
||||||
font-weight: 700
|
font-weight: 700
|
||||||
cursor: pointer
|
cursor: pointer
|
||||||
transition: all 0.2s ease-out
|
transition: all 0.2s ease-out
|
||||||
|
|
|
||||||
|
|
@ -2,25 +2,22 @@ import './Button.sass'
|
||||||
import { Show } from 'solid-js'
|
import { Show } from 'solid-js'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
label?: string
|
label?: string;
|
||||||
to?: string
|
to?: string;
|
||||||
onClick?: () => void
|
onClick?: () => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default (props: Props) => {
|
export default (props: Props) => {
|
||||||
return (
|
return
|
||||||
<>
|
<>
|
||||||
<Show when={props.to}>
|
<Show when={props.to}>
|
||||||
<a href={props.to} aria-label={props.label}>
|
<a href={props.to} aria-label={props.label}>
|
||||||
<button class="button">{props.label || 'Click Me!'}</button>
|
<button class="button">{props.label || 'Click Me!'}</button>
|
||||||
</a>
|
</a>
|
||||||
</Show>
|
</Show>
|
||||||
|
|
||||||
<Show when={!props.to}>
|
<Show when={!props.to}>
|
||||||
<button class="button" onClick={props.onClick}>
|
<button class="button" onClick={props.onClick}>{props.label || 'Click Me!'}</button>
|
||||||
{props.label || 'Click Me!'}
|
</Show>
|
||||||
</button>
|
</>
|
||||||
</Show>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
@ -3,8 +3,6 @@ const { title } = Astro.props
|
||||||
|
|
||||||
const websiteName = 'Template'
|
const websiteName = 'Template'
|
||||||
const websiteDescription = 'This is just a template.'
|
const websiteDescription = 'This is just a template.'
|
||||||
|
|
||||||
import Background from '../builtin-components/Background/Background'
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
@ -18,7 +16,6 @@ import Background from '../builtin-components/Background/Background'
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body id="body">
|
<body id="body">
|
||||||
<Background color="#0c1b31" />
|
|
||||||
<slot />
|
<slot />
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -29,5 +26,6 @@ import Background from '../builtin-components/Background/Background'
|
||||||
|
|
||||||
#body
|
#body
|
||||||
font-family: fonts.$Inter
|
font-family: fonts.$Inter
|
||||||
|
background-color: vars.$background
|
||||||
color: vars.$textColor
|
color: vars.$textColor
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,30 +1,21 @@
|
||||||
---
|
---
|
||||||
import Layout from '../layouts/Layout.astro'
|
import Layout from '../layouts/Layout.astro'
|
||||||
import Button from '../builtin-components/Button/Button.tsx'
|
import Button from '../builtin-components/Button/Button.tsx'
|
||||||
import Image from '../builtin-components/Image/Image'
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout title="Home">
|
<Layout title="Home">
|
||||||
<main class="page">
|
<main class="page">
|
||||||
<!-- <section class="image"> -->
|
<h1>Main Page</h1>
|
||||||
<Image src="fwt.png" size={250} />
|
|
||||||
<!-- </section> -->
|
|
||||||
|
|
||||||
<h1>Fast WebApp Template</h1>
|
|
||||||
<Button label="Next Page" to="/next" />
|
<Button label="Next Page" to="/next" />
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<style lang="sass">
|
|
||||||
.page
|
|
||||||
display: flex
|
|
||||||
flex-direction: column
|
|
||||||
flex-wrap: wrap
|
|
||||||
justify-content: center
|
|
||||||
align-items: center
|
|
||||||
align-content: center
|
|
||||||
margin: 2rem
|
|
||||||
height: 90vh
|
|
||||||
|
|
||||||
|
|
||||||
</style>
|
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
||||||
|
<style lang="sass">
|
||||||
|
.page
|
||||||
|
display: flex
|
||||||
|
flex-direction: column
|
||||||
|
text-align: center
|
||||||
|
justify-content: center
|
||||||
|
align-items: center
|
||||||
|
margin: 2rem
|
||||||
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,17 +1,15 @@
|
||||||
---
|
---
|
||||||
import Layout from '../layouts/Layout.astro'
|
import Layout from '../layouts/Layout.astro'
|
||||||
import Button from '../builtin-components/Button/Button.tsx'
|
import Button from '../builtin-components/Button/Button.tsx'
|
||||||
import Image from '../builtin-components/Image/Image'
|
import { Picture } from 'astro:assets'
|
||||||
|
import sample from '/src/images/sample.avif'
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout title="Home">
|
<Layout title="Home">
|
||||||
<main class="page">
|
<main class="page">
|
||||||
<h1>Second Page</h1>
|
<h1>Second Page</h1>
|
||||||
<Button label="Back to Home" to="/" />
|
<Button label="Back to Home" to="/" />
|
||||||
|
<Picture class="image" src={sample} alt="Example Image" width={400} quality={85} formats={['avif', 'webp']} />
|
||||||
<section class="image">
|
|
||||||
<Image src="sample.png" alt="Example Image" size={400} />
|
|
||||||
</section>
|
|
||||||
</main>
|
</main>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
||||||
|
|
@ -23,7 +21,6 @@ import Image from '../builtin-components/Image/Image'
|
||||||
justify-content: center
|
justify-content: center
|
||||||
align-items: center
|
align-items: center
|
||||||
margin: 2rem
|
margin: 2rem
|
||||||
height: auto
|
|
||||||
|
|
||||||
.image
|
.image
|
||||||
margin: 2rem 0 0 0
|
margin: 2rem 0 0 0
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,3 @@
|
||||||
@use './breakpoint' as view
|
|
||||||
|
|
||||||
.fullscreen
|
.fullscreen
|
||||||
position: fixed
|
position: fixed
|
||||||
top: 0
|
top: 0
|
||||||
|
|
@ -8,7 +6,7 @@
|
||||||
height: 100vh
|
height: 100vh
|
||||||
object-fit: cover
|
object-fit: cover
|
||||||
z-index: -1
|
z-index: -1
|
||||||
opacity: 1
|
opacity: 0.2
|
||||||
|
|
||||||
.on-desktop-only
|
.on-desktop-only
|
||||||
@media only screen and (max-width: view.$desktop)
|
@media only screen and (max-width: view.$desktop)
|
||||||
|
|
|
||||||