Skip to content

Commit 3dfe735

Browse files
MortaroMortaro
committed
✨ toggle mode
1 parent ff560be commit 3dfe735

File tree

10 files changed

+119
-61
lines changed

10 files changed

+119
-61
lines changed

‎i18n/en-US/components/Header.yml‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,5 +16,6 @@ links:
1616
action:
1717
title: "Get Started"
1818
href: "/getting-started"
19-
nightMode: "Night Mode"
20-
dayMode: "Day Mode"
19+
mode:
20+
dark: "Night Mode"
21+
light: "Day Mode"

‎i18n/pt-BR/components/Header.yml‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,5 +16,6 @@ links:
1616
action:
1717
title: "Começar"
1818
href: "/pt-br/comecando"
19-
nightMode: "Modo Noite"
20-
dayMode: "Modo Dia"
19+
mode:
20+
dark: "Modo Noite"
21+
light: "Modo Dia"

‎public/nullstack.png‎

-3.18 KB
Binary file not shown.

‎public/nullstack.svg‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎src/Application.njs‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,10 +53,24 @@ class Application extends Nullstack {
5353
)
5454
}
5555

56-
render({router, isDark}) {
56+
prepare(context) {
57+
context.mode = 'light';
58+
context.oppositeMode = 'dark';
59+
}
60+
61+
hydrate(context) {
62+
if(localStorage['mode']) {
63+
context.mode = localStorage['mode'];
64+
if(context.mode === 'dark') {
65+
context.oppositeMode = 'light';
66+
}
67+
}
68+
}
69+
70+
render({router, mode}) {
5771
const locale = router.url.startsWith('/pt-br') ? 'pt-BR' : 'en-US';
5872
return (
59-
<main class={isDark ? `dark` : ''}>
73+
<main class={`${mode} bgm1 cm3`}>
6074
<Header locale={locale} />
6175

6276
<Home route="/" locale="en-US" />

‎src/Application.scss‎

Lines changed: 17 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,9 @@
2222
font-display: swap;
2323
}
2424

25-
:root {
25+
/*! purgecss start ignore */
26+
27+
.light {
2628
--primary-font-family: 'Crete Round', serif;
2729
--secondary-font-family: 'Roboto', sans-serif;
2830
--primary-color: #d22365;
@@ -32,11 +34,21 @@
3234
--warning-color: #ffffd6;
3335
}
3436

37+
.dark {
38+
--primary-font-family: 'Crete Round', serif;
39+
--secondary-font-family: 'Roboto', sans-serif;
40+
--primary-color: #d22365;
41+
--soft-color: #2c3748;
42+
--neutral-color: #282c34;
43+
--heavy-color: #fff;
44+
--warning-color: #ffffd6;
45+
}
46+
47+
/*! purgecss end ignore */
48+
3549
body {
3650
font-family: var(--secondary-font-family);
3751
font-weight: 300;
38-
color: var(--heavy-color);
39-
padding-top: 70px;
4052
overflow-y: scroll;
4153
}
4254

@@ -64,34 +76,9 @@ section a img {
6476
}
6577
}
6678

67-
.cursor-pointer {
68-
cursor: pointer !important;
69-
}
70-
71-
body * {
72-
transition: all 50ms;
73-
}
74-
75-
@mixin darkMode {
76-
background-color: var(--heavy-color);
77-
color: var(--soft-color);
78-
}
79-
80-
.dark {
79+
main {
8180
min-height: 100vh;
82-
@include darkMode();
83-
84-
& article h2 a,
85-
& article h3 a,
86-
& .loader-cog,
87-
& .loader-cog svg {
88-
@include darkMode();
89-
}
90-
91-
& .bgm2,
92-
& .menu-links {
93-
color: var(--heavy-color);
94-
}
81+
padding-top: 70px;
9582
}
9683

9784
/*! purgecss start ignore */

‎src/Components.njs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ class Components extends Translatable {
1919
<div class="x12 m6y bcm2 p4x p4t p1b">
2020
<h2 class="x12 sm-fs6 md+fs8 m3b"> {title} </h2>
2121
{tagline &&
22-
<p class="p2 m3y" title={tagline.title}> {tagline.text} </p>
22+
<p class="m3y" title={tagline.title}> {tagline.text} </p>
2323
}
2424
<nav class="x12">
2525
{projects.map(project => <Project {...project} />)}

‎src/Header.njs‎

Lines changed: 16 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import Logo from './Logo';
12
import Bars from 'poisonicon/bars/stroke';
23
import Ex from 'poisonicon/ex/stroke';
34
import Translatable from './Translatable';
@@ -6,48 +7,41 @@ class Header extends Translatable {
67

78
expanded = false;
89

9-
renderLink({title, href, target}) {
10+
renderLink({title, href, target, onclick}) {
1011
return (
11-
<a
12+
<element tag={href ? 'a' : 'button'}
1213
href={href}
1314
target={target}
14-
onclick={target ? false : {expanded: false}}
15+
onclick={onclick || (target ? false : {expanded: false})}
1516
rel={target ? 'noopener' : false}
16-
class="sm-x12 sm-bcm2b p2 ci1:h"
17-
> {title} </a>
17+
class="sm-x12 sm-bcm2b p2 fs4 ci1:h yy"
18+
> {title} </element>
1819
)
1920
}
2021

21-
hydrate(context) {
22-
context.isDark = !!(window.localStorage.getItem('isDark') === "true");
22+
toggleMode(context) {
23+
const nextOppositeMode = context.mode;
24+
context.mode = context.oppositeMode;
25+
context.oppositeMode = nextOppositeMode;
26+
window.localStorage.setItem('mode', context.mode);
2327
}
2428

25-
setDark(context) {
26-
context.isDark = !context.isDark;
27-
window.localStorage.setItem('isDark', context.isDark);
28-
}
29-
30-
render({isDark}) {
29+
render({oppositeMode}) {
3130
if(!this.i18n) return false;
3231
return (
3332
<header class="x12 pftl bgm1 bs2">
34-
<div class="x xsb yy p4y">
33+
<div class="x xsb yy p5y">
3534
<div class="sm-x12 sm-xsb sm-p4x yy">
36-
<a href={this.i18n.home.href} title={this.i18n.home.title}>
37-
<img src="/nullstack.svg" alt="Nullstack" width="135" height="30" />
35+
<a {...this.i18n.home}>
36+
<Logo height="30" theme={oppositeMode} />
3837
</a>
3938
<span onclick={{expanded: !this.expanded}} class="yy md+off">
4039
<element tag={this.expanded ? Ex : Bars} height={20} class="cm3" />
4140
</span>
4241
</div>
4342
<nav class={`menu-links yy sm-p4 ${!this.expanded && 'sm-off'}`}>
4443
{this.i18n.links.map((link) => <Link {...link} />)}
45-
<p
46-
class="cursor-pointer sm-x12 sm-bcm2b p2 ci1:h"
47-
onclick={this.setDark}
48-
>
49-
{this.i18n[`${isDark ? 'day' : 'night'}Mode`]}
50-
</p>
44+
<Link title={this.i18n.mode[oppositeMode]} onclick={this.toggleMode} />
5145
</nav>
5246
<div class={`sm-x12 sm-p4x ${!this.expanded && 'sm-off'}`}>
5347
<a href={this.i18n.action.href} onclick={{expanded: false}} class="xx sm-x12 bci1 bgi1 bgm1:h cm1 ci1:h p4x p2y">

‎src/Logo.njs‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import Nullstack from 'nullstack';
2+
3+
class Logo extends Nullstack {
4+
5+
render({theme, height, accent}) {
6+
const themeColor = theme === 'light' ? '#fff' : '#2d3748';
7+
const accentColor = accent === false ? themeColor : '#d22365';
8+
return (
9+
<svg xmlns="http://www.w3.org/2000/svg" height={height} viewBox="0 0 511.5039 113.7368">
10+
<title> Nullstack </title>
11+
<path
12+
d="M13.2736,39.964H28.7009v9.8922a20.3919,20.3919,0,0,1,7.743-8.479,21.2792,21.2792,0,0,1,11.2172-3.0031q7.36,0,11.3349,4.1218t3.9745,11.6588a48.9655,48.9655,0,0,1-1.06,8.8913l-8.3025,42.8665H36.3556L44.187,65.7546a31.2306,31.2306,0,0,0,.5888-5.5939q0-7.6542-6.3593-7.6547a10.7348,10.7348,0,0,0-8.4791,4.3278q-3.5922,4.328-5.0639,12.0415l-7.1248,37.0372H.4961Z"
13+
transform="translate(-0.4961)"
14+
fill={themeColor}
15+
/>
16+
<path
17+
d="M81.4691,107.62q-7.2426,0-11.2466-4.1807t-4.004-11.8943a46.3965,46.3965,0,0,1,1.001-8.6557L75.64,39.964H92.7746L85.0609,80.24a29.8175,29.8175,0,0,0-.5888,5.5938q0,7.6551,6.4771,7.6548A10.3547,10.3547,0,0,0,99.2811,89.19q3.4446-4.2978,4.9756-12.0709L111.44,39.964h17.1348l-12.7775,65.9485H100.37V96.138a18.7565,18.7565,0,0,1-7.4781,8.3908A21.4849,21.4849,0,0,1,81.4691,107.62Z"
18+
transform="translate(-0.4961)"
19+
fill={themeColor}
20+
/>
21+
<path
22+
d="M150.2958,113.7368q-11.4821,0-16.7815-3.3563t-5.2995-10.5989a43.049,43.049,0,0,1,1.1188-8.3613l11.9532-56.6451H123.2687l2.532-13.2486h35.2118L146.2918,92.4213q-.1767.825-.3238,1.7371a10.5763,10.5763,0,0,0-.1473,1.6781q0,4.6521,8.2436,4.6517h16.3694l-2.65,13.2486Z"
23+
transform="translate(-0.4961)"
24+
fill={accentColor}
25+
/>
26+
<path
27+
d="M181.897,92.21q-11.4822,0-16.7816-3.3563T159.816,78.255a43.0455,43.0455,0,0,1,1.1187-8.3613l11.9532-56.6451H154.87L157.4018,0h35.2118L177.8929,70.8947q-.1765.8248-.3238,1.737a10.5766,10.5766,0,0,0-.1472,1.6782q0,4.6519,8.2435,4.6517h16.3694l-2.65,13.2486Z"
28+
transform="translate(-0.4961)"
29+
fill={accentColor}
30+
/>
31+
<path
32+
d="M228.3106,107.62a72.47,72.47,0,0,1-23.6119-4.1218l3.003-15.0739q10.5988,6.7717,21.6688,6.7715,6.4176,0,10.0983-2.2965a7.1387,7.1387,0,0,0,3.68-6.3593,4.4873,4.4873,0,0,0-1.8253-3.8273q-2.3556-1.884-9.5979-3.9452l-5.1817-1.4132q-13.8969-3.8271-13.8963-16.9582a18.9819,18.9819,0,0,1,8.0375-16.0455q8.0374-5.976,22.4637-5.9766a60.6829,60.6829,0,0,1,10.1573.8538,63.0434,63.0434,0,0,1,10.5105,2.797L260.8727,56.981a33.7,33.7,0,0,0-19.3724-6.3q-5.9478,0-9.3623,2.09a6.2659,6.2659,0,0,0-3.4152,5.5056,5.102,5.102,0,0,0,2.2375,4.2984q2.4731,1.7082,9.6568,3.7685l4.3573,1.2365q7.4775,2.12,10.9816,6.271t3.5035,10.805q0,10.7172-8.2436,16.84T228.3106,107.62Z"
33+
transform="translate(-0.4961)"
34+
fill={themeColor}
35+
/>
36+
<path
37+
d="M297.9546,106.2069q-11.3055,0-16.6932-3.3857t-5.3878-10.57a47.7847,47.7847,0,0,1,1.06-8.3613l5.9472-30.6778H265.9813l2.532-13.2486h16.8993l3.5918-18.7247h17.2527L302.6063,39.964h22.5521l-2.532,13.2486h-22.552l-6.1827,31.6788A20.2915,20.2915,0,0,0,293.48,88.13a3.9534,3.9534,0,0,0,1.9431,3.68q1.9433,1.1482,6.2416,1.1482h13.2486l-2.532,13.2486Z"
38+
transform="translate(-0.4961)"
39+
fill={themeColor}
40+
/>
41+
<path
42+
d="M338.2138,107.62q-9.4224,0-14.6029-5.1228-5.1828-5.1228-5.1816-14.25,0-12.2469,9.3034-18.99t26.2617-6.7421h11.3643l.4711-2.8852a3.6427,3.6427,0,0,1,.1177-.7066v-1.001A5.6271,5.6271,0,0,0,362.974,52.8q-2.9748-1.7666-8.5086-1.7665a41.5275,41.5275,0,0,0-10.8933,1.59,85.9338,85.9338,0,0,0-13.3074,5.0639l2.7675-14.7206a74.3941,74.3941,0,0,1,24.6129-4.5929q12.07,0,18.6363,4.6518,6.5643,4.652,6.5655,13.72a36.323,36.323,0,0,1-.4711,5.5939q-.4716,3.003-1.1188,5.9471l-7.2425,37.626H358.47v-7.36A26.3115,26.3115,0,0,1,338.2138,107.62Zm7.1837-11.8354q6.476,0,11.2466-5.6822t6.3-15.3978h-6.6537q-19.9029,0-19.9023,12.13a8.3352,8.3352,0,0,0,9.009,8.95Z"
43+
transform="translate(-0.4961)"
44+
fill={themeColor}
45+
/>
46+
<path
47+
d="M415.1828,107.62q-13.72,0-21.1683-7.4192t-7.4486-21.4333a42.63,42.63,0,0,1,5.005-20.8444,36.7663,36.7663,0,0,1,13.9257-14.338,40.3978,40.3978,0,0,1,20.7562-5.2111A39.0215,39.0215,0,0,1,445.8607,43.32l-3.1208,15.78a22.7112,22.7112,0,0,0-16.075-6.7126,21.2393,21.2393,0,0,0-11.8059,3.2974A22.52,22.52,0,0,0,406.88,64.783a29.416,29.416,0,0,0-2.8853,13.278q0,8.0083,3.4741,11.7765T417.95,93.606q8.8324,0,19.3724-6.1238l-3.2974,16.2516A45.998,45.998,0,0,1,415.1828,107.62Z"
48+
transform="translate(-0.4961)"
49+
fill={themeColor}
50+
/>
51+
<path
52+
d="M458.1224,14.2911H475.375l-8.95,46.0463L490.2134,39.964H512L482.2643,64.5769l18.43,41.3356H482.382L469.31,75.058l-6.83,5.6527-4.8284,25.2018H440.3987Z"
53+
transform="translate(-0.4961)"
54+
fill={themeColor}
55+
/>
56+
</svg>
57+
)
58+
}
59+
60+
}
61+
62+
export default Logo;

‎src/Snippet.njs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ class Snippet extends Nullstack {
1919

2020
render() {
2121
return (
22-
<pre class="bgm3 p4">
22+
<pre class="p4">
2323
<code html={this.html} />
2424
</pre>
2525
)

0 commit comments

Comments
 (0)