diff --git a/Dockerfile b/Dockerfile
index 1066bb8..7b1b124 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -19,5 +19,7 @@ RUN bun panda codegen
RUN bun run build
FROM httpd:2.4 AS runtime
+
COPY --from=prerelease /usr/src/app/dist/ /usr/local/apache2/htdocs/
+
EXPOSE 80
diff --git a/panda.config.ts b/panda.config.ts
index e61aa8a..f7d2d02 100644
--- a/panda.config.ts
+++ b/panda.config.ts
@@ -15,11 +15,12 @@ const globalCss = defineGlobalStyles({
fontFamily: "Inter",
},
main: {
- width: { base: "70%", xlDown: "80%" },
- margin: "50px auto",
- padding: "50px",
+ maxWidth: "fit-content",
+ position: "relative",
+ margin: { base: "2em 15% 0 15%", mdDown: "0" },
+ padding: { base: "50px", mdDown: "20px" },
backgroundColor: "secondary",
- borderRadius: "50px",
+ borderRadius: { base: "50px", mdDown: "0px" },
boxShadow: "0 0 10px rgba(0, 0, 0, 0.2)",
},
h1: {
@@ -35,6 +36,7 @@ const globalCss = defineGlobalStyles({
export default defineConfig({
jsxFramework: "solid",
+ presets: [],
preflight: true,
include: ["./src/**/*.{ts,tsx,js,jsx,astro}"],
outdir: "styled-system",
diff --git a/public/404/404.css b/public/404/404.css
new file mode 100644
index 0000000..961c8b1
--- /dev/null
+++ b/public/404/404.css
@@ -0,0 +1,160 @@
+@import url("https://fonts.googleapis.com/css?family=Dosis:300,400,700,800");
+
+/** Styles for the 403 Page **/
+
+.particle-error,
+.permission_denied,
+#tsparticles {
+ width: 100%;
+ height: 100%;
+ margin: 0px !important;
+}
+
+#tsparticles {
+ position: fixed !important;
+ opacity: 0.23;
+}
+
+.permission_denied {
+ background: #24344c !important;
+}
+
+.permission_denied a {
+ text-decoration: none;
+}
+
+.denied__wrapper {
+ max-width: 390px;
+ width: 100%;
+ height: 390px;
+ display: block;
+ margin: 0 auto;
+ position: relative;
+ margin-top: 8vh;
+}
+
+.permission_denied h1 {
+ text-align: center;
+ color: #fff;
+ font-family: "Dosis", sans-serif;
+ font-size: 100px;
+ margin-bottom: 0px;
+ font-weight: 800;
+}
+
+.permission_denied h3 {
+ text-align: center;
+ color: #fff;
+ font-size: 19px;
+ line-height: 23px;
+ max-width: 330px;
+ margin: 0px auto 30px auto;
+ font-family: "Dosis", sans-serif;
+ font-weight: 400;
+}
+
+.permission_denied h3 span {
+ position: relative;
+ width: 65px;
+ display: inline-block;
+}
+
+.permission_denied h3 span:after {
+ content: "";
+ border-bottom: 3px solid #ffbb39;
+ position: absolute;
+ left: 0;
+ top: 43%;
+ width: 100%;
+}
+
+.denied__link {
+ background: none;
+ color: #fff;
+ padding: 12px 0px 10px 0px;
+ border: 1px solid #fff;
+ outline: none;
+ border-radius: 7px;
+ width: 150px;
+ font-size: 15px;
+ text-align: center;
+ margin: 0 auto;
+ vertical-align: middle;
+ display: block;
+ margin-bottom: 40px;
+ margin-top: 25px;
+ font-family: "Dosis", sans-serif;
+ font-weight: 400;
+}
+
+.denied__link:hover {
+ color: #ffbb39;
+ border-color: #ffbb39;
+ cursor: pointer;
+ opacity: 1;
+}
+
+.permission_denied .stars {
+ animation: sparkle 1.6s infinite ease-in-out alternate;
+}
+
+@keyframes sparkle {
+ 0% {
+ opacity: 1;
+ }
+ 100% {
+ opacity: 0.3;
+ }
+}
+
+#astronaut {
+ width: 43px;
+ position: absolute;
+ right: 20px;
+ top: 210px;
+ animation: spin 4.5s infinite linear;
+}
+
+@keyframes spin {
+ 0% {
+ transform: rotateZ(0deg);
+ }
+ 100% {
+ transform: rotateZ(360deg);
+ }
+}
+
+@media (max-width: 600px) {
+ .permission_denied h1 {
+ font-size: 75px;
+ }
+ .permission_denied h3 {
+ font-size: 16px;
+ width: 200px;
+ margin: 0 auto;
+ line-height: 23px;
+ }
+ .permission_denied h3 span {
+ width: 60px;
+ }
+ #astronaut {
+ width: 35px;
+ right: 40px;
+ top: 170px;
+ }
+}
+
+.saturn,
+.saturn-2,
+.hover {
+ animation: hover 2s infinite ease-in-out alternate;
+}
+
+@keyframes hover {
+ 0% {
+ transform: translateY(3px);
+ }
+ 100% {
+ transform: translateY(-3px);
+ }
+}
diff --git a/public/404/404.js b/public/404/404.js
new file mode 100644
index 0000000..6d333f8
--- /dev/null
+++ b/public/404/404.js
@@ -0,0 +1,57 @@
+const particles = {
+ fpsLimit: 60,
+ particles: {
+ number: {
+ value: 160,
+ density: {
+ enable: true,
+ area: 800,
+ },
+ },
+ color: {
+ value: "#ffffff",
+ },
+ shape: {
+ type: "circle",
+ },
+ opacity: {
+ value: 1,
+ random: {
+ enable: true,
+ minimumValue: 0.1,
+ },
+ animation: {
+ enable: true,
+ speed: 1,
+ minimumValue: 0,
+ sync: false,
+ },
+ },
+ size: {
+ value: 3,
+ random: {
+ enable: true,
+ minimumValue: 1,
+ },
+ },
+ move: {
+ enable: true,
+ speed: 0.17,
+ direction: "none",
+ random: true,
+ straight: false,
+ outModes: {
+ default: "out",
+ },
+ },
+ },
+ interactivity: {
+ detectsOn: "canvas",
+ events: {
+ resize: false,
+ },
+ },
+ detectRetina: true,
+};
+
+tsParticles.load("tsparticles", particles);
diff --git a/public/404/images/astronaut.svg b/public/404/images/astronaut.svg
new file mode 100644
index 0000000..b66b809
--- /dev/null
+++ b/public/404/images/astronaut.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/404/images/planet.svg b/public/404/images/planet.svg
new file mode 100644
index 0000000..0a326b0
--- /dev/null
+++ b/public/404/images/planet.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/components/ThemeButton/style.css.ts b/src/components/ThemeButton/style.css.ts
index 8745ee6..5ad9b7d 100644
--- a/src/components/ThemeButton/style.css.ts
+++ b/src/components/ThemeButton/style.css.ts
@@ -13,6 +13,7 @@ export const wrapperStyle = css({
export const inputStyle = css({
appearance: "none",
+ WebkitAppearance: "none",
width: { base: "100px", mdDown: "56px" },
height: "50px",
backgroundColor: "secondary",
@@ -26,7 +27,7 @@ export const inputStyle = css({
_before: {
content: '""',
position: "absolute",
- width: { base: "50px", mdDown: "28" },
+ width: "50px",
height: "50px",
left: 0,
top: "50%",
diff --git a/src/layouts/404-layout.astro b/src/layouts/404-layout.astro
new file mode 100644
index 0000000..df07532
--- /dev/null
+++ b/src/layouts/404-layout.astro
@@ -0,0 +1,39 @@
+---
+interface Props {
+ title: string;
+}
+
+const { title } = Astro.props;
+---
+
+
+
+
+
+
+
+
+
+ {title}
+
+
+
+
+
+
404
+
+ LOST IN SPACE App-Name? Hmm, looks like that page doesn't
+ exist.
+
+
+
+
+