Skip to content

Commit e251705

Browse files
MortaroMortaro
committed
🚧 assets animations
1 parent aa2a762 commit e251705

File tree

6 files changed

+237
-8
lines changed

6 files changed

+237
-8
lines changed

‎public/hero.png‎

433 KB
Loading

‎src/Article.njs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -93,11 +93,11 @@ class Article extends Nullstack {
9393
<button onclick={{expanded: !this.expanded}} class="fixed bottom-10 right-10 bg-pink-600 text-white shadow-xl rounded-full py-2 px-4 z-50 md:hidden ring-0">
9494
<Triangle height={15} rotation={this.expanded ? 180 : 0} />
9595
</button>
96-
<aside class={`w-full md:w-80 fixed top-0 left-0 md:relative z-40 md:z-auto bg-white h-screen md:h-auto p-4 overflow-y-auto md:p-0 md:pr-4 transform pb-24 sm:pb-0 ${this.expanded ? '-translate-x-0 transition delay-300' : '-translate-x-full md:-translate-x-0'}`}>
96+
<aside class={`w-full md:w-80 fixed top-0 left-0 md:relative z-40 md:z-auto bg-white h-screen md:h-auto p-4 overflow-y-auto md:p-0 md:pr-4 transform pb-24 sm:pb-0 ${this.expanded ? 'translate-y-0 transition delay-500' : 'translate-y-full md:translate-y-0'}`}>
9797
{this.topics?.map((topic) => <Topic {...topic} />)}
9898
</aside>
9999
<article class="w-full pb-24">
100-
<h1 class="text-gray-900 text-4xl font-light block mb-8"> {this.title} </h1>
100+
<h1 class="text-pink-600 text-4xl font-light block mb-8"> {this.title} </h1>
101101
<div html={this.html} class="prose max-w-none" />
102102
</article>
103103
</section>

‎src/Footer.njs‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,9 @@ class Footer extends Translatable {
1616
const localUrl = locale !== "en-US" ? `/${locale.toLowerCase()}` : "";
1717
return (
1818
<footer class="flex flex-wrap w-full justify-center relative">
19-
<img src="/footer.png" class="absolute bottom-20" />
20-
<img src="/stars.png" class="transform hover:scale-105 transition delay-100" />
19+
<div class="w-full relative flex justify-center h-80 bg-70 hover:bg-100 bg-center bg-no-repeat" style="background-image: url(/stars.png); transition: background-size 3s;">
20+
<img src="/footer.png" class="absolute bottom-0" />
21+
</div>
2122
<div class="bg-gray-800 w-full text-center">
2223
<a href="https://github.com/nullstack/nullstack/stargazers" class="text-white p-4 inline-block text-xl">
2324
<span>Leave a star on</span>

‎src/Home.njs‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,15 +31,17 @@ class Home extends Nullstack {
3131
</button>
3232
</div>
3333
</div>
34-
<img src="/hero.jpg" alt="Nulla-Chan" class="max-w-full" />
34+
<div class="bg-center bg-0 hover:bg-100 bg-repeat-y" style="background-image: url(/stars.png); transition: background-size 3s;">
35+
<img src="/hero.png" alt="Nulla-Chan" class="max-w-full" />
36+
</div>
3537
</section>
3638
);
3739
}
3840

3941
renderRole({ image, title, children }) {
4042
return (
4143
<div class="sm:w-1/3 px-8 flex flex-wrap justify-center text-center">
42-
<div>
44+
<div class="bg-center bg-0 hover:bg-100" style="background-image: url(/stars.png); transition: background-size 3s;">
4345
<img src={image} class="h-48 transform hover:scale-105 transition delay-100" />
4446
</div>
4547
<h3 class="w-full text-center text-pink-600 text-xl sm:text-2xl font-light mb-4 sm:px-20">

‎src/tailwind.css‎

Lines changed: 216 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15316,6 +15316,18 @@ video {
1531615316
background-repeat: space;
1531715317
}
1531815318

15319+
.bg-0 {
15320+
background-size: 0%;
15321+
}
15322+
15323+
.bg-70 {
15324+
background-size: 70%;
15325+
}
15326+
15327+
.bg-100 {
15328+
background-size: 100%;
15329+
}
15330+
1531915331
.bg-auto {
1532015332
background-size: auto;
1532115333
}
@@ -15328,6 +15340,30 @@ video {
1532815340
background-size: contain;
1532915341
}
1533015342

15343+
.hover\:bg-0:hover {
15344+
background-size: 0%;
15345+
}
15346+
15347+
.hover\:bg-70:hover {
15348+
background-size: 70%;
15349+
}
15350+
15351+
.hover\:bg-100:hover {
15352+
background-size: 100%;
15353+
}
15354+
15355+
.hover\:bg-auto:hover {
15356+
background-size: auto;
15357+
}
15358+
15359+
.hover\:bg-cover:hover {
15360+
background-size: cover;
15361+
}
15362+
15363+
.hover\:bg-contain:hover {
15364+
background-size: contain;
15365+
}
15366+
1533115367
.border-collapse {
1533215368
border-collapse: collapse;
1533315369
}
@@ -60210,6 +60246,18 @@ video {
6021060246
background-repeat: space;
6021160247
}
6021260248

60249+
.sm\:bg-0 {
60250+
background-size: 0%;
60251+
}
60252+
60253+
.sm\:bg-70 {
60254+
background-size: 70%;
60255+
}
60256+
60257+
.sm\:bg-100 {
60258+
background-size: 100%;
60259+
}
60260+
6021360261
.sm\:bg-auto {
6021460262
background-size: auto;
6021560263
}
@@ -60222,6 +60270,30 @@ video {
6022260270
background-size: contain;
6022360271
}
6022460272

60273+
.sm\:hover\:bg-0:hover {
60274+
background-size: 0%;
60275+
}
60276+
60277+
.sm\:hover\:bg-70:hover {
60278+
background-size: 70%;
60279+
}
60280+
60281+
.sm\:hover\:bg-100:hover {
60282+
background-size: 100%;
60283+
}
60284+
60285+
.sm\:hover\:bg-auto:hover {
60286+
background-size: auto;
60287+
}
60288+
60289+
.sm\:hover\:bg-cover:hover {
60290+
background-size: cover;
60291+
}
60292+
60293+
.sm\:hover\:bg-contain:hover {
60294+
background-size: contain;
60295+
}
60296+
6022560297
.sm\:border-collapse {
6022660298
border-collapse: collapse;
6022760299
}
@@ -104969,6 +105041,18 @@ video {
104969105041
background-repeat: space;
104970105042
}
104971105043

105044+
.md\:bg-0 {
105045+
background-size: 0%;
105046+
}
105047+
105048+
.md\:bg-70 {
105049+
background-size: 70%;
105050+
}
105051+
105052+
.md\:bg-100 {
105053+
background-size: 100%;
105054+
}
105055+
104972105056
.md\:bg-auto {
104973105057
background-size: auto;
104974105058
}
@@ -104981,6 +105065,30 @@ video {
104981105065
background-size: contain;
104982105066
}
104983105067

105068+
.md\:hover\:bg-0:hover {
105069+
background-size: 0%;
105070+
}
105071+
105072+
.md\:hover\:bg-70:hover {
105073+
background-size: 70%;
105074+
}
105075+
105076+
.md\:hover\:bg-100:hover {
105077+
background-size: 100%;
105078+
}
105079+
105080+
.md\:hover\:bg-auto:hover {
105081+
background-size: auto;
105082+
}
105083+
105084+
.md\:hover\:bg-cover:hover {
105085+
background-size: cover;
105086+
}
105087+
105088+
.md\:hover\:bg-contain:hover {
105089+
background-size: contain;
105090+
}
105091+
104984105092
.md\:border-collapse {
104985105093
border-collapse: collapse;
104986105094
}
@@ -149728,6 +149836,18 @@ video {
149728149836
background-repeat: space;
149729149837
}
149730149838

149839+
.lg\:bg-0 {
149840+
background-size: 0%;
149841+
}
149842+
149843+
.lg\:bg-70 {
149844+
background-size: 70%;
149845+
}
149846+
149847+
.lg\:bg-100 {
149848+
background-size: 100%;
149849+
}
149850+
149731149851
.lg\:bg-auto {
149732149852
background-size: auto;
149733149853
}
@@ -149740,6 +149860,30 @@ video {
149740149860
background-size: contain;
149741149861
}
149742149862

149863+
.lg\:hover\:bg-0:hover {
149864+
background-size: 0%;
149865+
}
149866+
149867+
.lg\:hover\:bg-70:hover {
149868+
background-size: 70%;
149869+
}
149870+
149871+
.lg\:hover\:bg-100:hover {
149872+
background-size: 100%;
149873+
}
149874+
149875+
.lg\:hover\:bg-auto:hover {
149876+
background-size: auto;
149877+
}
149878+
149879+
.lg\:hover\:bg-cover:hover {
149880+
background-size: cover;
149881+
}
149882+
149883+
.lg\:hover\:bg-contain:hover {
149884+
background-size: contain;
149885+
}
149886+
149743149887
.lg\:border-collapse {
149744149888
border-collapse: collapse;
149745149889
}
@@ -194487,6 +194631,18 @@ video {
194487194631
background-repeat: space;
194488194632
}
194489194633

194634+
.xl\:bg-0 {
194635+
background-size: 0%;
194636+
}
194637+
194638+
.xl\:bg-70 {
194639+
background-size: 70%;
194640+
}
194641+
194642+
.xl\:bg-100 {
194643+
background-size: 100%;
194644+
}
194645+
194490194646
.xl\:bg-auto {
194491194647
background-size: auto;
194492194648
}
@@ -194499,6 +194655,30 @@ video {
194499194655
background-size: contain;
194500194656
}
194501194657

194658+
.xl\:hover\:bg-0:hover {
194659+
background-size: 0%;
194660+
}
194661+
194662+
.xl\:hover\:bg-70:hover {
194663+
background-size: 70%;
194664+
}
194665+
194666+
.xl\:hover\:bg-100:hover {
194667+
background-size: 100%;
194668+
}
194669+
194670+
.xl\:hover\:bg-auto:hover {
194671+
background-size: auto;
194672+
}
194673+
194674+
.xl\:hover\:bg-cover:hover {
194675+
background-size: cover;
194676+
}
194677+
194678+
.xl\:hover\:bg-contain:hover {
194679+
background-size: contain;
194680+
}
194681+
194502194682
.xl\:border-collapse {
194503194683
border-collapse: collapse;
194504194684
}
@@ -239246,6 +239426,18 @@ video {
239246239426
background-repeat: space;
239247239427
}
239248239428

239429+
.\32xl\:bg-0 {
239430+
background-size: 0%;
239431+
}
239432+
239433+
.\32xl\:bg-70 {
239434+
background-size: 70%;
239435+
}
239436+
239437+
.\32xl\:bg-100 {
239438+
background-size: 100%;
239439+
}
239440+
239249239441
.\32xl\:bg-auto {
239250239442
background-size: auto;
239251239443
}
@@ -239258,6 +239450,30 @@ video {
239258239450
background-size: contain;
239259239451
}
239260239452

239453+
.\32xl\:hover\:bg-0:hover {
239454+
background-size: 0%;
239455+
}
239456+
239457+
.\32xl\:hover\:bg-70:hover {
239458+
background-size: 70%;
239459+
}
239460+
239461+
.\32xl\:hover\:bg-100:hover {
239462+
background-size: 100%;
239463+
}
239464+
239465+
.\32xl\:hover\:bg-auto:hover {
239466+
background-size: auto;
239467+
}
239468+
239469+
.\32xl\:hover\:bg-cover:hover {
239470+
background-size: cover;
239471+
}
239472+
239473+
.\32xl\:hover\:bg-contain:hover {
239474+
background-size: contain;
239475+
}
239476+
239261239477
.\32xl\:border-collapse {
239262239478
border-collapse: collapse;
239263239479
}

‎tailwind.config.js‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,22 @@ module.exports = {
22
purge: ["./src/**/*.njs"],
33
darkMode: "class",
44
theme: {
5-
extend: {},
5+
backgroundSize: {
6+
'auto': 'auto',
7+
'cover': 'cover',
8+
'contain': 'contain',
9+
'0': '0%',
10+
'70': '70%',
11+
'100': '100%',
12+
}
613
},
714
variants: {
8-
extend: {},
15+
extend: {
16+
backgroundSize: ['hover'],
17+
},
918
},
1019
plugins: [
20+
require('autoprefixer'),
1121
require('@tailwindcss/typography'),
1222
],
1323
};

0 commit comments

Comments
 (0)