Merge pull request #41 from samuel-skean/main

Centered QR codes, dev weirdness.

Author: samuel-skean

flake.nix

@@ -2,7 +2,7 @@
   description = "ACMClock Packaging and Deployment";
 
   inputs = {
-    nixpkgs.url = "github:nixos/nixpkgs/nixos-24.11";
+    nixpkgs.url = "github:nixos/nixpkgs/nixos-25.05";
     agenix.url = "github:ryantm/agenix";
   };
 

frontend/main.css

@@ -110,7 +110,7 @@ ul {
 
 /* Hide scrollbar */
 body::-webkit-scrollbar {
-  width: 0 !important;
+  width: 0;
 }
 body {
   overflow: -moz-scrollbars-none;
@@ -135,9 +135,11 @@ body {
   max-height: 100%;
   border: 1px solid #000000;
   display: grid;
-  grid-template-areas: "time time time weather weather" "date date date date date" "acm-discord-qr-code-label acm-discord-qr-code lug-discord-qr-code-label lug-discord-qr-code messages" "switcher switcher switcher switcher switcher" "footer footer footer footer footer";
+  grid-template-areas: "time time time weather weather" "date date date date date" "qr-code-area qr-code-area qr-code-area qr-code-area qr-code-area" "switcher switcher switcher switcher switcher" "footer footer footer footer footer";
   grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
   grid-template-rows: 0.6fr 0.2fr 0.9fr 4fr 0.18fr;
+  padding: 25px;
+
   #time {
     grid-area: time;
   }
@@ -151,25 +153,31 @@ body {
     grid-area: switcher;
     overflow: hidden;
   }
-  #acm-discord-qr-code-label {
-    grid-area: acm-discord-qr-code-label;
-    place-self: center;
-    line-height: inherit;
-    text-align: center;
-  }
-  #acm-discord-qr-code {
-    grid-area: acm-discord-qr-code;
-    place-self: center;
-  }
-  #lug-discord-qr-code-label {
-    grid-area: lug-discord-qr-code-label;
-    place-self: center;
-    line-height: inherit;
-    text-align: center;
-  }
-  #lug-discord-qr-code {
-    grid-area: lug-discord-qr-code;
-    place-self: center;
+  #qr-code-area {
+    grid-area: "qr-code-area";
+    /* TODO: Fix this ugliness. */
+    width: calc(1080px - 25px - 25px);
+
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+
+    #acm-discord-qr-code-label {
+      place-self: center;
+      line-height: inherit;
+      text-align: center;
+    }
+    #acm-discord-qr-code {
+      place-self: center;
+    }
+    #lug-discord-qr-code-label {
+      place-self: center;
+      line-height: inherit;
+      text-align: center;
+    }
+    #lug-discord-qr-code {
+      place-self: center;
+    }
   }
   #footer {
     grid-area: footer;
@@ -178,7 +186,7 @@ body {
 
 /* Switcher */
 #switcher {
-  margin: 0px 0px 100px 0px;
+  margin-bottom: 100px;
   position: relative;
   & > div {
     width: 100%;
@@ -188,10 +196,6 @@ body {
   }
 }
 
-.wrapper {
-  padding: 25px;
-}
-
 #time {
   font-size: 4.5em;
 }
@@ -326,10 +330,6 @@ img.qrCode {
   height: 200px;
 }
 
-#app-repo-qr-code {
-  display: none;
-}
-
 #footer {
   text-align: center;
   font-size: 0.5em;

nix/package.nix

@@ -10,5 +10,5 @@ buildNpmPackage rec {
 
   src = ../.;
 
-  npmDepsHash = "sha256-/N4Y0hYUtAyp2k9CpVkHZ5lf9bQNflvBZa4KMI5Phig=";
+  npmDepsHash = "sha256-VwVlYZej0ks4y62s98cKAtinTIf/jFr2Fm0oFB+B8Gc=";
 }