Skip to content

Commit d41e16f

Browse files
haydncomleyhaydncomley
committed
Components
1 parent 4b9fcd2 commit d41e16f

13 files changed

+245
-15
lines changed

‎src/example/src/app.ts

+4-1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { app, render, store } from "../../nice";
22
import { Navigation } from "./components/nav";
33
import { ThemeWidget } from "./components/theme-widget";
44
import { CalloutSection } from "./sections/callout";
5+
import { Footer } from "./sections/footer";
56
import { HeroSection } from "./sections/hero";
67

78
export const globalStore = store({
@@ -15,10 +16,12 @@ export const myApp = app(() => {
1516
<main>
1617
${ThemeWidget()}
1718
${Navigation()}
18-
19+
1920
${HeroSection()}
2021
${CalloutSection({ header: 'Hello World', subheader: 'This is some more content' })}
2122
${HeroSection()}
23+
24+
${Footer()}
2225
</main>
2326
`;
2427
});

‎src/example/src/components/link.module.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
transform: translateY(-50%) translateX(0%);
3333
}
3434
100% {
35-
transform: translateY(-50%) translateX(-0.6em);
35+
transform: translateY(-50%) translateX(-0.6rem);
3636
}
3737
}
3838

‎src/example/src/components/logo.module.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@use 'easy-theme' as theme;
22

33
.logo {
4-
font-size: 8rem;
4+
font-size: 6rem;
55
font-weight: 800;
66
color: rgb(var(--theme-contrast));
77

‎src/example/src/components/nav.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,9 @@ export const Navigation = component(() => {
2222
</button>
2323
2424
<div class=${styles.navContent}>
25-
${Link({ isExternal: true, label: 'About', url: "https://github.com/haydncomley" })}
25+
${Link({ isExternal: true, label: 'Portfolio', url: "https://github.com/haydncomley" })}
26+
<span class=${styles.navDivide}>•</span>
27+
${Link({ isExternal: true, label: 'Blog', url: "https://github.com/haydncomley" })}
2628
<span class=${styles.navDivide}>•</span>
2729
${Link({ isExternal: true, label: 'GitHub', url: "https://github.com/haydncomley" })}
2830
</div>

‎src/example/src/components/project-card.module.scss

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
.projectCard {
2+
padding: 1rem;
3+
border-radius: 1rem;
4+
background-color: rgba(var(--theme-contrast), .1);
5+
border: .2rem solid rgba(var(--theme-contrast), .1);
6+
backdrop-filter: blur(.5rem);
7+
transform-origin: 50% 50%;
8+
transition: .1s ease;
9+
cursor: pointer;
10+
text-align: left;
11+
aspect-ratio: 16 / 9;
12+
display: flex;
13+
min-height: 8rem;
14+
15+
img {
16+
position: absolute;
17+
left: 0;
18+
top: 0;
19+
width: 100%;
20+
height: 100%;
21+
object-fit: cover;
22+
border-radius: 1rem;
23+
-webkit-mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0.5));
24+
mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0.5));
25+
transition: .1s ease;
26+
opacity: 0.5;
27+
}
28+
29+
&:hover {
30+
border: .2rem solid rgba(var(--theme-contrast), .25);
31+
transform: translateY(-.1rem) scale(1.05);
32+
33+
img {
34+
opacity: 1;
35+
}
36+
}
37+
}
38+
39+
.projectCardContent {
40+
display: flex;
41+
flex-direction: column;
42+
z-index: 1;
43+
}
44+
45+
.projectCardTitle {
46+
font-size: 1.2rem;
47+
font-weight: 600;
48+
}
49+
50+
.projectCardBody {
51+
font-size: 1rem;
52+
font-weight: 400;
53+
color: rgb(var(--theme-contrast), .75);
54+
}
55+
56+
.projectCardFooter {
57+
margin-top: auto;
58+
}

‎src/example/src/components/project-card.ts

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { component, render } from "../../../nice";
2+
import { globalStore } from "../app";
3+
4+
import styles from './project-card.module.scss'
5+
6+
export const ProjectCard = component(() => {
7+
const name = globalStore('appName');
8+
9+
return render`
10+
<article class=${styles.projectCard}>
11+
<img src="https://images.unsplash.com/photo-1682687221323-6ce2dbc803ab?q=80&w=1287&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
12+
13+
<div class=${styles.projectCardContent}>
14+
<p class=${styles.projectCardTitle}>OutRanked</p>
15+
<p class=${styles.projectCardBody}>Mobile App</p>
16+
17+
<div class=${styles.projectCardFooter}>
18+
<p class=${styles.projectCardBody}>React • Ionic</p>
19+
</div>
20+
</div>
21+
</article>
22+
`
23+
});

‎src/example/src/components/star.module.scss

+14-4
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@
22

33
@keyframes burstIn {
44
0% {
5-
transform: translate(-50%, -50%) scale(0);
5+
transform: scale(0);
66
}
77
30% {
8-
transform: translate(-50%, -50%) scale(1.5);
8+
transform:scale(1.5);
99
}
1010
100% {
11-
transform: translate(-50%, -50%) scale(1);
11+
transform: scale(1);
1212
}
1313
}
1414

@@ -17,11 +17,21 @@
1717
height: 2rem;
1818
width: 2rem;
1919
opacity: 0.5;
20+
transform-origin: 50% 50%;
21+
transition: .25s ease-out;
22+
23+
&:hover {
24+
height: 2.5rem;
25+
width: 2.5rem;
26+
margin-left: -.5rem;
27+
margin-top: -.5rem;
28+
filter: drop-shadow(0 0 0.5rem rgb(var(--theme-primary), .5));
29+
}
2030

2131
&::after {
2232
content: '';
2333
position: absolute;
24-
transform: translate(-50%, -50%);
34+
transform-origin: 50% 50%;
2535
top: 0;
2636
left: 0;
2737
width: 100%;

‎src/example/src/components/star.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export const Star = component<{
3939
display: hasWindow ? 'block' : 'none',
4040
left: `${x.get()}%`,
4141
top: `${y.get()}%`,
42-
transform: `rotateZ(${getRotation(value)}deg)`,
42+
transform: `rotateZ(${getRotation(value)}deg) translate(-50%, -50%)`,
4343
}), [x, y]);
4444

4545
const starClass = computed(() => `${getShape(value)} ${styles.star}`, [value]);

‎src/example/src/pages/index.astro

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { myApp } from "../app";
99
<meta charset="utf-8" />
1010
<link rel="icon" type="image/svg+xml" href="/favicon.png" />
1111
<meta name="viewport" content="width=device-width" />
12-
<title>nicee</title>
12+
<title>Haydn Comley</title>
1313
</head>
1414
<body set:html={myApp!.html} id={myApp!.id!}>
1515
<script>

‎src/example/src/sections/footer.module.scss

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
@use 'easy-theme' as theme;
2+
3+
.footer {
4+
width: 100%;
5+
display: block;
6+
position: relative;
7+
border-top: .2rem dashed rgba(var(--theme-contrast), .1);
8+
padding: 2rem;
9+
color: var(--theme-contrast);
10+
box-sizing: border-box;
11+
}
12+
13+
.footerTitle {
14+
font-size: 2rem;
15+
font-weight: 700;
16+
margin-bottom: 1rem;
17+
}
18+
19+
.footerInfo {
20+
font-size: 1rem;
21+
font-weight: 400;
22+
margin-bottom: 0.5rem;
23+
margin-top: -0.5rem;
24+
display: block;
25+
color: rgb(var(--theme-contrast), .75);
26+
white-space: pre-line;
27+
}
28+
29+
.footerBody {
30+
font-size: 1rem;
31+
font-weight: 700;
32+
color: rgb(var(--theme-primary));
33+
margin-top: 1rem;
34+
}
35+
36+
.footerContent {
37+
gap: 4rem;
38+
display: flex;
39+
}
40+
41+
.footerColumn {
42+
display: flex;
43+
flex-direction: column;
44+
align-items: flex-start;
45+
gap: 1rem;
46+
47+
@include theme.Mobile {
48+
flex-basis: 50%;
49+
}
50+
}

‎src/example/src/sections/footer.ts

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { component, render } from "../../../nice";
2+
import { Link } from "../components/link";
3+
4+
import styles from './footer.module.scss';
5+
6+
export const Footer = component(() => {
7+
8+
return render`
9+
<footer class=${styles.footer}>
10+
<h4 class=${styles.footerTitle}>Howdy,</h4>
11+
<small class=${styles.footerInfo}>I hope you're finding everything you need.\nIf not then shoot me an email or send me a message.</small>
12+
13+
<div class=${styles.footerContent}>
14+
<div class=${styles.footerColumn}>
15+
<p class=${styles.footerBody}>Quick Links</p>
16+
${Link({ isExternal: true, label: 'Contact', url: "https://github.com/haydncomley" })}
17+
${Link({ isExternal: true, label: 'Portfolio', url: "https://github.com/haydncomley" })}
18+
${Link({ isExternal: true, label: 'Blog', url: "https://github.com/haydncomley" })}
19+
</div>
20+
21+
<div class=${styles.footerColumn}>
22+
<p class=${styles.footerBody}>Social Media</p>
23+
${Link({ isExternal: true, label: 'LinkedIn', url: "https://linkedin.com/in/haydn-comley" })}
24+
${Link({ isExternal: true, label: 'GitHub', url: "https://github.com/haydncomley" })}
25+
${Link({ isExternal: true, label: 'Instagram', url: "https://github.com/haydncomley" })}
26+
${Link({ isExternal: true, label: 'YouTube', url: "https://youtube.com/haydncomley" })}
27+
</div>
28+
</div>
29+
</section>
30+
`
31+
});

‎src/example/src/sections/hero.module.scss

+48-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@use 'easy-theme' as theme;
22

33
.fullPage {
4-
width: 100vw;
4+
width: 100%;
55
height: 90vh;
66
height: 90svh;
77
display: flex;
@@ -14,6 +14,53 @@
1414

1515
.fullPageContent {
1616
z-index: 1;
17+
18+
@include theme.Mobile {
19+
transform: translateY(-7rem);
20+
}
21+
}
22+
}
23+
24+
@keyframes breathe {
25+
0% {
26+
transform: scale(1) rotateZ(2deg);
27+
opacity: 0.5;
28+
}
29+
50% {
30+
transform: scale(1.1) rotateZ(-1deg);
31+
opacity: 1;
32+
}
33+
100% {
34+
transform: scale(1) rotateZ(2deg);
35+
opacity: 0.5;
36+
}
37+
}
38+
39+
.fullPageBackground {
40+
position: absolute;
41+
left: 0;
42+
top: 0;
43+
width: 100%;
44+
height: 100%;
45+
animation: breathe 30s ease infinite;
46+
}
47+
48+
.fullPageFeature {
49+
position: absolute;
50+
right: 1rem;
51+
bottom: 1rem;
52+
padding: .5rem;
53+
54+
& > p {
55+
font-size: 0.8rem;
56+
font-weight: 400;
57+
margin-bottom: .5rem;
58+
color: rgb(var(--theme-contrast), .75);
59+
}
60+
61+
@include theme.Mobile {
62+
right: auto;
63+
transform: translateY(-5rem);
1764
}
1865
}
1966

‎src/example/src/sections/hero.ts

+10-4
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { globalStore } from "../app";
33
import { Button } from "../components/button";
44
import { Link } from "../components/link";
55
import { Logo } from "../components/logo";
6+
import { ProjectCard } from "../components/project-card";
67
import { Star } from "../components/star";
78

89
import styles from './hero.module.scss';
@@ -24,8 +25,8 @@ export const HeroSection = component(() => {
2425
}, [count])
2526

2627
return render`
27-
<section class=${styles.fullPage}>
28-
<div>${stars}</div>
28+
<header class=${styles.fullPage}>
29+
<div class=${styles.fullPageBackground}>${stars}</div>
2930
3031
<div class=${styles.fullPageContent}>
3132
${Logo()}
@@ -35,7 +36,12 @@ export const HeroSection = component(() => {
3536
<div class=${styles.fullPageNote}>
3637
<small>made using a nicee framework</small>
3738
<span>Check it out now : ${Link({ isExternal: true, label: 'GitHub', url: "https://github.com/haydncomley/nicee" })}</span>
38-
<div>
39-
</section>
39+
</div>
40+
41+
<div class=${styles.fullPageFeature}>
42+
<p>Featured Project</p>
43+
${ProjectCard()}
44+
</div>
45+
</header>
4046
`
4147
});

0 commit comments

Comments
 (0)