create-berna-stencil 1.0.34 → 1.0.36

package/bin/create.js

@@ -15,7 +15,7 @@ const COPY_TARGETS = [
 
 const PROJECT_PACKAGE = {
     name: path.basename(targetDir),
-    version: '1.0.34',
+    version: '1.0.36',
     private: true,
     scripts: {
         "build:css": "sass src/scss:out/css --no-source-map --style=compressed --quiet",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-berna-stencil",
-  "version": "1.0.34",
+  "version": "1.0.36",
   "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,7 +7,7 @@ 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>

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" href="/">Homepage</a>
+      <a class="btn" href="/about-us">About-us</a>
+      <a class="btn" 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,98 @@
-<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" data-lang-key="welcomeSlogan"></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 data-lang-key="documentationCardTitle"></h3>
+      <p data-lang-key="documentatioCardParagraph">
+        Everything you need to get started, from setup to advanced topics and
+        customizations.
+      </p>
+      <span class="card-link"
+        data-lang-key="documentationCardLink"></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 data-lang-key="githubCardTitle">Github repository</h3>
+      <p data-lang-key="githubCardParagraph">Community-driven. Contributions, issues and PRs are welcome.</p>
+      <span class="card-link"
+        data-lang-key="githubCardLink">Open the repository</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: #38649b;
+    line-height: 1.6;
+  }
+  .card-link {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 1rem;
+    color: #42b883;
+    opacity: 0.8;
+    transition: opacity 0.15s;
+  }
+  .card:hover .card-link {
+    opacity: 1;
+  }
+</style>

package/src/data/lang.json

@@ -2,29 +2,35 @@
   "en": {
     "enLangName": "English",
     "itLangName": "Italian",
-    "forms": {
-      "formInvalidFields": "Please fill in all required fields correctly",
-      "emailSending": "Sending email",
-      "emailSuccess": "Email sent successfully",
-      "emailError": "An error occurred while sending the email"
-    },
 
     "error404Message": "Oops! Page not found",
-    "error404Return": "Return to homepage"
+    "error404Return": "Return to homepage",
 
+    "welcomeSlogan": "The framework you need, simplified",
+
+    "documentationCardTitle": "Documentation",
+    "documentatioCardParagraph": "Everything you need to get started, from setup to advanced topics and customizations",
+    "documentationCardLink": "Go to documentation",
+
+    "githubCardTitle": "Github repository",
+    "githubCardParagraph": "Community-driven. Contributions, issues and PRs are welcome.",
+    "githubCardLink": "Open the repository"
   },
   "it": {
     "enLangName": "Inglese",
     "itLangName": "Italiano",
-    "forms": {
-      "formInvalidFields": "Per favore, compila correttamente tutti i campi obbligatori",
-      "emailSending": "Invio in corso",
-      "emailSuccess": "Email inviata con successo",
-      "emailError": "Si è verificato un errore durante l'invio dell'email"
-    },
 
     "error404Message": "Oops! Pagina non trovata",
-    "error404Return": "Ritorna alla homepage"
-    
+    "error404Return": "Ritorna alla homepage",
+
+    "welcomeSlogan": "Il framework di cui hai bisogno, in modo semplice",
+
+    "documentationCardTitle": "Documentazione",
+    "documentatioCardParagraph": "Tutto ciò di cui hai bisogno per iniziare, dalla configurazione agli argomenti avanzati e personalizzazioni",
+    "documentationCardLink": "Vai alla documentazione",
+
+    "githubCardTitle": "Repository Github",
+    "githubCardParagraph": "Guidato dalla comunità. Contributi, segnalazioni e PR sono benvenuti.",
+    "githubCardLink": "Vai alla repository"
   }
 }

package/src/scss/modules/_buttons.scss

@@ -0,0 +1,17 @@
+//==========================
+// CSS RULES FOR BUTTONS
+//==========================
+
+// Getting root rules from _root.scss
+@use 'root' as root;
+
+.btn {
+  color: #42b883;
+  border-radius: 12px;
+  padding: 8px 20px;
+  transition: background 0.2s, color 0.2s;
+}
+.btn:hover {
+  background: #42b883;
+  color: #0d1526;
+}

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: #243947;
 
     h6 {
         margin-bottom: 0.75rem;
@@ -19,10 +19,6 @@ footer {
         margin: 0;
     }
 
-    a {
-        text-decoration: none;
-    }
-
     hr {
         margin: 1rem 0;
     }

package/src/scss/modules/_global.scss

@@ -19,6 +19,8 @@
 @import "animations";
 @import "mobile";
 
+@import "buttons";
+
 *,
 *::before,
 *::after {
@@ -35,4 +37,5 @@ body {
 
 main {
     flex: 1;
+    background-color: #1e1e1e94;
 }

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: #273a47;
 }
 
 nav {