API redesign, better styling for the blog page

app/src/lib/header.svelte

@@ -1,9 +1,12 @@
-<script></script>
+<script>
+export let subtitle = ""
+</script>
 
 <header>
   <h1>
     <slot></slot>
   </h1>
+  <h4><c>{subtitle}</c></h4>
 </header>
 
 <style>
@@ -20,9 +23,19 @@ h1 {
   font-weight: 900;
   font-size: 5.5vw;
   padding: 120px;
+  padding-bottom: 0;
   text-align: center;
   color: white;
   text-shadow: var(--text-shadow); 
   text-size-adjust: 80%;
 }
+
+h4 {
+  padding-bottom: 120px;
+  font-weight: 600;
+  font-size: 2.2vw;
+  text-align: center;
+  color: white;
+  text-size-adjust: 80%;
+}
 </style>

app/src/routes/+page.svelte

@@ -80,7 +80,7 @@
 </main>
 
 <div class="version">
-  <p>v4.8</p>
+  <p>v4.9</p>
 </div>
 
 <style>

app/src/routes/blog/[id]/+page.svelte

@@ -99,7 +99,7 @@
   <link href="/markdown.css" rel="stylesheet">
 </svelte:head>
 
-<Header>
+<Header subtitle="{data.author} | {data.date}">
   {data.title}
 </Header>
 
@@ -107,41 +107,34 @@
   <audio bind:this={audio} preload="auto">
     <source src="/click.wav" type="audio/mpeg" />
   </audio>
-  <div class="header">
-    <p><b>Author:</b> {data.author} <b>| Date:</b> {data.date}</p>
-    <div>
-      <button on:click={async ()=>{upvote()}} class="{upvote_status}">
-        <i class="nf nf-md-arrow_up_bold"></i>
-      </button>
-      <p>{data.vote}</p>
-      <button on:click={async ()=>{downvote()}} class="{downvote_status}">
-        <i class="nf nf-md-arrow_down_bold"></i>
-      </button>
-    </div>
-  </div>
   <div class="content markdown-body">
     {@html sanitized}
   </div>
+  <div class="votes">
+    <button on:click={async ()=>{upvote()}} class="{upvote_status}">
+      <i class="nf nf-md-arrow_up_bold"></i>
+    </button>
+    <p>{data.vote}</p>
+    <button on:click={async ()=>{downvote()}} class="{downvote_status}">
+      <i class="nf nf-md-arrow_down_bold"></i>
+    </button>
+  </div>
 </main>
 
 
 <style>
-p {
-  font-size: 30px;
-}
-
 main {
   padding: 50px 10% 50px 10%;
   color: white;
   display: flex;
-  flex-direction: column;
-  justify-content: center;
+  flex-direction: row;
+  align-items: start;
 }
 
 .content {
-  padding: 50px;
+  padding: 35px;
   background: var(--dark-four);
-  border-radius: 0 0 var(--radius) var(--radius);
+  border-radius: var(--radius);
   box-shadow: var(--box-shadow);
 }
 
@@ -152,38 +145,28 @@ main {
   }
 
   .content {
-    padding: 30px;
     background: var(--dark-four);
     border-radius: 0 0 var(--radius) var(--radius);
     box-shadow: var(--box-shadow);
   }
 }
 
-.header {
-  font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
-  background: var(--dark-two);
-  border-radius: var(--radius) var(--radius) 0 0;
-  padding: 30px;
-  box-shadow: var(--box-shadow);
+.votes {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-} 
-
-.header div{
-  display: flex;
-  flex-direction: row;
+  flex-direction: column;
   text-align: center;
   text-shadow: var(--text-shadow);
   gap: 10px;
-  margin-top: 10px;
+  padding: 10px;
+  margin-left: 10px;
 }
 
-.header p {
-  font-size: 20px;
+.votes p {
+  font-size: 25px;
+  color: var(--dark-six);
 }
 
-.header div button{
+.votes button{
   display: flex; 
   flex-direction: row;
   gap: 10px;
@@ -192,14 +175,10 @@ main {
   border: none;
   font-size: 30px;
   cursor: pointer;
-  color: white;
+  color: var(--dark-six);
 }
 
-.header div p {
-  font-size: 25px;
-}
-
-.header div button:hover {
+.votes button:hover {
   animation-name: colorAnimation;
   animation-iteration-count: infinite;
   animation-duration: 10s;

app/src/routes/donate/+page.svelte

@@ -63,8 +63,8 @@ tr,th,td{
 }
 
 td,th{
-  border: solid 1px white;
-  padding: 10px;
+  border: solid 1px var(--dark-fife);
+  padding: 16px;
 }
 
 th {
@@ -75,10 +75,6 @@ th {
 }
 
 code {
-  background: var(--dark-two);
-  color: white;
-  border-radius: var(--radius);
-  text-shadow: var(--text-shadow);
   word-wrap: break-word;
   white-space: pre-wrap;
   word-break: break-word;

app/static/global.css

@@ -7,6 +7,7 @@
   --dark-three: #121212;
   --dark-four: #101010;
   --dark-fife: #3a3b3c;
+  --dark-six: #C0C0C0;
   --radius: 8px;
   /*
   old shadow animation
@@ -37,8 +38,8 @@ body {
 }
 
 ::-webkit-scrollbar {
-  border-radius: 10px;
-  width: 10px;
+  border-radius: 5px;
+  width: 1px;
 }
 
 ::-webkit-scrollbar-track {

app/static/markdown.css

@@ -691,7 +691,7 @@
 }
 
 .markdown-body span.float-right>span {
-  displaydebian: block;
+  display: block;
   margin: 13px auto 0;
   overflow: hidden;
   text-align: right;
@@ -703,7 +703,7 @@
   margin: 0;
   font-size: 85%;
   white-space: break-spaces;
-  background-color: var(--dark-two);
+  background: var(--dark-two);
   border-radius: 6px;
 }
 
@@ -745,7 +745,7 @@
 .markdown-body .highlight pre,
 .markdown-body pre {
   padding: 16px;
-  overflow: scroll;
+  overflow: auto;
   font-size: 85%;
   line-height: 1.45;
   background-color: var(--dark-two);