coded a fresh new look

Infinite-Chess · pihedron · Jul 29, 2024 · Jul 29, 2024 · Jul 29, 2024 · Jul 30, 2024
commit 7f643d0525aff6e182932c0fbb07e9dc37546ef5
diff --git a/.idx/dev.nix b/.idx/dev.nix
@@ -0,0 +1,52 @@
+# To learn more about how to use Nix to configure your environment
+# see: https://developers.google.com/idx/guides/customize-idx-env
+{ pkgs, ... }: {
+  # Which nixpkgs channel to use.
+  channel = "stable-23.11"; # or "unstable"
+
+  # Use https://search.nixos.org/packages to find packages
+  packages = [
+    pkgs.nodejs_20
+    pkgs.nodePackages.nodemon
+  ];
+
+  # Sets environment variables in the workspace
+  env = {};
+  idx = {
+    # Search for the extensions you want on https://open-vsx.org/ and use "publisher.id"
+    extensions = [
+      # "vscodevim.vim"
+    ];
+
+    # Enable previews
+    previews = {
+      enable = true;
+      previews = {
+        # web = {
+        #   # Example: run "npm run dev" with PORT set to IDX's defined port for previews,
+        #   # and show it in IDX's web preview panel
+        #   command = ["npm" "run" "dev"];
+        #   manager = "web";
+        #   env = {
+        #     # Environment variables to set for your server
+        #     PORT = "$PORT";
+        #   };
+        # };
+      };
+    };
+
+    # Workspace lifecycle hooks
+    workspace = {
+      # Runs when a workspace is first created
+      onCreate = {
+        # Example: install JS dependencies from NPM
+        # npm-install = "npm install";
+      };
+      # Runs when the workspace is (re)started
+      onStart = {
+        # Example: start a background task to watch and re-build backend code
+        # watch-backend = "npm run watch-backend";
+      };
+    };
+  };
+}
diff --git a/dev-utils/SKELETON.html b/dev-utils/SKELETON.html
@@ -9,24 +9,7 @@
         <link rel="icon" type="image/png" href="/img/favicon.png">
     </head>
     <body>
-        <header>
-            <a href="/">
-                <p class="currPage">Home</p>
-            </a>
-            <a href="/play">
-                <p>Play</p>
-            </a>
-            <a href="/news">
-                <p>News</p>
-            </a>
-            <a href="/login" id="loginlink">
-                <p id="logintext">Log In</p>
-            </a>
-            <a href="/createaccount" id="createaccountlink">
-                <p id="createaccounttext">Create Account</p>
-            </a>
-            <script src="/scripts/memberHeader.js"></script>
-        </header>
+        <%- include(`${viewsfolder}/components/header`, {t:t, languages:languages, language:language}) %>
         <main>
             <div id="content">
                 <h1 class="center">Skeleton</h1>

diff --git a/src/client/css/_.css b/src/client/css/_.css
@@ -0,0 +1,183 @@
+:root {
+    --accent: rgb(0, 128, 255);
+    --accent-transparent: rgba(0, 128, 255, 0.125);
+    --nav-bar-height: 64px;
+    --vw-capped: clamp(0px, 100vw, 1086px);
+    --vh-sub-nav: calc(100vh - var(--nav-bar-height));
+    --vwh: min(var(--vh-sub-nav), var(--vw-capped));
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    font-family: 'JetBrains Mono';
+    border: 0;
+    /* Enable temporarily during dev to see the borders of all elements */
+    /* outline: 1px solid rgba(0, 0, 0, 0.191); */
+}
+
+html {
+    height: 100%;
+}
+
+a {
+    color: black;
+    text-decoration: none;
+}
+
+header {
+    position: fixed;
+    left: 0;
+    top: 0;
+    right: 0;
+    width: 100%;
+    z-index: 1;
+    background-color: white;
+}
+
+.navbar {
+    display: flex;
+    justify-content: space-between;
+    height: var(--nav-bar-height);
+    font-size: 0;
+    white-space: nowrap;
+    text-align: center;
+    width: 1024px;
+    margin: auto;
+}
+
+nav {
+    display: flex;
+    justify-content: end;
+    align-items: center;
+    width: 512px;
+}
+
+nav a {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-decoration: none;
+    line-height: 40px;
+    width: 128px;
+    height: 100%;
+    font-size: 16px;
+    color: black;
+    transition: all 250ms;
+}
+
+nav a:hover {
+    background-color: var(--accent-transparent);
+}
+
+.logo {
+    position: relative;
+    display: flex;
+    justify-content: start;
+    align-items: center;
+    height: 100%;
+}
+
+.logo .icon {
+    transform-origin: 0 100%;
+    transition: all 250ms;
+}
+
+.logo:hover .icon {
+    transform: rotateZ(-15deg);
+}
+
+.logo-text {
+    margin-left: 16px;
+    position: relative;
+    display: flex;
+    font-size: 32px;
+}
+
+main {
+    background-image: url('/img/blank_board.png');
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+    background-attachment: fixed;
+    margin-top: var(--nav-bar-height);
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+
+#content {
+    background-color: rgba(255, 255, 255, 0.25);
+    min-height: 100%;
+    margin: 16px auto;
+    box-shadow: 0 0 16px rgba(0, 0, 0, 0.5);
+    padding: 30px 20px;
+    backdrop-filter: blur(2px);
+    border-radius: 8px;
+}
+
+#content h1 {
+    font-size: 48px;
+}
+
+a.active {
+    background-color: #00000020;
+}
+
+.center {
+    text-align: center;
+}
+
+p a {
+    color: var(--accent);
+    text-decoration: none;
+}
+
+a {
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.099);
+}
+
+.grey {
+    color:rgba(0, 0, 0, 0.345)
+}
+
+.bold {
+    font-weight: bold;
+}
+
+button {
+    width: 128px;
+    height: 40px;
+    background-color: black;
+    color: white;
+    border-radius: 4px;
+    transition: all 250ms;
+    cursor: pointer;
+}
+
+button:hover {
+    background-color: #222;
+}
+
+/* Start increasing header links width */
+@media only screen and (min-width: 450px) {
+    header {
+        overflow: unset;
+    }
+}
+
+/* Cap content width size, revealing image on the sides */
+@media only screen and (min-width: 810px) {
+    #content {
+        max-width: calc(810px - 60px); /* 60px less than 810 to account for padding */
+        padding: 40px 30px;
+        min-height: 800px;
+    }
+
+    #content h1 {
+        font-size: 48px;
+        margin-bottom: 1em;
+    }
+}