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