create-berna-stencil 1.0.34 → 1.0.35

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/bin/create.js +1 -1
  2. package/package.json +1 -1
  3. package/src/404.njk +1 -1
  4. package/src/components/global/header.njk +3 -3
  5. package/src/components/welcome.njk +81 -204
  6. package/src/scss/modules/_footer.scss +1 -5
  7. package/src/scss/modules/_header.scss +1 -0
package/bin/create.js CHANGED
@@ -15,7 +15,7 @@ const COPY_TARGETS = [
15
15
 
16
16
  const PROJECT_PACKAGE = {
17
17
  name: path.basename(targetDir),
18
- version: '1.0.34',
18
+ version: '1.0.35',
19
19
  private: true,
20
20
  scripts: {
21
21
  "build:css": "sass src/scss:out/css --no-source-map --style=compressed --quiet",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "create-berna-stencil",
3
- "version": "1.0.34",
3
+ "version": "1.0.35",
4
4
  "description": "Eleventy boilerplate with per-page SCSS/JS pipeline, esbuild bundling, multi-framework CSS support and a built-in page management CLI",
5
5
  "keywords": [
6
6
  "eleventy",
package/src/404.njk CHANGED
@@ -7,7 +7,7 @@ layout: base.njk
7
7
  <!-- !IMPORTANT -->
8
8
  <!-- This is the only page that you need to modify statically -->
9
9
 
10
- <div class="container fade-in">
10
+ <div class="fade-in d-flex flex-column justify-content-center align-items-center" style="min-height: 60vh">
11
11
  <h1 data-lang-key="error404Message"></h1>
12
12
  <div><a href="/" data-lang-key="error404Return"></a></div>
13
13
  </div>
package/src/components/global/header.njk CHANGED
@@ -4,9 +4,9 @@
4
4
  <img src="{{ site.logo }}" alt="{{ site.title }}" height="40">
5
5
  </a>
6
6
  <div class="nav-links">
7
- <a class="btn btn-outline-primary" href="/">Homepage</a>
8
- <a class="btn btn-outline-primary" href="/about-us">About-us</a>
9
- <a class="btn btn-outline-primary" href="/contact-us">Contact us</a>
7
+ <a class="btn btn-outline-info" href="/">Homepage</a>
8
+ <a class="btn btn-outline-info" href="/about-us">About-us</a>
9
+ <a class="btn btn-outline-info" href="/contact-us">Contact us</a>
10
10
  </div>
11
11
  <div class="nav-links">
12
12
  <select id="lang-select" class="form-select">
package/src/components/welcome.njk CHANGED
@@ -1,208 +1,85 @@
1
- <div class="container fade-in get-started my-5">
2
-
3
- <span class="gs-badge">open source</span>
4
- <h1 class="gs-title">Berna Stencil</h1>
5
- <p class="gs-sub">An Eleventy-based static site starter with SCSS, JS pages, and a built-in CLI scaffolder.</p>
6
-
7
- <div class="gs-block">
8
- <p class="gs-block-label">scaffold pages, rename, remove</p>
9
- <div class="gs-cmd">
10
- <code>
11
- <span class="prompt">$ </span>
12
- <span class="cmd">npm run</span>
13
- <span class="arg">assistant</span>
14
- </code>
15
- <button class="gs-copy" onclick="navigator.clipboard.writeText('npm run assistant'); this.textContent='copied'; setTimeout(()=>this.textContent='copy',1500)">copy</button>
16
- </div>
17
-
18
- <hr />
19
-
20
- <div class="gs-guide-links">
21
- <a href="https://bernastencil.com/docs/pages"><i class="bi bi-file-plus"></i> adding pages</a>
22
- <a href="https://bernastencil.com/docs/layouts"><i class="bi bi-layout"></i> layouts</a>
23
- <a href="https://bernastencil.com/docs/extra-cdn"><i class="bi bi-brand-npm"></i> cdn per page</a>
24
- <a href="https://bernastencil.com/docs/i18n"><i class="bi bi-world"></i> i18n</a>
25
- <a href="https://bernastencil.com/docs/scss"><i class="bi bi-palette"></i> scss structure</a>
26
- </div>
1
+ <div class="container my-3">
2
+ <h1>Welcome to <span class="berna-stencil">Berna-Stencil</span></h1>
3
+ <div class="slogan">The framework you need, simplified</div>
4
+
5
+ <div class="grid">
6
+ <a href="https://bernastencil.com" class="card" target="_blank" rel="noopener noreferrer">
7
+ <i class="bi bi-book card-icon" aria-hidden="true"></i>
8
+ <h3>Documentation</h3>
9
+ <p>Everything you need to get started, from setup to advanced topics.</p>
10
+ <span class="card-link"
11
+ >Read the docs <i class="bi bi-arrow-right" aria-hidden="true"></i
12
+ ></span>
13
+ </a>
14
+
15
+ <a href="https://github.com/rhaastrake/berna-stencil" class="card" target="_blank" rel="noopener noreferrer">
16
+ <i class="bi bi-github card-icon" aria-hidden="true"></i>
17
+ <h3>Open Source</h3>
18
+ <p>Community-driven. Contributions, issues and PRs are welcome.</p>
19
+ <span class="card-link"
20
+ >GitHub <i class="bi bi-arrow-right" aria-hidden="true"></i
21
+ ></span>
22
+ </a>
27
23
  </div>
28
-
29
- <hr class="gs-divider" />
30
-
31
- <ul class="gs-features">
32
- <li><i class="bi bi-bolt"></i>Eleventy + Nunjucks templating</li>
33
- <li><i class="bi bi-palette"></i>SCSS with per-page stylesheets</li>
34
- <li><i class="bi bi-terminal-2"></i>CLI scaffolder for pages</li>
35
- <li><i class="bi bi-world"></i>Built-in i18n switcher</li>
36
- <li><i class="bi bi-layout"></i>Component-based layouts</li>
37
- <li><i class="bi bi-brand-npm"></i>CDN per-page asset management</li>
38
- </ul>
39
-
40
- <div class="gs-links">
41
- <a href="https://github.com/rhaastrake/berna-stencil"><i class="bi bi-github"></i> GitHub</a>
42
- <a href="https://github.com/rhaastrake/berna-stencil#readme"><i class="bi bi-book"></i> Docs</a>
43
- <a href="https://github.com/rhaastrake/berna-stencil/issues"><i class="bi bi-bug"></i> Issues</a>
44
- </div>
45
-
46
24
  </div>
47
-
48
25
  <style>
49
- .get-started {
50
- background: #0d0d0d;
51
- border: 0.5px solid #2a2a2a;
52
- border-radius: 16px;
53
- padding: 2.5rem;
54
- color: #e2e2e2;
55
- max-width: 680px;
56
-
57
- .gs-badge {
58
- display: inline-block;
59
- font-size: 11px;
60
- letter-spacing: 0.08em;
61
- text-transform: uppercase;
62
- color: #888;
63
- border: 0.5px solid #333;
64
- border-radius: 20px;
65
- padding: 3px 10px;
66
- margin-bottom: 1.25rem;
67
- }
68
-
69
- .gs-title {
70
- font-size: 22px;
71
- font-weight: 500;
72
- color: #f5f5f5;
73
- margin: 0 0 0.4rem;
74
- }
75
-
76
- .gs-sub {
77
- font-size: 14px;
78
- color: #666;
79
- margin: 0 0 2rem;
80
- }
81
-
82
- .gs-block {
83
- background: #161616;
84
- border: 0.5px solid #2a2a2a;
85
- border-radius: 10px;
86
- padding: 1rem 1.25rem;
87
- margin-bottom: 1.5rem;
88
-
89
- hr {
90
- border: none;
91
- border-top: 0.5px solid #2a2a2a;
92
- margin: 1rem 0;
93
- }
94
- }
95
-
96
- .gs-block-label {
97
- font-size: 11px;
98
- color: #555;
99
- letter-spacing: 0.06em;
100
- text-transform: uppercase;
101
- margin-bottom: 0.5rem;
102
- }
103
-
104
- .gs-cmd {
105
- display: flex;
106
- align-items: center;
107
- justify-content: space-between;
108
- gap: 1rem;
109
-
110
- code {
111
- font-size: 13px;
112
- color: #c9c9c9;
113
-
114
- .prompt { color: #444; }
115
- .cmd { color: #a3e4bc; }
116
- .arg { color: #7ec8e3; }
117
- }
118
- }
119
-
120
- .gs-copy {
121
- background: none;
122
- border: 0.5px solid #333;
123
- border-radius: 6px;
124
- padding: 4px 10px;
125
- color: #666;
126
- font-size: 11px;
127
- cursor: pointer;
128
- white-space: nowrap;
129
- flex-shrink: 0;
130
- transition: color 0.15s, border-color 0.15s;
131
-
132
- &:hover {
133
- color: #ccc;
134
- border-color: #555;
135
- }
136
- }
137
-
138
- .gs-guide-links {
139
- display: flex;
140
- flex-wrap: wrap;
141
- gap: 0.5rem 1.5rem;
142
-
143
- a {
144
- display: flex;
145
- align-items: center;
146
- gap: 5px;
147
- font-size: 12px;
148
- color: #555;
149
- text-decoration: none;
150
- transition: color 0.15s;
151
-
152
- i { font-size: 13px; }
153
-
154
- &:hover { color: #999; }
155
- }
156
- }
157
-
158
- .gs-divider {
159
- border: none;
160
- border-top: 0.5px solid #1e1e1e;
161
- margin: 1.5rem 0;
162
- }
163
-
164
- .gs-features {
165
- list-style: none;
166
- padding: 0;
167
- margin: 0 0 1.5rem;
168
- display: grid;
169
- grid-template-columns: 1fr 1fr;
170
- gap: 0.75rem;
171
-
172
- li {
173
- display: flex;
174
- align-items: flex-start;
175
- gap: 10px;
176
- font-size: 13px;
177
- color: #666;
178
-
179
- i {
180
- font-size: 15px;
181
- color: #444;
182
- margin-top: 1px;
183
- flex-shrink: 0;
184
- }
185
- }
186
- }
187
-
188
- .gs-links {
189
- display: flex;
190
- gap: 1.5rem;
191
- flex-wrap: wrap;
192
-
193
- a {
194
- display: flex;
195
- align-items: center;
196
- gap: 6px;
197
- font-size: 13px;
198
- color: #555;
199
- text-decoration: none;
200
- transition: color 0.15s;
201
-
202
- i { font-size: 15px; }
203
-
204
- &:hover { color: #aaa; }
205
- }
26
+ h1 {
27
+ text-align: center;
28
+ font-weight: 400;
29
+ .berna-stencil {
30
+ color: #42b883;
31
+ font-weight: 600;
206
32
  }
207
- }
208
- </style>
33
+ }
34
+ .slogan {
35
+ text-align: center;
36
+ color: #4b71a0;
37
+ font-size: 1.5rem;
38
+ margin-bottom: 1rem;
39
+ }
40
+ .card {
41
+ background: #0d1526;
42
+ border: 0.8px solid #1e2d4a;
43
+ border-radius: 10px;
44
+ padding: 18px;
45
+ display: flex;
46
+ flex-direction: column;
47
+ gap: 0.75rem;
48
+ margin-top: 1rem;
49
+ margin-bottom: 1rem;
50
+ transition:
51
+ border-color 0.2s,
52
+ transform 0.15s;
53
+ }
54
+ .card:hover {
55
+ border-color: #42b883;
56
+ transform: translateY(-2px);
57
+ }
58
+ .card-icon {
59
+ font-size: 2rem;
60
+ color: #42b883;
61
+ }
62
+ .card h3 {
63
+ font-size: 1.5rem;
64
+ font-weight: 600;
65
+ color: #cbd5e1;
66
+ letter-spacing: 0.01em;
67
+ }
68
+ .card p {
69
+ font-size: 1rem;
70
+ color: #3d5068;
71
+ line-height: 1.6;
72
+ }
73
+ .card-link {
74
+ display: flex;
75
+ align-items: center;
76
+ gap: 4px;
77
+ font-size: 1rem;
78
+ color: #42b883;
79
+ opacity: 0.7;
80
+ transition: opacity 0.15s;
81
+ }
82
+ .card:hover .card-link {
83
+ opacity: 1;
84
+ }
85
+ </style>
package/src/scss/modules/_footer.scss CHANGED
@@ -7,7 +7,7 @@
7
7
  footer {
8
8
  width: 100%;
9
9
  padding: root.$header-padding-y root.$header-padding-x;
10
- background-color: root.$primary;
10
+ background-color: #1e2d4a;
11
11
 
12
12
  h6 {
13
13
  margin-bottom: 0.75rem;
@@ -19,10 +19,6 @@ footer {
19
19
  margin: 0;
20
20
  }
21
21
 
22
- a {
23
- text-decoration: none;
24
- }
25
-
26
22
  hr {
27
23
  margin: 1rem 0;
28
24
  }
package/src/scss/modules/_header.scss CHANGED
@@ -13,6 +13,7 @@ header {
13
13
  align-items: center;
14
14
  padding: root.$header-padding-y root.$header-padding-x;
15
15
  background-color: root.$primary;
16
+ background-color: #1e2d4a;
16
17
  }
17
18
 
18
19
  nav {