{% include "footer.njk" %}
diff --git a/css/home.css b/css/home.css
new file mode 100644
index 0000000..48c4fd3
--- /dev/null
+++ b/css/home.css
@@ -0,0 +1,80 @@
+.tagline {
+ margin-block: 2rem;
+ p {
+ font-size: 1.2rem;
+ font-family: var(--font-headers);
+ text-align: center;
+ color: var(--color-nav-light);
+ }
+}
+
+@media (max-width: 650px) {
+ .tagline {
+ margin-block: 1rem;
+ p {
+ font-size: 1.1rem;
+ }
+ }
+}
+
+.intro {
+ margin-block: 4rem;
+ display: grid;
+ gap: 1rem;
+
+ h2 {
+ grid-area: h2;
+ }
+ img {
+ grid-area: img;
+ }
+ p {
+ margin: 0;
+ }
+ .blurb {
+ grid-area: blurb;
+ }
+ .link {
+ grid-area: link;
+ }
+}
+
+.art {
+ grid-template-areas:
+ "h2 img"
+ "blurb img"
+ "link img"
+ ". img";
+ grid-template-columns: 3fr 2fr;
+
+ h2, p {
+ text-align: right;
+ }
+}
+
+.therapy {
+ grid-template-areas:
+ "img h2"
+ "img blurb"
+ "img link"
+ "img .";
+ grid-template-columns: 2fr 3fr;
+}
+
+@media (max-width: 800px) {
+ .intro {
+ margin-block: 2rem;
+ grid-template-areas:
+ "h2"
+ "blurb"
+ "link"
+ "img";
+ grid-template-columns: auto;
+ h2 {
+ text-align: center;
+ }
+ p {
+ text-align: left;
+ }
+ }
+}
diff --git a/css/main.css b/css/main.css
index 17795d7..6a8984e 100644
--- a/css/main.css
+++ b/css/main.css
@@ -1,5 +1,25 @@
+@font-face {
+ font-family: "Elegant Typewriter";
+ src:
+ url("/fonts/elegant_typewriter/ELEGANT TYPEWRITER Regular.ttf");
+}
+
:root {
color-scheme: light dark;
+
+ --color-light: #f5ecdf;
+ --color-dark: #11192c;
+ --color-nav-light: #e7d7bc;
+ --color-nav-dark: #2a244d;
+ --color-title-bg: #bc5b56;
+ --color-title-text: #09183b;
+
+ --color-bg: light-dark(var(--color-light), var(--color-dark));
+ --color-text: light-dark(var(--color-dark), var(--color-light));
+ --color-headers: light-dark(var(--color-nav-dark), var(--color-nav-light));
+
+ --font-headers: "Elegant Typewriter", serif;
+ --font-body: "Atkinson Hyperlegible Next", sans-serif;
}
/* numbered components are from https://www.joshwcomeau.com/css/custom-css-reset/ */
@@ -13,6 +33,11 @@
*:not(dialog) {
margin: 0; /* 2. Remove default margin */
+ padding: 0;
+}
+
+html {
+ height: 100%;
}
@media (prefers-reduced-motion: no-preference) {
@@ -22,8 +47,33 @@
}
body {
+ height: 100%;
+ min-height: 100%;
+ display: grid;
+ grid-template-rows: auto 1fr auto;
line-height: 1.5; /* 4. Increase line-height */
-webkit-font-smoothing: antialiased; /* 5. Improve text rendering */
+ color: var(--color-text);
+ background: var(--color-bg);
+ font-family: var(--font-body);
+}
+
+#content {
+ width: 65%;
+ max-width: 1800px;
+ margin: 1rem auto;
+}
+
+@media (max-width: 1100px) {
+ #content {
+ width: 85%;
+ }
+}
+
+@media (max-width: 650px) {
+ #content {
+ width: 92%;
+ }
}
img, picture, video, canvas, svg {
@@ -42,8 +92,55 @@ h1, h2, h3, h4, h5, h6, p {
h1, h2, h3, h4, h5, h6 {
text-wrap: balance; /* 9. Improve line wrapping */
+ font-family: var(--font-headers);
+}
+
+h1 {
+ color: var(--color-title-text);
+ background: var(--color-title-bg);
+ font-size: 3rem;
+ text-align: center;
+ padding-block: .4em;
+}
+
+h2, h3, h4, h5, h6 {
+ color: var(--color-headers);
+}
+
+h2 {
+ font-size: 2rem;
+}
+
+@media (max-width: 800px) {
+ h1 { font-size: 2rem; }
+ h2 { font-size: 1.5rem; }
}
p {
text-wrap: pretty; /* 9. Improve line wrapping */
+ margin-block: 1.3rem;
+ line-height: 1.7em;
+}
+
+@media (max-width: 650px) {
+ p { font-size: .9rem; }
+}
+
+a {
+ color: var(--color-text);
+ text-decoration-line: underline;
+ text-decoration-style: solid;
+ text-decoration-thickness: .2em;
+ text-decoration-color: var(--color-title-bg);
+ transition: text-decoration-thickness .5s;
+}
+
+@media (any-hover: hover) {
+ a:hover {
+ text-decoration-thickness: .4em;
+ }
+}
+
+a:active {
+ text-decoration-thickness: .4em;
}
diff --git a/css/nav.css b/css/nav.css
new file mode 100644
index 0000000..b859939
--- /dev/null
+++ b/css/nav.css
@@ -0,0 +1,109 @@
+nav {
+ background: var(--color-nav-dark);
+
+ a {
+ font-family: "Elegant Typewriter", serif;
+ text-decoration: none;
+ color: var(--color-nav-light);
+ }
+
+ a[aria-current="page"] {
+ text-decoration: underline solid .2em var(--color-title-bg);
+ }
+}
+
+header nav {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ font-size: 1.4rem;
+
+ > a {
+ height: 5.5rem;
+ }
+
+ img {
+ height: 100%;
+ width: auto;
+ }
+
+ ul {
+ display: flex;
+ flex-flow: row wrap;
+ list-style: none;
+ padding: 0;
+ margin-inline: 1rem;
+ gap: 2rem;
+ }
+
+ button {
+ display: none;
+ }
+}
+
+@media (max-width: 650px) {
+ header nav {
+ --height: 4.5rem;
+
+ display: grid;
+ grid-template-areas:
+ "home button"
+ "links links";
+ padding: 0;
+
+ > a {
+ grid-area: home;
+ height: var(--height);
+ }
+
+ button {
+ grid-area: button;
+ display: unset;
+ margin-inline: 1rem;
+ padding: 1rem;
+ border: none;
+ background: var(--color-nav-dark);
+ color: var(--color-nav-light);
+ cursor: pointer;
+ }
+
+ ul[aria-hidden="true"] {
+ display: none;
+ }
+
+ ul {
+ grid-area: links;
+ flex-flow: column;
+ align-items: center;
+ background: var(--color-nav-light);
+ margin: 0;
+ padding-block: 1rem;
+ border-top: .5rem solid var(--color-title-bg);
+ border-bottom: .5rem solid var(--color-title-bg);
+ position: absolute;
+ top: var(--height);
+ width: 100%;
+
+ a {
+ color: var(--color-nav-dark);
+ }
+ }
+ }
+}
+
+footer nav {
+ padding-block: 1rem;
+ border-top: .5rem solid var(--color-title-bg);
+
+ ul {
+ list-style: none;
+ font-size: 1.1rem;
+ text-align: center;
+ }
+}
+
+@media (max-width: 650px) {
+ footer nav ul {
+ font-size: .95rem;
+ }
+}
diff --git a/eleventy.config.js b/eleventy.config.js
index 1014cf6..3cfcc76 100644
--- a/eleventy.config.js
+++ b/eleventy.config.js
@@ -1,5 +1,6 @@
import { HtmlBasePlugin } from "@11ty/eleventy";
import { eleventyImageTransformPlugin } from "@11ty/eleventy-img";
+import eleventyNavigationPlugin from "@11ty/eleventy-navigation";
import { attrs } from "@mdit/plugin-attrs";
import { markdownitLinkAttributes } from 'markdown-it-link-attributes';
@@ -46,7 +47,8 @@ export default async function (eleventyConfig) {
/* Passthroughs */
eleventyConfig
.addPassthroughCopy("favicon.ico")
- .addPassthroughCopy("robots.txt");
+ .addPassthroughCopy("robots.txt")
+ .addPassthroughCopy("fonts");
/* HTML base */
eleventyConfig.addPlugin(HtmlBasePlugin);
@@ -78,6 +80,9 @@ export default async function (eleventyConfig) {
*/
});
+ /* Navigation */
+ eleventyConfig.addPlugin(eleventyNavigationPlugin);
+
/* All filters from _config/filters.js */
eleventyConfig.addPlugin(pluginFilters);
@@ -99,6 +104,7 @@ export default async function (eleventyConfig) {
/* Watch when serving */
eleventyConfig.addWatchTarget("css");
+ eleventyConfig.addWatchTarget("js");
}
export const config = {
diff --git a/fonts/elegant_typewriter/ELEGANT TYPEWRITER Bold.ttf b/fonts/elegant_typewriter/ELEGANT TYPEWRITER Bold.ttf
new file mode 100644
index 0000000..6fab757
Binary files /dev/null and b/fonts/elegant_typewriter/ELEGANT TYPEWRITER Bold.ttf differ
diff --git a/fonts/elegant_typewriter/ELEGANT TYPEWRITER Italic.ttf b/fonts/elegant_typewriter/ELEGANT TYPEWRITER Italic.ttf
new file mode 100644
index 0000000..d423748
Binary files /dev/null and b/fonts/elegant_typewriter/ELEGANT TYPEWRITER Italic.ttf differ
diff --git a/fonts/elegant_typewriter/ELEGANT TYPEWRITER Light.ttf b/fonts/elegant_typewriter/ELEGANT TYPEWRITER Light.ttf
new file mode 100644
index 0000000..6ada810
Binary files /dev/null and b/fonts/elegant_typewriter/ELEGANT TYPEWRITER Light.ttf differ
diff --git a/fonts/elegant_typewriter/ELEGANT TYPEWRITER Regular.ttf b/fonts/elegant_typewriter/ELEGANT TYPEWRITER Regular.ttf
new file mode 100644
index 0000000..e40d4e7
Binary files /dev/null and b/fonts/elegant_typewriter/ELEGANT TYPEWRITER Regular.ttf differ
diff --git a/fonts/elegant_typewriter/ELEGANT TYPEWRITER.png b/fonts/elegant_typewriter/ELEGANT TYPEWRITER.png
new file mode 100644
index 0000000..acfec0c
Binary files /dev/null and b/fonts/elegant_typewriter/ELEGANT TYPEWRITER.png differ
diff --git a/fonts/elegant_typewriter/README - License information.txt b/fonts/elegant_typewriter/README - License information.txt
new file mode 100644
index 0000000..bbc85d0
--- /dev/null
+++ b/fonts/elegant_typewriter/README - License information.txt
@@ -0,0 +1,35 @@
+EN > You’ve just downloaded the "Elegant Typewriter" font (2014) which has been created by Lukas Krakora and is free for non-commercial use only.
+
+If you'd like to use the font commercially please contact me at my email krraaa@yahoo.com to get an information about pricing.
+
+I can add any extra characters or customize the font for purchasers of the commercial license.
+
+Any donation from non-commercial users to my Paypal krraaa@yahoo.com is welcome.
+
+You can find my other fonts on www.typewriterfonts.net
+
+FB: www.facebook.com/typewriterfonts
+IG: www.instagram.com/typewriterfonts
+
+Thank you.
+
+Lukas Krakora
+
+
+
+CZ > Prave jste si stahli font "Elegant Typewriter" (2014), ktery byl vytvoren Lukasem Krakorou a je volne ke stazeni a pouziti avsak pouze pro nekomercni ucely.
+
+V pripade zameru vyuzit font komercne me prosim kontaktujte na emailu krraaa@yahoo.com a dozvite se cenu.
+
+V pripade potreby mohu zajemcum o komercni licenci pridat k fontu dalsi znaky, ci jakkoli upravit existujici.
+
+Jakekoliv financni prispevky od nekomercnich uzivatelu na muj Paypal krraaa@yahoo.com jsou vitany.
+
+Me dalsi fonty naleznete na www.typewriterfonts.net
+
+FB: www.facebook.com/typewriterfonts
+IG: www.instagram.com/typewriterfonts
+
+Diky,
+
+Lukas Krakora
\ No newline at end of file
diff --git a/js/nav.js b/js/nav.js
new file mode 100644
index 0000000..1d6b105
--- /dev/null
+++ b/js/nav.js
@@ -0,0 +1,57 @@
+var navList = document.querySelector("header nav ul");
+var navButton = document.querySelector("header nav button");
+
+const navItems = navList.querySelectorAll("a");
+const firstItem = navItems[0];
+const lastItem = navItems[navItems.length - 1];
+
+const openMenu = function() {
+ navList.ariaHidden = "false";
+ navButton.ariaExpanded = "true";
+}
+
+const closeMenu = function() {
+ navList.ariaHidden = "true";
+ navButton.ariaExpanded = "false";
+}
+
+if (window.innerWidth <= 650) {
+ navList.ariaHidden = "true";
+}
+
+/* basic open and close */
+navButton.addEventListener("click", (e) => {
+ if (navButton.ariaExpanded === "true") closeMenu();
+ else openMenu();
+});
+
+navButton.addEventListener("keydown", (event) => {
+ if (event.key === "Enter" || event.key === " ") { // Space or Enter key
+ event.preventDefault(); // Prevent the default action to stop scrolling when pressing Space
+ if (navButton.ariaExpanded === "false") openMenu();
+ else closeMenu();
+ } else if (event.key === "Tab" && event.shiftKey) closeMenu();
+});
+
+/* tab out of menu in either direction */
+firstItem.addEventListener("keydown", (e) => {
+ if (event.key === "Tab" && event.shiftKey) closeMenu();
+});
+
+lastItem.addEventListener("keydown", (e) => {
+ if (event.key === "Tab" && !event.shiftKey) closeMenu();
+});
+
+/* escape/click away from menu */
+document.addEventListener("keydown", (event) => {
+ if (event.key === "Escape" && navButton.ariaExpanded === "true") {
+ closeMenu();
+ navButton.focus();
+ }
+});
+
+window.addEventListener("click", (e) => {
+ if (navButton.ariaExpanded === "true" &&
+ !event.target.matches("header nav ul") &&
+ !event.target.matches("header nav button")) closeMenu();
+})
diff --git a/package-lock.json b/package-lock.json
index 6da349d..23cd807 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,12 +5,12 @@
"requires": true,
"packages": {
"": {
- "name": "rglkart",
"version": "1.0.0",
"license": "AGPL-3.0-only",
"devDependencies": {
"@11ty/eleventy": "^3.1.5",
"@11ty/eleventy-img": "^6.0.4",
+ "@11ty/eleventy-navigation": "^1.0.5",
"@mdit/plugin-attrs": "^0.25.1",
"luxon": "^3.7.2",
"markdown-it-anchor": "^10.0.0",
@@ -168,6 +168,20 @@
"url": "https://opencollective.com/11ty"
}
},
+ "node_modules/@11ty/eleventy-navigation": {
+ "version": "1.0.5",
+ "resolved": "https://registry.npmjs.org/@11ty/eleventy-navigation/-/eleventy-navigation-1.0.5.tgz",
+ "integrity": "sha512-zb6xe29cM9viSdYtZywKIkJw2HIROyBINdBcFWC9uD0c/jYOTAex5nwy3HNEuh5t6/Ld/S9V4gEizfmeYuYpCQ==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "dependency-graph": "^1.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/11ty"
+ }
+ },
"node_modules/@11ty/eleventy-plugin-bundle": {
"version": "3.0.7",
"resolved": "https://registry.npmjs.org/@11ty/eleventy-plugin-bundle/-/eleventy-plugin-bundle-3.0.7.tgz",
diff --git a/package.json b/package.json
index 9dbdf47..b119352 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
"devDependencies": {
"@11ty/eleventy": "^3.1.5",
"@11ty/eleventy-img": "^6.0.4",
+ "@11ty/eleventy-navigation": "^1.0.5",
"@mdit/plugin-attrs": "^0.25.1",
"luxon": "^3.7.2",
"markdown-it-anchor": "^10.0.0",
diff --git a/src/404.md b/src/404.md
index 46e4afd..1a51f56 100644
--- a/src/404.md
+++ b/src/404.md
@@ -1,8 +1,7 @@
---
permalink: 404.html
eleventyExcludeFromCollections: true
+title: content not found
---
-# Content not found.
-
Sorry, can't find this page. Return [home](/).
diff --git a/src/img/RGLK+LOGO.webp b/src/img/RGLK+LOGO.webp
new file mode 100644
index 0000000..b7a3968
Binary files /dev/null and b/src/img/RGLK+LOGO.webp differ
diff --git a/src/img/removing+the+fig+leaf1.webp b/src/img/removing+the+fig+leaf1.webp
new file mode 100644
index 0000000..3dc25db
Binary files /dev/null and b/src/img/removing+the+fig+leaf1.webp differ
diff --git a/src/img/removing+the+fig+leaf2.webp b/src/img/removing+the+fig+leaf2.webp
new file mode 100644
index 0000000..ccaa32e
Binary files /dev/null and b/src/img/removing+the+fig+leaf2.webp differ
diff --git a/src/index.njk b/src/index.njk
new file mode 100644
index 0000000..733504e
--- /dev/null
+++ b/src/index.njk
@@ -0,0 +1,34 @@
+---
+title: Rachel Guinevere LordKenaga
+---
+{% css %}{% include "css/home.css" %}{% endcss %}
+
+
+
I am an oil painter and art therapist who uses art making as meditation, exploration of memory and emotion, and catharsis.
+
+
+
+
art
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pharetra facilisis semper. Etiam quis felis in leo blandit efficitur id in ipsum. Morbi id sem justo. Nulla elit nisl, sagittis sed ullamcorper ac, lacinia at felis. Proin maximus orci lectus. Vivamus quis augue diam. Vestibulum tortor justo, posuere nec lacus nec, pulvinar iaculis nibh.
+
+ Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut hendrerit eros sem, quis maximus neque sollicitudin ut. Ut et ante eget lorem bibendum semper. Ut sed commodo magna, luctus ornare ante. Curabitur tincidunt, erat vel dapibus faucibus, nulla arcu egestas nulla, non tincidunt leo urna nec ante.
+
+
+