Skip to content

topic nav #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
cameroncuster merged 7 commits into from
Mar 24, 2025
Merged

topic nav #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
6739a52
topic nav
cameroncuster Mar 10, 2025
d3aa317
attempt
cameroncuster Mar 10, 2025
028758f
remove the footer & add the logo & hamburger margin
cameroncuster Mar 23, 2025
9eec7d3
fix the tooltip from getting cut off
cameroncuster Mar 24, 2025
1d76241
loading spinner
cameroncuster Mar 24, 2025
3a7a65e
bs styles changes from the LLM
cameroncuster Mar 24, 2025
29aad13
way better
cameroncuster Mar 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 56 additions & 0 deletions src/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -228,3 +228,59 @@ img {
font-size: 3rem;
}
}

/* Layout utilities for problem table and sidebar */
@media (min-width: 768px) {
/* Desktop layout */
.problem-table-container {
margin: 0 auto;
width: 100%;
}
}

@media (max-width: 767px) {
/* Mobile layout */
.sidebar {
position: fixed;
z-index: 40;
}
}

/* Consistent container width */
.max-w-\[1200px\] {
max-width: 1200px;
width: 100%;
margin-left: auto;
margin-right: auto;
padding: 0;
}

/* Ensure table is properly centered */
.problem-table-container {
width: 100%;
margin: 0 auto;
}

/* Prevent sidebar and table overlap */
@media (min-width: 768px) {
.md\:ml-32 {
margin-left: 8rem;
}

.md\:mr-32 {
margin-right: 8rem;
}
}

/* Ensure proper table scrolling behavior */
.table-wrapper {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}

/* Table layout */
.table {
width: 100%;
margin: 0 auto;
}
22 changes: 16 additions & 6 deletions src/lib/components/Footer.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
<script>
// Footer component
// Footer component
</script>

<footer
class="bg-[var(--color-secondary)] py-6 mt-auto border-t border-[color-mix(in_oklab,black_10%,transparent)]"
class="relative z-20 mt-auto border-t border-[color-mix(in_oklab,black_10%,transparent)] bg-[var(--color-secondary)] py-6"
>
<div class="max-w-7xl mx-auto px-6 md:px-4 sm:px-3">
<div class="flex justify-between items-center">
<div class="text-[var(--color-text)] text-sm">
<div class="mx-auto max-w-7xl px-6 sm:px-3 md:px-4">
<div class="flex items-center justify-between">
<div class="text-sm text-[var(--color-text)]">
© {new Date().getFullYear()} AlgoHub
</div>
<div class="flex gap-6">
Expand All @@ -16,7 +16,7 @@
target="_blank"
rel="noopener noreferrer"
aria-label="GitHub Repository"
class="flex items-center gap-2 text-[var(--color-text)] no-underline text-sm transition-colors duration-200 hover:text-[var(--color-accent)]"
class="flex items-center gap-2 text-sm text-[var(--color-text)] no-underline transition-colors duration-200 hover:text-[var(--color-accent)]"
>
<svg
xmlns="http://www.w3.org/2000/svg"
Expand All @@ -39,3 +39,13 @@
</div>
</div>
</footer>

<style>
/* Ensure footer is positioned correctly */
footer {
position: relative;
left: 0;
right: 0;
width: 100%;
}
</style>
16 changes: 11 additions & 5 deletions src/lib/components/Header.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,8 +71,8 @@ $: if ($page) {
}
</script>

<header class="sticky top-0 z-50 bg-[var(--color-secondary)] py-3 shadow-sm">
<div class="mx-auto flex max-w-7xl items-center justify-between px-3 sm:px-4 md:px-6">
<header class="sticky top-0 z-50 w-full bg-[var(--color-secondary)] py-3 shadow-sm">
<div class="mx-auto flex max-w-[1200px] items-center justify-between px-3 sm:px-4 md:px-5">
<div class="flex items-center">
<a
href="/"
Expand Down Expand Up @@ -149,7 +149,7 @@ $: if ($page) {
{/if}
</ul>
<div
class="flex min-w-[70px] items-center justify-end opacity-100 transition-opacity duration-200 {authLoading
class="mr-4 flex min-w-[70px] items-center justify-end opacity-100 transition-opacity duration-200 sm:mr-2 md:mr-0 {authLoading
? 'invisible opacity-0'
: ''}"
>
Expand All @@ -176,7 +176,7 @@ $: if ($page) {
<!-- Mobile menu -->
{#if mobileMenuOpen}
<div
class="mt-3 border-t border-[var(--color-border)] bg-[var(--color-secondary)] px-3 py-4 shadow-md md:hidden"
class="mt-3 border-t border-[var(--color-border)] bg-[var(--color-secondary)] px-4 py-4 shadow-md md:hidden"
>
<nav class="flex flex-col gap-4">
<ul class="m-0 flex list-none flex-col gap-4 p-0">
Expand Down Expand Up @@ -205,7 +205,7 @@ $: if ($page) {
{/if}
</ul>
<div
class="mt-2 flex items-center justify-start {authLoading ? 'invisible opacity-0' : ''}"
class="mt-2 flex items-center justify-start px-1 {authLoading ? 'invisible opacity-0' : ''}"
>
{#if $user}
<button
Expand Down Expand Up @@ -245,4 +245,10 @@ $: if ($page) {
div.md\:hidden {
animation: slideDown 0.2s ease-out;
}

/* Ensure header is at the top */
header {
left: 0;
right: 0;
}
</style>
Loading