diff --git a/index.html b/index.html index 9e5fc8f..6edacd5 100755 --- a/index.html +++ b/index.html @@ -4,9 +4,11 @@ - Vite App + Landing Tower + +
diff --git a/src/App.vue b/src/App.vue index 7905b05..f95781d 100755 --- a/src/App.vue +++ b/src/App.vue @@ -1,85 +1,22 @@ - - diff --git a/src/assets/base.css b/src/assets/base.css index 8816868..f4a2a5d 100755 --- a/src/assets/base.css +++ b/src/assets/base.css @@ -1,86 +1,11 @@ -/* color palette from */ -:root { - --vt-c-white: #ffffff; - --vt-c-white-soft: #f8f8f8; - --vt-c-white-mute: #f2f2f2; - - --vt-c-black: #181818; - --vt-c-black-soft: #222222; - --vt-c-black-mute: #282828; - - --vt-c-indigo: #2c3e50; - - --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); - --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); - --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); - --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); - - --vt-c-text-light-1: var(--vt-c-indigo); - --vt-c-text-light-2: rgba(60, 60, 60, 0.66); - --vt-c-text-dark-1: var(--vt-c-white); - --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); -} - -/* semantic color variables for this project */ -:root { - --color-background: var(--vt-c-white); - --color-background-soft: var(--vt-c-white-soft); - --color-background-mute: var(--vt-c-white-mute); - - --color-border: var(--vt-c-divider-light-2); - --color-border-hover: var(--vt-c-divider-light-1); - - --color-heading: var(--vt-c-text-light-1); - --color-text: var(--vt-c-text-light-1); - - --section-gap: 160px; -} - @media (prefers-color-scheme: dark) { :root { - --color-background: var(--vt-c-black); - --color-background-soft: var(--vt-c-black-soft); - --color-background-mute: var(--vt-c-black-mute); - - --color-border: var(--vt-c-divider-dark-2); - --color-border-hover: var(--vt-c-divider-dark-1); - - --color-heading: var(--vt-c-text-dark-1); - --color-text: var(--vt-c-text-dark-2); + --color-surface0: #1e1e2e; + --color-surface1: #313244; + --color-surface2: #45475a; + --color-text: #cdd6f4; + --color-accent: #a6e3a1; + --color-accent-hover: #89d58d; + --color-border: #585b70; } } - -*, -*::before, -*::after { - box-sizing: border-box; - margin: 0; - font-weight: normal; -} - -body { - min-height: 100vh; - color: var(--color-text); - background: var(--color-background); - transition: - color 0.5s, - background-color 0.5s; - line-height: 1.6; - font-family: - Inter, - -apple-system, - BlinkMacSystemFont, - 'Segoe UI', - Roboto, - Oxygen, - Ubuntu, - Cantarell, - 'Fira Sans', - 'Droid Sans', - 'Helvetica Neue', - sans-serif; - font-size: 15px; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} diff --git a/src/assets/main.css b/src/assets/main.css index 36fb845..8b384b4 100755 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -1,35 +1,215 @@ @import './base.css'; +/* General Body Styles */ +body { + background: var(--color-surface0); + color: var(--color-text); + font-family: Inter, sans-serif; + margin: 0; + padding: 0; +} + +/* App Container */ #app { - max-width: 1280px; + max-width: 1200px; margin: 0 auto; - padding: 2rem; - font-weight: normal; + padding: 1rem; } -a, -.green { +/* Links */ +a { text-decoration: none; - color: hsla(160, 100%, 37%, 1); - transition: 0.4s; - padding: 3px; + color: var(--color-accent); + transition: color 0.3s, background-color 0.3s; } -@media (hover: hover) { - a:hover { - background-color: hsla(160, 100%, 37%, 0.2); +a:hover { + color: var(--color-accent-hover); + background-color: var(--color-surface1); + border-radius: 4px; + text-decoration: underline overline; +} + +/* Header */ +header { + background: var(--color-surface1); + padding: 1rem; + border-bottom: 1px solid var(--color-border); +} + +header nav { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; +} + +header nav a { + padding: 0.5rem 1rem; + font-size: 1rem; + color: var(--color-accent); + transition: color 0.3s, background-color 0.3s; +} + +header nav a:hover { + color: var(--color-accent-hover); + background-color: var(--color-surface1); + border-radius: 4px; +} + +header nav a.router-link-exact-active { + color: var(--color-text); + font-weight: bold; +} + +/* Main Content */ +main { + margin-top: 2rem; +} + +/* Hero Section */ +.hero { + background: linear-gradient(135deg, #313244, #45475a); /* Catppuccin Mocha colors */ + color: #ffffff; + text-align: center; + padding: 1rem 0.5rem; /* Reduced padding for smaller height */ +} + +.hero h1 { + font-size: 2rem; /* Smaller font size for the heading */ + margin-bottom: 0.5rem; /* Reduced bottom margin */ +} + +.hero p { + font-size: 1.25rem; /* Smaller font size for the paragraph */ + margin: 0; /* No extra margin */ +} + +/* Sections */ +.sections { + padding: 1.5rem; +} + +.section-box { + margin-bottom: 2rem; /* Reduced bottom margin for sections */ + padding: 1rem; /* Reduced padding inside the section box */ + background-color: #313244; + border-radius: 8px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +.section-box h2 { + font-size: 1.5rem; /* Slightly smaller font size for headers */ + margin: 0.5rem 0 1rem; /* Reduced top margin and kept space below */ + color: #a6e3a1; +} + +.section-content { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 1.5rem; +} + +.card { + background-color: #45475a; + padding: 1.5rem; + border-radius: 8px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +.card h3 { + font-size: 1.5rem; + margin-bottom: 0.5rem; +} + +.card p { + font-size: 1rem; + margin-bottom: 1rem; +} + +.card ul { + list-style: none; + padding: 0; +} + +.card ul li { + margin-bottom: 0.5rem; +} + +.link { + color: #a6e3a1; + text-decoration: none; + padding: 0.5rem 1rem; + background-color: #313244; + border-radius: 6px; + transition: background-color 0.3s; +} + +.link:hover { + background-color: #89d58d; + color: #1e1e2e; +} + +/* Footer */ +.footer { + background-color: #1e1e2e; + text-align: center; + padding: 1rem; + color: #cdd6f4; +} + +.footer a { + color: #a6e3a1; + text-decoration: none; +} + +.footer a:hover { + color: #89d58d; +} + +/* Responsive Navbar */ +@media (max-width: 768px) { + header nav { + flex-direction: column; + text-align: center; + } + + header nav a { + padding: 0.5rem; + font-size: 1rem; } } -@media (min-width: 1024px) { - body { - display: flex; - place-items: center; - } - - #app { - display: grid; - grid-template-columns: 1fr 1fr; - padding: 0 2rem; - } +/* Player Icon */ +.players-icon { + color: #89b4fa; + margin-right: 0.5rem; +} + +/* Copy Icon */ +.copy-icon { + cursor: pointer; + color: #89b4fa; + margin-left: 0.5rem; + transition: color 0.2s; +} + +.copy-icon:hover { + color: #74a8e0; +} + +/* Status Icons */ +.online-icon { + color: #a6e3a1; + margin-right: 0.5rem; +} + +.offline-icon { + color: #f38ba8; + margin-right: 0.5rem; +} + +.unknown-icon { + color: #cba6f7; + margin-right: 0.5rem; } diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue deleted file mode 100755 index d174cf8..0000000 --- a/src/components/HelloWorld.vue +++ /dev/null @@ -1,41 +0,0 @@ - - - - - diff --git a/src/components/TheWelcome.vue b/src/components/TheWelcome.vue deleted file mode 100755 index 3d4eecd..0000000 --- a/src/components/TheWelcome.vue +++ /dev/null @@ -1,90 +0,0 @@ - - - diff --git a/src/components/WelcomeItem.vue b/src/components/WelcomeItem.vue deleted file mode 100755 index 6d7086a..0000000 --- a/src/components/WelcomeItem.vue +++ /dev/null @@ -1,87 +0,0 @@ - - - diff --git a/src/router/index.ts b/src/router/index.ts index 3e49915..fb8dbce 100755 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -9,13 +9,22 @@ const router = createRouter({ name: 'home', component: HomeView, }, + /* Rename name to the page name to add another page { - path: '/about', - name: 'about', - // route level code-splitting - // this generates a separate chunk (About.[hash].js) for this route - // which is lazy-loaded when the route is visited. - component: () => import('../views/AboutView.vue'), + path: '/name', + name: 'name', + component: () => import('../views/NameView.vue'), + }, + */ + { + path: '/servers', + name: 'servers', + component: () => import('../views/ServersView.vue'), + }, + { + path: '/projects', + name: 'projects', + component: () => import('../views/ProjectsView.vue'), }, ], }) diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue deleted file mode 100755 index 756ad2a..0000000 --- a/src/views/AboutView.vue +++ /dev/null @@ -1,15 +0,0 @@ - - - diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index d5c0217..ecdfd9e 100755 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -1,9 +1,84 @@ - - diff --git a/src/views/ProjectsView.vue b/src/views/ProjectsView.vue new file mode 100644 index 0000000..4eea71b --- /dev/null +++ b/src/views/ProjectsView.vue @@ -0,0 +1,317 @@ + + + + + diff --git a/src/views/ServersView.vue b/src/views/ServersView.vue new file mode 100644 index 0000000..64a6c0a --- /dev/null +++ b/src/views/ServersView.vue @@ -0,0 +1,289 @@ + + + + + diff --git a/vitest.config.ts.timestamp-1731731774511-56c1b00b4b5b7.mjs b/vitest.config.ts.timestamp-1731731774511-56c1b00b4b5b7.mjs new file mode 100644 index 0000000..722a5ac --- /dev/null +++ b/vitest.config.ts.timestamp-1731731774511-56c1b00b4b5b7.mjs @@ -0,0 +1,38 @@ +// vitest.config.ts +import { fileURLToPath as fileURLToPath2 } from "node:url"; +import { mergeConfig, defineConfig as defineConfig2, configDefaults } from "file:///D:/Projects/hub-site/node_modules/vitest/dist/config.js"; + +// vite.config.ts +import { fileURLToPath, URL as URL2 } from "node:url"; +import { defineConfig } from "file:///D:/Projects/hub-site/node_modules/vite/dist/node/index.js"; +import vue from "file:///D:/Projects/hub-site/node_modules/@vitejs/plugin-vue/dist/index.mjs"; +import vueDevTools from "file:///D:/Projects/hub-site/node_modules/vite-plugin-vue-devtools/dist/vite.mjs"; +var __vite_injected_original_import_meta_url = "file:///D:/Projects/hub-site/vite.config.ts"; +var vite_config_default = defineConfig({ + plugins: [ + vue(), + vueDevTools() + ], + resolve: { + alias: { + "@": fileURLToPath(new URL2("./src", __vite_injected_original_import_meta_url)) + } + } +}); + +// vitest.config.ts +var __vite_injected_original_import_meta_url2 = "file:///D:/Projects/hub-site/vitest.config.ts"; +var vitest_config_default = mergeConfig( + vite_config_default, + defineConfig2({ + test: { + environment: "jsdom", + exclude: [...configDefaults.exclude, "e2e/**"], + root: fileURLToPath2(new URL("./", __vite_injected_original_import_meta_url2)) + } + }) +); +export { + vitest_config_default as default +}; +//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZXN0LmNvbmZpZy50cyIsICJ2aXRlLmNvbmZpZy50cyJdLAogICJzb3VyY2VzQ29udGVudCI6IFsiY29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2Rpcm5hbWUgPSBcIkQ6XFxcXFByb2plY3RzXFxcXGh1Yi1zaXRlXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ZpbGVuYW1lID0gXCJEOlxcXFxQcm9qZWN0c1xcXFxodWItc2l0ZVxcXFx2aXRlc3QuY29uZmlnLnRzXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ltcG9ydF9tZXRhX3VybCA9IFwiZmlsZTovLy9EOi9Qcm9qZWN0cy9odWItc2l0ZS92aXRlc3QuY29uZmlnLnRzXCI7aW1wb3J0IHsgZmlsZVVSTFRvUGF0aCB9IGZyb20gJ25vZGU6dXJsJ1xyXG5pbXBvcnQgeyBtZXJnZUNvbmZpZywgZGVmaW5lQ29uZmlnLCBjb25maWdEZWZhdWx0cyB9IGZyb20gJ3ZpdGVzdC9jb25maWcnXHJcbmltcG9ydCB2aXRlQ29uZmlnIGZyb20gJy4vdml0ZS5jb25maWcnXHJcblxyXG5leHBvcnQgZGVmYXVsdCBtZXJnZUNvbmZpZyhcclxuICB2aXRlQ29uZmlnLFxyXG4gIGRlZmluZUNvbmZpZyh7XHJcbiAgICB0ZXN0OiB7XHJcbiAgICAgIGVudmlyb25tZW50OiAnanNkb20nLFxyXG4gICAgICBleGNsdWRlOiBbLi4uY29uZmlnRGVmYXVsdHMuZXhjbHVkZSwgJ2UyZS8qKiddLFxyXG4gICAgICByb290OiBmaWxlVVJMVG9QYXRoKG5ldyBVUkwoJy4vJywgaW1wb3J0Lm1ldGEudXJsKSksXHJcbiAgICB9LFxyXG4gIH0pLFxyXG4pXHJcbiIsICJjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZGlybmFtZSA9IFwiRDpcXFxcUHJvamVjdHNcXFxcaHViLXNpdGVcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcIkQ6XFxcXFByb2plY3RzXFxcXGh1Yi1zaXRlXFxcXHZpdGUuY29uZmlnLnRzXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ltcG9ydF9tZXRhX3VybCA9IFwiZmlsZTovLy9EOi9Qcm9qZWN0cy9odWItc2l0ZS92aXRlLmNvbmZpZy50c1wiO2ltcG9ydCB7IGZpbGVVUkxUb1BhdGgsIFVSTCB9IGZyb20gJ25vZGU6dXJsJ1xyXG5cclxuaW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZSdcclxuaW1wb3J0IHZ1ZSBmcm9tICdAdml0ZWpzL3BsdWdpbi12dWUnXHJcbmltcG9ydCB2dWVEZXZUb29scyBmcm9tICd2aXRlLXBsdWdpbi12dWUtZGV2dG9vbHMnXHJcblxyXG4vLyBodHRwczovL3ZpdGUuZGV2L2NvbmZpZy9cclxuZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29uZmlnKHtcclxuICBwbHVnaW5zOiBbXHJcbiAgICB2dWUoKSxcclxuICAgIHZ1ZURldlRvb2xzKCksXHJcbiAgXSxcclxuICByZXNvbHZlOiB7XHJcbiAgICBhbGlhczoge1xyXG4gICAgICAnQCc6IGZpbGVVUkxUb1BhdGgobmV3IFVSTCgnLi9zcmMnLCBpbXBvcnQubWV0YS51cmwpKVxyXG4gICAgfSxcclxuICB9LFxyXG59KVxyXG4iXSwKICAibWFwcGluZ3MiOiAiO0FBQXdQLFNBQVMsaUJBQUFBLHNCQUFxQjtBQUN0UixTQUFTLGFBQWEsZ0JBQUFDLGVBQWMsc0JBQXNCOzs7QUNEMEwsU0FBUyxlQUFlLE9BQUFDLFlBQVc7QUFFdlIsU0FBUyxvQkFBb0I7QUFDN0IsT0FBTyxTQUFTO0FBQ2hCLE9BQU8saUJBQWlCO0FBSjZILElBQU0sMkNBQTJDO0FBT3RNLElBQU8sc0JBQVEsYUFBYTtBQUFBLEVBQzFCLFNBQVM7QUFBQSxJQUNQLElBQUk7QUFBQSxJQUNKLFlBQVk7QUFBQSxFQUNkO0FBQUEsRUFDQSxTQUFTO0FBQUEsSUFDUCxPQUFPO0FBQUEsTUFDTCxLQUFLLGNBQWMsSUFBSUMsS0FBSSxTQUFTLHdDQUFlLENBQUM7QUFBQSxJQUN0RDtBQUFBLEVBQ0Y7QUFDRixDQUFDOzs7QURqQnNKLElBQU1DLDRDQUEyQztBQUl4TSxJQUFPLHdCQUFRO0FBQUEsRUFDYjtBQUFBLEVBQ0FDLGNBQWE7QUFBQSxJQUNYLE1BQU07QUFBQSxNQUNKLGFBQWE7QUFBQSxNQUNiLFNBQVMsQ0FBQyxHQUFHLGVBQWUsU0FBUyxRQUFRO0FBQUEsTUFDN0MsTUFBTUMsZUFBYyxJQUFJLElBQUksTUFBTUYseUNBQWUsQ0FBQztBQUFBLElBQ3BEO0FBQUEsRUFDRixDQUFDO0FBQ0g7IiwKICAibmFtZXMiOiBbImZpbGVVUkxUb1BhdGgiLCAiZGVmaW5lQ29uZmlnIiwgIlVSTCIsICJVUkwiLCAiX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ltcG9ydF9tZXRhX3VybCIsICJkZWZpbmVDb25maWciLCAiZmlsZVVSTFRvUGF0aCJdCn0K