added JS code and added logo resizing

This commit is contained in:
Thomas G 2022-06-19 14:19:14 +10:00
parent e0393eb018
commit 0405f1f6e1
8 changed files with 30 additions and 9 deletions

BIN
MORBLOXlogoshort.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

View File

@ -13,10 +13,12 @@
<link rel="apple-touch-startup-image" href="MORBLOXSplash.png"/>
<link rel="icon" type="image/x-icon" href="MORBLOX.ico">
<link rel="stylesheet" href="main.css">
<script src="main.js"></script>
</head>
<body>
<header class="navbar">
<a href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogo.png" width="200" height="40"/></a>
<a id="logo_full" href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogo.png" width="200" height="40"/></a>
<a id="logo_small" href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogoshort.png" width="40" height="40"/></a>
<div class="navbarbuttoncontainer">
<a class="navbarbutton" href="home.html">Home</a>
<a class="navbarbutton" href="games.html">Games</a>

View File

@ -13,10 +13,12 @@
<link rel="apple-touch-startup-image" href="MORBLOXSplash.png"/>
<link rel="icon" type="image/x-icon" href="MORBLOX.ico">
<link rel="stylesheet" href="main.css">
<script src="main.js"></script>
</head>
<body>
<header class="navbar">
<a href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogo.png" width="200" height="40"/></a>
<a id="logo_full" href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogo.png" width="200" height="40"/></a>
<a id="logo_small" href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogoshort.png" width="40" height="40"/></a>
<div class="navbarbuttoncontainer">
<a class="navbarbutton" href="home.html">Home</a>
<a class="navbarbutton" href="games.html">Games</a>

View File

@ -13,10 +13,12 @@
<link rel="apple-touch-startup-image" href="MORBLOXSplash.png"/>
<link rel="icon" type="image/x-icon" href="MORBLOX.ico">
<link rel="stylesheet" href="main.css">
<script src="main.js"></script>
</head>
<body>
<header class="navbar">
<a href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogo.png" width="200" height="40"/></a>
<a id="logo_full" href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogo.png" width="200" height="40"/></a>
<a id="logo_small" href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogoshort.png" width="40" height="40"/></a>
<div class="navbarbuttoncontainer">
<a class="navbarbutton" href="home.html">Home</a>
<a class="navbarbutton" href="games.html">Games</a>
@ -33,7 +35,7 @@
<a class="smallnavbarbutton" href="Settings.html">Settings</a>
</div>
</header>
<header class="alert" id="invisible">
<header class="invisible" id="alert">
<p class="alerttext" >ALERT TEXT</p>
</header>
<div class="content">
@ -42,7 +44,6 @@
</div>
<footer>
<p>ABOUT MORBLOX...</p>
<p>hello world ....</p>
</footer>
</body>
</html>

View File

@ -13,10 +13,12 @@
<link rel="apple-touch-startup-image" href="MORBLOXSplash.png"/>
<link rel="icon" type="image/x-icon" href="MORBLOX.ico">
<link rel="stylesheet" href="main.css">
<script src="main.js"></script>
</head>
<body>
<header class="navbar">
<a href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogo.png" width="200" height="40"/></a>
<a id="logo_full" href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogo.png" width="200" height="40"/></a>
<a id="logo_small" href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogoshort.png" width="40" height="40"/></a>
<div class="navbarbuttoncontainer">
<a class="navbarbutton" href="home.html">Home</a>
<a class="navbarbutton" href="games.html">Games</a>

View File

@ -1,4 +1,4 @@
.alert {
#alert {
height: 50px;
margin: 0px;
padding-left: 5px;
@ -52,7 +52,7 @@
text-align: left;
background-color: black;
}
#invisible {
.invisible {
display: none !important;
}
html {

12
main.js Normal file
View File

@ -0,0 +1,12 @@
window.addEventListener('resize', function() {
var logo_full = document.getElementById("logo_full")
var logo_small = document.getElementById("logo_small")
var viewport_width = window.innerWidth;
if (viewport_width < 625) {
logo_full.className = "invisible";
logo_small.className = "";
} else {
logo_small.className = "invisible";
logo_full.className = "";
}
});

View File

@ -13,10 +13,12 @@
<link rel="apple-touch-startup-image" href="MORBLOXSplash.png"/>
<link rel="icon" type="image/x-icon" href="MORBLOX.ico">
<link rel="stylesheet" href="main.css">
<script src="main.js"></script>
</head>
<body>
<header class="navbar">
<a href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogo.png" width="200" height="40"/></a>
<a id="logo_full" href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogo.png" width="200" height="40"/></a>
<a id="logo_small" href="index.html"><img alt="MORBLOX Logo" src="MORBLOXlogoshort.png" width="40" height="40"/></a>
<div class="navbarbuttoncontainer">
<a class="navbarbutton" href="home.html">Home</a>
<a class="navbarbutton" href="games.html">Games</a>