first commit

README.md

@@ -1,8 +1,6 @@
-# Eleventonia
+# Lucht
 
-A mildly opinionated [Eleventy](https://11ty.dev) starter project.
+A homepage based on a mildly opinionated [Eleventy](https://11ty.dev) starter project called Eleventonia.
-
-[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/mattdecamp/eleventonia)  
 
 ## Features
 

package-lock.json

@@ -1,12 +1,12 @@
 {
-  "name": "eleventonia",
+  "name": "lucht",
-  "version": "2.0.0",
+  "version": "1.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "eleventonia",
+      "name": "lucht",
-      "version": "2.0.0",
+      "version": "1.0.0",
       "license": "MIT",
       "dependencies": {
         "@11ty/eleventy": "^2.0.0",

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "eleventonia",
+  "name": "lucht",
-  "version": "2.0.0",
+  "version": "1.0.0",
   "description": "A mildly opinionated Eleventy starter kit",
   "scripts": {
     "eleventy:serve": "cross-env ELEVENTY_ENV=development eleventy --serve --quiet",

src/assets/icons/phone.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-phone" width="44" height="44" viewBox="0 0 24 24" stroke-width="1" stroke="var(--primary)" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <path d="M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2" />
+</svg>

src/assets/icons/telegram.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-telegram" width="44" height="44" viewBox="0 0 24 24" stroke-width="1" stroke="var(--primary)" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <path d="M15 10l-4 4l6 6l4 -16l-18 7l4 2l2 6l3 -4" />
+</svg>

src/assets/icons/whatsapp.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-whatsapp" width="44" height="44" viewBox="0 0 24 24" stroke-width="1" stroke="var(--primary)" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <path d="M3 21l1.65 -3.8a9 9 0 1 1 3.4 2.9l-5.05 .9" />
+  <path d="M9 10a.5 .5 0 0 0 1 0v-1a.5 .5 0 0 0 -1 0v1a5 5 0 0 0 5 5h1a.5 .5 0 0 0 0 -1h-1a.5 .5 0 0 0 0 1" />
+</svg>

src/assets/images/site.webmanifest

@@ -1,6 +1,6 @@
 {
-    "name": "Eleventonia",
+    "name": "Lucht",
-    "short_name": "Eleventonia",
+    "short_name": "Lucht",
     "icons": [
         {
             "src": "/assets/images/android-chrome-192x192.png",

src/assets/styles/scss/base/_layout.scss

@@ -5,12 +5,13 @@
     // min-height: 100%;
     min-height: 100vh;
     overflow: hidden;
-    background: linear-gradient(
+    background: var(--primary);
-        310deg,
+    // background: linear-gradient(
-        var(--background-color-tertiary),
+    //     310deg,
-        var(--background-color-tertiary) 20%,
+    //     var(--background-color-tertiary),
-        var(--background-color) 20%
+    //     var(--background-color-tertiary) 20%,
-    );
+    //     var(--background-color) 20%
+    // );
 }
 #main-container {
     width: 90%;

src/assets/styles/scss/components/_landing.scss

@@ -0,0 +1,88 @@
+.landing{
+        z-index: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        position: fixed;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        justify-content: center;
+    .hero {
+        position: fixed;
+        display: flex;
+        width: min-content;
+        padding: 1rem;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: center;
+        flex-shrink: 0;
+        border: 2px solid var(--primary);
+        background: #FFF;
+        aspect-ratio: 1;
+
+        .hero__header { 
+            display: flex;
+            flex-direction: column;
+            gap: .5rem;
+            span {
+            color: var(--primary);
+            font-family: Basis Grotesque Mono Pro Light;
+            font-size: 1.9rem;
+            font-style: normal;
+            font-weight: 300;
+            line-height: normal;
+            letter-spacing: 0.26644rem;
+            text-transform: uppercase;
+        }
+    }
+
+        .hero__info {
+            font-size: 1.2rem;
+            color: var(--primary);
+            font-family: Basis Grotesque Mono Pro Light;
+            font-style: 800;
+            font-weight: 300;
+            line-height: normal;
+            letter-spacing: 0.26644rem;
+            text-transform: uppercase;
+        }
+
+        .hero__icons {
+            width: 100%;
+            display: flex;
+            justify-content: space-evenly;
+            a {
+                text-decoration: none;
+            }
+            svg {
+                height: 3rem;
+                width: 3rem;
+            }
+        }
+    }
+}
+
+.bkg {
+    z-index: 0;
+    position: fixed;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr;
+    img {
+        object-fit: cover;
+        min-height: 100vh;
+        &.bkg--winter {
+            border-right: 1px solid black;
+        }&.bkg--summer {
+            filter: grayscale(100%) brightness(1.5) contrast(.75);
+            border-left: 1px solid black;
+        }
+            
+    }
+}

src/assets/styles/scss/main.scss

@@ -15,6 +15,7 @@ Main Style Sheet
 
 // Component Styles
 @import "components/header"; 
+@import "components/landing"; 
 @import "components/footer";
 @import "components/nav";
 @import "components/post-list";

src/assets/styles/scss/utility/_variables.scss

@@ -1,11 +1,11 @@
 :root {
   --test-var: #909090; 
   // COLORS
-  --background-color: #ffffff;
+  --background-color: black;
-  --background-color-secondary: #301e4e;
+  --background-color-secondary: #202020;
   --background-color-tertiary: #ff6e6c;
 
-  --primary: #1f1135;
+  --primary: #000;
   --secondary: #ff6e6c;
 
   --text-primary: #1f1135;

src/data/site.json

@@ -1,14 +1,12 @@
 {
-    "name": "Eleventonia",
+    "name": "Verwarming, Ventilatie, Airco",
-    "description": "A mildly opinionated Eleventy starter",
+    "description": "Lucht Onderhoud - Utrecht & Amsterdam",
-    "url": "https://eleventonia.mattdecamp.com",
+    "url": "https://lucht.altweb.me",
-    "locale": "en_us",
+    "locale": "nl_nl",
-    "lang": "en",
+    "lang": "nl",
-    "githubUrl": "https://github.com/mattdecamp/eleventonia",
+    "authorName": "Spencer Flagg",
-    "authorName": "Matt DeCamp",
+    "authorEmail": "work@spencerflagg.com",
-    "authorHandle": "@mpdecamp",
+    "yearCreated": 2023,
-    "authorEmail": "matt@happybear.dev",
+    "copyright": "2023",
-    "yearCreated": 2021,
-    "copyright": "2021 to present",
     "socialImage": "/"
 }

src/includes/layouts/base.njk

@@ -14,13 +14,13 @@
   </head>
   <body>
     <div id="layout">
-      {% include "partials/header.njk" %}
+      {# {% include "partials/header.njk" %} #}
       <div id="main-container" role="document">
         <main role="main">
             {{ content | safe }}
         </main>
       </div>
-      {% include "partials/footer.njk" %}
+      {# {% include "partials/footer.njk" %} #}
     </div>
   </body>
 </html>

src/includes/styles/main.css

@@ -4,10 +4,10 @@ Main Style Sheet
 ----------------*/
 :root {
   --test-var: #909090;
-  --background-color: #ffffff;
+  --background-color: black;
-  --background-color-secondary: #301e4e;
+  --background-color-secondary: #202020;
   --background-color-tertiary: #ff6e6c;
-  --primary: #1f1135;
+  --primary: #000;
   --secondary: #ff6e6c;
   --text-primary: #1f1135;
   --text-secondary: #ffffff;
@@ -414,7 +414,7 @@ template {
   flex-direction: column;
   min-height: 100vh;
   overflow: hidden;
-  background: linear-gradient(310deg, var(--background-color-tertiary), var(--background-color-tertiary) 20%, var(--background-color) 20%);
+  background: var(--primary);
 }
 
 #main-container {
@@ -504,6 +504,92 @@ header {
     align-items: center;
   }
 }
+.landing {
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  justify-content: center;
+}
+.landing .hero {
+  position: fixed;
+  display: flex;
+  width: min-content;
+  padding: 1rem;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  flex-shrink: 0;
+  border: 2px solid var(--primary);
+  background: #FFF;
+  aspect-ratio: 1;
+}
+.landing .hero .hero__header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.landing .hero .hero__header span {
+  color: var(--primary);
+  font-family: Basis Grotesque Mono Pro Light;
+  font-size: 1.9rem;
+  font-style: normal;
+  font-weight: 300;
+  line-height: normal;
+  letter-spacing: 0.26644rem;
+  text-transform: uppercase;
+}
+.landing .hero .hero__info {
+  font-size: 1.2rem;
+  color: var(--primary);
+  font-family: Basis Grotesque Mono Pro Light;
+  font-style: 800;
+  font-weight: 300;
+  line-height: normal;
+  letter-spacing: 0.26644rem;
+  text-transform: uppercase;
+}
+.landing .hero .hero__icons {
+  width: 100%;
+  display: flex;
+  justify-content: space-evenly;
+}
+.landing .hero .hero__icons a {
+  text-decoration: none;
+}
+.landing .hero .hero__icons svg {
+  height: 3rem;
+  width: 3rem;
+}
+
+.bkg {
+  z-index: 0;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr;
+}
+.bkg img {
+  object-fit: cover;
+  min-height: 100vh;
+}
+.bkg img.bkg--winter {
+  border-right: 1px solid black;
+}
+.bkg img.bkg--summer {
+  filter: grayscale(100%) brightness(1.5) contrast(0.75);
+  border-left: 1px solid black;
+}
+
 footer {
   width: 100%;
   max-width: 100vw;

src/index.njk

@@ -2,24 +2,40 @@
 layout: base
 title: Home
 permalink: '/'
-heading: A Mildly Opinionated Eleventy Starter
+heading: Verwarming, Ventilatie, Airco
 ---
 
-<article>
+<div class="landing">
-    <h1>
+    <div class="hero">
-        {{ heading }}
+        <h1 class="hero__header">
+            <span>
+                Verwarming
+            </span>
+            <span>
+                Ventilatie
+            </span>
+            <span>
+                Airco
+            </span>
         </h1>
-    <p>
+        <a class="hero__info" href="tel:+3164168165">41 68 16 56</a>
-        Features include: 
+        <div class="hero__icons">
-        <ul>
+            <a href="tel:+3164168165">
-            <li>HTML Minification</li>
+                {% svgsprite %}
-            <li>CSS Pipline (SCSS > CleanCSS > Inline)</li>
+                {% icon "phone" %}
-            <li>Eleventy Dev Server</li>
+            </a>
-            <li>Eleventy SVG Sprites</li>
+            <a href="https://t.me/3164168165" target="_blank">
-            <li>Eleventy RSS</li>
+                {% svgsprite %}
-            <li>Post Date Formatting Filter</li>
+                {% icon "telegram" %}
-            <li>Post Excerpts</li>
+            </a>
-        </ul>
+            <a href="https://wa.me/3164168165" target="_blank">
-    </p>
+                {% svgsprite %}
-    <p>Visit the <a href="{{ site.githubUrl }}">eleventonia repo</a> for more information.</p>
+                {% icon "whatsapp" %}
-</article>
+            </a>
+        </div>
+    </div>
+</div>
+<div class="bkg">
+    <img class="bkg--winter" src="/assets/images/winter.png" alt=""></img>
+    <img class="bkg--summer" src="/assets/images/summer.png" alt=""></img>
+</div>