diff options
| author | JJ <nicetry@noemail.com> | 2025-03-19 15:40:51 +0000 |
|---|---|---|
| committer | JJ <nicetry@noemail.com> | 2025-03-19 15:40:51 +0000 |
| commit | 7324691a252761bf3f27365abae21bda0eda8843 (patch) | |
| tree | 26f6fd57acca7db7b8cd774fc6dca38604f47b4f /_includes | |
Diffstat (limited to '_includes')
| -rw-r--r-- | _includes/base.njk | 31 | ||||
| -rw-r--r-- | _includes/components/header.njk | 62 | ||||
| -rw-r--r-- | _includes/components/imageGrid.njk | 7 |
3 files changed, 100 insertions, 0 deletions
diff --git a/_includes/base.njk b/_includes/base.njk new file mode 100644 index 0000000..7f1758a --- /dev/null +++ b/_includes/base.njk @@ -0,0 +1,31 @@ +--- +title: Lisa Mckinney's +--- +<!doctype html> +<html lang="en"> +<head> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + {% seo "" %} + <link rel="stylesheet" href="/dist/style.css"> + <script src="/dist/fslightbox.js"></script> + <script src="/dist/index.js" defer></script> + <link rel="preconnect" href="https://fonts.googleapis.com"> + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> + <link rel="preconnect" href="https://fonts.googleapis.com"> + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> + <link href="https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet"> + <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png"> + <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png"> + <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png"> + <link rel="manifest" href="/assets/favicon/site.webmanifest"> + <script> + window.addEventListener('load', () => { + refreshFsLightbox(); + }); + </script> + </head> + <body class="relative"> + {% include "./components/header.njk" %} + {{ content | safe }} + </body> +</html> diff --git a/_includes/components/header.njk b/_includes/components/header.njk new file mode 100644 index 0000000..10c4d19 --- /dev/null +++ b/_includes/components/header.njk @@ -0,0 +1,62 @@ +{% set items=[{title: "+ Styling", url: "", children: [{title: "Interiors", url:"interiors"}, {title: "Still Life", url:"still-life"}, {title: "Kids", url:"kids"}]}, {title: "About", url: "about"}, {title: "Contact", url: "contact"}] %} + +{% if style == "normal" %} + {% set fontColour = "black" %} + {% set headerPos = "relative" %} + +{% elif style == "full" %} + {% set fontColour = "white" %} + {% set headerPos = "absolute" %} +{% endif %} + +<header class="{{ headerPos }} left-0 top-0 w-full flex h-20 px-5 items-center justify-between text-{{ fontColour }}"> + <a href="/" class="text-xl md:text-2xl tracking-[9px] font-raleway uppercase">Lisa McKinney</a> + + <div class="flex flex-col gap-1 cursor-pointer md:hidden z-100" id="hamburger" > + <div class="w-6 h-0.5 bg-{{ fontColour }} hamburger-layer"></div> + <div class="w-6 h-0.5 bg-{{ fontColour }} hamburger-layer"></div> + <div class="w-6 h-0.5 bg-{{ fontColour }} hamburger-layer"></div> + </div> + + <!-- Main menu --> + <ul class="list-none gap-2 hidden md:flex "> + {% for item in items %} + <li class="relative font-raleway uppercase text-lg group"> + + {% if item.title == "+ Styling" %} + <span class="block py-2 px-4">{{ item.title }}</span> + {% else %} + <a href="/{{ item.url }}" class="block py-2 px-4">{{ item.title }}</a> + {% endif %} + {% if "children" in item %} + <ul class="absolute left-0 hidden w-48 bg-white shadow-lg rounded-lg p-2 group-hover:flex flex-col gap-2"> + {% for subItem in item.children %} + <li> + <a href="/work/{{ subItem.url }}" class="block px-4 py-2 text-sm text-gray-500 hover:bg-gray-100 rounded-md">{{ subItem.title }}</a> + </li> + {% endfor %} + </ul> + {% endif %} + </li> + {% endfor %} + </ul> + + <!-- Mobile menu --> + <ul class="list-none p-5 gap-2 hidden flex-col fixed w-full h-full left-0 top-0 bg-white text-black z-10" id="mobile-menu"> + {% for item in items %} + <li class="relative font-raleway uppercase text-lg group"> + <a href="/{{ item.url }}" class="block py-2 px-4">{{ item.title }}</a> + {% if "children" in item %} + <ul class="ml-10"> + {% for subItem in item.children %} + <li> + <a href="/work/{{ subItem.url }}" class="block px-4 py-2 text-sm">{{ subItem.title }}</a> + </li> + {% endfor %} + </ul> + {% endif %} + </li> + {% endfor %} + </ul> + +</header> diff --git a/_includes/components/imageGrid.njk b/_includes/components/imageGrid.njk new file mode 100644 index 0000000..ccb596d --- /dev/null +++ b/_includes/components/imageGrid.njk @@ -0,0 +1,7 @@ +{# <div class="grid grid-cols-3 auto-rows-[minmax(0,50dvh)]"> #} +<div class="grid md:grid-cols-3 h-screen" style="grid-template-rows: calc(50vh - 40px) calc(50vh - 40px); grid-auto-rows: 50vh;"> + {% for image in images[folder] %} + <a data-fslightbox="first-lightbox" href="{{ image.path }}" ><img src="{{ image.path }}" alt="{{ image.alt }}" class="w-full h-full object-cover object-center block"></a> + {% endfor %} +</div> +
\ No newline at end of file |