Testing

src/app.html

@@ -8,7 +8,7 @@
 	
 		<link rel="stylesheet" href="/css/bootstrap.min.css">
 		<link rel="stylesheet" href="/css/global.css">
-		<link rel="manifest" href="manifest.json" crossorigin="use-credentials">
+		<!-- <link rel="manifest" href="manifest.json" crossorigin="use-credentials"> -->
 		<link rel="icon" type="image/png" href="/img/favicon.ico">
 
 		%svelte.head%

src/components/Nav.svelte

@@ -17,8 +17,11 @@
     }
 </style>
 <header>
-    <nav class="navbar navbar-expand-md">
+    <nav class="navbar navbar-expand">
-        <div class="navbar-collapse order-1 order-md-0 dual-collapse2">
+        <!-- <a class="navbar-brand" href="/"></a>
+          <img class="logo" width="105" height="105" src="{{ site.logo }}" alt="Chris Dill">
+        </a> -->
+
         <ul class="navbar-nav mr-auto">
             <li><a aria-current="{segment === undefined ? 'page' : undefined}" href=".">Quartznet</a></li>
             <li><a aria-current="{segment === 'about' ? 'page' : undefined}" href="about">About</a></li>
@@ -28,13 +31,10 @@
             <li><a rel=prefetch aria-current="{segment === 'blog' ? 'page' : undefined}" href="blog">Blog</a>
             </li>
         </ul>
-        </div>
-        <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
         <ul class="navbar-nav ml-auto">
             <li>
                 <svelte:component this={rightComponent}/>
             </li>
         </ul>
-        </div>
     </nav>
 </header>

src/routes/404.svelte

@@ -0,0 +1,350 @@
+<script>
+    import {onMount} from 'svelte'
+    import Banner from '../components/banner.svelte'
+
+    const dev = process.env.NODE_ENV === 'development';
+
+    var appa = `             .,-:;//;:=,
+         . :H@@@MM@M#H/.,+%;,
+      ,/X+ +M@@M@MM%=,-%HMMM@X/,
+     -+@MM; $M@@MH+-,;XMMMM@MMMM@+-
+    ;@M@@M- XM@X;. -+XXXXXHHH@M@M#@/.
+  ,%MM@@MH ,@%=            .---=-=:=,.
+  -@#@@@MX .,              -%HX$$%%%+;
+ =-./@M@M$                  .;@MMMM@MM:
+ X@/ -$MM/                    .+MM@@@M$
+,@M@H: :@:                    . -X#@@@@-
+,@@@MMX, .                    /H- ;@M@M=
+.H@@@@M@+,                    %MM+..%#$.
+ /MMMM@MMH/.                  XM@MH; -;
+  /%+%$XHH@$=              , .H@@@@MX,
+   .=--------.           -%H.,@@@@@MX,
+   .%MM@@@HHHXX$$$%+- .:$MMX -M@@MM%.
+     =XMMM@MM@MM#H;,-+HMM@M+ /MMMX=
+       =%@M@M#@$-.=$@MM@@@M; %M%=
+         ,:+$+-,/H#MMMMMMM@- -,
+               =++%%%%+/:-.`;
+
+    var nuke = `             =+$HM####@H%;,
+          /H###############M$,
+          ,@################+
+           .H##############+
+             X############/
+              $##########/
+               %########/
+                /X/;;+X/
+
+                 -XHHX-
+                ,######,
+#############X  .M####M.  X#############
+##############-   -//-   -##############
+X##############%,      ,+##############X
+-##############X        X##############-
+ %############%          %############%
+  %##########;            ;##########%
+   ;#######M=              =M#######;
+    .+M###@,                ,@###M+.
+       :XH.                  .HX:`;
+
+    var atom = `                 =/;;/-
+                +:    //
+               /;      /;
+              -X        H.
+.//;;;:;;-,   X=        :+   .-;:=;:;%;.
+M-       ,=;;;#:,      ,:#;;:=,       ,@
+:%           :%.=/++++/=.$=           %=
+ ,%;         %/:+/;,,/++:+/         ;+.
+   ,+/.    ,;@+,        ,%H;,    ,/+,
+      ;+;;/= @.  .H##X   -X :///+;
+      ;+=;;;.@,  .XM@$.  =X.//;=%/.
+   ,;:      :@%=        =$H:     .+%-
+ ,%=         %;-///==///-//         =%,
+;+           :%-;;;;;;;;-X-           +:
+@-      .-;;;;M-        =M/;;;-.      -X
+ :;;::;;-.    %-        :+    ,-;;-;:==
+              ,X        H.
+               ;/      %=
+                //    +;
+                 ,////,`;
+
+    var heart = `                          .,---.
+                        ,/XM#MMMX;,
+                      -%##########M%,
+                     -@######%  $###@=
+      .,--,         -H#######$   $###M:
+   ,;$M###MMX;     .;##########$;HM###X=
+,/@###########H=      ;################+
+-+#############M/,      %##############+
+%M###############=      /##############:
+H################      .M#############;.
+@###############M      ,@###########M:.
+X################,      -$=X#######@:
+/@##################%-     +######$-
+.;##################X     .X#####+,
+ .;H################/     -X####+.
+   ,;X##############,       .MM/
+      ,:+$H@M#######M#$-    .$$=
+           .,-=;+$@###X:    ;/=.
+                  .,/X$;   .::,
+                      .,    ..`;
+
+    var fire = `                     -$-
+                    .H##H,
+                   +######+
+                .+#########H.
+              -$############@.
+            =H###############@  -X:
+          .$##################:  @#@-
+     ,;  .M###################;  H###;
+   ;@#:  @###################@  ,#####:
+ -M###.  M#################@.  ;######H
+ M####-  +###############$   =@#######X
+ H####$   -M###########+   :#########M,
+  /####X-   =########%   :M########@/.
+    ,;%H@X;   .$###X   :##MM@%+;:-
+                 ..
+  -/;:-,.              ,,-==+M########H
+ -##################@HX%%+%%$%%%+:,,
+    .-/H%%%+%%$H@###############M@+=:/+:
+/XHX%:#####MH%=    ,---:;;;;/&&XHM,:###$
+$@#MX %+;-                           .`;
+
+    var tick = `                                     :X-
+                                  :X###
+                                ;@####@
+                              ;M######X
+                            -@########$
+                          .$##########@
+                         =M############-
+                        +##############$
+                      .H############$=.
+         ,/:         ,M##########M;.
+      -+@###;       =##########M;
+   =%M#######;     :#########M/
+-$M###########;   :########/
+ ,;X###########; =#######$.
+     ;H#########+######M=
+       ,+#############+
+          /M########@-
+            ;M#####%
+              +####:
+               ,$M-`;
+
+    var bang = `            .+
+             /M;
+              H#@:              ;,
+              -###H-          -@/
+               %####$.  -;  .%#X
+                M#####+;#H :M#M.
+..          .+/;%#############-
+ -/%H%+;-,    +##############/
+    .:$M###MH$%+############X  ,--=;-
+        -/H#####################H+=.
+           .+#################X.
+         =%M####################H;.
+            /@###############+;;/%%;,
+         -%###################$
+       ;H######################M=
+    ,%#####MH$%;+#####M###-/@####%
+  :$H%+;=-      -####X.,H#   -+M##@-
+ .              ,###;    ;      =$##+
+                .#H,               :XH,
+                 +                   .;-`;
+
+    var mesa = `           .-;+$XHHHHHHX$+;-.
+        ,;X@@X%/;=----=:/%X@@X/,
+      =$@@%=.              .=+H@X:
+    -XMX:                      =XMX=
+   /@@:                          =H@+
+  %@X,                            .$@$
+ +@X.                               $@%
+-@@,                                .@@=
+%@%                                  +@$
+H@:                                  :@H
+H@:         :HHHHHHHHHHHHHHHHHHX,    =@H
+%@%         ;@M@@@@@@@@@@@@@@@@@H-   +@$
+=@@,        :@@@@@@@@@@@@@@@@@@@@@= .@@:
+ +@X        :@@@@@@@@@@@@@@@M@@@@@@:%@%
+  $@$,      ;@@@@@@@@@@@@@@@@@M@@@@@@$.
+   +@@HHHHHHH@@@@@@@@@@@@@@@@@@@@@@@+
+    =X@@@@@@@@@@@@@@@@@@@@@@@@@@@@X=
+      :$@@@@@@@@@@@@@@@@@@@M@@@@$:
+        ,;$@@@@@@@@@@@@@@@@@@X/-
+           .-;+$XXHHHHHX$+;-.`;
+
+    var cube = `       #+ @      # #              M#@
+ .    .X  X.%##@;# #   +@#######X. @H%
+   ,==.   ,######M+  -#####%M####M-    #
+  :H##M%:=##+ .M##M,;#####/+#######% ,M#
+ .M########=  =@#@.=#####M=M#######=  X#
+ :@@MMM##M.  -##M.,#######M#######. =  M
+             @##..###:.    .H####. @@ X,
+   ############: ###,/####;  /##= @#. M
+           ,M## ;##,@#M;/M#M  @# X#% X#
+.%=   ######M## ##.M#:   ./#M ,M #M ,#$
+##/         $## #+;#: #### ;#/ M M- @# :
+#+ #M@MM###M-;M #:$#-##$H# .#X @ + $#. #
+      ######/.: #%=# M#:MM./#.-#  @#: H#
++,.=   @###: /@ %#,@  ##@X #,-#@.##% .@#
+#####+;/##/ @##  @#,+       /#M    . X,
+   ;###M#@ M###H .#M-     ,##M  ;@@; ###
+   .M#M##H ;####X ,@#######M/ -M###$  -H
+    .M###%  X####H  .@@MM@;  ;@#M@
+      H#M    /@####/      ,++.  / ==-,
+               ,=/:, .+X@MMH@#H  #####$=`;
+
+    var cake = `  ,:/+/-
+              /M/              .,-=;//;-
+        .:/= ;MH/,    ,=/+%$XH@MM#@:
+        -$##@+$###@H@MMM#######H:.    -/H#
+  .,H@H@ X######@ -H#####@+-     -+H###@X
+    .,@##H;      +XM##M/,     =%@###@X;-
+  X%-  :M##########$.    .:%M###@%:
+  M##H,   +H@@@$/-.  ,;$M###@%,          -
+  M####M=,,---,.-%%H####M$:          ,+@##
+  @##################@/.         :%H##@$-
+  M###############H,         ;HM##M$=
+  #################.    .=$M##M$=
+  ################H..;XM##M$=          .:+
+  M###################@%=           =+@MH%
+  @#################M/.         =+H#X%=
+  =+M###############M,      ,/X#H+:,
+    .;XM###########H=   ,/X#H+:;
+      .=+HM#######M+/+HM@+=.
+          ,:/%XM####H/.
+                ,.:=-.`;
+
+    // appa, atom, nuke
+    var options = [cake, heart, fire, tick, bang, mesa, cube];
+    let active = cake
+
+    function updateView() {
+        active = options[Math.floor((Math.random() * options.length))];
+        setTimeout(updateView, 5000);
+    }
+
+    onMount(() => updateView());
+</script>
+
+<style>
+    * {
+        color: white !important;
+        font-family: monospace;
+        white-space: pre;
+    }
+
+    .ascii {
+      text-align: center;
+      width: 100%;
+    }
+
+    .info {
+      margin-bottom: 30px;
+      position: relative;
+      white-space: pre;
+      text-align: left;
+    }
+
+    pre {
+        margin: 0 auto;
+        font-family: monospace;
+        white-space: pre;
+    }
+</style>
+
+<svelte:head>
+    <title>404 - Page not found</title>
+</svelte:head>
+
+<Banner title="404"/>
+
+<main class="container">
+    <p>The requested page could not be found.</p>
+
+    <audio controls autoplay>
+        <track kind="captions"/>
+        <source src="http://quartznet.info/../../alive.ogg" type="audio/wav">
+    </audio>
+    <div class="ascii">
+        <div>
+            <pre><br>{active}</pre>
+        </div>
+    </div>
+    <br/>
+    <p class="info">
+This was a triumph!
+I'm making a note here:
+Huge success!
+
+It's hard to overstate
+my satisfaction.
+
+Aperture Science:
+We do what we must
+because we can
+For the good of all of us.
+Except the ones who are dead.
+
+But there's no sense crying
+over every mistake.
+You just keep on trying
+'til you run out of cake.
+And the science gets done.
+And you make a neat gun
+for the people who are
+still alive.
+
+I'm not even angry...
+I'm being so sincere right now.
+Even though you broke my heart,
+and killed me.
+
+And tore me to pieces.
+And threw every piece into a fire.
+As they burned it hurt because
+I was so happy for you!
+
+Now, these points of data
+make a beautiful line.
+And we're out of beta.
+We're releasing on time!
+So I'm GLaD I got burned!
+Think of all the things we learned!
+for the people who are
+still alive.
+
+Go ahead and leave me...
+I think I'd prefer to stay inside...
+Maybe you'll find someone else
+to help you.
+Maybe Black Mesa?
+That was a joke. Ha Ha. Fat Chance!
+
+Anyway this cake is great!
+It's so delicious and moist!
+
+Look at me: still talking
+when there's science to do!
+When I look out there,
+it makes me glad I'm not you.
+
+I've experiments to run.
+There is research to be done.
+On the people who are
+still alive.
+And believe me I am
+still alive.
+I'm doing science and I'm
+still alive.
+I feel fantastic and I'm
+still alive.
+While you're dying I'll be
+still alive.
+And when you're dead I will be
+still alive
+
+Still alive.
+
+Still alive.
+    </p>
+</main>

src/routes/__error.svelte

@@ -245,23 +245,14 @@ H@:         :HHHHHHHHHHHHHHHHHHX,    =@H
     margin-bottom: 30px;
     position: relative;
     white-space: pre;
-      text-align: center;
+    text-align: left;
   }
 
   pre {
-        /* display: inline-block; */
       margin: 0 auto;
-        /* position: center; */
-        /* text-align: left; */
       font-family: monospace;
       white-space: pre;
   }
-
-    @media (min-width: 480px) {
-        h1 {
-            font-size: 4em;
-        }
-    }
 </style>
 
 <svelte:head>

src/routes/blog/index.svelte

@@ -29,13 +29,13 @@
     <section>
         <h2>Posts</h2>
         <ul>
-            {#each posts as post}
+            <!-- {#each posts as post} -->
                 <!-- we're using the non-standard `rel=prefetch` attribute to
                         tell Sapper to load the data for the page as soon as
                         the user hovers over the link or taps it, instead of
                         waiting for the 'click' event -->
-                <li><a rel='prefetch' href='blog/{post.slug}'>{post.title}</a></li>
+                <!-- <li><a rel='prefetch' href='blog/{post.slug}'>{post.title}</a></li> -->
-            {/each}
+            <!-- {/each} -->
         </ul>
     </section>
 </main>

src/routes/index.svelte

@@ -7,14 +7,14 @@
         {
             name: "Sirius",
             link: "./sirius",
-            img: "https://placehold.it/600x300",
+            img: "img/600x300.png",
             size: { width: 600, height: 300 },
             description: "A 2D game about a wannabe space captain exploring the galaxy.",
         },
         {
             name: "Quartz",
             link: "./sirius",
-            img: "https://placehold.it/600x300",
+            img: "img/600x300.png",
             size: { width: 600, height: 300 },
             description: ""
         }

static/css/global.css

@@ -50,10 +50,11 @@ header {
 }
 
 nav {
-  align-items: center;
+  /* border: 2px solid red; */
-  display: flex;
+  /* align-items: center; */
-  flex-direction: row;
+  /* display: flex; */
-  justify-content: space-between;
+  /* flex-direction: row; */
+  /* justify-content: space-between; */
   max-width: 1200px;
   margin: 0 auto;
 }
@@ -66,8 +67,8 @@ nav li {
 
 /* Link effects */
 nav li a {
-  text-decoration: none;
   padding: 4px 8px;
+  text-decoration: none;
   transition: color 0.1s linear;
 }
 
@@ -130,19 +131,19 @@ footer {
     text-align: center;
   }
 
-  nav {
+  /* nav {
     flex-direction: column;
   }
 
   nav ul {
     flex-direction: column;
     margin: 0 auto;
-  }
+  } */
 
-  nav ul li a {
+  /* nav ul li a {
     text-align: center;
     margin: 0 auto;
-  }
+  } */
 }
 
 @media (max-width: 576px) {