chore: site WIP

neon-html/.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false

neon-html/.gitignore

@@ -0,0 +1,29 @@
+## Node.js
+lib-cov
+*.seed
+*.log
+*.csv
+*.dat
+*.out
+*.pid
+*.gz
+pids
+logs
+results
+npm-debug.log
+node_modules
+
+## OS X
+.DS_Store
+.AppleDouble
+.LSOverride
+Icon
+._*
+.Spotlight-V100
+.Trashes
+
+## Windows
+Thumbs.db
+ehthumbs.db
+Desktop.ini
+$RECYCLE.BIN/

neon-html/CHANGELOG.md

@@ -0,0 +1,5 @@
+# CHANGELOG.md
+
+## [1.0.0] - 2022-07-28
+
+First release

neon-html/README.md

@@ -0,0 +1,16 @@
+# Neon HTML
+
+HTML landing page template designed by Cruip.
+
+This HTML template is shipped with the (Tailwind CLI tool)[https://tailwindcss.com/docs/installation].
+
+* [Getting started](#getting-started)
+
+## Getting started
+
+* First, ensure that node.js & npm are both installed. If not, choose your OS and installation method from [this page](https://nodejs.org/en/download/package-manager/) and follow the instructions.
+* Next, use your command line to enter your project directory.
+* This template comes with a ready-to-use package file called `package.json`. You just need to run `npm install` to install all of the dependencies into your project.
+* When `npm` has finished with the install, run `npm run build` to recompile the `style.css` file in the root directory.
+
+You're ready to go! The most useful task for rapid development is `npm run dev`, which rebuild the CSS every time you make a change in the HML or JS files.

neon-html/css/additional-styles/custom-fonts.css

@@ -0,0 +1,35 @@
+@font-face {
+    font-family: 'Uncut Sans';
+    font-weight: 700;
+    font-style: normal;
+    font-display: fallback;
+    src: url('fonts/Uncut-Sans-Bold.woff2') format('woff2'),
+        url('fonts/Uncut-Sans-Bold.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'Uncut Sans';
+    font-weight: 700;
+    font-style: italic;
+    font-display: fallback;
+    src: url('fonts/Uncut-Sans-BoldOblique.woff2') format('woff2'),
+        url('fonts/Uncut-Sans-BoldOblique.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'Uncut Sans';
+    font-weight: 600;
+    font-style: normal;
+    font-display: fallback;
+    src: url('fonts/Uncut-Sans-Semibold.woff2') format('woff2'),
+        url('fonts/Uncut-Sans-Semibold.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'Uncut Sans';
+    font-weight: 500;
+    font-style: normal;
+    font-display: fallback;
+    src: url('fonts/Uncut-Sans-Medium.woff2') format('woff2'),
+        url('fonts/Uncut-Sans-Medium.woff') format('woff');
+}

neon-html/css/additional-styles/range-slider.css

@@ -0,0 +1,57 @@
+/* Range slider */
+:root {
+    --range-thumb-size: 36px;
+}
+
+input[type=range] {
+    appearance: none;
+    background: #ccc;
+    border-radius: 3px;
+    height: 6px;
+    margin-top: (--range-thumb-size - 6px) * 0.5;
+    margin-bottom: (--range-thumb-size - 6px) * 0.5;
+    --thumb-size: #{--range-thumb-size};
+}
+
+input[type=range]::-webkit-slider-thumb {
+    appearance: none;
+    -webkit-appearance: none;
+    background-color: #000;
+    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 .5v7L12 4zM0 4l4 3.5v-7z' fill='%23FFF' fill-rule='nonzero'/%3E%3C/svg%3E");
+    background-position: center;
+    background-repeat: no-repeat;
+    border: 0;
+    border-radius: 50%;
+    cursor: pointer;
+    height: --range-thumb-size;
+    width: --range-thumb-size;
+}
+
+input[type=range]::-moz-range-thumb {
+    background-color: #000;
+    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 .5v7L12 4zM0 4l4 3.5v-7z' fill='%23FFF' fill-rule='nonzero'/%3E%3C/svg%3E");
+    background-position: center;
+    background-repeat: no-repeat;
+    border: 0;
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+    height: --range-thumb-size;
+    width: --range-thumb-size;
+}
+
+input[type=range]::-ms-thumb {
+    background-color: #000;
+    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 .5v7L12 4zM0 4l4 3.5v-7z' fill='%23FFF' fill-rule='nonzero'/%3E%3C/svg%3E");
+    background-position: center;
+    background-repeat: no-repeat;
+    border: 0;
+    border-radius: 50%;
+    cursor: pointer;
+    height: --range-thumb-size;
+    width: --range-thumb-size;
+}
+
+input[type=range]::-moz-focus-outer {
+    border: 0;
+}

neon-html/css/additional-styles/theme.css

@@ -0,0 +1,54 @@
+.form-input:focus,
+.form-textarea:focus,
+.form-multiselect:focus,
+.form-select:focus,
+.form-checkbox:focus,
+.form-radio:focus {
+    @apply ring-0;
+}
+
+/* Hamburger button */
+.hamburger svg>*:nth-child(1),
+.hamburger svg>*:nth-child(2),
+.hamburger svg>*:nth-child(3) {
+    transform-origin: center;
+    transform: rotate(0deg);
+}
+
+.hamburger svg>*:nth-child(1) {
+    transition: y 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19), opacity 0.1s ease-in;
+}
+
+.hamburger svg>*:nth-child(2) {
+    transition: transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
+}
+
+.hamburger svg>*:nth-child(3) {
+    transition: y 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19), width 0.1s 0.25s ease-in;
+}
+
+.hamburger.active svg>*:nth-child(1) {
+    opacity: 0;
+    y: 11;
+    transform: rotate(225deg);
+    transition: y 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.1s 0.12s ease-out;
+}
+
+.hamburger.active svg>*:nth-child(2) {
+    transform: rotate(225deg);
+    transition: transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.hamburger.active svg>*:nth-child(3) {
+    y: 11;
+    transform: rotate(135deg);
+    transition: y 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1), width 0.1s ease-out;
+}
+
+/* Custom AOS distance */
+@media screen {
+    html:not(.no-js) [data-aos=zoom-out] {
+        -webkit-transform: scale(1.05);
+        transform: scale(1.05)
+    }
+}

neon-html/css/additional-styles/toggle-switch.css

@@ -0,0 +1,16 @@
+/* Switch element */
+.form-switch {
+    @apply relative select-none w-12 my-2;
+}
+
+.form-switch label {
+    @apply block overflow-hidden cursor-pointer rounded-full h-4;
+}
+
+.form-switch label>span:first-child {
+    @apply absolute block rounded-full w-8 h-8 right-1/2 -left-2 -top-2 transition-all duration-150 ease-out;
+}
+
+.form-switch input[type="checkbox"]:checked+label>span:first-child {
+    @apply bg-blue-200 border-blue-600 left-6;
+}

neon-html/css/additional-styles/utility-patterns.css

@@ -0,0 +1,96 @@
+/* Typography */
+.h1 {
+    @apply text-6xl font-bold;
+}
+
+.h2 {
+    @apply text-4xl font-bold;
+}
+
+.h3 {
+    @apply text-3xl font-bold;
+}
+
+.h4 {
+    @apply text-2xl font-bold;
+}
+
+@screen md {
+    .h1 {
+        @apply text-7xl;
+    }
+
+    .h2 {
+        @apply text-5xl;
+    }
+}
+
+/* Buttons */
+.btn,
+.btn-sm {
+    @apply font-medium inline-flex items-center justify-center rounded leading-normal transition duration-150 ease-in-out;
+}
+
+.btn {
+    @apply px-6 py-3;
+}
+
+.btn-sm {
+    @apply px-4 py-2;
+}
+
+/* Forms */
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-results-button,
+input[type="search"]::-webkit-search-results-decoration {
+  -webkit-appearance: none;
+}
+
+.form-input,
+.form-textarea,
+.form-multiselect,
+.form-select,
+.form-checkbox,
+.form-radio {
+    @apply bg-gray-800 border border-gray-700 focus:border-blue-500;
+}
+
+.form-input,
+.form-textarea,
+.form-multiselect,
+.form-select,
+.form-checkbox {
+    @apply rounded-sm;
+}
+
+.form-input,
+.form-textarea,
+.form-multiselect,
+.form-select {
+    @apply py-3 px-4;
+}
+
+.form-input,
+.form-textarea {
+    @apply placeholder-gray-500 leading-snug;
+}
+
+.form-select {
+    @apply pr-10;
+}
+
+.form-checkbox,
+.form-radio {
+    @apply text-blue-600 rounded-sm;
+}
+
+/* Chrome, Safari and Opera */
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+.no-scrollbar {
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}

neon-html/css/style.css

@@ -0,0 +1,25 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=fallback');
+@import 'additional-styles/custom-fonts';
+
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+
+/* Additional styles */
+@import 'additional-styles/utility-patterns.css';
+@import 'additional-styles/range-slider.css';
+@import 'additional-styles/toggle-switch.css';
+@import 'additional-styles/theme.css';
+
+@import 'tailwindcss/utilities';
+
+/* Additional Tailwind directives: https://tailwindcss.com/docs/functions-and-directives/#responsive */
+@layer utilities {
+    .rtl {
+        direction: rtl;
+    }
+}
+
+/* See Alpine.js: https://github.com/alpinejs/alpine#x-cloak */
+[x-cloak=""] {
+    display: none;
+}