czarlie
/
pott-dot-app
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Add a background (and tweaks)

pull/1/head
Czarlie 9 months ago
parent
5bfc16ff80
commit
e2de322f52
4 changed files with 152 additions and 60 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      coffee.jpg
  2. +97
    -17
      en/index.html
  3. +5
    -18
      index.css
  4. +50
    -25
      main.css

BIN
coffee.jpg View File

Before After
Width: 2000  |  Height: 1288  |  Size: 275 KiB

+ 97
- 17
en/index.html View File

@@ -19,7 +19,87 @@
}
};
</script>

<script src="../Hyphenopoly/Hyphenopoly_Loader.js"></script>

<script type="text/javascript">
const AFTER_SCROLL_TIMEOUT = 100;
const PAGE_SNAP_LENGTH = 0.4; // How many pages (0--5) to scroll when snapping

var lastScroll = 0;
var lastScrollTime = 0;

function isCloseToPageEnd(isScrollingDown) {
let downLimit = 1 - PAGE_SNAP_LENGTH;
let upLimit = PAGE_SNAP_LENGTH;

if (isScrollingDown)
upLimit = 0;
else
downLimit = 1;

console.log("scrolled", (document.scrollingElement.scrollTop % document.scrollingElement.clientHeight) / document.scrollingElement.clientHeight, "pages")

if ((document.scrollingElement.scrollTop % document.scrollingElement.clientHeight) / document.scrollingElement.clientHeight < upLimit) {
console.log("upLimit");
return true;
}


else if ((document.scrollingElement.scrollTop % document.scrollingElement.clientHeight) / document.scrollingElement.clientHeight > downLimit) {
console.log("downLimit");
return true;
}

return false;
}

function onWheel() {
console.log(document.scrollingElement.scrollTop, lastScroll)

lastScrollTime = Date.now();

setTimeout(onAfterWheel, AFTER_SCROLL_TIMEOUT);
}

function onAfterWheel(){
if (lastScroll < document.scrollingElement.scrollTop) {
if (isCloseToPageEnd(true)) {
if (Date.now() > lastScrollTime + AFTER_SCROLL_TIMEOUT - 10){ // 10 ms less to account for browser errors
console.log("down");

document.scrollingElement.scrollTo(
{
left: 0,
top: Math.ceil(document.scrollingElement.scrollTop / document.scrollingElement.clientHeight) * document.scrollingElement.clientHeight,
behavior: 'smooth'
}
);
}
}
}

else if (lastScroll > document.scrollingElement.scrollTop) {
if (isCloseToPageEnd(false)) {
if (Date.now() > lastScrollTime + AFTER_SCROLL_TIMEOUT - 10){ // 10 ms less to account for browser errors
console.log("up");

document.scrollingElement.scrollTo(
{
left: 0,
top: Math.floor(document.scrollingElement.scrollTop / document.scrollingElement.clientHeight) * document.scrollingElement.clientHeight,
behavior: 'smooth'
}
);
}
}
}

lastScroll = document.scrollingElement.scrollTop;
}
</script>


<link rel="stylesheet" type="text/css" href="../main.css">
<link rel="stylesheet" type="text/css" href="../index.css">

@@ -27,9 +107,9 @@
<link rel="shortcut icon" type="image/svg" href="../kp-t.svg">
</head>

<body>
<body onwheel="onWheel();">

<div class="section two-panes vibrant">
<div class="section two-panes vibrant" id="coffee">

<div class="pane has-content colour">
<div class="central title">
@@ -40,13 +120,13 @@
<span class="content" lang="en-gb">
<p class="text-block">
KaffeePott is an app that allows you to find cafés by criteria like distance, pricing, items on the café's menu or rating. Information on cafés is kept up-to-date by users and quality-checked by us.
To ensure your full privacy, we use <a class="plain" href="https://mapbox.com/about">Mapbox</a> and <a class="plain" href="https://www.openstreetmap.org">OpenStreetMap</a>.
To ensure your full privacy, we use <a class="plain" href="https://mapbox.com/about"><span style="white-space: nowrap">M</span>apbox</a> and <a class="plain" href="https://www.openstreetmap.org"><span style="white-space: nowrap">O</span>penStreetMap</a>.
</p>
</span>
</div>


<div class="pane has-content colour">
<div class="pane has-content colour invert">
<div class="central title">
<span>Download
<hr></span>
@@ -58,7 +138,7 @@
</div>
</div>

<div class="section two-panes muted" id="open-source">
<div class="section two-panes muted" id="open-source" id="code">
<div class="pane has-content colour foreground">
<div class="central title"><span>Open Source
<hr></span></div>
@@ -66,7 +146,7 @@
<p class="text-block">
To guarantee safety and privacy and always keep KaffeePott up-to-date, it is open source, meaning that we aren't sending your personal information to Google or Facebook and you can see what exactly we're doing with your
data at any time<nobr> —</nobr> nothing at all. You can also quickly contact us if you're having trouble or you've found a bug and we'll get back to you ASAP. <a href='https://git.pott.app/kaffeepott/android-client'
class="plain">Gitea</a>
class="plain"><span style="white-space: nowrap">G</span>itea</a>
</p>
</span>
</div>
@@ -77,7 +157,7 @@
</div>
</div>

<div class="section two-panes blurple" id="discord">
<div class="section two-panes blurple" id="discord" id="discord">
<div class="pane has-content colour foreground invert">
<div class="central title"><span>Discord
<hr></span></div>
@@ -87,7 +167,7 @@
</p>

<div class="actions central">
<a href='https://discord.gg/drg82RV' class="plain" target="_blank" style="margin-top: 2rem;">Join Server</a>
<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>
@@ -95,13 +175,13 @@
<iframe class="pane colour foreground" src="https://discordapp.com/widget?id=707620884839661609&theme=dark" allowtransparency="true" frameborder="0"></iframe>
</div>

<div class="section two-panes alt" id="contact">
<div class="section two-panes alt" id="contact" id="contact">
<div class="pane has-content colour foreground">
<div class="central title"><span>About
<hr></span></div>
<span class="content" lang="en-gb">
<p class="text-block">
We are a student group studying at <a class="plain" href="https://slg-aachen.de" lang="de" translate="no">Sankt Leonhard Gymnasium Aachen</a>. We programmed the app KaffeePott for our schools' <span lang="de" translate="no"><span
We are a student group studying at <a class="plain" href="https://slg-aachen.de" lang="de" translate="no"><span style="white-space: nowrap">S</span>ankt Leonhard Gymnasium Aachen</a>. We programmed the app KaffeePott for our schools' <span lang="de" translate="no"><span
style="letter-spacing:-.2em" comment="I didn't like how Bitter kerns this, so i decreased letter-spacing">“</span>Apps programmieren für Android</span>” (programming apps for Android) workshop.
</p>
</span>
@@ -118,15 +198,15 @@
<div class="central title"><span>Contact
<hr></span></div>

<div class="actions central">
<div class="content central">
<div class="left-aligned">
<a href='https://git.pott.app/kaffeepott/android-client' class="plain">Gitea</a><br>
<a class="plain" href="https://discord.gg/drg82RV" target="_blank">Discord</a><br><br>
<a href='https://git.pott.app/kaffeepott/android-client' class="plain"><span style="white-space: nowrap">G</span>itea</a><br>
<a class="plain" href="https://discord.gg/drg82RV" target="_blank"><span style="white-space: nowrap">D</span>iscord</a><br><br>

<a href='mailto:bailitis@pott.app' class="plain">E-mail Janis Bailitis</a><br>
<a href='mailto:kube@pott.app' class="plain">E-mail Robin Kube</a><br>
<a href='mailto:mainka@pott.app' class="plain">E-mail Irmin Mainka</a><br>
<a href='mailto:mathieu@pott.app' class="plain">E-mail Linus Mathieu</a>
<a href='mailto:bailitis@pott.app' class="plain"><span style="white-space: nowrap">E</span>-mail Janis Bailitis</a><br>
<a href='mailto:kube@pott.app' class="plain"><span style="white-space: nowrap">E</span>-mail Robin Kube</a><br>
<a href='mailto:mainka@pott.app' class="plain"><span style="white-space: nowrap">E</span>-mail Irmin Mainka</a><br>
<a href='mailto:mathieu@pott.app' class="plain"><span style="white-space: nowrap">E</span>-mail Linus Mathieu</a>
</div>
</div>
</div>


+ 5
- 18
index.css View File

@@ -1,26 +1,13 @@
@media only screen and (min-width: 1001px) {
.pane.image.coffee {
background-image: url(coffee-tall.jpg);
.section#coffee {
background-image: url(coffee.jpg);
}

.pane.image.open-source {
background-image: url(code-tall.jpg);
}

.pane.image.eco {
background-image: url(plant-tall.jpg);
}
}
@media only screen and (max-width: 1000px) {
.pane.image.coffee {
background-image: url(coffee-wide.jpg);
}

.pane.image.open-source {
.section#code {
background-image: url(code-wide.jpg);
}

.pane.image.eco {
.section#discord {
background-image: url(plant-wide.jpg);
}
}
}

+ 50
- 25
main.css View File

@@ -20,11 +20,11 @@


:root {
--vibrant-bg-color: #222;
--vibrant-fg-color: #ad6f52;
--vibrant-bg-color: #592e1af8;
--vibrant-fg-color: #ddcfc2e0;
--vibrant-sep-color: var(--vibrant-fg-color);
--vibrant-link-color: #4c99ba;
--vibrant-inv-link-color: #111;
--vibrant-inv-link-color: #2c799a;
--vibrant-link-color: #8cc9fa;
--vibrant-button-bg-color: #a0664b;

--muted-bg-color: #333;
@@ -78,6 +78,8 @@ body, html {
display: grid;
width: 100%;
height: 100vh;

background-size: cover;
}

.section.one-pane {
@@ -109,19 +111,20 @@ body, html {

.pane {
display: block;
margin: 4rem 2rem;
height: calc(100vh - 14rem);
border-radius: 2rem;
margin: 5rem 3rem;
height: calc(100vh - 10rem);
border-radius: 1.75rem;
box-shadow: 0 1rem 1.5rem 0.5rem #0006;
}

iframe.pane {
width: calc(100% - 4rem);
width: calc(100% - 6rem);
}

.pane.has-content {
padding: 3rem;
margin: 4rem 2rem;
height: calc(100vh - 14rem);
margin: 5rem 3rem;
height: calc(100vh - 16rem);

overflow-y: auto;
}
@@ -268,9 +271,24 @@ img {
}
}

/* smartphones, touchscreens */
@media (hover: none) and (pointer: coarse) {
* {
scroll-snap-type: y proximity;
}

.section {
scroll-snap-align: start;
}
}


/* VIBRANT */

.section.vibrant {
background-color: var(--vibrant-fg-color);
}

.section.vibrant .pane.colour {
background-color: var(--vibrant-bg-color);
color: var(--vibrant-fg-color);
@@ -323,6 +341,10 @@ img {

/* MUTED */

.section.muted {
background-color: var(--muted-fg-color);
}

.section.muted .pane.colour {
background-color: var(--muted-bg-color);
color: var(--muted-fg-color);
@@ -375,6 +397,10 @@ img {

/* ECO */

.section.eco {
background-color: var(--eco-fg-color);
}

.section.eco .pane.colour {
background-color: var(--eco-bg-color);
color: var(--eco-fg-color);
@@ -427,6 +453,10 @@ img {

/* ALT */

.section.alt {
background-color: var(--alt-fg-color);
}

.section.alt .pane.colour {
background-color: var(--alt-bg-color);
color: var(--alt-fg-color);
@@ -479,6 +509,10 @@ img {

/* BETA */

.section.beta {
background-color: var(--beta-fg-color);
}

.section.beta .pane.colour {
background-color: var(--beta-bg-color);
color: var(--beta-fg-color);
@@ -532,6 +566,10 @@ img {

/* BLURPLE */

.section.blurple {
background-color: var(--blurple-fg-color);
}

.section.blurple .pane.colour {
background-color: var(--blurple-bg-color);
color: var(--blurple-fg-color);
@@ -589,20 +627,6 @@ img {
display: block;
}

.pane.image {
padding: 0;
padding: 0;
background-position: center;
background-size: cover;
}

.pane.image .overlay {
opacity: 0.25;
position: relative;
width: 100%;
height: 100%;
}

.pane hr {
margin: 1rem 0;
border: 0.1rem solid red;
@@ -691,7 +715,8 @@ img {
}

.actions .image-action * {
height: 6rem;
max-width: 75%;
max-height: 10rem;
}

.central>* {


Write Preview
Loading…
Cancel
Save