About {{ site.name }}
-- {{ site.name }} is a small 11ty starter project built by Matt DeCamp to help you build your - next project. -
-- Made with love ❤️ and coffee ☕️ in Georgia 🍑. -
-diff --git a/.eleventy.js b/.eleventy.js index ef423c8..a83d861 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -74,7 +74,7 @@ module.exports = function (config) { config.addShortcode("image", async function(src, cls, alt, sizes) { let metadata = await Image(src, { widths: [300, 600], - formats: ["webp", "jpeg"], + formats: ["webp", "jpeg", "png"], urlPath: "/assets/images/", outputDir: "dist/assets/images/", }); diff --git a/src/.eleventyignore b/src/.eleventyignore new file mode 100644 index 0000000..783cd9b --- /dev/null +++ b/src/.eleventyignore @@ -0,0 +1,4 @@ +src/posts/ +src/pages/ +src/404.njk +404.njk \ No newline at end of file diff --git a/src/assets/icons/logo.svg b/src/assets/icons/logo.svg new file mode 100644 index 0000000..4c89701 --- /dev/null +++ b/src/assets/icons/logo.svg @@ -0,0 +1,159 @@ + diff --git a/src/assets/images/logo.png b/src/assets/images/logo.png new file mode 100644 index 0000000..d3e3934 Binary files /dev/null and b/src/assets/images/logo.png differ diff --git a/src/assets/images/logo.webp b/src/assets/images/logo.webp new file mode 100644 index 0000000..9c414a8 Binary files /dev/null and b/src/assets/images/logo.webp differ diff --git a/src/assets/styles/main.css b/src/assets/styles/main.css index 4aba28e..83d2d46 100644 --- a/src/assets/styles/main.css +++ b/src/assets/styles/main.css @@ -1 +1 @@ -:root{--test-var: #909090;--background-color: black;--background-color-secondary: #202020;--background-color-tertiary: #ff6e6c;--primary: #000;--secondary: #ff6e6c;--text-primary: #1f1135;--text-secondary: #ffffff;--text-tertiary: #301e4e;--link-color: #301e4e;--tag-color: #301e4e;--button-color: #ff636c;--ratio: 1.2;--s-5: calc(var(--s-4) / var(--ratio));--s-4: calc(var(--s-3) / var(--ratio));--s-3: calc(var(--s-2) / var(--ratio));--s-2: calc(var(--s-1) / var(--ratio));--s-1: calc(var(--s0) / var(--ratio));--s0: 1rem;--s1: calc(var(--s0) * var(--ratio));--s2: calc(var(--s1) * var(--ratio));--s3: calc(var(--s2) * var(--ratio));--s4: calc(var(--s3) * var(--ratio));--s5: calc(var(--s4) * var(--ratio));--max-width: 1000px}*,*::before,*::after{box-sizing:border-box}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role=list],ol[role=list]{list-style:none}html{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media(prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:rgba(0,0,0,0)}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}#layout{display:flex;flex-direction:column;min-height:100vh;overflow:hidden;background:var(--primary)}#main-container{width:90%;max-width:var(--max-width);margin:0 auto;padding-bottom:var(--s1);flex:1 0 auto;overflow:hidden}#main-container main{max-width:65ch}h1{font-size:clamp(var(--s3),3vw,var(--s4));margin:0 0 var(--s0)}h2{font-size:clamp(var(--s2),3vw,var(--s3))}h3{font-size:clamp(var(--s1),3vw,var(--s2));margin:0 0 var(--s-1);font-style:italic}h4{margin:var(--s-2) 0;font-size:clamp(var(--s-0),3vw,var(--s1));text-transform:uppercase}p{margin-bottom:var(--s1)}ul{margin-top:var(--s0);margin-bottom:var(--s0)}a{color:var(--link-color)}*{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif}h1,h2,h3,h4,h5,h6{font-family:"Bitter","Bookman Old Style",serif}header{min-width:100%}#header--container{width:90%;max-width:var(--max-width);padding:var(--s1) 0;margin:0 auto;display:flex;flex-direction:column;flex-wrap:wrap;align-items:left;color:var(--text-primary)}#header--title a{font-size:clamp(var(--s3),3vw,var(--s4));font-weight:200;background:linear-gradient(to right, var(--primary), var(--primary) 63%, var(--secondary) 63%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:rgba(0,0,0,0);text-decoration:none}@media screen and (min-width: 48rem){#header--container{flex-direction:row;justify-content:space-between;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:.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:.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:.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;width:100%}.bkg img.bkg--winter{border-right:1px solid #000}.bkg img.bkg--summer{filter:grayscale(100%) brightness(1.5) contrast(0.75);border-left:1px solid #000}@media screen and (max-width: 600px){.bkg{grid-template-columns:1fr;grid-template-rows:1fr 1fr}.bkg img{min-height:auto;height:50vh}.bkg img.bkg--winter{border-right:none;border-bottom:1px solid #000}.bkg img.bkg--summer{border-left:none;border-top:1px solid #000}}footer{width:100%;max-width:100vw;background:var(--background-color-secondary);color:var(--text-secondary)}footer a{color:var(--text-secondary);text-decoration:none}footer a:hover{text-decoration:underline}#footer--container{width:90%;max-width:var(--max-width);margin:0 auto;padding:var(--s2) 0;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center}nav ul{padding:0;display:block;display:flex;flex-direction:row;flex-wrap:wrap;list-style-type:none;gap:var(--s0) var(--s2);font-size:var(--s0)}nav ul li::before{content:""}nav ul li a{color:var(--text-primary);text-decoration:none}nav ul li a:hover{text-decoration:underline}.nav--active{text-decoration:underline}@media screen and (min-width: 48rem){nav ul{font-size:var(--s1)}}#posts--list article{margin-bottom:var(--s2)}.post--time{font-size:clamp(var(--s-1),3vw,var(--s0));font-weight:200}.tags--container{padding:var(--s-1) 0;display:flex;flex-wrap:wrap;gap:var(--s0)}.tag a{padding:var(--s-2) var(--s-1);color:var(--text-secondary);text-decoration:none;background:var(--background-color-secondary)}.icon{fill:var(--text-secondary);width:var(--s2);height:var(--s2)} +:root{--test-var: #909090;--background-color: var(--primary);--background-color-secondary: #202020;--background-color-tertiary: #ff6e6c;--primary: #312b18;--secondary: #ff6e6c;--text-primary: #1f1135;--text-secondary: #ffffff;--text-tertiary: #301e4e;--link-color: #301e4e;--tag-color: #301e4e;--button-color: #ff636c;--ratio: 1.2;--s-5: calc(var(--s-4) / var(--ratio));--s-4: calc(var(--s-3) / var(--ratio));--s-3: calc(var(--s-2) / var(--ratio));--s-2: calc(var(--s-1) / var(--ratio));--s-1: calc(var(--s0) / var(--ratio));--s0: 1rem;--s1: calc(var(--s0) * var(--ratio));--s2: calc(var(--s1) * var(--ratio));--s3: calc(var(--s2) * var(--ratio));--s4: calc(var(--s3) * var(--ratio));--s5: calc(var(--s4) * var(--ratio));--max-width: 1000px}*,*::before,*::after{box-sizing:border-box}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role=list],ol[role=list]{list-style:none}html{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media(prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:rgba(0,0,0,0)}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}#layout{display:flex;flex-direction:column;min-height:100vh;overflow:hidden;background:var(--primary)}#main-container{width:90%;max-width:var(--max-width);margin:0 auto;padding-bottom:var(--s1);flex:1 0 auto;overflow:hidden}#main-container main{max-width:65ch}h1{font-size:clamp(var(--s3),3vw,var(--s4));margin:0 0 var(--s0)}h2{font-size:clamp(var(--s2),3vw,var(--s3))}h3{font-size:clamp(var(--s1),3vw,var(--s2));margin:0 0 var(--s-1);font-style:italic}h4{margin:var(--s-2) 0;font-size:clamp(var(--s-0),3vw,var(--s1));text-transform:uppercase}p{margin-bottom:var(--s1)}ul{margin-top:var(--s0);margin-bottom:var(--s0)}a{color:var(--link-color)}*{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif}h1,h2,h3,h4,h5,h6{font-family:"Bitter","Bookman Old Style",serif}header{min-width:100%}#header--container{width:90%;max-width:var(--max-width);padding:var(--s1) 0;margin:0 auto;display:flex;flex-direction:column;flex-wrap:wrap;align-items:left;color:var(--text-primary)}#header--title a{font-size:clamp(var(--s3),3vw,var(--s4));font-weight:200;background:linear-gradient(to right, var(--primary), var(--primary) 63%, var(--secondary) 63%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:rgba(0,0,0,0);text-decoration:none}@media screen and (min-width: 48rem){#header--container{flex-direction:row;justify-content:space-between;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;flex-direction:column;justify-content:space-between;align-items:center;flex-shrink:0;width:min-content;aspect-ratio:1;gap:2rem}.landing .hero .hero__content{display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:1rem;border:3px solid var(--primary);background:#fff}.landing .hero .hero__header{display:flex;flex-direction:column;gap:.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:.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:.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;width:100%}.bkg img.bkg--winter{border-right:4px solid var(--primary)}.bkg img.bkg--summer{filter:sepia(100%) brightness(1.5) contrast(0.75);border-left:0px solid var(--primary)}@media screen and (max-width: 600px){.bkg{grid-template-columns:1fr;grid-template-rows:1fr 1fr}.bkg img{min-height:auto;height:50vh}.bkg img.bkg--winter{border-right:none;border-bottom:1.5px solid var(--primary)}.bkg img.bkg--summer{border-left:none;border-top:1.5px solid var(--primary)}}footer{width:100%;max-width:100vw;background:var(--background-color-secondary);color:var(--text-secondary)}footer a{color:var(--text-secondary);text-decoration:none}footer a:hover{text-decoration:underline}#footer--container{width:90%;max-width:var(--max-width);margin:0 auto;padding:var(--s2) 0;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center}nav ul{padding:0;display:block;display:flex;flex-direction:row;flex-wrap:wrap;list-style-type:none;gap:var(--s0) var(--s2);font-size:var(--s0)}nav ul li::before{content:""}nav ul li a{color:var(--text-primary);text-decoration:none}nav ul li a:hover{text-decoration:underline}.nav--active{text-decoration:underline}@media screen and (min-width: 48rem){nav ul{font-size:var(--s1)}}#posts--list article{margin-bottom:var(--s2)}.post--time{font-size:clamp(var(--s-1),3vw,var(--s0));font-weight:200}.tags--container{padding:var(--s-1) 0;display:flex;flex-wrap:wrap;gap:var(--s0)}.tag a{padding:var(--s-2) var(--s-1);color:var(--text-secondary);text-decoration:none;background:var(--background-color-secondary)}.icon{fill:var(--text-secondary);width:var(--s2);height:var(--s2)}.logo .icon{width:15rem;height:15rem} diff --git a/src/assets/styles/scss/components/_icons.scss b/src/assets/styles/scss/components/_icons.scss index df2a47b..62d24a5 100644 --- a/src/assets/styles/scss/components/_icons.scss +++ b/src/assets/styles/scss/components/_icons.scss @@ -3,3 +3,7 @@ width: var(--s2); height: var(--s2); } +.logo .icon { + width: 15rem; + height: 15rem; +} \ No newline at end of file diff --git a/src/assets/styles/scss/components/_landing.scss b/src/assets/styles/scss/components/_landing.scss index 56ee9d2..e15ee9a 100644 --- a/src/assets/styles/scss/components/_landing.scss +++ b/src/assets/styles/scss/components/_landing.scss @@ -12,15 +12,25 @@ .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; + width: min-content; aspect-ratio: 1; + gap: 2rem; + + .hero__content { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + padding: 1rem; + border: 3px solid var(--primary); + background: #FFF; + gap: 1rem; + + } .hero__header { display: flex; @@ -79,10 +89,10 @@ min-height: 100vh; width: 100%; &.bkg--winter { - border-right: 1px solid black; + border-right: 4px solid var(--primary); }&.bkg--summer { - filter: grayscale(100%) brightness(1.5) contrast(.75); - border-left: 1px solid black; + filter: sepia(100%) brightness(1.5) contrast(.75); + border-left: 0px solid var(--primary); } } @@ -97,10 +107,10 @@ height: 50vh; &.bkg--winter { border-right: none; - border-bottom: 1px solid black; + border-bottom: 1.5px solid var(--primary); }&.bkg--summer { border-left: none; - border-top: 1px solid black; + border-top: 1.5px solid var(--primary); } } } diff --git a/src/assets/styles/scss/utility/_variables.scss b/src/assets/styles/scss/utility/_variables.scss index 146f734..34af634 100644 --- a/src/assets/styles/scss/utility/_variables.scss +++ b/src/assets/styles/scss/utility/_variables.scss @@ -1,11 +1,11 @@ :root { --test-var: #909090; // COLORS - --background-color: black; + --background-color: var(--primary); --background-color-secondary: #202020; --background-color-tertiary: #ff6e6c; - --primary: #000; + --primary: #312b18; --secondary: #ff6e6c; --text-primary: #1f1135; diff --git a/src/data/site.json b/src/data/site.json index 8a44ad5..f809d6d 100644 --- a/src/data/site.json +++ b/src/data/site.json @@ -6,7 +6,7 @@ "lang": "nl", "authorName": "Spencer Flagg", "authorEmail": "work@spencerflagg.com", - "yearCreated": 2023, - "copyright": "2023", + "yearCreated": 2024, + "copyright": "2024", "socialImage": "/" } diff --git a/src/includes/styles/main.css b/src/includes/styles/main.css index 76d61e1..5d6a513 100644 --- a/src/includes/styles/main.css +++ b/src/includes/styles/main.css @@ -4,10 +4,10 @@ Main Style Sheet ----------------*/ :root { --test-var: #909090; - --background-color: black; + --background-color: var(--primary); --background-color-secondary: #202020; --background-color-tertiary: #ff6e6c; - --primary: #000; + --primary: #312b18; --secondary: #ff6e6c; --text-primary: #1f1135; --text-secondary: #ffffff; @@ -519,15 +519,23 @@ header { .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; + width: min-content; aspect-ratio: 1; + gap: 2rem; +} +.landing .hero .hero__content { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + padding: 1rem; + border: 3px solid var(--primary); + background: #FFF; + gap: 1rem; } .landing .hero .hero__header { display: flex; @@ -584,11 +592,11 @@ header { width: 100%; } .bkg img.bkg--winter { - border-right: 1px solid black; + border-right: 4px solid var(--primary); } .bkg img.bkg--summer { - filter: grayscale(100%) brightness(1.5) contrast(0.75); - border-left: 1px solid black; + filter: sepia(100%) brightness(1.5) contrast(0.75); + border-left: 0px solid var(--primary); } @media screen and (max-width: 600px) { @@ -602,11 +610,11 @@ header { } .bkg img.bkg--winter { border-right: none; - border-bottom: 1px solid black; + border-bottom: 1.5px solid var(--primary); } .bkg img.bkg--summer { border-left: none; - border-top: 1px solid black; + border-top: 1.5px solid var(--primary); } } footer { @@ -694,4 +702,9 @@ nav ul li a:hover { height: var(--s2); } +.logo .icon { + width: 15rem; + height: 15rem; +} + /*# sourceMappingURL=main.css.map */ diff --git a/src/index.njk b/src/index.njk index f3b60fd..6f3627e 100644 --- a/src/index.njk +++ b/src/index.njk @@ -7,35 +7,38 @@ heading: Warmtepompen, Ventilatie met Warmteterugwinning, Airco
- {{ site.name }} is a small 11ty starter project built by Matt DeCamp to help you build your - next project. -
-- Made with love ❤️ and coffee ☕️ in Georgia 🍑. -
-