slight updates
All checks were successful
Swaous.Asuscomm Build / Build-Docker-Image (push) Successful in 35s
All checks were successful
Swaous.Asuscomm Build / Build-Docker-Image (push) Successful in 35s
This commit is contained in:
Lazy Hippopotamus
BIN
output/french-pub/CAone/asshole.png
Executable file
BIN
output/french-pub/CAone/asshole.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 681 KiB |
107
output/french-pub/CAone/index.html
Executable file
107
output/french-pub/CAone/index.html
Executable file
@@ -0,0 +1,107 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en">
|
||||
<!-- fancy scroll capture based on Not Art Gallery :D -->
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Cultural Activity 1 | Tyler Clarke</title>
|
||||
<link rel="stylesheet" href="main.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="fourthpage" class="page">
|
||||
<div>
|
||||
<b>While this hasn't altered my studies much, being a French film, there was quite a bit of new vocabulary to learn (subtitles were helpful):</b><br><br><br>
|
||||
|
||||
<ol>
|
||||
<li>Mariages: Weddings. This is mentioned quite early.</li>
|
||||
<li>Massacre: Same meaning as in English. Again, c’est un film interessant.</li>
|
||||
<li>Communiquer: (to) communicate.</li>
|
||||
<li>Chapeau: Hat</li>
|
||||
<li>Cerises: Cherries</li>
|
||||
<li>Racistes: Racists. Yep. Interesting movie.</li>
|
||||
<li>Arbres: Trees.</li>
|
||||
<li>Voisin: Neighbor.</li>
|
||||
<li>Exposition cadavre: Cadaver exhibition</li>
|
||||
<li>Viande: Meat</li>
|
||||
<li>Carnivore: carnivorous</li>
|
||||
<li>Carrée: Square</li>
|
||||
<li>Rien: Nothing</li>
|
||||
<li>Monnaie: Money</li>
|
||||
<li>Que est-ce vous fait: What are you doing?</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
<div id="thirdpage" class="page">
|
||||
<div><p>
|
||||
Being set almost entirely in France, it presented an interesting (albeit quite exaggerated) image of Paris. Shown
|
||||
occasionally were the infamous faire la bise, a hospital, various government officials, and some “typical citizens”
|
||||
(particularly memorably, a very angry man whose entire part in the film was to yell “a**hole” in French). I was actually surprised at how close
|
||||
an analogue French urban culture, as depicted, is to urban culture in America. It was, in a way, eye-opening: My default assumption about France was
|
||||
largely, as I believe most people have experienced, shaped by American films. To actually watch something out of France demonstrated just how
|
||||
wrong my default assumption was, and how similar the French really are to Americans. I would imagine that this is because urban areas tend to be
|
||||
progressive, which means dropping a lot of traditions most people would expect in France, and especially since in major population centers like Paris
|
||||
there is a heavy influx of people from other places, which leads to cultural pollution and the eventual eradication of tradition in tote.
|
||||
</p>
|
||||
<br>
|
||||
<img src="poorpeople.png" /></div>
|
||||
</div>
|
||||
<div id="secondpage" class="page">
|
||||
<div>
|
||||
La Belle Verte is a film about extra-terrestrial vegan telepaths who travel to Earth. The goal of the movie seems to be largely
|
||||
to point out hypocrisies and problems in modern human society (“For
|
||||
instance, if you want something, you can’t get it without money.”, “Even to eat?”, “Especially!”). It was a very
|
||||
well-made movie; while not as comedic as advertised, it contained very well-presented messages about society and human
|
||||
cruelty.<br><br>
|
||||
<img src="asshole.png" />
|
||||
<br><br>
|
||||
J’aime ce film. C’est interessant.
|
||||
</div>
|
||||
</div>
|
||||
<div id="firstpage" class="page">
|
||||
<div>
|
||||
<b>My Activity:</b> My activity of choice was to watch a Francophone movie.<br>
|
||||
<b>My Movie Choice:</b> I decided to watch a Coline Serreau film named “La Belle Verte”.
|
||||
<br><br>
|
||||
<img src="labelleverte.png" />
|
||||
</div>
|
||||
</div>
|
||||
<div id="head" class="classic">
|
||||
<div id="head-inner">
|
||||
<h1>Tyler Clarke</h1>
|
||||
<h2>Cultural Activity 1</h2>
|
||||
</div>
|
||||
<div id="scrollDown">Scroll Down To "You've Reached The End"</div>
|
||||
</div>
|
||||
<div id="final">
|
||||
<div id="final-inner">
|
||||
Word Count: <span id="wordcount"></span><br><br>
|
||||
<i>Web design by Tyler Clarke. Images extracted from “La Belle Verte” by Tyler Clarke.<br>
|
||||
Design not licensed. Use it as you like. I have no clue which copyrights, trademarks, and licenses apply to the images, but I extracted them from a legally obtained copy.<br>
|
||||
Scripts by Tyler Clarke, with the help of unlicensed StackOverflow snippets (referenced in the code with comments).</i>
|
||||
<div id="youfinished" style="display: none;">
|
||||
You've reached the end!
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="main.js"></script>
|
||||
<script>
|
||||
const scrolly_check = () => {
|
||||
Array.from(document.getElementsByClassName("scrolly")).forEach((el) => {
|
||||
var rect = el.getBoundingClientRect();
|
||||
if (rect.bottom > 0 && rect.top < window.innerHeight) {
|
||||
el.classList.add("scrolly-in");
|
||||
}
|
||||
else {
|
||||
el.classList.remove("scrolly-in");
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
window.addEventListener("wheel", scrolly_check);
|
||||
window.addEventListener("scroll", scrolly_check);
|
||||
|
||||
scrolly_check();
|
||||
document.getElementById("head").style.backgroundColor = "black";
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
BIN
output/french-pub/CAone/labelleverte.png
Executable file
BIN
output/french-pub/CAone/labelleverte.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 459 KiB |
178
output/french-pub/CAone/main.css
Executable file
178
output/french-pub/CAone/main.css
Executable file
@@ -0,0 +1,178 @@
|
||||
@keyframes bounce {
|
||||
0% {
|
||||
margin-top: 0px;
|
||||
}
|
||||
25% {
|
||||
margin-top: 100px;
|
||||
}
|
||||
50% {
|
||||
margin-top: 0px;
|
||||
}
|
||||
75% {
|
||||
margin-top: -100px;
|
||||
}
|
||||
100% {
|
||||
margin-top: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Cantarell var";
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
font-style: normal;
|
||||
font-named-instance: "Regular";
|
||||
src: url("https://swaous.asuscomm.com/Cantarell-VF.otf") format("opentype");
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: Cantarell;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
text-align: center;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body{
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
#head {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: white;
|
||||
transition: background-color 3s;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#head-inner {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
#scrollDown {
|
||||
position: absolute;
|
||||
top: 80%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -100%);
|
||||
display: none;
|
||||
color: green;
|
||||
font-family: monospace;
|
||||
font-weight: bold;
|
||||
font-size: 1.5em;
|
||||
animation-name: bounce;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
#scrollDown.ready {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.page {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
#secondpage {
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#thirdpage {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
#thirdpage > div > p{
|
||||
background-image: linear-gradient(to right, blue 33%, white 33%, white 66%, red 66%);
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
font-weight: bold;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
#fourthpage > div > ol > li {
|
||||
text-align: left;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
ol {
|
||||
height: 20vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-left: 5ch;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
#firstpage {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.page > div {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: left;
|
||||
max-width: 60vw;
|
||||
}
|
||||
|
||||
b {
|
||||
color: green;
|
||||
}
|
||||
|
||||
#final {
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#final-inner {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
width: 100vw;
|
||||
padding-left: 25vw;
|
||||
padding-right: 25vw;
|
||||
box-sizing: border-box;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
#youfinished {
|
||||
position: absolute;
|
||||
top: 250%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -100%);
|
||||
color: green;
|
||||
font-family: monospace;
|
||||
font-weight: bold;
|
||||
font-size: 1.5em;
|
||||
animation-name: bounce;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
img{
|
||||
box-sizing: border-box;
|
||||
padding-left: 20%;
|
||||
padding-right: 20%;
|
||||
max-width: 100%;
|
||||
transition: padding 1s;
|
||||
}
|
||||
|
||||
img:hover {
|
||||
padding-left: 10%;
|
||||
padding-right: 10%;
|
||||
}
|
||||
129
output/french-pub/CAone/main.js
Executable file
129
output/french-pub/CAone/main.js
Executable file
@@ -0,0 +1,129 @@
|
||||
/* Fun scroll capture stuff :D */
|
||||
var scrollPos = {
|
||||
realX: 0,
|
||||
realY: 0,
|
||||
virtX: 0,
|
||||
virtY: 0
|
||||
};
|
||||
|
||||
const rScroll = () => {
|
||||
window.scrollTo({
|
||||
top: scrollPos.virtY,
|
||||
left: scrollPos.virtX
|
||||
});
|
||||
};
|
||||
|
||||
function textNodesUnder(el){ // THANKS, STACKOVERFLOW
|
||||
var n, a=[], walk=document.createTreeWalker(el,NodeFilter.SHOW_TEXT,null,false);
|
||||
while(n=walk.nextNode()) a.push(n);
|
||||
return a;
|
||||
}
|
||||
|
||||
const firstRoomSize = 3000;
|
||||
const secondRoomSize = 3000;
|
||||
|
||||
const rooms = [
|
||||
{
|
||||
el: document.getElementById("head"),
|
||||
size: 3000,
|
||||
type: "opacity"
|
||||
},
|
||||
{
|
||||
el: document.getElementById("firstpage"),
|
||||
size: 3000,
|
||||
type: "opacity"
|
||||
},
|
||||
{
|
||||
el: document.getElementById("secondpage"),
|
||||
size: 3000,
|
||||
type: "opacity"
|
||||
},
|
||||
{
|
||||
el: document.getElementById("thirdpage"),
|
||||
size: 3000,
|
||||
type: "opacity"
|
||||
}
|
||||
];
|
||||
|
||||
const doScrollTasks = () => {
|
||||
var roomOffset = 0;
|
||||
rooms.forEach(item => {
|
||||
if (item.type == "opacity") {
|
||||
var subtractor = 0;
|
||||
if (scrollPos.realY - roomOffset > item.size / 2) {
|
||||
subtractor = (scrollPos.realY - roomOffset) - item.size / 2;
|
||||
}
|
||||
var percent = (item.size - subtractor - (scrollPos.realY - roomOffset)) / item.size;
|
||||
item.el.style.opacity = percent;
|
||||
if ((item.size - subtractor - (scrollPos.realY - roomOffset)) / item.size < 0) {
|
||||
item.el.style.visibility = "hidden";
|
||||
}
|
||||
else {
|
||||
item.el.style.visibility = "";
|
||||
}
|
||||
}
|
||||
roomOffset += item.size;
|
||||
});
|
||||
document.getElementsByTagName("ol")[0].scrollTo({
|
||||
left: 0,
|
||||
top: (scrollPos.realY - roomOffset) / 10
|
||||
});
|
||||
var baseline = (scrollPos.realY - roomOffset) / 10 - document.getElementsByTagName("ol")[0].scrollHeight;
|
||||
scrollPos.virtY = baseline;
|
||||
baseline -= window.innerHeight;
|
||||
var proportion = ((window.innerWidth - baseline) / window.innerWidth);
|
||||
if (proportion < 0) {
|
||||
scrollPos.realY = roomOffset + (document.getElementsByTagName("ol")[0].scrollHeight + window.innerWidth + window.innerHeight) * 10;
|
||||
document.getElementById("youfinished").style.display = "";
|
||||
}
|
||||
document.getElementById("final-inner").style.transform = "translate(" + 100 * proportion + "vw, -50%)";
|
||||
document.getElementById("final").style.backgroundColor = "rgba(0, 0, 0, " + (baseline / window.innerWidth) + ")";
|
||||
rScroll();
|
||||
};
|
||||
|
||||
doScrollTasks(); // Initial scrolling reset and setup
|
||||
|
||||
const scrollBy = (x, y) => {
|
||||
scrollPos.realX += x;
|
||||
scrollPos.realY += y;
|
||||
if (scrollPos.realY < 0) {
|
||||
scrollPos.realY = 0;
|
||||
}
|
||||
if (scrollPos.realX != 0) {
|
||||
scrollPos.realX = 0;
|
||||
}
|
||||
doScrollTasks();
|
||||
}
|
||||
|
||||
window.addEventListener("wheel", (event) => {
|
||||
scrollBy(event.deltaX, event.deltaY);
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}, { passive: false });
|
||||
|
||||
document.getElementById("head").ontransitionend = () => {
|
||||
document.getElementById("scrollDown").classList.add("ready");
|
||||
};
|
||||
|
||||
window.addEventListener("keydown", (evt) => {
|
||||
if (evt.key == "ArrowUp") {
|
||||
scrollBy(0, -300);
|
||||
}
|
||||
else if (evt.key == "ArrowDown") {
|
||||
scrollBy(0, 300);
|
||||
}
|
||||
});
|
||||
|
||||
const countUnder = (node) => {
|
||||
var wc = 0;
|
||||
textNodesUnder(node).forEach(item => {
|
||||
item.textContent.split(" ").forEach(word => {
|
||||
if (word != "") {
|
||||
wc++;
|
||||
}
|
||||
});
|
||||
});
|
||||
return wc;
|
||||
};
|
||||
|
||||
document.getElementById("wordcount").innerText = countUnder(document.documentElement) - countUnder(document.getElementById("final"));
|
||||
BIN
output/french-pub/CAone/poorpeople.png
Executable file
BIN
output/french-pub/CAone/poorpeople.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 629 KiB |
Reference in New Issue
Block a user