Testing

2021-12-24 11:47:14 +00:00 · 2021-12-24 11:47:14 +00:00 · fc21e2f889
commit fc21e2f889
parent 53f440d895
8 changed files with 404 additions and 62 deletions
--- a/src/app.html
+++ b/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%
--- a/src/components/Nav.svelte
+++ b/src/components/Nav.svelte
@ -17,24 +17,24 @@
    }
 </style>
 <header>
-    <nav class="navbar navbar-expand-md">
-        <div class="navbar-collapse order-1 order-md-0 dual-collapse2">
-            <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>
+    <nav class="navbar navbar-expand">
+        <!-- <a class="navbar-brand" href="/"></a>
+          <img class="logo" width="105" height="105" src="{{ site.logo }}" alt="Chris Dill">
+        </a> -->

-                <!-- for the blog link, we're using rel=prefetch so that Sapper prefetches
-                        the blog data when we hover over the link or tap it on a touchscreen -->
-                <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>
+        <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>
+
+            <!-- for the blog link, we're using rel=prefetch so that Sapper prefetches
+                    the blog data when we hover over the link or tap it on a touchscreen -->
+            <li><a rel=prefetch aria-current="{segment === 'blog' ? 'page' : undefined}" href="blog">Blog</a>
+            </li>
+        </ul>
+        <ul class="navbar-nav ml-auto">
+            <li>
+                <svelte:component this={rightComponent}/>
+            </li>
+        </ul>
    </nav>
 </header>
--- a/src/routes/404.svelte
+++ b/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>
--- a/src/routes/__error.svelte
+++ b/src/routes/__error.svelte
@ -230,38 +230,29 @@ H@:         :HHHHHHHHHHHHHHHHHHX,    =@H
 </script>

 <style>
-    * {
-        color: white !important;
-        font-family: monospace;
-        white-space: pre;
-    }
-
-    .ascii {
-      text-align: center;
-      width: 100%;
-    }
-
-    .info {
-      margin-bottom: 30px;
-      position: relative;
+  * {
+      color: white !important;
+      font-family: monospace;
      white-space: pre;
-      text-align: center;
-    }
+  }

-    pre {
-        /* display: inline-block; */
-        margin: 0 auto;
-        /* position: center; */
-        /* text-align: left; */
-        font-family: monospace;
-        white-space: pre;
-    }
+  .ascii {
+    text-align: center;
+    width: 100%;
+  }

-    @media (min-width: 480px) {
-        h1 {
-            font-size: 4em;
-        }
-    }
+  .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>
--- a/src/routes/blog/index.svelte
+++ b/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>
-            {/each}
+                <!-- <li><a rel='prefetch' href='blog/{post.slug}'>{post.title}</a></li> -->
+            <!-- {/each} -->
        </ul>
    </section>
 </main>
--- a/src/routes/index.svelte
+++ b/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: ""
        }
--- a/static/css/global.css
+++ b/static/css/global.css
@ -50,10 +50,11 @@ header {
 }

 nav {
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
+  /* border: 2px solid red; */
+  /* align-items: center; */
+  /* display: flex; */
+  /* 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) {
--- a/static/img/600x300.png
+++ b/static/img/600x300.png