add banner & snow
This commit is contained in:
Marley
parent
f6faea82ae
commit
98561d7735
12 changed files with 155 additions and 46 deletions
BIN
.DS_Store
vendored
BIN
.DS_Store
vendored
Binary file not shown.
8
home.php
8
home.php
|
|
@ -31,6 +31,10 @@
|
|||
|
||||
<p><em><a href="updates.php" target="main">update archive</a></em></p>
|
||||
|
||||
<h2>14 Nov 2022</h2>
|
||||
|
||||
<p>Christmas theme up (:</p>
|
||||
|
||||
<h2>15 Mar 2022</h2>
|
||||
|
||||
<p>Epiphany has moved! I got my own domain a week or two ago and have finally finished setting
|
||||
|
|
@ -54,10 +58,6 @@
|
|||
<h2>21 Feb 2022</h2>
|
||||
|
||||
<p>More dogz litterz added, and single dogz adoptions also added.</p>
|
||||
|
||||
<h2>19 Feb 2022</h2>
|
||||
|
||||
<p>Dogz adoptions added!</p>
|
||||
</div>
|
||||
|
||||
<div class="divide"></div>
|
||||
|
|
|
|||
BIN
images/.DS_Store
vendored
BIN
images/.DS_Store
vendored
Binary file not shown.
15
index.php
15
index.php
|
|
@ -6,15 +6,24 @@
|
|||
<link rel="stylesheet" type="text/css" href="style/index.css">
|
||||
<link rel="stylesheet" type="text/css" href="style/stuff.css">
|
||||
<LINK REL="SHORTCUT ICON" HREF="images/favicon.ico">
|
||||
|
||||
<!-- snow -->
|
||||
<script src="snow.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<iframe src="home.php" frameborder="0" class="scroll transparent" id="main" name="main"></iframe>
|
||||
<div id="body">
|
||||
<div id="banner">
|
||||
<div id="banner-inner">Epiphany</div>
|
||||
</div>
|
||||
|
||||
<iframe src="menu_main.php" frameborder="0" id="nav" class="transparent" name="nav"></iframe>
|
||||
<iframe src="home.php" frameborder="0" class="scroll transparent" id="main" name="main"></iframe>
|
||||
|
||||
<iframe src="cbox.php" frameborder="0" class="transparent" id="cbox"></iframe>
|
||||
<iframe src="menu_main.php" frameborder="0" id="nav" class="transparent" name="nav"></iframe>
|
||||
|
||||
<iframe src="cbox.php" frameborder="0" class="transparent" id="cbox"></iframe>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
99
snow.js
Normal file
99
snow.js
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
/*!
|
||||
// Snow.js - v0.0.3
|
||||
// kurisubrooks.com
|
||||
*/
|
||||
|
||||
// Amount of Snowflakes
|
||||
var snowMax = 35;
|
||||
|
||||
// Snowflake Colours
|
||||
var snowColor = ["#DDD", "#EEE"];
|
||||
|
||||
// Snow Entity
|
||||
var snowEntity = "•";
|
||||
|
||||
// Falling Velocity
|
||||
var snowSpeed = 0.75;
|
||||
|
||||
// Minimum Flake Size
|
||||
var snowMinSize = 8;
|
||||
|
||||
// Maximum Flake Size
|
||||
var snowMaxSize = 24;
|
||||
|
||||
// Refresh Rate (in milliseconds)
|
||||
var snowRefresh = 50;
|
||||
|
||||
// Additional Styles
|
||||
var snowStyles = "cursor: default; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none;";
|
||||
|
||||
/*
|
||||
// End of Configuration
|
||||
// ----------------------------------------
|
||||
// Do not modify the code below this line
|
||||
*/
|
||||
|
||||
var snow = [],
|
||||
pos = [],
|
||||
coords = [],
|
||||
lefr = [],
|
||||
marginBottom,
|
||||
marginRight;
|
||||
|
||||
function randomise(range) {
|
||||
rand = Math.floor(range * Math.random());
|
||||
return rand;
|
||||
}
|
||||
|
||||
function initSnow() {
|
||||
var snowSize = snowMaxSize - snowMinSize;
|
||||
marginBottom = document.body.scrollHeight - 5;
|
||||
marginRight = document.body.clientWidth - 15;
|
||||
|
||||
for (i = 0; i <= snowMax; i++) {
|
||||
coords[i] = 0;
|
||||
lefr[i] = Math.random() * 15;
|
||||
pos[i] = 0.03 + Math.random() / 10;
|
||||
snow[i] = document.getElementById("flake" + i);
|
||||
snow[i].style.fontFamily = "inherit";
|
||||
snow[i].size = randomise(snowSize) + snowMinSize;
|
||||
snow[i].style.fontSize = snow[i].size + "px";
|
||||
snow[i].style.color = snowColor[randomise(snowColor.length)];
|
||||
snow[i].style.zIndex = 1000;
|
||||
snow[i].sink = snowSpeed * snow[i].size / 5;
|
||||
snow[i].posX = randomise(marginRight - snow[i].size);
|
||||
snow[i].posY = randomise(2 * marginBottom - marginBottom - 2 * snow[i].size);
|
||||
snow[i].style.left = snow[i].posX + "px";
|
||||
snow[i].style.top = snow[i].posY + "px";
|
||||
}
|
||||
|
||||
moveSnow();
|
||||
}
|
||||
|
||||
function resize() {
|
||||
marginBottom = document.body.scrollHeight - 5;
|
||||
marginRight = document.body.clientWidth - 15;
|
||||
}
|
||||
|
||||
function moveSnow() {
|
||||
for (i = 0; i <= snowMax; i++) {
|
||||
coords[i] += pos[i];
|
||||
snow[i].posY += snow[i].sink;
|
||||
snow[i].style.left = snow[i].posX + lefr[i] * Math.sin(coords[i]) + "px";
|
||||
snow[i].style.top = snow[i].posY + "px";
|
||||
|
||||
if (snow[i].posY >= marginBottom - 2 * snow[i].size || parseInt(snow[i].style.left) > (marginRight - 3 * lefr[i])) {
|
||||
snow[i].posX = randomise(marginRight - snow[i].size);
|
||||
snow[i].posY = 0;
|
||||
}
|
||||
}
|
||||
|
||||
setTimeout("moveSnow()", snowRefresh);
|
||||
}
|
||||
|
||||
for (i = 0; i <= snowMax; i++) {
|
||||
document.write("<span id='flake" + i + "' style='" + snowStyles + "position:absolute;top:-" + snowMaxSize + "'>" + snowEntity + "</span>");
|
||||
}
|
||||
|
||||
window.addEventListener('resize', resize);
|
||||
window.addEventListener('load', initSnow);
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=Imprima&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Sacramento&display=swap');
|
||||
|
||||
$bg: url(../images/bg.png);
|
||||
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
@import"https://fonts.googleapis.com/css2?family=Imprima&display=swap";html,body,a,a:hover{cursor:url(../images/cursor.png)}html{height:100vh;width:100vw;display:flex;justify-content:center;align-items:center}body{background:url(../images/bg.png);background-repeat:no-repeat;background-size:cover;font-family:"Imprima",sans-serif;font-size:13px;letter-spacing:1.8px;width:60%;height:70%;margin-left:300px;margin-top:75px;display:grid;gap:10px 10px;grid-gap:10px 10px;grid-template-columns:230px auto;grid-template-rows:1fr 2fr 240px;grid-template-areas:"banner banner" "nav main" "cbox main"}body>div,body>iframe{height:100%;width:100%}body .scroll{overflow-y:auto}div#banner{grid-area:banner;display:grid;gap:0;grid-gap:0;grid-template-columns:60% 40%;grid-template-rows:100%;grid-template-areas:"title nav";align-items:end}div#banner div#title{grid-area:title;z-index:1;position:relative}div#banner div#title img{position:absolute;bottom:-10px;right:0}div#banner div#site-nav{grid-area:nav;margin-bottom:10px}#main{grid-area:main}#main>iframe{width:100%;height:100%}#nav{grid-area:nav}#cbox{grid-area:cbox;position:relative}#footer{grid-area:foot;text-align:center}.transparent{background:rgba(255,255,255,.7)}a{text-decoration:none;color:#d03b3b}a:hover{text-decoration:underline;color:#901a1a}/*# sourceMappingURL=index.css.map */
|
||||
@import"https://fonts.googleapis.com/css2?family=Imprima&display=swap";@import"https://fonts.googleapis.com/css2?family=Sacramento&display=swap";html,body,a,a:hover{cursor:url(../images/cursor.png)}html{height:100vh;width:100vw;display:flex;justify-content:center;align-items:center}body{background:url(../images/bg.png);background-repeat:no-repeat;background-size:cover;font-family:"Imprima",sans-serif;font-size:13px;letter-spacing:1.8px;height:100vh;width:100vw;margin:0}#body{width:70%;height:70%;position:absolute;right:100px;bottom:70px;display:grid;gap:10px 10px;grid-gap:10px 10px;grid-template-columns:100px 230px 5fr;grid-template-rows:auto 240px;grid-template-areas:"banner nav main" "banner cbox main"}#body>div,#body>iframe{height:100%;width:100%}.scroll{overflow-y:auto}#banner{grid-area:banner}#banner #banner-inner{grid-area:bannerinner;font-family:"Sacramento",cursive;font-size:80px;color:#901a1a;transform:rotate(-90deg);position:absolute;translate:-15% 100%;z-index:1000;text-shadow:3px 3px 5px #fff,-3px -3px 5px #fff,3px -3px 5px #fff,-3px 3px 5px #fff}#main{grid-area:main}#main>iframe{width:100%;height:100%}#nav{grid-area:nav}#cbox{grid-area:cbox;position:relative}#footer{grid-area:foot;text-align:center}.transparent{background:rgba(255,255,255,.7)}a{text-decoration:none;color:#d03b3b}a:hover{text-decoration:underline;color:#901a1a}/*# sourceMappingURL=index.css.map */
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"version":3,"sourceRoot":"","sources":["_vars.scss","index.scss"],"names":[],"mappings":"AAAQ,uEAsBR,oBACG,iCCrBH,KACC,aACA,YACA,aACA,uBACA,mBAGD,KACC,WDTI,sBCUJ,4BACG,sBACH,YDRM,qBCSN,UDRO,KCSP,eDRU,MCUV,UACA,WACG,kBACA,gBAEH,aACA,iCACA,iCACA,iCACA,oBACO,4CAIP,4CAEA,6BAGD,WACC,iBAEA,aACA,iBACA,8BACA,wBACA,gCACA,gBAEC,qBACC,gBACA,UACA,kBAEA,yBACC,kBACA,aACA,QAIF,wBACC,cAEA,mBAIH,MACC,eAEA,aACC,WACA,YAIF,KACC,cAGD,MACC,eACA,kBAGD,QACC,eACA,kBAGD,aACE,gCAGF,EACC,qBACA,MDlFS,QCoFT,QACC,0BACA,MDrFQ","file":"index.css"}
|
||||
{"version":3,"sourceRoot":"","sources":["_vars.scss","index.scss"],"names":[],"mappings":"AAAQ,uEACA,0EAsBR,oBACG,iCCtBH,KACC,aACA,YACA,aACA,uBACA,mBAGD,KACC,WDRI,sBCSJ,4BACG,sBACH,YDPM,qBCQN,UDPO,KCQP,eDPU,MCQP,aACA,YACA,SAGJ,MACC,UACA,WACG,kBACA,YACA,YAEH,aACA,iCACA,sCACA,8BACA,oBACC,0CAGD,8CAGD,wBAEA,QACC,iBAEG,sBACI,sBACA,iCACA,eACA,MDlCE,QCmCF,yBACA,kBACA,oBACA,aACA,YACK,wEAOb,MACC,eAEA,aACC,WACA,YAIF,KACC,cAGD,MACC,eACA,kBAGD,QACC,eACA,kBAGD,aACE,gCAGF,EACC,qBACA,MD7ES,QC+ET,QACC,0BACA,MDhFQ","file":"index.css"}
|
||||
|
|
@ -15,52 +15,48 @@ body {
|
|||
font-family: $font;
|
||||
font-size: $fsize;
|
||||
letter-spacing: $lspacing;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
width: 60%;
|
||||
#body {
|
||||
width: 70%;
|
||||
height: 70%;
|
||||
margin-left: 300px;
|
||||
margin-top: 75px;
|
||||
position: absolute;
|
||||
right: 100px;
|
||||
bottom: 70px;
|
||||
|
||||
display: grid;
|
||||
gap: 10px 10px; grid-gap: 10px 10px;
|
||||
grid-template-columns: 230px auto;
|
||||
grid-template-rows: 1fr 2fr 240px;
|
||||
grid-template-columns: 100px 230px 5fr;
|
||||
grid-template-rows: auto 240px;
|
||||
grid-template-areas:
|
||||
"banner banner"
|
||||
"nav main"
|
||||
"cbox main";
|
||||
"banner nav main"
|
||||
"banner cbox main";
|
||||
|
||||
& > div, & > iframe { height: 100%; width: 100%; }
|
||||
|
||||
.scroll { overflow-y: auto; }
|
||||
}
|
||||
|
||||
div#banner {
|
||||
.scroll { overflow-y: auto; }
|
||||
|
||||
#banner {
|
||||
grid-area: banner;
|
||||
|
||||
display: grid;
|
||||
gap: 0; grid-gap: 0;
|
||||
grid-template-columns: 60% 40%;
|
||||
grid-template-rows: 100%;
|
||||
grid-template-areas: "title nav";
|
||||
align-items: end;
|
||||
|
||||
div#title {
|
||||
grid-area: title;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
#banner-inner {
|
||||
grid-area: bannerinner;
|
||||
font-family: 'Sacramento', cursive;
|
||||
font-size: 80px;
|
||||
color: $accent2;
|
||||
transform: rotate(-90deg);
|
||||
position: absolute;
|
||||
bottom: -10px;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
div#site-nav {
|
||||
grid-area: nav;
|
||||
|
||||
margin-bottom: 10px;
|
||||
translate: -15% 100%;
|
||||
z-index: 1000;
|
||||
text-shadow:
|
||||
3px 3px 5px #fff,
|
||||
-3px -3px 5px #fff,
|
||||
3px -3px 5px #fff,
|
||||
-3px 3px 5px #fff;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
@import"https://fonts.googleapis.com/css2?family=Imprima&display=swap";html,body,a,a:hover{cursor:url(../images/cursor.png)}html{height:100%}body{font-family:"Imprima",sans-serif;font-size:13px;letter-spacing:1.8px;padding:10px;color:#000}.nav{text-align:center;padding:5px}#main-content{margin:10px;padding:10px}#cbox-inner{position:absolute;bottom:10px;left:10px}body#cbox{padding:0;text-align:center}td{padding:5px;text-align:center}table{margin-left:auto;margin-right:auto}.text{text-align:center;padding:0}.text p{padding:5px 0}h1{font-size:14px;color:#28543c;text-transform:uppercase;font-weight:normal}h1::before{content:url(../images/snowflake.webp);padding-right:5px}h1::after{content:url(../images/snowflake.webp);padding-left:5px}a{text-decoration:none;color:#d03b3b}a:hover{text-decoration:underline;color:#901a1a}strong,em{color:#28543c}.left{text-align:left}h2{color:#28543c;font-size:inherit;font-weight:normal;margin-bottom:-10px}h2::before{content:url(../images/candycane.gif);padding-right:5px}h2::after{content:url(../images/candycane.gif);padding-left:5px}.girls{color:#ff8bff}.boys{color:#70bef0}.pol{font-style:italic}.gone{text-decoration:line-through}ul.list{list-style-image:url(../images/heart.gif)}div.social{display:flex;justify-content:center;align-items:center;align-content:center;flex-wrap:wrap;gap:10px}a.social{text-decoration:none}a.social:hover{text-decoration:none}img.adopt{width:100px}form{width:60%;margin:0 auto;margin-top:20px}.form-item,.form-btns{width:100%;margin-top:5px;margin-bottom:5px}input{border:1px solid #d03b3b;background:none;font-family:"Imprima",sans-serif;font-size:13px;letter-spacing:1.8px;color:#000}.form-item{display:grid;grid-template-columns:1fr 2fr;grid-template-rows:auto;grid-template-areas:"label input"}.form-item label{grid-area:label}.form-item input{grid-area:input}input[type=submit]:hover,input[type=reset]:hover{color:#d03b3b}img.pet{margin-left:auto;margin-right:auto;display:block}.divide{margin:0 auto;padding:10px;padding-top:20px;width:1px}.divide::before{content:url(../images/divider.gif);margin-left:-119px}.egg{display:block;text-align:right !important;width:100% !important}/*# sourceMappingURL=stuff.css.map */
|
||||
@import"https://fonts.googleapis.com/css2?family=Imprima&display=swap";@import"https://fonts.googleapis.com/css2?family=Sacramento&display=swap";html,body,a,a:hover{cursor:url(../images/cursor.png)}html{height:100%}body{font-family:"Imprima",sans-serif;font-size:13px;letter-spacing:1.8px;padding:10px;color:#000}.nav{text-align:center;padding:5px}#main-content{margin:10px;padding:10px}#cbox-inner{position:absolute;bottom:10px;left:10px}body#cbox{padding:0;text-align:center}td{padding:5px;text-align:center}table{margin-left:auto;margin-right:auto}.text{text-align:center;padding:0}.text p{padding:5px 0}h1{font-size:14px;color:#28543c;text-transform:uppercase;font-weight:normal}h1::before{content:url(../images/snowflake.webp);padding-right:5px}h1::after{content:url(../images/snowflake.webp);padding-left:5px}a{text-decoration:none;color:#d03b3b}a:hover{text-decoration:underline;color:#901a1a}strong,em{color:#28543c}.left{text-align:left}h2{color:#28543c;font-size:inherit;font-weight:normal;margin-bottom:-10px}h2::before{content:url(../images/candycane.gif);padding-right:5px}h2::after{content:url(../images/candycane.gif);padding-left:5px}.girls{color:#ff8bff}.boys{color:#70bef0}.pol{font-style:italic}.gone{text-decoration:line-through}ul.list{list-style-image:url(../images/heart.gif)}div.social{display:flex;justify-content:center;align-items:center;align-content:center;flex-wrap:wrap;gap:10px}a.social{text-decoration:none}a.social:hover{text-decoration:none}img.adopt{width:100px}form{width:60%;margin:0 auto;margin-top:20px}.form-item,.form-btns{width:100%;margin-top:5px;margin-bottom:5px}input{border:1px solid #d03b3b;background:none;font-family:"Imprima",sans-serif;font-size:13px;letter-spacing:1.8px;color:#000}.form-item{display:grid;grid-template-columns:1fr 2fr;grid-template-rows:auto;grid-template-areas:"label input"}.form-item label{grid-area:label}.form-item input{grid-area:input}input[type=submit]:hover,input[type=reset]:hover{color:#d03b3b}img.pet{margin-left:auto;margin-right:auto;display:block}.divide{margin:0 auto;padding:10px;padding-top:20px;width:1px}.divide::before{content:url(../images/divider.gif);margin-left:-119px}.egg{display:block;text-align:right !important;width:100% !important}/*# sourceMappingURL=stuff.css.map */
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"version":3,"sourceRoot":"","sources":["_vars.scss","stuff.scss"],"names":[],"mappings":"AAAQ,uEAsBR,oBACG,iCCnBH,KACC,YAGD,KACC,YDHM,qBCIN,UDHO,KCIP,eDHU,MCIV,aACA,MDDM,KCIP,KACC,kBACA,YAGD,cACC,YACG,aAKJ,YACI,kBACA,YACA,UAGJ,UACC,UACA,kBAKD,GACC,YACA,kBAGD,MACC,iBACA,kBAKD,MACC,kBACA,UAEA,QACC,cAIF,GACC,eACA,MDjDM,QCkDN,yBACA,mBAEA,WACC,sCACA,kBAGD,UACC,sCACA,iBAIF,EACC,qBACA,MDpES,QCsET,QACG,0BACF,MDvEQ,QC2EV,UACC,MD3EM,QC8EP,MACC,gBAGD,GACC,MDnFM,QCoFN,kBACA,mBACA,oBAEA,WACC,qCACA,kBAGD,UACC,qCACA,iBAIF,OACC,MDlGO,QCqGR,MACC,MDrGM,QCwGP,KACC,kBAGD,MACC,6BAGD,QACC,0CAKD,WACC,aACA,uBACA,mBACA,qBACA,eACA,SAGD,SACC,qBAGD,eACC,qBAKD,sBAEA,KACI,UACA,cACA,gBAGJ,sBACI,WACA,eACA,kBAGJ,MACI,yBACA,gBACA,YDtKG,qBCuKH,UDtKI,KCuKJ,eDtKO,MCuKP,MDnKG,KCsKP,WACI,aACA,8BACA,wBACA,kCAEA,iBACI,gBAGJ,iBACI,gBAIR,iDACI,MDrLM,QC2LV,QACC,iBACA,kBACA,cAGD,QACC,cACA,aACG,iBACH,UAEA,gBACC,mCACA,mBAMF,KACC,cACA,4BACA","file":"stuff.css"}
|
||||
{"version":3,"sourceRoot":"","sources":["_vars.scss","stuff.scss"],"names":[],"mappings":"AAAQ,uEACA,0EAsBR,oBACG,iCCpBH,KACC,YAGD,KACC,YDFM,qBCGN,UDFO,KCGP,eDFU,MCGV,aACA,WAGD,KACC,kBACA,YAGD,cACC,YACG,aAKJ,YACI,kBACA,YACA,UAGJ,UACC,UACA,kBAKD,GACC,YACA,kBAGD,MACC,iBACA,kBAKD,MACC,kBACA,UAEA,QACC,cAIF,GACC,eACA,MDhDM,QCiDN,yBACA,mBAEA,WACC,sCACA,kBAGD,UACC,sCACA,iBAIF,EACC,qBACA,MDnES,QCqET,QACG,0BACF,MDtEQ,QC0EV,UACC,MD1EM,QC6EP,MACC,gBAGD,GACC,MDlFM,QCmFN,kBACA,mBACA,oBAEA,WACC,qCACA,kBAGD,UACC,qCACA,iBAIF,OACC,MDjGO,QCoGR,MACC,MDpGM,QCuGP,KACC,kBAGD,MACC,6BAGD,QACC,0CAKD,WACC,aACA,uBACA,mBACA,qBACA,eACA,SAGD,SACC,qBAGD,eACC,qBAKD,sBAEA,KACI,UACA,cACA,gBAGJ,sBACI,WACA,eACA,kBAGJ,MACI,yBACA,gBACA,YDrKG,qBCsKH,UDrKI,KCsKJ,eDrKO,MCsKP,MDlKG,KCqKP,WACI,aACA,8BACA,wBACA,kCAEA,iBACI,gBAGJ,iBACI,gBAIR,iDACI,MDpLM,QC0LV,QACC,iBACA,kBACA,cAGD,QACC,cACA,aACG,iBACH,UAEA,gBACC,mCACA,mBAMF,KACC,cACA,4BACA","file":"stuff.css"}
|
||||
|
|
@ -11,6 +11,10 @@
|
|||
<div class="text">
|
||||
<h1>Updates Archive</h1>
|
||||
|
||||
<h2>19 Feb 2022</h2>
|
||||
|
||||
<p>Dogz adoptions added!</p>
|
||||
|
||||
<h2>17 Feb 2022</h2>
|
||||
|
||||
<p>New layout is done! I'm super in love with all the pixels, it's so cuuutee.<br>
|
||||
|
|
|
|||
Loading…
Reference in a new issue