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="apple-touch-startup-image" href="MORBLOXSplash.png"/>
<link rel="icon" type="image/x-icon" href="MORBLOX.ico"> <link rel="icon" type="image/x-icon" href="MORBLOX.ico">
<link rel="stylesheet" href="main.css"> <link rel="stylesheet" href="main.css">
<script src="main.js"></script>
</head> </head>
<body> <body>
<header class="navbar"> <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"> <div class="navbarbuttoncontainer">
<a class="navbarbutton" href="home.html">Home</a> <a class="navbarbutton" href="home.html">Home</a>
<a class="navbarbutton" href="games.html">Games</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="apple-touch-startup-image" href="MORBLOXSplash.png"/>
<link rel="icon" type="image/x-icon" href="MORBLOX.ico"> <link rel="icon" type="image/x-icon" href="MORBLOX.ico">
<link rel="stylesheet" href="main.css"> <link rel="stylesheet" href="main.css">
<script src="main.js"></script>
</head> </head>
<body> <body>
<header class="navbar"> <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"> <div class="navbarbuttoncontainer">
<a class="navbarbutton" href="home.html">Home</a> <a class="navbarbutton" href="home.html">Home</a>
<a class="navbarbutton" href="games.html">Games</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="apple-touch-startup-image" href="MORBLOXSplash.png"/>
<link rel="icon" type="image/x-icon" href="MORBLOX.ico"> <link rel="icon" type="image/x-icon" href="MORBLOX.ico">
<link rel="stylesheet" href="main.css"> <link rel="stylesheet" href="main.css">
<script src="main.js"></script>
</head> </head>
<body> <body>
<header class="navbar"> <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"> <div class="navbarbuttoncontainer">
<a class="navbarbutton" href="home.html">Home</a> <a class="navbarbutton" href="home.html">Home</a>
<a class="navbarbutton" href="games.html">Games</a> <a class="navbarbutton" href="games.html">Games</a>
@ -33,7 +35,7 @@
<a class="smallnavbarbutton" href="Settings.html">Settings</a> <a class="smallnavbarbutton" href="Settings.html">Settings</a>
</div> </div>
</header> </header>
<header class="alert" id="invisible"> <header class="invisible" id="alert">
<p class="alerttext" >ALERT TEXT</p> <p class="alerttext" >ALERT TEXT</p>
</header> </header>
<div class="content"> <div class="content">
@ -42,7 +44,6 @@
</div> </div>
<footer> <footer>
<p>ABOUT MORBLOX...</p> <p>ABOUT MORBLOX...</p>
<p>hello world ....</p>
</footer> </footer>
</body> </body>
</html> </html>

View File

@ -13,10 +13,12 @@
<link rel="apple-touch-startup-image" href="MORBLOXSplash.png"/> <link rel="apple-touch-startup-image" href="MORBLOXSplash.png"/>
<link rel="icon" type="image/x-icon" href="MORBLOX.ico"> <link rel="icon" type="image/x-icon" href="MORBLOX.ico">
<link rel="stylesheet" href="main.css"> <link rel="stylesheet" href="main.css">
<script src="main.js"></script>
</head> </head>
<body> <body>
<header class="navbar"> <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"> <div class="navbarbuttoncontainer">
<a class="navbarbutton" href="home.html">Home</a> <a class="navbarbutton" href="home.html">Home</a>
<a class="navbarbutton" href="games.html">Games</a> <a class="navbarbutton" href="games.html">Games</a>

View File

@ -1,4 +1,4 @@
.alert { #alert {
height: 50px; height: 50px;
margin: 0px; margin: 0px;
padding-left: 5px; padding-left: 5px;
@ -52,7 +52,7 @@
text-align: left; text-align: left;
background-color: black; background-color: black;
} }
#invisible { .invisible {
display: none !important; display: none !important;
} }
html { 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="apple-touch-startup-image" href="MORBLOXSplash.png"/>
<link rel="icon" type="image/x-icon" href="MORBLOX.ico"> <link rel="icon" type="image/x-icon" href="MORBLOX.ico">
<link rel="stylesheet" href="main.css"> <link rel="stylesheet" href="main.css">
<script src="main.js"></script>
</head> </head>
<body> <body>
<header class="navbar"> <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"> <div class="navbarbuttoncontainer">
<a class="navbarbutton" href="home.html">Home</a> <a class="navbarbutton" href="home.html">Home</a>
<a class="navbarbutton" href="games.html">Games</a> <a class="navbarbutton" href="games.html">Games</a>