Browse Source

Add more backgrounds; tweak colours and scroll behaviour slightly

pull/1/head
Czarlie 7 months ago
parent
commit
2acb56ccc4
4 changed files with 37 additions and 39 deletions
  1. BIN
      code.jpg
  2. +13
    -16
      en/index.html
  3. +2
    -2
      index.css
  4. +22
    -21
      main.css

BIN
code.jpg View File

Before After
Width: 2400  |  Height: 1600  |  Size: 278 KiB

+ 13
- 16
en/index.html View File

@@ -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">


+ 2
- 2
index.css View File

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

+ 22
- 21
main.css View File

@@ -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;
}



Loading…
Cancel
Save