style: improve some parts of the design

Author: aksiome

src/app.html

@@ -4,6 +4,9 @@
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<link rel="preconnect" href="https://fonts.googleapis.com">
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+		<link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Unbounded:[email protected]&display=swap" rel="stylesheet">
 		<link rel="stylesheet" href="style.css">
 		%sveltekit.head%
 	</head>

src/lib/comp/Content.svelte

@@ -13,11 +13,19 @@
 <style>
     #content {
         flex-grow: 1;
-        margin: 0 2.5vw;
+        margin: 0 2.5rem 1.5rem;
+        display: flex;
+        flex-direction: column;
     }
     @media screen and (max-width: 1480px){
         #content {
-            margin: 0 1vw;
+            margin: 0 1.5rem 1.5rem;
+        }
+
+    }
+    @media screen and (max-width: 1024px){
+        #content {
+            margin: 0 1rem 1rem;
         }
 
     }

src/lib/comp/DarkModeSwitch.svelte

@@ -45,9 +45,6 @@
         place-items: center;
         cursor: pointer;
     }
-    span {
-        margin-right: 1em;
-    }
 
     .light-mode {
         display: none;
@@ -58,11 +55,4 @@
     :global(#darkMode:checked ~ main .dark-mode) {
         display: none;
     }
-
-    
-    @media screen and (max-width: 820px) {
-        span {
-            display: none;
-        }
-    }
 </style>

src/lib/comp/MainMenu.svelte

@@ -47,14 +47,15 @@
     }
 </script>
 
-<label class="module rounded" class:highlighted={highlighted} for={module.name} class:required id={module.id}>
+<label class="module rounded" class:highlighted={highlighted} for={module.name} class:required class:recommended id={module.id}>
     <input
         type="checkbox"
         name={module.name}
         id={module.name}
         class="module-selector"
         on:change={toggle}
     />
+    <span class="checkmark"></span>
     {#if required}
         <div class="required overlay highlight">Required</div>
     {:else if recommended}
@@ -125,31 +126,59 @@
         position: relative;
         outline: var(--border-width) solid transparent;
         background-color: var(--background-color-lighter);
-        margin: 1rem;
         display: flex;
         flex-direction: column;
-        width: 300px;
-        height: 400px;
-        filter: drop-shadow(0 0.5rem 0.1rem var(--background-color-darker));
-        transition:
-            filter 0.5s,
-            color 0.5s,
-            background-color 0.5s;
+        height: 375px;
+        filter: drop-shadow(0.15rem 0.35rem 0.1rem var(--background-color-darker));
+        cursor: pointer;
     }
 
     .module:has(input:checked),
     .module.required {
         outline-color: var(--highlight-color);
     }
+    .module.recommended {
+        outline-color: #bbb;
+    }
 
     .module.highlighted {
         outline-color: var(--highlight-secondary-color) !important;
     }
 
     .module-selector {
+        display: none;
+    }
+
+    .checkmark {
         position: absolute;
-        top: 5%;
-        right: 5%;
+        display: block;
+        right: 10px;
+        top: 10px;
+        width: 25px;
+        height: 25px;
+        border-radius: 50%;
+        background: #fff;
+        border: 2px solid #00000033;
+    }
+
+    .module-selector:checked ~ .checkmark {
+        border-color: var(--highlight-color);
+        background: var(--highlight-color);
+    }
+
+    .checkmark:after {
+        content: "";
+        position: absolute;
+    }
+
+    .module-selector:checked ~ .checkmark:after {
+        left: 7px;
+        top: 3px;
+        width: 7px;
+        height: 13px;
+        border: solid white;
+        border-width: 0 2px 2px 0;
+        transform: rotate(38deg);
     }
 
     .module-img {
@@ -186,6 +215,9 @@
         display: flex;
         align-items: center;
     }
+    .module-doc:hover {
+        text-decoration: underline;
+    }
 
     .overlay {
         position: absolute;
@@ -194,18 +226,19 @@
         padding: 0.25em;
         border-top-left-radius: 0.375rem;
     }
-    .recommended {
+
+    .overlay.recommended {
         filter: grayscale(1);
     }
 
     .module-tag,
     .module-dependency {
         background-color: var(--background-color-darker);
         padding: 0.2em 0.5em;
-        margin: 0.2em;
         font-size: smaller;
         border-radius: 0.2em;
         text-decoration: none;
+        margin-right: .25rem;
     }
 
     .module-dependencies-wrapper {
@@ -215,21 +248,9 @@
         font-weight: bold;
     }
 
-    @media screen and (max-width: 1480px) {
-        .module {
-            max-width: 30%;
-            margin: 1.5%;
-        }
-        .module-body {
-            padding: 5%;
-        }
-    }
-
     @media screen and (max-width: 1024px) {
         .module {
-            font-size: max(2vw, 0.9em);
-            max-width: 45%;
-            margin: 2.5%;
+            font-size: 0.9em;
         }
     }
 </style>

src/lib/comp/Module.svelte

@@ -132,11 +132,30 @@
     #module-selector {
         display: flex;
         flex-direction: column;
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        right: 0;
+        
     }
 
     .module-wrapper {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+        gap: 1.5rem;
+        padding: 1.5rem;
+    }
+    @media screen and (max-width: 1024px) {
+        .module-wrapper {
+            gap: 1rem;
+            padding: 1rem;
+            grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
+        }
+    }
+    @media screen and (max-width: 820px) {
+        #module-selector {
+            position: relative;
+        }
     }
 </style>

src/lib/comp/ModuleSelector.svelte

@@ -134,7 +134,14 @@
         disabled={$selectedModules.size === 0}
         on:click={download}
     >
-        Download</button
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
+        </svg>
+        <div>
+            <div class="dl-title">Download</div>
+            <div>All in one datapack</div>
+        </div>
+      </button
     >
 </div>
 <div id="modules" class="rounded">
@@ -159,26 +166,57 @@
         display: flex;
         flex-direction: row;
         justify-content: space-between;
-        background-color: var(--background-color);
+        background-color: var(--background-color-lighter);
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
-        border-bottom: 1px solid var(--divider-color);
+        align-items: center;
+        border-bottom: 1px solid #77777733;
     }
     #controlbar-inner {
         padding: 1rem;
     }
     button.dl {
-        height: 4em;
-        width: 10vw;
+        height: 100%;
         border-radius: 0;
+        padding: .5rem 1.5rem;
         border-top-right-radius: 0.375rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 0.7em;
+        font-family: Unbounded;
+    }
+    button.dl .dl-title {
+        font-size: 1.6em;
+        font-weight: 700;
+        text-align: left;
+        margin-bottom: -.2em;
+    }
+    button.dl:not(:disabled):hover svg {
+        transform: translateY(3px);
+    }
+    button.dl:not(:disabled):active svg {
+        transform: translateY(4px);
+    }
+    button.dl:disabled {
+        background-color: #92979c82;
+        cursor: not-allowed;
+    }
+    button.dl svg {
+        height: 1.8em;
+        transition: transform 0.1s;
+    }
+    button.dl > div {
+        padding: 0 1rem;
     }
 
     #modules {
-        padding: 1rem;
         border-top-left-radius: 0;
         border-top-right-radius: 0;
         background-color: var(--background-color);
+        overflow: auto;
+        position: relative;
+        flex-grow: 1;
     }
 
     @media screen and (max-width: 820px) {
@@ -195,10 +233,6 @@
             width: 100%;
         }
 
-        #search {
-            display: none;
-        }
-
         button.dl {
             width: 100%;
             border-radius: 0;