Hackathons/HushMap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

buttons

Browse Source
This commit is contained in:
sameeranageshwar
2026-04-11 23:46:06 -04:00
parent 2d379bece7
commit 8c05c241fe
4 changed files with 43 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/routes/+layout.svelte
+2 -2
View File
@@ -11,10 +11,10 @@
<svelte:head><link rel="icon" href={favicon} /></svelte:head>
<div class="h-screen w-full overflow-hidden bg-black text-slate-200 flex flex-col md:flex-row relative">
<div class="h-screen w-full overflow-hidden bg-base text-slate-200 relative">
<!-- Floating Sidebar (Desktop) / Bottom Bar (Mobile) -->
<nav class="absolute md:static bottom-4 left-1/2 md:left-4 -translate-x-1/2 md:translate-x-0 md:my-auto z-50 rounded-3xl glass-panel md:w-16 w-11/12 md:h-auto py-3 md:py-6 px-4 md:px-0 flex md:flex-col items-center justify-around md:justify-center gap-6 shadow-2xl border-white/10 md:mr-4 overflow-hidden relative">
<nav class="absolute bottom-4 md:bottom-auto md:top-1/2 left-1/2 md:left-6 -translate-x-1/2 md:translate-x-0 md:-translate-y-1/2 z-50 rounded-3xl glass-panel md:w-16 w-11/12 md:h-auto py-3 md:py-6 px-4 md:px-0 flex md:flex-col items-center justify-around md:justify-center gap-6 overflow-hidden" style="box-shadow: var(--shadow-glow-primary); border-left: 2px solid var(--color-neon-primary);">
<!-- Shell Pattern Background -->
<div class="absolute inset-0 pointer-events-none opacity-[0.08] z-0" style="background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2228%22 height=%2249%22 viewBox=%220 0 28 49%22%3E%3Cg fill-rule=%22evenodd%22%3E%3Cg id=%22hexagons%22 fill=%22%23ffffff%22 fill-opacity=%221%22 fill-rule=%22nonzero%22%3E%3Cpath d=%22M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E'); background-repeat: repeat;"></div>
website/src/routes/layout.css
+26 -21
View File
@@ -1,4 +1,5 @@
@import 'tailwindcss';
@theme {
--font-sans: 'Comic Relief', 'Comic Neue', 'Comic Sans MS', cursive, system-ui, sans-serif;
--font-display: 'Comic Relief', 'Comic Neue', 'Comic Sans MS', cursive, system-ui, sans-serif;
@@ -15,7 +16,7 @@
--color-neon-primary: #f38ba8;
--color-neon-alert: #f38ba8;
--color-neon-blue: #f38ba8;
--color-panel-glass: rgba(24, 24, 37, 0.7);
--color-panel-glass: rgba(24, 24, 37, 0.7);
--shadow-glow-primary: 0 0 15px rgba(243, 139, 168, 0.4);
@@ -24,52 +25,56 @@
}
.light-theme {
--color-crust: #dce0e8;
--color-crust: #dce0e8;
--color-mantle: #e6e9ef;
--color-base: #eff1f5;
--color-surface0: #ccd0da;
--color-surface0: #ccd0da;
--color-surface1: #bcc0cc;
--color-surface2: #acb0be;
--color-red: #d20f39;
--color-neon-primary: #ea76cb;
--color-neon-alert: #e64553;
--color-neon-blue: #fe640b;
--color-panel-glass: rgba(239, 241, 245, 0.9);
--color-red: #d20f39;
--color-neon-primary: #ea76cb;
--color-neon-alert: #e64553;
--color-neon-blue: #fe640b;
--color-panel-glass: rgba(239, 241, 245, 0.9);
color: #4c4f69 !important;
}
.light-theme .text-white, .light-theme .text-slate-200, .light-theme .text-slate-300, .light-theme .text-slate-400, .light-theme .text-slate-500 {
color: #4c4f69 !important;
.light-theme .text-white,
.light-theme .text-slate-200,
.light-theme .text-slate-300,
.light-theme .text-slate-400,
.light-theme .text-slate-500 {
color: #4c4f69 !important;
}
:root.color-blind {
--color-neon-primary: #ffb86c;
--color-neon-blue: #8be9fd;
--color-neon-primary: #ffb86c;
--color-neon-blue: #8be9fd;
}
:root.high-contrast {
--color-crust: #000000;
--color-mantle: #0a0a0a;
--color-base: #111111;
--color-crust: #000000;
--color-mantle: #0a0a0a;
--color-base: #111111;
}
:root.light-theme.high-contrast {
--color-crust: #ffffff;
--color-mantle: #f4f4f4;
--color-base: #ebebeb;
--color-crust: #ffffff;
--color-mantle: #f4f4f4;
--color-base: #ebebeb;
}
.light-theme border-white {
border-color: rgba(76, 79, 105, 0.1);
border-color: rgba(76, 79, 105, 0.1);
}
.light-theme .border-white\/5,
.light-theme .border-white\/10,
.light-theme .border-white\/20 {
border-color: rgba(76, 79, 105, 0.15);
border-color: rgba(76, 79, 105, 0.15);
}
@utility glass-panel {
@@ -81,4 +86,4 @@
@utility text-glow {
text-shadow: 0 0 10px currentColor;
}
}