spencer/lucht
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

first commit

Browse source
This commit is contained in:
Spencer Flagg 2023-10-05 16:18:24 +02:00
parent 498e80d5c7
commit 71ba2c4bdc
17 changed files with 258 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
README.md
View file

@ -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 ## Features

8
package-lock.json generated
View file

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

4
package.json
View file

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

4
src/assets/icons/phone.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 403 B

4
src/assets/icons/telegram.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 352 B

5
src/assets/icons/whatsapp.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 465 B

4
src/assets/images/site.webmanifest
View file

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

BIN
src/assets/images/summer.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 9.4 MiB

BIN
src/assets/images/winter.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.6 MiB

13
src/assets/styles/scss/base/_layout.scss
View file

@ -5,12 +5,13 @@
// min-height: 100%; // min-height: 100%;
min-height: 100vh; min-height: 100vh;
overflow: hidden; 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 { #main-container {
width: 90%; width: 90%;

88
src/assets/styles/scss/components/_landing.scss Normal file
View file

@ -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;
}
}
}

1
src/assets/styles/scss/main.scss
View file

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

6
src/assets/styles/scss/utility/_variables.scss
View file

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

20
src/data/site.json
View file

@ -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": "/" "socialImage": "/"
} }

4
src/includes/layouts/base.njk
View file

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

94
src/includes/styles/main.css
View file

@ -4,10 +4,10 @@ Main Style Sheet
----------------*/ ----------------*/
:root { :root {
--test-var: #909090; --test-var: #909090;
--background-color: #ffffff; --background-color: black;
--background-color-secondary: #301e4e; --background-color-secondary: #202020;
--background-color-tertiary: #ff6e6c; --background-color-tertiary: #ff6e6c;
--primary: #1f1135; --primary: #000;
--secondary: #ff6e6c; --secondary: #ff6e6c;
--text-primary: #1f1135; --text-primary: #1f1135;
--text-secondary: #ffffff; --text-secondary: #ffffff;
@ -414,7 +414,7 @@ template {
flex-direction: column; flex-direction: column;
min-height: 100vh; min-height: 100vh;
overflow: hidden; overflow: hidden;
background: linear-gradient(310deg, var(--background-color-tertiary), var(--background-color-tertiary) 20%, var(--background-color) 20%); background: var(--primary);
} }
#main-container { #main-container {
@ -504,6 +504,92 @@ header {
align-items: center; 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 { footer {
width: 100%; width: 100%;
max-width: 100vw; max-width: 100vw;

54
src/index.njk
View file

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