create-berna-stencil 1.0.33 → 1.0.35

package/_tools/res/templates/template.njk

@@ -4,5 +4,6 @@ permalink: ""
 layout: includes.njk
 ---
 
-<!-- Add content via components in src/components/, not directly here.
-     Register them in src/layouts/includes.njk. -->
+<!-- !IMPORTANT -->
+<!-- DO NOT ADD ANYTHING HERE -->
+<!-- You should create a new component.njk into src/components and include that in components/layouts/includes.njk -->

package/bin/create.js

@@ -15,7 +15,7 @@ const COPY_TARGETS = [
 
 const PROJECT_PACKAGE = {
     name: path.basename(targetDir),
-    version: '1.0.33',
+    version: '1.0.35',
     private: true,
     scripts: {
         "build:css": "sass src/scss:out/css --no-source-map --style=compressed --quiet",
@@ -106,4 +106,3 @@ if (process.argv[2]) {
 }
 log('npm install');
 log('npm run serve\n');
-log("\nDon't forget to check the documentation at https://bernastencil.com");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-berna-stencil",
-  "version": "1.0.33",
+  "version": "1.0.35",
   "description": "Eleventy boilerplate with per-page SCSS/JS pipeline, esbuild bundling, multi-framework CSS support and a built-in page management CLI",
   "keywords": [
     "eleventy",

package/src/404.njk

@@ -7,10 +7,10 @@ layout: base.njk
 <!-- !IMPORTANT -->
 <!-- This is the only page that you need to modify statically -->
 
-<div class="container fade-in">
+<div class="fade-in d-flex flex-column justify-content-center align-items-center" style="min-height: 60vh">
   <h1 data-lang-key="error404Message"></h1>
   <div><a href="/" data-lang-key="error404Return"></a></div>
 </div>
 
 {# You can also add the includes you need here below
-{% include "_exampleComponent.njk" %} #}
+{% include "component.njk" %} #}

package/src/components/global/header.njk

@@ -4,9 +4,9 @@
         <img src="{{ site.logo }}" alt="{{ site.title }}" height="40">
       </a>
     <div class="nav-links">
-      <a class="btn btn-outline-primary" href="/">Homepage</a>
-      <a class="btn btn-outline-primary" href="/about-us">About-us</a>
-      <a class="btn btn-outline-primary" href="/contact-us">Contact us</a>
+      <a class="btn btn-outline-info" href="/">Homepage</a>
+      <a class="btn btn-outline-info" href="/about-us">About-us</a>
+      <a class="btn btn-outline-info" href="/contact-us">Contact us</a>
     </div>
     <div class="nav-links">
       <select id="lang-select" class="form-select">

package/src/components/welcome.njk

@@ -1,208 +1,85 @@
-<div class="container fade-in get-started my-5">
-
-  <span class="gs-badge">open source</span>
-  <h1 class="gs-title">Berna Stencil</h1>
-  <p class="gs-sub">An Eleventy-based static site starter with SCSS, JS pages, and a built-in CLI scaffolder.</p>
-
-  <div class="gs-block">
-    <p class="gs-block-label">scaffold pages, rename, remove</p>
-    <div class="gs-cmd">
-      <code>
-        <span class="prompt">$ </span>
-        <span class="cmd">npm run</span>
-        <span class="arg">assistant</span>
-      </code>
-      <button class="gs-copy" onclick="navigator.clipboard.writeText('npm run assistant'); this.textContent='copied'; setTimeout(()=>this.textContent='copy',1500)">copy</button>
-    </div>
-
-    <hr />
-
-    <div class="gs-guide-links">
-      <a href="https://bernastencil.com/docs/pages"><i class="bi bi-file-plus"></i> adding pages</a>
-      <a href="https://bernastencil.com/docs/layouts"><i class="bi bi-layout"></i> layouts</a>
-      <a href="https://bernastencil.com/docs/extra-cdn"><i class="bi bi-brand-npm"></i> cdn per page</a>
-      <a href="https://bernastencil.com/docs/i18n"><i class="bi bi-world"></i> i18n</a>
-      <a href="https://bernastencil.com/docs/scss"><i class="bi bi-palette"></i> scss structure</a>
-    </div>
+<div class="container my-3">
+  <h1>Welcome to <span class="berna-stencil">Berna-Stencil</span></h1>
+  <div class="slogan">The framework you need, simplified</div>
+
+  <div class="grid">
+    <a href="https://bernastencil.com" class="card" target="_blank" rel="noopener noreferrer">
+      <i class="bi bi-book card-icon" aria-hidden="true"></i>
+      <h3>Documentation</h3>
+      <p>Everything you need to get started, from setup to advanced topics.</p>
+      <span class="card-link"
+        >Read the docs <i class="bi bi-arrow-right" aria-hidden="true"></i
+      ></span>
+    </a>
+
+    <a href="https://github.com/rhaastrake/berna-stencil" class="card" target="_blank" rel="noopener noreferrer">
+      <i class="bi bi-github card-icon" aria-hidden="true"></i>
+      <h3>Open Source</h3>
+      <p>Community-driven. Contributions, issues and PRs are welcome.</p>
+      <span class="card-link"
+        >GitHub <i class="bi bi-arrow-right" aria-hidden="true"></i
+      ></span>
+    </a>
   </div>
-
-  <hr class="gs-divider" />
-
-  <ul class="gs-features">
-    <li><i class="bi bi-bolt"></i>Eleventy + Nunjucks templating</li>
-    <li><i class="bi bi-palette"></i>SCSS with per-page stylesheets</li>
-    <li><i class="bi bi-terminal-2"></i>CLI scaffolder for pages</li>
-    <li><i class="bi bi-world"></i>Built-in i18n switcher</li>
-    <li><i class="bi bi-layout"></i>Component-based layouts</li>
-    <li><i class="bi bi-brand-npm"></i>CDN per-page asset management</li>
-  </ul>
-
-  <div class="gs-links">
-    <a href="https://github.com/rhaastrake/berna-stencil"><i class="bi bi-github"></i> GitHub</a>
-    <a href="https://github.com/rhaastrake/berna-stencil#readme"><i class="bi bi-book"></i> Docs</a>
-    <a href="https://github.com/rhaastrake/berna-stencil/issues"><i class="bi bi-bug"></i> Issues</a>
-  </div>
-
 </div>
-
 <style>
-    .get-started {
-    background: #0d0d0d;
-    border: 0.5px solid #2a2a2a;
-    border-radius: 16px;
-    padding: 2.5rem;
-    color: #e2e2e2;
-    max-width: 680px;
-
-    .gs-badge {
-        display: inline-block;
-        font-size: 11px;
-        letter-spacing: 0.08em;
-        text-transform: uppercase;
-        color: #888;
-        border: 0.5px solid #333;
-        border-radius: 20px;
-        padding: 3px 10px;
-        margin-bottom: 1.25rem;
-    }
-
-    .gs-title {
-        font-size: 22px;
-        font-weight: 500;
-        color: #f5f5f5;
-        margin: 0 0 0.4rem;
-    }
-
-    .gs-sub {
-        font-size: 14px;
-        color: #666;
-        margin: 0 0 2rem;
-    }
-
-    .gs-block {
-        background: #161616;
-        border: 0.5px solid #2a2a2a;
-        border-radius: 10px;
-        padding: 1rem 1.25rem;
-        margin-bottom: 1.5rem;
-
-        hr {
-            border: none;
-            border-top: 0.5px solid #2a2a2a;
-            margin: 1rem 0;
-        }
-    }
-
-    .gs-block-label {
-        font-size: 11px;
-        color: #555;
-        letter-spacing: 0.06em;
-        text-transform: uppercase;
-        margin-bottom: 0.5rem;
-    }
-
-    .gs-cmd {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 1rem;
-
-        code {
-            font-size: 13px;
-            color: #c9c9c9;
-
-            .prompt { color: #444; }
-            .cmd    { color: #a3e4bc; }
-            .arg    { color: #7ec8e3; }
-        }
-    }
-
-    .gs-copy {
-        background: none;
-        border: 0.5px solid #333;
-        border-radius: 6px;
-        padding: 4px 10px;
-        color: #666;
-        font-size: 11px;
-        cursor: pointer;
-        white-space: nowrap;
-        flex-shrink: 0;
-        transition: color 0.15s, border-color 0.15s;
-
-        &:hover {
-            color: #ccc;
-            border-color: #555;
-        }
-    }
-
-    .gs-guide-links {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 0.5rem 1.5rem;
-
-        a {
-            display: flex;
-            align-items: center;
-            gap: 5px;
-            font-size: 12px;
-            color: #555;
-            text-decoration: none;
-            transition: color 0.15s;
-
-            i { font-size: 13px; }
-
-            &:hover { color: #999; }
-        }
-    }
-
-    .gs-divider {
-        border: none;
-        border-top: 0.5px solid #1e1e1e;
-        margin: 1.5rem 0;
-    }
-
-    .gs-features {
-        list-style: none;
-        padding: 0;
-        margin: 0 0 1.5rem;
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 0.75rem;
-
-        li {
-            display: flex;
-            align-items: flex-start;
-            gap: 10px;
-            font-size: 13px;
-            color: #666;
-
-            i {
-                font-size: 15px;
-                color: #444;
-                margin-top: 1px;
-                flex-shrink: 0;
-            }
-        }
-    }
-
-    .gs-links {
-        display: flex;
-        gap: 1.5rem;
-        flex-wrap: wrap;
-
-        a {
-            display: flex;
-            align-items: center;
-            gap: 6px;
-            font-size: 13px;
-            color: #555;
-            text-decoration: none;
-            transition: color 0.15s;
-
-            i { font-size: 15px; }
-
-            &:hover { color: #aaa; }
-        }
+  h1 {
+    text-align: center;
+    font-weight: 400;
+    .berna-stencil {
+      color: #42b883;
+      font-weight: 600;
     }
-}
-</style>
+  }
+  .slogan {
+    text-align: center;
+    color: #4b71a0;
+    font-size: 1.5rem;
+    margin-bottom: 1rem;
+  }
+  .card {
+    background: #0d1526;
+    border: 0.8px solid #1e2d4a;
+    border-radius: 10px;
+    padding: 18px;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    transition:
+      border-color 0.2s,
+      transform 0.15s;
+  }
+  .card:hover {
+    border-color: #42b883;
+    transform: translateY(-2px);
+  }
+  .card-icon {
+    font-size: 2rem;
+    color: #42b883;
+  }
+  .card h3 {
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: #cbd5e1;
+    letter-spacing: 0.01em;
+  }
+  .card p {
+    font-size: 1rem;
+    color: #3d5068;
+    line-height: 1.6;
+  }
+  .card-link {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 1rem;
+    color: #42b883;
+    opacity: 0.7;
+    transition: opacity 0.15s;
+  }
+  .card:hover .card-link {
+    opacity: 1;
+  }
+</style>

package/src/index.njk

@@ -6,4 +6,4 @@ layout: includes.njk
 
 <!-- !IMPORTANT -->
 <!-- DO NOT ADD ANYTHING HERE -->
-<!-- YOU SHOULD CREATE A NEW COMPONENT.NJK INTO SRC/COMPONENTS AND INCLUDE THAT IN LAYOUTS/INCLUDES.NJK-->
+<!-- You should create a new component.njk into src/components and include that in components/layouts/includes.njk -->

package/src/scss/modules/_footer.scss

@@ -7,7 +7,7 @@
 footer {
     width: 100%;
     padding: root.$header-padding-y root.$header-padding-x;
-    background-color: root.$primary;
+    background-color: #1e2d4a;
 
     h6 {
         margin-bottom: 0.75rem;
@@ -19,10 +19,6 @@ footer {
         margin: 0;
     }
 
-    a {
-        text-decoration: none;
-    }
-
     hr {
         margin: 1rem 0;
     }

package/src/scss/modules/_header.scss

@@ -13,6 +13,7 @@ header {
     align-items: center;
     padding: root.$header-padding-y root.$header-padding-x;
     background-color: root.$primary;
+    background-color: #1e2d4a;
 }
 
 nav {