Skip to content

Commit 1236136

Browse files
thorresterthorrester
committed
styling for mobile and desktop
1 parent 4211f92 commit 1236136

File tree

3 files changed

+46
-36
lines changed

3 files changed

+46
-36
lines changed

‎src/lib/components/nav/Navbar.svelte‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -17,28 +17,32 @@
1717
1818
</script>
1919

20-
<nav class="fixed left-0 top-0 z-20 mx-auto flex h-[75px] w-full items-center border-b-4 border-border bg-primary-700 border-b-2 border-black px-2 m500:h-16">
20+
<nav class="fixed left-0 top-0 z-20 mx-auto flex h-[60px] md:h-[75px] w-full items-center border-b-4 border-border bg-primary-700 border-b-2 border-black px-2 m500:h-16">
2121
<div class="mx-auto flex w-full items-center justify-between px-4 md:px-20">
2222

2323

24-
<div class="flex items-center justify-start gap-10">
24+
<div class="flex items-center justify-start">
2525
<a href="/" class="items-center">
26-
<div class="h-8 sm:h-12">
26+
<div class="h-6 md:h-12">
2727
<img
2828
src={logo}
29-
class="h-8 sm:h-12 object-contain"
30-
alt="Opsml Logo"
29+
class="h-6 md:h-12 object-contain"
30+
alt="DemmlDocs Logo"
3131
/>
3232
</div>
3333
</a>
3434
</div>
3535

3636

3737
<div class="flex items-center gap-5 m1000:gap-5">
38-
<div class="flex items-center justify-end gap-5 m800:w-[unset] m400:gap-3">
39-
<a aria-label="Close" href="https://github.com/demml" class="m800:hidden flex gap-2 items-center justify-center rounded-base border-2 border-black shadow p-2 shadow-hover bg-surface-50">
40-
<Github color="#5948a3"/>
41-
</a>
38+
<div class="flex items-center justify-end gap-5 m800:w-[unset] m400:gap-2">
39+
<a
40+
aria-label="Close"
41+
href="https://github.com/demml"
42+
class="m800:hidden flex gap-2 m400:gap-1 items-center justify-center rounded-base border-2 border-black shadow p-2 m400:p-1 shadow-hover bg-surface-50"
43+
>
44+
<Github color="#5948a3" class="w-5 h-5 md:h-7 md:w-7"/>
45+
</a>
4246
</div>
4347
</div>
4448

‎src/routes/+layout.svelte‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,23 @@
88
<link rel="icon" type="image/x-icon"/>
99
</svelte:head>
1010

11-
<div class="layout h-screen font-sans overflow-hidden">
11+
<div class="flex flex-col min-h-screen h-screen font-sans overflow-hidden grid-background">
1212
<Navbar/>
13-
<div class="flex-1 overflow-auto">
13+
<div class="flex-1 flex items-center justify-center overflow-auto pb-4 border-b-2 border-black pt-[110px] m500:pt-16">
1414
{@render children()}
1515
</div>
16-
</div>
16+
<footer class="flex items-center p-4 bg-primary-700 text-white">
17+
<p class="text-sm text-left">© 2025 Demml.</p>
18+
</footer>
19+
</div>
20+
21+
<style>
22+
.grid-background {
23+
background-color: #E3DFF2;
24+
background-image:
25+
linear-gradient(to right, #CECBDB 1px, transparent 1px),
26+
linear-gradient(to bottom, #CECBDB 1px, transparent 1px);
27+
background-size: 60px 60px;
28+
}
29+
</style>
30+

‎src/routes/+page.svelte‎

Lines changed: 16 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -10,38 +10,40 @@
1010
});
1111
</script>
1212

13-
<div class="grid-background min-h-screen flex flex-col overflow-auto">
13+
<div class="flex flex-col overflow-auto pb-4 gap-4">
1414
<!-- Overview Section -->
15-
<div class="flex flex-col items-center justify-center p-10 max-w-4xl mx-auto pt-20">
16-
<div class="flex flex-col p-10 text-center items-center justify-center" id="overview">
17-
<h1 class="text-2xl md:text-4xl font-bold mb-4 text-primary-800">Quality Control For Machine Learning</h1>
18-
<p class="md:text-lg text-black">Our mission is to standardize and unify machine learning workflow management through high-performance developer tools</p>
15+
<div class="rounded-base border-2 bg-surface-50 border-black flex flex-col items-center justify-center p-4 max-w-[300px] md:max-w-xl mx-auto">
16+
<div class="flex flex-col text-center items-center justify-center" id="overview">
17+
<h1 class="text-sm md:text-lg font-bold text-primary-800">Quality Control For Machine Learning</h1>
18+
<p class="text-xs md:text-base text-black">Our mission is to standardize and unify machine learning workflow management through high-performance developer tools</p>
1919
</div>
2020
</div>
2121

2222
<!-- Projects Section -->
2323
<div class="flex flex-col justify-center items-center">
24-
<div class="flex flex-col max-w-3xl items-start">
25-
<h1 class="text-4xl font-bold mb-4 text-primary-800 w-full text-left">Projects</h1>
24+
25+
<div class="flex flex-col max-w-xl items-start">
26+
<h1 class="text-2xl font-bold mb-4 text-primary-800 w-full text-left">Projects</h1>
2627
</div>
27-
<div class="flex flex-row flex-wrap gap-4 justify-center">
28-
<a class="text-black rounded-base shadow border-2 border-black bg-primary-500 w-[300px] min-h-[90px] overflow-hidden hover:translate-x-[4px] hover:translate-y-[4px] hover:shadow-none p-2" href="https://docs.demml.io/opsml">
29-
<div class="h-12 flex justify-center items-center">
28+
29+
<div class="flex flex-row flex-wrap gap-4 justify-center w-full px-4">
30+
<a class="text-black rounded-base shadow border-2 border-black bg-primary-500 w-[200px] md:w-[300px] min-h-[90px] hover:translate-x-[4px] hover:translate-y-[4px] hover:shadow-none p-2" href="https://docs.demml.io/opsml">
31+
<div class="h-8 md:h-12 flex justify-center items-center">
3032
<img
3133
src={opsml_logo}
32-
class="h-12 object-contain"
34+
class="h-8 md:h-12 object-contain"
3335
alt="Opsml Logo"
3436
/>
3537
</div>
3638
<span class="text-xs sm:text-sm text-black text-center block pt-1">
3739
High performance artifact management for Python
3840
</span>
3941
</a>
40-
<a class="text-black rounded-base shadow border-2 border-black bg-error-500 w-[300px] min-h-[90px] overflow-hidden hover:translate-x-[4px] hover:translate-y-[4px] hover:shadow-none p-2" href="https://docs.demml.io/scouter">
41-
<div class="h-12 flex justify-center items-center">
42+
<a class="text-black rounded-base shadow border-2 border-black bg-error-500 w-[200px] md:w-[300px] min-h-[90px] hover:translate-x-[4px] hover:translate-y-[4px] hover:shadow-none p-2" href="https://docs.demml.io/scouter">
43+
<div class="h-8 md:h-12 flex justify-center items-center">
4244
<img
4345
src={scouter_logo}
44-
class="h-12 object-contain"
46+
class="h-8 md:h-12 object-contain"
4547
alt="Scouter Logo"
4648
/>
4749
</div>
@@ -52,13 +54,3 @@
5254
</div>
5355
</div>
5456
</div>
55-
56-
<style>
57-
.grid-background {
58-
background-color: #E3DFF2; /* Light background color */
59-
background-image:
60-
linear-gradient(to right, #CECBDB 1px, transparent 1px),
61-
linear-gradient(to bottom, #CECBDB 1px, transparent 1px);
62-
background-size: 60px 60px; /* Adjust the grid size */
63-
}
64-
</style>

0 commit comments

Comments
 (0)