Skip to content

Commit 36b087c

Browse files
MortaroMortaro
committed
🚧 tailwind
1 parent e251705 commit 36b087c

File tree

11 files changed

+22331
-12612
lines changed

11 files changed

+22331
-12612
lines changed

‎public/glue-code.png‎

8.35 MB
Loading

‎src/Application.njs‎

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -69,32 +69,34 @@ class Application extends Nullstack {
6969
render({router, mode}) {
7070
const locale = router.url.startsWith('/pt-br') ? 'pt-BR' : 'en-US';
7171
return (
72-
<main class={`${mode} bgm1 cm3`}>
73-
<Header locale={locale} />
72+
<main class={mode}>
73+
<div class="dark:bg-gray-900 dark:text-white">
74+
<Header locale={locale} />
7475

75-
<Home route="/" locale="en-US" />
76-
<Home route="/pt-br" locale="pt-BR" />
76+
<Home route="/" locale="en-US" />
77+
<Home route="/pt-br" locale="pt-BR" />
7778

78-
<Documentation route="/documentation" locale="en-US" />
79-
<Documentation route="/pt-br/documentacao" locale="pt-BR" />
79+
<Documentation route="/documentation" locale="en-US" />
80+
<Documentation route="/pt-br/documentacao" locale="pt-BR" />
8081

81-
<Components route="/components" locale="en-US" />
82-
<Components route="/pt-br/componentes" locale="pt-BR" />
82+
<Components route="/components" locale="en-US" />
83+
<Components route="/pt-br/componentes" locale="pt-BR" />
8384

84-
<Contributors route="/contributors" locale="en-US" />
85-
<Contributors route="/pt-br/contribuidores" locale="pt-BR" />
85+
<Contributors route="/contributors" locale="en-US" />
86+
<Contributors route="/pt-br/contribuidores" locale="pt-BR" />
8687

87-
<Waifu route="/waifu" locale="en-US" />
88-
<Waifu route="/pt-br/waifu" locale="pt-BR" />
88+
<Waifu route="/waifu" locale="en-US" />
89+
<Waifu route="/pt-br/waifu" locale="pt-BR" />
8990

90-
<Article route="/pt-br/:slug" locale="pt-BR" />
91-
<Article route="/:slug" locale="en-US" />
91+
<Article route="/pt-br/:slug" locale="pt-BR" />
92+
<Article route="/:slug" locale="en-US" />
9293

93-
<GoogleAnalytics id="G-E7GZ5Z4MLN" />
94-
<Preloader />
95-
<Loader />
94+
<GoogleAnalytics id="G-E7GZ5Z4MLN" />
95+
<Preloader />
96+
<Loader />
9697

97-
<Footer locale={locale} />
98+
<Footer locale={locale} />
99+
</div>
98100
</main>
99101
)
100102
}

‎src/Article.njs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ class Article extends Nullstack {
7272

7373
renderLink({ title, href }) {
7474
return (
75-
<a href={href} class="text-gray-500 hover:text-pink-600 block w-full" onclick={{expanded: true}}> {title} </a>
75+
<a href={href} class="text-gray-500 dark:text-gray-300 hover:text-pink-600 block w-full" onclick={{expanded: true}}> {title} </a>
7676
)
7777
}
7878

@@ -93,7 +93,7 @@ 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-y-0 transition delay-500' : 'translate-y-full md:translate-y-0'}`}>
96+
<aside class={`w-full md:w-80 fixed top-0 left-0 md:relative z-40 md:z-auto bg-white dark:bg-gray-900 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">

‎src/Components.njs‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,16 @@ class Components extends Translatable {
88

99
renderProject({title, repository}) {
1010
return (
11-
<a href={repository} target="_blank" rel="noopener" class="block text-pink-600 border-t border-gray-100 py-2 mt-2">
11+
<a href={repository} target="_blank" rel="noopener" class="block text-pink-600 border-t border-gray-100 dark:border-gray-800 py-2 mt-2">
1212
{title}
1313
</a>
1414
)
1515
}
1616

1717
renderTopic({title, projects, tagline}) {
1818
return (
19-
<div class="w-full my-6 text-gray-800">
20-
<h2 class="w-full text-gray-800 text-xl sm:text-4xl font-light mb-4"> {title} </h2>
19+
<div class="w-full my-6">
20+
<h2 class="w-full text-xl sm:text-4xl font-light mb-4"> {title} </h2>
2121
{tagline &&
2222
<p class="my-3" title={tagline.title}> {tagline.text} </p>
2323
}
@@ -32,7 +32,7 @@ class Components extends Translatable {
3232
if(!this.i18n) return false;
3333
return (
3434
<section class="max-w-screen-xl mx-auto px-4 flex justify-between items-center flex-wrap py-12 sm:py-24">
35-
<h1 class="w-full text-gray-800 text-xl sm:text-4xl font-light mb-4"> {this.i18n.heading} </h1>
35+
<h1 class="w-full text-xl sm:text-4xl font-light mb-4"> {this.i18n.heading} </h1>
3636
<p class="w-full text-xl"> {this.i18n.tagline} </p>
3737
<p class="w-full prose max-w-none" html={this.i18n.contribute} />
3838
<div class="w-full">

‎src/Contributors.njs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ class Contributors extends Translatable {
2323
renderTopic({title, paragraphs, main, children}) {
2424
return (
2525
<div class="w-full mb-12">
26-
<element tag={main ? 'h1' : 'h2'} class="text-gray-800 text-xl sm:text-4xl font-light mb-4">
26+
<element tag={main ? 'h1' : 'h2'} class="text-xl sm:text-4xl font-light mb-4">
2727
{title}
2828
</element>
2929
{paragraphs &&
@@ -54,7 +54,7 @@ class Contributors extends Translatable {
5454

5555
renderCoreContributor({github, name, role, description, contribution}) {
5656
return (
57-
<div class="border border-gray-100 p-2 mt-2 flex flex-wrap">
57+
<div class="border border-gray-100 dark:border-gray-800 p-2 mt-2 flex flex-wrap">
5858
<img src={`https://github.com/${github}.png`} alt={name} width="90" height="90" class="w-24 h-24 mb-2 sm:mb-0" />
5959
<div class="w-full sm:w-10/12 sm:pl-3">
6060
<h3>

‎src/Header.njs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ class Header extends Translatable {
2323
render({ mode }) {
2424
if (!this.i18n) return false;
2525
return (
26-
<header class="fixed w-full bg-white shadow top-0 left-0 z-20">
26+
<header class="fixed w-full bg-white dark:bg-gray-900 shadow top-0 left-0 z-20">
2727
<div class="max-w-screen-xl mx-auto px-4 flex justify-between items-center flex-wrap py-4">
2828
<div class="w-full sm:w-auto justify-between sm:justify-self-start sm:px-0 items-center flex">
2929
<a {...this.i18n.home}>
@@ -54,7 +54,7 @@ class Header extends Translatable {
5454
<a
5555
href={this.i18n.action.href}
5656
onclick={{ expanded: false }}
57-
class="bg-pink-600 text-white px-4 py-2 border border-pink-600 hover:bg-white hover:text-pink-600 w-full sm:w-auto"
57+
class="bg-pink-600 text-white px-4 py-2 border border-pink-600 hover:bg-transparent hover:text-pink-600 w-full sm:w-auto"
5858
>
5959
{this.i18n.action.title}
6060
</a>

‎src/Home.njs‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -13,26 +13,26 @@ class Home extends Nullstack {
1313
<span class="text-pink-600 text-3xl sm:text-5xl font-light block sm:mb-3">
1414
Javascript Components
1515
</span>
16-
<span class="text-gray-900 text-2xl sm:text-4xl font-light block">
16+
<span class="text-gray-900 dark:text-white text-2xl sm:text-4xl font-light block">
1717
For one-dev armies
1818
</span>
1919
</h1>
20-
<p class="text-gray-600 text-xl sm:text-2xl">
20+
<p class="text-xl sm:text-2xl">
2121
Write the back-end and the front-end of a feature in a single
2222
component and let the framework decide where the code should run.
2323
</p>
24-
<p class="text-gray-600 text-xl sm:text-2xl">
24+
<p class="text-xl sm:text-2xl">
2525
Nullstack gives you all the tools you need to stay focused on your
2626
business logic.
2727
</p>
2828
<div>
29-
<button class="bg-pink-600 text-white px-6 py-4 border border-pink-600 hover:bg-white hover:text-pink-600 inline-block">
29+
<button class="bg-pink-600 text-white px-6 py-4 border border-pink-600 hover:bg-transparent hover:text-pink-600 inline-block">
3030
npx create-nullstack-app
3131
</button>
3232
</div>
3333
</div>
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" />
34+
<div class="bg-center bg-0 hover:bg-100 bg-repeat-y mt-6" style="background-image: url(/stars.png); transition: background-size 3s;">
35+
<img src="/hero.png" alt="Nulla-Chan" class="max-w-full" />
3636
</div>
3737
</section>
3838
);
@@ -84,7 +84,7 @@ class Home extends Nullstack {
8484
<h2 class="text-pink-600 text-xl sm:text-4xl font-light mb-4">
8585
{title}
8686
</h2>
87-
<p class="text-xl font-gray-600">
87+
<p class="text-xl">
8888
{children}
8989
</p>
9090
<img src={image} />
@@ -107,7 +107,7 @@ class Home extends Nullstack {
107107
return (
108108
<div>
109109
<section class="max-w-screen-xl mx-auto px-4 flex justify-center items-center flex-wrap py-12 sm:pt-36">
110-
<h2 class="text-gray-800 text-xl sm:text-4xl font-light mb-4">
110+
<h2 class="text-xl sm:text-4xl font-light mb-4">
111111
Learn with our <del class="text-gray-400">Dweebs</del> <span class="text-pink-600">Experts </span>
112112
</h2>
113113
<div class="sm:flex items-center justify-center w-full mt-12 flex-wrap">
@@ -122,7 +122,7 @@ class Home extends Nullstack {
122122

123123
renderSeparator() {
124124
return (
125-
<div class="w-full max-w-screen-xl mx-auto flex justify-center items-start flex-wrap border-t-4 border-gray-200 text-center">
125+
<div class="w-full max-w-screen-xl mx-auto flex justify-center items-start flex-wrap border-t-4 border-gray-200 text-center dark:opacity-10">
126126
<img src="/arrow.png" class="-mt-1" />
127127
</div>
128128
)
@@ -135,24 +135,24 @@ class Home extends Nullstack {
135135
<Separator />
136136
<Trinity />
137137
<Separator />
138-
<Feature snippet="GlueCode" image="/home-glue-code.jpg" title="No more glue code">
138+
<Feature snippet="GlueCode" image="/glue-code.png" title="No more glue code">
139139
A full-stack Lifecycle combined with a feature-driven mindset allows
140140
you to write clean and reusable code without the need to create APIs
141141
manually.
142142
</Feature>
143143
<Separator />
144-
<Feature snippet="Vanilla" image="/home-glue-code.jpg" title="Become a better programmer" inverted>
144+
<Feature snippet="Vanilla" image="/glue-code.png" title="Become a better programmer" inverted>
145145
Your components are just POJOs.
146146
Take advantage of the existing ecosystem while you write Javascript as it is supposed to be,
147147
and see the result reflected in the dom.
148148
</Feature>
149149
<Separator />
150-
<Feature snippet="Modern" image="/home-glue-code.jpg" title="You already know Nullstack">
150+
<Feature snippet="Modern" image="/glue-code.png" title="You already know Nullstack">
151151
Routes are simple attributes you can assign to any tag, and links are just a tags.
152152
You will find out that Nullstack is just a modern version of your current stack.
153153
</Feature>
154154
<Separator />
155-
<Feature snippet="Batteries" image="/home-glue-code.jpg" title="All the tools you need" inverted>
155+
<Feature snippet="Batteries" image="/glue-code.png" title="All the tools you need" inverted>
156156
Most chores are very repetitive.
157157
Save your energy for the real challenges using the shortcuts we created,
158158
like object events and two-way bindings

‎src/Loader.njs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ class Loader extends Nullstack {
66
render({worker}) {
77
if(!worker.fetching) return false;
88
return (
9-
<div class="w-full z-50 fixed top-0 left-0 h-screen flex items-center justify-center bg-opacity-95 bg-white">
10-
<Cog animation="spin" speed="slow" height={40} class="text-gray-800" />
9+
<div class="w-full z-50 fixed top-0 left-0 h-screen flex items-center justify-center bg-white dark:bg-gray-900">
10+
<Cog animation="spin" speed="slow" height={40} class="text-gray-800 dark:text-white" />
1111
</div>
1212
)
1313
}

‎src/Waifu.njs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ class Waifu extends Translatable {
1313
render({worker}) {
1414
if(!this.i18n) return false;
1515
return (
16-
<div class="x md+p20t p10y sm-p2x">
16+
<div class="max-w-screen-xl mx-auto px-4 flex justify-between items-center flex-wrap py-12 sm:py-24">
1717
<div class="xx x12">
1818
{worker.online && <img src="/waifu.png" alt="Nulla-Chan" height="500" />}
1919
<div class="md+p10l">

0 commit comments

Comments
 (0)