Add more backgrounds; tweak colours and scroll behaviour slightly

en/index.html

@@ -24,7 +24,7 @@
 
   <script type="text/javascript">
     const AFTER_SCROLL_TIMEOUT = 100;
-    const PAGE_SNAP_LENGTH = 0.25; // How many pages (0--5) to scroll when snapping
+    const PAGE_SNAP_LENGTH = 0.3; // How many pages (0--0.5) to scroll when snapping
 
     var lastScroll = 0;
     var lastScrollTime = 0;
@@ -34,15 +34,14 @@
       let upLimit = PAGE_SNAP_LENGTH;
 
       if (isScrollingDown)
-        upLimit = 0;
+        upLimit = 0.0;
       else
-        downLimit = 1;
+        downLimit = 1.0;
 
       if ((document.scrollingElement.scrollTop % document.scrollingElement.clientHeight) / document.scrollingElement.clientHeight < upLimit) {
         return true;
       }
 
-
       else if ((document.scrollingElement.scrollTop % document.scrollingElement.clientHeight) / document.scrollingElement.clientHeight > downLimit) {
         return true;
       }
@@ -64,7 +63,7 @@
             document.scrollingElement.scrollTo(
               {
                 left: 0,
-                top: Math.ceil(document.scrollingElement.scrollTop / document.scrollingElement.clientHeight) * document.scrollingElement.clientHeight,
+                top: Math.round(document.scrollingElement.scrollTop / document.scrollingElement.clientHeight) * document.scrollingElement.clientHeight,
                 behavior: 'smooth'
               }
             );
@@ -78,7 +77,7 @@
             document.scrollingElement.scrollTo(
               {
                 left: 0,
-                top: Math.floor(document.scrollingElement.scrollTop / document.scrollingElement.clientHeight) * document.scrollingElement.clientHeight,
+                top: Math.round(document.scrollingElement.scrollTop / document.scrollingElement.clientHeight) * document.scrollingElement.clientHeight,
                 behavior: 'smooth'
               }
             );
@@ -129,7 +128,7 @@
     </div>
   </div>
 
-  <div class="section two-panes muted" id="open-source" id="code">
+  <div class="section two-panes muted" id="code">
     <div class="pane has-content colour">
       <div class="central title"><span>Open Source
           <hr></span></div>
@@ -148,14 +147,16 @@
             class="plain"><span style="white-space: nowrap">A</span>ndroid Client</a><br>
          <a href='https://git.pott.app/kaffeepott/barista-server'
             class="plain"><span style="white-space: nowrap">B</span>arista</a><br>
+         <a href='https://git.pott.app/KaffeePott/Cafe-Collector'
+            class="plain"><span style="white-space: nowrap">C</span>afé Collector</a><br>
          <a href='https://git.pott.app/czarlie/pott-dot-app'
             class="plain"><span style="white-space: nowrap">T</span>his page</a>
       </div>
     </div>
   </div>
 
-  <div class="section two-panes blurple" id="discord" id="discord">
-    <div class="pane has-content colour invert">
+  <div class="section two-panes blurple" id="discord">
+    <div class="pane has-content colour">
       <div class="central title"><span>Discord
           <hr></span></div>
       <span class="content" lang="en-gb">
@@ -163,17 +164,13 @@
           If you have questions or just want to chill, feel free to join our Discord.
         </p>
 
-        <div class="actions central">
-          <a href='https://discord.gg/drg82RV' class="plain" target="_blank" style="margin-top: 2rem;"><span style="white-space: nowrap">J</span>oin Server</a>
-        </div>
-
       </span>
     </div>
-    <iframe class="pane colour" src="https://discordapp.com/widget?id=707620884839661609&theme=dark" allowtransparency="true" frameborder="0"></iframe>
+    <iframe class="pane colour" src="https://discordapp.com/widget?id=707620884839661609&theme=light" allowtransparency="true" frameborder="0"></iframe>
   </div>
 
-  <div class="section two-panes alt" id="contact" id="contact">
-    <div class="pane has-content colour">
+  <div class="section two-panes beta" id="contact">
+    <div class="pane has-content colour invert">
       <div class="central title"><span>About
           <hr></span></div>
       <span class="content" lang="en-gb">

index.css

@@ -4,10 +4,10 @@
     }
 
     .section#code {
-        background-image: url(code-wide.jpg);
+        background-image: url(code.jpg);
     }
 
     .section#discord {
-        background-image: url(plant-wide.jpg);
+        background: linear-gradient(315deg, rgba(66,85,150,1) 0%, rgba(114,137,214,1) 100%);;
     }
 }

main.css

@@ -34,11 +34,11 @@
   --vibrant-button-bg-color: #a0664b;
 
 
-  --muted-bg-color: #002b36;
-  --muted-fg-color: #93a1a1;
+  --muted-bg-color: #002b36f8;
+  --muted-fg-color: #93a1a1f8;
 
-  --muted-inv-bg-color: #fdf6e3;
-  --muted-inv-fg-color: #586e75;
+  --muted-inv-bg-color: #fdf6e3f8;
+  --muted-inv-fg-color: #586e75f8;
 
   --muted-sep-color: var(--muted-fg-color);
   --muted-inv-sep-color: var(--muted-inv-fg-color);
@@ -48,11 +48,11 @@
   --muted-button-bg-color: #073642;
 
 
-  --eco-bg-color: #83916b;
-  --eco-fg-color: #222;
+  --eco-bg-color: #83916bf8;
+  --eco-fg-color: #222222f8;
 
-  --eco-inv-bg-color: #222;
-  --eco-inv-fg-color: #83916b;
+  --eco-inv-bg-color: #333333f8;
+  --eco-inv-fg-color: #83916bf8;
 
   --eco-sep-color: var(--eco-fg-color);
   --eco-inv-sep-color: var(--eco-inv-fg-color);
@@ -62,11 +62,11 @@
   --eco-button-bg-color: #333;
 
 
-  --alt-bg-color: #ad6f52;
-  --alt-fg-color: #333;
+  --alt-bg-color: #ad6f52f8;
+  --alt-fg-color: #333333f8;
 
-  --alt-inv-bg-color: #333;
-  --alt-inv-fg-color: #ad6f52;
+  --alt-inv-bg-color: #111111f8;
+  --alt-inv-fg-color: #ad6f52f8;
 
   --alt-sep-color: var(--alt-fg-color);
   --alt-inv-sep-color: var(--alt-inv-fg-color);
@@ -76,11 +76,11 @@
   --alt-button-bg-color: #222;
 
 
-  --beta-bg-color: #fff;
-  --beta-fg-color: #333;
+  --beta-bg-color: #fffffff8;
+  --beta-fg-color: #333333f8;
 
-  --beta-inv-bg-color: #333;
-  --beta-inv-fg-color: #fff;
+  --beta-inv-bg-color: #111111f8;
+  --beta-inv-fg-color: #fffffff8;
 
   --beta-sep-color: var(--beta-fg-color);
   --beta-inv-sep-color: var(--beta-inv-fg-color);
@@ -89,11 +89,12 @@
   --beta-inv-link-color: #ad6f52;
   --beta-button-bg-color: #222;
 
-  --blurple-bg-color: #36393F;
-  --blurple-fg-color: #fff;
 
-  --blurple-inv-bg-color: #fff;
-  --blurple-inv-fg-color: #36393F;
+  --blurple-bg-color: #36393Ff8;
+  --blurple-fg-color: #fffffff8;
+
+  --blurple-inv-bg-color: #eeeeeef8;
+  --blurple-inv-fg-color: #36393Ff8;
 
   --blurple-sep-color: var(--blurple-fg-color);
   --blurple-inv-sep-color: var(--blurple-inv-fg-color);
@@ -157,7 +158,7 @@ body, html {
         display: block;
         margin: 5rem 3rem;
         height: calc(100vh - 10rem);
-        border-radius: 1.75rem;
+        border-radius: 1.25rem;
         box-shadow: 0 1rem 1.5rem 0.5rem #0006;
     }