This commit is contained in:
3
output/.sitix
Executable file
3
output/.sitix
Executable file
@@ -0,0 +1,3 @@
|
||||
Project rendered by Sitix (by Tyler Clarke). Sitix is free and open source software protected by GPLv3. For more information on Sitix, see the website: https://swaous.asuscomm.com/sitix.
|
||||
|
||||
This file is automatically added to mark a project directory; the directory this is in will be FULLY DELETED by the next Sitix build and files in it should not be manually edited.
|
||||
33
output/index.html
Executable file
33
output/index.html
Executable file
@@ -0,0 +1,33 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<title>The Panican Party</title>
|
||||
<link rel="stylesheet" href="http://localhost:8060/main.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="leadbox" class="scrolly-box">
|
||||
<h1>make america <span class="panicyellow">PANIC</span> again.</h1>
|
||||
<img id="godown" src="http://localhost:8060/res/godown.svg" />
|
||||
</div>
|
||||
<div>
|
||||
<img src="http://localhost:8060/res/trump.jpg" class="trump-panican-tweet"/>
|
||||
</div>
|
||||
<div>
|
||||
<h2>The Panican Party</h2>
|
||||
<ul>
|
||||
<li>Welcome to our new party.</li>
|
||||
<li>Based on weak and stupid people.</li>
|
||||
<li>We are not strong. We are not courageous.</li>
|
||||
<li class="panicyellow">We are panicking.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<script src="http://localhost:8060/scrolly.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
77
output/main.css
Executable file
77
output/main.css
Executable file
@@ -0,0 +1,77 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: "URW Gothic";
|
||||
src: url("http://localhost:8060/res/URWGothic-Book.otf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "URW Gothic Bold";
|
||||
src: url("http://localhost:8060/res/URWGothic-Demi.otf");
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: "URW Gothic";
|
||||
color: white;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: black;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.panicyellow {
|
||||
color: rgb(255, 204, 0);
|
||||
font-family: "URW Gothic Bold";
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 5em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 3em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
body > div {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#godown {
|
||||
position: absolute;
|
||||
bottom: 50px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -100%);
|
||||
font-size: 3em;
|
||||
}
|
||||
|
||||
.trump-panican-tweet {
|
||||
border-radius: 20px;
|
||||
width: 30vw;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
body > div {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#leadbox {
|
||||
opacity: calc((var(--scrolly-height) + var(--scrolly-top) * 2) / var(--scrolly-height));
|
||||
transform: translateY(calc(var(--scrolly-top) * 0.125px));
|
||||
}
|
||||
|
||||
ul {
|
||||
font-size: 2em;
|
||||
text-align: left;
|
||||
line-height: 2em;
|
||||
}
|
||||
0
output/main.js
Executable file
0
output/main.js
Executable file
BIN
output/res/URWGothic-Book.otf
Executable file
BIN
output/res/URWGothic-Book.otf
Executable file
Binary file not shown.
BIN
output/res/URWGothic-BookOblique.otf
Executable file
BIN
output/res/URWGothic-BookOblique.otf
Executable file
Binary file not shown.
BIN
output/res/URWGothic-Demi.otf
Executable file
BIN
output/res/URWGothic-Demi.otf
Executable file
Binary file not shown.
46
output/res/godown.svg
Executable file
46
output/res/godown.svg
Executable file
@@ -0,0 +1,46 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="64"
|
||||
height="64"
|
||||
viewBox="0 0 16.933333 16.933333"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
|
||||
sodipodi:docname="godown.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="namedview1"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="px"
|
||||
inkscape:zoom="5.701459"
|
||||
inkscape:cx="50.513386"
|
||||
inkscape:cy="31.921654"
|
||||
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="defs1" />
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1">
|
||||
<path
|
||||
style="fill:none;stroke:#ffffff;stroke-width:1.72899997;stroke-linecap:square;stroke-opacity:1;stroke-linejoin:miter;stroke-dasharray:none"
|
||||
d="M 1.9537843,7.2320234 8.4666666,11.295528 14.979549,7.2320234"
|
||||
id="path1" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
BIN
output/res/trump.jpg
Executable file
BIN
output/res/trump.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
1
output/scrolly.js
Executable file
1
output/scrolly.js
Executable file
@@ -0,0 +1 @@
|
||||
const scrolly={$(classname){return Array.from(document.getElementsByClassName(classname))},getProperties(element){var r={marginBottom:0,marginTop:0,marginLeft:0,marginRight:0};if(element.hasAttribute("data-scrolly-margin")){r.marginBottom=element.getAttribute("data-scrolly-margin")-0;r.marginTop=r.marginBottom;r.marginLeft=r.marginTop;r.marginRight=r.marginLeft}if(element.hasAttribute("data-scrolly-margin-top")){r.marginTop=element.getAttribute("data-scrolly-margin-top")-0}if(element.hasAttribute("data-scrolly-margin-left")){r.marginLeft=element.getAttribute("data-scrolly-margin-left")-0}if(element.hasAttribute("data-scrolly-margin-right")){r.marginRight=element.getAttribute("data-scrolly-margin-right")-0}if(element.hasAttribute("data-scrolly-margin-bottom")){r.marginBottom=element.getAttribute("data-scrolly-margin-bottom")-0}return r},findScrollParent(element){if(element.parentNode==document.body){return window}if(element.parentNode.scrollHeight>element.parentNode.clientHeight&&window.getComputedStyle(element.parentNode).overflowY.indexOf("hidden")==-1){return element.parentNode}return this.findScrollParent(element.parentNode)},scroll(element){var rect=element.getBoundingClientRect();var prop=scrolly.getProperties(element);if(rect.bottom>=prop.marginTop&&rect.top<=window.innerHeight-prop.marginBottom&&rect.right>=prop.marginLeft&&rect.left<=window.innerWidth-prop.marginRight){element.classList.add("scrolly-active");element.classList.add("scrolly-visible")}else{element.classList.remove("scrolly-visible")}if(rect.top>=0&&rect.bottom<=window.innerHeight&&rect.left>=0&&rect.right<=window.innerWidth){element.classList.add("scrolly-in")}else{element.classList.remove("scrolly-in")}},init(){this.viewEvts=this.$("scrolly");for(let el of this.viewEvts){this.findScrollParent(el).addEventListener("scroll",()=>{this.scroll(el)});this.scroll(el)}this.boxEvts=this.$("scrolly-box");this.trackEvts=this.$("scrolly-track");this.mouseEvts=this.$("scrolly-mouse");const resizer=new ResizeObserver(evts=>{for(let event of evts){let rect=event.target.getBoundingClientRect();event.target.style.setProperty("--scrolly-width",event.contentRect.width);event.target.style.setProperty("--scrolly-height",event.contentRect.height);event.target.style.setProperty("--scrolly-left",rect.left);event.target.style.setProperty("--scrolly-top",rect.top)}});this.boxEvts.forEach(el=>{resizer.observe(el);this.findScrollParent(el).addEventListener("scroll",()=>{var rect=el.getBoundingClientRect();el.style.setProperty("--scrolly-left",rect.left);el.style.setProperty("--scrolly-top",rect.top)})});this.trackEvts.forEach(el=>{el.addEventListener("scroll",()=>{el.style.setProperty("--scrolly-scroll-top",el.scrollTop);el.style.setProperty("--scrolly-scroll-left",el.scrollLeft)});el.style.setProperty("--scrolly-scroll-height",el.scrollHeight);const robbler=new ResizeObserver(()=>{el.style.setProperty("--scrolly-scroll-height",el.scrollHeight)});for(let child of el.children){robbler.observe(child)}const observerOptions={childList:true,subtree:false};const mutation=new MutationObserver((events,observer)=>{el.style.setProperty("--scrolly-scroll-height",el.scrollHeight);for(let event of events){for(let added of event.addedNodes){robbler.observe(added)}for(let removed of event.removedNodes){robbler.unobserve(removed)}}});mutation.observe(el,observerOptions)});this.mouseEvts.forEach(el=>{el.addEventListener("pointermove",evt=>{var rect=el.getBoundingClientRect();el.style.setProperty("--mouse-x",rect.left+evt.clientX);el.style.setProperty("--mouse-y",-rect.top+evt.clientY)})})}};if(!window["SCROLLY_DELAYEDINIT"]){window.addEventListener("load",()=>{scrolly.init()})}
|
||||
Reference in New Issue
Block a user