@@ -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"> | |||
@@ -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%);; | |||
} | |||
} |
@@ -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; | |||
} | |||