Updated
This commit is contained in:
parent
8197905483
commit
efc045bebd
48 changed files with 779 additions and 1140 deletions
50
@dasig/components/Background.astro
Normal file
50
@dasig/components/Background.astro
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
---
|
||||
import * as fs from 'fs'
|
||||
import webpPath from '../images/background.webp'
|
||||
import avifPath from '../images/background.avif'
|
||||
import noBackground from '../images/no-background.webp'
|
||||
|
||||
interface Props {
|
||||
image?: boolean
|
||||
}
|
||||
|
||||
const { image } = Astro.props
|
||||
|
||||
let imageLoaded = false
|
||||
|
||||
const checkBackground = () => {
|
||||
if (!fs.existsSync(avifPath.src) && !fs.existsSync(webpPath.src)) {
|
||||
imageLoaded = true
|
||||
} else {
|
||||
imageLoaded = false
|
||||
}
|
||||
}
|
||||
|
||||
checkBackground()
|
||||
---
|
||||
|
||||
{
|
||||
image &&
|
||||
(imageLoaded ? (
|
||||
<picture class="fullscreen">
|
||||
<source srcset={avifPath.src} type="image/avif" />
|
||||
<source srcset={webpPath.src} type="image/webp" />
|
||||
<source srcset={noBackground.src} type="image/webp" />
|
||||
<img width="1920" height="auto" decoding="async" loading="lazy" alt="An image background" />
|
||||
</picture>
|
||||
) : (
|
||||
<picture class="fullscreen">
|
||||
<source srcset={noBackground.src} type="image/webp" />
|
||||
<img width="1920" height="auto" decoding="async" loading="lazy" alt="An alternative background if found no image background" />
|
||||
</picture>
|
||||
))
|
||||
}
|
||||
|
||||
<style lang="sass">
|
||||
@use '../../configs/design/site.sass' as design
|
||||
|
||||
:root
|
||||
color-scheme: light dark
|
||||
background-color: light-dark(design.$light-background, design.$dark-background)
|
||||
transition: background-color 0.6s ease-out
|
||||
</style>
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
import '../styles/Background.sass'
|
||||
import { Show, createSignal } from 'solid-js'
|
||||
import fs from 'fs'
|
||||
import webpPath from '../images/background.webp'
|
||||
import avifPath from '../images/background.avif'
|
||||
import noBackground from '../images/no-background.webp'
|
||||
|
||||
interface Props {
|
||||
image?: boolean
|
||||
color?: string
|
||||
}
|
||||
|
||||
let [imageLoaded, setImageLoaded] = createSignal(false)
|
||||
|
||||
const checkBackground = () => {
|
||||
if (!fs.existsSync(avifPath.src) && !fs.existsSync(webpPath.src)) {
|
||||
setImageLoaded(true)
|
||||
} else {
|
||||
setImageLoaded(false)
|
||||
}
|
||||
}
|
||||
|
||||
export default (props: Props) => {
|
||||
checkBackground()
|
||||
|
||||
return (
|
||||
<>
|
||||
<Show when={props.image}>
|
||||
<Show when={imageLoaded()}>
|
||||
<picture class="fullscreen">
|
||||
<source srcset={avifPath.src} type="image/avif" />
|
||||
<source srcset={webpPath.src} type="image/webp" />
|
||||
<source srcset={noBackground.src} type="image/webp" />
|
||||
<img width="1920" height="auto" decoding="async" loading="lazy" alt="An image background" />
|
||||
</picture>
|
||||
</Show>
|
||||
<Show when={!imageLoaded()}>
|
||||
<picture class="fullscreen">
|
||||
<source srcset={noBackground.src} type="image/webp" />
|
||||
<img width="1920" height="auto" decoding="async" loading="lazy" alt="An alternative background if found no image background" />
|
||||
</picture>
|
||||
</Show>
|
||||
</Show>
|
||||
|
||||
<Show when={!props.image}>
|
||||
<div style={{ background: props.color }} class="fullscreen" />
|
||||
</Show>
|
||||
</>
|
||||
)
|
||||
}
|
||||
22
@dasig/components/Box.astro
Normal file
22
@dasig/components/Box.astro
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
---
|
||||
type Props = {
|
||||
thickness: number
|
||||
color?: string
|
||||
curved?: boolean
|
||||
}
|
||||
const { thickness, color, curved } = Astro.props
|
||||
const boxClass = curved ? 'dasig-curvedbox' : 'dasig-box'
|
||||
---
|
||||
|
||||
<section class={boxClass} style={{ border: `${thickness}px solid ${color || 'white'}` }}>
|
||||
<slot />
|
||||
</section>
|
||||
|
||||
<style lang="sass">
|
||||
.dasig-box
|
||||
padding: 1rem
|
||||
|
||||
.dasig-curvedbox
|
||||
@extend .dasig-box
|
||||
border-radius: 8px
|
||||
</style>
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
import '../styles/Box.sass'
|
||||
import { type JSXElement, createMemo } from 'solid-js'
|
||||
|
||||
interface Props {
|
||||
thickness: number
|
||||
color?: string
|
||||
children: JSXElement
|
||||
curved?: boolean
|
||||
}
|
||||
|
||||
export default (props: Props) => {
|
||||
const boxClass = createMemo(() => (props.curved ? 'dasig-curvedbox' : 'dasig-box'))
|
||||
|
||||
return (
|
||||
<section class={boxClass()} style={{ border: `${props.thickness}px solid ${props.color || 'white'}` }}>
|
||||
{props.children}
|
||||
</section>
|
||||
)
|
||||
}
|
||||
54
@dasig/components/Column.astro
Normal file
54
@dasig/components/Column.astro
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
---
|
||||
interface Props {
|
||||
content?: 'top' | 'center' | 'right' | 'split' | 'spaced'
|
||||
gap?: number
|
||||
}
|
||||
|
||||
const { content, gap } = Astro.props
|
||||
---
|
||||
|
||||
<section class={`dasig-column-${content || 'center'}`} style={`gap: ${gap}rem`}>
|
||||
<slot />
|
||||
</section>
|
||||
|
||||
<style lang="sass">
|
||||
.dasig-column-top
|
||||
display: flex
|
||||
flex-direction: column
|
||||
flex-wrap: wrap
|
||||
justify-content: flex-start
|
||||
align-items: flex-start
|
||||
align-content: center
|
||||
|
||||
.dasig-column-center
|
||||
display: flex
|
||||
flex-direction: column
|
||||
flex-wrap: wrap
|
||||
justify-content: center
|
||||
align-items: center
|
||||
align-content: center
|
||||
|
||||
.dasig-column-right
|
||||
display: flex
|
||||
flex-direction: column
|
||||
flex-wrap: wrap
|
||||
justify-content: flex-end
|
||||
align-items: center
|
||||
align-content: center
|
||||
|
||||
.dasig-column-split
|
||||
display: flex
|
||||
flex-direction: column
|
||||
flex-wrap: wrap
|
||||
justify-content: space-between
|
||||
align-items: center
|
||||
align-content: center
|
||||
|
||||
.dasig-column-spaced
|
||||
display: flex
|
||||
flex-direction: column
|
||||
flex-wrap: wrap
|
||||
justify-content: space-around
|
||||
align-items: center
|
||||
align-content: center
|
||||
</style>
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
import '../styles/Column.sass'
|
||||
import type { JSXElement } from 'solid-js'
|
||||
|
||||
interface Props {
|
||||
children: JSXElement
|
||||
content?: 'top' | 'center' | 'right' | 'split' | 'spaced'
|
||||
gap?: number
|
||||
}
|
||||
|
||||
export default (props: Props) => {
|
||||
return (
|
||||
<>
|
||||
<section class={`dasig-column-${props.content || 'center'}`} style={`gap: ${props.gap}rem`}>
|
||||
{props.children}
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
16
@dasig/components/Copyright.astro
Normal file
16
@dasig/components/Copyright.astro
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
---
|
||||
import * as toml from 'toml'
|
||||
import * as fs from 'fs'
|
||||
|
||||
const config = toml.parse(fs.readFileSync('configs/config.site.toml', 'utf8'))
|
||||
|
||||
// interface Props {
|
||||
// year: string
|
||||
// name: string
|
||||
// }
|
||||
---
|
||||
|
||||
<span>
|
||||
Copyright © {config.copyright.year}
|
||||
{config.copyright.name} All Rights Reserved.
|
||||
</span>
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
import * as toml from 'toml'
|
||||
import * as fs from 'fs'
|
||||
|
||||
const config = toml.parse(fs.readFileSync('configs/config.site.toml', 'utf8'))
|
||||
|
||||
interface Props {
|
||||
year: string
|
||||
name: string
|
||||
}
|
||||
|
||||
|
||||
export default (props: Props) => {
|
||||
return (
|
||||
<span>
|
||||
Copyright © {config.copyright.year} {config.copyright.name} All Rights Reserved.
|
||||
</span>
|
||||
)
|
||||
}
|
||||
51
@dasig/components/Display.astro
Normal file
51
@dasig/components/Display.astro
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
---
|
||||
interface Props {
|
||||
desktop?: boolean
|
||||
tablet?: boolean
|
||||
mobile?: boolean
|
||||
}
|
||||
|
||||
const { desktop, tablet, mobile } = Astro.props
|
||||
---
|
||||
|
||||
{
|
||||
desktop && !tablet && !mobile && (
|
||||
<div class="on-desktop-only">
|
||||
<slot />
|
||||
</div>
|
||||
)
|
||||
}{
|
||||
!desktop && tablet && !mobile && (
|
||||
<div class="on-tablet-only">
|
||||
<slot />
|
||||
</div>
|
||||
)
|
||||
}{
|
||||
!desktop && !tablet && mobile && (
|
||||
<div class="on-mobile-only">
|
||||
<slot />
|
||||
</div>
|
||||
)
|
||||
}{
|
||||
desktop && tablet && !mobile && (
|
||||
<div class="on-desktop-tablet-only">
|
||||
<slot />
|
||||
</div>
|
||||
)
|
||||
}{
|
||||
desktop && !tablet && mobile && (
|
||||
<div class="on-desktop-mobile-only">
|
||||
<slot />
|
||||
</div>
|
||||
)
|
||||
}{
|
||||
!desktop && tablet && mobile && (
|
||||
<div class="on-tablet-mobile-only">
|
||||
<slot />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
<style lang="sass">
|
||||
@use '/src/styles/breakpoints.sass'
|
||||
</style>
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
import '../styles/Viewport.sass'
|
||||
import { type JSXElement, Switch, Match } from 'solid-js'
|
||||
|
||||
interface Props {
|
||||
children: JSXElement
|
||||
desktop?: boolean
|
||||
tablet?: boolean
|
||||
mobile?: boolean
|
||||
}
|
||||
|
||||
export default (props: Props) => {
|
||||
return (
|
||||
<>
|
||||
<Switch>
|
||||
<Match when={props.desktop && !props.tablet && !props.mobile}>
|
||||
<div class="on-desktop-only">{props.children}</div>
|
||||
</Match>
|
||||
|
||||
<Match when={!props.desktop && props.tablet && !props.mobile}>
|
||||
<div class="on-tablet-only">{props.children}</div>
|
||||
</Match>
|
||||
|
||||
<Match when={!props.desktop && !props.tablet && props.mobile}>
|
||||
<div class="on-mobile-only">{props.children}</div>
|
||||
</Match>
|
||||
|
||||
<Match when={props.desktop && props.tablet && !props.mobile}>
|
||||
<div class="on-desktop-tablet-only">{props.children}</div>
|
||||
</Match>
|
||||
|
||||
<Match when={props.desktop && !props.tablet && props.mobile}>
|
||||
<div class="on-desktop-mobile-only">{props.children}</div>
|
||||
</Match>
|
||||
|
||||
<Match when={!props.desktop && props.tablet && props.mobile}>
|
||||
<div class="on-tablet-mobile-only">{props.children}</div>
|
||||
</Match>
|
||||
</Switch>
|
||||
</>
|
||||
)
|
||||
}
|
||||
23
@dasig/components/Footer.astro
Normal file
23
@dasig/components/Footer.astro
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
---
|
||||
|
||||
---
|
||||
|
||||
<footer class="dasig-footer">
|
||||
<small><slot /></small>
|
||||
</footer>
|
||||
|
||||
<style lang="sass">
|
||||
@use '../../configs/design/sizes' as view
|
||||
|
||||
.dasig-footer
|
||||
padding: 1rem 0
|
||||
margin: 0 2rem
|
||||
position: fixed
|
||||
bottom: 0
|
||||
width: 100%
|
||||
opacity: 0.8
|
||||
font-size: 1rem
|
||||
|
||||
@media only screen and (max-width: view.$tablet)
|
||||
font-size: 0.75rem
|
||||
</style>
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
import '../styles/Footer.sass'
|
||||
import type { JSXElement } from 'solid-js'
|
||||
|
||||
interface Props {
|
||||
children: JSXElement
|
||||
}
|
||||
|
||||
export default (props: Props) => {
|
||||
return (
|
||||
<>
|
||||
<footer class="dasig-footer">
|
||||
<small>{props.children}</small>
|
||||
</footer>
|
||||
</>
|
||||
)
|
||||
}
|
||||
7
@dasig/components/Form.astro
Normal file
7
@dasig/components/Form.astro
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
|
||||
---
|
||||
|
||||
<form method="post" enctype="application/x-www-form-urlencoded">
|
||||
<slot />
|
||||
</form>
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
import '../styles/Form.sass'
|
||||
import type { JSXElement } from 'solid-js'
|
||||
|
||||
interface Props {
|
||||
children: JSXElement
|
||||
}
|
||||
|
||||
export default (props: Props) => {
|
||||
return (
|
||||
<>
|
||||
<form method="post" enctype="application/x-www-form-urlencoded">
|
||||
{props.children}
|
||||
</form>
|
||||
</>
|
||||
)
|
||||
}
|
||||
74
@dasig/components/HTML.astro
Normal file
74
@dasig/components/HTML.astro
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
---
|
||||
import * as fs from 'fs'
|
||||
import * as toml from 'toml'
|
||||
import background1 from '../images/background.avif'
|
||||
import background2 from '../images/background.webp'
|
||||
|
||||
interface Props {
|
||||
title: string
|
||||
font?: 'roboto' | 'inter' | 'montserrat' | 'open-sans' | 'public-sans'
|
||||
preloadBackground?: boolean
|
||||
}
|
||||
|
||||
const { title, font, preloadBackground } = Astro.props
|
||||
const config = toml.parse(fs.readFileSync('configs/config.site.toml', 'utf8'))
|
||||
---
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<base href="/" />
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
||||
<meta name="name" content={config.website.name} />
|
||||
<meta name="description" content={config.website.description} />
|
||||
<meta name="title" property="og:title" content={config.website.name} />
|
||||
<meta name="keywords" content="HTML, CSS, JavaScript" />
|
||||
<meta name="developer" content={config.website.developer} />
|
||||
<meta name="designer" content={config.website.designer} />
|
||||
<meta property="og:description" content={config.website.description} />
|
||||
<meta property="og:type" content="website" />
|
||||
<link rel="icon" type="image/png" href="/favicon.png" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
|
||||
<link rel="manifest" href="/site.webmanifest" />
|
||||
{font ? <link rel="preconnect" href="https://cdn.jsdelivr.net" /> : <></>}
|
||||
{preloadBackground ?
|
||||
<link rel="preload" href={background1.src} as="image" type="image/svg+xml" />
|
||||
<link rel="preload" href={background2.src} as="image" type="image/svg+xml" />
|
||||
: <></>}
|
||||
|
||||
<title>{title}</title>
|
||||
</head>
|
||||
|
||||
<body class={font}><slot /></body>
|
||||
</html>
|
||||
|
||||
<style lang="sass">
|
||||
@use '../../configs/design/colors.sass' as colors
|
||||
@use '/src/styles/fonts.sass' as fonts
|
||||
|
||||
.body
|
||||
color: colors.$white
|
||||
|
||||
.inter
|
||||
@extend .body
|
||||
font-family: fonts.$Inter
|
||||
|
||||
.roboto
|
||||
@extend .body
|
||||
font-family: fonts.$Roboto
|
||||
|
||||
.montserrat
|
||||
@extend .body
|
||||
font-family: fonts.$Montserrat
|
||||
|
||||
.open-sans
|
||||
@extend .body
|
||||
font-family: fonts.$OpenSans
|
||||
|
||||
.public-sans
|
||||
@extend .body
|
||||
font-family: fonts.$PublicSans
|
||||
|
||||
</style>
|
||||
|
|
@ -1,51 +0,0 @@
|
|||
import '../styles/HTML.sass'
|
||||
import * as fs from "fs";
|
||||
import * as toml from 'toml';
|
||||
import { type JSXElement, Show } from 'solid-js'
|
||||
import background1 from '../images/background.avif'
|
||||
import background2 from '../images/background.webp'
|
||||
|
||||
interface Props {
|
||||
title: string
|
||||
children: JSXElement
|
||||
font?: 'roboto' | 'inter' | 'montserrat' | 'open-sans' | 'public-sans'
|
||||
preloadBackground?: boolean
|
||||
}
|
||||
|
||||
export default (props: Props) => {
|
||||
const config = toml.parse(fs.readFileSync('configs/config.site.toml', 'utf8'))
|
||||
return (
|
||||
<>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<base href="/" />
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
||||
<meta name="name" content={config.website.name} />
|
||||
<meta name="description" content={config.website.description} />
|
||||
<meta name="title" property="og:title" content={config.website.name} />
|
||||
<meta name="keywords" content="HTML, CSS, JavaScript" />
|
||||
<meta name="developer" content={config.website.developer} />
|
||||
<meta name="designer" content={config.website.designer} />
|
||||
<meta property="og:description" content={config.website.description} />
|
||||
<meta property="og:type" content="website" />
|
||||
<link rel="icon" type="image/png" href="/favicon.png" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
|
||||
<link rel="manifest" href="/site.webmanifest" />
|
||||
<Show when={props.font}>
|
||||
<link rel="preconnect" href="https://cdn.jsdelivr.net" />
|
||||
</Show>
|
||||
<Show when={props.preloadBackground}>
|
||||
<link rel="preload" href={background1.src} as="image" type="image/svg+xml" />
|
||||
<link rel="preload" href={background2.src} as="image" type="image/svg+xml" />
|
||||
</Show>
|
||||
<title>{props.title}</title>
|
||||
</head>
|
||||
|
||||
<body class={props.font}>{props.children}</body>
|
||||
</html>
|
||||
</>
|
||||
)
|
||||
}
|
||||
17
@dasig/components/Image.astro
Normal file
17
@dasig/components/Image.astro
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
---
|
||||
interface Props {
|
||||
avif: string
|
||||
webp: string
|
||||
size?: number
|
||||
alt?: string
|
||||
radius?: number
|
||||
}
|
||||
|
||||
const { avif, webp, size, alt, radius } = Astro.props
|
||||
---
|
||||
|
||||
<picture>
|
||||
<source srcset={avif} type="image/avif" />
|
||||
<source srcset={webp} type="image/webp" />
|
||||
<img style={`border-radius: ${radius}rem`} width={size} height="auto" decoding="async" loading="lazy" alt={alt} />
|
||||
</picture>
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
interface Props {
|
||||
avif: string
|
||||
webp: string
|
||||
size?: number
|
||||
alt?: string
|
||||
radius?: number
|
||||
}
|
||||
|
||||
export default (props: Props) => {
|
||||
return (
|
||||
<picture>
|
||||
<source srcset={props.avif} type="image/avif" />
|
||||
<source srcset={props.webp} type="image/webp" />
|
||||
<img style={`border-radius: ${props.radius}rem`} width={props.size} height="auto" decoding="async" loading="lazy" alt={props.alt} />
|
||||
</picture>
|
||||
)
|
||||
}
|
||||
18
@dasig/components/Link.astro
Normal file
18
@dasig/components/Link.astro
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
---
|
||||
interface Props {
|
||||
to: string
|
||||
newtab?: boolean
|
||||
}
|
||||
|
||||
const { to, newtab } = Astro.props
|
||||
---
|
||||
|
||||
<a href={to} aria-label={`Go to ${to}`} rel="noopener" target={newtab ? '_blank' : '_self'} data-astro-prefetch>
|
||||
<slot />
|
||||
</a>
|
||||
|
||||
<style lang="sass">
|
||||
a
|
||||
text-decoration: none
|
||||
color: inherit
|
||||
</style>
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
import '../styles/Link.sass'
|
||||
|
||||
interface Props {
|
||||
to: string
|
||||
children?: any
|
||||
newtab?: boolean
|
||||
}
|
||||
|
||||
export default (props: Props) => {
|
||||
return (
|
||||
<>
|
||||
<a href={props.to} aria-label={`Go to ${props.to}`} rel="noopener" target={props.newtab ? '_blank' : '_self'} data-astro-prefetch>
|
||||
{props.children}
|
||||
</a>
|
||||
</>
|
||||
)
|
||||
}
|
||||
16
@dasig/components/Logo.astro
Normal file
16
@dasig/components/Logo.astro
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
---
|
||||
import webpPath from '../images/logo.webp'
|
||||
import avifPath from '../images/logo.avif'
|
||||
|
||||
interface Props {
|
||||
size?: number
|
||||
}
|
||||
|
||||
const { size } = Astro.props
|
||||
---
|
||||
|
||||
<picture>
|
||||
<source srcset={avifPath.src} type="image/avif" />
|
||||
<source srcset={webpPath.src} type="image/webp" />
|
||||
<img width={size} height="auto" decoding="async" loading="lazy" alt="logo" />
|
||||
</picture>
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
import webpPath from '../images/logo.webp'
|
||||
import avifPath from '../images/logo.avif'
|
||||
|
||||
interface Props {
|
||||
size?: number
|
||||
alt?: string
|
||||
}
|
||||
|
||||
export default (props: Props) => {
|
||||
return (
|
||||
<>
|
||||
<picture>
|
||||
<source srcset={avifPath.src} type="image/avif" />
|
||||
<source srcset={webpPath.src} type="image/webp" />
|
||||
<img width={props.size} height="auto" decoding="async" loading="lazy" alt="logo" />
|
||||
</picture>
|
||||
</>
|
||||
)
|
||||
}
|
||||
44
@dasig/components/Modal.astro
Normal file
44
@dasig/components/Modal.astro
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
---
|
||||
interface Props {
|
||||
background?: string
|
||||
color?: string
|
||||
border?: string
|
||||
}
|
||||
|
||||
const { background, color, border } = Astro.props
|
||||
---
|
||||
|
||||
{
|
||||
border ? (
|
||||
<div class="modal__content" style={`background-color: ${background}; color: ${color}; border: 2px solid ${border}`}>
|
||||
<slot />
|
||||
</div>
|
||||
) : (
|
||||
<div class="modal__content" style={`background-color: ${background}; color: ${color}; box-shadow: 5px 4px 6px rgba(0, 0, 0, 0.5)`}>
|
||||
<slot />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
<style lang="sass">
|
||||
@use '../../configs/design/site' as site
|
||||
@use 'sass:color'
|
||||
|
||||
.modal
|
||||
display: flex
|
||||
justify-content: center
|
||||
align-items: center
|
||||
position: fixed
|
||||
top: 0
|
||||
left: 0
|
||||
width: 100%
|
||||
height: 100%
|
||||
backdrop-filter: blur(20px)
|
||||
background-color: rgba(color.adjust(site.$dark-background, $blackness: 5%), 0.6)
|
||||
z-index: 999
|
||||
|
||||
&__content
|
||||
border-radius: 8px
|
||||
padding: 2rem
|
||||
position: relative
|
||||
</style>
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
import '../styles/Modal.sass'
|
||||
import { type JSXElement, Show, createSignal } from 'solid-js'
|
||||
|
||||
interface Props {
|
||||
children: JSXElement
|
||||
background?: string
|
||||
color?: string
|
||||
border?: string
|
||||
}
|
||||
|
||||
export default (props: Props) => {
|
||||
return (
|
||||
<>
|
||||
<Show when={props.border}>
|
||||
<div class="modal__content" style={`background-color: ${props.background}; color: ${props.color}; border: 2px solid ${props.border}`}>
|
||||
{props.children}
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<Show when={!props.border}>
|
||||
<div class="modal__content" style={`background-color: ${props.background}; color: ${props.color}; box-shadow: 5px 4px 6px rgba(0, 0, 0, 0.5)`}>
|
||||
{props.children}
|
||||
</div>
|
||||
</Show>
|
||||
</>
|
||||
)
|
||||
}
|
||||
22
@dasig/components/Navbar.astro
Normal file
22
@dasig/components/Navbar.astro
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
---
|
||||
import Row from './Row.astro'
|
||||
|
||||
interface Props {
|
||||
transparent?: boolean
|
||||
}
|
||||
|
||||
const { transparent } = Astro.props
|
||||
---
|
||||
|
||||
<nav class="dasig-nav" role="navigation" aria-label="main navigation">
|
||||
<Row content="split"><slot /></Row>
|
||||
</nav>
|
||||
|
||||
<style lang="sass">
|
||||
.dasig-nav
|
||||
position: fixed
|
||||
top: 0
|
||||
width: 100%
|
||||
padding: 1rem 0
|
||||
// margin: 5rem
|
||||
</style>
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
import '../styles/Navbar.sass'
|
||||
import Row from './Row'
|
||||
|
||||
interface Props {
|
||||
transparent?: boolean
|
||||
children: HTMLElement
|
||||
}
|
||||
|
||||
export default (props: Props) => {
|
||||
return (
|
||||
<>
|
||||
<nav class="nav" role="navigation" aria-label="main navigation">
|
||||
<Row content="split">{props.children}</Row>
|
||||
</nav>
|
||||
</>
|
||||
)
|
||||
}
|
||||
12
@dasig/components/Padding.astro
Normal file
12
@dasig/components/Padding.astro
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
---
|
||||
interface Props {
|
||||
left: number
|
||||
right: number
|
||||
top?: number
|
||||
bottom?: number
|
||||
}
|
||||
|
||||
const { left, right, top, bottom } = Astro.props
|
||||
---
|
||||
|
||||
<div style={{ padding: `${top || 0}rem ${right}rem ${bottom || 0}rem ${left}rem` }}><slot /></div>
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
import type { JSXElement } from 'solid-js'
|
||||
|
||||
interface Props {
|
||||
left: number
|
||||
right: number
|
||||
top?: number
|
||||
bottom?: number
|
||||
children: JSXElement
|
||||
}
|
||||
|
||||
export default (props: Props) => {
|
||||
return <div style={{ padding: `${props.top || 0}rem ${props.right}rem ${props.bottom || 0}rem ${props.left}rem` }}>{props.children}</div>
|
||||
}
|
||||
35
@dasig/components/Page.astro
Normal file
35
@dasig/components/Page.astro
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
---
|
||||
interface Props {
|
||||
alignment?: 'row' | 'column'
|
||||
}
|
||||
|
||||
const { alignment } = Astro.props
|
||||
---
|
||||
|
||||
{
|
||||
alignment ? (
|
||||
<main class={`dasig-page-${alignment}`}>
|
||||
<slot />
|
||||
</main>
|
||||
) : (
|
||||
<main class="dasig-page">
|
||||
<slot />
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
||||
<style lang="sass">
|
||||
.dasig-page
|
||||
margin: 2rem
|
||||
height: auto
|
||||
min-height: 90vh
|
||||
|
||||
.dasig-page-column
|
||||
@extend .dasig-page
|
||||
display: flex
|
||||
flex-direction: column
|
||||
|
||||
.dasig-page-row
|
||||
@extend .dasig-page
|
||||
flex-direction: row
|
||||
</style>
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
import '../styles/Page.sass'
|
||||
import { Show } from 'solid-js'
|
||||
|
||||
interface Props {
|
||||
children?: any
|
||||
alignment?: 'row' | 'column'
|
||||
}
|
||||
|
||||
export default (props: Props) => {
|
||||
return (
|
||||
<>
|
||||
<Show when={props.alignment}>
|
||||
<main class={`dasig-page-${props.alignment}`}>{props.children}</main>
|
||||
</Show>
|
||||
<Show when={!props.alignment}>
|
||||
<main class="dasig-page">{props.children}</main>
|
||||
</Show>
|
||||
</>
|
||||
)
|
||||
}
|
||||
70
@dasig/components/Row.astro
Normal file
70
@dasig/components/Row.astro
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
---
|
||||
interface Props {
|
||||
content?: 'left' | 'center' | 'right' | 'split' | 'spaced' | 'even'
|
||||
gap?: number
|
||||
}
|
||||
|
||||
const { content, gap } = Astro.props
|
||||
---
|
||||
|
||||
{
|
||||
gap ? (
|
||||
<section class={`dasig-row-${content || 'center'}`} style={`gap: ${gap}rem`}>
|
||||
<slot />
|
||||
</section>
|
||||
) : (
|
||||
<section class={`dasig-row-${content || 'center'}`}>
|
||||
<slot />
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
<style lang="sass">
|
||||
.dasig-row-left
|
||||
display: flex
|
||||
flex-direction: row
|
||||
flex-wrap: wrap
|
||||
justify-content: flex-start
|
||||
align-items: center
|
||||
align-content: center
|
||||
|
||||
.dasig-row-center
|
||||
display: flex
|
||||
flex-direction: row
|
||||
flex-wrap: wrap
|
||||
justify-content: center
|
||||
align-items: center
|
||||
align-content: center
|
||||
|
||||
.dasig-row-right
|
||||
display: flex
|
||||
flex-direction: row
|
||||
flex-wrap: wrap
|
||||
justify-content: flex-end
|
||||
align-items: center
|
||||
align-content: center
|
||||
|
||||
.dasig-row-split
|
||||
display: flex
|
||||
flex-direction: row
|
||||
flex-wrap: wrap
|
||||
justify-content: space-between
|
||||
align-items: center
|
||||
align-content: center
|
||||
|
||||
.dasig-row-spaced
|
||||
display: flex
|
||||
flex-direction: row
|
||||
flex-wrap: wrap
|
||||
justify-content: space-around
|
||||
align-items: center
|
||||
align-content: center
|
||||
|
||||
.dasig-row-even
|
||||
display: flex
|
||||
flex-direction: row
|
||||
flex-wrap: wrap
|
||||
justify-content: space-evenly
|
||||
align-items: center
|
||||
align-content: center
|
||||
</style>
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
import '../styles/Row.sass'
|
||||
import { Show, type JSXElement } from 'solid-js'
|
||||
|
||||
interface Props {
|
||||
children: JSXElement
|
||||
content?: 'left' | 'center' | 'right' | 'split' | 'spaced' | 'even'
|
||||
gap?: number
|
||||
}
|
||||
|
||||
export default (props: Props) => {
|
||||
return (
|
||||
<>
|
||||
<Show when={props.gap}>
|
||||
<section class={`dasig-row-${props.content || 'center'}`} style={`gap: ${props.gap}rem`}>
|
||||
{props.children}
|
||||
</section>
|
||||
</Show>
|
||||
|
||||
<Show when={!props.gap}>
|
||||
<section class={`dasig-row-${props.content || 'center'}`}>{props.children}</section>
|
||||
</Show>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,20 +1,20 @@
|
|||
export { default as Background } from './components/Background'
|
||||
export { default as Box } from './components/Box'
|
||||
export { default as Background } from './components/Background.astro'
|
||||
export { default as Box } from './components/Box.astro'
|
||||
export { default as Button } from './components/Button'
|
||||
export { default as Column } from './components/Column'
|
||||
export { default as Copyright } from './components/Copyright'
|
||||
export { default as Footer } from './components/Footer'
|
||||
export { default as Form } from './components/Form'
|
||||
export { default as HTML } from './components/HTML'
|
||||
export { default as Image } from './components/Image'
|
||||
export { default as Link } from './components/Link'
|
||||
export { default as Logo } from './components/Logo'
|
||||
export { default as Navbar } from './components/Navbar'
|
||||
export { default as Page } from './components/Page'
|
||||
export { default as Row } from './components/Row'
|
||||
export { default as Display } from './components/Display'
|
||||
export { default as Padding } from './components/Padding'
|
||||
export { default as Modal } from './components/Modal'
|
||||
export { default as Column } from './components/Column.astro'
|
||||
export { default as Copyright } from './components/Copyright.astro'
|
||||
export { default as Footer } from './components/Footer.astro'
|
||||
export { default as Form } from './components/Form.astro'
|
||||
export { default as HTML } from './components/HTML.astro'
|
||||
export { default as Image } from './components/Image.astro'
|
||||
export { default as Link } from './components/Link.astro'
|
||||
export { default as Logo } from './components/Logo.astro'
|
||||
export { default as Navbar } from './components/Navbar.astro'
|
||||
export { default as Page } from './components/Page.astro'
|
||||
export { default as Row } from './components/Row.astro'
|
||||
export { default as Display } from './components/Display.astro'
|
||||
export { default as Padding } from './components/Padding.astro'
|
||||
export { default as Modal } from './components/Modal.astro'
|
||||
|
||||
// export { default as OptimizeBackground } from './Optimizers/OptimizeBackground'
|
||||
// export { default as OptimizeImage } from './Optimizers/OptimizeImage'
|
||||
|
|
|
|||
|
|
@ -1,7 +0,0 @@
|
|||
// @use '/src/styles/classes.sass'
|
||||
@use '../../configs/design/site.sass' as design
|
||||
|
||||
:root
|
||||
color-scheme: light dark
|
||||
background-color: light-dark(design.$light-background, design.$dark-background)
|
||||
transition: background-color 0.6s ease-out
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
.dasig-box
|
||||
padding: 1rem
|
||||
|
||||
.dasig-curvedbox
|
||||
@extend .dasig-box
|
||||
border-radius: 8px
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
.dasig-column-top
|
||||
display: flex
|
||||
flex-direction: column
|
||||
flex-wrap: wrap
|
||||
justify-content: flex-start
|
||||
align-items: flex-start
|
||||
align-content: center
|
||||
|
||||
.dasig-column-center
|
||||
display: flex
|
||||
flex-direction: column
|
||||
flex-wrap: wrap
|
||||
justify-content: center
|
||||
align-items: center
|
||||
align-content: center
|
||||
|
||||
.dasig-column-right
|
||||
display: flex
|
||||
flex-direction: column
|
||||
flex-wrap: wrap
|
||||
justify-content: flex-end
|
||||
align-items: center
|
||||
align-content: center
|
||||
|
||||
.dasig-column-split
|
||||
display: flex
|
||||
flex-direction: column
|
||||
flex-wrap: wrap
|
||||
justify-content: space-between
|
||||
align-items: center
|
||||
align-content: center
|
||||
|
||||
.dasig-column-spaced
|
||||
display: flex
|
||||
flex-direction: column
|
||||
flex-wrap: wrap
|
||||
justify-content: space-around
|
||||
align-items: center
|
||||
align-content: center
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
@use '../../configs/design/sizes' as view
|
||||
|
||||
.dasig-footer
|
||||
padding: 1rem 0
|
||||
margin: 0 2rem
|
||||
position: fixed
|
||||
bottom: 0
|
||||
width: 100%
|
||||
opacity: 0.8
|
||||
font-size: 1rem
|
||||
|
||||
@media only screen and (max-width: view.$tablet)
|
||||
font-size: 0.75rem
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
@use '../../configs/design/colors.sass' as colors
|
||||
@use '/src/styles/fonts.sass' as fonts
|
||||
|
||||
.body
|
||||
color: colors.$white
|
||||
|
||||
.inter
|
||||
@extend .body
|
||||
font-family: fonts.$Inter
|
||||
|
||||
.roboto
|
||||
@extend .body
|
||||
font-family: fonts.$Roboto
|
||||
|
||||
.montserrat
|
||||
@extend .body
|
||||
font-family: fonts.$Montserrat
|
||||
|
||||
.open-sans
|
||||
@extend .body
|
||||
font-family: fonts.$OpenSans
|
||||
|
||||
.public-sans
|
||||
@extend .body
|
||||
font-family: fonts.$PublicSans
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
a
|
||||
text-decoration: none
|
||||
color: inherit
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
@use '../../configs/design/site' as site
|
||||
@use 'sass:color'
|
||||
|
||||
.modal
|
||||
display: flex
|
||||
justify-content: center
|
||||
align-items: center
|
||||
position: fixed
|
||||
top: 0
|
||||
left: 0
|
||||
width: 100%
|
||||
height: 100%
|
||||
backdrop-filter: blur(20px)
|
||||
background-color: rgba(color.adjust(site.$dark-background, $blackness: 5%), 0.6)
|
||||
z-index: 999
|
||||
|
||||
&__content
|
||||
border-radius: 8px
|
||||
padding: 2rem
|
||||
position: relative
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
.nav
|
||||
position: fixed
|
||||
top: 0
|
||||
width: 100%
|
||||
padding: 1rem 0
|
||||
// margin: 5rem
|
||||
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
.dasig-page
|
||||
margin: 2rem
|
||||
height: auto
|
||||
min-height: 90vh
|
||||
|
||||
.dasig-page-column
|
||||
@extend .dasig-page
|
||||
display: flex
|
||||
flex-direction: column
|
||||
|
||||
.dasig-page-row
|
||||
@extend .dasig-page
|
||||
flex-direction: row
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
.dasig-row-left
|
||||
display: flex
|
||||
flex-direction: row
|
||||
flex-wrap: wrap
|
||||
justify-content: flex-start
|
||||
align-items: center
|
||||
align-content: center
|
||||
|
||||
.dasig-row-center
|
||||
display: flex
|
||||
flex-direction: row
|
||||
flex-wrap: wrap
|
||||
justify-content: center
|
||||
align-items: center
|
||||
align-content: center
|
||||
|
||||
.dasig-row-right
|
||||
display: flex
|
||||
flex-direction: row
|
||||
flex-wrap: wrap
|
||||
justify-content: flex-end
|
||||
align-items: center
|
||||
align-content: center
|
||||
|
||||
.dasig-row-split
|
||||
display: flex
|
||||
flex-direction: row
|
||||
flex-wrap: wrap
|
||||
justify-content: space-between
|
||||
align-items: center
|
||||
align-content: center
|
||||
|
||||
.dasig-row-spaced
|
||||
display: flex
|
||||
flex-direction: row
|
||||
flex-wrap: wrap
|
||||
justify-content: space-around
|
||||
align-items: center
|
||||
align-content: center
|
||||
|
||||
.dasig-row-even
|
||||
display: flex
|
||||
flex-direction: row
|
||||
flex-wrap: wrap
|
||||
justify-content: space-evenly
|
||||
align-items: center
|
||||
align-content: center
|
||||
|
|
@ -1 +0,0 @@
|
|||
@use '/src/styles/breakpoints.sass'
|
||||
Loading…
Add table
Add a link
Reference in a new issue