admin/avrahamsociety
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

parallax, font size is bigger on mobile

Browse Source
This commit is contained in:
Lazy Hippopotamus
2023-06-15 09:36:52 -04:00
parent 64d643267c
commit 73b265997e
7 changed files with 264 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
about.html Normal file
View File

@@ -0,0 +1,129 @@
<!DOCTYPE html>
<!--
Kuwait flag colors:
Green: #007b3a
Red: #cf0821
Black: black
White: white
-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jhewit | Home</title>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<div id="sider-outer">
<div id="sider">
<h2>Sidebar</h2>
<div id="sider-cats">
<input type="checkbox" id="i_1" class="hidden" />
<label for="i_1">Category 1</label>
<div>
<a href="#">This is a link</a><br>
<a href="#">Another link</a>
</div><br>
<input type="checkbox" id="i_2" class="hidden" />
<label for="i_2">Category 2</label>
<div>
<a href="#">Third link, new category</a><br>
<a href="#">Links.</a>
</div>
</div>
<img src="res/arrow-none.svg" onclick="toggle_sidebar()" />
</div>
</div>
<div id="outer">
<div id="header">
<div id="head-marker" class="scrolly"></div>
<div id="headin">
<h1>Jhewit</h1>
<div id="links-outer">
<input id="hambugha" type="checkbox" style="display: none;">
<label for="hambugha">Ham</label>
<div id="links">
<div class="link">
<a href="index.html">HOME</a>
</div>
<div></div>
<div class="link">
<a href="about.html">ABOUT JHEWIT</a>
</div>
<div></div>
<div class="dropdown">
DROPDOWN MENU
</div>
<div>
<div class="dropdown-inner">
<a>DROPDOWN MENU LINK</a>
</div>
</div>
<!--<div>
<div class="dropdown-inner">
<a href="#">
LINK
</a>
<a href="#">
LINK
</a>
<a href="#">
LINK
</a>
</div>
</div>-->
</div>
</div>
</div>
</div>
<div class="carousel-outer">
<img src="res/arrow-left.svg" />
<div class="carousel" id="carousel_1">
<div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);" class="selected">Category #1</div>
<div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #2</div>
<div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #3</div>
<div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #4</div>
<div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #5</div>
<div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #6</div>
<div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #7</div>
<div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #8</div>
<div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #9</div>
<div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #10</div>
<div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #11</div>
<div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #12</div>
<div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #13</div>
</div>
<img src="res/arrow-right.svg" />
</div>
<div id="content">
<p>
Some information about Jhewit
</p>
<p>
Some images and such
</p>
<p>
Contact info, perhaps?
</p>
</div>
<div id="footer">
<p>
This is a footer for content to go into.
</p>
<p>
This is another part of the footer for more content.
</p>
<p>
The footer is good for a quick About blurb, social icons, etc.
</p>
</div>
<div id="truebottom">
Website by <a href="https://swaous.asuscomm.com">Tyler Clarke</a>.
</div>
</div>
<script src="main.js"></script>
</body>
</html>

37
index.html
View File

@@ -47,31 +47,19 @@
<label for="hambugha">Ham</label> <label for="hambugha">Ham</label>
<div id="links"> <div id="links">
<div class="link"> <div class="link">
<a href="#">LINK 1</a> <a href="index.html">HOME</a>
</div>
<div></div>
<div class="link">
<a href="about.html">ABOUT JHEWIT</a>
</div> </div>
<div></div> <div></div>
<div class="dropdown"> <div class="dropdown">
HI DROPDOWN MENU
</div> </div>
<div> <div>
<div class="dropdown-inner"> <div class="dropdown-inner">
<a>TEST</a> <a>DROPDOWN MENU LINK</a>
</div>
</div>
<div class="dropdown">
HI
</div>
<div>
<div class="dropdown-inner">
<a>TEST</a>
</div>
</div>
<div class="dropdown">
HI
</div>
<div>
<div class="dropdown-inner">
<a>TEST</a>
</div> </div>
</div> </div>
<!--<div> <!--<div>
@@ -137,6 +125,15 @@
</p> </p>
</div> </div>
</div> </div>
<p>
Parallaxing image below. For reasons beyond my control it may look bad (or even not function at all) on iOS devices.
Parallaxes are primarily useful as dividers between paragraphs.
</p>
<div class="parallax" style="background-image: url('https://www.thoughtco.com/thmb/EXpjUAx2ZEgV64eKcsAsX7Ucl6w=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/GettyImages_482194715-56a1329e5f9b58b7d0bcf666.jpg');"></div>
<p>
Generic paragraph element here
</p>
</div> </div>
<div id="footer"> <div id="footer">
<p> <p>
@@ -146,7 +143,7 @@
This is another part of the footer for more content. This is another part of the footer for more content.
</p> </p>
<p> <p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt omnis dolor minus rerum eaque dicta tempora debitis. Aut, ut illo delectus qui debitis, laborum sit in repellat quo sint fugit. The footer is good for a quick About blurb, social icons, etc.
</p> </p>
</div> </div>
<div id="truebottom"> <div id="truebottom">

87
main.css
View File

@@ -35,7 +35,7 @@ h1 {
text-align: center; text-align: center;
padding-top: 6%; padding-top: 6%;
padding-bottom: 10%; padding-bottom: 10%;
min-height: 80vh; min-height: 90vh;
box-sizing: border-box; box-sizing: border-box;
background-image: url(https://www.state.gov/wp-content/uploads/2022/02/Kuwait-2323x1406.png); background-image: url(https://www.state.gov/wp-content/uploads/2022/02/Kuwait-2323x1406.png);
background-attachment: fixed; background-attachment: fixed;
@@ -89,7 +89,7 @@ body {
padding: 10px; padding: 10px;
} }
#content { #content > * {
margin: 10%; margin: 10%;
} }
@@ -123,6 +123,7 @@ h1 {
/*color: red;*/ /*color: red;*/
margin-left: var(--sidebar-size); margin-left: var(--sidebar-size);
width: calc(100vw - var(--sidebar-size)); width: calc(100vw - var(--sidebar-size));
transition: margin-left 1s, width 1s;
/*width: 100vw;*/ /*width: 100vw;*/
background-color: white; background-color: white;
} }
@@ -349,6 +350,8 @@ h1 {
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
justify-content: space-evenly; justify-content: space-evenly;
background-color: black; background-color: black;
border-bottom: 0.3px solid grey;
margin-top: 10%;
} }
#footer > p { #footer > p {
@@ -369,7 +372,7 @@ h1 {
max-width: 100%; max-width: 100%;
} }
@media (max-width: 900px) { @media (max-width: 1000px) {
#footer { #footer {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
@@ -411,6 +414,7 @@ h1 {
#links-outer { #links-outer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-size: 3em;
} }
#links > div:nth-child(2n) { #links > div:nth-child(2n) {
@@ -425,4 +429,81 @@ h1 {
#hambugha:checked + label + #links { #hambugha:checked + label + #links {
visibility: visible; visibility: visible;
} }
p {
margin-left: 20px !important;
margin-right: 20px !important;
font-size: 2em;
}
#head-marker {
margin-top: 30vh;
}
}
#content > p {
margin: 30px;
margin-left: 20vw;
margin-right: 20vw;
position: relative;
overflow: hidden;
}
#content > p > .overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1000000;
opacity: 50%;
}
/*
@keyframes shmoosh {
0% {
scale: 1;
translate: 10px -30px;
}
38% {
scale: 0.8 1;
translate: 80% 30%;
rotate: 160deg;
}
40% {
scale: 0.8 1;
translate: 80% 30%;
rotate: 160deg;
}
78% {
scale: 1.3;
translate: 0% 50%;
rotate: -20deg;
}
80% {
scale: 1.3;
translate: 0% 50%;
rotate: -20deg;
}
100% {
scale: 1;
translate: 10px -30px;
}
}
.shmoosh {
transform-origin: center;
animation: shmoosh 10s linear infinite;
}*/
.parallax {
height: clamp(100px, 40vh, 600px);
margin-left: 0 !important;
margin-right: 0 !important;
background-size: cover;
background-position: center;
background-attachment: fixed;
} }

8
main.js
View File

@@ -8,6 +8,9 @@ function clamp(min, val, max) {
return val; return val;
} }
var ua = window.navigator.userAgent;
var iOS = !!ua.match(/iPad/i) || !!ua.match(/iPhone/i); // THANKS, STACKOVERFLOW
function getNearestChildIndexTo(element, position) { function getNearestChildIndexTo(element, position) {
var nearest = undefined; var nearest = undefined;
var nearestValue = Infinity; var nearestValue = Infinity;
@@ -70,6 +73,11 @@ const scrollchecks = () => {
} }
} }
}); });
if (iOS) {
Array.from(document.getElementsByClassName("parallax")).forEach((item, i) => {
item.style.backgroundPosition = "50% calc(" + (-item.getBoundingClientRect().top) + "px)";
});
}
}; };

9
src/_about.html Normal file
View File

@@ -0,0 +1,9 @@
<p>
Some information about Jhewit
</p>
<p>
Some images and such
</p>
<p>
Contact info, perhaps?
</p>

10
src/_index.html
View File

@@ -23,4 +23,12 @@
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum earum quia laudantium ipsam eius, qui sint. Repellat consectetur asperiores ex ea, earum deserunt in distinctio corrupti, soluta voluptates, tenetur dolore. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maiores animi necessitatibus, quia expedita architecto molestiae autem perferendis nulla minima quisquam consequatur laborum saepe repellat corporis, temporibus quibusdam omnis id nesciunt. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum earum quia laudantium ipsam eius, qui sint. Repellat consectetur asperiores ex ea, earum deserunt in distinctio corrupti, soluta voluptates, tenetur dolore. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maiores animi necessitatibus, quia expedita architecto molestiae autem perferendis nulla minima quisquam consequatur laborum saepe repellat corporis, temporibus quibusdam omnis id nesciunt.
</p> </p>
</div> </div>
</div> </div>
<p>
Parallaxing image below. For reasons beyond my control it may look bad (or even not function at all) on iOS devices.
Parallaxes are primarily useful as dividers between paragraphs.
</p>
<div class="parallax" style="background-image: url('https://www.thoughtco.com/thmb/EXpjUAx2ZEgV64eKcsAsX7Ucl6w=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/GettyImages_482194715-56a1329e5f9b58b7d0bcf666.jpg');"></div>
<p>
Generic paragraph element here
</p>

28
src/template.html
View File

@@ -47,31 +47,19 @@
<label for="hambugha">Ham</label> <label for="hambugha">Ham</label>
<div id="links"> <div id="links">
<div class="link"> <div class="link">
<a href="#">LINK 1</a> <a href="index.html">HOME</a>
</div>
<div></div>
<div class="link">
<a href="about.html">ABOUT JHEWIT</a>
</div> </div>
<div></div> <div></div>
<div class="dropdown"> <div class="dropdown">
HI DROPDOWN MENU
</div> </div>
<div> <div>
<div class="dropdown-inner"> <div class="dropdown-inner">
<a>TEST</a> <a>DROPDOWN MENU LINK</a>
</div>
</div>
<div class="dropdown">
HI
</div>
<div>
<div class="dropdown-inner">
<a>TEST</a>
</div>
</div>
<div class="dropdown">
HI
</div>
<div>
<div class="dropdown-inner">
<a>TEST</a>
</div> </div>
</div> </div>
<!--<div> <!--<div>
@@ -121,7 +109,7 @@
This is another part of the footer for more content. This is another part of the footer for more content.
</p> </p>
<p> <p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt omnis dolor minus rerum eaque dicta tempora debitis. Aut, ut illo delectus qui debitis, laborum sit in repellat quo sint fugit. The footer is good for a quick About blurb, social icons, etc.
</p> </p>
</div> </div>
<div id="truebottom"> <div id="truebottom">