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

things work on mobile now

Browse Source
This commit is contained in:
Lazy Hippopotamus
2023-06-14 19:31:48 -04:00
parent 667ac446e6
commit 64d643267c
6 changed files with 420 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

151
index.html
View File

@@ -1,13 +1,22 @@
<!DOCTYPE html> <!DOCTYPE html>
<!--
Kuwait flag colors:
Green: #007b3a
Red: #cf0821
Black: black
White: white
-->
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Jhewit | Home</title> <title>Jhewit | Home</title>
<link rel="stylesheet" href="main.css" /> <link rel="stylesheet" href="main.css" />
</head> </head>
<body class="sidebar-opened"> <body>
<div id="sider-outer"> <div id="sider-outer">
<div id="sider"> <div id="sider">
<h2>Sidebar</h2> <h2>Sidebar</h2>
@@ -25,7 +34,7 @@
<a href="#">Links.</a> <a href="#">Links.</a>
</div> </div>
</div> </div>
<img src="res/arrow-left.svg" onclick="toggle_sidebar()" /> <img src="res/arrow-none.svg" onclick="toggle_sidebar()" />
</div> </div>
</div> </div>
<div id="outer"> <div id="outer">
@@ -33,32 +42,52 @@
<div id="head-marker" class="scrolly"></div> <div id="head-marker" class="scrolly"></div>
<div id="headin"> <div id="headin">
<h1>Jhewit</h1> <h1>Jhewit</h1>
<div id="links"> <div id="links-outer">
<div class="link"> <input id="hambugha" type="checkbox" style="display: none;">
<a href="#">LINK 1</a> <label for="hambugha">Ham</label>
</div> <div id="links">
<div></div> <div class="link">
<div class="dropdown"> <a href="#">LINK 1</a>
HI
</div>
<div>
<div class="dropdown-inner">
<a>TEST</a>
</div> </div>
</div> <div></div>
<!--<div> <div class="dropdown">
<div class="dropdown-inner"> HI
<a href="#">
LINK
</a>
<a href="#">
LINK
</a>
<a href="#">
LINK
</a>
</div> </div>
</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 class="dropdown">
HI
</div>
<div>
<div class="dropdown-inner">
<a>TEST</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>
</div> </div>
@@ -82,36 +111,46 @@
<img src="res/arrow-right.svg" /> <img src="res/arrow-right.svg" />
</div> </div>
<div id="content"> <div id="content">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla <div class="image-relational-scrolling">
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla <div>
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla <img src="https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg" class="selected" />
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla <img src="https://www.badeloftusa.com/wp-content/uploads/2019/09/BW-02-XL-WHT-2020.jpg" />
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla <img src="https://www.applesfromny.com/wp-content/uploads/2020/05/20Ounce_NYAS-Apples2.png" />
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla <img src="https://res.cloudinary.com/dk-find-out/image/upload/q_80,w_1920,f_auto/pi_gqp5ha.jpg" />
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla <img src="https://www.thespruceeats.com/thmb/wiFS2z1vLTt3fHKDVaka5KiWshI=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc()/basic-cherry-pie-recipe-995136-14-dfe79487adf64a848a49dd07983b6614.jpg" />
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla </div>
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla <div>
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla <p>
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus optio ratione sit. Quibusdam veritatis nemo distinctio dolorem doloribus quos ullam, quisquam consectetur numquam ab fuga sint, nostrum corporis dolor iusto! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quibusdam consequatur suscipit vitae similique nulla animi inventore nisi perferendis eos, itaque nobis odit ut facilis tempore rerum delectus unde ducimus fuga.
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla </p>
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla <p>
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vitae, quam quisquam. Iste veniam ut velit. Voluptatem laborum repellat, aliquid nisi earum nesciunt eius voluptatum at quis sint perferendis eos dolore. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellat temporibus omnis excepturi tempore! Illo maxime vel dolor nulla, velit iure. Dolore asperiores accusantium sunt obcaecati nam doloremque suscipit laborum animi!
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla </p>
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla <p>
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit labore ut nihil, tempore quis mollitia voluptates magni? Tenetur, corporis voluptates quia earum blanditiis molestias dignissimos provident inventore aspernatur error assumenda. Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, et rem. Quo corporis dolorum magnam recusandae facilis voluptatum nostrum a, in perferendis sunt numquam maiores corrupti sed excepturi repudiandae. Tempora!
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla </p>
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla <p>
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rerum accusamus aliquam commodi voluptates laborum, quia sint facilis dolores aliquid eaque repellat dolor dolorem? Temporibus et rem dolorum neque excepturi optio. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem, adipisci rem natus magni eum ducimus alias tempore reprehenderit nulla architecto eveniet a nemo non quis ipsum quo officiis, vel sit!
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla </p>
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla <p>
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla 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.
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla </p>
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla </div>
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla </div>
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla </div>
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla <div id="footer">
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla <p>
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam! This is a footer for content to go into.
</p>
<p>
This is another part of the footer for more content.
</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.
</p>
</div>
<div id="truebottom">
Website by <a href="https://swaous.asuscomm.com">Tyler Clarke</a>.
</div> </div>
</div> </div>
<script src="main.js"></script> <script src="main.js"></script>

146
main.css
View File

@@ -33,7 +33,7 @@ h1 {
#header { #header {
text-align: center; text-align: center;
padding-top: 10%; padding-top: 6%;
padding-bottom: 10%; padding-bottom: 10%;
min-height: 80vh; min-height: 80vh;
box-sizing: border-box; box-sizing: border-box;
@@ -94,12 +94,16 @@ body {
} }
#headin { #headin {
padding-bottom: 2%; padding: 20px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding-top: 2%;
z-index: 10000000; z-index: 10000000;
box-sizing: border-box;
}
#hambugha + label {
display: none;
} }
h1 { h1 {
@@ -112,6 +116,7 @@ h1 {
#head-marker.scrolly-out + #headin { #head-marker.scrolly-out + #headin {
position: fixed; position: fixed;
justify-content: space-between;
transition: background-color 0.3s, color 0.3s; transition: background-color 0.3s, color 0.3s;
top: 0px; top: 0px;
left: 0px; left: 0px;
@@ -119,6 +124,7 @@ h1 {
margin-left: var(--sidebar-size); margin-left: var(--sidebar-size);
width: calc(100vw - var(--sidebar-size)); width: calc(100vw - var(--sidebar-size));
/*width: 100vw;*/ /*width: 100vw;*/
background-color: white;
} }
#head-marker.scrolly-out + #headin > #links > * > *, #head-marker.scrolly-out + #headin > #links > * { #head-marker.scrolly-out + #headin > #links > * > *, #head-marker.scrolly-out + #headin > #links > * {
@@ -161,15 +167,14 @@ body:not(.sidebar-opened) > #sider-outer > #sider > img {
left: 0px; left: 0px;
padding-left: 10px; padding-left: 10px;
background-color: red; background-color: red;
border-radius: 20px;
padding: 20px; padding: 20px;
clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
} }
#sider > img { #sider > img {
position: absolute; position: absolute;
right: 10px; right: 10px;
top: 50%; top: 50%;
transform: translateY(-50%);
width: 20px; width: 20px;
} }
@@ -219,12 +224,6 @@ a:hover {
color: darkgreen; color: darkgreen;
} }
@media (max-width: 1000px) {
#headin {
flex-direction: column;
}
}
.carousel > div { .carousel > div {
min-width: max(15vw, 15vh); min-width: max(15vw, 15vh);
min-height: max(15vw, 15vh); min-height: max(15vw, 15vh);
@@ -301,4 +300,129 @@ h1 {
.carousel-outer > img:last-child { .carousel-outer > img:last-child {
right: 2vw; right: 2vw;
text-align: center;
}
.image-relational-scrolling {
display: flex;
justify-content: space-between;
}
.image-relational-scrolling > div:last-child > p:last-child {
padding-bottom: 25vh;
}
.image-relational-scrolling > div:last-child > p {
padding-bottom: 75px;
max-width: 600px;
}
.image-relational-scrolling > div:first-child {
min-width: 30vw;
max-width: 30vw;
box-sizing: border-box;
position: sticky;
top: calc(25vh);
left: 0px;
overflow: hidden;
align-self: flex-start;
}
.image-relational-scrolling > div:first-child > img {
width: 100%;
height: 0px;
box-sizing: border-box;
position: relative;
opacity: 0%;
transition: opacity 200ms;
position: absolute;
}
.image-relational-scrolling > div:first-child > img.selected {
opacity: 100%;
height: auto;
position: initial;
}
#footer {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
justify-content: space-evenly;
background-color: black;
}
#footer > p {
padding: 2em;
color: white;
}
#truebottom {
background-color: black;
text-align: center;
padding: 5px;
color: white;
font-size: 0.7em;
}
.image-relational-scrolling > div:last-child > p > img {
display: none;
max-width: 100%;
}
@media (max-width: 900px) {
#footer {
grid-template-columns: 1fr;
}
.image-relational-scrolling > div:first-child {
display: none;
}
.image-relational-scrolling > div:last-child > p > img {
display: initial;
padding: 3em;
box-sizing: border-box;
}
.image-relational-scrolling {
display: flex;
justify-content: center;
}
#hambugha + label {
display: inline-block;
background-color: aliceblue;
padding: 10px;
margin: 10px;
margin-bottom: 0px;
}
#hambugha + label:hover {
background-color: grey;
}
#links {
display: flex;
visibility: hidden;
flex-direction: column;
height: 0px;
}
#links-outer {
display: flex;
flex-direction: column;
}
#links > div:nth-child(2n) {
display: none;
}
#links > div:nth-child(2n - 1):hover + div, #links > div:nth-child(2n):hover {
display: inline-block;
visibility: visible;
}
#hambugha:checked + label + #links {
visibility: visible;
}
} }

44
main.js
View File

@@ -8,6 +8,21 @@ function clamp(min, val, max) {
return val; return val;
} }
function getNearestChildIndexTo(element, position) {
var nearest = undefined;
var nearestValue = Infinity;
for (var i = 0; i < element.children.length; i++){ // There isn't a short-circuit here because we have to consider for transforms. I don't think I'll be doing anything that hack but you never know.
var box = element.children[i].getBoundingClientRect();
var elPos = box.top + box.height / 2;
var distance = Math.abs(position - elPos);
if (distance < nearestValue) {
nearestValue = distance;
nearest = i;
}
}
return nearest; // If the element has any children, this is guaranteed to be well-defined.
}
const scrollchecks = () => { const scrollchecks = () => {
var el = document.getElementById("header"); var el = document.getElementById("header");
el.style.backgroundPositionY = 50 + (document.documentElement.scrollTop/el.scrollHeight) / 2 * 100 + "%"; el.style.backgroundPositionY = 50 + (document.documentElement.scrollTop/el.scrollHeight) / 2 * 100 + "%";
@@ -41,8 +56,35 @@ const scrollchecks = () => {
var perc = clamp(0, document.getElementById("outer").scrollTop / (window.innerHeight / 2), 1); var perc = clamp(0, document.getElementById("outer").scrollTop / (window.innerHeight / 2), 1);
document.querySelector("#headin > h1").style.fontSize = 2 + 4 * (1 - perc) + "em"; document.querySelector("#headin > h1").style.fontSize = 2 + 4 * (1 - perc) + "em";
document.querySelector("#links").style.opacity = perc; document.querySelector("#links").style.opacity = perc;
document.querySelector("#hambugha + label").style.opacity = perc;
//document.querySelector("#carousel").style.opacity = perc; //document.querySelector("#carousel").style.opacity = perc;
document.querySelector("#sider > img").style.top = clamp(15, 100 * (document.querySelector("#headin > h1").getBoundingClientRect().top / window.innerHeight), 100) + "%";
Array.from(document.getElementsByClassName("image-relational-scrolling")).forEach(element => {
let sel = getNearestChildIndexTo(element.children[1], window.innerHeight / 2);
for (var i = 0; i < element.children[0].children.length; i++){
if (i == sel) {
element.children[0].children[i].classList.add("selected");
}
else {
element.children[0].children[i].classList.remove("selected");
}
}
});
}; };
window.addEventListener("load", () => {
Array.from(document.getElementsByClassName("image-relational-scrolling")).forEach(imagerelational => {
var row1 = imagerelational.children[0];
var row2 = imagerelational.children[1];
for (var i = 0; i < row1.children.length; i ++) {
var el = row1.children[i].cloneNode();
//el.classList.add("nearest-ignore");
row2.children[i].prepend(el);
}
});
});
window.addEventListener("scroll", scrollchecks); window.addEventListener("scroll", scrollchecks);
window.addEventListener("scrollend", scrollchecks); window.addEventListener("scrollend", scrollchecks);
window.addEventListener("wheel", scrollchecks); window.addEventListener("wheel", scrollchecks);
@@ -120,6 +162,6 @@ function toggle_sidebar() {
el.src = "res/arrow-left.svg"; el.src = "res/arrow-left.svg";
} }
else { else {
el.src = "res/arrow-right.svg"; el.src = "res/arrow-none.svg";
} }
} }

52
res/arrow-none.svg Normal file
View File

@@ -0,0 +1,52 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="67.722931mm"
height="248.83067mm"
viewBox="0 0 67.722931 248.83067"
version="1.1"
id="svg5"
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
sodipodi:docname="arrow-left.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview7"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
inkscape:zoom="0.37721168"
inkscape:cx="165.68946"
inkscape:cy="532.8573"
inkscape:window-width="1920"
inkscape:window-height="1011"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" />
<defs
id="defs2" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0.23499242,-0.29279519)">
<path
id="path627"
style="fill:none;stroke:none;stroke-width:2.423;stop-color:#000000"
d="m 12.891763,74.516068 v -5.12e-4" />
<path
id="path625"
style="fill:none;stroke:none;stroke-width:2.423;stop-color:#000000"
d="M 66.415659,248.55925 1.2877685,124.70778 66.415471,0.85665987" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

56
src/_index.html
View File

@@ -1,30 +1,26 @@
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla <div class="image-relational-scrolling">
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla <div>
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla <img src="https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg" class="selected" />
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla <img src="https://www.badeloftusa.com/wp-content/uploads/2019/09/BW-02-XL-WHT-2020.jpg" />
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla <img src="https://www.applesfromny.com/wp-content/uploads/2020/05/20Ounce_NYAS-Apples2.png" />
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla <img src="https://res.cloudinary.com/dk-find-out/image/upload/q_80,w_1920,f_auto/pi_gqp5ha.jpg" />
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla <img src="https://www.thespruceeats.com/thmb/wiFS2z1vLTt3fHKDVaka5KiWshI=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc()/basic-cherry-pie-recipe-995136-14-dfe79487adf64a848a49dd07983b6614.jpg" />
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla </div>
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla <div>
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla <p>
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus optio ratione sit. Quibusdam veritatis nemo distinctio dolorem doloribus quos ullam, quisquam consectetur numquam ab fuga sint, nostrum corporis dolor iusto! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quibusdam consequatur suscipit vitae similique nulla animi inventore nisi perferendis eos, itaque nobis odit ut facilis tempore rerum delectus unde ducimus fuga.
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla </p>
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla <p>
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vitae, quam quisquam. Iste veniam ut velit. Voluptatem laborum repellat, aliquid nisi earum nesciunt eius voluptatum at quis sint perferendis eos dolore. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellat temporibus omnis excepturi tempore! Illo maxime vel dolor nulla, velit iure. Dolore asperiores accusantium sunt obcaecati nam doloremque suscipit laborum animi!
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla </p>
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla <p>
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit labore ut nihil, tempore quis mollitia voluptates magni? Tenetur, corporis voluptates quia earum blanditiis molestias dignissimos provident inventore aspernatur error assumenda. Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, et rem. Quo corporis dolorum magnam recusandae facilis voluptatum nostrum a, in perferendis sunt numquam maiores corrupti sed excepturi repudiandae. Tempora!
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla </p>
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla <p>
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rerum accusamus aliquam commodi voluptates laborum, quia sint facilis dolores aliquid eaque repellat dolor dolorem? Temporibus et rem dolorum neque excepturi optio. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem, adipisci rem natus magni eum ducimus alias tempore reprehenderit nulla architecto eveniet a nemo non quis ipsum quo officiis, vel sit!
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla </p>
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla <p>
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla 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.
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla </p>
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla </div>
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla </div>
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!

95
src/template.html
View File

@@ -1,13 +1,22 @@
<!DOCTYPE html> <!DOCTYPE html>
<!--
Kuwait flag colors:
Green: #007b3a
Red: #cf0821
Black: black
White: white
-->
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Jhewit | Home</title> <title>Jhewit | Home</title>
<link rel="stylesheet" href="main.css" /> <link rel="stylesheet" href="main.css" />
</head> </head>
<body class="sidebar-opened"> <body>
<div id="sider-outer"> <div id="sider-outer">
<div id="sider"> <div id="sider">
<h2>Sidebar</h2> <h2>Sidebar</h2>
@@ -25,7 +34,7 @@
<a href="#">Links.</a> <a href="#">Links.</a>
</div> </div>
</div> </div>
<img src="res/arrow-left.svg" onclick="toggle_sidebar()" /> <img src="res/arrow-none.svg" onclick="toggle_sidebar()" />
</div> </div>
</div> </div>
<div id="outer"> <div id="outer">
@@ -33,32 +42,52 @@
<div id="head-marker" class="scrolly"></div> <div id="head-marker" class="scrolly"></div>
<div id="headin"> <div id="headin">
<h1>Jhewit</h1> <h1>Jhewit</h1>
<div id="links"> <div id="links-outer">
<div class="link"> <input id="hambugha" type="checkbox" style="display: none;">
<a href="#">LINK 1</a> <label for="hambugha">Ham</label>
</div> <div id="links">
<div></div> <div class="link">
<div class="dropdown"> <a href="#">LINK 1</a>
HI
</div>
<div>
<div class="dropdown-inner">
<a>TEST</a>
</div> </div>
</div> <div></div>
<!--<div> <div class="dropdown">
<div class="dropdown-inner"> HI
<a href="#">
LINK
</a>
<a href="#">
LINK
</a>
<a href="#">
LINK
</a>
</div> </div>
</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 class="dropdown">
HI
</div>
<div>
<div class="dropdown-inner">
<a>TEST</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>
</div> </div>
@@ -84,6 +113,20 @@
<div id="content"> <div id="content">
{content} {content}
</div> </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>
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.
</p>
</div>
<div id="truebottom">
Website by <a href="https://swaous.asuscomm.com">Tyler Clarke</a>.
</div>
</div> </div>
<script src="main.js"></script> <script src="main.js"></script>
</body> </body>