diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index c04c8d0..2ab874c 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -6,6 +6,7 @@
"devsense.phptools-vscode",
"bmewburn.vscode-intelephense-client",
"github.copilot",
- "github.copilot-chat"
+ "github.copilot-chat",
+ "bradlc.vscode-tailwindcss"
]
}
\ No newline at end of file
diff --git a/README.md b/README.md
index 59eff3b..dd9801c 100644
--- a/README.md
+++ b/README.md
@@ -2,8 +2,8 @@
## Techstack
-- [HTMX](https://htmx.org/)
-- [Tailwind](https://tailwindcss.com/)
+- [HTMX](https://htmx.org/docs/)
+- [Tailwind](https://tailwindcss.com/docs/utility-first)
## Start Dev
diff --git a/web/css/output.css b/web/css/output.css
index 233a46c..4162ab9 100644
--- a/web/css/output.css
+++ b/web/css/output.css
@@ -634,6 +634,10 @@ video {
z-index: 50;
}
+.z-0 {
+ z-index: 0;
+}
+
.-m-1 {
margin: -0.25rem;
}
@@ -665,6 +669,11 @@ video {
margin-right: auto;
}
+.-mx-4 {
+ margin-left: -1rem;
+ margin-right: -1rem;
+}
+
.mb-2 {
margin-bottom: 0.5rem;
}
@@ -681,28 +690,28 @@ video {
margin-top: 1.5rem;
}
-.mb-1 {
- margin-bottom: 0.25rem;
+.-mb-10 {
+ margin-bottom: -2.5rem;
}
-.mb-3 {
- margin-bottom: 0.75rem;
+.-mt-4 {
+ margin-top: -1rem;
+}
+
+.mb-20 {
+ margin-bottom: 5rem;
+}
+
+.mb-4 {
+ margin-bottom: 1rem;
}
.ml-2 {
margin-left: 0.5rem;
}
-.ml-auto {
- margin-left: auto;
-}
-
-.mr-1 {
- margin-right: 0.25rem;
-}
-
-.mr-3 {
- margin-right: 0.75rem;
+.mt-3 {
+ margin-top: 0.75rem;
}
.block {
@@ -753,10 +762,6 @@ video {
height: 2rem;
}
-.h-full {
- height: 100%;
-}
-
.w-12 {
width: 3rem;
}
@@ -789,10 +794,18 @@ video {
max-width: 24rem;
}
+.flex-shrink-0 {
+ flex-shrink: 0;
+}
+
.shrink-0 {
flex-shrink: 0;
}
+.flex-grow {
+ flex-grow: 1;
+}
+
.-translate-x-1\/2 {
--tw-translate-x: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -854,21 +867,27 @@ video {
margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
+.space-y-6 > :not([hidden]) ~ :not([hidden]) {
+ --tw-space-y-reverse: 0;
+ margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
+ margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
+}
+
.divide-y > :not([hidden]) ~ :not([hidden]) {
--tw-divide-y-reverse: 0;
border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
-.divide-gray-500\/10 > :not([hidden]) ~ :not([hidden]) {
- border-color: rgb(107 114 128 / 0.1);
-}
-
.divide-gray-300 > :not([hidden]) ~ :not([hidden]) {
--tw-divide-opacity: 1;
border-color: rgb(209 213 219 / var(--tw-divide-opacity));
}
+.divide-gray-500\/10 > :not([hidden]) ~ :not([hidden]) {
+ border-color: rgb(107 114 128 / 0.1);
+}
+
.overflow-hidden {
overflow: hidden;
}
@@ -905,30 +924,18 @@ video {
border-width: 1px;
}
-.border-2 {
- border-width: 2px;
-}
-
-.border-r-2 {
- border-right-width: 2px;
-}
-
.border-b {
border-bottom-width: 1px;
}
-.border-gray-300 {
- --tw-border-opacity: 1;
- border-color: rgb(209 213 219 / var(--tw-border-opacity));
-}
-
.border-gray-200 {
--tw-border-opacity: 1;
border-color: rgb(229 231 235 / var(--tw-border-opacity));
}
-.border-opacity-60 {
- --tw-border-opacity: 0.6;
+.border-gray-300 {
+ --tw-border-opacity: 1;
+ border-color: rgb(209 213 219 / var(--tw-border-opacity));
}
.bg-gray-50 {
@@ -936,24 +943,34 @@ video {
background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
+.bg-indigo-200 {
+ --tw-bg-opacity: 1;
+ background-color: rgb(199 210 254 / var(--tw-bg-opacity));
+}
+
.bg-indigo-600 {
--tw-bg-opacity: 1;
background-color: rgb(79 70 229 / var(--tw-bg-opacity));
}
+.bg-red-200 {
+ --tw-bg-opacity: 1;
+ background-color: rgb(254 202 202 / var(--tw-bg-opacity));
+}
+
.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
-.bg-indigo-200 {
+.bg-indigo-100 {
--tw-bg-opacity: 1;
- background-color: rgb(199 210 254 / var(--tw-bg-opacity));
+ background-color: rgb(224 231 255 / var(--tw-bg-opacity));
}
-.bg-red-200 {
+.bg-sky-500 {
--tw-bg-opacity: 1;
- background-color: rgb(254 202 202 / var(--tw-bg-opacity));
+ background-color: rgb(14 165 233 / var(--tw-bg-opacity));
}
.bg-gradient-to-tr {
@@ -970,16 +987,6 @@ video {
--tw-gradient-to: #9089fc var(--tw-gradient-to-position);
}
-.object-cover {
- -o-object-fit: cover;
- object-fit: cover;
-}
-
-.object-center {
- -o-object-position: center;
- object-position: center;
-}
-
.p-1 {
padding: 0.25rem;
}
@@ -1004,6 +1011,14 @@ video {
padding: 1rem;
}
+.p-5 {
+ padding: 1.25rem;
+}
+
+.p-3 {
+ padding: 0.75rem;
+}
+
.px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
@@ -1014,6 +1029,11 @@ video {
padding-right: 0.875rem;
}
+.px-4 {
+ padding-left: 1rem;
+ padding-right: 1rem;
+}
+
.px-5 {
padding-left: 1.25rem;
padding-right: 1.25rem;
@@ -1039,6 +1059,11 @@ video {
padding-bottom: 0.625rem;
}
+.py-4 {
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+}
+
.py-6 {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
@@ -1049,22 +1074,17 @@ video {
padding-bottom: 2rem;
}
-.px-4 {
- padding-left: 1rem;
- padding-right: 1rem;
-}
-
-.py-4 {
- padding-top: 1rem;
- padding-bottom: 1rem;
+.py-24 {
+ padding-top: 6rem;
+ padding-bottom: 6rem;
}
.pt-14 {
padding-top: 3.5rem;
}
-.pr-3 {
- padding-right: 0.75rem;
+.pl-6 {
+ padding-left: 1.5rem;
}
.text-center {
@@ -1101,6 +1121,11 @@ video {
line-height: 1rem;
}
+.text-2xl {
+ font-size: 1.5rem;
+ line-height: 2rem;
+}
+
.font-bold {
font-weight: 700;
}
@@ -1133,10 +1158,6 @@ video {
line-height: 1.25;
}
-.leading-none {
- line-height: 1;
-}
-
.leading-relaxed {
line-height: 1.625;
}
@@ -1145,10 +1166,6 @@ video {
letter-spacing: -0.025em;
}
-.tracking-widest {
- letter-spacing: 0.1em;
-}
-
.text-black {
--tw-text-opacity: 1;
color: rgb(0 0 0 / var(--tw-text-opacity));
@@ -1179,6 +1196,11 @@ video {
color: rgb(79 70 229 / var(--tw-text-opacity));
}
+.text-red-400 {
+ --tw-text-opacity: 1;
+ color: rgb(248 113 113 / var(--tw-text-opacity));
+}
+
.text-slate-500 {
--tw-text-opacity: 1;
color: rgb(100 116 139 / var(--tw-text-opacity));
@@ -1189,21 +1211,11 @@ video {
color: rgb(255 255 255 / var(--tw-text-opacity));
}
-.text-gray-400 {
- --tw-text-opacity: 1;
- color: rgb(156 163 175 / var(--tw-text-opacity));
-}
-
.text-indigo-500 {
--tw-text-opacity: 1;
color: rgb(99 102 241 / var(--tw-text-opacity));
}
-.text-red-400 {
- --tw-text-opacity: 1;
- color: rgb(248 113 113 / var(--tw-text-opacity));
-}
-
.opacity-30 {
opacity: 0.3;
}
@@ -1267,6 +1279,11 @@ video {
background-color: rgb(99 102 241 / var(--tw-bg-opacity));
}
+.hover\:bg-sky-700:hover {
+ --tw-bg-opacity: 1;
+ background-color: rgb(3 105 161 / var(--tw-bg-opacity));
+}
+
.hover\:underline:hover {
text-decoration-line: underline;
}
@@ -1376,10 +1393,18 @@ video {
left: calc(50% - 30rem);
}
+ .sm\:-m-4 {
+ margin: -1rem;
+ }
+
.sm\:mb-8 {
margin-bottom: 2rem;
}
+ .sm\:block {
+ display: block;
+ }
+
.sm\:flex {
display: flex;
}
@@ -1414,6 +1439,11 @@ video {
line-height: 1.25rem;
}
+ .sm\:text-3xl {
+ font-size: 1.875rem;
+ line-height: 2.25rem;
+ }
+
.sm\:ring-1 {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -1430,18 +1460,6 @@ video {
margin-top: 0px;
}
- .md\:mb-2 {
- margin-bottom: 0.5rem;
- }
-
- .md\:ml-0 {
- margin-left: 0px;
- }
-
- .md\:h-36 {
- height: 9rem;
- }
-
.md\:w-1\/3 {
width: 33.333333%;
}
@@ -1452,6 +1470,12 @@ video {
margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
+ .md\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
+ --tw-space-y-reverse: 0;
+ margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
+ margin-bottom: calc(0px * var(--tw-space-y-reverse));
+ }
+
.md\:text-2xl {
font-size: 1.5rem;
line-height: 2rem;
@@ -1459,14 +1483,6 @@ video {
}
@media (min-width: 1024px) {
- .lg\:mb-0 {
- margin-bottom: 0px;
- }
-
- .lg\:ml-auto {
- margin-left: auto;
- }
-
.lg\:flex {
display: flex;
}
@@ -1475,10 +1491,6 @@ video {
display: none;
}
- .lg\:h-48 {
- height: 12rem;
- }
-
.lg\:flex-1 {
flex: 1 1 0%;
}
diff --git a/web/inc/classes/Page.class.php b/web/inc/classes/Page.class.php
index b8f66db..2307823 100644
--- a/web/inc/classes/Page.class.php
+++ b/web/inc/classes/Page.class.php
@@ -110,6 +110,7 @@ class Page
//render template by running include
ob_start();
+ extract($this->variables);
include($templatefile);
$pagecontent = ob_get_contents();
ob_end_clean();
diff --git a/web/pages/auth/controller.php b/web/pages/auth/controller.php
deleted file mode 100644
index 31fa9f5..0000000
--- a/web/pages/auth/controller.php
+++ /dev/null
@@ -1,15 +0,0 @@
-set('template', 'features.html');
+ }
+
+}
\ No newline at end of file
diff --git a/web/pages/features/features.html b/web/pages/features/features.html
new file mode 100644
index 0000000..df491ed
--- /dev/null
+++ b/web/pages/features/features.html
@@ -0,0 +1,62 @@
+
+ Blue bottle crucifix vinyl post-ironic four dollar toast vegan taxidermy. Gastropub indxgo juice poutine, ramps microdosing banh mi pug VHS try-hard ugh iceland kickstarter tumblr live-edge tilde. Blue bottle crucifix vinyl post-ironic four dollar toast vegan taxidermy. Gastropub indxgo juice poutine, ramps microdosing banh mi pug VHS try-hard ugh iceland kickstarter tumblr live-edge tilde. Blue bottle crucifix vinyl post-ironic four dollar toast vegan taxidermy. Gastropub indxgo juice poutine, ramps microdosing banh mi pug VHS try-hard ugh iceland kickstarter tumblr live-edge tilde.Raw Denim Heirloom Man Braid
+
+
Selfies Wayfarers
+ Shooting Stars
+ The Catalyzer
+ Neptune
+