first commit
This commit is contained in:
Spencer Flagg
parent
498e80d5c7
commit
71ba2c4bdc
17 changed files with 258 additions and 57 deletions
|
|
@ -1,8 +1,6 @@
|
|||
# Eleventonia
|
||||
# Lucht
|
||||
|
||||
A mildly opinionated [Eleventy](https://11ty.dev) starter project.
|
||||
|
||||
[](https://app.netlify.com/start/deploy?repository=https://github.com/mattdecamp/eleventonia)
|
||||
A homepage based on a mildly opinionated [Eleventy](https://11ty.dev) starter project called Eleventonia.
|
||||
|
||||
## Features
|
||||
|
||||
|
|
|
|||
8
package-lock.json
generated
8
package-lock.json
generated
|
|
@ -1,12 +1,12 @@
|
|||
{
|
||||
"name": "eleventonia",
|
||||
"version": "2.0.0",
|
||||
"name": "lucht",
|
||||
"version": "1.0.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "eleventonia",
|
||||
"version": "2.0.0",
|
||||
"name": "lucht",
|
||||
"version": "1.0.0",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@11ty/eleventy": "^2.0.0",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "eleventonia",
|
||||
"version": "2.0.0",
|
||||
"name": "lucht",
|
||||
"version": "1.0.0",
|
||||
"description": "A mildly opinionated Eleventy starter kit",
|
||||
"scripts": {
|
||||
"eleventy:serve": "cross-env ELEVENTY_ENV=development eleventy --serve --quiet",
|
||||
|
|
|
|||
4
src/assets/icons/phone.svg
Normal file
4
src/assets/icons/phone.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 403 B |
4
src/assets/icons/telegram.svg
Normal file
4
src/assets/icons/telegram.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 352 B |
5
src/assets/icons/whatsapp.svg
Normal file
5
src/assets/icons/whatsapp.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 465 B |
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "Eleventonia",
|
||||
"short_name": "Eleventonia",
|
||||
"name": "Lucht",
|
||||
"short_name": "Lucht",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/assets/images/android-chrome-192x192.png",
|
||||
|
|
|
|||
BIN
src/assets/images/summer.png
Normal file
BIN
src/assets/images/summer.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.4 MiB |
BIN
src/assets/images/winter.png
Normal file
BIN
src/assets/images/winter.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.6 MiB |
|
|
@ -5,12 +5,13 @@
|
|||
// min-height: 100%;
|
||||
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);
|
||||
// background: linear-gradient(
|
||||
// 310deg,
|
||||
// var(--background-color-tertiary),
|
||||
// var(--background-color-tertiary) 20%,
|
||||
// var(--background-color) 20%
|
||||
// );
|
||||
}
|
||||
#main-container {
|
||||
width: 90%;
|
||||
|
|
|
|||
88
src/assets/styles/scss/components/_landing.scss
Normal file
88
src/assets/styles/scss/components/_landing.scss
Normal 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;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
:root {
|
||||
--test-var: #909090;
|
||||
// COLORS
|
||||
--background-color: #ffffff;
|
||||
--background-color-secondary: #301e4e;
|
||||
--background-color: black;
|
||||
--background-color-secondary: #202020;
|
||||
--background-color-tertiary: #ff6e6c;
|
||||
|
||||
--primary: #1f1135;
|
||||
--primary: #000;
|
||||
--secondary: #ff6e6c;
|
||||
|
||||
--text-primary: #1f1135;
|
||||
|
|
|
|||
|
|
@ -1,14 +1,12 @@
|
|||
{
|
||||
"name": "Eleventonia",
|
||||
"description": "A mildly opinionated Eleventy starter",
|
||||
"url": "https://eleventonia.mattdecamp.com",
|
||||
"locale": "en_us",
|
||||
"lang": "en",
|
||||
"githubUrl": "https://github.com/mattdecamp/eleventonia",
|
||||
"authorName": "Matt DeCamp",
|
||||
"authorHandle": "@mpdecamp",
|
||||
"authorEmail": "matt@happybear.dev",
|
||||
"yearCreated": 2021,
|
||||
"copyright": "2021 to present",
|
||||
"name": "Verwarming, Ventilatie, Airco",
|
||||
"description": "Lucht Onderhoud - Utrecht & Amsterdam",
|
||||
"url": "https://lucht.altweb.me",
|
||||
"locale": "nl_nl",
|
||||
"lang": "nl",
|
||||
"authorName": "Spencer Flagg",
|
||||
"authorEmail": "work@spencerflagg.com",
|
||||
"yearCreated": 2023,
|
||||
"copyright": "2023",
|
||||
"socialImage": "/"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -4,10 +4,10 @@ Main Style Sheet
|
|||
----------------*/
|
||||
:root {
|
||||
--test-var: #909090;
|
||||
--background-color: #ffffff;
|
||||
--background-color-secondary: #301e4e;
|
||||
--background-color: black;
|
||||
--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;
|
||||
|
|
|
|||
|
|
@ -2,24 +2,40 @@
|
|||
layout: base
|
||||
title: Home
|
||||
permalink: '/'
|
||||
heading: A Mildly Opinionated Eleventy Starter
|
||||
heading: Verwarming, Ventilatie, Airco
|
||||
---
|
||||
|
||||
<article>
|
||||
<h1>
|
||||
{{ heading }}
|
||||
<div class="landing">
|
||||
<div class="hero">
|
||||
<h1 class="hero__header">
|
||||
<span>
|
||||
Verwarming
|
||||
</span>
|
||||
<span>
|
||||
Ventilatie
|
||||
</span>
|
||||
<span>
|
||||
Airco
|
||||
</span>
|
||||
</h1>
|
||||
<p>
|
||||
Features include:
|
||||
<ul>
|
||||
<li>HTML Minification</li>
|
||||
<li>CSS Pipline (SCSS > CleanCSS > Inline)</li>
|
||||
<li>Eleventy Dev Server</li>
|
||||
<li>Eleventy SVG Sprites</li>
|
||||
<li>Eleventy RSS</li>
|
||||
<li>Post Date Formatting Filter</li>
|
||||
<li>Post Excerpts</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>Visit the <a href="{{ site.githubUrl }}">eleventonia repo</a> for more information.</p>
|
||||
</article>
|
||||
<a class="hero__info" href="tel:+3164168165">41 68 16 56</a>
|
||||
<div class="hero__icons">
|
||||
<a href="tel:+3164168165">
|
||||
{% svgsprite %}
|
||||
{% 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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue