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

initial commit

Browse Source
This commit is contained in:
Lazy Hippopotamus
2023-06-06 14:29:46 -04:00
commit e7d8d215b4
4 changed files with 718 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

504
Cantarell-VF.otf Normal file
View File

File diff suppressed because one or more lines are too long

96
index.html Normal file
View File

@@ -0,0 +1,96 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jhewit | Home</title>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<div id="header">
<div id="head-marker" class="scrolly"></div>
<div id="headin">
<h1>Jhewit</h1>
<div id="links">
<div class="dropdown">
Dropdown 1
</div>
<div>
<div class="dropdown-inner">
<a>
LINK
</a>
<a>
LINK
</a>
<a>
LINK
</a>
</div>
</div>
<div class="dropdown">
Dropdown 2
</div>
<div>
<div class="dropdown-inner">
<a>
LINK
</a>
<a>
LINK
</a>
<a>
LINK
</a>
</div>
</div>
<div class="dropdown">
Dropdown 3
</div>
<div>
<div class="dropdown-inner">
<a>
LINK
</a>
<a>
LINK
</a>
<a>
LINK
</a>
</div>
</div>
</div>
</div>
</div>
<div id="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quis deleniti, numquam, voluptatibus eos perspiciatis a nulla temporibus laborum saepe perferendis esse cumque consectetur molestias rerum amet. Impedit, minima quisquam! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloremque quis eveniet ipsa perferendis possimus molestias? Perferendis suscipit, at error, reiciendis quis, velit dicta assumenda earum labore magni architecto officiis delectus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quis deleniti, numquam, voluptatibus eos perspiciatis a
nulla temporibus laborum saepe perferendis esse cumque consectetur molestias rerum amet. Impedit, minima quisquam!
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloremque quis eveniet ipsa perferendis possimus molestias?
Perferendis suscipit, at error, reiciendis quis, velit dicta assumenda earum labore magni architecto officiis delectus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quis deleniti, numquam, voluptatibus eos perspiciatis a
nulla temporibus laborum saepe perferendis esse cumque consectetur molestias rerum amet. Impedit, minima quisquam!
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloremque quis eveniet ipsa perferendis possimus molestias?
Perferendis suscipit, at error, reiciendis quis, velit dicta assumenda earum labore magni architecto officiis delectus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quis deleniti, numquam, voluptatibus eos perspiciatis a
nulla temporibus laborum saepe perferendis esse cumque consectetur molestias rerum amet. Impedit, minima quisquam!
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloremque quis eveniet ipsa perferendis possimus molestias?
Perferendis suscipit, at error, reiciendis quis, velit dicta assumenda earum labore magni architecto officiis delectus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quis deleniti, numquam, voluptatibus eos perspiciatis a
nulla temporibus laborum saepe perferendis esse cumque consectetur molestias rerum amet. Impedit, minima quisquam!
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloremque quis eveniet ipsa perferendis possimus molestias?
Perferendis suscipit, at error, reiciendis quis, velit dicta assumenda earum labore magni architecto officiis delectus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quis deleniti, numquam, voluptatibus eos perspiciatis a
nulla temporibus laborum saepe perferendis esse cumque consectetur molestias rerum amet. Impedit, minima quisquam!
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloremque quis eveniet ipsa perferendis possimus molestias?
Perferendis suscipit, at error, reiciendis quis, velit dicta assumenda earum labore magni architecto officiis delectus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quis deleniti, numquam, voluptatibus eos perspiciatis a
nulla temporibus laborum saepe perferendis esse cumque consectetur molestias rerum amet. Impedit, minima quisquam!
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloremque quis eveniet ipsa perferendis possimus molestias?
Perferendis suscipit, at error, reiciendis quis, velit dicta assumenda earum labore magni architecto officiis delectus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quis deleniti, numquam, voluptatibus eos perspiciatis a
nulla temporibus laborum saepe perferendis esse cumque consectetur molestias rerum amet. Impedit, minima quisquam!
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloremque quis eveniet ipsa perferendis possimus molestias?
Perferendis suscipit, at error, reiciendis quis, velit dicta assumenda earum labore magni architecto officiis delectus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quis deleniti, numquam, voluptatibus eos perspiciatis a
nulla temporibus laborum saepe perferendis esse cumque consectetur molestias rerum amet. Impedit, minima quisquam!
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloremque quis eveniet ipsa perferendis possimus molestias?
Perferendis suscipit, at error, reiciendis quis, velit dicta assumenda earum labore magni architecto officiis delectus.
</div>
<script src="main.js"></script>
</body>
</html>

83
main.css Normal file
View File

@@ -0,0 +1,83 @@
@font-face {
font-family: "Cantarell var";
font-weight: 100 900;
font-display: swap;
font-style: normal;
font-named-instance: "Regular";
src: url("Cantarell-VF.otf") format("opentype");
}
h1 {
margin: 20px;
}
* {
margin: 0;
padding: 0;
font-family: Cantarell;
}
#links {
display: inline-grid;
grid-template-rows: 100% 0px;
}
#links > * {
margin-left: 10px;
margin-right: 10px;
}
#header {
text-align: center;
padding-top: 10%;
padding-bottom: 10%;
min-height: 40vh;
background-image: url(https://www.state.gov/wp-content/uploads/2022/02/Kuwait-2323x1406.png);
background-attachment: fixed;
}
.dropdown {
background-color: aliceblue;
padding: 10px;
display: inline-block;
grid-row: 1;
}
.dropdown-inner {
background-color: white;
display: flex;
grid-row: 2;
visibility: hidden;
flex-direction: column;
}
.dropdown:hover + div > .dropdown-inner, .dropdown-inner:hover {
visibility: visible;
}
.dropdown-inner > * {
padding: 10px;
}
#content {
margin: 10%;
}
#headin {
padding-top: 5%;
padding-bottom: 5%;
transition: background-color 0.3s, color 0.3s;
width: 100%;
}
#head-marker.scrolly-out + #headin {
position: fixed;
top: 0px;
left: 0px;
background-color: darkred;
color: lightgreen;
}
#head-marker.scrolly-out + #headin > #links > * > *, #head-marker.scrolly-out + #headin > #links > * {
background-color: black;
}

35
main.js Normal file
View File

@@ -0,0 +1,35 @@
const scrollchecks = () => {
var el = document.getElementById("header");
el.style.backgroundPositionY = 50 + (document.documentElement.scrollTop/el.scrollHeight) / 2 * 100 + "%";
Array.from(document.getElementsByClassName("scrolly")).forEach(el => {
let box = el.getBoundingClientRect();
if (box.bottom < 0 || box.top >= window.innerHeight) {
el.classList.add("scrolly-out");
el.classList.remove("scrolly-in");
el.classList.remove("scrolly-onedge");
}
else {
el.classList.remove("scrolly-out");
el.classList.add("scrolly-in");
el.classList.add("scrolly-entered");
if (box.top <= 0 || box.bottom >= window.innerHeight) {
el.classList.add("scrolly-onedge");
}
else {
el.classList.remove("scrolly-onedge");
}
}
if (box.top + box.height / 2 <= window.innerHeight / 2) {
el.classList.add("scrolly-tophalf");
el.classList.remove("scrolly-bottomhalf");
}
else {
el.classList.remove("scrolly-tophalf");
el.classList.add("scrolly-bottomhalf");
}
});
};
window.addEventListener("scroll", scrollchecks);
window.addEventListener("wheel", scrollchecks);
window.addEventListener("resize", scrollchecks);
window.addEventListener("load", scrollchecks);