diff --git a/src/input.css b/src/input.css
index eb5e11e..3139123 100644
--- a/src/input.css
+++ b/src/input.css
@@ -1,5 +1,20 @@
@import "tailwindcss";
+@layer utilities {
+
+ /* Chrome, Safari and Opera */
+ .scrollbar-hidden::-webkit-scrollbar {
+ display: none;
+ }
+
+ .scrollbar-hidden {
+ scrollbar-width: none;
+ /* Firefox */
+ -ms-overflow-style: none;
+ /* IE and Edge */
+ }
+}
+
.ubuntu-regular {
font-family: "Ubuntu", serif;
font-weight: 400;
@@ -19,10 +34,7 @@
font-style: normal;
}
-body {
- position: relative;
-
- /* Create the dots */
+.background-grid {
background-image:
radial-gradient(circle at 1px 1px, #33333366 1px, transparent 0),
linear-gradient(to right, #33333366 1px, transparent 1px),
diff --git a/src/static/css/tailwind.css b/src/static/css/tailwind.css
index 4df0591..545eec5 100644
--- a/src/static/css/tailwind.css
+++ b/src/static/css/tailwind.css
@@ -518,12 +518,18 @@
}
}
@layer utilities {
+ .collapse {
+ visibility: collapse;
+ }
.invisible {
visibility: hidden;
}
.absolute {
position: absolute;
}
+ .fixed {
+ position: fixed;
+ }
.relative {
position: relative;
}
@@ -542,6 +548,9 @@
.-z-10 {
z-index: calc(10 * -1);
}
+ .-z-50 {
+ z-index: calc(50 * -1);
+ }
.col-\[1\] {
grid-column: 1;
}
@@ -608,6 +617,9 @@
.block {
display: block;
}
+ .contents {
+ display: contents;
+ }
.flex {
display: flex;
}
@@ -620,12 +632,24 @@
.inline {
display: inline;
}
+ .inline-flex {
+ display: inline-flex;
+ }
+ .list-item {
+ display: list-item;
+ }
+ .table {
+ display: table;
+ }
.aspect-square {
aspect-ratio: 1 / 1;
}
.aspect-video {
aspect-ratio: var(--aspect-video);
}
+ .h-0 {
+ height: calc(var(--spacing) * 0);
+ }
.h-4 {
height: calc(var(--spacing) * 4);
}
@@ -641,24 +665,48 @@
.h-\[114px\] {
height: 114px;
}
+ .h-\[256px\] {
+ height: 256px;
+ }
.h-full {
height: 100%;
}
+ .max-h-\[105\%\] {
+ max-height: 105%;
+ }
+ .max-h-\[110dvh\] {
+ max-height: 110dvh;
+ }
.max-h-\[512px\] {
max-height: 512px;
}
+ .max-h-full {
+ max-height: 100%;
+ }
+ .min-h-\[140dvh\] {
+ min-height: 140dvh;
+ }
.min-h-\[438px\] {
min-height: 438px;
}
+ .w-0 {
+ width: calc(var(--spacing) * 0);
+ }
.w-4 {
width: calc(var(--spacing) * 4);
}
.w-6 {
width: calc(var(--spacing) * 6);
}
+ .w-8 {
+ width: calc(var(--spacing) * 8);
+ }
.w-\[114px\] {
width: 114px;
}
+ .w-\[256px\] {
+ width: 256px;
+ }
.w-full {
width: 100%;
}
@@ -674,9 +722,15 @@
.max-w-\[1210px\] {
max-width: 1210px;
}
+ .flex-shrink {
+ flex-shrink: 1;
+ }
.flex-shrink-0 {
flex-shrink: 0;
}
+ .border-collapse {
+ border-collapse: collapse;
+ }
.origin-center {
transform-origin: center;
}
@@ -704,9 +758,15 @@
--tw-scale-z: 150%;
scale: var(--tw-scale-x) var(--tw-scale-y);
}
+ .transform {
+ transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
+ }
.animate-ping {
animation: var(--animate-ping);
}
+ .resize {
+ resize: both;
+ }
.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
@@ -764,8 +824,8 @@
.overflow-hidden {
overflow: hidden;
}
- .overflow-x-hidden {
- overflow-x: hidden;
+ .overflow-y-auto {
+ overflow-y: auto;
}
.rounded-full {
border-radius: calc(infinity * 1px);
@@ -834,6 +894,12 @@
.py-8 {
padding-block: calc(var(--spacing) * 8);
}
+ .pb-8 {
+ padding-bottom: calc(var(--spacing) * 8);
+ }
+ .pb-16 {
+ padding-bottom: calc(var(--spacing) * 16);
+ }
.text-right {
text-align: right;
}
@@ -871,6 +937,20 @@
.text-white {
color: var(--color-white);
}
+ .underline {
+ text-decoration-line: underline;
+ }
+ .outline {
+ outline-style: var(--tw-outline-style);
+ outline-width: 1px;
+ }
+ .filter {
+ filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+ }
+ .backdrop-filter {
+ -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+ backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+ }
.transition {
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -955,6 +1035,11 @@
padding-block: calc(var(--spacing) * 14);
}
}
+ .sm\:pb-14 {
+ @media (width >= 40rem) {
+ padding-bottom: calc(var(--spacing) * 14);
+ }
+ }
.sm\:text-base {
@media (width >= 40rem) {
font-size: var(--text-base);
@@ -992,6 +1077,11 @@
padding-block: calc(var(--spacing) * 0);
}
}
+ .md\:pb-0 {
+ @media (width >= 48rem) {
+ padding-bottom: calc(var(--spacing) * 0);
+ }
+ }
.md\:text-\[32px\] {
@media (width >= 48rem) {
font-size: 32px;
@@ -1070,6 +1160,15 @@
}
}
}
+@layer utilities {
+ .scrollbar-hidden::-webkit-scrollbar {
+ display: none;
+ }
+ .scrollbar-hidden {
+ scrollbar-width: none;
+ -ms-overflow-style: none;
+ }
+}
.ubuntu-regular {
font-family: "Ubuntu", serif;
font-weight: 400;
@@ -1086,8 +1185,7 @@
font-weight: 400;
font-style: normal;
}
-body {
- position: relative;
+.background-grid {
background-image: radial-gradient(circle at 1px 1px, #33333366 1px, transparent 0), linear-gradient(to right, #33333366 1px, transparent 1px), linear-gradient(to bottom, #33333366 1px, transparent 1px);
background-size: 20px 20px;
background-position: 0 0, 0 0, 0 0;
@@ -1134,6 +1232,31 @@ body {
inherits: false;
initial-value: 1;
}
+@property --tw-rotate-x {
+ syntax: "*";
+ inherits: false;
+ initial-value: rotateX(0);
+}
+@property --tw-rotate-y {
+ syntax: "*";
+ inherits: false;
+ initial-value: rotateY(0);
+}
+@property --tw-rotate-z {
+ syntax: "*";
+ inherits: false;
+ initial-value: rotateZ(0);
+}
+@property --tw-skew-x {
+ syntax: "*";
+ inherits: false;
+ initial-value: skewX(0);
+}
+@property --tw-skew-y {
+ syntax: "*";
+ inherits: false;
+ initial-value: skewY(0);
+}
@property --tw-border-style {
syntax: "*";
inherits: false;
@@ -1189,6 +1312,83 @@ body {
syntax: "*";
inherits: false;
}
+@property --tw-outline-style {
+ syntax: "*";
+ inherits: false;
+ initial-value: solid;
+}
+@property --tw-blur {
+ syntax: "*";
+ inherits: false;
+}
+@property --tw-brightness {
+ syntax: "*";
+ inherits: false;
+}
+@property --tw-contrast {
+ syntax: "*";
+ inherits: false;
+}
+@property --tw-grayscale {
+ syntax: "*";
+ inherits: false;
+}
+@property --tw-hue-rotate {
+ syntax: "*";
+ inherits: false;
+}
+@property --tw-invert {
+ syntax: "*";
+ inherits: false;
+}
+@property --tw-opacity {
+ syntax: "*";
+ inherits: false;
+}
+@property --tw-saturate {
+ syntax: "*";
+ inherits: false;
+}
+@property --tw-sepia {
+ syntax: "*";
+ inherits: false;
+}
+@property --tw-backdrop-blur {
+ syntax: "*";
+ inherits: false;
+}
+@property --tw-backdrop-brightness {
+ syntax: "*";
+ inherits: false;
+}
+@property --tw-backdrop-contrast {
+ syntax: "*";
+ inherits: false;
+}
+@property --tw-backdrop-grayscale {
+ syntax: "*";
+ inherits: false;
+}
+@property --tw-backdrop-hue-rotate {
+ syntax: "*";
+ inherits: false;
+}
+@property --tw-backdrop-invert {
+ syntax: "*";
+ inherits: false;
+}
+@property --tw-backdrop-opacity {
+ syntax: "*";
+ inherits: false;
+}
+@property --tw-backdrop-saturate {
+ syntax: "*";
+ inherits: false;
+}
+@property --tw-backdrop-sepia {
+ syntax: "*";
+ inherits: false;
+}
@property --tw-duration {
syntax: "*";
inherits: false;
diff --git a/src/static/js/cursor.js b/src/static/js/cursor.js
new file mode 100644
index 0000000..f0d84e2
--- /dev/null
+++ b/src/static/js/cursor.js
@@ -0,0 +1,58 @@
+// Fields
+let prim = document.getElementById("cursor-prim");
+let seco = document.getElementById("cursor-sec");
+let scroll = 0;
+let sx,
+ px = (sx = window.innerWidth / 2);
+let sy,
+ py = (sy = window.innerHeight / 2);
+const base_speed = 128;
+
+// Event listeners
+// On mouse move
+window.addEventListener("mousemove", (e) => {
+ // Primary position
+ (px = e.clientX), (py = e.clientY);
+ prim.style.top = `${py}px`;
+ prim.style.left = `${px}px`;
+});
+window.addEventListener("scroll", (e) => {
+ scroll = window.scrollY;
+});
+
+// Secondary render loop
+let render = () => {
+ // Calculates delta value
+ if (!this.last) this.last = new Date().getTime();
+ let delta = (new Date().getTime() - this.last) / 16;
+ this.last = new Date().getTime();
+
+ console.log(scroll);
+
+ // Base speed, position difference,
+ // direction and distance
+ let dx = px - sx,
+ dy = py - sy;
+ let dir = Math.atan2(dy, dx);
+ let dis = Math.sqrt(dx * dx + dy * dy);
+
+ // Ease-out transition
+ let t = Math.min(dis / 500, 1);
+ let speed = base_speed * (t * t * (3.0 - 2.0 * t) * 0.94 + 0.06) * delta;
+
+ // Calculates new positions and dead zone
+ sx += Math.cos(dir) * speed;
+ sy += Math.sin(dir) * speed;
+ if (dis <= 4) {
+ sx = px;
+ sy = py;
+ }
+
+ // Sets position
+ seco.style.top = `${sy - 128 + scroll}px`;
+ seco.style.left = `${sx - 128}px`;
+
+ // Loops around
+ requestAnimationFrame(render);
+};
+render();
diff --git a/src/templates/Base.tsx b/src/templates/Base.tsx
index 1cea468..190d302 100644
--- a/src/templates/Base.tsx
+++ b/src/templates/Base.tsx
@@ -30,28 +30,72 @@ export default function Base({ children, isDev }: BaseProps) {
rel="stylesheet"
>
-
-
-
+
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
- {children}
+
+
+
+ {children}
+