feat(Components): Add Button and BackgroudnImage
This commit is contained in:
parent
a1528a2ad8
commit
b74fcb19cc
5 changed files with 399 additions and 10 deletions
|
|
@ -19,6 +19,41 @@ section:not(:first-child) {
|
|||
margin-top: var(--prj-spacing-4);
|
||||
}
|
||||
|
||||
h1,
|
||||
.fs-1 {
|
||||
font-size: 3rem !important;
|
||||
margin-bottom: var(--prj-spacing-4);
|
||||
}
|
||||
h2,
|
||||
.fs-2 {
|
||||
font-size: 2.5rem !important;
|
||||
margin-bottom: var(--prj-spacing-3);
|
||||
}
|
||||
h3,
|
||||
.fs-3 {
|
||||
font-size: 2rem !important;
|
||||
margin-bottom: var(--prj-spacing-2);
|
||||
}
|
||||
h4,
|
||||
.fs-4 {
|
||||
font-size: 1.5rem !important;
|
||||
margin-bottom: var(--prj-spacing-2);
|
||||
}
|
||||
h5,
|
||||
.fs-5 {
|
||||
font-size: 1.25rem !important;
|
||||
margin-bottom: var(--prj-spacing-1);
|
||||
}
|
||||
h6,
|
||||
.fs-6 {
|
||||
font-size: 1rem !important;
|
||||
margin-bottom: var(--prj-spacing-1);
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: var(--prj-spacing-2);
|
||||
}
|
||||
|
||||
/* Main content fix width, taken from Tailwind: https://tailwindcss.com/docs/container#using-the-container */
|
||||
|
||||
@media screen and (min-width: 640px) {
|
||||
|
|
|
|||
|
|
@ -6,6 +6,14 @@
|
|||
--prj-spacing-5: 3rem;
|
||||
}
|
||||
|
||||
.d-flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex-eq > * {
|
||||
flex: 100%;
|
||||
}
|
||||
|
||||
.hstack {
|
||||
--prj-gap: var(--prj-spacing-3);
|
||||
display: flex;
|
||||
|
|
@ -13,16 +21,41 @@
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
.hstack-reverse {
|
||||
--prj-gap: var(--prj-spacing-3);
|
||||
display: flex;
|
||||
gap: var(--prj-gap);
|
||||
align-items: center;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.vstack {
|
||||
--prj-gap: var(--prj-spacing-3);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.vstack {
|
||||
--prj-gap: var(--prj-spacing-3);
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.flex-grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.flex-center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.justify-content-center {
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
.grid {
|
||||
--prj-gap: var(--prj-spacing-3);
|
||||
--prj-columns: repeat(3, 1fr);
|
||||
|
|
@ -79,6 +112,10 @@
|
|||
--prj-columns: repeat(12, 1fr);
|
||||
}
|
||||
|
||||
.gap-0 {
|
||||
--prj-gap: 0;
|
||||
}
|
||||
|
||||
.gap-1 {
|
||||
--prj-gap: var(--prj-spacing-1);
|
||||
}
|
||||
|
|
@ -112,14 +149,26 @@
|
|||
text-align: start;
|
||||
}
|
||||
|
||||
.text-middle {
|
||||
text-align: middle;
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text-end {
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.align-start {
|
||||
vertical-align: start;
|
||||
}
|
||||
|
||||
.align-center {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.align-end {
|
||||
vertical-align: end;
|
||||
}
|
||||
|
||||
.overflow-scroll {
|
||||
overflow: scroll;
|
||||
}
|
||||
|
|
@ -130,7 +179,82 @@
|
|||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
/* Start Width */
|
||||
.w-auto {
|
||||
width: auto;
|
||||
}
|
||||
.w-10 {
|
||||
width: 10%;
|
||||
}
|
||||
.w-20 {
|
||||
width: 20%;
|
||||
}
|
||||
.w-30 {
|
||||
width: 30%;
|
||||
}
|
||||
.w-40 {
|
||||
width: 40%;
|
||||
}
|
||||
.w-50 {
|
||||
width: 50%;
|
||||
}
|
||||
.w-60 {
|
||||
width: 60%;
|
||||
}
|
||||
.w-70 {
|
||||
width: 70%;
|
||||
}
|
||||
.w-80 {
|
||||
width: 80%;
|
||||
}
|
||||
.w-90 {
|
||||
width: 90%;
|
||||
}
|
||||
.w-100 {
|
||||
width: 100%;
|
||||
}
|
||||
/* End Width */
|
||||
|
||||
/* Start Height */
|
||||
.h-auto {
|
||||
height: auto;
|
||||
}
|
||||
.h-10 {
|
||||
height: 10%;
|
||||
}
|
||||
.h-20 {
|
||||
height: 20%;
|
||||
}
|
||||
.h-30 {
|
||||
height: 30%;
|
||||
}
|
||||
.h-40 {
|
||||
height: 40%;
|
||||
}
|
||||
.h-50 {
|
||||
height: 50%;
|
||||
}
|
||||
.h-60 {
|
||||
height: 60%;
|
||||
}
|
||||
.h-70 {
|
||||
height: 70%;
|
||||
}
|
||||
.h-80 {
|
||||
height: 80%;
|
||||
}
|
||||
.h-90 {
|
||||
height: 90%;
|
||||
}
|
||||
.h-100 {
|
||||
height: 100%;
|
||||
}
|
||||
/* End Width */
|
||||
|
||||
/* Start Margins */
|
||||
.m-0 {
|
||||
margin: 0 !important;
|
||||
}
|
||||
.m-1 {
|
||||
margin: var(--prj-spacing-1) !important;
|
||||
}
|
||||
|
|
@ -165,25 +289,39 @@
|
|||
margin-right: var(--prj-spacing-5) 0 !important;
|
||||
}
|
||||
.mx-auto {
|
||||
margin-right: auto 0 !important;
|
||||
margin-left: auto !important;
|
||||
margin-right: auto !important;
|
||||
}
|
||||
.my-0 {
|
||||
margin-top: var(--prj-spacing-1) !important;
|
||||
margin-bottom: var(--prj-spacing-1) !important;
|
||||
}
|
||||
.my-1 {
|
||||
margin-right: 0 var(--prj-spacing-1) !important;
|
||||
margin-top: var(--prj-spacing-1) !important;
|
||||
margin-bottom: var(--prj-spacing-1) !important;
|
||||
}
|
||||
.my-2 {
|
||||
margin-right: 0 var(--prj-spacing-2) !important;
|
||||
margin-top: var(--prj-spacing-2) !important;
|
||||
margin-bottom: var(--prj-spacing-2) !important;
|
||||
}
|
||||
.my-3 {
|
||||
margin-right: 0 var(--prj-spacing-3) !important;
|
||||
margin-top: var(--prj-spacing-3) !important;
|
||||
margin-bottom: var(--prj-spacing-3) !important;
|
||||
}
|
||||
.my-4 {
|
||||
margin-right: 0 var(--prj-spacing-4) !important;
|
||||
margin-top: var(--prj-spacing-4) !important;
|
||||
margin-bottom: var(--prj-spacing-4) !important;
|
||||
}
|
||||
.my-5 {
|
||||
margin-right: 0 var(--prj-spacing-5) !important;
|
||||
margin-top: var(--prj-spacing-5) !important;
|
||||
margin-bottom: var(--prj-spacing-5) !important;
|
||||
}
|
||||
.my-auto {
|
||||
margin-right: 0 auto !important;
|
||||
margin-top: auto !important;
|
||||
margin-bottom: auto !important;
|
||||
}
|
||||
.mt-0 {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
.mt-1 {
|
||||
margin-top: var(--prj-spacing-1) !important;
|
||||
|
|
@ -203,6 +341,9 @@
|
|||
.mt-auto {
|
||||
margin-top: auto !important;
|
||||
}
|
||||
.mb-0 {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
.mb-1 {
|
||||
margin-bottom: var(--prj-spacing-1) !important;
|
||||
}
|
||||
|
|
@ -258,3 +399,154 @@
|
|||
margin-right: var(--prj-spacing-5) !important;
|
||||
}
|
||||
/* End Margins */
|
||||
|
||||
/* Start paddings */
|
||||
.p-0 {
|
||||
padding: 0 !important;
|
||||
}
|
||||
.p-1 {
|
||||
padding: var(--prj-spacing-1) !important;
|
||||
}
|
||||
.p-2 {
|
||||
padding: var(--prj-spacing-2) !important;
|
||||
}
|
||||
.p-3 {
|
||||
padding: var(--prj-spacing-3) !important;
|
||||
}
|
||||
.p-4 {
|
||||
padding: var(--prj-spacing-4) !important;
|
||||
}
|
||||
.p-5 {
|
||||
padding: var(--prj-spacing-5) !important;
|
||||
}
|
||||
.p-auto {
|
||||
padding: auto !important;
|
||||
}
|
||||
.px-1 {
|
||||
padding-left: var(--prj-spacing-1) !important;
|
||||
padding-right: var(--prj-spacing-1) !important;
|
||||
}
|
||||
.px-2 {
|
||||
padding-left: var(--prj-spacing-2) !important;
|
||||
padding-right: var(--prj-spacing-2) !important;
|
||||
}
|
||||
.px-3 {
|
||||
padding-left: var(--prj-spacing-3) !important;
|
||||
padding-right: var(--prj-spacing-3) !important;
|
||||
}
|
||||
.px-4 {
|
||||
padding-left: var(--prj-spacing-4) !important;
|
||||
padding-right: var(--prj-spacing-4) !important;
|
||||
}
|
||||
.px-5 {
|
||||
padding-left: var(--prj-spacing-5) !important;
|
||||
padding-right: var(--prj-spacing-5) !important;
|
||||
}
|
||||
.px-auto {
|
||||
padding-left: auto !important;
|
||||
padding-right: auto !important;
|
||||
}
|
||||
.py-0 {
|
||||
padding-top: var(--prj-spacing-1) !important;
|
||||
padding-bottom: var(--prj-spacing-1) !important;
|
||||
}
|
||||
.py-1 {
|
||||
padding-top: var(--prj-spacing-1) !important;
|
||||
padding-bottom: var(--prj-spacing-1) !important;
|
||||
}
|
||||
.py-2 {
|
||||
padding-top: var(--prj-spacing-2) !important;
|
||||
padding-bottom: var(--prj-spacing-2) !important;
|
||||
}
|
||||
.py-3 {
|
||||
padding-top: var(--prj-spacing-3) !important;
|
||||
padding-bottom: var(--prj-spacing-3) !important;
|
||||
}
|
||||
.py-4 {
|
||||
padding-top: var(--prj-spacing-4) !important;
|
||||
padding-bottom: var(--prj-spacing-4) !important;
|
||||
}
|
||||
.py-5 {
|
||||
padding-top: var(--prj-spacing-5) !important;
|
||||
padding-bottom: var(--prj-spacing-5) !important;
|
||||
}
|
||||
.py-auto {
|
||||
padding-top: auto !important;
|
||||
padding-bottom: auto !important;
|
||||
}
|
||||
.pt-1 {
|
||||
padding-top: var(--prj-spacing-1) !important;
|
||||
}
|
||||
.pt-2 {
|
||||
padding-top: var(--prj-spacing-2) !important;
|
||||
}
|
||||
.pt-3 {
|
||||
padding-top: var(--prj-spacing-3) !important;
|
||||
}
|
||||
.pt-4 {
|
||||
padding-top: var(--prj-spacing-4) !important;
|
||||
}
|
||||
.pt-5 {
|
||||
padding-top: var(--prj-spacing-5) !important;
|
||||
}
|
||||
.pt-auto {
|
||||
padding-top: auto !important;
|
||||
}
|
||||
.pb-0 {
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
.pb-1 {
|
||||
padding-bottom: var(--prj-spacing-1) !important;
|
||||
}
|
||||
.pb-2 {
|
||||
padding-bottom: var(--prj-spacing-2) !important;
|
||||
}
|
||||
.pb-3 {
|
||||
padding-bottom: var(--prj-spacing-3) !important;
|
||||
}
|
||||
.pb-4 {
|
||||
padding-bottom: var(--prj-spacing-4) !important;
|
||||
}
|
||||
.pb-5 {
|
||||
padding-bottom: var(--prj-spacing-5) !important;
|
||||
}
|
||||
.pb-auto {
|
||||
padding-bottom: auto !important;
|
||||
}
|
||||
.pl-1 {
|
||||
padding-left: var(--prj-spacing-1) !important;
|
||||
}
|
||||
.pl-2 {
|
||||
padding-left: var(--prj-spacing-2) !important;
|
||||
}
|
||||
.pl-3 {
|
||||
padding-left: var(--prj-spacing-3) !important;
|
||||
}
|
||||
.pl-4 {
|
||||
padding-left: var(--prj-spacing-4) !important;
|
||||
}
|
||||
.pl-5 {
|
||||
padding-left: var(--prj-spacing-5) !important;
|
||||
}
|
||||
.pl-auto {
|
||||
padding-left: auto !important;
|
||||
}
|
||||
.pr-1 {
|
||||
padding-right: var(--prj-spacing-1) !important;
|
||||
}
|
||||
.pr-2 {
|
||||
padding-right: var(--prj-spacing-2) !important;
|
||||
}
|
||||
.pr-3 {
|
||||
padding-right: var(--prj-spacing-3) !important;
|
||||
}
|
||||
.pr-4 {
|
||||
padding-right: var(--prj-spacing-4) !important;
|
||||
}
|
||||
.pr-5 {
|
||||
padding-right: var(--prj-spacing-5) !important;
|
||||
}
|
||||
.pr-auto {
|
||||
padding-right: var(--prj-spacing-5) !important;
|
||||
}
|
||||
/* End paddings */
|
||||
|
|
|
|||
35
src/components/BackgroundImageDiv.astro
Normal file
35
src/components/BackgroundImageDiv.astro
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
---
|
||||
import { getImage } from 'astro:assets';
|
||||
|
||||
interface Props {
|
||||
src: string;
|
||||
width: number;
|
||||
height: number;
|
||||
}
|
||||
|
||||
const { src, width, height } = Astro.props;
|
||||
|
||||
const optimizedBackground = await getImage({
|
||||
src,
|
||||
width,
|
||||
height,
|
||||
format: 'webp',
|
||||
});
|
||||
---
|
||||
|
||||
<div id="bg">
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<style define:vars={{ bgImage: `url(${optimizedBackground.src})` }}>
|
||||
#bg {
|
||||
background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
|
||||
var(--bgImage);
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
color: var(--prj-bg);
|
||||
|
||||
padding-top: var(--prj-spacing-3);
|
||||
padding-bottom: var(--prj-spacing-3);
|
||||
}
|
||||
</style>
|
||||
27
src/components/Button/Button.astro
Normal file
27
src/components/Button/Button.astro
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
---
|
||||
interface Props {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const { className = '' } = Astro.props;
|
||||
---
|
||||
|
||||
<button class:list={className}>
|
||||
<slot />
|
||||
</button>
|
||||
|
||||
<style>
|
||||
button {
|
||||
font-size: 1rem;
|
||||
padding: var(--prj-spacing-1) var(--prj-spacing-3);
|
||||
background-color: var(--prj-accent-bg);
|
||||
color: var(--prj-accent-text);
|
||||
|
||||
border-radius: 6px;
|
||||
border-color: var(--prj-accent-bg);
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -9,7 +9,7 @@ export interface Props {
|
|||
<slot name="title" />
|
||||
</div>
|
||||
|
||||
<div class="content flex-grow mb-3">
|
||||
<div class="content flex-grow">
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue