mirror of
https://github.com/JonasunderscoreJones/Website-v1.git
synced 2025-10-25 11:39:18 +02:00
loads of progress. kinda
This commit is contained in:
Jonas_Jones
parent
b283560e10
commit
35d4d0ef3a
9 changed files with 233 additions and 31 deletions
59
.src/css/light/footer-old2.css
Normal file
59
.src/css/light/footer-old2.css
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background-image: url("/src/misc/footerBg.png");
|
||||
background-size: cover;
|
||||
z-index: -10;
|
||||
padding-top: 100px;
|
||||
overflow: hidden;
|
||||
}
|
||||
footer a {
|
||||
margin: 5px;
|
||||
background-color: #10335C;
|
||||
}
|
||||
|
||||
|
||||
.contactIconDiv {
|
||||
background-color: gray;
|
||||
width: 31px;
|
||||
border-radius: 5px;
|
||||
padding: 3px;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
|
||||
|
||||
#innerFooterBox {
|
||||
margin: 20%;
|
||||
margin-top: 600px;
|
||||
margin-bottom: 15px;
|
||||
display: flex;
|
||||
}
|
||||
#innerFooterBox div {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
|
||||
#toplinks {
|
||||
flex: content;
|
||||
flex-direction: column;
|
||||
}
|
||||
#topLinks a, h1 {
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
font-size: 30px;
|
||||
}
|
||||
#topLinks div a {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.footer-bar {
|
||||
background-color: black;
|
||||
padding: 0px;
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
.footer-bar a {
|
||||
background-color: black;
|
||||
}
|
||||
|
|
@ -1,10 +1,18 @@
|
|||
body {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
footer {
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background-image: url("/.src/misc/footerBg.png");
|
||||
background-image: url("/.src/assets/misc/footerBg.png");
|
||||
background-size: cover;
|
||||
z-index: -10;
|
||||
padding-top: 100px;
|
||||
position: absolute;
|
||||
}
|
||||
footer a {
|
||||
margin: 5px;
|
||||
|
|
|
|||
|
|
@ -12,6 +12,8 @@
|
|||
width: 100%;
|
||||
height: 500px;
|
||||
z-index: -1;
|
||||
background-image: url("/.src/assets/misc/headerBg.png");
|
||||
background-size: cover;
|
||||
}
|
||||
#header h1 {
|
||||
font-size: 150px;
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
|
||||
html {
|
||||
font-family: 'sary_soft_semiboldregular';
|
||||
background-color: #bababa;
|
||||
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
|
|
@ -20,6 +20,15 @@ html {
|
|||
|
||||
#headerContent {
|
||||
background-image: url("/.src/assets/misc/headerBg.png");
|
||||
background-position: bottom;
|
||||
background-position: bottom left;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-device-width:842px) {
|
||||
p, a {
|
||||
/*font-size: 50px;*/
|
||||
}
|
||||
#error-msg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
81
.src/css/light/popups.css
Normal file
81
.src/css/light/popups.css
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
.generic_popup {
|
||||
display: none;
|
||||
}
|
||||
@media only screen and (max-device-width:842px) {
|
||||
/* show the popup */
|
||||
.generic_popup { display: block; }
|
||||
}
|
||||
|
||||
.generic_popup {
|
||||
position:absolute;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background-color: rgb(0,0,0);
|
||||
background-color: rgba(0,0,0,0.4);
|
||||
-webkit-animation-name: fadeIn;
|
||||
-webkit-animation-duration: 0.4s;
|
||||
animation-name: fadeIn;
|
||||
animation-duration: 0.4s
|
||||
}
|
||||
|
||||
.generic_content {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
background-color: #fefefe;
|
||||
width: 100%;
|
||||
-webkit-animation-name: slideIn;
|
||||
-webkit-animation-duration: 0.4s;
|
||||
animation-name: slideIn;
|
||||
animation-duration: 0.4s
|
||||
}
|
||||
|
||||
.close {
|
||||
color: white;
|
||||
float: right;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.close:hover, .close:focus {
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.generic_header {
|
||||
padding: 2px 16px;
|
||||
background-color: #5cb85c;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.generic_body {padding: 2px 16px;}
|
||||
|
||||
.generic_footer {
|
||||
padding: 2px 16px;
|
||||
background-color: #5cb85c;
|
||||
color: white;
|
||||
}
|
||||
|
||||
@-webkit-keyframes slideIn {
|
||||
from {bottom: -300px; opacity: 0}
|
||||
to {bottom: 0; opacity: 1}
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {bottom: -300px; opacity: 0}
|
||||
to {bottom: 0; opacity: 1}
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadeIn {
|
||||
from {opacity: 0}
|
||||
to {opacity: 1}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {opacity: 0}
|
||||
to {opacity: 1}
|
||||
}
|
||||
34
footer.html
34
footer.html
|
|
@ -1,49 +1,55 @@
|
|||
<base target="_parent">
|
||||
<body>
|
||||
<footer>
|
||||
<link id="style-footer" rel="stylesheet" href="/css/footer.css">
|
||||
<link id="style-assets" rel="stylesheet" href="/css/assets.css">
|
||||
<link id="style-footer" rel="stylesheet" href="/.src/css/light/footer.css">
|
||||
<link id="style-assets" rel="stylesheet" href="/.src/css/light/assets.css">
|
||||
<link id="style-main" rel="stylesheet" href="/.src/css/light/main.css">
|
||||
|
||||
|
||||
<div id="footer">
|
||||
<div id="innerFooterBox">
|
||||
<div>
|
||||
<a class="contactIcon" href="https://youtube.com/c/JonasJonesJonasJones/">
|
||||
<div class="contactIconDiv">
|
||||
<img height="25px" src="youtube_icon.png">
|
||||
<img height="25px" src="/.src/assets/logos/youtube_icon.png">
|
||||
</div>
|
||||
</a>
|
||||
<a class="contactIcon" href="https://github.com/J-onasJones/">
|
||||
<div class="contactIconDiv">
|
||||
<img height="25px" src="github_icon.png">
|
||||
<img height="25px" src="/.src/assets/logos/github_icon.png">
|
||||
</div>
|
||||
</a>
|
||||
<a class="contactIcon" href="https://discord.gg/V2EsuUVmWh/">
|
||||
<div class="contactIconDiv">
|
||||
<img height="25px" src="discord_icon.png">
|
||||
<img height="25px" src="/.src/assets/logos/discord_icon.png">
|
||||
</div>
|
||||
</a>
|
||||
<a class="contactIcon" href="https://www.instagram.com/_jonas_jones_/">
|
||||
<div class="contactIconDiv">
|
||||
<img height="25px" src="instagram_icon.png">
|
||||
<img height="25px" src="/.src/assets/logos/instagram_icon.png">
|
||||
</div>
|
||||
</a>
|
||||
<a class="contactIcon" href="https://twitter.com/Jonas_Jones_/">
|
||||
<div class="contactIconDiv">
|
||||
<img height="25px" src="twitter_icon.png">
|
||||
<img height="25px" src="/.src/assets/logos/twitter_icon.png">
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="vl"></div>
|
||||
<div id="topLinks">
|
||||
<h1>Quick Access</h1>
|
||||
<div><a href="/news/"><img src="/src/iconsnews.png" height="23px" style="padding-right: 10px;">NEWS<i class="arrow right" style="border-color: white;"></i></a></div>
|
||||
<div><a href="/projects/"><img src="/src/icons/projects.png" height="23px" style="padding-right: 10px;">PROJECTS<i class="arrow right" style="border-color: white;"></i></a></div>
|
||||
<div><a href="/youtube/"><img src="/src/icons/youtube.png" height="23px" style="padding-right: 10px;">YOUTUBE<i class="arrow right" style="border-color: white;"></i></a></div>
|
||||
<div><a href="/downloads/"><img src="/src/icons/downloads.svg" height="23px" style="padding-right: 10px;">DOWNLOADS<i class="arrow right" style="border-color: white;"></i></a></div>
|
||||
<div><a href="/news/"><img src="/.src/assets/icons/news.png" height="23px" style="padding-right: 10px;">NEWS<i class="arrow right" style="border-color: white;"></i></a></div>
|
||||
<div><a href="/projects/"><img src="/.src/assets/icons/projects.png" height="23px" style="padding-right: 10px;">PROJECTS<i class="arrow right" style="border-color: white;"></i></a></div>
|
||||
<div><a href="/youtube/"><img src="/.src/assets/icons/youtube.png" height="23px" style="padding-right: 10px;">YOUTUBE<i class="arrow right" style="border-color: white;"></i></a></div>
|
||||
<div><a href="/downloads/"><img src="/.src/assets/icons/downloads.svg" height="23px" style="padding-right: 10px;">DOWNLOADS<i class="arrow right" style="border-color: white;"></i></a></div>
|
||||
<div><a></a></div>
|
||||
<div><a href="/about/"><img src="/src/icons/contact.png" height="23px" style="padding-right: 10px;">CONTACT<i class="arrow right" style="border-color: white;"></i></a></div>
|
||||
<div><a href="/license/"><img src="/src/icons/license.png" height="23px" style="padding-right: 10px;">LICENSE <i class="arrow right" style="border-color: white;"></i></a></div>
|
||||
<div><a href="/about/"><img src="/.src/assets/icons/contact.png" height="23px" style="padding-right: 10px;">CONTACT<i class="arrow right" style="border-color: white;"></i></a></div>
|
||||
<div><a href="/license/"><img src="/.src/assets/icons/license.png" height="23px" style="padding-right: 10px;">LICENSE <i class="arrow right" style="border-color: white;"></i></a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bar">
|
||||
<a>Website by Jonas_Jones, hosted on <a style="color: white;" href="https://github.com/J-onasJones/J-onasJones.github.io">GitHub</a> - 2022</a>
|
||||
</div>
|
||||
</footer>
|
||||
</footer>
|
||||
</body>
|
||||
|
|
@ -1,7 +1,8 @@
|
|||
<base target="_parent">
|
||||
<header>
|
||||
<link id="style-topnav" rel="stylesheet" href=".src/css/light/topnav.css">
|
||||
<link id="style-header" rel="stylesheet" href=".src/css/light/header.css">
|
||||
<link id="style-topnav" rel="stylesheet" href="/.src/css/light/topnav.css">
|
||||
<link id="style-header" rel="stylesheet" href="/.src/css/light/header.css">
|
||||
<link id="style-main" rel="stylesheet" href="/.src/css/light/main.css">
|
||||
|
||||
<div class="navbar">
|
||||
<a href="" style="padding: 3px;padding-bottom: 0px;"><img src="/.src/assets/logos/logo_icon.png" height="39px"></a>
|
||||
|
|
|
|||
10
index.html
10
index.html
|
|
@ -1,11 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<link rel="icon" type="image/x-icon" href="logo_icon.png">
|
||||
<link id="style-main" rel="stylesheet" href="main.css">
|
||||
<link id="style-main" rel="stylesheet" href="/.src/css/light/main.css">
|
||||
<title>DBPJP</title>
|
||||
<header>
|
||||
<link id="style-topnav" rel="stylesheet" href="/css/topnav.css">
|
||||
<link id="style-header" rel="stylesheet" href="/css/header.css">
|
||||
<link id="style-topnav" rel="stylesheet" href="/.src/css/light/topnav.css">
|
||||
<link id="style-header" rel="stylesheet" href="/.src/css/light/header.css">
|
||||
|
||||
<div class="navbar">
|
||||
<a href="" style="padding: 3px;padding-bottom: 0px;"><img src="logo_icon.png" height="39px"></a>
|
||||
|
|
@ -89,8 +89,8 @@
|
|||
</body>
|
||||
|
||||
<footer>
|
||||
<link id="style-footer" rel="stylesheet" href="/css/footer.css">
|
||||
<link id="style-assets" rel="stylesheet" href="/css/assets.css">
|
||||
<link id="style-footer" rel="stylesheet" href="/.src/css/light/footer.css">
|
||||
<link id="style-assets" rel="stylesheet" href="/.src/css/light/assets.css">
|
||||
<div id="footer">
|
||||
<div id="innerFooterBox">
|
||||
<div>
|
||||
|
|
|
|||
48
uwu.html
48
uwu.html
|
|
@ -1,18 +1,45 @@
|
|||
<html>
|
||||
<style>
|
||||
|
||||
</style>
|
||||
<html style="background-color: #bababa;">
|
||||
<body style="margin: 0px;">
|
||||
<link rel="icon" type="image/x-icon" href="/.src/assets/logos/logo_icon.png">
|
||||
<link id="style-main" rel="stylesheet" href="/.src/css/light/main.css">
|
||||
<title>Template</title>
|
||||
<div id="headerDiv"><object type="text/html" data="header.html" style="overflow:hidden; width: 100%; height: 570px;"></object>
|
||||
<div id="headerContent" style="height: 90%;width:100%;position:absolute;top:55px;z-index: -2;">
|
||||
<div id="headerContent" style="height: 90%;max-height: 600px;min-height: 400px;width:100%;position:absolute;top:55px;z-index: -2;">
|
||||
<h1 style="position: absolute;left: 70px;top: 100px;z-index: -1;font-size: 150;">Template</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div id="footerDiv" style="border: 1px solid blue;"><object type="text/html" data="footer.html" style="overflow:hidden; width: 100%; height: 151%"></object></div>
|
||||
<div id="footerDiv"><object type="text/html" data="footer.html" style="overflow:hidden; width: 100%; height: 151%"></object></div>
|
||||
|
||||
|
||||
<link id="style-popup" rel="stylesheet" href="/.src/css/light/popups.css">
|
||||
<div id="small_devices" style="position: fixed; bottom: 0;height: 100%; width: 100%;">
|
||||
<div id="small_devices" class="generic_popup">
|
||||
<div class="generic_content">
|
||||
<div class="generic_header">
|
||||
<span class="close" style="font-size: 70px;">×</span>
|
||||
<h2>Mobile View not supported (yet)</h2>
|
||||
</div>
|
||||
<div class="generic_body">
|
||||
<p>This website hasn't (yet) been optimized for mobile with small screens.</p>
|
||||
<p>It is recommended to use a desktop or laptop computer to view this website.</p>
|
||||
<p>The issues include small font size, bad website formatting and more.</p>
|
||||
<p>Be prepared for these issues (and more) or use a device with a bigger screen...</p>
|
||||
</div>
|
||||
<div class="generic_footer">
|
||||
<h3>This issue is being adressed. Stay tuned for fixes!</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
</body>
|
||||
<script>
|
||||
|
|
@ -39,5 +66,14 @@
|
|||
assets.href = "/.src/css/light/assets.css";
|
||||
}
|
||||
}
|
||||
var span = document.getElementsByClassName("close")[0];
|
||||
span.onclick = function() {
|
||||
small_devices.style.display = "none";
|
||||
}
|
||||
window.onclick = function(event) {
|
||||
if (event.target == small_devices) {
|
||||
small_devices.style.display = "none";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue