Skip to content

Commit

Permalink
Add WEBP support
Browse files Browse the repository at this point in the history 
Fixes #25 FINALLY YES
  • Loading branch information
@Pizzacus
Pizzacus committed Feb 10, 2019
1 parent a6b7e07 commit 71d7ce3
Show file tree
Hide file tree
Showing 34 changed files with 125 additions and 35 deletions.
Binary file modified High Resolution and PSDs/Fanarts/fanart1.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
0 High Resolution and PSDs/Fanarts/fanart4.jpg → High Resolution and PSDs/Fanarts/fanart2.jpg
View file
File renamed without changes
Binary file removed High Resolution and PSDs/Fanarts/fanart2.png
View file
Binary file not shown.
Binary file modified High Resolution and PSDs/Fanarts/fanart3.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added High Resolution and PSDs/Fanarts/fanart4.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added app/assets/img/webp/back.webp
View file
Binary file not shown.
Binary file added app/assets/img/webp/back_end.webp
View file
Binary file not shown.
Binary file added app/assets/img/webp/debiru.webp
View file
Binary file not shown.
Binary file added app/assets/img/webp/fanarts/fanart1.webp
View file
Binary file not shown.
Binary file added app/assets/img/webp/fanarts/fanart2.webp
View file
Binary file not shown.
Binary file added app/assets/img/webp/fanarts/fanart3.webp
View file
Binary file not shown.
Binary file added app/assets/img/webp/fanarts/fanart4.webp
View file
Binary file not shown.
Binary file added app/assets/img/webp/fanarts/fanart5.webp
View file
Binary file not shown.
Binary file added app/assets/img/webp/fanarts/fanart6.webp
View file
Binary file not shown.
Binary file added app/assets/img/webp/fanarts/fanart7.webp
View file
Binary file not shown.
Binary file added app/assets/img/webp/fanarts/fanart8.webp
View file
Binary file not shown.
Binary file added app/assets/img/webp/fanarts/fanart9.webp
View file
Binary file not shown.
Binary file added app/assets/img/webp/github_link.webp
View file
Binary file not shown.
Binary file added app/assets/img/webp/google_mic.webp
View file
Binary file not shown.
Binary file added app/assets/img/webp/pope.webp
View file
Binary file not shown.
Binary file added app/assets/img/webp/portraits/gabriel.webp
View file
Binary file not shown.
Binary file added app/assets/img/webp/portraits/sadist.webp
View file
Binary file not shown.
Binary file added app/assets/img/webp/portraits/vignette.webp
View file
Binary file not shown.
Binary file added app/assets/img/webp/satania_cute.webp
View file
Binary file not shown.
Binary file added app/assets/img/webp/satania_dance_spritesheet.webp
View file
Binary file not shown.
Binary file added app/assets/img/webp/satania_evil.webp
View file
Binary file not shown.
Binary file added app/assets/img/webp/satania_happy.webp
View file
Binary file not shown.
Binary file added app/assets/img/webp/satania_reindeer.webp
View file
Binary file not shown.
Binary file added app/assets/img/webp/satania_sad.webp
View file
Binary file not shown.
Binary file added app/assets/img/webp/satania_thumbsup.webp
View file
Binary file not shown.
114 changes: 92 additions & 22 deletions app/assets/index.html
View file
Expand Up @@ -111,6 +111,11 @@
</head>

<body>
<!-- Webp support detection for CSS -->
<img
style="position: absolute;top: -1000px;"
src="data:image/webp;base64,UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA"
onload="document.body.classList.add('has-webp')"/>
<div i18n-group="main-intro" class="intro">
<div class="main">
<div class="back-overlay"></div>
Expand Down Expand Up @@ -263,7 +268,10 @@ <h2 i18n="best-waifu-ever">The best Waifu. <b>Ever.</b></h2>
<div class="scroll">
<div i18n-group="become-a-satania-follower" class="section">
<div class="left image">
<img src="img/satania_thumbsup.png" alt="" />
<picture>
<source srcset="img/webp/satania_thumbsup.webp" type="image/webp">
<img src="img/satania_thumbsup.png" alt="" />
</picture>
</div>

<div class="right">
Expand All @@ -281,13 +289,19 @@ <h2 i18n="large-text">A lovely smile.<br /> Two magnificent eyes.<br /> A stunni
</div>

<div class="right image">
<img src="img/satania_cute.png" alt="" />
<picture>
<source srcset="img/webp/satania_cute.webp" type="image/webp">
<img src="img/satania_cute.png" alt="" />
</picture>
</div>
</div>

<div i18n-group="end-the-waifu-war" class="section">
<div class="left image">
<img src="img/satania_happy.png" alt="" />
<picture>
<source srcset="img/webp/satania_happy.webp" type="image/webp">
<img src="img/satania_happy.png" alt="" />
</picture>
</div>

<div class="right">
Expand All @@ -305,7 +319,10 @@ <h2 i18n="large-text">In short, she's just perfect.</h2>
<span i18n="searchbar-name">satania</span>

<div class="buttons">
<img id="search-by-voice" src="img/google_mic.png" height="24px" />
<picture>
<source srcset="img/webp/google_mic.webp" type="image/webp">
<img id="search-by-voice" src="img/google_mic.png" height="24px" />
</picture>
<img id="search-button" src="img/google_search.svg" height="24px" />
</div>
</div><br />
Expand Down Expand Up @@ -487,7 +504,10 @@ <h2 i18n="large-text">The other characters are trash, no exception.</h2>

<div i18n-group="the-others-are-trash" class="compare">
<div i18n-group="gabriel" class="character gabriel">
<img src="img/portraits/gabriel.jpg" />
<picture>
<source srcset="img/webp/portraits/gabriel.webp" type="image/webp">
<img src="img/portraits/gabriel.jpg" />
</picture>
<div class="name">
<span i18n="name">Gabriel</span>
<div i18n="name-detail" class="small">
Expand All @@ -505,7 +525,10 @@ <h2 i18n="large-text">The other characters are trash, no exception.</h2>
</div>

<div i18n-group="raphiel" class="character raphiel">
<img src="img/portraits/sadist.jpg" />
<picture>
<source srcset="img/webp/portraits/sadist.webp" type="image/webp">
<img src="img/portraits/sadist.jpg" />
</picture>
<div class="name">
<span i18n="name">Raphiel</span>
<div i18n="name-detail" class="small">
Expand All @@ -523,7 +546,10 @@ <h2 i18n="large-text">The other characters are trash, no exception.</h2>
</div>

<div i18n-group="vignette" class="character vignette">
<img src="img/portraits/vignette.jpg" />
<picture>
<source srcset="img/webp/portraits/vignette.webp" type="image/webp">
<img src="img/portraits/vignette.jpg" />
</picture>
<div class="name">
<span i18n="name">Vignette</span>
<div i18n="name-detail" class="small">
Expand All @@ -545,15 +571,42 @@ <h2 i18n="large-text">The other characters are trash, no exception.</h2>

<div i18n-group="fanarts" class="section">
<div class="left image slideshow">
<img height="500px" href="https://www.pixiv.net/member_illust.php?mode=medium&illust_id=62549900" class="shown" src="img/fanarts/fanart1.jpg" alt="" />
<img height="500px" href="https://www.pixiv.net/member_illust.php?mode=medium&illust_id=62828639" src="img/fanarts/fanart2.jpg" alt="" />
<img height="500px" href="https://eriyy.deviantart.com/art/Satania-Sama-660744221" src="img/fanarts/fanart3.png" alt="" />
<img height="500px" href="https://www.pixiv.net/member_illust.php?mode=medium&illust_id=61218653" src="img/fanarts/fanart4.png" alt="" />
<img height="500px" href="https://www.pixiv.net/member_illust.php?mode=medium&illust_id=61476097" src="img/fanarts/fanart5.jpg" alt="" />
<img height="500px" href="https://www.pixiv.net/member_illust.php?mode=medium&illust_id=61519696" src="img/fanarts/fanart6.jpg" alt="" />
<img height="500px" href="https://www.pixiv.net/member_illust.php?mode=medium&illust_id=62059829" src="img/fanarts/fanart7.jpg" alt="" />
<img height="500px" href="https://www.pixiv.net/member_illust.php?mode=medium&illust_id=61362109" src="img/fanarts/fanart8.png" alt="" />
<img height="500px" href="https://www.pixiv.net/member_illust.php?mode=medium&illust_id=62195163" src="img/fanarts/fanart9.jpg" alt="" />
<picture x-source="https://www.pixiv.net/member_illust.php?mode=medium&illust_id=62549900" class="shown">
<source srcset="img/webp/fanarts/fanart1.webp" type="image/webp">
<img height="500px" src="img/fanarts/fanart1.jpg" alt="" />
</picture>
<picture x-source="https://www.pixiv.net/member_illust.php?mode=medium&illust_id=62828639">
<source srcset="img/webp/fanarts/fanart2.webp" type="image/webp">
<img height="500px" src="img/fanarts/fanart2.jpg" alt="" />
</picture>
<picture x-source="https://eriyy.deviantart.com/art/Satania-Sama-660744221">
<source srcset="img/webp/fanarts/fanart3.webp" type="image/webp">
<img height="500px" src="img/fanarts/fanart3.png" alt="" />
</picture>
<picture x-source="https://www.pixiv.net/member_illust.php?mode=medium&illust_id=61218653">
<source srcset="img/webp/fanarts/fanart4.webp" type="image/webp">
<img height="500px" src="img/fanarts/fanart4.png" alt="" />
</picture>
<picture x-source="https://www.pixiv.net/member_illust.php?mode=medium&illust_id=61476097">
<source srcset="img/webp/fanarts/fanart5.webp" type="image/webp">
<img height="500px" src="img/fanarts/fanart5.jpg" alt="" />
</picture>
<picture x-source="https://www.pixiv.net/member_illust.php?mode=medium&illust_id=61519696">
<source srcset="img/webp/fanarts/fanart6.webp" type="image/webp">
<img height="500px" src="img/fanarts/fanart6.jpg" alt="" />
</picture>
<picture x-source="https://www.pixiv.net/member_illust.php?mode=medium&illust_id=62059829">
<source srcset="img/webp/fanarts/fanart7.webp" type="image/webp">
<img height="500px" src="img/fanarts/fanart7.jpg" alt="" />
</picture>
<picture x-source="https://www.pixiv.net/member_illust.php?mode=medium&illust_id=61362109">
<source srcset="img/webp/fanarts/fanart8.webp" type="image/webp">
<img height="500px" src="img/fanarts/fanart8.png" alt="" />
</picture>
<picture x-source="https://www.pixiv.net/member_illust.php?mode=medium&illust_id=62195163">
<source srcset="img/webp/fanarts/fanart9.webp" type="image/webp">
<img height="500px" src="img/fanarts/fanart9.jpg" alt="" />
</picture>
<a i18n="source" class="source">Source</a>
</div>

Expand All @@ -573,12 +626,15 @@ <h2 i18n="large-text">Also, she's not an autist, stop&nbsp;saying&nbsp;that</h2>
</div>

<div class="right image">
<img src="img/satania_reindeer.png" alt="" />
<picture>
<source srcset="img/webp/satania_reindeer.webp" type="image/webp">
<img src="img/satania_reindeer.png" alt="" />
</picture>
<div class="nose-button" onclick="startSnow()"></div>
</div>
</div>

<div i18n-group="pope-francis" class="section background" style="background-image: url('img/pope.jpg');min-height: 50vw;">
<div i18n-group="pope-francis" class="section background pope-francis">
<div class="back-overlay"></div>
<div class="center">
<h2 i18n="large-text">Even Pope Francis loves Satania.</h2>
Expand Down Expand Up @@ -637,7 +693,10 @@ <h2 i18n="large-text">She replaces all the other waifus in the show</h2>
How about the <b>greatest demon in the entire universe?</b>
</div>
<div class="answer">
<img width="100%" src="img/debiru.png" alt="" />
<picture>
<source srcset="img/webp/debiru.webp" type="image/webp">
<img width="100%" src="img/debiru.png" alt="" />
</picture>
</div>
</label>
</span>
Expand All @@ -652,14 +711,20 @@ <h2 i18n="large-text">Ravioli, ravioli,<br />pls, no more bulli</h2>
</div>

<div class="right image">
<img src="img/satania_sad.png" alt="" />
<picture>
<source srcset="img/webp/satania_sad.webp" type="image/webp">
<img src="img/satania_sad.png" alt="" />
</picture>
</div>
</div>


<div i18n-group="large-text" class="section">
<div class="left image">
<img src="img/satania_evil.png" alt="" />
<picture>
<source srcset="img/webp/satania_evil.webp" type="image/webp">
<img src="img/satania_evil.png" alt="" />
</picture>
</div>

<div class="right">
Expand All @@ -677,7 +742,12 @@ <h2 i18n="sub-text">Period. The end.</h2>
</div>

<div class="footer">
<a href="https://github.com/Pizzacus/satania.moe"><img src="img/github_link.png" alt="" /></a>
<a href="https://github.com/Pizzacus/satania.moe">
<picture>
<source srcset="img/webp/github_link.webp" type="image/webp">
<img src="img/github_link.png" alt="" />
</picture>
</a>
</div>

<canvas class="snow full canvas-background"></canvas>
Expand Down
27 changes: 22 additions & 5 deletions app/components.scss
View file
Expand Up @@ -222,6 +222,11 @@
z-index: -1;
pointer-events: none;


.has-webp & {
background-image: url("./img/webp/satania_dance_spritesheet.webp");
}

@media (max-width: 1024px) {
display: none;
}
Expand Down Expand Up @@ -359,17 +364,18 @@ table {
.slideshow {
text-align: center;

img {
picture, img {
display: none;
max-width: 100%;
animation-name: image-appear;
animation-duration: 2.5s;
animation-timing-function: ease-in-out;
opacity: 0;

&.shown {
display: inline-block;
}
}

picture.shown, .shown img {
display: inline-block;
}

.source {
Expand Down Expand Up @@ -558,6 +564,17 @@ table {
}
}
}

// EVEN POPE FRANCIS LOVES SATANIA -- I hear he's quite popular in the Bible fandom
.pope-francis {
background-image: url('img/pope.jpg');
min-height: 50vw;

.has-webp & {
background-image: url('img/webp/pope.webp');
}
}

// FLIPPING CARDS -- You click, they flip, simple enough
.card-toogle {
display: none;
Expand Down Expand Up @@ -613,7 +630,7 @@ table {
}
}

// because of CSS selector prioritization, this repettion is needed
// because of CSS selector prioritisation, this repetition is needed
&:active,
input.card-toogle:checked ~ &:active {
background: #E5E5E5;
Expand Down
8 changes: 8 additions & 0 deletions app/layout.scss
View file
Expand Up @@ -103,10 +103,18 @@
background-size: cover;
background-position: top right;
background-attachment: fixed;

.has-webp & {
background-image: url("./img/webp/back.webp");
}
}

.end {
background-image: url("./img/back_end.jpg");

.has-webp & {
background-image: url("./img/webp/back_end.webp");
}
}

.back-overlay {
Expand Down
11 changes: 3 additions & 8 deletions app/script.js
View file
Expand Up @@ -144,24 +144,19 @@ const slideshows = document.getElementsByClassName("slideshow"),
preloadedImages = [];

for (let slideshow of slideshows) {
let slides = slideshow.getElementsByTagName("img");
let slides = slideshow.getElementsByTagName("picture");

slideshow.currentSlide = 0;

slideshow.getElementsByClassName("source")[0].href = slides[0].getAttribute("href");
slideshow.getElementsByClassName("source")[0].href = slides[0].getAttribute("x-source");

window.setInterval(() => {
slides[slideshow.currentSlide].classList.remove("shown");
slideshow.currentSlide = (slideshow.currentSlide + 1) % slides.length;
slides[slideshow.currentSlide].classList.add("shown");

slideshow.getElementsByClassName("source")[0].href = slides[slideshow.currentSlide].getAttribute("href");
slideshow.getElementsByClassName("source")[0].href = slides[slideshow.currentSlide].getAttribute("x-source");
}, 2500);

// Image preloading
for (let slide of slides) {
preloadedImages.push(new Image().src = slide.src);
}
}

/*
Expand Down

0 comments on commit 71d7ce3

Please sign in to comment.