add 11ty files to website folder

2024-12-17 17:20:21 +01:00 · 2022-07-26 13:16:01 +05:00
parent abfb62c028
commit 4057d1006a
17 changed files with 245 additions and 0 deletions
@@ -0,0 +1,17 @@
+[
+    {
+        "title": "Hello 1",
+        "link": "./contact",
+        "linkText": "go to contact"
+    },
+    {
+        "title": "Hello 2",
+        "link": "./contact",
+        "linkText": "Go To Contact"
+    },
+    {
+        "title": "Hello 3",
+        "link": "./contact",
+        "linkText": "go to contact page"
+    }
+]
@@ -0,0 +1,6 @@
+<meta charset="UTF-8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<link rel="stylesheet" href="/11ty-demo/css/global.css">
+<link rel="stylesheet" href="/11ty-demo/css/tailwind.css">
+<title>{{ title }}</title>
@@ -0,0 +1,12 @@
+const { html } = require("common-tags");
+
+const Card = ({ title, link, linkText, raised }) => {
+  return html`
+    <div>
+      <h2>${title}</h2>
+      <a href="${link}" class="text-blue-700 mb-4 inline-block underline">${linkText}</a>
+    </div>
+  `;
+};
+
+module.exports = Card;
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    {% include "basehead.html" %}
+    {% block head %}{% endblock %}
+</head>
+
+<body>
+    {{ content | safe }}
+</body>
+
+</html>
@@ -0,0 +1,6 @@
+{% extends "layouts/base.html" %}
+
+{% block head %}
+    <meta name="description" content="{{ description }}"/>
+    <link rel="stylesheet" href="/11ty-demo/css/contact.css">
+{% endblock %}
@@ -0,0 +1,7 @@
+---
+layout: layouts/contact.html
+title: contact page
+description: hey i'm on the contact page only
+---
+
+<h1 class="bg-green-400">I'm the {{ title }}</h1>
@@ -0,0 +1,3 @@
+body{
+    background-color: coral;
+}
@@ -0,0 +1,5 @@
+@import url('./reset.css');
+
+body{
+    background-color: aquamarine;
+}
@@ -0,0 +1,74 @@
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Remove default margin */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+figure,
+blockquote,
+dl,
+dd {
+  margin: 0;
+}
+
+/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+ul[role="list"],
+ol[role="list"] {
+  list-style: none;
+}
+
+/* Set core root defaults */
+html:focus-within {
+  scroll-behavior: smooth;
+}
+
+/* Set core body defaults */
+body {
+  min-height: 100vh;
+  text-rendering: optimizeSpeed;
+  line-height: 1.5;
+}
+
+/* A elements that don't have a class get default styles */
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+}
+
+/* Make images easier to work with */
+img,
+picture {
+  max-width: 100%;
+  display: block;
+}
+
+/* Inherit fonts for inputs and buttons */
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
+@media (prefers-reduced-motion: reduce) {
+  html:focus-within {
+    scroll-behavior: auto;
+  }
+
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
@@ -0,0 +1,20 @@
+---
+layout: layouts/base.html
+title: 11ty demo
+---
+
+<h1 class="bg-orange-400">{{ title }}</h1>
+<p>i am also on the home page</p>
+<a href="/11ty-demo/contact" class="text-blue-700 mb-4 inline-block underline">go to contact</a>
+
+<img src="/11ty-demo/assets/images/hotel.jpg" alt="This is a Hotel Picture." width="300px">
+
+{% for item in card %}
+{% Card title=item.title ,link=item.link, linkText=item.linkText %}    
+{% endfor %}
+
+<h1 class="text-2xl font-bold text-red-500">
+    {% include "../markdown/index.md" %}    
+</h1>
+
+