diff --git a/src/_layouts/home.njk b/src/_layouts/home.njk new file mode 100644 index 0000000..8565ce4 --- /dev/null +++ b/src/_layouts/home.njk @@ -0,0 +1,32 @@ + + + + + + {{ title }} + + + +
+
+

Great Johnson Family Recipe Index

+ +
+
+ +
+ {{ content | safe }} +
+ + + + + diff --git a/src/_layouts/note.njk b/src/_layouts/note.njk deleted file mode 100644 index f7f1d9c..0000000 --- a/src/_layouts/note.njk +++ /dev/null @@ -1,9 +0,0 @@ -{{ title }} - - - - Home - - - -{{ content | safe }} diff --git a/src/_layouts/recipe.njk b/src/_layouts/recipe.njk index f7f1d9c..c2d6d6f 100644 --- a/src/_layouts/recipe.njk +++ b/src/_layouts/recipe.njk @@ -1,9 +1,53 @@ -{{ title }} + + + + + + {{ title }} - Family Recipes + + + +
+
+

Family Recipes

+ +
+
+ +
+
+
+
+

{{ title | upper }}

+ {% if author %} +

From the kitchen of: {{ author }}

+ {% endif %} +
+ {% if image %} +
+ {{ title }} +
+ {% endif %} +
+
+ +
+ {{ content | safe }} +
+
+
+ + + + - - Home - - - -{{ content | safe }} diff --git a/src/css/style.css b/src/css/style.css index 2429707..046de72 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -1,6 +1,232 @@ +/* Warm, cozy recipe card theme */ :root { - --primary-color: #d97706; - --bg: #fffbd8; - --secondary-color: #fef3c7; - --font-family: system-ui, -apple-system, sans-serif; + --primary-color: #b45309; /* Warm amber / terracotta */ + --primary-hover: #883905; + --bg-color: #f7f4ee; /* Soft warm linen background */ + --card-bg: #ffffff; /* Crisp paper white */ + --text-color: #292524; /* Soft warm charcoal */ + --border-color: #e7e0d3; /* Gentle warm border */ + --font-serif: Georgia, Cambria, "Times New Roman", Times, serif; + --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } + +body { + font-family: var(--font-sans); + background-color: var(--bg-color); + color: var(--text-color); + margin: 0; + padding: 0; + line-height: 1.65; +} + +/* Container */ +.container { + max-width: 820px; + margin: 0 auto; + padding: 0 1.25rem; +} + +/* Header & Navigation */ +header { + background-color: #ffffff; + border-bottom: 1px solid var(--border-color); + padding: 1.1rem 0; + margin-bottom: 2.5rem; + position: sticky; + top: 0; + z-index: 100; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03); +} + +.Header { + display: flex; + justify-content: space-between; + align-items: center; + max-width: 820px; + margin: 0 auto; + padding: 0 1.25rem; +} + +header h1 { + margin: 0; + font-size: 1.5rem; + font-family: var(--font-serif); +} + +header h1 a { + color: var(--primary-color); + text-decoration: none; +} + +nav ul { + display: flex; + list-style: none; + gap: 1.75rem; + margin: 0; + padding: 0; +} + +nav a { + color: var(--text-color); + text-decoration: none; + font-weight: 500; + font-size: 0.95rem; + transition: color 0.15s ease; +} + +nav a:hover { + color: var(--primary-color); +} + +/* Content Area */ +main, .Content { + min-height: 65vh; +} + +/* Footer */ +footer, .Footer { + border-top: 1px solid var(--border-color); + margin-top: 4rem; + padding: 2.5rem 0; + text-align: center; + color: #78716c; + font-size: 0.9rem; + background-color: #faf8f5; +} + +/* Recipe Cards Grid */ +.recipe-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); + gap: 1.5rem; + margin-top: 1.5rem; +} + +.recipe-card { + background-color: var(--card-bg); + border: 1px solid var(--border-color); + border-radius: 10px; + padding: 1.5rem; + transition: transform 0.2s ease, box-shadow 0.2s ease; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.recipe-card:hover { + transform: translateY(-3px); + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06); +} + +.recipe-card h3 { + font-family: var(--font-serif); + font-size: 1.25rem; + margin: 0 0 0.5rem 0; +} + +.recipe-card h3 a { + color: #1c1917; + text-decoration: none; +} + +.recipe-card h3 a:hover { + color: var(--primary-color); +} + + +/* Classic Printed Recipe Page Layout */ +.recipe-card-page { + background-color: #ffffff; + border: 1px solid var(--border-color); + border-radius: 12px; + padding: 3rem 2.5rem; + box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.04); +} + +.recipe-header { + display: flex; + justify-content: space-between; + align-items: flex-start; + gap: 2rem; +} + +.recipe-title-section { + flex: 1; +} + +.recipe-title { + font-family: var(--font-serif); + font-size: 2.1rem; + font-weight: 700; + letter-spacing: 0.03em; + margin: 0 0 0.4rem 0; + color: #1c1917; +} + +.recipe-author { + font-size: 1rem; + color: #78716c; + margin: 0; +} + +.recipe-author em { + font-style: italic; + color: var(--primary-color); +} + +.recipe-illustration { + width: 100px; + height: 100px; + border: 1px dashed #d6cebe; + border-radius: 8px; + padding: 6px; + background: #faf8f5; + display: flex; + align-items: center; + justify-content: center; +} + +.recipe-illustration img { + max-width: 100%; + max-height: 100%; + object-fit: contain; +} + +.recipe-divider { + border: none; + border-top: 2px solid var(--border-color); + margin: 1.5rem 0 2.25rem 0; +} + +.recipe-body h2, +.recipe-body h3 { + font-family: var(--font-serif); + font-size: 1.15rem; + font-weight: 700; + letter-spacing: 0.06em; + text-transform: uppercase; + margin-top: 1.75rem; + margin-bottom: 0.75rem; + color: var(--primary-color); + border-bottom: 1px solid #f2ece1; + padding-bottom: 0.25rem; +} + +.recipe-body ul { + padding-left: 1.25rem; + margin-bottom: 1.75rem; +} + +.recipe-body li { + margin-bottom: 0.4rem; + color: #44403c; +} + +.recipe-body p { + margin-bottom: 1.25rem; + color: #292524; +} + + + + diff --git a/src/index.md b/src/index.md index 78b34d8..a75e2ee 100644 --- a/src/index.md +++ b/src/index.md @@ -1,17 +1,19 @@ --- -layout: note.njk -title: My First Note +layout: home.njk +title: Homepage --- -# Welcome to my notes! +# Great Johnshon Family Recipies -This is a basic Eleventy setup. Any Markdown file you place in the `src` folder will automatically be converted to a page. +An index of family recipes collected over generations. -* It supports lists -* **Bold text** -* [Links](https://11ty.dev) - - + +