website (#1)

* website

* remove comment

* add title + url to carousel, page title and favicon

assets/images.json

@@ -0,0 +1,32 @@
+[
+  {
+    "title": "Plot",
+    "path": "plot.png",
+    "url": "https://github.com/cetz-package/cetz/blob/master/gallery/plot.typ"
+  },
+  {
+    "title": "Tree Layout",
+    "path": "tree.png",
+    "url": "https://github.com/cetz-package/cetz/blob/master/gallery/tree.typ"
+  },
+  {
+    "title": "Clustered Barchart",
+    "path": "barchart.png",
+    "url": "https://github.com/cetz-package/cetz/blob/master/gallery/barchart.typ"
+  },
+  {
+    "title": "Waves",
+    "path": "waves.png",
+    "url": "https://github.com/cetz-package/cetz/blob/master/gallery/waves.typ"
+  },
+  {
+    "title": "Karl's Picture",
+    "path": "karls-picture.png",
+    "url": "https://github.com/cetz-package/cetz/blob/master/gallery/karls-picture.typ"
+  },
+  {
+    "title": "Pie Chart",
+    "path": "pie-chart.png",
+    "url": "https://github.com/cetz-package/cetz/blob/master/gallery/pie-chart.typ"
+  }
+]

index.css

@@ -0,0 +1,212 @@
+body {
+  font-family: "Roboto", sans-serif;
+  background-color: #03070b;
+  color: white;
+  margin: 0;
+}
+
+a {
+  font-size: 1rem;
+  border-radius: 0.5rem;
+  border: none;
+  outline: none;
+  position: relative;
+  font-weight: 700;
+  padding: 0.75rem 1.25rem;
+  z-index: 1;
+  text-decoration: none;
+  display: block;
+  cursor: pointer;
+  text-align: center;
+  overflow: hidden;
+  width: -moz-max-content;
+  width: max-content;
+}
+a.solid {
+  background-color: #37a2ff;
+  color: #03070b;
+}
+a.outline {
+  background: linear-gradient(45deg, #75bfff 2%, #1783e2 52%, #00335f 100%);
+}
+a.outline::before {
+  content: "";
+  position: absolute;
+  inset: 4px;
+  background-color: #03070b;
+  border-radius: 0.25rem;
+  z-index: -1;
+}
+a.outline::after {
+  content: attr(data);
+  background: #37a2ff;
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+}
+
+a,
+button {
+  transition: 0.5s all ease-in-out;
+}
+a:hover,
+button:hover {
+  scale: 1.1;
+  box-shadow: 0 0 15px rgb(0, 91, 151);
+}
+
+.container {
+  max-width: 1100px;
+  margin: auto;
+}
+
+section {
+  padding: 1.5rem;
+}
+
+.title {
+  padding: 1rem 0 0 1rem;
+  margin: 0;
+  position: relative;
+}
+.title::after {
+  content: "";
+  position: absolute;
+  width: 2.5rem;
+  height: 2px;
+  inset-block-end: 0;
+  inset-inline-start: 2.5rem;
+  background: #37a2ff;
+}
+
+.header-content h1 {
+  font-size: 6rem;
+  margin: 0;
+}
+.header-content h2 {
+  font-size: 1.75rem;
+  margin: 0;
+}
+.header-content p {
+  font-size: 0.85rem;
+}
+
+.header-buttons {
+  margin-block-start: 3rem;
+  display: flex;
+  gap: 1rem;
+}
+
+.divider {
+  height: 1px;
+  background: linear-gradient(45deg, #75bfff 2%, #1783e2 52%, #00335f 100%);
+  margin-block: 2rem;
+}
+
+.primary {
+  color: #37a2ff;
+}
+
+.left-arrow {
+  rotate: -90deg;
+}
+
+.right-arrow {
+  rotate: 90deg;
+}
+
+.typst-link {
+  margin-block-start: 2rem;
+}
+
+#carousel-img {
+  height: 100%;
+  width: 100%;
+  flex: 1;
+  transition: 0.8s all ease;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+  display: block;
+  border-radius: 1rem;
+}
+
+#carousel-title {
+  color: #03070b;
+  translate: 1rem 0;
+  width: 100%;
+}
+#carousel-title::after {
+  content: "\f178";
+  font-family: FontAwesome;
+  font-size: 1rem;
+  margin-inline-start: 0.5rem;
+  transition: all 0.2s linear 0s;
+  opacity: 0;
+}
+#carousel-title:hover {
+  scale: none;
+  box-shadow: none;
+  translate: 0.7rem 0;
+}
+#carousel-title:hover::after {
+  opacity: 1;
+}
+
+.carousel {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  padding-inline: 0.5rem;
+}
+.carousel .card {
+  background-color: white;
+  height: 350px;
+  width: 100%;
+  border-radius: 0.75rem;
+  box-shadow: 0 0 100px 0px #37a2ff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.carousel button {
+  height: 2.5rem;
+  width: 3rem;
+  border-radius: 50%;
+  border: none;
+  background: linear-gradient(45deg, #75bfff 2%, #1783e2 52%, #00335f 100%);
+  color: white;
+  cursor: pointer;
+}
+
+@media (min-width: 550px) {
+  section,
+  .carousel {
+    padding: 3rem;
+  }
+  .carousel {
+    gap: 1rem;
+  }
+}
+@media (min-width: 900px) {
+  header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    margin-block-start: 2rem;
+  }
+  .header-content h1 {
+    font-size: 8rem;
+  }
+  .header-content h2 {
+    font-size: 2rem;
+  }
+  .carousel {
+    flex: 1;
+  }
+  .carousel .card {
+    height: 300px;
+    box-shadow: 0 0 200px 0px #37a2ff;
+  }
+}/*# sourceMappingURL=index.css.map */

index.html

@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <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=Roboto:wght@400;700&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
+      integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+    <link rel="manifest" href="/site.webmanifest" />
+
+    <link rel="stylesheet" href="index.css" />
+    <title>CeTZ</title>
+  </head>
+  <body>
+    <h2 class="title primary">CeTZ</h2>
+    <div class="container">
+      <header>
+        <section class="header-content">
+          <h1>CeTZ</h1>
+          <h2>ein <span class="primary">Typst</span> Zeichenpaket</h2>
+          <p>A Typst drawing package by Johannes Wolf and fenjalien</p>
+          <div class="header-buttons">
+            <a
+              href="https://cetz-package.github.io/docs/overview.html"
+              class="solid"
+              target="_blank"
+              >Go to Docs</a
+            >
+            <a
+              href="https://github.com/cetz-package/cetz"
+              class="outline"
+              data="See Github"
+              target="_blank"
+            ></a>
+          </div>
+        </section>
+        <section class="carousel">
+          <button id="left-arrow">
+            <i class="fa-solid fa-angle-up left-arrow"></i>
+          </button>
+          <div class="card">
+            <img id="carousel-img" />
+            <a id="carousel-title"></a>
+          </div>
+          <button id="right-arrow">
+            <i class="fa-solid fa-angle-up right-arrow"></i>
+          </button>
+        </section>
+      </header>
+      <section>
+        <div class="divider"></div>
+        <h2>About</h2>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac
+          aliquet sapien, dignissim commodo lectus. Donec viverra erat et magna
+          viverra dapibus. Vestibulum neque sapien, ornare placerat feugiat eu,
+          tempor tristique sapien. Aenean justo velit, luctus vitae finibus nec,
+          feugiat eget turpis. Nulla elit metus, tincidunt in enim molestie,
+          rhoncus rutrum lorem. Nulla ac nunc quis lectus congue imperdiet sit
+          amet et nisi. Aliquam erat volutpat. Lorem ipsum dolor sit amet,
+          consectetur adipiscing elit. Proin volutpat erat eget hendrerit
+          ornare. Mauris vitae sem quis quam dignissim elementum ut sit amet
+          lacus. Etiam euismod lacinia turpis, id vestibulum arcu porttitor sit
+          amet. Proin imperdiet ullamcorper libero id congue.
+        </p>
+        <a
+          href="https://typst.app/"
+          class="outline typst-link"
+          data="Go to Typst's Website"
+          target="_blank"
+        ></a>
+      </section>
+    </div>
+    <script src="index.js" type="module"></script>
+  </body>
+</html>

index.js

@@ -0,0 +1,37 @@
+import images from "./assets/images.json" assert { type: "json" };
+
+const leftArrow = document.getElementById("left-arrow");
+const rightArrow = document.getElementById("right-arrow");
+const carouselImg = document.getElementById("carousel-img");
+const carouselTitle = document.getElementById("carousel-title");
+
+let currentImgIndex = 0;
+const totalImages = images.length;
+
+leftArrow.addEventListener("click", () => {
+  if (currentImgIndex === 0) {
+    currentImgIndex = totalImages - 1;
+  } else {
+    currentImgIndex -= 1;
+  }
+  setCarouselImg();
+});
+
+rightArrow.addEventListener("click", () => {
+  if (currentImgIndex === totalImages - 1) {
+    currentImgIndex = 0;
+  } else {
+    currentImgIndex += 1;
+  }
+  setCarouselImg();
+});
+
+const setCarouselImg = () => {
+  const imageData = images[currentImgIndex];
+  carouselImg.style.backgroundImage = `url(/assets/${imageData.path})`;
+  carouselTitle.innerText = imageData.title;
+  carouselTitle.href = imageData.url;
+  carouselTitle.target = '_blank';
+};
+
+setCarouselImg();