Remove bootstrap dependency

src/app.html

@@ -6,7 +6,6 @@
 		<meta name="theme-color" content="#333333">
 		<meta name="description" content="Quartznet is a small team developing games, tools and more!">
 
-		<link rel="stylesheet" href="/css/bootstrap.min.css">
 		<link rel="stylesheet" href="/css/global.css">
 		<link rel="icon" type="image/png" href="/img/favicon.ico">
 

src/components/Nav.svelte

@@ -1,8 +1,3 @@
-<script>
-    export let segment;
-    export let rightComponent;
-</script>
-
 <style>
     a {
         font-size: 1rem;
@@ -10,14 +5,22 @@
     }
 
     nav {
-        max-width: 1200px;
+        display: flex;
+        justify-content: space-between;
+        max-width: 1400px;
         margin: 0 auto;
+        padding-left: 1rem;
+        padding-right: 1rem;
     }
 
     ul {
         display: flex;
         font-weight: bold;
         text-align: center;
+        list-style: none;
+        margin-top: 8px;
+        margin-bottom: 8px;
+        padding: 0;
     }
 
     ul li a {
@@ -32,18 +35,18 @@
 </style>
 
 <header>
-    <nav class="navbar navbar-expand">
-        <ul class="navbar-nav mr-auto">
+    <nav>
+        <ul>
             <li>
-                <a aria-current="{segment === undefined ? 'page' : undefined}" href="/">Quartznet</a>
+                <a href="/">Quartznet</a>
             </li>
             <li>
-                <a aria-current="{segment === 'about' ? 'page' : undefined}" href="/about">About</a>
+                <a href="/about">About</a>
             </li>
         </ul>
-        <ul class="navbar-nav ml-auto">
+        <ul>
             <li>
-                <svelte:component this={rightComponent}/>
+                <a href="/admin">Admin</a>
             </li>
         </ul>
     </nav>

src/components/Thumbnail.svelte

@@ -2,18 +2,40 @@
     export let name;
     export let link;
     export let img = "https://placehold.it/600x300";
-    export let imgClass = "img-fluid mb-3 mb-md-0";
     export let size = { width: 600, height: 300 };
     export let description;
 </script>
 
-<div class="row">
-    <div class="thumb col-md-7">
+<style>
+    .card {
+        display: flex;
+        gap: 2.5rem;
+    }
+
+    .back a img {
+        max-width: 100%;
+        height: auto;
+    }
+
+    .description {
+        width: 500px;
+    }
+
+    @media screen and (max-width: 978px) {
+        .card {
+            flex-wrap: wrap;
+            gap: 0.25rem;
+        }
+    }
+</style>
+
+<div class="card">
+    <div class="back">
         <a href="{link}">
-            <img class={imgClass} src={img} alt={name} width={size.width} height={size.height}>
+            <img src={img} alt={name} width={size.width} height={size.height}>
         </a>
     </div>
-    <div class="blurb col-md-5">
+    <div class="description">
         <h2>{name}</h2>
         <p>{description}</p>
     </div>

src/routes/+layout.svelte

@@ -1,9 +1,6 @@
 <script>
     import Nav from '../components/Nav.svelte';
-    import userManager from '../components/UserManager.svelte'
     import Modal from '../components/Modal.svelte'
-
-    export let segment;
 </script>
 
 <style>
@@ -23,8 +20,8 @@
 </style>
 
 <Modal/>
-<Nav {segment} rightComponent={userManager}/>
+<Nav/>
 
 <slot></slot>
 
-<footer></footer>
+<footer class="container"></footer>

static/css/global.css

@@ -30,13 +30,22 @@ body {
   font-display: swap;
   font-size: 1rem;
   line-height: 1.6;
+  margin: 0 auto;
 }
 
 h1, h2, h3, h4, h5 {
   color: var(--headings-color);
   font-weight: bold;
   line-height: 1.2;
+  margin-top: 0;
+  margin-bottom: 0.5rem;
 }
+h1 { font-size: 2.5rem; }
+h2 { font-size: 2rem; }
+h3 { font-size: 1.75rem; }
+h4 { font-size: 1.5rem; }
+h5 { font-size: 1.25rem; }
+h6 { font-size: 1rem; }
 
 hr {
   background-color: var(--line-color);
@@ -79,6 +88,44 @@ a:hover {
   text-decoration: none;
 }
 
+.container {
+  width: 100%;
+  padding-right: 15px;
+  padding-left: 15px;
+  margin-right: auto;
+  margin-left: auto;
+} 
+@media (min-width: 576px) {
+  .container {
+      width: 540px;
+  }
+}
+@media (min-width: 768px) {
+  .container {
+      width: 720px;
+  }
+}
+@media (min-width: 992px) {
+  .container {
+      width: 960px;
+  }
+}
+@media (min-width: 1200px) {
+  .container {
+      width: 1140px;
+  }
+}
+
+.link {
+  text-decoration: none;
+  transition: color 0.1s linear;
+  padding: 4px 12px;
+}
+
+.link:hover {
+  border-bottom: 2px solid var(--line-color);
+}
+
 /* Content */
 main {
   margin-top: 20px;