diff --git a/android-chrome-192x192.png b/android-chrome-192x192.png new file mode 100644 index 0000000..5932a80 Binary files /dev/null and b/android-chrome-192x192.png differ diff --git a/android-chrome-512x512.png b/android-chrome-512x512.png new file mode 100644 index 0000000..14e9407 Binary files /dev/null and b/android-chrome-512x512.png differ diff --git a/apple-touch-icon.png b/apple-touch-icon.png new file mode 100644 index 0000000..5008d5e Binary files /dev/null and b/apple-touch-icon.png differ diff --git a/assets/barchart.png b/assets/barchart.png new file mode 100644 index 0000000..d72c783 Binary files /dev/null and b/assets/barchart.png differ diff --git a/assets/images.json b/assets/images.json new file mode 100644 index 0000000..1add4e6 --- /dev/null +++ b/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" + } +] diff --git a/assets/karls-picture.png b/assets/karls-picture.png new file mode 100644 index 0000000..2697089 Binary files /dev/null and b/assets/karls-picture.png differ diff --git a/assets/pie-chart.png b/assets/pie-chart.png new file mode 100644 index 0000000..721f27a Binary files /dev/null and b/assets/pie-chart.png differ diff --git a/assets/plot.png b/assets/plot.png new file mode 100644 index 0000000..20b2408 Binary files /dev/null and b/assets/plot.png differ diff --git a/assets/tree.png b/assets/tree.png new file mode 100644 index 0000000..f839350 Binary files /dev/null and b/assets/tree.png differ diff --git a/assets/waves.png b/assets/waves.png new file mode 100644 index 0000000..808d556 Binary files /dev/null and b/assets/waves.png differ diff --git a/favicon-16x16.png b/favicon-16x16.png new file mode 100644 index 0000000..1a72ef0 Binary files /dev/null and b/favicon-16x16.png differ diff --git a/favicon-32x32.png b/favicon-32x32.png new file mode 100644 index 0000000..0c267c5 Binary files /dev/null and b/favicon-32x32.png differ diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..5d22aa5 Binary files /dev/null and b/favicon.ico differ diff --git a/index.css b/index.css new file mode 100644 index 0000000..c25224b --- /dev/null +++ b/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 */ \ No newline at end of file diff --git a/index.css.map b/index.css.map new file mode 100644 index 0000000..2f153d8 --- /dev/null +++ b/index.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["index.scss","index.css"],"names":[],"mappings":"AAIA;EACE,iCAAA;EACA,yBANW;EAOX,YAAA;EACA,SAAA;ACHF;;ADMA;EACE,eAAA;EACA,qBAAA;EACA,YAAA;EACA,aAAA;EACA,kBAAA;EACA,gBAAA;EACA,wBAAA;EACA,UAAA;EACA,qBAAA;EACA,cAAA;EACA,eAAA;EACA,kBAAA;EACA,gBAAA;EACA,uBAAA;EAAA,kBAAA;ACHF;ADKE;EACE,yBA3BM;EA4BN,cA7BS;AC0Bb;ADME;EACE,yEA/BO;AC2BX;ADKI;EACE,WAAA;EACA,kBAAA;EACA,UAAA;EACA,yBAtCO;EAuCP,sBAAA;EACA,WAAA;ACHN;ADKI;EACE,mBAAA;EACA,mBA3CI;EA4CJ,qBAAA;EACA,6BAAA;EACA,kBAAA;ACHN;;ADQA;;EAEE,gCAAA;ACLF;ADME;;EACE,UAAA;EACA,oCAAA;ACHJ;;ADOA;EACE,iBAAA;EACA,YAAA;ACJF;;ADOA;EACE,eAAA;ACJF;;ADOA;EACE,sBAAA;EACA,SAAA;EACA,kBAAA;ACJF;ADME;EACE,WAAA;EACA,kBAAA;EACA,aAAA;EACA,WAAA;EACA,kBAAA;EACA,0BAAA;EACA,mBAjFM;AC6EV;;ADSE;EACE,eAAA;EACA,SAAA;ACNJ;ADQE;EACE,kBAAA;EACA,SAAA;ACNJ;ADSE;EACE,kBAAA;ACPJ;;ADWA;EACE,wBAAA;EACA,aAAA;EACA,SAAA;ACRF;;ADWA;EACE,WAAA;EACA,yEA3GS;EA4GT,kBAAA;ACRF;;ADWA;EACE,cAjHQ;ACyGV;;ADWA;EACE,cAAA;ACRF;;ADUA;EACE,aAAA;ACPF;;ADUA;EACE,wBAAA;ACPF;;ADUA;EACE,YAAA;EACA,WAAA;EACA,OAAA;EACA,yBAAA;EACA,wBAAA;EACA,4BAAA;EACA,2BAAA;EACA,cAAA;EACA,mBAAA;ACPF;;ADUA;EACE,cA7IW;EA8IX,iBAAA;EACA,WAAA;ACPF;ADQE;EACE,gBAAA;EACA,wBAAA;EACA,eAAA;EACA,2BAAA;EACA,8BAAA;EACA,UAAA;ACNJ;ADSE;EACE,WAAA;EACA,gBAAA;EACA,mBAAA;ACPJ;ADQI;EACE,UAAA;ACNN;;ADWA;EACE,aAAA;EACA,WAAA;EACA,mBAAA;EACA,sBAAA;ACRF;ADSE;EACE,uBAAA;EACA,aAAA;EACA,WAAA;EACA,sBAAA;EACA,iCAAA;EACA,aAAA;EACA,sBAAA;EACA,mBAAA;ACPJ;ADUE;EACE,cAAA;EACA,WAAA;EACA,kBAAA;EACA,YAAA;EACA,yEAtLO;EAuLP,YAAA;EACA,eAAA;ACRJ;;ADYA;EACE;;IAEE,aAAA;ECTF;EDWA;IACE,SAAA;ECTF;AACF;ADYA;EACE;IACE,aAAA;IACA,8BAAA;IACA,mBAAA;IACA,WAAA;IACA,wBAAA;ECVF;EDaE;IACE,eAAA;ECXJ;EDaE;IACE,eAAA;ECXJ;EDeA;IACE,OAAA;ECbF;EDcE;IACE,aAAA;IACA,iCAAA;ECZJ;AACF","file":"index.css"} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..2afda30 --- /dev/null +++ b/index.html @@ -0,0 +1,88 @@ + + + + + + + + + + + + + + + CeTZ + + +

CeTZ

+
+
+
+

CeTZ

+

ein Typst Zeichenpaket

+

A Typst drawing package by Johannes Wolf and fenjalien

+
+ Go to Docs + +
+
+
+ +
+ + +
+ +
+
+
+
+

About

+

+ 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. +

+ +
+
+ + + diff --git a/index.js b/index.js new file mode 100644 index 0000000..2f12148 --- /dev/null +++ b/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(); diff --git a/index.scss b/index.scss new file mode 100644 index 0000000..35c71a9 --- /dev/null +++ b/index.scss @@ -0,0 +1,225 @@ +$background: #03070b; +$primary: #37a2ff; +$gradient: linear-gradient(45deg, #75bfff 2%, #1783e2 52%, #00335f 100%); + +body { + font-family: "Roboto", sans-serif; + background-color: $background; + 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: max-content; + + &.solid { + background-color: $primary; + color: $background; + } + + &.outline { + background: $gradient; + &::before { + content: ""; + position: absolute; + inset: 4px; + background-color: $background; + border-radius: 0.25rem; + z-index: -1; + } + &::after { + content: attr(data); + background: $primary; + background-clip: text; + -webkit-background-clip: text; + color: transparent; + } + } +} + +a, +button { + transition: 0.5s all ease-in-out; + &: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; + + &::after { + content: ""; + position: absolute; + width: 2.5rem; + height: 2px; + inset-block-end: 0; + inset-inline-start: 2.5rem; + background: $primary; + } +} + +.header-content { + h1 { + font-size: 6rem; + margin: 0; + } + h2 { + font-size: 1.75rem; + margin: 0; + } + + p { + font-size: 0.85rem; + } +} + +.header-buttons { + margin-block-start: 3rem; + display: flex; + gap: 1rem; +} + +.divider { + height: 1px; + background: $gradient; + margin-block: 2rem; +} + +.primary { + color: $primary; +} + +.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: $background; + translate: 1rem 0; + width: 100%; + &::after { + content: "\f178"; + font-family: FontAwesome; + font-size: 1rem; + margin-inline-start: 0.5rem; + transition: all 0.2s linear 0s; + opacity: 0; + } + + &:hover { + scale: none; + box-shadow: none; + translate: 0.7rem 0; + &::after { + opacity: 1; + } + } +} + +.carousel { + display: flex; + gap: 0.5rem; + align-items: center; + padding-inline: 0.5rem; + .card { + background-color: white; + height: 350px; + width: 100%; + border-radius: 0.75rem; + box-shadow: 0 0 100px 0px $primary; + display: flex; + flex-direction: column; + align-items: center; + } + + button { + height: 2.5rem; + width: 3rem; + border-radius: 50%; + border: none; + background: $gradient; + 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; + } + h2 { + font-size: 2rem; + } + } + + .carousel { + flex: 1; + .card { + height: 300px; + box-shadow: 0 0 200px 0px $primary; + } + } +} diff --git a/site.webmanifest b/site.webmanifest new file mode 100644 index 0000000..ac71906 --- /dev/null +++ b/site.webmanifest @@ -0,0 +1,17 @@ +{ + "name": "CeTZ", + "short_name": "CeTZ", + "icons": [ + { + "src": "/android-chrome-192x192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "/android-chrome-512x512.png", + "sizes": "512x512", + "type": "image/png" + } + ], + "display": "standalone" +}